@recras/online-booking-js 1.10.2 → 2.0.0

package/dist/onlinebooking.js

@@ -46,11 +46,11 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 /*******************************
 *  Recras integration library  *
-*  v 1.10.2                    *
+*  v 2.0.0                     *
 *******************************/
 var RecrasBooking = /*#__PURE__*/function () {
   function RecrasBooking() {
@@ -438,7 +438,10 @@ var RecrasBooking = /*#__PURE__*/function () {
         return Promise.resolve(false);
       } else {
         this.clearAllExceptPackageSelection();
-        this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, selectedPackage[0].arrangement, selectedPackage[0].id);
+        this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, selectedPackage[0].arrangement, selectedPackage[0].id, {
+          content_type: 'package',
+          item_id: selectedPackage[0].id
+        });
       }
 
       this.selectedPackage = selectedPackage[0];
@@ -1195,17 +1198,7 @@ var RecrasBooking = /*#__PURE__*/function () {
       }
 
       this.findElement('#recras-onlinebooking-time option[value]').selected = true;
-      var event;
-
-      try {
-        event = new Event('change');
-      } catch (e) {
-        // IE
-        event = document.createEvent('Event');
-        event.initEvent('change', true, true);
-      }
-
-      this.findElement('#recras-onlinebooking-time').dispatchEvent(event);
+      this.findElement('#recras-onlinebooking-time').dispatchEvent(new Event('change'));
     }
   }, {
     key: "setDiscountStatus",
@@ -1666,10 +1659,52 @@ var RecrasBooking = /*#__PURE__*/function () {
       });
       return attachments;
     }
+  }, {
+    key: "formatGA4Items",
+    value: function formatGA4Items() {
+      var _this28 = this;
+
+      var items = [];
+
+      if (this.bookingSize() > 0) {
+        var pck = this.selectedPackage;
+        items.push({
+          item_name: pck.weergavenaam || pck.arrangement,
+          price: this.bookingSizePrice(pck),
+          quantity: this.bookingSize()
+        });
+      }
+
+      var linesNoBookingSize = this.getLinesNoBookingSize(this.selectedPackage);
+      linesNoBookingSize = linesNoBookingSize.filter(function (line) {
+        var lineEl = _this28.findElement("[data-package-id=\"".concat(line.id, "\"]"));
+
+        if (!lineEl) {
+          return false;
+        }
+
+        if (isNaN(parseInt(lineEl.value))) {
+          return false;
+        }
+
+        return parseInt(lineEl.value) > 0;
+      });
+      linesNoBookingSize = linesNoBookingSize.map(function (line) {
+        var lineEl = _this28.findElement("[data-package-id=\"".concat(line.id, "\"]"));
+
+        return {
+          item_name: line.beschrijving_templated,
+          price: line.product.verkoop,
+          quantity: parseInt(lineEl.value)
+        };
+      });
+      items.push.apply(items, _toConsumableArray(linesNoBookingSize));
+      return items;
+    }
   }, {
     key: "submitBooking",
     value: function submitBooking() {
-      var _this28 = this;
+      var _this29 = this;
 
       var productCounts = this.productCounts().map(function (line) {
         return line.aantal;
@@ -1689,7 +1724,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');
 
@@ -1728,30 +1763,34 @@ var RecrasBooking = /*#__PURE__*/function () {
 
       return this.postJson('onlineboeking/reserveer', bookingParams).then(function (json) {
         if (json.payment_url) {
-          _this28.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this28.getTotalPrice()));
+          _this29.eventHelper.sendEvent(RecrasEventHelper.PREFIX_BOOKING, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, null, Math.round(_this29.getTotalPrice()), {
+            currency: _this29.languageHelper.currency,
+            value: _this29.getTotalPrice(),
+            items: _this29.formatGA4Items()
+          });
 
           window.top.location.href = json.payment_url;
         } else if (json.redirect) {
           window.top.location.href = json.redirect;
         } else if (json.message && json.status) {
-          _this28.findElement('.recras-amountsform').reset();
+          _this29.findElement('.recras-amountsform').reset();
 
-          _this28.findElement('.recras-datetime').reset();
+          _this29.findElement('.recras-datetime').reset();
 
-          _this28.findElement('.recras-contactform').reset();
+          _this29.findElement('.recras-contactform').reset();
 
-          _this28.element.scrollIntoView({
+          _this29.element.scrollIntoView({
             behavior: 'smooth'
           });
 
-          _this28.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(json.message, "</p>"));
+          _this29.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(json.message, "</p>"));
         } else {
           console.log(json);
         }
 
-        _this28.loadingIndicatorHide();
+        _this29.loadingIndicatorHide();
 
-        _this28.findElement('.bookPackage').removeAttribute('disabled');
+        _this29.findElement('.bookPackage').removeAttribute('disabled');
       });
     }
   }, {
@@ -1787,7 +1826,7 @@ var RecrasBooking = /*#__PURE__*/function () {
   }, {
     key: "updateProductAmounts",
     value: function updateProductAmounts() {
-      var _this29 = this;
+      var _this30 = this;
 
       this.loadingIndicatorHide();
       this.availableDays = [];
@@ -1797,7 +1836,7 @@ var RecrasBooking = /*#__PURE__*/function () {
       var maxPromise = this.checkMaximumForPackage();
       this.checkBookingSize(this.selectedPackage);
       this.recheckVouchers().then(function () {
-        _this29.showTotalPrice();
+        _this30.showTotalPrice();
       });
       this.showStandardAttachments();
       var datePickerEl = this.findElement('.recras-onlinebooking-date');
@@ -1845,16 +1884,16 @@ var RecrasBooking = /*#__PURE__*/function () {
   }, {
     key: "getAvailableDaysInPeriod",
     value: function getAvailableDaysInPeriod(packageId, startDate, endDate) {
-      var _this30 = this;
+      var _this31 = this;
 
       var datePickerEl = this.findElement('.recras-onlinebooking-date');
       this.getAvailableDays(packageId, startDate, endDate).then(function (availableDays) {
-        _this30.loadingIndicatorHide();
+        _this31.loadingIndicatorHide();
 
         if (datePickerEl.value && availableDays.indexOf(datePickerEl.value) === -1) {
           datePickerEl.value = '';
 
-          _this30.clearTimes();
+          _this31.clearTimes();
         } else {
           datePickerEl.removeAttribute('disabled');
         }
@@ -1949,7 +1988,7 @@ var RecrasCalendarHelper = /*#__PURE__*/function () {
 
 var RecrasContactForm = /*#__PURE__*/function () {
   function RecrasContactForm() {
-    var _this31 = this;
+    var _this32 = this;
 
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -1979,11 +2018,11 @@ var RecrasContactForm = /*#__PURE__*/function () {
     }
 
     this.fetchJson = function (url) {
-      return RecrasHttpHelper.fetchJson(url, _this31.error.bind(_this31));
+      return RecrasHttpHelper.fetchJson(url, _this32.error.bind(_this32));
     };
 
     this.postJson = function (url, data) {
-      return RecrasHttpHelper.postJson(_this31.options.getApiBase() + url, data, _this31.error.bind(_this31));
+      return RecrasHttpHelper.postJson(_this32.options.getApiBase() + url, data, _this32.error.bind(_this32));
     };
 
     RecrasCSSHelper.loadCSS('global');
@@ -2007,7 +2046,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   _createClass(RecrasContactForm, [{
     key: "checkRequiredCheckboxes",
     value: function checkRequiredCheckboxes() {
-      var _this32 = this;
+      var _this33 = this;
 
       this.removeWarnings();
       var isOkay = true;
@@ -2016,7 +2055,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
         var checked = group.querySelectorAll('input:checked');
 
         if (checked.length === 0) {
-          group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', "<div class=\"recrasError\">".concat(_this32.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED'), "</div>"));
+          group.parentNode.querySelector('label').insertAdjacentHTML('beforeend', "<div class=\"recrasError\">".concat(_this33.languageHelper.translate('CONTACT_FORM_CHECKBOX_REQUIRED'), "</div>"));
           isOkay = false;
         }
       });
@@ -2047,17 +2086,12 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "isStandalone",
     value: function isStandalone(options) {
-      if (options.showSubmit) {
-        console.warn('Option "showSubmit" was renamed to "standalone". Please update your code.');
-        options.standalone = true;
-      }
-
       return !!options.standalone;
     }
   }, {
     key: "generateForm",
     value: function generateForm() {
-      var _this33 = this;
+      var _this34 = this;
 
       var extraOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var waitFor = [];
@@ -2072,21 +2106,21 @@ var RecrasContactForm = /*#__PURE__*/function () {
       }
 
       return Promise.all(waitFor).then(function () {
-        var standalone = _this33.isStandalone(extraOptions);
+        var standalone = _this34.isStandalone(extraOptions);
 
         var validateText = standalone ? 'novalidate' : '';
         var html = "<form class=\"recras-contactform\" ".concat(validateText, ">");
 
         if (extraOptions.voucherQuantitySelector) {
-          html += _this33.quantitySelector(extraOptions.quantityTerm);
+          html += _this34.quantitySelector(extraOptions.quantityTerm);
         }
 
-        _this33.contactFormFields.forEach(function (field, idx) {
-          html += '<div>' + _this33.showField(field, idx) + '</div>';
+        _this34.contactFormFields.forEach(function (field, idx) {
+          html += '<div>' + _this34.showField(field, idx) + '</div>';
         });
 
         if (standalone) {
-          html += _this33.submitButtonHtml();
+          html += _this34.submitButtonHtml();
         }
 
         html += '</form>';
@@ -2121,22 +2155,22 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "getContactFormFields",
     value: function getContactFormFields() {
-      var _this34 = this;
+      var _this35 = this;
 
       return this.fetchJson(this.options.getApiBase() + 'contactformulieren/' + this.options.getFormId() + '?embed=Velden').then(function (form) {
-        _this34.contactFormFields = form.Velden;
-        _this34.packages = _this34.sortPackages(form.Arrangementen);
-        return _this34.contactFormFields;
+        _this35.contactFormFields = form.Velden;
+        _this35.packages = _this35.sortPackages(form.Arrangementen);
+        return _this35.contactFormFields;
       });
     }
   }, {
     key: "getCountryList",
     value: function getCountryList() {
-      var _this35 = this;
+      var _this36 = this;
 
       return this.fetchJson('https://cdn.rawgit.com/umpirsky/country-list/ddabf3a8/data/' + this.languageHelper.locale + '/country.json').then(function (json) {
-        _this35.countries = json;
-        return _this35.countries;
+        _this36.countries = json;
+        return _this36.countries;
       });
     }
   }, {
@@ -2303,7 +2337,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "showField",
     value: function showField(field, idx) {
-      var _this36 = this;
+      var _this37 = this;
 
       if (field.soort_invoer === 'header') {
         return "<h3>".concat(field.naam, "</h3>");
@@ -2322,7 +2356,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
         case 'contactpersoon.geslacht':
           html = "<select ".concat(fixedAttributes, " autocomplete=\"sex\">");
           Object.keys(this.GENDERS).forEach(function (key) {
-            html += "<option value=\"".concat(key, "\">").concat(_this36.languageHelper.translate(_this36.GENDERS[key]));
+            html += "<option value=\"".concat(key, "\">").concat(_this37.languageHelper.translate(_this37.GENDERS[key]));
           });
           html += '</select>';
           return label + html;
@@ -2378,8 +2412,8 @@ var RecrasContactForm = /*#__PURE__*/function () {
         case 'contact.landcode':
           html = "<select ".concat(fixedAttributes, " autocomplete=\"country\">");
           Object.keys(this.countries).forEach(function (code) {
-            var selectedText = code.toUpperCase() === _this36.options.getDefaultCountry() ? 'selected' : '';
-            html += "<option value=\"".concat(code, "\" ").concat(selectedText, ">").concat(_this36.countries[code]);
+            var selectedText = code.toUpperCase() === _this37.options.getDefaultCountry() ? 'selected' : '';
+            html += "<option value=\"".concat(code, "\" ").concat(selectedText, ">").concat(_this37.countries[code]);
           });
           html += '</select>';
           return label + html;
@@ -2459,41 +2493,41 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "showForm",
     value: function showForm() {
-      var _this37 = this;
+      var _this38 = this;
 
       this.loadingIndicatorShow(this.element);
       return this.getContactFormFields().then(function () {
-        return _this37.generateForm({
+        return _this38.generateForm({
           standalone: true
         });
       }).then(function (html) {
-        _this37.appendHtml(html);
+        _this38.appendHtml(html);
 
-        _toConsumableArray(_this37.findElements('.checkboxGroupRequired')).forEach(function (group) {
+        _toConsumableArray(_this38.findElements('.checkboxGroupRequired')).forEach(function (group) {
           _toConsumableArray(group.querySelectorAll('input')).forEach(function (el) {
-            el.addEventListener('change', _this37.checkRequiredCheckboxes.bind(_this37));
+            el.addEventListener('change', _this38.checkRequiredCheckboxes.bind(_this38));
           });
         });
 
-        _this37.findElement('.recras-contactform').addEventListener('submit', _this37.submitForm.bind(_this37));
+        _this38.findElement('.recras-contactform').addEventListener('submit', _this38.submitForm.bind(_this38));
 
-        if (_this37.hasBookingDateField()) {
+        if (_this38.hasBookingDateField()) {
           var pikadayOptions = _extends(RecrasCalendarHelper.defaultOptions(), {
-            field: _this37.findElement('[data-identifier="boeking.datum"]'),
-            i18n: RecrasCalendarHelper.i18n(_this37.languageHelper),
+            field: _this38.findElement('[data-identifier="boeking.datum"]'),
+            i18n: RecrasCalendarHelper.i18n(_this38.languageHelper),
             numberOfMonths: 1
           });
 
           new Pikaday(pikadayOptions);
         }
 
-        if (_this37.hasRelationDateField()) {
-          var fields = _this37.getRelationExtraDateFields();
+        if (_this38.hasRelationDateField()) {
+          var fields = _this38.getRelationExtraDateFields();
 
           var thisYear = new Date().getFullYear();
 
           var _pikadayOptions = _extends(RecrasCalendarHelper.defaultOptions(), {
-            i18n: RecrasCalendarHelper.i18n(_this37.languageHelper),
+            i18n: RecrasCalendarHelper.i18n(_this38.languageHelper),
             numberOfMonths: 1,
             yearRange: [thisYear - 90, thisYear + 10]
           });
@@ -2502,12 +2536,12 @@ var RecrasContactForm = /*#__PURE__*/function () {
 
           for (var _i18 = 0; _i18 < fields.length; _i18++) {
             var field = fields[_i18];
-            _pikadayOptions.field = _this37.findElement("[data-identifier=\"".concat(field.field_identifier, "\"]"));
+            _pikadayOptions.field = _this38.findElement("[data-identifier=\"".concat(field.field_identifier, "\"]"));
             new Pikaday(_pikadayOptions);
           }
         }
 
-        _this37.loadingIndicatorHide();
+        _this38.loadingIndicatorHide();
       });
     }
   }, {
@@ -2557,7 +2591,7 @@ var RecrasContactForm = /*#__PURE__*/function () {
   }, {
     key: "submitForm",
     value: function submitForm(e) {
-      var _this38 = this;
+      var _this39 = this;
 
       e.preventDefault();
       var submitButton = this.findElement('.submitForm');
@@ -2581,24 +2615,24 @@ var RecrasContactForm = /*#__PURE__*/function () {
       submitButton.setAttribute('disabled', 'disabled');
       this.postJson('contactformulieren/' + this.options.getFormId() + '/opslaan', this.generateJson()).then(function (json) {
         if (json.success) {
-          if (_this38.options.getRedirectUrl()) {
-            window.top.location.href = _this38.options.getRedirectUrl();
+          if (_this39.options.getRedirectUrl()) {
+            window.top.location.href = _this39.options.getRedirectUrl();
           } else {
-            _this38.element.scrollIntoView({
+            _this39.element.scrollIntoView({
               behavior: 'smooth'
             });
 
-            _this38.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'), "</p>"));
+            _this39.element.insertAdjacentHTML('afterbegin', "<p class=\"recras-success\">".concat(_this39.languageHelper.translate('CONTACT_FORM_SUBMIT_SUCCESS'), "</p>"));
 
             submitButton.parentNode.reset();
           }
         } else {
-          _this38.error(_this38.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
+          _this39.error(_this39.languageHelper.translate('CONTACT_FORM_SUBMIT_FAILED'));
         }
 
         submitButton.removeAttribute('disabled');
 
-        _this38.loadingIndicatorHide();
+        _this39.loadingIndicatorHide();
       });
       return false;
     }
@@ -2615,12 +2649,12 @@ 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.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";
+      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: grid;\n    grid-template-columns: 1fr 5em 7em;\n}\n.recras-amountsform input {\n    width: auto; /* Firefox fix */\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: grid;\n    grid-template-columns: 30% 70%;\n}\n.recras-datetime > * {\n    margin: 0.25em 0;\n}\n.recras-datetime label {\n    display: block;\n}\n.recras-datetime input, .recras-datetime select {\n    max-width: 12em;\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",
     value: function cssGlobal() {
-      return "\n.latestError, .recrasError {\n    color: hsl(0, 50%, 50%);\n}\n.recras-onlinebooking > *:not(.latestError):not(.recrasLoadingIndicator) {\n    padding: 1em 0;\n}\n.recras-datetime, .recras-discounts > div, .recras-contactform > div {\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr 12em;\n    grid-template-columns: 1fr 12em;\n}\n.recras-contactform > div {\n    padding-bottom: 0.25em;\n    padding-top: 0.25em;\n}\n.recras-contactform label {\n    display: block;\n}\n.recras-contactform > div > :last-child {\n    -ms-grid-column: 2;\n}\n.recras-amountsform .recras-full-width {\n    display: block;\n}\n.recras-discounts > div > input {\n    -ms-grid-column: 2;\n}\n\n.recrasLoadingIndicator {\n    animation: recrasSpinner 1.1s infinite linear;\n    border: 0.2em solid rgba(0, 0, 0, 0.2);\n    border-left-color: rgba(0, 0, 0, 0.5);\n    border-radius: 50%;\n    display: inline-block;\n    height: 2em;\n    overflow: hidden;\n    text-indent: -100vw;\n    width: 2em;\n}\n@keyframes recrasSpinner {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\nbutton .recrasLoadingIndicator, label .recrasLoadingIndicator {\n    height: 1em;\n    vertical-align: middle;\n    width: 1em;\n}\nbutton .recrasLoadingIndicator {\n    margin-left: 0.5em;\n}\n.bookPackage, .submitForm, .buyTemplate {\n    font: inherit;\n    font-weight: bold;\n    padding: 0.5em 2em;\n}\n@media (max-width: 520px) {\n    .pika-single {\n        max-width: 256px; /* Single month is 240px + 2x8px margin */\n    }\n}\n";
+      return "\n.latestError, .recrasError {\n    color: hsl(0, 50%, 50%);\n}\n.recras-onlinebooking > *:not(.latestError):not(.recrasLoadingIndicator) {\n    padding: 1em 0;\n}\n.recras-datetime, .recras-discounts > div, .recras-contactform > div {\n    display: grid;\n    grid-template-columns: 1fr 12em;\n}\n.recras-contactform > div {\n    padding-bottom: 0.25em;\n    padding-top: 0.25em;\n}\n.recras-contactform label {\n    display: block;\n}\n.recras-amountsform .recras-full-width {\n    display: block;\n}\n\n.recrasLoadingIndicator {\n    animation: recrasSpinner 1.1s infinite linear;\n    border: 0.2em solid rgba(0, 0, 0, 0.2);\n    border-left-color: rgba(0, 0, 0, 0.5);\n    border-radius: 50%;\n    display: inline-block;\n    height: 2em;\n    overflow: hidden;\n    text-indent: -100vw;\n    width: 2em;\n}\n@keyframes recrasSpinner {\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n}\nbutton .recrasLoadingIndicator, label .recrasLoadingIndicator {\n    height: 1em;\n    vertical-align: middle;\n    width: 1em;\n}\nbutton .recrasLoadingIndicator {\n    margin-left: 0.5em;\n}\n.bookPackage, .submitForm, .buyTemplate {\n    font: inherit;\n    font-weight: bold;\n    padding: 0.5em 2em;\n}\n@media (max-width: 520px) {\n    .pika-single {\n        max-width: 256px; /* Single month is 240px + 2x8px margin */\n    }\n}\n";
     }
   }, {
     key: "insertIntoHead",
@@ -2755,65 +2789,62 @@ var RecrasEventHelper = /*#__PURE__*/function () {
       return this.eventsEnabled.includes(name);
     }
   }, {
-    key: "sendEvent",
-    value: function sendEvent(cat, action) {
-      var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-      var value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-      var event;
+    key: "ga4EventMap",
+    value: function ga4EventMap(action) {
+      var _map;
 
-      try {
-        event = new Event(RecrasEventHelper.PREFIX_GLOBAL + ':' + cat + ':' + action);
-      } catch (e) {
-        // IE
-        event = document.createEvent('Event');
-        event.initEvent(action, true, true);
-      }
+      var map = (_map = {}, _defineProperty(_map, RecrasEventHelper.EVENT_BOOKING_PACKAGE_CHANGED, 'select_content'), _defineProperty(_map, RecrasEventHelper.EVENT_BOOKING_REDIRECT_PAYMENT, 'begin_checkout'), _defineProperty(_map, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, 'select_content'), _defineProperty(_map, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, 'begin_checkout'), _map);
 
-      if (this.analyticsEnabled && this.eventEnabled(action)) {
-        if (typeof window.gtag === 'function') {
-          // Global Site Tag - the more modern variant
-          var eventData = {
-            event_category: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat
-          };
+      if (map[action] === undefined) {
+        return false;
+      }
 
-          if (label) {
-            eventData.event_label = label;
-          }
+      return map[action];
+    }
+  }, {
+    key: "sendAnalyticsEvent",
+    value: function sendAnalyticsEvent(cat, action) {
+      var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+      var value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+      var ga4Value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
 
-          if (value) {
-            eventData.value = value;
-          }
+      if (typeof window.gtag !== 'function') {
+        return;
+      }
 
-          window.gtag('event', action, eventData);
-        } else if (typeof window.ga === 'function') {
-          // "Old" Google Analytics
-          var _eventData = {
-            hitType: 'event',
-            eventCategory: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat,
-            eventAction: action
-          };
+      if (this.ga4EventMap(action) && ga4Value) {
+        // v4
+        window.gtag('event', this.ga4EventMap(action), ga4Value);
+        return;
+      } // Global Site Tag (v3)
 
-          if (label) {
-            _eventData.eventLabel = label;
-          }
 
-          if (value) {
-            _eventData.eventValue = value;
-          } // Google Analytics via Google Tag Manager doesn't work without a prefix
+      var eventData = {
+        event_category: RecrasEventHelper.PREFIX_GLOBAL + ':' + cat
+      };
 
+      if (label) {
+        eventData.event_label = label;
+      }
 
-          window.ga(function () {
-            var prefix = window.ga.getAll()[0].get('name');
+      if (value) {
+        eventData.value = value;
+      }
 
-            if (prefix) {
-              prefix += '.';
-            }
+      window.gtag('event', action, eventData);
+    }
+  }, {
+    key: "sendEvent",
+    value: function sendEvent(cat, action) {
+      var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+      var value = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
+      var ga4Value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
 
-            window.ga(prefix + 'send', _eventData);
-          });
-        }
+      if (this.analyticsEnabled && this.eventEnabled(action)) {
+        this.sendAnalyticsEvent(cat, action, label, value, ga4Value);
       }
 
+      var event = new Event(RecrasEventHelper.PREFIX_GLOBAL + ':' + cat + ':' + action);
       return document.dispatchEvent(event);
     }
   }, {
@@ -3348,16 +3379,16 @@ var RecrasLanguageHelper = /*#__PURE__*/function () {
   }, {
     key: "setCurrency",
     value: function setCurrency() {
-      var _this39 = this;
+      var _this40 = this;
 
       var errorHandler = function errorHandler(err) {
-        _this39.currency = 'eur';
+        _this40.currency = 'eur';
 
-        _this39.error(err);
+        _this40.error(err);
       };
 
       return RecrasHttpHelper.fetchJson(this.options.getApiBase() + 'instellingen/currency', errorHandler).then(function (setting) {
-        _this39.currency = setting.waarde;
+        _this40.currency = setting.waarde;
       });
     }
   }, {
@@ -3581,7 +3612,7 @@ _defineProperty(RecrasOptions, "hostnamesDebug", ['nginx:8886', // Local develop
 
 var RecrasVoucher = /*#__PURE__*/function () {
   function RecrasVoucher() {
-    var _this40 = this;
+    var _this41 = this;
 
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
@@ -3600,11 +3631,11 @@ var RecrasVoucher = /*#__PURE__*/function () {
     this.element.classList.add('recras-buy-voucher');
 
     this.fetchJson = function (url) {
-      return RecrasHttpHelper.fetchJson(url, _this40.error);
+      return RecrasHttpHelper.fetchJson(url, _this41.error);
     };
 
     this.postJson = function (url, data) {
-      return RecrasHttpHelper.postJson(_this40.options.getApiBase() + url, data, _this40.error);
+      return RecrasHttpHelper.postJson(_this41.options.getApiBase() + url, data, _this41.error);
     };
 
     RecrasCSSHelper.loadCSS('global');
@@ -3620,12 +3651,12 @@ var RecrasVoucher = /*#__PURE__*/function () {
     }
 
     this.languageHelper.setOptions(options).then(function () {
-      return _this40.getVoucherTemplates();
+      return _this41.getVoucherTemplates();
     }).then(function (templates) {
-      if (_this40.options.getVoucherTemplateId()) {
-        _this40.changeTemplate(_this40.options.getVoucherTemplateId());
+      if (_this41.options.getVoucherTemplateId()) {
+        _this41.changeTemplate(_this41.options.getVoucherTemplateId());
       } else {
-        _this40.showTemplates(templates);
+        _this41.showTemplates(templates);
       }
     });
   }
@@ -3635,10 +3666,19 @@ var RecrasVoucher = /*#__PURE__*/function () {
     value: function appendHtml(msg) {
       this.element.insertAdjacentHTML('beforeend', msg);
     }
+  }, {
+    key: "formatGA4Item",
+    value: function formatGA4Item() {
+      return [{
+        item_name: this.selectedTemplate.name,
+        price: this.selectedTemplate.price,
+        quantity: parseInt(this.findElement('#number-of-vouchers').value)
+      }];
+    }
   }, {
     key: "buyTemplate",
     value: function buyTemplate() {
-      var _this41 = this;
+      var _this42 = this;
 
       var status = this.contactForm.checkRequiredCheckboxes();
 
@@ -3646,7 +3686,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,
@@ -3660,14 +3700,18 @@ var RecrasVoucher = /*#__PURE__*/function () {
 
       this.postJson('vouchers/buy', payload).then(function (json) {
         if (json.payment_url) {
-          _this41.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, null, Math.round(_this41.totalPrice()));
+          _this42.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_REDIRECT_PAYMENT, null, Math.round(_this42.totalPrice()), {
+            currency: _this42.languageHelper.currency,
+            value: _this42.totalPrice(),
+            items: _this42.formatGA4Item()
+          });
 
           window.top.location.href = json.payment_url;
         } else {
           console.log(json);
         }
 
-        _this41.findElement('.buyTemplate').removeAttribute('disabled');
+        _this42.findElement('.buyTemplate').removeAttribute('disabled');
       });
     }
   }, {
@@ -3678,7 +3722,10 @@ var RecrasVoucher = /*#__PURE__*/function () {
       })[0];
       this.clearAllExceptTemplateSelection();
       this.showContactForm(this.selectedTemplate);
-      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, null, templateID);
+      this.eventHelper.sendEvent(RecrasEventHelper.PREFIX_VOUCHER, RecrasEventHelper.EVENT_VOUCHER_TEMPLATE_CHANGED, null, templateID, {
+        content_type: 'voucher',
+        item_id: templateID
+      });
     }
   }, {
     key: "clearAll",
@@ -3724,25 +3771,25 @@ var RecrasVoucher = /*#__PURE__*/function () {
   }, {
     key: "getContactForm",
     value: function getContactForm(template) {
-      var _this42 = this;
+      var _this43 = this;
 
       this.options.setOption('form_id', template.contactform_id);
       var contactForm = new RecrasContactForm(this.options);
       return contactForm.getContactFormFields().then(function () {
-        _this42.contactForm = contactForm;
+        _this43.contactForm = contactForm;
         return contactForm;
       });
     }
   }, {
     key: "getVoucherTemplates",
     value: function getVoucherTemplates() {
-      var _this43 = this;
+      var _this44 = this;
 
       return this.fetchJson(this.options.getApiBase() + 'voucher_templates').then(function (templates) {
         templates = templates.filter(function (template) {
           return !!template.contactform_id;
         });
-        _this43.templates = templates;
+        _this44.templates = templates;
         return templates;
       });
     }
@@ -3788,30 +3835,30 @@ var RecrasVoucher = /*#__PURE__*/function () {
   }, {
     key: "showContactForm",
     value: function showContactForm(template) {
-      var _this44 = this;
+      var _this45 = this;
 
       return this.getContactForm(template).then(function (form) {
         return form.generateForm({
           voucherQuantitySelector: true,
-          quantityTerm: _this44.selectedTemplate.quantity_term
+          quantityTerm: _this45.selectedTemplate.quantity_term
         });
       }).then(function (html) {
-        _this44.appendHtml(html);
+        _this45.appendHtml(html);
 
-        _this44.showBuyButton();
+        _this45.showBuyButton();
 
-        _toConsumableArray(_this44.findElements('#number-of-vouchers, [name^="contactformulier"]')).forEach(function (el) {
-          el.addEventListener('change', _this44.maybeDisableBuyButton.bind(_this44));
+        _toConsumableArray(_this45.findElements('#number-of-vouchers, [name^="contactformulier"]')).forEach(function (el) {
+          el.addEventListener('change', _this45.maybeDisableBuyButton.bind(_this45));
         });
       });
     }
   }, {
     key: "showTemplates",
     value: function showTemplates(templates) {
-      var _this45 = this;
+      var _this46 = this;
 
       var templateOptions = templates.map(function (template) {
-        return "<option value=\"".concat(template.id, "\">").concat(template.name, " (").concat(_this45.formatPrice(template.price), ")");
+        return "<option value=\"".concat(template.id, "\">").concat(template.name, " (").concat(_this46.formatPrice(template.price), ")");
       });
       var html = "<select class=\"recrasVoucherTemplates\"><option>".concat(templateOptions.join(''), "</select>");
       this.appendHtml("<div class=\"recras-voucher-templates\">".concat(html, "</div>"));
@@ -3819,7 +3866,7 @@ var RecrasVoucher = /*#__PURE__*/function () {
       voucherSelectEl.addEventListener('change', function () {
         var selectedTemplateId = parseInt(voucherSelectEl.value, 10);
 
-        _this45.changeTemplate(selectedTemplateId);
+        _this46.changeTemplate(selectedTemplateId);
       });
     }
   }, {