From 2e324433ca02b0ee80d47e09d3e9c4ca1e992053 Mon Sep 17 00:00:00 2001 From: Lasse Boisen Andersen Date: Thu, 7 Jan 2016 13:11:44 +0100 Subject: [PATCH] display error and reset when API rejects form submit --- src/assets/error-icon.svg | 12 ++++++++++ src/main.js | 20 ++++++++++++++--- src/styles/main.scss | 40 +++++++++++++++++++++++---------- src/templates/booking-page.html | 1 + 4 files changed, 58 insertions(+), 15 deletions(-) create mode 100644 src/assets/error-icon.svg diff --git a/src/assets/error-icon.svg b/src/assets/error-icon.svg new file mode 100644 index 00000000..58396f13 --- /dev/null +++ b/src/assets/error-icon.svg @@ -0,0 +1,12 @@ + + + + error-icon + Created with Sketch. + + + + + + + diff --git a/src/main.js b/src/main.js index 38215b8b..6c0f41dd 100644 --- a/src/main.js +++ b/src/main.js @@ -220,12 +220,12 @@ function TimekitBooking() { var decideCalendarSize = function() { var view = 'agendaWeek'; - var height = 470; + var height = 420; var rootWidth = rootTarget.width(); if (rootWidth < 480) { view = 'basicDay'; - height = 346; + height = 335; rootTarget.addClass('is-small'); } else { rootTarget.removeClass('is-small'); @@ -299,6 +299,7 @@ function TimekitBooking() { closeIcon: require('!svg-inline!./assets/close-icon.svg'), checkmarkIcon: require('!svg-inline!./assets/checkmark-icon.svg'), loadingIcon: require('!svg-inline!./assets/loading-spinner.svg'), + errorIcon: require('!svg-inline!./assets/error-icon.svg'), submitText: 'Book it', successMessageTitle: 'Thanks!', successMessagePart1: 'An invitation has been sent to:', @@ -360,7 +361,7 @@ function TimekitBooking() { var formElement = $(form); // Abort if form is submitting, have submitted or does not validate - if(formElement.hasClass('loading') || formElement.hasClass('success') || !e.target.checkValidity()) { + if(formElement.hasClass('loading') || formElement.hasClass('success') || formElement.hasClass('error') || !e.target.checkValidity()) { var submitButton = formElement.find('.bookingjs-form-button'); submitButton.addClass('button-shake'); setTimeout(function() { @@ -387,7 +388,20 @@ function TimekitBooking() { formElement.removeClass('loading').addClass('success'); }).catch(function(response){ + utils.doCallback('createEventFailed', config, response); + + var submitButton = formElement.find('.bookingjs-form-button'); + submitButton.addClass('button-shake'); + setTimeout(function() { + submitButton.removeClass('button-shake'); + }, 500); + + formElement.removeClass('loading').addClass('error'); + setTimeout(function() { + formElement.removeClass('error'); + }, 2000); + throw new Error('TimekitBooking - An error with Timekit createEvent occured, context: ' + response); }); diff --git a/src/styles/main.scss b/src/styles/main.scss index 26bd156c..8e528781 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -16,6 +16,7 @@ $textColor: #333; $textLightColor: #AEAEAE; $primaryColor: #689AD8; $primaryDarkColor: darken($primaryColor, 10%); +$errorColor: #D83B46; $fontFamily: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; // Classes @@ -157,13 +158,12 @@ $fontFamily: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; text-align: center; font-size: 34px; font-weight: 400; - margin-top: 90px; - margin-bottom: 20px; + margin-top: 70px; + margin-bottom: 10px; .is-small & { - font-size: 24px; + font-size: 27px; margin-top: 60px; - margin-bottom: 15px; } } @@ -171,11 +171,12 @@ $fontFamily: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; text-align: center; font-size: 17px; font-weight: 400; - margin-bottom: 70px; + margin-bottom: 50px; + margin-top: 10px; .is-small & { font-size: 15px; - margin-bottom: 30px; + margin-bottom: 35px; } } } @@ -278,29 +279,33 @@ $fontFamily: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; max-width: 200px; .success-text, + .error-text, .loading-text { transition: opacity 0.3s ease; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); + opacity: 0; } .inactive-text { + white-space: nowrap; opacity: 1; } - .loading-text, - .success-text { - opacity: 0; - } - .loading-text svg { height: 19px; width: 19px; animation: spin 0.6s infinite linear; } + .error-text svg { + height: 15px; + width: 15px; + margin-top: 2px; + } + .success-text svg { height: 15px; margin-top: 2px; @@ -321,17 +326,28 @@ $fontFamily: 'Open Sans', Helvetica, Tahoma, Arial, sans-serif; &.loading &-button:hover { max-width: 80px; background-color: #B1B1B1; + cursor: not-allowed; .inactive-text { opacity: 0; } .loading-text { opacity: 1; } } + &.error &-button, + &.error &-button:hover { + max-width: 80px; + background-color: $errorColor; + cursor: not-allowed; + + .inactive-text { opacity: 0; } + .error-text { opacity: 1; } + } + &.success &-button, &.success &-button:hover { max-width: 80px; background-color: #5BAF56; + cursor: not-allowed; - .loading-text, .inactive-text { opacity: 0; } .success-text { opacity: 1; } diff --git a/src/templates/booking-page.html b/src/templates/booking-page.html index 29cc736b..7cb15a57 100644 --- a/src/templates/booking-page.html +++ b/src/templates/booking-page.html @@ -19,6 +19,7 @@

{{ chosenTime }}