tf-checkout-react 1.0.75 → 1.0.79

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

@@ -1,19 +1,20 @@
 import React, { Component, useState, useCallback, useEffect, useRef, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
 import _map from 'lodash-es/map';
 import _get from 'lodash-es/get';
 import _includes from 'lodash-es/includes';
 import axios from 'axios';
 import _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, InputLabel, FormHelperText, CircularProgress } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress, createTheme as createTheme$1 } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
 import _isArray from 'lodash-es/isArray';
 import { nanoid } from 'nanoid';
 import TextField$1 from '@mui/material/TextField';
+import { useTheme } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
@@ -35,8 +36,9 @@ import _sortBy from 'lodash-es/sortBy';
 import _has from 'lodash-es/has';
 import FormControl$1 from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
-import Button from '@mui/material/Button';
 import SVG from 'react-inlinesvg';
+import moment from 'moment-timezone';
+import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -987,6 +989,84 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/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 ttfHeaders = {
   Accept: 'application/vnd.api+json',
@@ -1091,6 +1171,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, {
@@ -1226,7 +1314,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) {
@@ -1305,6 +1393,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();
@@ -1651,7 +1741,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) || ''
   };
 };
@@ -1777,6 +1867,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 = useTheme();
   return React.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -1791,6 +1882,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.createElement("option", {
@@ -1803,14 +1900,22 @@ var CustomField = function CustomField(_ref) {
 
 var _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
 var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
+
   var label = _ref.label,
       field = _ref.field,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  return React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
+  var customTheme = useTheme();
+  return React.createElement(FormControl, {
+    error: !!(rest != null && (_rest$form = rest.form) != null && _rest$form.errors && rest.form.errors[(_field$name = field == null ? void 0 : field.name) != null ? _field$name : ""])
+  }, React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
     control: React.createElement(Checkbox, Object.assign({}, field, rest)),
-    label: label
-  }));
+    label: label,
+    componentsProps: {
+      typography: customTheme == null ? void 0 : customTheme.checkbox
+    }
+  })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React.createElement(FormHelperText, null, "Required") : null);
 };
 
 var SelectField = function SelectField(_ref) {
@@ -1828,9 +1933,11 @@ var SelectField = function SelectField(_ref) {
 
   var error = _get(errors, field.name);
 
+  var customTheme = useTheme();
   return React.createElement(FormControl, {
     fullWidth: true
   }, React.createElement(InputLabel, {
+    style: customTheme == null ? void 0 : customTheme.input,
     htmlFor: field.name,
     error: !!error && isTouched,
     shrink: true
@@ -1848,7 +1955,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.createElement("option", {
       key: option.value,
       value: option.value,
@@ -1940,14 +2049,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 = useTheme();
   return React.createElement(MuiPhoneNumber, Object.assign({
     name: 'phone',
+    value: initialValues.phone,
     onChange: function onChange(e) {
       return setFieldValue("phone", removePlusSign(e));
     },
@@ -1958,6 +2070,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));
 };
@@ -1970,10 +2088,11 @@ var LogicRunner = function LogicRunner(_ref) {
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
       onGetStatesError = _ref.onGetStatesError;
+  var prevCountry = useRef(values.country);
   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) {
@@ -1992,7 +2111,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;
@@ -2030,13 +2154,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) || '',
@@ -2107,15 +2231,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
       _ref3$accountInfoTitl = _ref3.accountInfoTitle,
       accountInfoTitle = _ref3$accountInfoTitl === void 0 ? '' : _ref3$accountInfoTitl,
-      fontFamily = _ref3.fontFamily,
-      hideLogo = _ref3.hideLogo;
-  var themeMui = createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
+      hideLogo = _ref3.hideLogo,
+      themeOptions = _ref3.themeOptions;
+  var themeMui = 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') || '' : '';
@@ -2241,7 +2359,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);
@@ -2341,7 +2459,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);
 
@@ -2377,9 +2498,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     theme: themeMui
   }, React.createElement(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,
@@ -2643,17 +2763,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     })), React.createElement("div", {
       className: "button-container"
-    }, React.createElement(LoadingButton, {
+    }, React.createElement(Button, {
       type: "submit",
       variant: "contained",
       className: "login-register-button",
-      loadingIndicator: React.createElement(CircularProgress, {
-        color: "inherit",
-        size: 26
-      }),
-      loading: props.isSubmitting,
       disabled: props.isSubmitting
-    }, buttonName))));
+    }, props.isSubmitting ? React.createElement(CircularProgress, {
+      size: 26
+    }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
@@ -2900,7 +3017,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Card number"), React.createElement(CardNumberElement, {
-    options: _extends({}, options.style, stripeCardOptions),
+    options: _extends({}, options, stripeCardOptions),
     onReady: _identity,
     onChange: _identity,
     onBlur: _identity,
@@ -2910,13 +3027,13 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React.createElement(CardExpiryElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), React.createElement("label", {
     className: "cvc_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React.createElement(CardCvcElement, {
-    options: _extends({}, options.style, stripeCardOptions)
+    options: _extends({}, options, stripeCardOptions)
   })), !disableZipSection && React.createElement("label", {
     className: "zip_element"
   }, React.createElement("p", {
@@ -2944,7 +3061,9 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress$1, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
+  }, isLoading ? React.createElement(CircularProgress$1, {
+    size: 26
+  }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
@@ -3006,7 +3125,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
       stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
       _ref$disableZipSectio = _ref.disableZipSection,
       disableZipSection = _ref$disableZipSectio === void 0 ? false : _ref$disableZipSectio,
-      fontFamily = _ref.fontFamily;
+      themeOptions = _ref.themeOptions,
+      elementsOptions = _ref.elementsOptions;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3190,13 +3310,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  var themeMui = createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
+  var themeMui = createTheme(themeOptions);
   return React.createElement(ThemeProvider, {
     theme: themeMui
   }, React.createElement("div", {
@@ -3233,7 +3347,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
   }, "Please provide your payment information"), showErrorText && React.createElement("p", {
     className: "payment_info__error"
   }, errorText), React.createElement("div", null, React.createElement(Elements, {
-    stripe: getStripePromise(reviewData)
+    stripe: getStripePromise(reviewData),
+    options: elementsOptions
   }, React.createElement(CheckoutForm, {
     stripe_client_secret: _get(reviewData, 'payment_method.stripe_client_secret'),
     total: orderData.total,
@@ -3716,12 +3831,14 @@ var TicketsSection = function TicketsSection(_ref) {
       style: {
         minWidth: 55
       }
-    }, React.createElement(TicketRow, {
+    }, ticket.salesStarted ? React.createElement(TicketRow, {
       ticketTier: ticket,
       prevTicketTier: arr[i - 1],
       selectedTickets: selectedTickets,
       handleTicketSelect: ticketSelect
-    }))));
+    }) : React.createElement("p", {
+      className: 'ticket-not-started-message'
+    }, "Sales not started"))));
   }));
 };
 
@@ -3741,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 = useState(false),
       showSuccessMessage = _useState[0],
@@ -3817,9 +3933,7 @@ var WaitingList = function WaitingList(_ref) {
     className: "success-message"
   }, React.createElement("p", {
     className: "added-success-message"
-  }, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, !isPromotionsEnabled && React.createElement("p", {
-    className: "no-tickets-text"
-  }, "No tickets are currently available for this event."), React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
+  }, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
     initialValues: {
       ticketTypeId: '',
       quantity: '',
@@ -3925,10 +4039,12 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     preProcessor: function preProcessor(code) {
       return code.replace(/fill=".*?"/g, 'fill="currentColor"');
     }
-  }), React.createElement("p", null, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && React.createElement("div", {
+  }), React.createElement("p", {
+    className: "promo-code-success"
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && React.createElement("div", {
     className: "promo-code-block"
-  }, React.createElement("input", {
-    placeholder: "Promo Code",
+  }, React.createElement("label", null, "PROMO CODE"), React.createElement("input", {
+    placeholder: "",
     onChange: function onChange(e) {
       setPromoCode(e.target.value);
     },
@@ -3954,6 +4070,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 = useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
+
+  var _useState2 = useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
+
+  useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  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.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
+    className: 'countdown'
+  }, React.createElement("div", null, React.createElement("p", {
+    className: 'title'
+  }, title), React.createElement("p", null, duration)), React.createElement("p", {
+    className: 'message'
+  }, message)));
+}
+
 function Loader$1() {
   return React.createElement("div", {
     className: "loader-container"
@@ -3961,7 +4155,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,
@@ -3977,43 +4172,58 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$queryPromoCode = _ref.queryPromoCode,
       queryPromoCode = _ref$queryPromoCode === void 0 ? '' : _ref$queryPromoCode,
       _ref$isPromotionsEnab = _ref.isPromotionsEnabled,
-      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab;
+      isPromotionsEnabled = _ref$isPromotionsEnab === void 0 ? true : _ref$isPromotionsEnab,
+      themeOptions = _ref.themeOptions;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
       setSelectedTickets = _useState[1];
 
-  var _useState2 = useState([]),
-      tickets = _useState2[0],
-      setTickets = _useState2[1];
+  var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState3 = useState(false),
-      showWaitingList = _useState3[0],
-      setShowWaitingList = _useState3[1];
+  var _useState2 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState2[0],
+      setIsLogged = _useState2[1];
 
-  var _useState4 = useState(false),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
+  var _React$useState = React.useState(false),
+      showLoginModal = _React$useState[0],
+      setShowLoginModal = _React$useState[1];
+
+  var _useState3 = useState([]),
+      tickets = _useState3[0],
+      setTickets = _useState3[1];
+
+  var _useState4 = useState(null),
+      event = _useState4[0],
+      setEvent = _useState4[1];
 
   var _useState5 = useState(false),
-      handleBookIsLoading = _useState5[0],
-      setHandleBookIsLoading = _useState5[1];
+      showWaitingList = _useState5[0],
+      setShowWaitingList = _useState5[1];
+
+  var _useState6 = useState(false),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState6 = useState(''),
-      promoCode = _useState6[0],
-      setPromoCode = _useState6[1];
+  var _useState7 = useState(false),
+      handleBookIsLoading = _useState7[0],
+      setHandleBookIsLoading = _useState7[1];
 
-  var _useState7 = useState(queryPromoCode),
-      promoCodeUpdated = _useState7[0],
-      setPromoCodeUpdated = _useState7[1];
+  var _useState8 = useState(''),
+      promoCode = _useState8[0],
+      setPromoCode = _useState8[1];
 
-  var _useState8 = useState(false),
-      showPromoInput = _useState8[0],
-      setShowPromoInput = _useState8[1];
+  var _useState9 = useState(queryPromoCode),
+      promoCodeUpdated = _useState9[0],
+      setPromoCodeUpdated = _useState9[1];
 
-  var _useState9 = useState(false),
-      promoCodeIsApplied = _useState9[0],
-      setPromoCodeIsApplied = _useState9[1];
+  var _useState10 = useState(false),
+      showPromoInput = _useState10[0],
+      setShowPromoInput = _useState10[1];
+
+  var _useState11 = useState(false),
+      promoCodeIsApplied = _useState11[0],
+      setPromoCodeIsApplied = _useState11[1];
 
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -4030,62 +4240,102 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   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) {
@@ -4099,15 +4349,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) {
@@ -4128,45 +4384,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() {
@@ -4174,10 +4459,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
     };
   }();
 
+  var updateTickets = function updateTickets() {
+    getTicketsApi();
+  };
+
   var isAllTicketsSoldOut = !_some(tickets, function (item) {
     return !(item.sold_out || item.soldOut);
   });
-  return React.createElement("div", {
+  var themeMui = createTheme$1(themeOptions);
+  useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-logout', handleLogout);
+    };
+  }, []);
+  useEffect(function () {
+    isWindowDefined && window.document.addEventListener('custom-login', handleExternalLogin);
+    return function () {
+      isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
+    };
+  }, []);
+  return React.createElement(ThemeProvider$1, {
+    theme: themeMui
+  }, React.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
   }, isLoading ? React.createElement(Loader$1, null) : React.createElement("div", null, React.createElement(TicketsSection, {
@@ -4185,10 +4489,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
     promoCodeIsApplied: promoCodeIsApplied
-  }), showWaitingList && React.createElement(WaitingList, {
+  }), event != null && event.salesEnded ? React.createElement("p", null, "Sales for this event are closed.") : event != null && event.salesStart ? React.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 && event.salesStarted && React.createElement(WaitingList, {
     tickets: tickets,
-    eventId: eventId,
-    isPromotionsEnabled: isPromotionsEnabled
+    eventId: eventId
   }), React.createElement(PromoCodeSection, {
     promoCode: promoCode,
     promoCodeIsApplied: promoCodeIsApplied,
@@ -4202,7 +4511,24 @@ var TicketsContainer = function TicketsContainer(_ref) {
     "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.createElement("div", {
+    className: "session-wrapper"
+  }, React.createElement("span", {
+    className: "session-container"
+  }, React.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleOrdersClick
+  }, "My Orders")), React.createElement("span", {
+    className: "session-container"
+  }, React.createElement(Button$1, {
+    variant: "outline-light",
+    className: "session-buttons",
+    onClick: handleLogout
+  }, "Log out"))) : ''), showLoginModal ? React.createElement(LoginModal, {
+    onClose: handleOnClose,
+    onLogin: handleOnLogin
+  }) : null));
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {
@@ -4410,9 +4736,9 @@ var TicketsTable = function TicketsTable(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? [] : _ref$tickets;
   return React.createElement("div", {
-    className: 'tickets-box'
+    className: "tickets-box"
   }, React.createElement("h4", {
-    className: 'sub-title'
+    className: "sub-title"
   }, "Your Tickets"), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
@@ -4422,14 +4748,16 @@ var TicketsTable = function TicketsTable(_ref) {
 
     return React.createElement(Fragment, {
       key: index
-    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, React.createElement("a", {
-      className: 'download-button',
-      href: ticket.pdf_link,
-      download: true
+    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, React.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.createElement(TableRow, null, React.createElement(TableCell, {
       colSpan: 5
     }, React.createElement(Table, {
-      className: 'ticket-add-on-table'
+      className: "ticket-add-on-table"
     }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Add-On"), React.createElement(TableCell, null, "Status"))), React.createElement(TableBody, null, ticket.add_ons.map(function (add_on, index) {
       return React.createElement(TableRow, {
         key: index