@recras/online-booking-js 1.9.0 → 1.10.3

package/README.md

@@ -1,7 +1,7 @@
 [![Build Status](https://travis-ci.org/Recras/online-booking-js.svg?branch=master)](https://travis-ci.org/Recras/online-booking-js)
 
 # Recras JS Integration Library
-Version: 1.9.0
+Version: 1.10.3
 
 JS library for easy online booking, contact form, and voucher integration
 
@@ -131,12 +131,12 @@ the constants in [src/eventHelper.js](src/eventHelper.js).
 When Google Analytics integration is enabled, certain events sent to GA include a label and/or value:
 
 | Event                              | Label                             | Value                               |
-| ---------------------------------- | --------------------------------- | ----------------------------------- |
+| ---------------------------------- | --------------------------------- |-------------------------------------|
 | `Recras:Booking:PackageChanged`    | Package name                      | Package ID                          |
 | `Recras:Booking:DateSelected`      | Selected date, in ISO 8601 format | N/A                                 |
-| `Recras:Booking:BuyInProgress`     | Package name                      | Package ID                          |
+| `Recras:Booking:BuyInProgress`     | Package name                      | Rounded total amount of the booking |
 | `Recras:Booking:RedirectToPayment` | N/A                               | Rounded total amount of the booking |
 | `Recras:ContactForm:Submit`        | N/A                               | Form ID                             |
 | `Recras:Voucher:TemplateChanged`   | N/A                               | Template ID                         |
-| `Recras:Voucher:BuyInProgress`     | Template name                     | Template ID                         |
+| `Recras:Voucher:BuyInProgress`     | Template name                     | Rounded total amount of the order   |
 | `Recras:Voucher:RedirectToPayment` | N/A                               | Rounded total amount of the order   |

package/changelog.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.10.3 (2021-12-16)
+* Change value of "BuyInProgress" events from package/template ID (bookings/vouchers, respectively) to total price
+
+## 1.10.2 (2021-10-07)
+* Clicking required checkboxes would become slow after clicking a few times - fixed
+
+## 1.10.1 (2021-09-09)
+* Make redirect without Mollie more robust
+
+## 1.10.0 (2021-09-08)
+* Replace alerts with inline messages
+
 ## 1.9.0 (2021-08-16)
 * Allow changing the term for number of vouchers
 

package/dist/onlinebooking.js

@@ -50,7 +50,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*******************************
 *  Recras integration library  *
-*  v 1.9.0                     *
+*  v 1.10.3                    *
 *******************************/
 var RecrasBooking = /*#__PURE__*/function () {
   function RecrasBooking() {
@@ -1153,6 +1153,10 @@ var RecrasBooking = /*#__PURE__*/function () {
       _toConsumableArray(this.findElements('.recras-input-invalid')).forEach(function (el) {
         el.classList.remove('recras-input-invalid');
       });
+
+      _toConsumableArray(this.findElements('.recras-success')).forEach(function (el) {
+        el.parentNode.removeChild(el);
+      });
     }
     /**
      * requiredAmount calculates the amount N needed of Y in the sentence 'product X requires N times product Y'
@@ -1675,7 +1679,7 @@ var RecrasBooking = /*#__PURE__*/function () {
       }, 0);
 
       if (this.bookingSize() === 0 && productSum === 0) {
-        window.alert(this.languageHelper.translate('NO_PRODUCTS'));
+        this.error(this.languageHelper.translate('NO_PRODUCTS'));
         return false;
       }
 
@@ -1685,7 +1689,7 @@ var RecrasBooking = /*#__PURE__*/function () {
         return false;
       }
 
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED, this.selectedPackage.arrangement, this.selectedPackage.id);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED, this.selectedPackage.arrangement, Math.round(this.getTotalPrice()));
       var paymentMethod = this.paymentMethods(this.selectedPackage)[0];
       var paymentMethodEl = this.findElement('[name="paymentMethod"]:checked');
 
@@ -1723,23 +1727,24 @@ var RecrasBooking = /*#__PURE__*/function () {
       }
 
       return this.postJson('onlineboeking/reserveer', bookingParams).then(function (json) {
-        //TODO: redirect for payment afterwards. This needs to be implemented in Recras first
         if (json.payment_url) {
+          _this28.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this28.getTotalPrice()));
+
           window.top.location.href = json.payment_url;
+        } else if (json.redirect) {
+          window.top.location.href = json.redirect;
         } else if (json.message && json.status) {
-          if (bookingParams.redirect_url) {
-            _this28.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this28.getTotalPrice()));
+          _this28.findElement('.recras-amountsform').reset();
 
-            window.top.location.href = bookingParams.redirect_url;
-          } else {
-            _this28.findElement('.recras-amountsform').reset();
+          _this28.findElement('.recras-datetime').reset();
 
-            _this28.findElement('.recras-datetime').reset();
+          _this28.findElement('.recras-contactform').reset();
 
-            _this28.findElement('.recras-contactform').reset();
+          _this28.element.scrollIntoView({
+            behavior: 'smooth'
+          });
 
-            window.alert(json.message);
-          }
+          _this28.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(json.message, "</p>"));
         } else {
           console.log(json);
         }
@@ -1962,6 +1967,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
       throw new Error(this.languageHelper.translate('ERR_NO_FORM'));
     }
 
+    this.checkboxEventListeners = [];
     this.eventHelper = new RecrasEventHelper();
     this.eventHelper.setEvents(this.options.getAnalyticsEvents());
     this.element = this.options.getElement();
@@ -2013,10 +2019,6 @@ var RecrasContactForm = /*#__PURE__*/function () {
           group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', "<div class=\"recrasError\">".concat(_this32.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED'), "</div>"));
           isOkay = false;
         }
-
-        _toConsumableArray(group.querySelectorAll('input')).forEach(function (el) {
-          el.addEventListener('change', _this32.checkRequiredCheckboxes.bind(_this32));
-        });
       });
 
       return isOkay;
@@ -2288,6 +2290,10 @@ var RecrasContactForm = /*#__PURE__*/function () {
       _toConsumableArray(this.findElements('.recrasError')).forEach(function (el) {
         el.parentNode.removeChild(el);
       });
+
+      _toConsumableArray(this.findElements('.recras-success')).forEach(function (el) {
+        el.parentNode.removeChild(el);
+      });
     }
   }, {
     key: "hasEmptyRequiredFields",
@@ -2463,6 +2469,12 @@ var RecrasContactForm = /*#__PURE__*/function () {
       }).then(function (html) {
         _this37.appendHtml(html);
 
+        _toConsumableArray(_this37.findElements('.checkboxGroupRequired')).forEach(function (group) {
+          _toConsumableArray(group.querySelectorAll('input')).forEach(function (el) {
+            el.addEventListener('change', _this37.checkRequiredCheckboxes.bind(_this37));
+          });
+        });
+
         _this37.findElement('.recras-contactform').addEventListener('submit', _this37.submitForm.bind(_this37));
 
         if (_this37.hasBookingDateField()) {
@@ -2552,7 +2564,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
       this.removeErrors('.recras-contactform');
 
       if (this.isEmpty()) {
-        submitButton.parentNode.insertAdjacentHTML('afterend', "<div class=\"booking-error\">".concat(this.languageHelper.translate('ERR_CONTACT_FORM_EMPTY'), "</div>"));
+        submitButton.parentNode.insertAdjacentHTML('beforeend', "<div class=\"booking-error\">".concat(this.languageHelper.translate('ERR_CONTACT_FORM_EMPTY'), "</div>"));
         return false;
       } else if (this.hasEmptyRequiredFields() || !this.isValid()) {
         this.showInlineErrors();
@@ -2572,11 +2584,16 @@ var RecrasContactForm = /*#__PURE__*/function () {
           if (_this38.options.getRedirectUrl()) {
             window.top.location.href = _this38.options.getRedirectUrl();
           } else {
-            window.alert(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'));
+            _this38.element.scrollIntoView({
+              behavior: 'smooth'
+            });
+
+            _this38.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'), "</p>"));
+
             submitButton.parentNode.reset();
           }
         } else {
-          window.alert(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
+          _this38.error(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
         }
 
         submitButton.removeAttribute('disabled');
@@ -2598,7 +2615,7 @@ var RecrasCSSHelper = /*#__PURE__*/function () {
   _createClass(RecrasCSSHelper, null, [{
     key: "cssBooking",
     value: function cssBooking() {
-      return "\n.recras-onlinebooking {\n    max-width: 800px;\n}\n.recras-onlinebooking > form + form, .recras-finalise {\n    border-top: 2px solid #dedede; /* Any love for Kirby out there? */\n}\n.recras-amountsform > div {\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr 5em 7em;\n    grid-template-columns: 1fr 5em 7em;\n}\n.recras-amountsform > div > div:first-child {\n    -ms-grid-column: 1;\n}\n.recras-amountsform > div > input {\n    -ms-grid-column: 2;\n}\n.recras-amountsform input {\n    width: auto; /* Firefox fix */\n}\n.recras-amountsform > div > div:last-child {\n    -ms-grid-column: 3;\n}\n.recras-input-invalid {\n    border: 1px solid hsl(0, 50%, 50%);\n}\n.booking-error, .minimum-amount {\n    color: hsl(0, 50%, 50%);\n}\n.minimum-amount {\n    padding-left: 0.5em;\n}\n.recras-datetime {\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 30% 70%;\n    grid-template-columns: 30% 70%;\n}\n.recras-datetime > * {\n    margin: 0.25em 0;\n}\n.recras-datetime label {\n    display: block;\n    -ms-grid-column: 1;\n}\n.recras-datetime input, .recras-datetime select {\n    max-width: 12em;\n    -ms-grid-column: 2;\n}\n.recras-datetime > :nth-child(-n + 2) {\n    -ms-grid-row: 1;\n}\n.recras-datetime > :nth-last-child(-n + 2) {\n    -ms-grid-row: 2;\n}\n.time-preview {\n    padding-right: 0.5em;\n}\n.recrasUnitPrice {\n    opacity: 0.5;\n}\n.recras-onlinebooking .recrasHidden {\n    display: none;\n}\n";
+      return "\n.recras-onlinebooking {\n    max-width: 800px;\n}\n.recras-onlinebooking > form + form, .recras-finalise {\n    border-top: 2px solid #dedede; /* Any love for Kirby out there? */\n}\n.recras-amountsform > div {\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr 5em 7em;\n    grid-template-columns: 1fr 5em 7em;\n}\n.recras-amountsform > div > div:first-child {\n    -ms-grid-column: 1;\n}\n.recras-amountsform > div > input {\n    -ms-grid-column: 2;\n}\n.recras-amountsform input {\n    width: auto; /* Firefox fix */\n}\n.recras-amountsform > div > div:last-child {\n    -ms-grid-column: 3;\n}\n.recras-input-invalid {\n    border: 1px solid hsl(0, 50%, 50%);\n}\n.booking-error, .minimum-amount {\n    color: hsl(0, 50%, 50%);\n}\n.recras-success {\n    color: hsl(120, 40%, 40%);\n}\n.minimum-amount {\n    padding-left: 0.5em;\n}\n.recras-datetime {\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 30% 70%;\n    grid-template-columns: 30% 70%;\n}\n.recras-datetime > * {\n    margin: 0.25em 0;\n}\n.recras-datetime label {\n    display: block;\n    -ms-grid-column: 1;\n}\n.recras-datetime input, .recras-datetime select {\n    max-width: 12em;\n    -ms-grid-column: 2;\n}\n.recras-datetime > :nth-child(-n + 2) {\n    -ms-grid-row: 1;\n}\n.recras-datetime > :nth-last-child(-n + 2) {\n    -ms-grid-row: 2;\n}\n.time-preview {\n    padding-right: 0.5em;\n}\n.recrasUnitPrice {\n    opacity: 0.5;\n}\n.recras-onlinebooking .recrasHidden {\n    display: none;\n}\n";
     }
   }, {
     key: "cssGlobal",
@@ -3629,7 +3646,7 @@ var RecrasVoucher = /*#__PURE__*/function () {
         return false;
       }
 
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED, this.selectedTemplate.name, this.selectedTemplate.id);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED, this.selectedTemplate.name, Math.round(this.totalPrice()));
       this.findElement('.buyTemplate').setAttribute('disabled', 'disabled');
       var payload = {
         voucher_template_id: this.selectedTemplate.id,

package/docs/demo.css

@@ -58,6 +58,7 @@ button:disabled {
 }
 input:not([type="checkbox"]):not([type="radio"]):not(input[type="number"]), select, textarea, .radioGroup {
     font: inherit;
+    max-width: 100%;
     width: 300px;
 }
 input[type="number"] {
@@ -83,6 +84,11 @@ input[type="number"] {
     border: 1px solid #a00 !important;
     padding: 0.5em !important;
 }
+.recras-success {
+    background: hsl(120, 25%, 96%);
+    border: 1px solid hsl(120, 40%, 40%);
+    padding: 0.5em !important;
+}
 
 .recras-onlinebooking > form + form, .recras-finalise {
     border-top: 2px solid hsla(147, 25%, 25%, 0.25);

package/docs/onlinebooking.html

@@ -20,7 +20,7 @@
         console.log(params);
     };
     const recrasOptions = {
-        recras_hostname: 'demo.recras.nl', // Required
+        recras_hostname: 'staging-7164-boek-3v9yx2.recras.nl', // Required
         element: document.getElementById('onlinebooking'), // Required
         locale: 'nl_NL', // Optional, default is nl_NL. Valid values are de_DE, en_GB, nl_NL, sv_SE
         //package_id: 7, // Optional, this will skip the package selection step for online booking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recras/online-booking-js",
-  "version": "1.9.0",
+  "version": "1.10.3",
   "description": "JS library for easy integration of Recras online booking and voucher sales",
   "main": "dist/onlinebooking.js",
   "scripts": {

package/src/booking.js

@@ -1,6 +1,6 @@
 /*******************************
 *  Recras integration library  *
-*  v 1.9.0                     *
+*  v 1.10.3                    *
 *******************************/
 
 class RecrasBooking {
@@ -906,6 +906,9 @@ class RecrasBooking {
         [...this.findElements('.recras-input-invalid')].forEach(el => {
             el.classList.remove('recras-input-invalid');
         });
+        [...this.findElements('.recras-success')].forEach(el => {
+            el.parentNode.removeChild(el);
+        });
     }
 
     /**
@@ -1376,7 +1379,7 @@ ${ msgs[1] }</p></div>`);
         let productCounts = this.productCounts().map(line => line.aantal);
         let productSum = productCounts.reduce((a, b) => a + b, 0);
         if (this.bookingSize() === 0 && productSum === 0) {
-            window.alert(this.languageHelper.translate('NO_PRODUCTS'));
+            this.error(this.languageHelper.translate('NO_PRODUCTS'));
             return false;
         }
         let status = this.contactForm.checkRequiredCheckboxes();
@@ -1388,7 +1391,7 @@ ${ msgs[1] }</p></div>`);
             RecrasEventHelper.PREFIX_BOOKING,
             RecrasEventHelper.EVENT_BOOKING_BOOKING_SUBMITTED,
             this.selectedPackage.arrangement,
-            this.selectedPackage.id
+            Math.round(this.getTotalPrice())
         );
 
         let paymentMethod = this.paymentMethods(this.selectedPackage)[0];
@@ -1424,24 +1427,27 @@ ${ msgs[1] }</p></div>`);
         }
 
         return this.postJson('onlineboeking/reserveer', bookingParams).then(json => {
-            //TODO: redirect for payment afterwards. This needs to be implemented in Recras first
             if (json.payment_url) {
+                this.eventHelper.sendEvent(
+                    RecrasEventHelper.PREFIX_BOOKING,
+                    RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT,
+                    null,
+                    Math.round(this.getTotalPrice())
+                );
                 window.top.location.href = json.payment_url;
+            } else if (json.redirect) {
+                window.top.location.href = json.redirect;
             } else if (json.message && json.status) {
-                if (bookingParams.redirect_url) {
-                    this.eventHelper.sendEvent(
-                        RecrasEventHelper.PREFIX_BOOKING,
-                        RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT,
-                        null,
-                        Math.round(this.getTotalPrice())
-                    );
-                    window.top.location.href = bookingParams.redirect_url;
-                } else {
-                    this.findElement('.recras-amountsform').reset();
-                    this.findElement('.recras-datetime').reset();
-                    this.findElement('.recras-contactform').reset();
-                    window.alert(json.message);
-                }
+                this.findElement('.recras-amountsform').reset();
+                this.findElement('.recras-datetime').reset();
+                this.findElement('.recras-contactform').reset();
+                this.element.scrollIntoView({
+                    behavior: 'smooth',
+                });
+                this.element.insertAdjacentHTML(
+                    'afterbegin',
+                    `<p class="recras-success">${ json.message }</p>`
+                );
             } else {
                 console.log(json);
             }

package/src/contactForm.js

@@ -11,6 +11,8 @@ class RecrasContactForm {
             throw new Error(this.languageHelper.translate('ERR_NO_FORM'));
         }
 
+        this.checkboxEventListeners = [];
+
         this.eventHelper = new RecrasEventHelper();
         this.eventHelper.setEvents(this.options.getAnalyticsEvents());
 
@@ -53,9 +55,6 @@ class RecrasContactForm {
                 group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', `<div class="recrasError">${ this.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED') }</div>`);
                 isOkay = false;
             }
-            [...group.querySelectorAll('input')].forEach(el => {
-                el.addEventListener('change', this.checkRequiredCheckboxes.bind(this));
-            });
         });
         return isOkay;
     }
@@ -263,6 +262,9 @@ class RecrasContactForm {
         [...this.findElements('.recrasError')].forEach(el => {
             el.parentNode.removeChild(el);
         });
+        [...this.findElements('.recras-success')].forEach(el => {
+            el.parentNode.removeChild(el);
+        });
     }
 
     hasEmptyRequiredFields() {
@@ -411,7 +413,14 @@ class RecrasContactForm {
             }))
             .then(html => {
                 this.appendHtml(html);
+
+                [...this.findElements('.checkboxGroupRequired')].forEach(group => {
+                    [...group.querySelectorAll('input')].forEach(el => {
+                        el.addEventListener('change', this.checkRequiredCheckboxes.bind(this));
+                    });
+                });
                 this.findElement('.recras-contactform').addEventListener('submit', this.submitForm.bind(this));
+
                 if (this.hasBookingDateField()) {
                     let pikadayOptions = Object.assign(
                         RecrasCalendarHelper.defaultOptions(),
@@ -491,7 +500,7 @@ class RecrasContactForm {
         this.removeErrors('.recras-contactform');
         if (this.isEmpty()) {
             submitButton.parentNode.insertAdjacentHTML(
-                'afterend',
+                'beforeend',
                 `<div class="booking-error">${ this.languageHelper.translate('ERR_CONTACT_FORM_EMPTY') }</div>`
             );
             return false;
@@ -521,11 +530,17 @@ class RecrasContactForm {
                 if (this.options.getRedirectUrl()) {
                     window.top.location.href = this.options.getRedirectUrl();
                 } else {
-                    window.alert(this.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'));
+                    this.element.scrollIntoView({
+                        behavior: 'smooth',
+                    });
+                    this.element.insertAdjacentHTML(
+                        'afterbegin',
+                        `<p class="recras-success">${ this.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS') }</p>`
+                    );
                     submitButton.parentNode.reset();
                 }
             } else {
-                window.alert(this.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
+                this.error(this.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
             }
             submitButton.removeAttribute('disabled');
             this.loadingIndicatorHide();

package/src/cssHelper.js

@@ -32,6 +32,9 @@ class RecrasCSSHelper {
 .booking-error, .minimum-amount {
     color: hsl(0, 50%, 50%);
 }
+.recras-success {
+    color: hsl(120, 40%, 40%);
+}
 .minimum-amount {
     padding-left: 0.5em;
 }

package/src/vouchers.js

@@ -53,7 +53,7 @@ class RecrasVoucher {
             RecrasEventHelper.PREFIX_VOUCHER,
             RecrasEventHelper.EVENT_VOUCHER_VOUCHER_SUBMITTED,
             this.selectedTemplate.name,
-            this.selectedTemplate.id
+            Math.round(this.totalPrice())
         );
         this.findElement('.buyTemplate').setAttribute('disabled', 'disabled');
 

package/upgrading.md

@@ -1,3 +1,6 @@
+# 1.10.2 -> 1.10.3
+* The value of "BuyInProgress" events sent to Google Analytics was changed from package ID to total price. This is true for both bookings and vouchers. We consider this a bugfix and not a backwards-compatibility breaking change.
+
 # 1.2.0 -> 1.3.0
 * Option `showSubmit` for contact forms (only used internally) is now named `standalone`. The old option will remain as alias until the next major version.