tf-checkout-react 1.4.18 → 1.4.20

package/dist/tf-checkout-react.esm.js

@@ -68,7 +68,6 @@ import TableRow from '@mui/material/TableRow';
 import _has from 'lodash-es/has';
 import _isNull from 'lodash-es/isNull';
 import _reverse from 'lodash-es/reverse';
-import { identity } from 'lodash-es';
 import _keys from 'lodash-es/keys';
 import _values from 'lodash-es/values';
 import moment$1 from 'moment';
@@ -920,6 +919,18 @@ var handlePaymentSuccess = function handlePaymentSuccess(orderHash) {
   });
   return res;
 };
+var createPaymentPlan = function createPaymentPlan(orderHash, stripePaymentMethodId) {
+  var res = publicRequest.post("v1/order/" + orderHash + "/payment_plan/create", {
+    stripe_payment_method_id: stripePaymentMethodId
+  }, {
+    headers: {
+      'Referer-Url': isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
+    throw error;
+  });
+  return res;
+};
 var handleFreeSuccess = function handleFreeSuccess(orderHash) {
   var res = publicRequest.post("v1/order/" + orderHash + "/complete_free_registration", undefined, {
     headers: {
@@ -3857,11 +3868,13 @@ var CheckoutForm = function CheckoutForm(_ref) {
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$handleSetLoading = _ref.handleSetLoading,
-    handleSetLoading = _ref$handleSetLoading === void 0 ? function () {} : _ref$handleSetLoading,
+    handleSetLoading = _ref$handleSetLoading === void 0 ? _identity : _ref$handleSetLoading,
     _ref$conditions = _ref.conditions,
     conditions = _ref$conditions === void 0 ? [] : _ref$conditions,
     disableZipSection = _ref.disableZipSection,
-    paymentButtonText = _ref.paymentButtonText;
+    paymentButtonText = _ref.paymentButtonText,
+    _ref$forPaymentPlan = _ref.forPaymentPlan,
+    forPaymentPlan = _ref$forPaymentPlan === void 0 ? false : _ref$forPaymentPlan;
   var stripe = useStripe();
   var elements = useElements();
   var _useState = useState(''),
@@ -3878,7 +3891,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     setAllowSubmit = _useState4[1];
   var handleSubmit = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
-      var card, address, paymentMethodReq, _yield$stripe$confirm, _error;
+      var card, address, _setupResponse$setupI, setupResponse, paymentMethodReq, _yield$stripe$confirm, _error;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -3911,7 +3924,26 @@ var CheckoutForm = function CheckoutForm(_ref) {
             if (!disableZipSection) {
               address.postal_code = postalCode;
             }
-            _context.next = 15;
+            if (!forPaymentPlan) {
+              _context.next = 19;
+              break;
+            }
+            _context.next = 16;
+            return stripe.confirmCardSetup(stripe_client_secret, {
+              payment_method: {
+                card: card || {
+                  token: ''
+                }
+              }
+            });
+          case 16:
+            setupResponse = _context.sent;
+            onSubmit(null, {
+              paymentMethodId: (_setupResponse$setupI = setupResponse.setupIntent) == null ? void 0 : _setupResponse$setupI.payment_method
+            });
+            return _context.abrupt("return");
+          case 19:
+            _context.next = 21;
             return stripe.createPaymentMethod({
               type: 'card',
               card: card || {
@@ -3921,44 +3953,44 @@ var CheckoutForm = function CheckoutForm(_ref) {
                 address: address
               }
             });
-          case 15:
+          case 21:
             paymentMethodReq = _context.sent;
             if (!paymentMethodReq.error) {
-              _context.next = 20;
+              _context.next = 26;
               break;
             }
             setStripeError(paymentMethodReq.error.message || null);
             handleSetLoading(false);
             return _context.abrupt("return");
-          case 20:
+          case 26:
             handleSetLoading(true);
-            _context.next = 23;
+            _context.next = 29;
             return stripe.confirmCardPayment(stripe_client_secret, {
               payment_method: paymentMethodReq.paymentMethod.id
             });
-          case 23:
+          case 29:
             _yield$stripe$confirm = _context.sent;
             _error = _yield$stripe$confirm.error;
             if (!_error) {
-              _context.next = 29;
+              _context.next = 35;
               break;
             }
             setStripeError(_error.message);
             handleSetLoading(false);
             return _context.abrupt("return");
-          case 29:
+          case 35:
             onSubmit(null);
-            _context.next = 35;
+            _context.next = 41;
             break;
-          case 32:
-            _context.prev = 32;
+          case 38:
+            _context.prev = 38;
             _context.t0 = _context["catch"](1);
             onSubmit(_context.t0);
-          case 35:
+          case 41:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[1, 32]]);
+      }, _callee, null, [[1, 38]]);
     }));
     return function handleSubmit(_x) {
       return _ref2.apply(this, arguments);
@@ -4061,7 +4093,63 @@ var CheckoutForm = function CheckoutForm(_ref) {
     type: "submit"
   }, isLoading ? React.createElement(CircularProgress$1, {
     size: 26
-  }) : (paymentButtonText ? paymentButtonText : 'Pay') + " " + getCurrencySymbolByCurrency(currency) + total))));
+  }) : forPaymentPlan ? 'Confirm Payment Plan' : (paymentButtonText ? paymentButtonText : 'Pay') + " " + getCurrencySymbolByCurrency(currency) + total))));
+};
+
+var PaymentPlanSection = function PaymentPlanSection(props) {
+  var _paymentPlanConfig$sa;
+  var paymentPlanConfig = props.paymentPlanConfig,
+    currency = props.currency,
+    paymentPlanUseSavedCard = props.paymentPlanUseSavedCard,
+    setPaymentPlanUseSavedCard = props.setPaymentPlanUseSavedCard;
+  return React.createElement("div", {
+    className: "payment_plan"
+  }, React.createElement("h2", {
+    className: "payment_plan_title"
+  }, "Payment Plan Terms"), React.createElement("div", {
+    className: "payment_plan_block"
+  }, React.createElement("div", {
+    className: "payment_plan_text"
+  }, "By clicking on the \u201CConfirm Payment Plan\u201D button, you are starting your payment plan of", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, paymentPlanConfig.total_installments), ' ', "payments of", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment), currency)), ", which will be drawn from your account every ", paymentPlanConfig.interval, " days, with the first payment taken later today."), paymentPlanConfig.has_admin_fee && React.createElement("div", {
+    className: "payment_plan_text"
+  }, "This includes a non-refundable admin fee of", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee), currency)), ' ', "per payment."), paymentPlanConfig.requires_deposit && React.createElement("div", {
+    className: "payment_plan_text"
+  }, "You will also be charged a single, non-refundable deposit of", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency)), "."), React.createElement("div", {
+    className: "payment_plan_text payment_plan_note payment_plan_highlight"
+  }, "NOTE: If today\u2019s payment fails, your plan will not activate. Your tickets will not be issued until you complete your final payment."), !paymentPlanConfig.non_refundable_type && React.createElement("div", {
+    className: "payment_plan_text"
+  }, "If you do not complete your payments, your order will be canceled. Your", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, "first payment of", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment), currency)), paymentPlanConfig.has_admin_fee && React.createElement(React.Fragment, null, ", plus the", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, "non-refundable admin-fee of", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee), currency))), ' ', "will not be refunded."), paymentPlanConfig.non_refundable_type === 'percent' && React.createElement("div", {
+    className: "payment_plan_text"
+  }, "If you do not complete your payments, you will receive", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, createFixedFloatNormalizer(0)(100 - paymentPlanConfig.non_refundable_amount), "%"), ' ', "of your money back", paymentPlanConfig.requires_deposit && React.createElement(React.Fragment, null, ", excluding your", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency), ' ', "deposit"), "."), paymentPlanConfig.non_refundable_type === 'fixed' && React.createElement("div", {
+    className: "payment_plan_text"
+  }, "If you do not complete your payments, you will receive all your money back", paymentPlanConfig.non_refundable_amount && React.createElement(React.Fragment, null, "except for the non-refundable amount of", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.non_refundable_amount), currency), paymentPlanConfig.requires_deposit && React.createElement(React.Fragment, null, ", excluding your", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency), ' ', "deposit")), "."), !!((_paymentPlanConfig$sa = paymentPlanConfig.saved_card) != null && _paymentPlanConfig$sa.stripe_payment_method_id) && React.createElement(React.Fragment, null, paymentPlanUseSavedCard && React.createElement("div", {
+    className: "payment_plan_text"
+  }, ' ', "Your payment will proceed with the card ending in ****", ' ', React.createElement("span", {
+    className: "payment_plan_highlight"
+  }, '' + paymentPlanConfig.saved_card.last_4_digits)), React.createElement("div", null, React.createElement(CheckboxField, {
+    label: React.createElement("span", {
+      className: 'payment_plan_toggle_label'
+    }, "Use this card"),
+    required: true,
+    onChange: function onChange() {
+      setPaymentPlanUseSavedCard(!paymentPlanUseSavedCard);
+    },
+    checked: paymentPlanUseSavedCard
+  })))));
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
@@ -4074,6 +4162,23 @@ var getStripePromise = function getStripePromise(reviewData) {
   }
   return loadStripe(stripePublishableKey, options);
 };
+var initialPaymentPlanConfiguration = {
+  requires_deposit: false,
+  deposit: 0,
+  interval: 0,
+  non_refundable_amount: 0,
+  non_refundable_type: null,
+  has_admin_fee: false,
+  admin_fee: 0,
+  total_installments: 0,
+  price_per_installment: 0,
+  stripe_setup_intent_secret: '',
+  total: 0,
+  saved_card: {
+    last_4_digits: null,
+    stripe_payment_method_id: null
+  }
+};
 var initialOrderValues = {
   id: '',
   product_name: '',
@@ -4088,10 +4193,13 @@ var initialOrderValues = {
 };
 var initialReviewValues = {
   order_details: {
+    id: '',
     order_hash: ''
   },
   payment_method: {
-    stripe_client_secret: ''
+    stripe_client_secret: '',
+    stripe_payment_plan_enabled: false,
+    stripe_payment_plan_configuration: null
   },
   billing_info: {}
 };
@@ -4122,7 +4230,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     _ref$enableTimer = _ref.enableTimer,
     enableTimer = _ref$enableTimer === void 0 ? false : _ref$enableTimer,
     _ref$enablePaymentPla = _ref.enablePaymentPlan,
-    enablePaymentPlan = _ref$enablePaymentPla === void 0 ? false : _ref$enablePaymentPla,
+    enablePaymentPlan = _ref$enablePaymentPla === void 0 ? true : _ref$enablePaymentPla,
     paymentButtonText = _ref.paymentButtonText,
     _ref$orderInfoLabel = _ref.orderInfoLabel,
     orderInfoLabel = _ref$orderInfoLabel === void 0 ? 'Order Review' : _ref$orderInfoLabel,
@@ -4149,6 +4257,18 @@ var PaymentContainer = function PaymentContainer(_ref) {
   var _useState7 = useState([]),
     conditions = _useState7[0],
     setConditions = _useState7[1];
+  var _useState8 = useState(false),
+    paymentPlanIsAvailable = _useState8[0],
+    setPaymentPlanIsAvailable = _useState8[1];
+  var _useState9 = useState(initialPaymentPlanConfiguration),
+    paymentPlanConfig = _useState9[0],
+    setPaymentPlanConfig = _useState9[1];
+  var _useState10 = useState(true),
+    paymentPlanUseSavedCard = _useState10[0],
+    setPaymentPlanUseSavedCard = _useState10[1];
+  var _useState11 = useState(''),
+    currency = _useState11[0],
+    setCurrency = _useState11[1];
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
   var eventId = getQueryVariable('event_id') || _get(reviewData, 'cart[0].product_id') || '';
@@ -4160,6 +4280,30 @@ var PaymentContainer = function PaymentContainer(_ref) {
     page: 'review',
     pageUrl: pageUrl
   });
+  useEffect(function () {
+    var paymentMethod = reviewData.payment_method || {};
+    var paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled && enablePaymentPlan;
+    setPaymentPlanIsAvailable(paymentPlanAvailable);
+    if (paymentPlanAvailable) {
+      var _paymentPlanConfig$sa;
+      var _paymentPlanConfig = paymentMethod.stripe_payment_plan_configuration || initialPaymentPlanConfiguration;
+      setPaymentPlanConfig(_paymentPlanConfig);
+      setPaymentPlanUseSavedCard(!!((_paymentPlanConfig$sa = _paymentPlanConfig.saved_card) != null && _paymentPlanConfig$sa.stripe_payment_method_id));
+      if (typeof window !== 'undefined') {
+        var _reviewData$order_det;
+        var sessionData = window.localStorage.getItem('paymentConfiguration');
+        var session = sessionData ? JSON.parse(sessionData) : {};
+        if (!!session && (session == null ? void 0 : session.orderId) == ((_reviewData$order_det = reviewData.order_details) == null ? void 0 : _reviewData$order_det.id)) {
+          var _session$paymentPlanU, _session$showPaymentP;
+          setPaymentPlanUseSavedCard((_session$paymentPlanU = session.paymentPlanUseSavedCard) != null ? _session$paymentPlanU : false);
+          setShowPaymentPlanSection((_session$showPaymentP = session.showPaymentPlanSection) != null ? _session$showPaymentP : false);
+        }
+      }
+    }
+  }, [enablePaymentPlan, reviewData]);
+  useEffect(function () {
+    updateSessionInformation();
+  }, [showPaymentPlanSection, paymentPlanUseSavedCard]);
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var response, _cart$2, attributes, cart, order_details, _order_details$ticket, ticket, orderDataArray, _orderData;
@@ -4202,6 +4346,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 tableTypes: orderDataArray
               };
               setOrderData(_orderData);
+              setCurrency(order_details == null ? void 0 : order_details.currency);
               onGetPaymentDataSuccess(response.data);
             }
             _context.next = 11;
@@ -4263,7 +4408,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   // 2. handle payment     ---> v1/order/${orderHash}/pay/
   // 3. redirect to confirmation page
   var handlePaymentMiddleWare = /*#__PURE__*/function () {
-    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(error) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(error, data) {
       var order_hash, paymentSuccessResponse, isWindowDefined, _window;
       return _regeneratorRuntime().wrap(function _callee3$(_context3) {
         while (1) switch (_context3.prev = _context3.next) {
@@ -4283,16 +4428,26 @@ var PaymentContainer = function PaymentContainer(_ref) {
             _context3.next = 7;
             return handleFreeSuccess(order_hash);
           case 7:
-            _context3.t0 = _context3.sent;
-            _context3.next = 13;
+            paymentSuccessResponse = _context3.sent;
+            _context3.next = 19;
             break;
           case 10:
-            _context3.next = 12;
-            return handlePaymentSuccess(order_hash);
-          case 12:
-            _context3.t0 = _context3.sent;
+            if (!(paymentPlanIsAvailable && showPaymentPlanSection)) {
+              _context3.next = 16;
+              break;
+            }
+            _context3.next = 13;
+            return createPaymentPlan(order_hash, _get(data, 'paymentMethodId', ''));
           case 13:
-            paymentSuccessResponse = _context3.t0;
+            paymentSuccessResponse = _context3.sent;
+            _context3.next = 19;
+            break;
+          case 16:
+            _context3.next = 18;
+            return handlePaymentSuccess(order_hash);
+          case 18:
+            paymentSuccessResponse = _context3.sent;
+          case 19:
             if (paymentSuccessResponse.status === 200) {
               handlePayment(paymentSuccessResponse);
               setPaymentIsLoading(false);
@@ -4301,34 +4456,51 @@ var PaymentContainer = function PaymentContainer(_ref) {
               localStorage.removeItem("reservationStart-" + eventId);
               localStorage.removeItem('ownReservations');
               localStorage.removeItem('tierId');
-              isWindowDefined = typeof window !== "undefined";
+              isWindowDefined = typeof window !== 'undefined';
               if (isWindowDefined) {
                 (_window = window) == null ? void 0 : _window.dataLayer.push({
-                  'event': 'Purchase',
-                  'orderValue': orderData.total,
-                  'orderCurrency': orderData.currency,
-                  'orderId': orderData.id
+                  event: 'Purchase',
+                  orderValue: orderData.total,
+                  orderCurrency: orderData.currency,
+                  orderId: orderData.id
                 });
               }
             }
-            _context3.next = 22;
+            _context3.next = 27;
             break;
-          case 17:
-            _context3.prev = 17;
-            _context3.t1 = _context3["catch"](0);
-            setError(_get(_context3.t1, 'response.data.message'));
-            setPaymentIsLoading(false);
-            onPaymentError(_context3.t1.response);
           case 22:
+            _context3.prev = 22;
+            _context3.t0 = _context3["catch"](0);
+            setError(_get(_context3.t0, 'response.data.message'));
+            setPaymentIsLoading(false);
+            onPaymentError(_context3.t0.response);
+          case 27:
           case "end":
             return _context3.stop();
         }
-      }, _callee3, null, [[0, 17]]);
+      }, _callee3, null, [[0, 22]]);
     }));
-    return function handlePaymentMiddleWare(_x) {
+    return function handlePaymentMiddleWare(_x, _x2) {
       return _ref4.apply(this, arguments);
     };
   }();
+  var showPaymentForm = function showPaymentForm() {
+    var _paymentPlanConfig$sa2;
+    var showPaymentForm = !isFreeTickets;
+    if (paymentPlanIsAvailable && showPaymentPlanSection && !!((_paymentPlanConfig$sa2 = paymentPlanConfig.saved_card) != null && _paymentPlanConfig$sa2.stripe_payment_method_id)) {
+      showPaymentForm = !paymentPlanUseSavedCard;
+    }
+    return showPaymentForm;
+  };
+  var updateSessionInformation = function updateSessionInformation() {
+    if (typeof window !== 'undefined' && !!(orderData != null && orderData.id)) {
+      window.localStorage.setItem('paymentConfiguration', JSON.stringify({
+        paymentPlanUseSavedCard: paymentPlanUseSavedCard,
+        showPaymentPlanSection: showPaymentPlanSection,
+        orderId: orderData == null ? void 0 : orderData.id
+      }));
+    }
+  };
   var themeMui = createTheme(themeOptions);
   var hasTableTypes = Boolean(Number(orderData.guest_count));
   var paymentFieldsData = hasTableTypes ? [{
@@ -4385,12 +4557,14 @@ var PaymentContainer = function PaymentContainer(_ref) {
       className = _field$className === void 0 ? '' : _field$className,
       _field$normalizer = field.normalizer,
       normalizer = _field$normalizer === void 0 ? _identity : _field$normalizer;
-    var currency = orderData.currency;
     var value = orderData[id];
     var component = null;
     if (field.id === 'add_ons' && _isEmpty(value)) {
       return false;
     }
+    if (field.id === 'total' && paymentPlanIsAvailable && showPaymentPlanSection) {
+      value = '' + paymentPlanConfig.total;
+    }
     if (field.id === 'tableTypes') {
       var valueArray = value;
       component = React.createElement("div", {
@@ -4446,29 +4620,23 @@ var PaymentContainer = function PaymentContainer(_ref) {
         className: "add-on-each"
       }, ' each'));
     })));
-  })), enablePaymentPlan && React.createElement("div", {
+  })), !isFreeTickets && paymentPlanIsAvailable && React.createElement("div", {
     className: "payment_toggle"
-  }, React.createElement("label", {
-    htmlFor: "togBtn",
-    className: "switch"
-  }, React.createElement("input", {
-    type: "checkbox",
-    id: "togBtn",
-    disabled: true,
-    onChange: function onChange() {
-      return setShowPaymentPlanSection(!showPaymentPlanSection);
-    }
-  }), React.createElement("div", {
-    className: "slider round"
-  }), React.createElement("span", {
-    className: "tog_text"
-  }, "Click to checkout using Payment Plan"))), showPaymentPlanSection && React.createElement("div", {
-    className: "payment_plan"
-  }, React.createElement("h2", null, "PAYMENT PLAN"), React.createElement("div", {
-    className: "plan_block"
-  }, React.createElement("h3", null, "Mbrand Payment Plan Terms"), React.createElement("p", null, "By clicking on the \u201CConfirm Payment Plan\u201D button, you are starting your payment plan of 2 payments of $115.00, which will be drawn from your account every 2 weeks, with the first payment taken later today."), React.createElement("p", null, "This includes a non-refundable admin fee of $3.00 per payment."), React.createElement("p", {
-    className: "payment_note"
-  }, "NOTE: If today\u2019s payment fails, your payment plan will not activate, and your tickets will not be issued until you complete your final payment."), React.createElement("p", null, "If you do not complete your payements, your order will be canceled. Your first payment of $115.00, plus the non-refundable admin fee of $3.00 will not be refunded."), React.createElement("p", null, "Your payment will proceed with the card ending in **** 4242."))), !isFreeTickets ? React.createElement("div", {
+  }, React.createElement(CheckboxField, {
+    label: React.createElement("span", {
+      className: 'payment_plan_toggle_label'
+    }, "Click to checkout using Payment Plan"),
+    required: true,
+    onChange: function onChange(_) {
+      setShowPaymentPlanSection(!showPaymentPlanSection);
+    },
+    checked: showPaymentPlanSection
+  })), showPaymentPlanSection && React.createElement(PaymentPlanSection, {
+    paymentPlanConfig: paymentPlanConfig,
+    currency: currency,
+    paymentPlanUseSavedCard: paymentPlanUseSavedCard,
+    setPaymentPlanUseSavedCard: setPaymentPlanUseSavedCard
+  }), showPaymentForm() ? React.createElement("div", {
     className: "payment_info"
   }, React.createElement("div", {
     className: "payment_info_label"
@@ -4478,7 +4646,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     stripe: getStripePromise(reviewData),
     options: elementsOptions
   }, React.createElement(CheckoutForm, {
-    stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
+    stripe_client_secret: paymentPlanIsAvailable && showPaymentPlanSection ? paymentPlanConfig.stripe_setup_intent_secret : _get(reviewData, 'payment_method.stripe_client_secret'),
     total: orderData.guest_count ? orderData.pay_now : orderData.total,
     onSubmit: handlePaymentMiddleWare,
     error: error,
@@ -4491,7 +4659,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     conditions: conditions,
     stripeCardOptions: stripeCardOptions,
     disableZipSection: disableZipSection,
-    paymentButtonText: paymentButtonText
+    paymentButtonText: paymentButtonText,
+    forPaymentPlan: paymentPlanIsAvailable && showPaymentPlanSection
   })))) : React.createElement("div", {
     className: "payment_button " + (paymentIsLoading ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
@@ -4499,11 +4668,18 @@ var PaymentContainer = function PaymentContainer(_ref) {
     type: "button",
     onClick: function onClick() {
       setPaymentIsLoading(true);
-      handlePaymentMiddleWare(null);
+      var data;
+      if (paymentPlanIsAvailable && showPaymentPlanSection && paymentPlanUseSavedCard) {
+        var _paymentPlanConfig$sa3;
+        data = {
+          paymentMethodId: (_paymentPlanConfig$sa3 = paymentPlanConfig.saved_card) == null ? void 0 : _paymentPlanConfig$sa3.stripe_payment_method_id
+        };
+      }
+      handlePaymentMiddleWare(null, data);
     }
   }, paymentIsLoading ? React.createElement(CircularProgress$1, {
     size: 26
-  }) : 'Complete Registration')))));
+  }) : isFreeTickets ? 'Complete Registration' : 'Confirm Payment Plan')))));
 };
 
 var config = {
@@ -4769,7 +4945,13 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     _confirmationLabels$c2 = confirmationLabels.confirmationMain,
     confirmationMain = _confirmationLabels$c2 === void 0 ? 'Your tickets are available in My Tickets section' : _confirmationLabels$c2,
     _confirmationLabels$c3 = confirmationLabels.confirmationHelper,
-    confirmationHelper = _confirmationLabels$c3 === void 0 ? 'Please bring them with you to the event' : _confirmationLabels$c3;
+    confirmationHelper = _confirmationLabels$c3 === void 0 ? 'Please bring them with you to the event' : _confirmationLabels$c3,
+    _confirmationLabels$p = confirmationLabels.paymentPlanConfirmationTitle,
+    paymentPlanConfirmationTitle = _confirmationLabels$p === void 0 ? 'Your Tickets are Confirmed!' : _confirmationLabels$p,
+    _confirmationLabels$p2 = confirmationLabels.paymentPlanConfirmationMain,
+    paymentPlanConfirmationMain = _confirmationLabels$p2 === void 0 ? 'Your payment plan is pending and we are trying to take your initial payment. If your initial payment does not complete, your payment plan will be cancelled.' : _confirmationLabels$p2,
+    _confirmationLabels$p3 = confirmationLabels.paymentPlanConfirmationHelper,
+    paymentPlanConfirmationHelper = _confirmationLabels$p3 === void 0 ? 'You will receive a confirmation with your tickets once your final payment has been made.' : _confirmationLabels$p3;
   var pageUrl = isBrowser ? window.location.href.split('?')[0] : '';
   usePixel(eventId, {
     page: 'complete',
@@ -4806,16 +4988,20 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "header-product-text"
   }, React.createElement("p", {
     className: "title"
-  }, confirmationTitle), React.createElement("div", {
+  }, data.is_payment_plan ? paymentPlanConfirmationTitle : confirmationTitle), React.createElement("div", {
     className: "share-message-section",
     dangerouslySetInnerHTML: data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? createMarkup(data.custom_confirmation_page_text) : undefined
-  }, data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? undefined : React.createElement(React.Fragment, null, data.attach_tickets ? React.createElement("span", {
+  }, data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? undefined : React.createElement(React.Fragment, null, Boolean(data.is_payment_plan) && React.createElement(React.Fragment, null, React.createElement("span", {
+    className: "main"
+  }, paymentPlanConfirmationMain), React.createElement("span", {
+    className: "helper"
+  }, paymentPlanConfirmationHelper)), !data.is_payment_plan && React.createElement(React.Fragment, null, data.attach_tickets ? React.createElement("span", {
     className: "main"
   }, "Your tickets have been emailed to you") : React.createElement("span", {
     className: "main"
   }, confirmationMain), React.createElement("span", {
     className: "helper"
-  }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper))))), data.custom_confirmation_page_text && !data.custom_confirmation_page_text_full_replacement ? React.createElement("div", {
+  }, data.attach_tickets ? 'Please bring them with you to the event' : confirmationHelper)))))), data.custom_confirmation_page_text && !data.custom_confirmation_page_text_full_replacement ? React.createElement("div", {
     className: "custom-confirmation-page-text",
     dangerouslySetInnerHTML: createMarkup(data.custom_confirmation_page_text)
   }) : null, data.disable_referral === false && isReferralEnabled && React.createElement(React.Fragment, null, React.createElement("div", {
@@ -4894,7 +5080,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       className: "pricing-section_sublabel"
     }, pricing.subLabel)), React.createElement("div", {
       className: "pricing-section_price"
-    }, ' ', pricing.price));
+    }, " ", pricing.price));
   }), showPricingNoteSection && React.createElement("div", {
     className: "note-pricing-section"
   }, "^ This is based on the most expensive ticket in your order."))))));
@@ -8228,26 +8414,32 @@ var SeatMapComponent = function SeatMapComponent(props) {
     ticketTypeTierRelations = _seatMapProps$ticketT === void 0 ? {} : _seatMapProps$ticketT,
     tierPrices = seatMapProps.tierPrices,
     isReserving = seatMapProps.isReserving,
-    predefinedSeats = seatMapProps.predefinedSeats;
+    predefinedSeats = seatMapProps.predefinedSeats,
+    isLoadingSeatMapData = seatMapProps.isLoadingSeatMapData;
   useEffect(function () {
     var parentElement = document.getElementById(mapContainerId || CONTAINER_DEFAULT_ID);
     // Temp solution
     window.tierPrices = tierPrices;
-    if (Boolean(parentElement)) {
-      var mapComponent = React.createElement(SeatMapView, {
-        disabled: isReserving,
-        loading: isReserving,
-        events: seatMapEvents,
-        isSelectionOn: false,
-        seatData: seatData,
-        statuses: statuses,
-        ticketTypeTireRelationsArray: getTierRelationsArray(ticketTypeTierRelations),
-        width: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
-        height: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
-        isBlockMap: seatMapType === 'block',
-        isTableMap: seatMapType === 'table',
-        predefinedSeats: predefinedSeats
-      });
+    if (parentElement) {
+      var mapComponent = null;
+      if (!(seatData && statuses) || isLoadingSeatMapData) {
+        mapComponent = React.createElement(Loader, null);
+      } else {
+        mapComponent = React.createElement(SeatMapView, {
+          disabled: isReserving,
+          loading: isReserving,
+          events: seatMapEvents,
+          isSelectionOn: false,
+          seatData: seatData,
+          statuses: statuses,
+          ticketTypeTireRelationsArray: getTierRelationsArray(ticketTypeTierRelations),
+          width: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
+          height: Math.min((parentElement == null ? void 0 : parentElement.clientWidth) || 800, 800),
+          isBlockMap: seatMapType === 'block',
+          isTableMap: seatMapType === 'table',
+          predefinedSeats: predefinedSeats
+        });
+      }
       ReactDom.render(mapComponent, parentElement);
     }
   }, [isReserving, mapContainerId, seatData, seatMapEvents, seatMapType, tierPrices, statuses, ticketTypeTierRelations]);
@@ -8395,7 +8587,7 @@ var TicketsSection$1 = function TicketsSection(props) {
       }
     }, showDescription && React.createElement(Tooltip, {
       title: "View Ticket Info",
-      placement: 'left',
+      placement: "left",
       arrow: true,
       componentsProps: {
         tooltip: {
@@ -8459,7 +8651,7 @@ var TicketsSection$1 = function TicketsSection(props) {
       }, option);
     }))))), selectedTicketsInfo[dropdownData.seatId] && React.createElement("div", {
       className: "ticket-description-content",
-      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || "")
+      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || '')
     })));
   })), React.createElement("div", null, React.createElement(Button$2, {
     className: "book-button\n              " + (bookButtonIsDisabled ? 'disabled' : '') + "\n              " + (isButtonScrollable ? 'is-scrollable' : '') + "\n            ",
@@ -8483,9 +8675,9 @@ var SeatMapContainer = function SeatMapContainer(props) {
     _props$timerMessage = props.timerMessage,
     timerMessage = _props$timerMessage === void 0 ? '' : _props$timerMessage,
     _props$onAddToCartSuc = props.onAddToCartSuccess,
-    onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? identity : _props$onAddToCartSuc,
+    onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? _identity : _props$onAddToCartSuc,
     _props$onCountdownFin = props.onCountdownFinish,
-    onCountdownFinish = _props$onCountdownFin === void 0 ? identity : _props$onCountdownFin,
+    onCountdownFinish = _props$onCountdownFin === void 0 ? _identity : _props$onCountdownFin,
     ticketDeleteButtonContent = props.ticketDeleteButtonContent,
     ticketInfoContent = props.ticketInfoContent;
   var _useState = useState({
@@ -8507,7 +8699,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
   var _useState5 = useState(true),
     isLoadingSeatMapData = _useState5[0],
     setIsLoadingSeatMapData = _useState5[1];
-  var _useState6 = useState(true),
+  var _useState6 = useState(false),
     isLoadingStatuses = _useState6[0],
     setIsLoadingStatuses = _useState6[1];
   var _useState7 = useState(false),
@@ -8594,10 +8786,14 @@ var SeatMapContainer = function SeatMapContainer(props) {
             });
           });
           localStorage.setItem('reservationData', JSON.stringify(reservationData));
-          setSeatMapStatuses(statusesResponse.data.attributes);
-          setReservedSeats(reservationData);
+          if (!_isEqual(seatMapStatuses, statusesResponse.data.attributes)) {
+            setSeatMapStatuses(statusesResponse.data.attributes);
+          }
+          if (!_isEqual(reservationData, reservedSeats)) {
+            setReservedSeats(reservationData);
+          }
           // automatically set ticket/table type if it's the only one
-          if (ticketTypeTierRelationsRef.current) {
+          if (ticketTypeTierRelationsRef.current && !_isEqual(reservationData, reservedSeats)) {
             if (!isGuestCountsSet.current) {
               updateGuestCounts(reservationData);
               isGuestCountsSet.current = true;
@@ -8622,25 +8818,21 @@ var SeatMapContainer = function SeatMapContainer(props) {
           _context2.t0 = _context2["catch"](0);
           setError('Something went wrong');
         case 17:
-          _context2.prev = 17;
-          setIsLoadingStatuses(false);
-          return _context2.finish(17);
-        case 20:
         case "end":
           return _context2.stop();
       }
-    }, _callee2, null, [[0, 14, 17, 20]]);
-  })), [eventId]);
+    }, _callee2, null, [[0, 14]]);
+  })), [eventId, seatMapStatuses, reservedSeats]);
   var startTimer = useCallback(function (duration) {
     setShowTimer(true);
     if (!localStorage.getItem("reservationStart-" + eventId)) {
       localStorage.setItem("reservationStart-" + eventId, String(Date.now() + duration));
     }
-  }, []);
+  }, [eventId]);
   var endTimer = useCallback(function () {
     localStorage.removeItem("reservationStart-" + eventId);
     setShowTimer(false);
-  }, []);
+  }, [eventId]);
   var handleSeatReservation = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(eventId, tierId, seatId) {
       var reservationData, relations, _keys2, firstItem, _error$response, _error$response$data;
@@ -8668,7 +8860,9 @@ var SeatMapContainer = function SeatMapContainer(props) {
           case 15:
             _context3.prev = 15;
             _context3.t0 = _context3["catch"](1);
-            setError((_context3.t0 == null ? void 0 : (_error$response = _context3.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message) === 'Selected seat is not available' ? 'No more of this ticket type are available right now - they’re either sold out or in people’s shopping carts. Try refreshing the page!' : 'Something went wrong');
+            setError((_context3.t0 == null ? void 0 : (_error$response = _context3.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message) === 'Selected seat is not available' ?
+            // eslint-disable-next-line max-len
+            'No more of this ticket type are available right now - they’re either sold out or in people’s shopping carts. Try refreshing the page!' : 'Something went wrong');
           case 18:
             _context3.prev = 18;
             setIsReserving(false);
@@ -8830,23 +9024,28 @@ var SeatMapContainer = function SeatMapContainer(props) {
           while (1) switch (_context7.prev = _context7.next) {
             case 0:
               _context7.prev = 0;
-              _context7.next = 3;
+              setIsLoadingStatuses(true);
+              _context7.next = 4;
               return fetchSeatMapData();
-            case 3:
-              _context7.next = 5;
+            case 4:
+              _context7.next = 6;
               return fetchSeatMapReservations();
-            case 5:
-              _context7.next = 10;
+            case 6:
+              _context7.next = 11;
               break;
-            case 7:
-              _context7.prev = 7;
+            case 8:
+              _context7.prev = 8;
               _context7.t0 = _context7["catch"](0);
               setError('Something went wrong');
-            case 10:
+            case 11:
+              _context7.prev = 11;
+              setIsLoadingStatuses(false);
+              return _context7.finish(11);
+            case 14:
             case "end":
               return _context7.stop();
           }
-        }, _callee7, null, [[0, 7]]);
+        }, _callee7, null, [[0, 8, 11, 14]]);
       }));
       return function makeRequests() {
         return _ref7.apply(this, arguments);
@@ -8856,13 +9055,15 @@ var SeatMapContainer = function SeatMapContainer(props) {
     if (country) {
       localStorage.setItem('eventCountry', country);
     }
+  }, [country, eventId, fetchSeatMapData]);
+  useEffect(function () {
     var intervalId = setInterval(function () {
       fetchSeatMapReservations();
     }, 3000);
     return function () {
       clearInterval(intervalId);
     };
-  }, [fetchSeatMapData, fetchSeatMapReservations]);
+  }, [fetchSeatMapReservations]);
   return React.createElement(React.Fragment, null, error && React.createElement(Alert, {
     severity: "error",
     onClose: function onClose() {
@@ -8909,7 +9110,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
     tableMapEnabled: Boolean(tableMapEnabled),
     guestCounts: guestCounts,
     setGuestCounts: setGuestCounts
-  }), seatMapData.seatMap && seatMapStatuses && React.createElement(SeatMapComponent, {
+  }), React.createElement(SeatMapComponent, {
     seatMapProps: {
       seatData: seatMapData.seatMap,
       statuses: seatMapStatuses,
@@ -8920,7 +9121,8 @@ var SeatMapContainer = function SeatMapContainer(props) {
         onSeatClick: onSeatClick
       },
       isReserving: isReserving,
-      predefinedSeats: seatMapData.predefinedSeats
+      predefinedSeats: seatMapData.predefinedSeats,
+      isLoadingSeatMapData: isLoadingSeatMapData
     },
     mapContainerId: mapContainerId
   }));