tf-checkout-react 1.6.6-beta.27 → 1.6.6-beta.29

package/dist/tf-checkout-react.cjs.development.js

@@ -574,11 +574,18 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 }(React.Component);
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
-function getDomain(url, subdomain) {
+function getDomain(url, subdomain, publicSuffix) {
   var updatedUrl = url.replace(/(https?:\/\/)?(www.)?/i, '');
   if (!subdomain) {
-    updatedUrl = updatedUrl.split('.');
-    updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join('.');
+    if (publicSuffix) {
+      var updatedPublicSuffix = publicSuffix.startsWith('.') ? publicSuffix : '.' + publicSuffix;
+      updatedUrl = url.replace(updatedPublicSuffix, '').split('.');
+      updatedUrl = updatedUrl.length > 0 ? updatedUrl[updatedUrl.length - 1] : '';
+      updatedUrl += updatedPublicSuffix;
+    } else {
+      updatedUrl = updatedUrl.split(".");
+      updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join(".");
+    }
   }
   if (updatedUrl.indexOf('/') !== -1) {
     return updatedUrl.split('/')[0];
@@ -586,6 +593,7 @@ function getDomain(url, subdomain) {
   return updatedUrl;
 }
 
+var generalDomain;
 function setCustomCookie(name, value, days) {
   if (days === void 0) {
     days = 5;
@@ -596,10 +604,22 @@ function setCustomCookie(name, value, days) {
     date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
     expires = '; expires=' + date.toUTCString();
   }
-  if (typeof window !== 'undefined') {
-    var domain = getDomain(window.location.hostname);
-    document.cookie = name + '=' + (value || '') + expires + ("; path=/; domain=" + domain);
+  if (typeof window === 'undefined') {
+    return;
   }
+  var hostname = window.location.hostname;
+  if (generalDomain && generalDomain.endsWith(getDomain(hostname))) {
+    document.cookie = name + '=' + (value || '') + expires + ("; path=/;domain=" + generalDomain);
+    return;
+  }
+  var previousDomain = undefined;
+  var domain = undefined;
+  do {
+    previousDomain = domain;
+    domain = getDomain(hostname, undefined, previousDomain);
+    document.cookie = name + '=' + (value || '') + expires + ("; path=/;domain=" + domain);
+  } while (getCookieByName(name) === '' && hostname !== domain);
+  generalDomain = domain;
 }
 function getCookieByName(cname) {
   if (typeof window === 'undefined') return '';
@@ -617,10 +637,25 @@ function getCookieByName(cname) {
   return '';
 }
 function deleteCookieByName(name) {
-  if (typeof window !== 'undefined') {
-    var domain = getDomain(window.location.hostname);
-    document.cookie = name + '=; Path=/' + ("; domain=" + domain) + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  if (getCookieByName(name) === '') {
+    return;
+  }
+  if (typeof window === 'undefined') {
+    return;
   }
+  var hostname = window.location.hostname;
+  if (generalDomain && generalDomain.endsWith(getDomain(hostname))) {
+    document.cookie = name + ("=; Path=/;domain=" + generalDomain + "; Expires=Thu, 01 Jan 1970 00:00:01 GMT;");
+    return;
+  }
+  var previousDomain = undefined;
+  var domain = undefined;
+  do {
+    previousDomain = domain;
+    domain = getDomain(hostname, undefined, previousDomain);
+    document.cookie = name + ("=; Path=/;domain=" + domain + "; Expires=Thu, 01 Jan 1970 00:00:01 GMT;");
+  } while (getCookieByName(name) !== '' && hostname !== domain);
+  generalDomain = domain;
 }
 
 var downloadPDF = function downloadPDF(pdfUrl) {
@@ -4073,6 +4108,9 @@ var AddonsContainter = function AddonsContainter(_ref) {
       size: 50
     }));
   }
+  if ((addons == null ? void 0 : addons.length) === 0) {
+    return null;
+  }
   var params = new URL("" + window.location).searchParams;
   var addOnIsIncluded = params.get('include_add_on') === 'true';
   var isResale = params.get('resale') === 'true';
@@ -4392,6 +4430,9 @@ var SimpleAddonsContainer = function SimpleAddonsContainer(_ref) {
       size: 50
     }));
   }
+  if ((addons == null ? void 0 : addons.length) === 0) {
+    return null;
+  }
   return React__default.createElement("div", {
     className: classNamePrefix + "_container"
   }, React__default.createElement("div", {
@@ -5415,15 +5456,6 @@ var PaymentPlanSection = function PaymentPlanSection(props) {
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
-var getStripePromise = function getStripePromise(reviewData) {
-  var stripePublishableKey = _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT';
-  var stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account');
-  var options = {};
-  if (stripeAccount) {
-    options.stripeAccount = stripeAccount;
-  }
-  return stripeJs.loadStripe(stripePublishableKey, options);
-};
 var initialPaymentPlanConfiguration = {
   requires_deposit: false,
   deposit: 0,
@@ -5462,7 +5494,8 @@ var initialReviewValues = {
   payment_method: {
     stripe_client_secret: '',
     stripe_payment_plan_enabled: false,
-    stripe_payment_plan_configuration: {}
+    stripe_payment_plan_configuration: {},
+    stripe_publishable_key: ''
   },
   billing_info: {},
   event_details: {
@@ -5507,7 +5540,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     _ref$isSinglePageChec = _ref.isSinglePageCheckout,
     isSinglePageCheckout = _ref$isSinglePageChec === void 0 ? false : _ref$isSinglePageChec,
     _ref$stripePaymentPro = _ref.stripePaymentProps,
-    stripePaymentProps = _ref$stripePaymentPro === void 0 ? {} : _ref$stripePaymentPro;
+    stripePaymentProps = _ref$stripePaymentPro === void 0 ? {} : _ref$stripePaymentPro,
+    stripePublishableKeyProps = _ref.stripePublishableKey;
   var _useState = React.useState(initialReviewValues),
     reviewData = _useState[0],
     setReviewData = _useState[1];
@@ -5585,14 +5619,16 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
   }, [showPaymentPlanSection, paymentPlanUseSavedCard, orderData == null ? void 0 : orderData.id]);
   React.useEffect(function () {
-    if (isSinglePageCheckout && !(orderData != null && orderData.total)) {
-      setPaymentDataIsLoading(false);
-      setOrderData(function (current) {
-        return _extends({}, current, {
-          pay_now: 1,
-          total: 1
+    if (isSinglePageCheckout) {
+      if (!(orderData != null && orderData.total)) {
+        setOrderData(function (current) {
+          return _extends({}, current, {
+            pay_now: 1,
+            total: 1
+          });
         });
-      });
+        setPaymentDataIsLoading(false);
+      }
       return;
     }
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
@@ -5709,6 +5745,15 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
     return showPaymentForm;
   };
+  var getStripePromise = React.useCallback(function () {
+    var stripePublishableKey = stripePublishableKeyProps || _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey;
+    var stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account');
+    var options = {};
+    if (stripeAccount) {
+      options.stripeAccount = stripeAccount;
+    }
+    return stripeJs.loadStripe(stripePublishableKey, options);
+  }, [reviewData, stripePublishableKeyProps]);
   var themeMui = styles.createTheme(themeOptions);
   var hasTableTypes = Boolean(Number(orderData.guest_count));
   var paymentFieldsData = hasTableTypes ? [{
@@ -5856,7 +5901,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   }, paymentInfoLabel), showErrorText && React__default.createElement("p", {
     className: "payment_info__error"
   }, errorText), React__default.createElement("div", null, React__default.createElement(reactStripeJs.Elements, {
-    stripe: getStripePromise(reviewData),
+    stripe: getStripePromise(),
     options: elementsOptions
   }, React__default.createElement(CheckoutForm, Object.assign({
     stripe_client_secret: paymentPlanIsAvailable && showPaymentPlanSection ? paymentPlanConfig.stripe_setup_intent_secret : _get(reviewData, 'payment_method.stripe_client_secret'),
@@ -6177,6 +6222,7 @@ var LogicRunner = function LogicRunner(_ref) {
   return null;
 };
 var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
+  var _reviewData$payment_m, _checkoutUpdateData$a, _checkoutUpdateData$a2;
   var _ref4$data = _ref4.data,
     data = _ref4$data === void 0 ? [] : _ref4$data,
     _ref4$ticketHoldersFi = _ref4.ticketHoldersFields,
@@ -6188,6 +6234,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     initialValues = _ref4$initialValues === void 0 ? {} : _ref4$initialValues,
     _ref4$buttonName = _ref4.buttonName,
     buttonName = _ref4$buttonName === void 0 ? 'Submit' : _ref4$buttonName,
+    _ref4$freeOrderButton = _ref4.freeOrderButtonName,
+    freeOrderButtonName = _ref4$freeOrderButton === void 0 ? 'Complete Registration' : _ref4$freeOrderButton,
     _ref4$handleSubmit = _ref4.handleSubmit,
     handleSubmit = _ref4$handleSubmit === void 0 ? _identity : _ref4$handleSubmit,
     _ref4$theme = _ref4.theme,
@@ -6415,11 +6463,18 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   var _useState24 = React.useState({}),
     checkoutData = _useState24[0],
     setCheckoutData = _useState24[1];
+  var _useState25 = React.useState({}),
+    checkoutUpdateData = _useState25[0],
+    setCheckoutUpdateData = _useState25[1];
   var prevData = React.useRef(data);
   var addAddOnsInAttributes = React.useCallback(function (checkoutBody) {
     var selectedAddOns = window.localStorage.getItem('add_ons') || '{}';
     checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns);
   }, []);
+  var _useState26 = React.useState({}),
+    singleCheckoutAddons = _useState26[0],
+    setSingleCheckoutAddOns = _useState26[1];
+  var orderIsFree = !Number(checkoutData == null ? void 0 : checkoutData.total);
   React.useEffect(function () {
     var hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId');
     var isEqualData = _isEqual(prevData.current, data);
@@ -6584,51 +6639,94 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     fetchCart();
   }, [isLoggedIn]);
   React.useEffect(function () {
-    var collectPaymentData = /*#__PURE__*/function () {
+    var fetchCheckoutUpdate = /*#__PURE__*/function () {
       var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-        var checkoutBody, checkoutResponse;
+        var checkoutUpdateResponse;
         return _regeneratorRuntime().wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
+            case 0:
+              if (eventId) {
+                _context5.next = 2;
+                break;
+              }
+              return _context5.abrupt("return");
+            case 2:
+              _context5.prev = 2;
+              _context5.next = 5;
+              return updateCheckout({
+                attributes: {
+                  event_id: eventId
+                }
+              });
+            case 5:
+              checkoutUpdateResponse = _context5.sent;
+              if (checkoutUpdateResponse.success) {
+                setCheckoutUpdateData(checkoutUpdateResponse.data.attributes);
+              }
+              _context5.next = 12;
+              break;
+            case 9:
+              _context5.prev = 9;
+              _context5.t0 = _context5["catch"](2);
+              console.error('Failed to fetch checkout update:', _context5.t0);
+            case 12:
+            case "end":
+              return _context5.stop();
+          }
+        }, _callee5, null, [[2, 9]]);
+      }));
+      return function fetchCheckoutUpdate() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    fetchCheckoutUpdate();
+  }, [eventId]);
+  React.useEffect(function () {
+    var collectPaymentData = /*#__PURE__*/function () {
+      var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+        var checkoutBody, checkoutResponse;
+        return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
             case 0:
               if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB && !loading && !isNewUser)) {
-                _context5.next = 19;
+                _context6.next = 19;
                 break;
               }
               setLoading(true);
               checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity.length, userData);
-              _context5.prev = 3;
+              _context6.prev = 3;
               if (isBrowser) {
                 addAddOnsInAttributes(checkoutBody);
               }
-              _context5.next = 7;
+              _context6.next = 7;
               return postOnCheckout(checkoutBody, flagFreeTicket);
             case 7:
-              checkoutResponse = _context5.sent;
+              checkoutResponse = _context6.sent;
               removeReferralKey();
               onSkipBillingPage(checkoutResponse.data.attributes);
               setLoading(false);
-              _context5.next = 17;
+              _context6.next = 17;
               break;
             case 13:
-              _context5.prev = 13;
-              _context5.t0 = _context5["catch"](3);
-              onSubmitError(_context5.t0);
-              if (_get(_context5.t0, 'response.data.data.hasUnverifiedOrder')) {
-                setPendingVerificationMessage(_get(_context5.t0, 'response.data.message'));
+              _context6.prev = 13;
+              _context6.t0 = _context6["catch"](3);
+              onSubmitError(_context6.t0);
+              if (_get(_context6.t0, 'response.data.data.hasUnverifiedOrder')) {
+                setPendingVerificationMessage(_get(_context6.t0, 'response.data.message'));
               }
             case 17:
-              _context5.next = 20;
+              _context6.next = 20;
               break;
             case 19:
               setLoading(false);
             case 20:
             case "end":
-              return _context5.stop();
+              return _context6.stop();
           }
-        }, _callee5, null, [[3, 13]]);
+        }, _callee6, null, [[3, 13]]);
       }));
       return function collectPaymentData() {
-        return _ref8.apply(this, arguments);
+        return _ref9.apply(this, arguments);
       };
     }();
     collectPaymentData();
@@ -6693,68 +6791,80 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     localStorage.removeItem('referral_key');
   }, []);
   var updateCheckoutWithAddOns = React.useCallback( /*#__PURE__*/function () {
-    var _ref9 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6(addOns) {
-      var checkoutUpdateData, checkoutResponse, errorMessage;
-      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+    var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(addOns) {
+      var mergedAddOns, _checkoutUpdateData, checkoutResponse, errorMessage;
+      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             if (addOns === void 0) {
               addOns = {};
             }
             if (isSinglePageCheckout) {
-              _context6.next = 3;
+              _context7.next = 3;
               break;
             }
-            return _context6.abrupt("return");
+            return _context7.abrupt("return");
           case 3:
-            _context6.prev = 3;
-            checkoutUpdateData = {
+            mergedAddOns = _extends({}, singleCheckoutAddons); // Update existing entries and add new ones
+            Object.entries(addOns).forEach(function (_ref11) {
+              var key = _ref11[0],
+                value = _ref11[1];
+              var amount = Number(value);
+              if (amount) {
+                mergedAddOns[key] = amount;
+              } else {
+                delete mergedAddOns[key];
+              }
+            });
+            _context7.prev = 5;
+            _checkoutUpdateData = {
               attributes: {
                 event_id: eventId,
-                add_ons: addOns
+                add_ons: mergedAddOns
               }
             };
-            _context6.next = 7;
-            return updateCheckout(checkoutUpdateData);
-          case 7:
-            checkoutResponse = _context6.sent;
+            _context7.next = 9;
+            return updateCheckout(_checkoutUpdateData);
+          case 9:
+            checkoutResponse = _context7.sent;
             if (checkoutResponse.success) {
               setCheckoutData(_get(checkoutResponse, 'data.attributes.cart_price_breakdown', {}));
               onCheckoutUpdateSuccess(checkoutResponse.data.attributes);
+              setSingleCheckoutAddOns(mergedAddOns);
             }
-            _context6.next = 16;
+            _context7.next = 18;
             break;
-          case 11:
-            _context6.prev = 11;
-            _context6.t0 = _context6["catch"](3);
-            errorMessage = _get(_context6.t0, 'response.data.message', 'Failed to update add-ons');
+          case 13:
+            _context7.prev = 13;
+            _context7.t0 = _context7["catch"](5);
+            errorMessage = _get(_context7.t0, 'response.data.message', 'Failed to update add-ons');
             setError(errorMessage);
-            onCheckoutUpdateError(_context6.t0);
-          case 16:
+            onCheckoutUpdateError(_context7.t0);
+          case 18:
           case "end":
-            return _context6.stop();
+            return _context7.stop();
         }
-      }, _callee6, null, [[3, 11]]);
+      }, _callee7, null, [[5, 13]]);
     }));
     return function (_x) {
-      return _ref9.apply(this, arguments);
+      return _ref10.apply(this, arguments);
     };
   }(), [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]);
   var handleAddOnSelect = React.useCallback( /*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee7(selectedAddOns) {
-      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
+    var _ref12 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(selectedAddOns) {
+      return _regeneratorRuntime().wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
           case 0:
-            _context7.next = 2;
+            _context8.next = 2;
             return updateCheckoutWithAddOns(selectedAddOns);
           case 2:
           case "end":
-            return _context7.stop();
+            return _context8.stop();
         }
-      }, _callee7);
+      }, _callee8);
     }));
     return function (_x2) {
-      return _ref10.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }(), [updateCheckoutWithAddOns]);
   var onAddOnSelect = React.useCallback(function (id, value, addon) {
@@ -6762,9 +6872,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     var addonId = addon.id || id;
     // Create updated add-ons object
     var updatedAddOns = {};
-    if (quantity > 0) {
-      updatedAddOns[addonId] = quantity;
-    }
+    updatedAddOns[addonId] = quantity;
     // Call handleAddOnSelect with the updated addons object
     handleAddOnSelect(updatedAddOns);
   }, [handleAddOnSelect]);
@@ -6786,6 +6894,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
   if (isTable) {
     dataWithUniqueIds[0].label = 'Get Your Tables';
   }
+  var stripePublishableKey = (reviewData == null ? void 0 : (_reviewData$payment_m = reviewData.payment_method) == null ? void 0 : _reviewData$payment_m.stripe_publishable_key) || (checkoutUpdateData == null ? void 0 : (_checkoutUpdateData$a = checkoutUpdateData.additional_payment_information) == null ? void 0 : (_checkoutUpdateData$a2 = _checkoutUpdateData$a.basic_config) == null ? void 0 : _checkoutUpdateData$a2.apiKey);
   return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
   }, (loading || cardLoading || isCountriesLoading || isConfigLoading) && React__default.createElement(Backdrop, {
@@ -6816,18 +6925,18 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
     }, initialValues), userValues, ticketHoldersFields, ticketsQuantity),
     enableReinitialize: false,
     onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee8(values, formikHelpers) {
-        var checkoutBodyForRegistration, bodyFormData, resRegister, _xtfCookie, refreshToken, userProfile, hasUnverifiedOrder, message, profileData, profileSpecifiedData, profileDataObj, userDataObj, checkoutBody, checkoutResponse, checkoutUpdateResponse, _checkoutResponse$dat, hash, total, paymentDataResponse, _cart$, attributes, order_details, cart, _order_details$ticket, ticket, updatedOrderData, isFreeTickets, paymentMethod, paymentPlanAvailable, card, paymentMethodReq, _hasUnverifiedOrder, _message, _e$response, event;
-        return _regeneratorRuntime().wrap(function _callee8$(_context8) {
-          while (1) switch (_context8.prev = _context8.next) {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(values, formikHelpers) {
+        var checkoutBodyForRegistration, bodyFormData, resRegister, _xtfCookie, refreshToken, userProfile, hasUnverifiedOrder, message, profileData, profileSpecifiedData, profileDataObj, userDataObj, checkoutBody, checkoutResponse, checkoutUpdateResponse, paymentResponse, _checkoutResponse$dat, hash, total, paymentDataResponse, _cart$, attributes, order_details, cart, _order_details$ticket, ticket, updatedOrderData, isFreeTickets, paymentMethod, paymentPlanAvailable, card, paymentMethodReq, _hasUnverifiedOrder, _message, _e$response, event;
+        return _regeneratorRuntime().wrap(function _callee9$(_context9) {
+          while (1) switch (_context9.prev = _context9.next) {
             case 0:
-              _context8.prev = 0;
-              if (!(!cardRef.current || !stripeRef.current)) {
-                _context8.next = 4;
+              _context9.prev = 0;
+              if (!((!cardRef.current || !stripeRef.current) && !orderIsFree)) {
+                _context9.next = 4;
                 break;
               }
               setError('Fill in the card details');
-              return _context8.abrupt("return");
+              return _context9.abrupt("return");
             case 4:
               if (isBrowser) {
                 window.localStorage.setItem('extraData', JSON.stringify({
@@ -6840,7 +6949,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 }));
               }
               if (isLoggedIn) {
-                _context8.next = 27;
+                _context9.next = 27;
                 break;
               }
               checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
@@ -6849,12 +6958,12 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 lastNameLogged: lastNameLogged
               }, showDOB);
               bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration, flagFreeTicket);
-              _context8.prev = 8;
+              _context9.prev = 8;
               setLoading(true);
-              _context8.next = 12;
+              _context9.next = 12;
               return register(bodyFormData);
             case 12:
-              resRegister = _context8.sent;
+              resRegister = _context9.sent;
               _xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce');
               refreshToken = _get(resRegister, 'data.attributes.refresh_token');
               userProfile = _get(resRegister, 'data.attributes.user_profile');
@@ -6864,17 +6973,17 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 refreshToken: refreshToken,
                 userProfile: userProfile
               });
-              _context8.next = 27;
+              _context9.next = 27;
               break;
             case 20:
-              _context8.prev = 20;
-              _context8.t0 = _context8["catch"](8);
+              _context9.prev = 20;
+              _context9.t0 = _context9["catch"](8);
               setLoading(false);
-              hasUnverifiedOrder = _get(_context8.t0, 'response.data.data.hasUnverifiedOrder');
-              message = _get(_context8.t0, 'response.data.message', {});
+              hasUnverifiedOrder = _get(_context9.t0, 'response.data.data.hasUnverifiedOrder');
+              message = _get(_context9.t0, 'response.data.message', {});
               if (hasUnverifiedOrder && typeof message === 'string') {
                 setPendingVerificationMessage(message);
-              } else if (axios.isAxiosError(_context8.t0)) {
+              } else if (axios.isAxiosError(_context9.t0)) {
                 if (_includes(message, 'You must be aged') && typeof message === 'string') {
                   formikHelpers.setFieldError('holderAge', message);
                 }
@@ -6890,14 +6999,14 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 if (_includes(error, 'The cart is expired') && !hideErrorsAlertSection) {
                   setError(error);
                 }
-                onRegisterError(_context8.t0, values.email);
+                onRegisterError(_context9.t0, values.email);
               }
-              return _context8.abrupt("return");
+              return _context9.abrupt("return");
             case 27:
-              _context8.next = 29;
+              _context9.next = 29;
               return getProfileData();
             case 29:
-              profileData = _context8.sent;
+              profileData = _context9.sent;
               profileSpecifiedData = _get(profileData, 'data');
               profileDataObj = setLoggedUserData(profileSpecifiedData);
               userDataObj = isLoggedIn ? userData : profileDataObj;
@@ -6905,32 +7014,36 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 window.localStorage.setItem('user_data', JSON.stringify(userDataObj));
               }
               checkoutBody = collectCheckoutBody(values, userDataObj);
-              if (isBrowser) {
+              if (isBrowser && !isSinglePageCheckout) {
                 addAddOnsInAttributes(checkoutBody);
               }
-              _context8.next = 38;
+              if (isSinglePageCheckout) {
+                checkoutBody.attributes.add_ons = singleCheckoutAddons;
+              }
+              _context9.next = 39;
               return postOnCheckout(checkoutBody, flagFreeTicket);
-            case 38:
-              checkoutResponse = _context8.sent;
-              _context8.next = 41;
+            case 39:
+              checkoutResponse = _context9.sent;
+              _context9.next = 42;
               return updateCheckout({
                 attributes: {
                   event_id: eventId
                 }
               });
-            case 41:
-              checkoutUpdateResponse = _context8.sent;
+            case 42:
+              checkoutUpdateResponse = _context9.sent;
+              paymentResponse = null;
               if (!isSinglePageCheckout) {
-                _context8.next = 64;
+                _context9.next = 67;
                 break;
               }
               _checkoutResponse$dat = checkoutResponse.data.attributes, hash = _checkoutResponse$dat.hash, total = _checkoutResponse$dat.total;
-              _context8.next = 46;
+              _context9.next = 48;
               return getPaymentData(String(hash));
-            case 46:
-              paymentDataResponse = _context8.sent;
+            case 48:
+              paymentDataResponse = _context9.sent;
               if (!paymentDataResponse.success) {
-                _context8.next = 64;
+                _context9.next = 67;
                 break;
               }
               attributes = paymentDataResponse.data.attributes;
@@ -6956,8 +7069,12 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
               isFreeTickets = !Number(total) && !Number(updatedOrderData.total) || !Number((updatedOrderData == null ? void 0 : updatedOrderData.pay_now) || 0);
               paymentMethod = attributes.payment_method || {};
               paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled;
+              if (isFreeTickets) {
+                _context9.next = 65;
+                break;
+              }
               card = cardRef.current;
-              _context8.next = 59;
+              _context9.next = 62;
               return stripeRef.current.createPaymentMethod({
                 type: 'card',
                 card: card || {
@@ -6967,43 +7084,47 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                   address: addressRef.current
                 }
               });
-            case 59:
-              paymentMethodReq = _context8.sent;
-              _context8.next = 62;
+            case 62:
+              paymentMethodReq = _context9.sent;
+              _context9.next = 65;
               return stripeRef.current.confirmCardPayment(paymentMethod.stripe_client_secret, {
                 payment_method: paymentMethodReq.paymentMethod.id
               });
-            case 62:
-              _context8.next = 64;
+            case 65:
+              _context9.next = 67;
               return handlePaymentMiddleWare(null, {}, {
                 reviewData: attributes,
                 isFreeTickets: isFreeTickets,
                 paymentPlanIsAvailable: paymentPlanAvailable,
                 showPaymentPlanSection: true,
-                handlePayment: _identity,
+                handlePayment: function handlePayment(data) {
+                  paymentResponse = data;
+                },
                 setPaymentIsLoading: _identity,
                 setError: _identity,
                 orderData: updatedOrderData,
                 eventId: eventId,
                 isBrowser: isBrowser,
-                onPaymentError: _identity
+                onPaymentError: function onPaymentError(error) {
+                  throw error;
+                }
               });
-            case 64:
+            case 67:
               removeReferralKey();
-              handleSubmit(values, formikHelpers, eventId, checkoutResponse, checkoutUpdateResponse);
-              _context8.next = 75;
+              handleSubmit(values, formikHelpers, eventId, checkoutResponse, checkoutUpdateResponse, paymentResponse);
+              _context9.next = 78;
               break;
-            case 68:
-              _context8.prev = 68;
-              _context8.t1 = _context8["catch"](0);
+            case 71:
+              _context9.prev = 71;
+              _context9.t1 = _context9["catch"](0);
               setLoading(false);
-              onSubmitError(_context8.t1);
-              _hasUnverifiedOrder = _get(_context8.t1, 'response.data.data.hasUnverifiedOrder');
-              _message = _get(_context8.t1, 'response.data.message', {});
+              onSubmitError(_context9.t1);
+              _hasUnverifiedOrder = _get(_context9.t1, 'response.data.data.hasUnverifiedOrder');
+              _message = _get(_context9.t1, 'response.data.message', {});
               if (_hasUnverifiedOrder && typeof _message === 'string') {
                 setPendingVerificationMessage(_message);
-              } else if (axios.isAxiosError(_context8.t1)) {
-                if (((_e$response = _context8.t1.response) == null ? void 0 : _e$response.status) === 401 || _get(_context8.t1, 'response.data.error') === 'invalid_token') {
+              } else if (axios.isAxiosError(_context9.t1)) {
+                if (((_e$response = _context9.t1.response) == null ? void 0 : _e$response.status) === 401 || _get(_context9.t1, 'response.data.error') === 'invalid_token') {
                   if (isBrowser) {
                     window.localStorage.removeItem('user_data');
                     setUserExpired(true);
@@ -7019,17 +7140,17 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                 if (_message && !hideErrorsAlertSection && typeof _message === 'string') {
                   setError(_message);
                 }
-                onSubmitError(_context8.t1);
+                onSubmitError(_context9.t1);
               }
-            case 75:
-              _context8.prev = 75;
-              setLoading(false);
-              return _context8.finish(75);
             case 78:
+              _context9.prev = 78;
+              setLoading(false);
+              return _context9.finish(78);
+            case 81:
             case "end":
-              return _context8.stop();
+              return _context9.stop();
           }
-        }, _callee8, null, [[0, 68, 75, 78], [8, 20]]);
+        }, _callee9, null, [[0, 71, 78, 81], [8, 20]]);
       }));
       function onSubmit(_x3, _x4) {
         return _onSubmit.apply(this, arguments);
@@ -7060,7 +7181,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
         setError(null);
         onErrorClose();
       }
-    }), !isLoggedIn && React__default.createElement("div", {
+    }), !isLoggedIn && !isSinglePageCheckout && React__default.createElement("div", {
       className: "account-actions-block"
     }, React__default.createElement("div", {
       className: "action-item"
@@ -7185,7 +7306,8 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
           })));
         })));
       }));
-    })), isSinglePageCheckout && React__default.createElement(PaymentContainer, {
+    })), isSinglePageCheckout && !orderIsFree && stripePublishableKey && React__default.createElement(PaymentContainer, {
+      stripePublishableKey: stripePublishableKey,
       formTitle: "Payment Information",
       orderInfoLabel: "",
       enableTimer: false,
@@ -7227,10 +7349,10 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
         paymentButtonText: '',
         enableAddressElement: false,
         onPaymentFieldsUpdate: function () {
-          var _onPaymentFieldsUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee9(_error, paymentFieldsData, stripe, card) {
+          var _onPaymentFieldsUpdate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee10(_error, paymentFieldsData, stripe, card) {
             var _paymentFieldsData$bi, _paymentFieldsData$bi2, _paymentFieldsData$bi3, address;
-            return _regeneratorRuntime().wrap(function _callee9$(_context9) {
-              while (1) switch (_context9.prev = _context9.next) {
+            return _regeneratorRuntime().wrap(function _callee10$(_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
                 case 0:
                   try {
                     address = {
@@ -7244,9 +7366,9 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
                   } catch (error) {}
                 case 1:
                 case "end":
-                  return _context9.stop();
+                  return _context10.stop();
               }
-            }, _callee9);
+            }, _callee10);
           }));
           function onPaymentFieldsUpdate(_x5, _x6, _x7, _x8) {
             return _onPaymentFieldsUpdate.apply(this, arguments);
@@ -7263,7 +7385,7 @@ var BillingInfoContainer = /*#__PURE__*/React__default.memo(function (_ref4) {
       disabled: props.isSubmitting || phoneValidationIsLoading
     }, props.isSubmitting ? React__default.createElement(material.CircularProgress, {
       size: 26
-    }) : buttonName))));
+    }) : orderIsFree ? freeOrderButtonName : buttonName))));
   }), showModalLogin && React__default.createElement(LoginModal, {
     logo: logo,
     onClose: function onClose() {
@@ -9662,7 +9784,9 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     hideDetailsButton = _ref$hideDetailsButto === void 0 ? false : _ref$hideDetailsButto,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? [] : _ref$columns,
-    openLoginModal = _ref.openLoginModal;
+    openLoginModal = _ref.openLoginModal,
+    _ref$customNoOrderCon = _ref.customNoOrderContent,
+    customNoOrderContent = _ref$customNoOrderCon === void 0 ? null : _ref$customNoOrderCon;
   var _useState = React.useState(null),
     data = _useState[0],
     setData = _useState[1];
@@ -9745,6 +9869,15 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     fetchData(1, limit, (eventFilter == null ? void 0 : eventFilter.url_name) || '');
     setFilter((eventFilter == null ? void 0 : eventFilter.url_name) || '');
   };
+  var noOrderContent = customNoOrderContent || React__default.createElement("div", {
+    className: "no_orders_section"
+  }, React__default.createElement("div", {
+    className: "nodata_title"
+  }, "You have no current ticket orders on this account"), React__default.createElement("div", {
+    className: "nodata_subtitle"
+  }, "Discover your next nite out ", React__default.createElement("a", {
+    href: "/events"
+  }, "here"), "."));
   return React__default.createElement("div", {
     className: "my-ticket " + theme
   }, React__default.createElement(React__default.Fragment, null, showModalLogin || !isLogged ? openLoginModal ? openLoginModal() : React__default.createElement(LoginModal, {
@@ -9801,15 +9934,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  }))) : !loading && React__default.createElement(React__default.Fragment, null, React__default.createElement("h2", null, "My Ticket Orders"), React__default.createElement("div", {
-    className: "no_orders_section"
-  }, React__default.createElement("div", {
-    className: "nodata_title"
-  }, "You have no current ticket orders on this account"), React__default.createElement("div", {
-    className: "nodata_subtitle"
-  }, "Discover your next nite out ", React__default.createElement("a", {
-    href: "/events"
-  }, "here"), "."))), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
+  }))) : !loading && React__default.createElement(React__default.Fragment, null, React__default.createElement("h2", null, "My Ticket Orders"), noOrderContent), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -14608,14 +14733,42 @@ var OrderDetails = function OrderDetails(_ref) {
   var _ref$orderData = _ref.orderData,
     orderData = _ref$orderData === void 0 ? {} : _ref$orderData,
     _ref$paymentFieldsDat = _ref.paymentFieldsData,
-    paymentFieldsData = _ref$paymentFieldsDat === void 0 ? [] : _ref$paymentFieldsDat;
+    paymentFieldsData = _ref$paymentFieldsDat === void 0 ? [] : _ref$paymentFieldsDat,
+    _ref$customMobileText = _ref.customMobileText,
+    customMobileText = _ref$customMobileText === void 0 ? 'Your order total' : _ref$customMobileText;
   var currency = orderData.currency,
     guest_count = orderData.guest_count;
   var hasTableTypes = Boolean(Number(guest_count));
+  var _useState = React.useState(false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  // Find the total field to display in the mobile view
+  var totalField = paymentFieldsData.find(function (field) {
+    return field.id === 'total';
+  });
+  var totalValue = totalField && orderData.total ? totalField.normalizer ? totalField.normalizer(orderData.total, currency, orderData) : orderData.total : '';
+  var toggleExpand = function toggleExpand() {
+    setIsExpanded(!isExpanded);
+  };
   return React__default.createElement("div", {
     className: "payment_page payment_page_single"
   }, React__default.createElement("div", {
-    className: "order_info_section",
+    className: "mobile-order-summary"
+  }, React__default.createElement("div", {
+    className: "mobile-order-summary-content",
+    onClick: toggleExpand
+  }, React__default.createElement("div", {
+    className: "mobile-order-info"
+  }, React__default.createElement("div", {
+    className: "mobile-order-info-container order-info-container-left " + (isExpanded ? 'open' : '')
+  }, React__default.createElement("div", {
+    className: "mobile-order-text"
+  }, customMobileText)), !isExpanded && React__default.createElement("div", {
+    className: "mobile-order-info-container order-info-container-right"
+  }, React__default.createElement("div", {
+    className: "mobile-order-total"
+  }, totalValue))))), React__default.createElement("div", {
+    className: "order_info_section " + (isExpanded ? 'expanded' : 'collapsed'),
     style: {
       display: hasTableTypes ? 'block' : 'grid'
     }