tf-checkout-react 1.0.74 → 1.0.78

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,14 +37,14 @@ 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 moment = _interopDefault(require('moment-timezone'));
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
 var TableCell = _interopDefault(require('@mui/material/TableCell'));
@@ -932,6 +933,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) {
@@ -990,9 +995,85 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
+var downloadPDF = function downloadPDF(pdfUrl) {
+  if (typeof window === 'undefined') return;
+  var accessToken = localStorage.getItem('access_token');
+  if (!accessToken) return;
+  fetch(pdfUrl, {
+    headers: {
+      Authorization: "Bearer " + accessToken
+    }
+  }).then( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(response) {
+      var blobValue;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return response.blob();
+
+            case 2:
+              blobValue = _context.sent;
+              return _context.abrupt("return", blobValue);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }()).then(function (blobValue) {
+    var file = new Blob([blobValue], {
+      type: 'application/pdf'
+    });
+    var fileURL = URL.createObjectURL(file);
+    window.open(fileURL);
+  });
+};
+
+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'
@@ -1002,12 +1083,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
@@ -1050,11 +1125,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;
@@ -1079,6 +1152,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');
 
@@ -1101,6 +1177,14 @@ var handleSetAccessToken = function handleSetAccessToken(token) {
     }
   }
 };
+function getEvent(id) {
+  var response = publicRequest.get("v1/event/" + id, {
+    headers: ttfHeaders
+  })["catch"](function (error) {
+    throw error;
+  });
+  return response;
+}
 function getTickets(id, promoCode) {
   var response = publicRequest.get("v1/event/" + id + "/tickets/", {
     headers: promoCode ? _extends({}, ttfHeaders, {
@@ -1236,7 +1320,7 @@ var LoginModal = function LoginModal(_ref) {
     },
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, _e$response, _e$response$data, _error;
+        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1315,6 +1399,8 @@ var LoginModal = function LoginModal(_ref) {
                 if (typeof window !== 'undefined') {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                   window.localStorage.setItem('access_token', accessToken);
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
                 }
 
                 onLogin();
@@ -1661,7 +1747,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) || ''
   };
 };
@@ -1787,6 +1873,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,
@@ -1801,6 +1888,12 @@ var CustomField = function CustomField(_ref) {
       MenuProps: {
         className: theme
       }
+    },
+    InputLabelProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
+    inputProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React__default.createElement("option", {
@@ -1817,9 +1910,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 == null ? void 0 : customTheme.checkbox
+    }
   }));
 };
 
@@ -1838,9 +1935,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 == null ? void 0 : customTheme.input,
     htmlFor: field.name,
     error: !!error && isTouched,
     shrink: true
@@ -1858,7 +1957,9 @@ var SelectField = function SelectField(_ref) {
     MenuProps: {
       className: theme
     }
-  }, field), _map(selectOptions, function (option) {
+  }, field, {
+    style: customTheme == null ? void 0 : customTheme.input
+  }), _map(selectOptions, function (option) {
     return React__default.createElement("option", {
       key: option.value,
       value: option.value,
@@ -1950,14 +2051,17 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
       _ref$form = _ref.form,
       touched = _ref$form.touched,
       errors = _ref$form.errors,
+      initialValues = _ref$form.initialValues,
       setFieldValue = _ref.setFieldValue,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   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',
+    value: initialValues.phone,
     onChange: function onChange(e) {
       return setFieldValue("phone", removePlusSign(e));
     },
@@ -1968,6 +2072,12 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
     error: !!error && isTouched,
     helperText: isTouched && error,
     fullWidth: true,
+    InputLabelProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
+    InputProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
     autoFormat: false
   }, rest));
 };
@@ -1980,10 +2090,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) {
@@ -2002,7 +2113,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;
@@ -2040,13 +2156,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) || '',
@@ -2110,21 +2226,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,
-      hideLogo = _ref3.hideLogo;
-  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') || '' : '';
@@ -2250,7 +2361,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);
@@ -2350,7 +2461,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);
 
@@ -2382,13 +2496,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,
@@ -2479,12 +2592,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");
@@ -2562,14 +2676,18 @@ 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"), !hideLogo && React__default.createElement("div", {
       className: "logo-image-container"
@@ -2647,17 +2765,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);
@@ -2721,7 +2836,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();
 
@@ -2753,7 +2869,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
               _context.prev = 1;
               event.preventDefault();
 
-              if (postalCode) {
+              if (!(!postalCode && !disableZipSection)) {
                 _context.next = 7;
                 break;
               }
@@ -2778,10 +2894,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 || {
@@ -2792,11 +2912,11 @@ var CheckoutForm = function CheckoutForm(_ref) {
                 }
               });
 
-            case 14:
+            case 15:
               paymentMethodReq = _context.sent;
 
               if (!paymentMethodReq.error) {
-                _context.next = 19;
+                _context.next = 20;
                 break;
               }
 
@@ -2804,18 +2924,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;
               }
 
@@ -2823,22 +2943,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) {
@@ -2899,7 +3019,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,
@@ -2909,14 +3029,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"
@@ -2943,7 +3063,9 @@ 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 || '';
@@ -3003,7 +3125,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],
@@ -3187,14 +3311,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"
@@ -3243,7 +3361,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       return setPaymentIsLoading(value);
     },
     conditions: conditions,
-    stripeCardOptions: stripeCardOptions
+    stripeCardOptions: stripeCardOptions,
+    disableZipSection: disableZipSection
   })))))));
 };
 
@@ -3417,7 +3536,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),
@@ -3433,15 +3553,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);
@@ -3551,13 +3673,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,
@@ -3571,7 +3693,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", {
@@ -3709,12 +3831,14 @@ var TicketsSection = function TicketsSection(_ref) {
       style: {
         minWidth: 55
       }
-    }, React__default.createElement(TicketRow, {
+    }, ticket.salesStarted ? React__default.createElement(TicketRow, {
       ticketTier: ticket,
       prevTicketTier: arr[i - 1],
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect
-    }))));
+    }) : React__default.createElement("p", {
+      className: 'ticket-not-started-message'
+    }, "Sales not started"))));
   }));
 };
 
@@ -3734,8 +3858,7 @@ 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,
-      isPromotionsEnabled = _ref.isPromotionsEnabled;
+      eventId = _ref.eventId;
 
   var _useState = React.useState(false),
       showSuccessMessage = _useState[0],
@@ -3810,9 +3933,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, !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, {
+  }, "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("h2", null, "WAITING LIST"), React__default.createElement(formik.Formik, {
     initialValues: {
       ticketTypeId: '',
       quantity: '',
@@ -3874,7 +3995,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"
@@ -3913,10 +4034,12 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     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", {
+  }), React__default.createElement("p", {
+    className: "promo-code-success"
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && React__default.createElement("div", {
     className: "promo-code-block"
-  }, React__default.createElement("input", {
-    placeholder: "Promo Code",
+  }, React__default.createElement("label", null, "PROMO CODE"), React__default.createElement("input", {
+    placeholder: "",
     onChange: function onChange(e) {
       setPromoCode(e.target.value);
     },
@@ -3925,7 +4048,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
         setPromoCodeUpdated(promoCode);
       }
     }
-  }), React__default.createElement(Button, {
+  }), React__default.createElement(Button$1, {
     className: "promo-apply-button",
     placeholder: "Promo Code",
     onClick: function onClick() {
@@ -3933,7 +4056,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     }
   }, "Apply")), isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && React__default.createElement("p", {
     className: "promo-code-text"
-  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React__default.createElement(Button, {
+  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React__default.createElement(Button$1, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
@@ -3942,6 +4065,84 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
   }, "Got a promo code? Click here") : null);
 };
 
+var isTimeExpired = function isTimeExpired(startDate, timezone) {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
+};
+
+function Countdown(_ref) {
+  var startDate = _ref.startDate,
+      _ref$timezone = _ref.timezone,
+      timezone = _ref$timezone === void 0 ? moment.tz.guess() : _ref$timezone,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback;
+
+  var _useState = React.useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
+
+  var _useState2 = React.useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
+
+  React.useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  React.useEffect(function () {
+    var timer;
+
+    if (!timeExpired) {
+      timer = setInterval(function () {
+        if (isTimeExpired(startDate, timezone)) {
+          clearInterval(timer);
+          setTimeExpired(true);
+          callback();
+        }
+
+        var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
+        var diffTime = moment(startDate).diff(currentDate);
+        var duration = moment.duration(diffTime);
+        var dateArr = {
+          year: duration.years(),
+          month: duration.months(),
+          day: duration.days(),
+          hour: duration.hours(),
+          minute: duration.minutes(),
+          second: duration.seconds()
+        };
+        var timeLeft = '';
+
+        for (var date in dateArr) {
+          var unit = dateArr[date] === 1 ? date : date + 's';
+          var val = String(dateArr[date]).length === 1 ? '0' + dateArr[date] : dateArr[date];
+
+          if (timeLeft) {
+            timeLeft += ", " + val + " " + unit;
+          } else if (dateArr[date]) {
+            timeLeft += val + " " + unit;
+          }
+        }
+
+        setDuration(timeLeft);
+      }, 1000);
+    }
+
+    return function () {
+      clearInterval(timer);
+    };
+  }, [timeExpired]);
+  return React__default.createElement(React__default.Fragment, null, !timeExpired && duration && React__default.createElement("div", {
+    className: 'countdown'
+  }, React__default.createElement("div", null, React__default.createElement("p", {
+    className: 'title'
+  }, title), React__default.createElement("p", null, duration)), React__default.createElement("p", {
+    className: 'message'
+  }, message)));
+}
+
 function Loader$1() {
   return React__default.createElement("div", {
     className: "loader-container"
@@ -3949,7 +4150,8 @@ function Loader$1() {
 }
 
 var TicketsContainer = function TicketsContainer(_ref) {
-  var getTicketsLabel = _ref.getTicketsLabel,
+  var onLoginSuccess = _ref.onLoginSuccess,
+      getTicketsLabel = _ref.getTicketsLabel,
       eventId = _ref.eventId,
       onAddToCartSuccess = _ref.onAddToCartSuccess,
       _ref$contentStyle = _ref.contentStyle,
@@ -3971,37 +4173,51 @@ var TicketsContainer = function TicketsContainer(_ref) {
       selectedTickets = _useState[0],
       setSelectedTickets = _useState[1];
 
-  var _useState2 = React.useState([]),
-      tickets = _useState2[0],
-      setTickets = _useState2[1];
+  var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState3 = React.useState(false),
-      showWaitingList = _useState3[0],
-      setShowWaitingList = _useState3[1];
+  var _useState2 = React.useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState2[0],
+      setIsLogged = _useState2[1];
 
-  var _useState4 = React.useState(false),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
+  var _React$useState = React__default.useState(false),
+      showLoginModal = _React$useState[0],
+      setShowLoginModal = _React$useState[1];
+
+  var _useState3 = React.useState([]),
+      tickets = _useState3[0],
+      setTickets = _useState3[1];
+
+  var _useState4 = React.useState(null),
+      event = _useState4[0],
+      setEvent = _useState4[1];
 
   var _useState5 = React.useState(false),
-      handleBookIsLoading = _useState5[0],
-      setHandleBookIsLoading = _useState5[1];
+      showWaitingList = _useState5[0],
+      setShowWaitingList = _useState5[1];
+
+  var _useState6 = React.useState(false),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState6 = React.useState(''),
-      promoCode = _useState6[0],
-      setPromoCode = _useState6[1];
+  var _useState7 = React.useState(false),
+      handleBookIsLoading = _useState7[0],
+      setHandleBookIsLoading = _useState7[1];
 
-  var _useState7 = React.useState(queryPromoCode),
-      promoCodeUpdated = _useState7[0],
-      setPromoCodeUpdated = _useState7[1];
+  var _useState8 = React.useState(''),
+      promoCode = _useState8[0],
+      setPromoCode = _useState8[1];
 
-  var _useState8 = React.useState(false),
-      showPromoInput = _useState8[0],
-      setShowPromoInput = _useState8[1];
+  var _useState9 = React.useState(queryPromoCode),
+      promoCodeUpdated = _useState9[0],
+      setPromoCodeUpdated = _useState9[1];
 
-  var _useState9 = React.useState(false),
-      promoCodeIsApplied = _useState9[0],
-      setPromoCodeIsApplied = _useState9[1];
+  var _useState10 = React.useState(false),
+      showPromoInput = _useState10[0],
+      setShowPromoInput = _useState10[1];
+
+  var _useState11 = React.useState(false),
+      promoCodeIsApplied = _useState11[0],
+      setPromoCodeIsApplied = _useState11[1];
 
   React.useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -4018,62 +4234,102 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   React.useEffect(function () {
-    function getTicketsApi() {
-      return _getTicketsApi.apply(this, arguments);
-    }
+    getTicketsApi();
+  }, [eventId, promoCodeUpdated]);
 
-    function _getTicketsApi() {
-      _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var response, attributes;
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                _context.prev = 0;
-                setIsLoading(true);
-                _context.next = 4;
-                return getTickets(eventId, promoCodeUpdated);
-
-              case 4:
-                response = _context.sent;
-
-                if (response.data.success) {
-                  setCustomHeader(response);
-                  attributes = _get(response, 'data.data.attributes');
-                  setPromoCodeIsApplied(attributes.ValidPromoCode);
-                  setTickets(_get(attributes, 'tickets'));
-                  setShowWaitingList(attributes.showWaitingList);
-                  onGetTicketsSuccess(response.data);
-                }
+  var handleLogout = function handleLogout() {
+    if (isWindowDefined) {
+      window.localStorage.removeItem('access_token');
+      window.localStorage.removeItem('user_data');
+      setIsLogged(false);
 
-                _context.next = 11;
-                break;
+      var _event = new window.CustomEvent('tf-logout');
 
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](0);
+      window.document.dispatchEvent(_event);
+    }
+  };
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onGetTicketsError(_context.t0);
-                }
+  var handleExternalLogin = function handleExternalLogin() {
+    setIsLogged(true);
+  };
 
-              case 11:
-                _context.prev = 11;
-                setIsLoading(false);
-                return _context.finish(11);
+  var handleOnClose = function handleOnClose() {
+    setShowLoginModal(false);
+  };
 
-              case 14:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[0, 8, 11, 14]]);
-      }));
-      return _getTicketsApi.apply(this, arguments);
+  var handleOnLogin = function handleOnLogin() {
+    setShowLoginModal(false);
+    setIsLogged(true);
+
+    if (onLoginSuccess) {
+      onLoginSuccess();
     }
+  };
 
-    getTicketsApi();
-  }, [eventId, promoCodeUpdated]);
+  function getTicketsApi() {
+    return _getTicketsApi.apply(this, arguments);
+  }
+
+  function _getTicketsApi() {
+    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+      var response, eventResponse, attributes, _event2;
+
+      return runtime_1.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setIsLoading(true);
+              _context2.next = 4;
+              return getTickets(eventId, promoCodeUpdated);
+
+            case 4:
+              response = _context2.sent;
+              _context2.next = 7;
+              return getEvent(eventId);
+
+            case 7:
+              eventResponse = _context2.sent;
+
+              if (response.data.success) {
+                setCustomHeader(response);
+                attributes = _get(response, 'data.data.attributes');
+                setPromoCodeIsApplied(attributes.ValidPromoCode);
+                setTickets(_get(attributes, 'tickets'));
+                setShowWaitingList(attributes.showWaitingList);
+                onGetTicketsSuccess(response.data);
+              }
+
+              if (eventResponse.data.success) {
+                _event2 = _get(eventResponse, 'data.data.attributes');
+                setEvent(_event2);
+              }
+
+              _context2.next = 15;
+              break;
+
+            case 12:
+              _context2.prev = 12;
+              _context2.t0 = _context2["catch"](0);
+
+              if (axios.isAxiosError(_context2.t0)) {
+                onGetTicketsError(_context2.t0);
+              }
+
+            case 15:
+              _context2.prev = 15;
+              setIsLoading(false);
+              return _context2.finish(15);
+
+            case 18:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 12, 15, 18]]);
+    }));
+    return _getTicketsApi.apply(this, arguments);
+  }
 
   var handleTicketSelect = function handleTicketSelect(key, value) {
     setSelectedTickets(function (prevState) {
@@ -4087,15 +4343,21 @@ var TicketsContainer = function TicketsContainer(_ref) {
     });
   };
 
+  var handleOrdersClick = function handleOrdersClick() {
+    if (isWindowDefined) {
+      window.location.href = '/orders';
+    }
+  };
+
   var handleBook = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       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) {
+      return runtime_1.wrap(function _callee$(_context) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context.prev = _context.next) {
             case 0:
               setHandleBookIsLoading(true);
               ticket = _find(tickets, function (item) {
@@ -4116,45 +4378,74 @@ var TicketsContainer = function TicketsContainer(_ref) {
                   }, _ticket_types)
                 }
               };
-              _context2.prev = 6;
-              _context2.next = 9;
+              _context.prev = 6;
+              _context.next = 9;
               return addToCart(eventId, data);
 
             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)
-                });
+              result = _context.sent;
+
+              if (!(result.status === 200)) {
+                _context.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) {
+                _context.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);
+              _context.next = 24;
+              return postOnCheckout(checkoutBody, access_token);
+
+            case 24:
+              checkoutResult = _context.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:
+              _context.next = 32;
               break;
 
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](6);
+            case 29:
+              _context.prev = 29;
+              _context.t0 = _context["catch"](6);
 
-              if (axios.isAxiosError(_context2.t0)) {
-                onAddToCartError(_context2.t0);
+              if (axios.isAxiosError(_context.t0)) {
+                onAddToCartError(_context.t0);
               }
 
-            case 16:
-              _context2.prev = 16;
+            case 32:
+              _context.prev = 32;
               setHandleBookIsLoading(false);
-              return _context2.finish(16);
+              return _context.finish(32);
 
-            case 19:
+            case 35:
             case "end":
-              return _context2.stop();
+              return _context.stop();
           }
         }
-      }, _callee2, null, [[6, 13, 16, 19]]);
+      }, _callee, null, [[6, 29, 32, 35]]);
     }));
 
     return function handleBook() {
@@ -4162,9 +4453,25 @@ var TicketsContainer = function TicketsContainer(_ref) {
     };
   }();
 
+  var updateTickets = function updateTickets() {
+    getTicketsApi();
+  };
+
   var isAllTicketsSoldOut = !_some(tickets, function (item) {
     return !(item.sold_out || item.soldOut);
   });
+  React.useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-logout', handleLogout);
+    };
+  }, []);
+  React.useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-login', handleExternalLogin);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
+    };
+  }, []);
   return React__default.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
@@ -4173,10 +4480,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     promoCodeIsApplied: promoCodeIsApplied
-  }), showWaitingList && React__default.createElement(WaitingList, {
+  }), event != null && event.salesEnded ? React__default.createElement("p", null, "Sales for this event are closed.") : event != null && event.salesStart ? React__default.createElement(Countdown, {
+    startDate: event.salesStart,
+    timezone: event.timezone,
+    title: "Sales start in:",
+    message: "No tickets are currently available for this event.",
+    callback: updateTickets
+  }) : null, showWaitingList && React__default.createElement(WaitingList, {
     tickets: tickets,
-    eventId: eventId,
-    isPromotionsEnabled: isPromotionsEnabled
+    eventId: eventId
   }), React__default.createElement(PromoCodeSection, {
     promoCode: promoCode,
     promoCodeIsApplied: promoCodeIsApplied,
@@ -4186,11 +4498,28 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     isPromotionsEnabled: isPromotionsEnabled,
     isAllTicketsSoldOut: isAllTicketsSoldOut
-  }), !isAllTicketsSoldOut && React__default.createElement(Button, {
+  }), !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'), isLogged ? React__default.createElement("div", {
+    className: "session-wrapper"
+  }, React__default.createElement("span", {
+    className: "session-container"
+  }, React__default.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleOrdersClick
+  }, "My Orders")), React__default.createElement("span", {
+    className: "session-container"
+  }, React__default.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleLogout
+  }, "Log out"))) : ''), showLoginModal ? React__default.createElement(LoginModal, {
+    onClose: handleOnClose,
+    onLogin: handleOnLogin
+  }) : null);
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {
@@ -4398,9 +4727,9 @@ var TicketsTable = function TicketsTable(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? [] : _ref$tickets;
   return React__default.createElement("div", {
-    className: 'tickets-box'
+    className: "tickets-box"
   }, React__default.createElement("h4", {
-    className: 'sub-title'
+    className: "sub-title"
   }, "Your Tickets"), React__default.createElement(TableContainer, {
     component: Paper
   }, React__default.createElement(Table, {
@@ -4410,14 +4739,16 @@ var TicketsTable = function TicketsTable(_ref) {
 
     return React__default.createElement(React.Fragment, {
       key: index
-    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), React__default.createElement(TableCell, null, React__default.createElement("a", {
-      className: 'download-button',
-      href: ticket.pdf_link,
-      download: true
+    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), React__default.createElement(TableCell, null, React__default.createElement("span", {
+      "aria-hidden": true,
+      className: "download-button",
+      onClick: function onClick() {
+        return downloadPDF(ticket.pdf_link);
+      }
     }, "Download"))), !!((_ticket$add_ons = ticket.add_ons) != null && _ticket$add_ons.length) && React__default.createElement(TableRow, null, React__default.createElement(TableCell, {
       colSpan: 5
     }, React__default.createElement(Table, {
-      className: 'ticket-add-on-table'
+      className: "ticket-add-on-table"
     }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Add-On"), React__default.createElement(TableCell, null, "Status"))), React__default.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
       return React__default.createElement(TableRow, {
         key: index