tf-checkout-react 1.0.72 → 1.0.76

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

@@ -7,7 +7,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var formik = require('formik');
-var LoadingButton = _interopDefault(require('@mui/lab/LoadingButton'));
+var Button = _interopDefault(require('@mui/material/Button'));
 var _identity = _interopDefault(require('lodash/identity'));
 var _map = _interopDefault(require('lodash/map'));
 var _get = _interopDefault(require('lodash/get'));
@@ -21,12 +21,13 @@ var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
 var _isArray = _interopDefault(require('lodash/isArray'));
 var nanoid = require('nanoid');
 var TextField = _interopDefault(require('@mui/material/TextField'));
+var styles = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
-var styles = require('@mui/material/styles');
+var styles$1 = require('@mui/material/styles');
 var Container = _interopDefault(require('@mui/material/Container'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
@@ -36,13 +37,13 @@ var reactShare = require('react-share');
 var _some = _interopDefault(require('lodash/some'));
 var _find = _interopDefault(require('lodash/find'));
 var _isEmpty = _interopDefault(require('lodash/isEmpty'));
-var Button = _interopDefault(require('react-bootstrap/Button'));
+var Button$1 = _interopDefault(require('react-bootstrap/Button'));
 var jwt_decode = _interopDefault(require('jwt-decode'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
 var _has = _interopDefault(require('lodash/has'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
-var Button$1 = _interopDefault(require('@mui/material/Button'));
+var SVG = _interopDefault(require('react-inlinesvg'));
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
 var TableCell = _interopDefault(require('@mui/material/TableCell'));
@@ -931,6 +932,10 @@ var setConfigs = function setConfigs(configs) {
   });
 
   publicRequest.setBaseUrl(CONFIGS.BASE_URL);
+
+  if (CONFIGS.X_SOURCE_ORIGIN) {
+    setXSourceOrigin(CONFIGS.X_SOURCE_ORIGIN);
+  }
 };
 
 var getQueryVariable = function getQueryVariable(variable) {
@@ -989,9 +994,43 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
+var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, logedInValues) {
+  var ticket_holders = [];
+  var first_name = _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || '';
+  var last_name = _get(logedInValues, 'lastName', '') || _get(logedInValues, 'last_name') || '';
+
+  var phone = _get(logedInValues, 'phone', '');
+
+  var email = _get(logedInValues, 'email', '');
+
+  for (var i = 0; i <= ticketsQuantity - 1; i++) {
+    var individualHolder = i ? {
+      first_name: '',
+      last_name: '',
+      phone: '',
+      email: ''
+    } : {
+      first_name: first_name,
+      last_name: last_name,
+      phone: phone,
+      email: email
+    };
+    ticket_holders.push(individualHolder);
+  }
+
+  var body = {
+    attributes: _extends({}, logedInValues, {
+      email: email,
+      confirm_email: email,
+      first_name: first_name,
+      last_name: last_name,
+      ticket_holders: ticket_holders
+    })
+  };
+  return body;
+};
+
 var isWindowDefined = typeof window !== 'undefined';
-var discardedOrigins = ['http://localhost', 'gtsb.io', 'gatsbyjs.io', 'https://www.houseofx.nyc', 'https://tickets-staging.houseofx.nyc'];
-var origin = isWindowDefined && window.location.origin;
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -1001,12 +1040,6 @@ if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = /*#__PURE__*/localStorage.getItem('auth_guest_token');
 }
 
-if (isWindowDefined && !discardedOrigins.some(function (el) {
-  return origin && origin.includes(el);
-})) {
-  ttfHeaders['X-Source-Origin'] = 'houseofx.nyc';
-}
-
 var publicRequest = /*#__PURE__*/axios.create({
   baseURL: CONFIGS.BASE_URL || "https://www.ticketfairy.com/api",
   headers: ttfHeaders
@@ -1049,11 +1082,9 @@ publicRequest.interceptors.request.use(function (config) {
     config.headers = _updatedHeaders;
   }
 
-  if (isWindowDefined && !discardedOrigins.some(function (el) {
-    return origin && origin.includes(el);
-  })) {
+  if (CONFIGS.X_SOURCE_ORIGIN) {
     var _updatedHeaders2 = _extends({}, config.headers, {
-      'X-Source-Origin': 'houseofx.nyc'
+      'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN
     });
 
     config.headers = _updatedHeaders2;
@@ -1078,6 +1109,9 @@ publicRequest.setAccessToken = function (token) {
   return publicRequest.defaults.headers.common.Authorization = token;
 };
 
+var setXSourceOrigin = function setXSourceOrigin(sourceOrigin) {
+  ttfHeaders['X-Source-Origin'] = sourceOrigin;
+};
 var setCustomHeader = function setCustomHeader(response) {
   var guestHeaderResponseValue = _get(response, 'headers.authorization-guest');
 
@@ -1660,7 +1694,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     country: (data == null ? void 0 : data.country) || '',
     phone: (data == null ? void 0 : data.phone) || '',
     street_address: (data == null ? void 0 : data.streetAddress) || '',
-    state: (data == null ? void 0 : data.state) || '',
+    state: (data == null ? void 0 : data.stateId) || '',
     zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
@@ -1786,6 +1820,7 @@ var CustomField = function CustomField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
+  var customTheme = styles.useTheme();
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
     label: label,
@@ -1800,6 +1835,12 @@ var CustomField = function CustomField(_ref) {
       MenuProps: {
         className: theme
       }
+    },
+    InputLabelProps: {
+      sx: customTheme.input
+    },
+    inputProps: {
+      sx: customTheme.input
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React__default.createElement("option", {
@@ -1816,9 +1857,13 @@ var CheckboxField = function CheckboxField(_ref) {
       field = _ref.field,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
+  var customTheme = styles.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
     control: React__default.createElement(Checkbox, Object.assign({}, field, rest)),
-    label: label
+    label: label,
+    componentsProps: {
+      typography: customTheme.checkbox
+    }
   }));
 };
 
@@ -1837,9 +1882,11 @@ var SelectField = function SelectField(_ref) {
 
   var error = _get(errors, field.name);
 
+  var customTheme = styles.useTheme();
   return React__default.createElement(material.FormControl, {
     fullWidth: true
   }, React__default.createElement(material.InputLabel, {
+    style: customTheme.input,
     htmlFor: field.name,
     error: !!error && isTouched,
     shrink: true
@@ -1857,7 +1904,9 @@ var SelectField = function SelectField(_ref) {
     MenuProps: {
       className: theme
     }
-  }, field), _map(selectOptions, function (option) {
+  }, field, {
+    style: customTheme.input
+  }), _map(selectOptions, function (option) {
     return React__default.createElement("option", {
       key: option.value,
       value: option.value,
@@ -1955,6 +2004,7 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name));
+  var customTheme = styles.useTheme();
   return React__default.createElement(MuiPhoneNumber, Object.assign({
     name: 'phone',
     onChange: function onChange(e) {
@@ -1967,26 +2017,16 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
     error: !!error && isTouched,
     helperText: isTouched && error,
     fullWidth: true,
+    InputLabelProps: {
+      sx: customTheme.input
+    },
+    InputProps: {
+      sx: customTheme.input
+    },
     autoFormat: false
   }, rest));
 };
 
-var getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
-  }
-
-  var image = '';
-
-  if (!name.trim().length) {
-    return image;
-  }
-
-  return image;
-};
-
-var TTFLOGO = /*#__PURE__*/getImage('logo-ttf.png');
-
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -1995,10 +2035,11 @@ var LogicRunner = function LogicRunner(_ref) {
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
       onGetStatesError = _ref.onGetStatesError;
+  var prevCountry = React.useRef(values.country);
   React.useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var _mappedStates$0$value, _mappedStates$, res, mappedStates;
+        var res, mappedStates, _mappedStates$0$value, _mappedStates$;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -2017,7 +2058,12 @@ var LogicRunner = function LogicRunner(_ref) {
                   };
                 });
                 setStates(mappedStates);
-                setFieldValue('state', (_mappedStates$0$value = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.value) != null ? _mappedStates$0$value : '');
+
+                if (prevCountry.current !== values.country) {
+                  setFieldValue('state', (_mappedStates$0$value = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.value) != null ? _mappedStates$0$value : '');
+                  prevCountry.current = values.country;
+                }
+
                 onGetStatesSuccess(res.data);
                 _context.next = 13;
                 break;
@@ -2055,13 +2101,13 @@ var LogicRunner = function LogicRunner(_ref) {
             var parsedData = JSON.parse(userDataEncoded);
             var mappedValues = {
               firstName: (parsedData == null ? void 0 : parsedData.first_name) || '',
-              lastName: parsedData == null ? void 0 : parsedData.last_name,
+              lastName: (parsedData == null ? void 0 : parsedData.last_name) || '',
               email: (parsedData == null ? void 0 : parsedData.email) || '',
               phone: (parsedData == null ? void 0 : parsedData.phone) || '',
               confirmEmail: (parsedData == null ? void 0 : parsedData.email) || '',
               state: (parsedData == null ? void 0 : parsedData.state) || '',
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
-              country: (parsedData == null ? void 0 : parsedData.country) || 1,
+              country: (parsedData == null ? void 0 : parsedData.country) || "1",
               zip: (parsedData == null ? void 0 : parsedData.zip) || '',
               brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || '',
               city: (parsedData == null ? void 0 : parsedData.city) || '',
@@ -2125,20 +2171,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       onAuthorizeSuccess = _ref3$onAuthorizeSucc === void 0 ? function () {} : _ref3$onAuthorizeSucc,
       _ref3$onAuthorizeErro = _ref3.onAuthorizeError,
       onAuthorizeError = _ref3$onAuthorizeErro === void 0 ? function () {} : _ref3$onAuthorizeErro,
-      _ref3$onLogin = _ref3.onLogin,
-      onLogin = _ref3$onLogin === void 0 ? function () {} : _ref3$onLogin,
+      onLogin = _ref3.onLogin,
       _ref3$onLoginSuccess = _ref3.onLoginSuccess,
       onLoginSuccess = _ref3$onLoginSuccess === void 0 ? function () {} : _ref3$onLoginSuccess,
       _ref3$isLoggedIn = _ref3.isLoggedIn,
       pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
-      fontFamily = _ref3.fontFamily;
-  var themeMui = styles.createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
+      _ref3$accountInfoTitl = _ref3.accountInfoTitle,
+      accountInfoTitle = _ref3$accountInfoTitl === void 0 ? '' : _ref3$accountInfoTitl,
+      hideLogo = _ref3.hideLogo,
+      themeOptions = _ref3.themeOptions;
+  var themeMui = styles$1.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
@@ -2234,9 +2276,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     setIsLoggedIn(false);
   }, []);
   React.useEffect(function () {
-    isWindowDefined && window.document.addEventListener("auth_error", handleAuthErrors);
+    isWindowDefined && window.document.addEventListener('auth_error', handleAuthErrors);
     return function () {
-      isWindowDefined && window.document.removeEventListener("auth_error", handleAuthErrors);
+      isWindowDefined && window.document.removeEventListener('auth_error', handleAuthErrors);
     };
   }, [handleAuthErrors]);
   React.useEffect(function () {
@@ -2264,7 +2306,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 setCountries(_map(_get(res, 'data.data'), function (item, key) {
                   return {
                     label: item,
-                    value: Number(key)
+                    value: key
                   };
                 }));
                 onGetCountriesSuccess(res.data);
@@ -2364,7 +2406,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
               userDataResponse = _context4.sent;
               profileSpecifiedData = _get(userDataResponse, 'data.data');
               profileDataObj = setLoggedUserData(profileSpecifiedData);
-              setUserValues(profileDataObj);
+              setUserValues(_extends({}, profileDataObj, {
+                firstName: profileDataObj.first_name,
+                lastName: profileDataObj.last_name
+              }));
               window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
               onGetProfileDataSuccess(userDataResponse.data);
 
@@ -2396,13 +2441,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   React.useEffect(function () {
     fetchUserData(access_token);
   }, [access_token]);
-  return React__default.createElement(styles.ThemeProvider, {
+  return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
-      firstName: firstNameLogged,
-      lastName: lastNameLogged,
-      country: 1,
+      country: _get(userData, 'country', '') || "1",
+      state: _get(userData, 'state', '') || "1",
       brand_opt_in: optedInFieldValue
     }), userValues),
     enableReinitialize: true,
@@ -2493,12 +2537,13 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     formikHelpers.setFieldError('confirmPassword', error.password);
                   }
 
-                  if (error != null && error.email) {
+                  if (error != null && error.email && !onLogin) {
+                    // False will stand for outside controll
                     setAlreadyHasUser(true);
                     setShowModalLogin(true);
                   }
 
-                  onRegisterError(_context5.t0);
+                  onRegisterError(_context5.t0, values.email);
                 }
 
                 return _context5.abrupt("return");
@@ -2576,19 +2621,23 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       className: "billing-info-container " + theme
     }, !isLoggedIn && React__default.createElement("div", {
       className: "account-actions-block"
-    }, React__default.createElement("div", null, "Got a ", React__default.createElement("strong", null, "TICKET"), "FAIRY account?"), React__default.createElement("div", null, "Login & skip ahead:"), React__default.createElement("div", {
+    }, React__default.createElement("div", null, accountInfoTitle), React__default.createElement("div", null, "Login & skip ahead:"), React__default.createElement("div", {
       className: "login-block"
     }, React__default.createElement("button", {
       className: "login-register-button",
       type: "button",
       onClick: function onClick() {
-        onLogin();
-        setShowModalLogin(true);
+        // If outside login needed to skip package login functionallity
+        if (onLogin) {
+          onLogin();
+        } else {
+          setShowModalLogin(true);
+        }
       }
-    }, "Login"), React__default.createElement("div", {
+    }, "Login"), !hideLogo && React__default.createElement("div", {
       className: "logo-image-container"
     }, React__default.createElement("img", {
-      src: TTFLOGO,
+      src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
       alt: "nodata"
     })))), _map(dataWithUniqueIds, function (item) {
       var label = item.label,
@@ -2661,17 +2710,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     })), React__default.createElement("div", {
       className: "button-container"
-    }, React__default.createElement(LoadingButton, {
+    }, React__default.createElement(Button, {
       type: "submit",
       variant: "contained",
       className: "login-register-button",
-      loadingIndicator: React__default.createElement(material.CircularProgress, {
-        color: "inherit",
-        size: 26
-      }),
-      loading: props.isSubmitting,
       disabled: props.isSubmitting
-    }, buttonName))));
+    }, props.isSubmitting ? React__default.createElement(material.CircularProgress, {
+      size: 26
+    }) : buttonName))));
   }), showModalLogin && React__default.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
@@ -2735,7 +2781,8 @@ var CheckoutForm = function CheckoutForm(_ref) {
       _ref$handleSetLoading = _ref.handleSetLoading,
       handleSetLoading = _ref$handleSetLoading === void 0 ? function () {} : _ref$handleSetLoading,
       _ref$conditions = _ref.conditions,
-      conditions = _ref$conditions === void 0 ? [] : _ref$conditions;
+      conditions = _ref$conditions === void 0 ? [] : _ref$conditions,
+      disableZipSection = _ref.disableZipSection;
   var stripe = reactStripeJs.useStripe();
   var elements = reactStripeJs.useElements();
 
@@ -2767,7 +2814,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
               _context.prev = 1;
               event.preventDefault();
 
-              if (postalCode) {
+              if (!(!postalCode && !disableZipSection)) {
                 _context.next = 7;
                 break;
               }
@@ -2792,10 +2839,14 @@ var CheckoutForm = function CheckoutForm(_ref) {
               address = {
                 city: billing_info.city,
                 line1: billing_info.street_address,
-                state: billing_info.state,
-                postal_code: postalCode
+                state: billing_info.state
               };
-              _context.next = 14;
+
+              if (!disableZipSection) {
+                address.postal_code = postalCode;
+              }
+
+              _context.next = 15;
               return stripe.createPaymentMethod({
                 type: 'card',
                 card: card || {
@@ -2806,11 +2857,11 @@ var CheckoutForm = function CheckoutForm(_ref) {
                 }
               });
 
-            case 14:
+            case 15:
               paymentMethodReq = _context.sent;
 
               if (!paymentMethodReq.error) {
-                _context.next = 19;
+                _context.next = 20;
                 break;
               }
 
@@ -2818,18 +2869,18 @@ var CheckoutForm = function CheckoutForm(_ref) {
               handleSetLoading(false);
               return _context.abrupt("return");
 
-            case 19:
-              _context.next = 21;
+            case 20:
+              _context.next = 22;
               return stripe.confirmCardPayment(stripe_client_secret, {
                 payment_method: paymentMethodReq.paymentMethod.id
               });
 
-            case 21:
+            case 22:
               _yield$stripe$confirm = _context.sent;
               _error = _yield$stripe$confirm.error;
 
               if (!_error) {
-                _context.next = 27;
+                _context.next = 28;
                 break;
               }
 
@@ -2837,22 +2888,22 @@ var CheckoutForm = function CheckoutForm(_ref) {
               handleSetLoading(false);
               return _context.abrupt("return");
 
-            case 27:
+            case 28:
               onSubmit(null);
-              _context.next = 33;
+              _context.next = 34;
               break;
 
-            case 30:
-              _context.prev = 30;
+            case 31:
+              _context.prev = 31;
               _context.t0 = _context["catch"](1);
               onSubmit(_context.t0);
 
-            case 33:
+            case 34:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 30]]);
+      }, _callee, null, [[1, 31]]);
     }));
 
     return function handleSubmit(_x) {
@@ -2913,7 +2964,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "Card number"), React__default.createElement(reactStripeJs.CardNumberElement, {
-    options: _extends({}, options, stripeCardOptions),
+    options: _extends({}, options.style, stripeCardOptions),
     onReady: _identity,
     onChange: _identity,
     onBlur: _identity,
@@ -2923,14 +2974,14 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React__default.createElement(reactStripeJs.CardExpiryElement, {
-    options: _extends({}, options, stripeCardOptions)
+    options: _extends({}, options.style, stripeCardOptions)
   })), React__default.createElement("label", {
     className: "cvc_element"
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React__default.createElement(reactStripeJs.CardCvcElement, {
-    options: _extends({}, options, stripeCardOptions)
-  })), React__default.createElement("label", {
+    options: _extends({}, options.style, stripeCardOptions)
+  })), !disableZipSection && React__default.createElement("label", {
     className: "zip_element"
   }, React__default.createElement("p", {
     className: "card_label_text"
@@ -2957,17 +3008,25 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React__default.createElement(CircularProgress, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
+  }, isLoading ? React__default.createElement(CircularProgress, {
+    size: 26
+  }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
 
-var getStripePromise = function getStripePromise(stripePublishableKey) {
-  if (stripePublishableKey === void 0) {
-    stripePublishableKey = publishableKey;
+var getStripePromise = function getStripePromise(reviewData) {
+  var stripePublishableKey = _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);
+  return stripeJs.loadStripe(stripePublishableKey, options);
 };
 
 function Loader() {
@@ -3011,7 +3070,9 @@ var PaymentContainer = function PaymentContainer(_ref) {
       onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError,
       _ref$stripeCardOption = _ref.stripeCardOptions,
       stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
-      fontFamily = _ref.fontFamily;
+      _ref$disableZipSectio = _ref.disableZipSection,
+      disableZipSection = _ref$disableZipSectio === void 0 ? false : _ref$disableZipSectio,
+      themeOptions = _ref.themeOptions;
 
   var _useState = React.useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3195,14 +3256,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  var themeMui = styles.createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
-  return React__default.createElement(styles.ThemeProvider, {
+  var themeMui = styles$1.createTheme(themeOptions);
+  return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement("div", {
     className: "payment_page"
@@ -3238,7 +3293,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
   }, "Please provide your payment information"), showErrorText && React__default.createElement("p", {
     className: "payment_info__error"
   }, errorText), React__default.createElement("div", null, React__default.createElement(reactStripeJs.Elements, {
-    stripe: getStripePromise(_get(reviewData, 'payment_method.stripe_publishable_key'))
+    stripe: getStripePromise(reviewData)
   }, React__default.createElement(CheckoutForm, {
     stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
     total: orderData.total,
@@ -3251,7 +3306,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       return setPaymentIsLoading(value);
     },
     conditions: conditions,
-    stripeCardOptions: stripeCardOptions
+    stripeCardOptions: stripeCardOptions,
+    disableZipSection: disableZipSection
   })))))));
 };
 
@@ -3425,7 +3481,8 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       _ref$onGetConfirmatio = _ref.onGetConfirmationDataSuccess,
       onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
       _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
-      onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2;
+      onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2,
+      orderHash = _ref.orderHash;
   var inputRef = React.useRef(null);
 
   var _useState = React.useState(null),
@@ -3441,15 +3498,17 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData');
+              dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData') || '';
+              dataDecoded = dataEncoded ? JSON.parse(dataEncoded) : {
+                hash: orderHash
+              };
+              hash = dataDecoded.hash;
 
-              if (!dataEncoded) {
+              if (!hash) {
                 _context.next = 18;
                 break;
               }
 
-              dataDecoded = JSON.parse(dataEncoded);
-              hash = dataDecoded.hash;
               _context.prev = 4;
               _context.next = 7;
               return getConfirmationData(hash);
@@ -3559,13 +3618,13 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     value: data.personal_share_link,
     onChange: onChangeShareLink
   }), React__default.createElement("div", {
-    className: 'share-by-link-copy-icon',
+    className: "share-by-link-copy-icon",
     onClick: function onClick() {
       return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
     }
   }, React__default.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
-    alt: 'copy'
+    alt: "copy"
   })))), (showDefaultShareButtons || !!shareButtons.length) && React__default.createElement(SocialButtons, {
     showDefaultShareButtons: showDefaultShareButtons,
     name: data.product_name,
@@ -3579,7 +3638,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, "How much cheaper?"), _map(data.personal_share_sales, function (pricing, index) {
     return React__default.createElement("div", {
       key: index,
-      className: 'pricing-section_wrapper'
+      className: "pricing-section_wrapper"
     }, React__default.createElement("div", {
       className: "pricing-section_label"
     }, pricing.label, pricing.subLabel && React__default.createElement("div", {
@@ -3742,7 +3801,8 @@ var generateQuantity = function generateQuantity(n) {
 var WaitingList = function WaitingList(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? {} : _ref$tickets,
-      eventId = _ref.eventId;
+      eventId = _ref.eventId,
+      isPromotionsEnabled = _ref.isPromotionsEnabled;
 
   var _useState = React.useState(false),
       showSuccessMessage = _useState[0],
@@ -3817,7 +3877,7 @@ var WaitingList = function WaitingList(_ref) {
     className: "success-message"
   }, React__default.createElement("p", {
     className: "added-success-message"
-  }, "You've been added to the waiting list!"), React__default.createElement("p", null, "You'll be notified if tickets become available.")) : React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+  }, "You've been added to the waiting list!"), React__default.createElement("p", null, "You'll be notified if tickets become available.")) : React__default.createElement(React__default.Fragment, null, !isPromotionsEnabled && React__default.createElement("p", {
     className: "no-tickets-text"
   }, "No tickets are currently available for this event."), React__default.createElement("h2", null, "WAITING LIST"), React__default.createElement(formik.Formik, {
     initialValues: {
@@ -3881,7 +3941,7 @@ var WaitingList = function WaitingList(_ref) {
       return emailValidator(value);
     }),
     component: CustomField
-  })), React__default.createElement(Button$1, {
+  })), React__default.createElement(Button, {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
@@ -3890,6 +3950,65 @@ var WaitingList = function WaitingList(_ref) {
   }) : 'ADD TO WAITING LIST')))));
 };
 
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
+  }
+
+  var image = '';
+
+  if (!name.trim().length) {
+    return image;
+  }
+
+  return image;
+};
+
+var PromoCodeSection = function PromoCodeSection(_ref) {
+  var promoCode = _ref.promoCode,
+      promoCodeIsApplied = _ref.promoCodeIsApplied,
+      showPromoInput = _ref.showPromoInput,
+      isPromotionsEnabled = _ref.isPromotionsEnabled,
+      isAllTicketsSoldOut = _ref.isAllTicketsSoldOut,
+      setPromoCode = _ref.setPromoCode,
+      setPromoCodeUpdated = _ref.setPromoCodeUpdated,
+      setShowPromoInput = _ref.setShowPromoInput;
+  return React__default.createElement("div", null, promoCodeIsApplied ? React__default.createElement("div", {
+    className: "alert-info"
+  }, React__default.createElement(SVG, {
+    src: getImage('done.svg'),
+    preProcessor: function preProcessor(code) {
+      return code.replace(/fill=".*?"/g, 'fill="currentColor"');
+    }
+  }), React__default.createElement("p", null, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && React__default.createElement("div", {
+    className: "promo-code-block"
+  }, React__default.createElement("input", {
+    placeholder: "Promo Code",
+    onChange: function onChange(e) {
+      setPromoCode(e.target.value);
+    },
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === 'Enter') {
+        setPromoCodeUpdated(promoCode);
+      }
+    }
+  }), React__default.createElement(Button$1, {
+    className: "promo-apply-button",
+    placeholder: "Promo Code",
+    onClick: function onClick() {
+      setPromoCodeUpdated(promoCode);
+    }
+  }, "Apply")), isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && React__default.createElement("p", {
+    className: "promo-code-text"
+  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React__default.createElement(Button$1, {
+    className: "promo-code-button",
+    placeholder: "Promo Codes",
+    onClick: function onClick() {
+      setShowPromoInput(true);
+    }
+  }, "Got a promo code? Click here") : null);
+};
+
 function Loader$1() {
   return React__default.createElement("div", {
     className: "loader-container"
@@ -3911,7 +4030,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'light' : _ref$theme,
       _ref$queryPromoCode = _ref.queryPromoCode,
-      queryPromoCode = _ref$queryPromoCode === void 0 ? '' : _ref$queryPromoCode;
+      queryPromoCode = _ref$queryPromoCode === void 0 ? '' : _ref$queryPromoCode,
+      _ref$isPromotionsEnab = _ref.isPromotionsEnabled,
+      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab;
 
   var _useState = React.useState({}),
       selectedTickets = _useState[0],
@@ -4037,7 +4158,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
       var _product_options, _product_options2, _ticket_types;
 
-      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at;
+      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, skipBillingPage, nameIsRequired, ageIsRequired, hash, isWindowDefined, userData, access_token, ticketsQuantity, checkoutBody, checkoutResult;
 
       return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
@@ -4069,38 +4190,67 @@ var TicketsContainer = function TicketsContainer(_ref) {
             case 9:
               result = _context2.sent;
 
-              if (result.status === 200) {
-                setCustomHeader(result);
-                onAddToCartSuccess({
-                  skip_billing_page: (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false,
-                  names_required: (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false,
-                  age_required: (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false,
-                  event_id: String(eventId)
-                });
+              if (!(result.status === 200)) {
+                _context2.next = 27;
+                break;
               }
 
-              _context2.next = 16;
+              setCustomHeader(result);
+              skipBillingPage = (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false;
+              nameIsRequired = (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false;
+              ageIsRequired = (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false;
+              hash = '';
+
+              if (!skipBillingPage) {
+                _context2.next = 26;
+                break;
+              }
+
+              // Get user data for checkout data
+              isWindowDefined = typeof window !== 'undefined';
+              userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
+              access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
+              ticketsQuantity = Object.keys(selectedTickets).length;
+              checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, userData);
+              _context2.next = 24;
+              return postOnCheckout(checkoutBody, access_token);
+
+            case 24:
+              checkoutResult = _context2.sent;
+              hash = _get(checkoutResult, 'data.data.attributes.hash');
+
+            case 26:
+              onAddToCartSuccess({
+                skip_billing_page: skipBillingPage,
+                names_required: nameIsRequired,
+                age_required: ageIsRequired,
+                event_id: String(eventId),
+                hash: hash
+              });
+
+            case 27:
+              _context2.next = 32;
               break;
 
-            case 13:
-              _context2.prev = 13;
+            case 29:
+              _context2.prev = 29;
               _context2.t0 = _context2["catch"](6);
 
               if (axios.isAxiosError(_context2.t0)) {
                 onAddToCartError(_context2.t0);
               }
 
-            case 16:
-              _context2.prev = 16;
+            case 32:
+              _context2.prev = 32;
               setHandleBookIsLoading(false);
-              return _context2.finish(16);
+              return _context2.finish(32);
 
-            case 19:
+            case 35:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[6, 13, 16, 19]]);
+      }, _callee2, null, [[6, 29, 32, 35]]);
     }));
 
     return function handleBook() {
@@ -4114,50 +4264,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
   return React__default.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React__default.createElement(Loader$1, null) : React__default.createElement(React__default.Fragment, null, showWaitingList ? React__default.createElement(WaitingList, {
-    tickets: tickets,
-    eventId: eventId
-  }) : React__default.createElement("div", null, React__default.createElement(TicketsSection, {
+  }, isLoading ? React__default.createElement(Loader$1, null) : React__default.createElement("div", null, React__default.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     promoCodeIsApplied: promoCodeIsApplied
-  }), promoCodeIsApplied ? React__default.createElement("div", {
-    className: "alert-info"
-  }, "Your promo code was applied successfully.") : null, showPromoInput && React__default.createElement("div", {
-    className: "promo-code-block"
-  }, React__default.createElement("input", {
-    placeholder: "Promo Code",
-    onChange: function onChange(e) {
-      setPromoCode(e.target.value);
-    },
-    onKeyPress: function onKeyPress(event) {
-      if (event.key === 'Enter') {
-        setPromoCodeUpdated(promoCode);
-      }
-    }
-  }), React__default.createElement(Button, {
-    className: "promo-apply-button",
-    placeholder: "Promo Code",
-    onClick: function onClick() {
-      setPromoCodeUpdated(promoCode);
-    }
-  }, "Apply")), !showPromoInput && !isAllTicketsSoldOut ? React__default.createElement(Button, {
-    className: "promo-code-button",
-    placeholder: "Promo Codes",
-    onClick: function onClick() {
-      setShowPromoInput(true);
-    }
-  }, "Got a promo code? Click here") : null, React__default.createElement("div", {
-    className: "test v1.0.19",
-    style: {
-      display: 'none'
-    }
-  }), !isAllTicketsSoldOut && React__default.createElement(Button, {
+  }), showWaitingList && React__default.createElement(WaitingList, {
+    tickets: tickets,
+    eventId: eventId,
+    isPromotionsEnabled: isPromotionsEnabled
+  }), React__default.createElement(PromoCodeSection, {
+    promoCode: promoCode,
+    promoCodeIsApplied: promoCodeIsApplied,
+    showPromoInput: showPromoInput,
+    setPromoCode: setPromoCode,
+    setPromoCodeUpdated: setPromoCodeUpdated,
+    setShowPromoInput: setShowPromoInput,
+    isPromotionsEnabled: isPromotionsEnabled,
+    isAllTicketsSoldOut: isAllTicketsSoldOut
+  }), !isAllTicketsSoldOut && React__default.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button " + (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0 ? 'disabled' : ''),
     onClick: !handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0 ? handleBook : function () {}
-  }, getTicketsLabel || 'GET TICKETS'))));
+  }, getTicketsLabel || 'GET TICKETS')));
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {