tf-checkout-react 1.4.19 → 1.4.20

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

@@ -75,7 +75,6 @@ var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var _has = _interopDefault(require('lodash/has'));
 var _isNull = _interopDefault(require('lodash/isNull'));
 var _reverse = _interopDefault(require('lodash/reverse'));
-var lodash = require('lodash');
 var _keys = _interopDefault(require('lodash/keys'));
 var _values = _interopDefault(require('lodash/values'));
 var moment$1 = _interopDefault(require('moment'));
@@ -927,6 +926,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: {
@@ -3864,11 +3875,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 = reactStripeJs.useStripe();
   var elements = reactStripeJs.useElements();
   var _useState = React.useState(''),
@@ -3885,7 +3898,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:
@@ -3918,7 +3931,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 || {
@@ -3928,44 +3960,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);
@@ -4068,7 +4100,63 @@ var CheckoutForm = function CheckoutForm(_ref) {
     type: "submit"
   }, isLoading ? React__default.createElement(CircularProgress, {
     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__default.createElement("div", {
+    className: "payment_plan"
+  }, React__default.createElement("h2", {
+    className: "payment_plan_title"
+  }, "Payment Plan Terms"), React__default.createElement("div", {
+    className: "payment_plan_block"
+  }, React__default.createElement("div", {
+    className: "payment_plan_text"
+  }, "By clicking on the \u201CConfirm Payment Plan\u201D button, you are starting your payment plan of", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, paymentPlanConfig.total_installments), ' ', "payments of", ' ', React__default.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__default.createElement("div", {
+    className: "payment_plan_text"
+  }, "This includes a non-refundable admin fee of", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee), currency)), ' ', "per payment."), paymentPlanConfig.requires_deposit && React__default.createElement("div", {
+    className: "payment_plan_text"
+  }, "You will also be charged a single, non-refundable deposit of", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency)), "."), React__default.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__default.createElement("div", {
+    className: "payment_plan_text"
+  }, "If you do not complete your payments, your order will be canceled. Your", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, "first payment of", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment), currency)), paymentPlanConfig.has_admin_fee && React__default.createElement(React__default.Fragment, null, ", plus the", ' ', React__default.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__default.createElement("div", {
+    className: "payment_plan_text"
+  }, "If you do not complete your payments, you will receive", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, createFixedFloatNormalizer(0)(100 - paymentPlanConfig.non_refundable_amount), "%"), ' ', "of your money back", paymentPlanConfig.requires_deposit && React__default.createElement(React__default.Fragment, null, ", excluding your", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency), ' ', "deposit"), "."), paymentPlanConfig.non_refundable_type === 'fixed' && React__default.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__default.createElement(React__default.Fragment, null, "except for the non-refundable amount of", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.non_refundable_amount), currency), paymentPlanConfig.requires_deposit && React__default.createElement(React__default.Fragment, null, ", excluding your", ' ', currencyNormalizerCreator(createFixedFloatNormalizer(2)(paymentPlanConfig.deposit), currency), ' ', "deposit")), "."), !!((_paymentPlanConfig$sa = paymentPlanConfig.saved_card) != null && _paymentPlanConfig$sa.stripe_payment_method_id) && React__default.createElement(React__default.Fragment, null, paymentPlanUseSavedCard && React__default.createElement("div", {
+    className: "payment_plan_text"
+  }, ' ', "Your payment will proceed with the card ending in ****", ' ', React__default.createElement("span", {
+    className: "payment_plan_highlight"
+  }, '' + paymentPlanConfig.saved_card.last_4_digits)), React__default.createElement("div", null, React__default.createElement(CheckboxField, {
+    label: React__default.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 || '';
@@ -4081,6 +4169,23 @@ var getStripePromise = function getStripePromise(reviewData) {
   }
   return stripeJs.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: '',
@@ -4095,10 +4200,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: {}
 };
@@ -4129,7 +4237,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,
@@ -4156,6 +4264,18 @@ var PaymentContainer = function PaymentContainer(_ref) {
   var _useState7 = React.useState([]),
     conditions = _useState7[0],
     setConditions = _useState7[1];
+  var _useState8 = React.useState(false),
+    paymentPlanIsAvailable = _useState8[0],
+    setPaymentPlanIsAvailable = _useState8[1];
+  var _useState9 = React.useState(initialPaymentPlanConfiguration),
+    paymentPlanConfig = _useState9[0],
+    setPaymentPlanConfig = _useState9[1];
+  var _useState10 = React.useState(true),
+    paymentPlanUseSavedCard = _useState10[0],
+    setPaymentPlanUseSavedCard = _useState10[1];
+  var _useState11 = React.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') || '';
@@ -4167,6 +4287,30 @@ var PaymentContainer = function PaymentContainer(_ref) {
     page: 'review',
     pageUrl: pageUrl
   });
+  React.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]);
+  React.useEffect(function () {
+    updateSessionInformation();
+  }, [showPaymentPlanSection, paymentPlanUseSavedCard]);
   React.useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
       var response, _cart$2, attributes, cart, order_details, _order_details$ticket, ticket, orderDataArray, _orderData;
@@ -4209,6 +4353,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;
@@ -4270,7 +4415,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) {
@@ -4290,16 +4435,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);
@@ -4308,34 +4463,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 = styles.createTheme(themeOptions);
   var hasTableTypes = Boolean(Number(orderData.guest_count));
   var paymentFieldsData = hasTableTypes ? [{
@@ -4392,12 +4564,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__default.createElement("div", {
@@ -4453,29 +4627,23 @@ var PaymentContainer = function PaymentContainer(_ref) {
         className: "add-on-each"
       }, ' each'));
     })));
-  })), enablePaymentPlan && React__default.createElement("div", {
+  })), !isFreeTickets && paymentPlanIsAvailable && React__default.createElement("div", {
     className: "payment_toggle"
-  }, React__default.createElement("label", {
-    htmlFor: "togBtn",
-    className: "switch"
-  }, React__default.createElement("input", {
-    type: "checkbox",
-    id: "togBtn",
-    disabled: true,
-    onChange: function onChange() {
-      return setShowPaymentPlanSection(!showPaymentPlanSection);
-    }
-  }), React__default.createElement("div", {
-    className: "slider round"
-  }), React__default.createElement("span", {
-    className: "tog_text"
-  }, "Click to checkout using Payment Plan"))), showPaymentPlanSection && React__default.createElement("div", {
-    className: "payment_plan"
-  }, React__default.createElement("h2", null, "PAYMENT PLAN"), React__default.createElement("div", {
-    className: "plan_block"
-  }, React__default.createElement("h3", null, "Mbrand Payment Plan Terms"), React__default.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__default.createElement("p", null, "This includes a non-refundable admin fee of $3.00 per payment."), React__default.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__default.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__default.createElement("p", null, "Your payment will proceed with the card ending in **** 4242."))), !isFreeTickets ? React__default.createElement("div", {
+  }, React__default.createElement(CheckboxField, {
+    label: React__default.createElement("span", {
+      className: 'payment_plan_toggle_label'
+    }, "Click to checkout using Payment Plan"),
+    required: true,
+    onChange: function onChange(_) {
+      setShowPaymentPlanSection(!showPaymentPlanSection);
+    },
+    checked: showPaymentPlanSection
+  })), showPaymentPlanSection && React__default.createElement(PaymentPlanSection, {
+    paymentPlanConfig: paymentPlanConfig,
+    currency: currency,
+    paymentPlanUseSavedCard: paymentPlanUseSavedCard,
+    setPaymentPlanUseSavedCard: setPaymentPlanUseSavedCard
+  }), showPaymentForm() ? React__default.createElement("div", {
     className: "payment_info"
   }, React__default.createElement("div", {
     className: "payment_info_label"
@@ -4485,7 +4653,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     stripe: getStripePromise(reviewData),
     options: elementsOptions
   }, React__default.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,
@@ -4498,7 +4666,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     conditions: conditions,
     stripeCardOptions: stripeCardOptions,
     disableZipSection: disableZipSection,
-    paymentButtonText: paymentButtonText
+    paymentButtonText: paymentButtonText,
+    forPaymentPlan: paymentPlanIsAvailable && showPaymentPlanSection
   })))) : React__default.createElement("div", {
     className: "payment_button " + (paymentIsLoading ? 'disabled-payment-button' : '')
   }, React__default.createElement("button", {
@@ -4506,11 +4675,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__default.createElement(CircularProgress, {
     size: 26
-  }) : 'Complete Registration')))));
+  }) : isFreeTickets ? 'Complete Registration' : 'Confirm Payment Plan')))));
 };
 
 var config = {
@@ -4776,7 +4952,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',
@@ -4813,16 +4995,20 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "header-product-text"
   }, React__default.createElement("p", {
     className: "title"
-  }, confirmationTitle), React__default.createElement("div", {
+  }, data.is_payment_plan ? paymentPlanConfirmationTitle : confirmationTitle), React__default.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__default.createElement(React__default.Fragment, null, data.attach_tickets ? React__default.createElement("span", {
+  }, data.custom_confirmation_page_text && data.custom_confirmation_page_text_full_replacement ? undefined : React__default.createElement(React__default.Fragment, null, Boolean(data.is_payment_plan) && React__default.createElement(React__default.Fragment, null, React__default.createElement("span", {
+    className: "main"
+  }, paymentPlanConfirmationMain), React__default.createElement("span", {
+    className: "helper"
+  }, paymentPlanConfirmationHelper)), !data.is_payment_plan && React__default.createElement(React__default.Fragment, null, data.attach_tickets ? React__default.createElement("span", {
     className: "main"
   }, "Your tickets have been emailed to you") : React__default.createElement("span", {
     className: "main"
   }, confirmationMain), React__default.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__default.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__default.createElement("div", {
     className: "custom-confirmation-page-text",
     dangerouslySetInnerHTML: createMarkup(data.custom_confirmation_page_text)
   }) : null, data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
@@ -4901,7 +5087,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       className: "pricing-section_sublabel"
     }, pricing.subLabel)), React__default.createElement("div", {
       className: "pricing-section_price"
-    }, ' ', pricing.price));
+    }, " ", pricing.price));
   }), showPricingNoteSection && React__default.createElement("div", {
     className: "note-pricing-section"
   }, "^ This is based on the most expensive ticket in your order."))))));
@@ -8235,26 +8421,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;
   React.useEffect(function () {
     var parentElement = document.getElementById(mapContainerId || CONTAINER_DEFAULT_ID);
     // Temp solution
     window.tierPrices = tierPrices;
-    if (Boolean(parentElement)) {
-      var mapComponent = React__default.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__default.createElement(Loader, null);
+      } else {
+        mapComponent = React__default.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]);
@@ -8402,7 +8594,7 @@ var TicketsSection$1 = function TicketsSection(props) {
       }
     }, showDescription && React__default.createElement(Tooltip, {
       title: "View Ticket Info",
-      placement: 'left',
+      placement: "left",
       arrow: true,
       componentsProps: {
         tooltip: {
@@ -8466,7 +8658,7 @@ var TicketsSection$1 = function TicketsSection(props) {
       }, option);
     }))))), selectedTicketsInfo[dropdownData.seatId] && React__default.createElement("div", {
       className: "ticket-description-content",
-      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || "")
+      dangerouslySetInnerHTML: createMarkup(selectedTicketData.description || '')
     })));
   })), React__default.createElement("div", null, React__default.createElement(reactBootstrap.Button, {
     className: "book-button\n              " + (bookButtonIsDisabled ? 'disabled' : '') + "\n              " + (isButtonScrollable ? 'is-scrollable' : '') + "\n            ",
@@ -8490,9 +8682,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 ? lodash.identity : _props$onAddToCartSuc,
+    onAddToCartSuccess = _props$onAddToCartSuc === void 0 ? _identity : _props$onAddToCartSuc,
     _props$onCountdownFin = props.onCountdownFinish,
-    onCountdownFinish = _props$onCountdownFin === void 0 ? lodash.identity : _props$onCountdownFin,
+    onCountdownFinish = _props$onCountdownFin === void 0 ? _identity : _props$onCountdownFin,
     ticketDeleteButtonContent = props.ticketDeleteButtonContent,
     ticketInfoContent = props.ticketInfoContent;
   var _useState = React.useState({
@@ -8514,7 +8706,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
   var _useState5 = React.useState(true),
     isLoadingSeatMapData = _useState5[0],
     setIsLoadingSeatMapData = _useState5[1];
-  var _useState6 = React.useState(true),
+  var _useState6 = React.useState(false),
     isLoadingStatuses = _useState6[0],
     setIsLoadingStatuses = _useState6[1];
   var _useState7 = React.useState(false),
@@ -8601,10 +8793,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;
@@ -8629,25 +8825,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 = React.useCallback(function (duration) {
     setShowTimer(true);
     if (!localStorage.getItem("reservationStart-" + eventId)) {
       localStorage.setItem("reservationStart-" + eventId, String(Date.now() + duration));
     }
-  }, []);
+  }, [eventId]);
   var endTimer = React.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;
@@ -8675,7 +8867,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);
@@ -8837,23 +9031,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);
@@ -8863,13 +9062,15 @@ var SeatMapContainer = function SeatMapContainer(props) {
     if (country) {
       localStorage.setItem('eventCountry', country);
     }
+  }, [country, eventId, fetchSeatMapData]);
+  React.useEffect(function () {
     var intervalId = setInterval(function () {
       fetchSeatMapReservations();
     }, 3000);
     return function () {
       clearInterval(intervalId);
     };
-  }, [fetchSeatMapData, fetchSeatMapReservations]);
+  }, [fetchSeatMapReservations]);
   return React__default.createElement(React__default.Fragment, null, error && React__default.createElement(material.Alert, {
     severity: "error",
     onClose: function onClose() {
@@ -8916,7 +9117,7 @@ var SeatMapContainer = function SeatMapContainer(props) {
     tableMapEnabled: Boolean(tableMapEnabled),
     guestCounts: guestCounts,
     setGuestCounts: setGuestCounts
-  }), seatMapData.seatMap && seatMapStatuses && React__default.createElement(SeatMapComponent, {
+  }), React__default.createElement(SeatMapComponent, {
     seatMapProps: {
       seatData: seatMapData.seatMap,
       statuses: seatMapStatuses,
@@ -8927,7 +9128,8 @@ var SeatMapContainer = function SeatMapContainer(props) {
         onSeatClick: onSeatClick
       },
       isReserving: isReserving,
-      predefinedSeats: seatMapData.predefinedSeats
+      predefinedSeats: seatMapData.predefinedSeats,
+      isLoadingSeatMapData: isLoadingSeatMapData
     },
     mapContainerId: mapContainerId
   }));