tf-checkout-react 1.1.0 → 1.2.2

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

@@ -1,52 +1,52 @@
-import React, { Component, useState, useCallback, useEffect, memo, useRef, Fragment } from 'react';
-import { connect, Formik, Form, Field } from 'formik';
+import { FormControl, FormHelperText, InputLabel, Snackbar, Alert, Modal, Box, CircularProgress as CircularProgress$1, TextField as TextField$1, createTheme as createTheme$1 } from '@mui/material';
+import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
-import _identity from 'lodash-es/identity';
-import _map from 'lodash-es/map';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import axios from 'axios';
+import { connect, Formik, Form, Field } from 'formik';
 import _get from 'lodash-es/get';
+import _identity from 'lodash-es/identity';
 import _includes from 'lodash-es/includes';
-import _isEqual from 'lodash-es/isEqual';
 import _isEmpty from 'lodash-es/isEmpty';
-import axios from 'axios';
+import _isEqual from 'lodash-es/isEqual';
+import _map from 'lodash-es/map';
+import { nanoid } from 'nanoid';
+import React, { Component, useCallback, useEffect, useState, memo, useRef, Fragment } from 'react';
 import _forEach from 'lodash-es/forEach';
-import { TextField, Modal as Modal$1, Box as Box$1, CircularProgress, FormControl, FormHelperText, InputLabel, Snackbar, Alert, createTheme as createTheme$1 } from '@mui/material';
-import Box from '@mui/material/Box';
-import Modal from '@mui/material/Modal';
-import TextField$1 from '@mui/material/TextField';
+import DatePicker from '@mui/lab/DatePicker';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import TextField from '@mui/material/TextField';
 import { useTheme } from '@mui/styles';
-import { object, string, ref, boolean } from 'yup';
-import _flatMapDeep from 'lodash-es/flatMapDeep';
-import _isArray from 'lodash-es/isArray';
-import { nanoid } from 'nanoid';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import 'material-ui-phone-number';
+import MuiPhoneNumber from 'material-ui-phone-number';
 import _debounce from 'lodash-es/debounce';
-import CircularProgress$1 from '@mui/material/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Backdrop from '@mui/material/Backdrop';
+import { object, string, ref, boolean } from 'yup';
+import Box$1 from '@mui/material/Box';
+import Modal$1 from '@mui/material/Modal';
 import Countdown$1 from 'react-countdown';
 import _isNumber from 'lodash-es/isNumber';
 import SVG from 'react-inlinesvg';
-import DatePicker from '@mui/lab/DatePicker';
-import AdapterMoment from '@mui/lab/AdapterMoment';
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
+import _flatMapDeep from 'lodash-es/flatMapDeep';
+import _isArray from 'lodash-es/isArray';
 import Container from '@mui/material/Container';
 import Alert$1 from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { FacebookShareButton, FacebookIcon, FacebookMessengerShareButton, FacebookMessengerIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, PinterestShareButton, PinterestIcon, VKShareButton, VKIcon, OKShareButton, OKIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, RedditShareButton, RedditIcon, TumblrShareButton, TumblrIcon, MailruShareButton, MailruIcon, EmailShareButton, EmailIcon, LivejournalShareButton, LivejournalIcon, ViberShareButton, ViberIcon, WorkplaceShareButton, WorkplaceIcon, LineShareButton, LineIcon, PocketShareButton, PocketIcon, InstapaperShareButton, InstapaperIcon, WeiboShareButton, WeiboIcon, HatenaShareButton, HatenaIcon } from 'react-share';
-import _some from 'lodash-es/some';
+import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
+import jwt_decode from 'jwt-decode';
 import _find from 'lodash-es/find';
+import _some from 'lodash-es/some';
 import Button$1 from 'react-bootstrap/Button';
-import jwt_decode from 'jwt-decode';
+import moment from 'moment-timezone';
 import _sortBy from 'lodash-es/sortBy';
 import FormControl$1 from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
-import moment from 'moment-timezone';
-import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import Autocomplete from '@mui/material/Autocomplete';
 import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
@@ -904,32 +904,6 @@ try {
 }
 });
 
-var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-var combineValidators = function combineValidators() {
-  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
-    validators[_key] = arguments[_key];
-  }
-
-  return function () {
-    for (var i = 0; i < validators.length; ++i) {
-      var error_message = validators[i].apply(validators, arguments);
-      if (error_message) return error_message;
-    }
-  };
-};
-var requiredValidator = function requiredValidator(value, message) {
-  var errorMessage = '';
-
-  if (!value) {
-    errorMessage = message || 'Required';
-  }
-
-  return errorMessage;
-};
-var emailValidator = function emailValidator(email) {
-  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
-};
-
 var CONFIGS = {};
 var setConfigs = function setConfigs(configs) {
   _forEach(configs, function (value, key) {
@@ -1186,6 +1160,7 @@ var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWit
 };
 
 var isWindowDefined = typeof window !== 'undefined';
+var isDocumentDefined = typeof document !== 'undefined';
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -1331,8 +1306,26 @@ var handleSetAccessToken = function handleSetAccessToken(token) {
   }
 };
 function getEvent(id) {
+  var referralValue = "";
+
+  if (isWindowDefined) {
+    var params = new URL("" + window.location);
+    var referralId = params.searchParams.get('ttf_r') || '';
+    var referral_key = window.localStorage.getItem('referral_key');
+    var referralIdlocal = "";
+
+    if (referral_key) {
+      referralIdlocal = referral_key.split('.')[1];
+    }
+
+    referralValue = referralId || referralIdlocal;
+  }
+
   var response = publicRequest.get("v1/event/" + id, {
-    headers: ttfHeaders
+    headers: _extends({}, ttfHeaders, {
+      "Referer-Url": isDocumentDefined ? document.referrer : '',
+      "Referrer-Id": isWindowDefined ? referralValue : ''
+    })
   })["catch"](function (error) {
     throw error;
   });
@@ -1351,7 +1344,10 @@ function getTickets(id, promoCode) {
 }
 var addToCart = function addToCart(id, data) {
   var res = publicRequest.post("v1/event/" + id + "/add-to-cart/", {
-    data: data
+    data: data,
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
   });
   return res;
 };
@@ -1376,19 +1372,31 @@ var register = function register(data) {
   return publicRequest.post('v1/oauth/register-rn', data);
 };
 var getPaymentData = function getPaymentData(hash) {
-  var response = publicRequest.get("v1/order/" + hash + "/review/")["catch"](function (error) {
+  var response = publicRequest.get("v1/order/" + hash + "/review/", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return response;
 };
 var handlePaymentSuccess = function handlePaymentSuccess(orderHash) {
-  var res = publicRequest.post("v1/order/" + orderHash + "/success")["catch"](function (error) {
+  var res = publicRequest.post("v1/order/" + orderHash + "/success", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return res;
 };
 var handleFreeSuccess = function handleFreeSuccess(orderHash) {
-  var res = publicRequest.post("v1/order/" + orderHash + "/complete_free_registration")["catch"](function (error) {
+  var res = publicRequest.post("v1/order/" + orderHash + "/complete_free_registration", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return res;
@@ -1483,217 +1491,347 @@ var validatePhoneNumber = /*#__PURE__*/function () {
   };
 }();
 
-var style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none'
-};
-var setLoggedUserData = function setLoggedUserData(data) {
-  return {
-    id: data.id,
-    first_name: data.firstName,
-    last_name: data.lastName,
-    email: data.email,
-    confirmEmail: data.email,
-    city: (data == null ? void 0 : data.city) || '',
-    country: (data == null ? void 0 : data.countryId) || (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.stateId) || '',
-    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
+var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var combineValidators = function combineValidators() {
+  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
+    validators[_key] = arguments[_key];
+  }
+
+  return function () {
+    for (var i = 0; i < validators.length; ++i) {
+      var error_message = validators[i].apply(validators, arguments);
+      if (error_message) return error_message;
+    }
   };
 };
-var LoginModal = function LoginModal(_ref) {
-  var onClose = _ref.onClose,
-      onLogin = _ref.onLogin,
-      _ref$alreadyHasUser = _ref.alreadyHasUser,
-      alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
-      _ref$userExpired = _ref.userExpired,
-      userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
-      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
-      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? _identity : _ref$onGetProfileData2,
-      _ref$onForgotPassword = _ref.onForgotPassword,
-      onForgotPassword = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
-      _ref$onSignup = _ref.onSignup,
-      onSignup = _ref$onSignup === void 0 ? _identity : _ref$onSignup,
-      _ref$modalClassname = _ref.modalClassname,
-      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
-      logo = _ref.logo,
-      _ref$showForgotPasswo = _ref.showForgotPasswordButton,
-      showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
-      _ref$showSignUpButton = _ref.showSignUpButton,
-      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
-
-  var _useState = useState(''),
-      error = _useState[0],
-      setError = _useState[1];
-
-  return React.createElement(Modal, {
-    open: true,
-    onClose: onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "login-modal " + modalClassname
-  }, React.createElement(Box, {
-    style: style
-  }, React.createElement("div", null, React.createElement(Formik, {
-    initialValues: {
-      email: '',
-      password: ''
-    },
-    onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
-
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                email = _ref2.email, password = _ref2.password;
-                _context.prev = 1;
-                body = {
-                  email: email,
-                  password: password
-                };
-                _context.next = 5;
-                return authorize(body);
-
-              case 5:
-                profileResponse = null;
-                _context.prev = 6;
-                _context.next = 9;
-                return getProfileData();
+var requiredValidator = function requiredValidator(value, message) {
+  var errorMessage = '';
 
-              case 9:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 17;
-                break;
+  if (!value) {
+    errorMessage = message || 'Required';
+  }
 
-              case 13:
-                _context.prev = 13;
-                _context.t0 = _context["catch"](6);
+  return errorMessage;
+};
+var emailValidator = function emailValidator(email) {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
+};
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onGetProfileDataError(_context.t0);
-                }
+var CustomField = function CustomField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$selectOptions = _ref.selectOptions,
+      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      submitCount = _ref$form.submitCount,
+      theme = _ref.theme,
+      _ref$inputProps = _ref.inputProps,
+      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+      _ref$InputProps = _ref.InputProps,
+      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
+      inputRef = _ref.inputRef;
+  var isSelectField = type === 'select';
 
-                return _context.abrupt("return");
+  var error = _get(errors, field.name);
 
-              case 17:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = setLoggedUserData(profileSpecifiedData);
+  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
+  var customTheme = useTheme();
+  var inputProps = {
+    sx: customTheme == null ? void 0 : customTheme.input
+  };
+  return React.createElement(TextField, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    select: isSelectField,
+    fullWidth: true,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    SelectProps: {
+      "native": true,
+      className: theme,
+      MenuProps: {
+        className: theme
+      }
+    },
+    InputLabelProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
+  }, field), isSelectField ? _map(selectOptions, function (option) {
+    return React.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  }) : null);
+};
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                  event = new window.CustomEvent('tf-login');
-                  window.document.dispatchEvent(event);
-                }
+var DATE_SIZE = 32;
+var compactStyles = {
+  '& > div': {
+    minWidth: 256
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE
+  }
+};
+var compactStyleTheme = /*#__PURE__*/createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      }
+    }
+  }
+});
+var DatePickerField = function DatePickerField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      form = _ref.form,
+      theme = _ref.theme,
+      _ref$useCompact = _ref.useCompact,
+      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
+  return React.createElement(ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    inputFormat: "DD/MM/YYYY",
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: 'dd/mm/yyyy'
+        }),
+        theme: theme,
+        field: field,
+        form: form,
+        label: label,
+        type: "tel"
+      }));
+    }
+  })));
+};
 
-                onLogin();
-                _context.next = 26;
+var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue", "disableDropdown"];
+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);
+
+  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,
+    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 currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
+  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+};
+var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
+  return function (value) {
+    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
+  };
+};
+var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
+  if (currency === void 0) {
+    currency = '';
+  }
+
+  switch (currency) {
+    case 'GBP':
+      return '£';
+
+    case 'EUR':
+      return '€';
+
+    case 'INR':
+      return '₹';
+
+    case 'JMD':
+      return 'J$';
+
+    case 'NZD':
+      return 'NZ$';
+
+    case 'MYR':
+      return 'RM';
+
+    case 'MXN':
+      return 'Mex$';
+
+    case 'SGD':
+      return 'S$';
+
+    case 'AUD':
+      return 'A$';
+
+    case 'ZAR':
+      return 'R';
+
+    case 'ke':
+      return 'Ksh';
+
+    case 'TRY':
+      return '₺';
+
+    case 'CAD':
+      return 'CA$';
+
+    case 'THB':
+      return '฿';
+
+    case 'ISK':
+      return 'Kr';
+
+    case 'SEK':
+      return 'kr';
+
+    default:
+      return 'US$';
+  }
+};
+var removePlusSign = function removePlusSign(string) {
+  if (string === void 0) {
+    string = '';
+  }
+
+  return string.replace('+', '');
+};
+
+var PhoneNumberField = function PhoneNumberField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      errors = _ref$form.errors,
+      touched = _ref$form.touched,
+      setFieldError = _ref$form.setFieldError,
+      setStatus = _ref$form.setStatus,
+      initialValues = _ref$form.initialValues,
+      setFieldValue = _ref$form.setFieldValue,
+      _ref$disableDropdown = _ref.disableDropdown,
+      disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown;
+
+  var error = _get(errors, field.name);
+
+  var isTouched = Boolean(_get(touched, field.name)); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  var debounceCb = useCallback(_debounce(function (cb) {
+    return void cb();
+  }, 1000), []);
+  useEffect(function () {
+    if (field.value) {
+      var _setStatus;
+
+      setStatus((_setStatus = {}, _setStatus[field.name] = true, _setStatus));
+    }
+
+    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var message, _setStatus2;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!field.value) {
+                _context.next = 4;
                 break;
+              }
 
-              case 23:
-                _context.prev = 23;
-                _context.t1 = _context["catch"](1);
+              _context.next = 4;
+              return validatePhoneNumber(field.value);
 
-                if (axios.isAxiosError(_context.t1)) {
-                  _error = (_context.t1 == null ? void 0 : (_e$response = _context.t1.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
-                  setError(_error);
-                } else if (_context.t1 instanceof Error) {
-                  setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
-                }
+            case 4:
+              setFieldError(field.name, '');
+              _context.next = 11;
+              break;
 
-              case 26:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[1, 23], [6, 13]]);
-      }));
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+              setFieldError(field.name, message);
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+            case 11:
+              _context.prev = 11;
+              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
+              return _context.finish(11);
 
-      return onSubmit;
-    }()
-  }, function (props) {
-    return React.createElement(Form, {
-      onSubmit: props.handleSubmit
-    }, React.createElement("div", {
-      className: "modal-title"
-    }, "Login"), React.createElement("div", {
-      className: 'login-logo-container'
-    }, React.createElement("img", {
-      className: "login-logo-tff",
-      src: logo || "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
-      alt: "logo"
-    })), React.createElement("div", {
-      className: "server_auth__error"
-    }, error), alreadyHasUser && React.createElement("p", {
-      className: "info-text-for-login"
-    }, "It appears this email is already attached to an account. Please log in here to complete your registration."), userExpired && React.createElement("p", {
-      className: "info-text-for-login"
-    }, "Your session has expired, please log in again."), React.createElement("div", {
-      className: "login-modal-body"
-    }, React.createElement("div", {
-      className: "login-modal-body__email"
-    }, React.createElement(Field, {
-      name: 'email',
-      validate: requiredValidator
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.meta;
-      return React.createElement(TextField, Object.assign({
-        label: 'Email',
-        type: 'email',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })), React.createElement("div", {
-      className: "login-modal-body__password"
-    }, React.createElement(Field, {
-      name: 'password',
-      validate: requiredValidator
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.meta;
-      return React.createElement(TextField, Object.assign({
-        label: "Password",
-        type: "password",
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })), React.createElement("div", {
-      className: "login-action-button"
-    }, React.createElement("button", {
-      type: "submit"
-    }, "Login")), showForgotPasswordButton && React.createElement("div", {
-      className: "forgot-password"
-    }, React.createElement("span", {
-      "aria-hidden": "true",
-      onClick: onForgotPassword
-    }, "Forgot password?")), showSignUpButton && React.createElement("div", {
-      className: "forgot-password"
-    }, React.createElement("span", {
-      "aria-hidden": "true",
-      onClick: onSignup
-    }, "Sign up"))));
-  }))));
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 11, 14]]);
+    }))); // eslint-disable-next-line
+  }, [field.value]);
+  return React.createElement(MuiPhoneNumber, {
+    name: field.name,
+    value: initialValues.phone,
+    onChange: function onChange(e) {
+      return setFieldValue(field.name, removePlusSign(e));
+    },
+    variant: "outlined",
+    defaultCountry: 'us',
+    disableDropdown: disableDropdown,
+    label: label,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    fullWidth: true,
+    autoFormat: false
+  });
 };
 
-var CustomField = function CustomField(_ref) {
+function Loader() {
+  return React.createElement("div", {
+    className: "loader-container"
+  }, React.createElement(CircularProgress, null));
+}
+
+var SelectField = function SelectField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
@@ -1703,228 +1841,83 @@ var CustomField = function CustomField(_ref) {
       _ref$form = _ref.form,
       touched = _ref$form.touched,
       errors = _ref$form.errors,
-      submitCount = _ref$form.submitCount,
-      theme = _ref.theme,
-      _ref$inputProps = _ref.inputProps,
-      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-      _ref$InputProps = _ref.InputProps,
-      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
-      inputRef = _ref.inputRef;
-  var isSelectField = type === 'select';
+      theme = _ref.theme;
+  var isTouched = Boolean(_get(touched, field.name));
 
   var error = _get(errors, field.name);
 
-  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
   var customTheme = useTheme();
-  var inputProps = {
-    sx: customTheme == null ? void 0 : customTheme.input
-  };
-  return React.createElement(TextField$1, Object.assign({
+  return React.createElement(FormControl, {
+    fullWidth: true
+  }, React.createElement(InputLabel, {
+    style: customTheme == null ? void 0 : customTheme.input,
+    htmlFor: field.name,
+    error: !!error && isTouched,
+    shrink: true
+  }, label), React.createElement(Select, Object.assign({
     id: field.name,
     label: label,
     type: type,
-    select: isSelectField,
     fullWidth: true,
     error: !!error && isTouched,
-    helperText: isTouched && error,
-    SelectProps: {
-      "native": true,
-      className: theme,
-      MenuProps: {
-        className: theme
-      }
-    },
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
+    inputProps: {
+      id: field.name
     },
-    InputProps: InputProps,
-    inputProps: _extends({}, inputProps, pInputProps),
-    inputRef: inputRef
-  }, field), isSelectField ? _map(selectOptions, function (option) {
+    "native": true,
+    className: theme,
+    MenuProps: {
+      className: theme
+    }
+  }, field, {
+    style: customTheme == null ? void 0 : customTheme.input
+  }), _map(selectOptions, function (option) {
     return React.createElement("option", {
       key: option.value,
       value: option.value,
       disabled: option.disabled
     }, option.label);
-  }) : null);
-};
-
-var style$1 = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#fff',
-  border: '1px solid white',
-  outline: 'none',
-  padding: '14px'
+  })), isTouched && error ? React.createElement(FormHelperText, {
+    error: !!error && isTouched
+  }, error) : null);
 };
-var SignupSchema = /*#__PURE__*/object().shape({
-  firstName: /*#__PURE__*/string().required('Required'),
-  lastName: /*#__PURE__*/string().required('Required'),
-  email: /*#__PURE__*/string().email('Invalid email').required('Required'),
-  password: /*#__PURE__*/string().min(6, 'Password must have 5+ characters').required('Required'),
-  confirmPassword: /*#__PURE__*/string().required('Required').oneOf([/*#__PURE__*/ref('password'), null], 'Passwords must match')
-});
-var SignupModal = function SignupModal(_ref) {
-  var _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      _ref$onLogin = _ref.onLogin,
-      onLogin = _ref$onLogin === void 0 ? function () {} : _ref$onLogin,
-      _ref$onRegisterSucces = _ref.onRegisterSuccess,
-      onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
-      _ref$onRegisterError = _ref.onRegisterError,
-      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError;
-
-  var _useState = useState(false),
-      loading = _useState[0],
-      setLoading = _useState[1];
-
-  var onSignup = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
-      var formData, res, access_token_register, refreshToken, tokens;
-      return runtime_1.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              setLoading(true);
-              formData = new FormData();
-              formData.set('first_name', values.firstName);
-              formData.set('last_name', values.lastName);
-              formData.set('email', values.email);
-              formData.set('password', values.password);
-              formData.set('password_confirmation', values.confirmPassword);
-              formData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-              formData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-              _context.next = 12;
-              return register(formData);
-
-            case 12:
-              res = _context.sent;
-              access_token_register = _get(res, 'data.data.attributes.access_token');
-              refreshToken = _get(res, 'data.data.attributes.refresh_token');
-              handleSetAccessToken(access_token_register);
-              tokens = {
-                accessToken: access_token_register,
-                refreshToken: refreshToken
-              };
-              onRegisterSuccess(tokens);
-              onClose();
-              _context.next = 24;
-              break;
-
-            case 21:
-              _context.prev = 21;
-              _context.t0 = _context["catch"](0);
-
-              if (axios.isAxiosError(_context.t0)) {
-                onRegisterError(_context.t0, values.email);
-              }
-
-            case 24:
-              _context.prev = 24;
-              setLoading(false);
-              return _context.finish(24);
-
-            case 27:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 21, 24, 27]]);
-    }));
-
-    return function onSignup(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
 
-  var _onClose = loading ? function () {} : onClose;
-
-  return React.createElement(Modal$1, {
-    open: true,
-    onClose: _onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "signup-modal"
-  }, React.createElement(Box$1, {
-    style: style$1
-  }, React.createElement("div", null, React.createElement(Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
+var SnackbarAlert = function SnackbarAlert(_ref) {
+  var isOpen = _ref.isOpen,
+      message = _ref.message,
+      type = _ref.type,
+      position = _ref.position,
+      _ref$autoHideDuration = _ref.autoHideDuration,
+      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
+      variant = _ref.variant,
+      onClose = _ref.onClose;
+  return React.createElement("div", {
+    className: "snackbar-alert-container"
+  }, React.createElement(Snackbar, {
+    autoHideDuration: autoHideDuration,
+    open: isOpen,
+    anchorOrigin: position || {
+      vertical: 'top',
+      horizontal: 'center'
     },
-    validationSchema: SignupSchema,
-    onSubmit: onSignup
-  }, function (_ref3) {
-    var isValid = _ref3.isValid,
-        dirty = _ref3.dirty,
-        handleSubmit = _ref3.handleSubmit;
-    return React.createElement(Form, {
-      onSubmit: handleSubmit
-    }, React.createElement("div", {
-      className: "signup-container"
-    }, React.createElement("div", {
-      className: "title"
-    }, "Create an Account"), React.createElement("div", {
-      className: "signup-container__twoFields"
-    }, React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: "firstName",
-      label: "First Name",
-      component: CustomField
-    })), React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: "lastName",
-      label: "Last Name",
-      component: CustomField
-    }))), React.createElement("div", {
-      className: "signup-container__singleField"
-    }, React.createElement("div", {
-      className: ""
-    }, React.createElement(Field, {
-      name: "email",
-      label: "Email",
-      component: CustomField
-    }))), React.createElement("div", {
-      className: "signup-container__twoFields"
-    }, React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: "password",
-      label: "Password",
-      type: "password",
-      component: CustomField
-    })), React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: "confirmPassword",
-      label: "Confirm Password",
-      type: "password",
-      component: CustomField
-    })))), React.createElement("div", {
-      className: "signup-action-button"
-    }, React.createElement("button", {
-      type: "submit",
-      disabled: !(isValid && dirty)
-    }, loading ? React.createElement(CircularProgress, {
-      size: "22px"
-    }) : 'Submit')), React.createElement("div", {
-      className: "login"
-    }, React.createElement("span", {
-      onClick: onLogin
-    }, "Login")));
-  }))));
+    onClose: onClose,
+    classes: {
+      root: 'snackbar-alert-snackbar-root'
+    }
+  }, React.createElement(Alert, {
+    severity: type,
+    onClose: onClose,
+    variant: variant || 'filled',
+    classes: {
+      icon: 'snackbar-alert-icon',
+      root: 'snackbar-alert-alert-root',
+      action: 'snackbar-alert-action',
+      message: 'snackbar-alert-message',
+      filled: 'snackbar-alert-filled'
+    }
+  }, message)));
 };
 
-var style$2 = {
+var style = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -1968,495 +1961,468 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
 
             case 5:
               _yield$forgotPassword = _context.sent;
-              data = _yield$forgotPassword.data;
-              onForgotPasswordSuccess(data);
-              onClose();
-              _context.next = 14;
-              break;
-
-            case 11:
-              _context.prev = 11;
-              _context.t0 = _context["catch"](1);
-
-              if (axios.isAxiosError(_context.t0)) {
-                onForgotPasswordError(_context.t0);
-              }
-
-            case 14:
-              _context.prev = 14;
-              setLoading(false);
-              return _context.finish(14);
-
-            case 17:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[1, 11, 14, 17]]);
-    }));
-
-    return function onForgotPassword(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
-  var _onClose = loading ? function () {} : onClose;
-
-  return React.createElement(Modal$1, {
-    open: true,
-    onClose: _onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "forgot-password-modal"
-  }, React.createElement(Box$1, {
-    style: style$2
-  }, React.createElement("div", null, React.createElement(Formik, {
-    initialValues: {
-      email: ''
-    },
-    validationSchema: Schema,
-    onSubmit: onForgotPassword
-  }, function (_ref4) {
-    var isValid = _ref4.isValid,
-        dirty = _ref4.dirty,
-        handleSubmit = _ref4.handleSubmit;
-    return React.createElement(Form, {
-      onSubmit: handleSubmit
-    }, React.createElement("div", {
-      className: "forgot-password-container"
-    }, React.createElement("div", {
-      className: "title"
-    }, "Password Reset"), React.createElement("div", {
-      className: "forgot-password-container__singleField"
-    }, React.createElement(Field, {
-      name: "email",
-      label: "Email",
-      component: CustomField
-    }))), React.createElement("div", {
-      className: "forgot-password-action-button"
-    }, React.createElement("button", {
-      type: "submit",
-      disabled: !(isValid && dirty)
-    }, loading ? React.createElement(CircularProgress, {
-      size: "22px"
-    }) : 'Submit')), React.createElement("div", {
-      className: "login"
-    }, React.createElement("span", {
-      onClick: onLogin
-    }, "Back to Log In")));
-  }))));
-};
-
-var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
-var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
-  if (data === void 0) {
-    data = [];
-  }
-
-  if (propsInitialValues === void 0) {
-    propsInitialValues = {};
-  }
-
-  if (userValues === void 0) {
-    userValues = {};
-  }
-
-  var results = _flatMapDeep(data, function (_ref) {
-    var fields = _ref.fields;
-    return _map(fields, function (_ref2) {
-      var groupItems = _ref2.groupItems;
-      return _map(groupItems, function (_ref3) {
-        var name = _ref3.name;
-        return name;
-      });
-    });
-  });
-
-  var initialValues = {};
-
-  _forEach(results, function (item) {
-    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
-  }); // set logged in user as first ticket holder
-
-
-  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
-  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
-  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
-  return initialValues;
-};
-var createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
-  if (values === void 0) {
-    values = {};
-  }
-
-  var bodyFormData = new FormData();
-  bodyFormData.append('first_name', values.firstName);
-  bodyFormData.append('last_name', values.lastName);
-  bodyFormData.append('email', values.email);
-  bodyFormData.append('password', values.password);
-  bodyFormData.append('password_confirmation', values.confirmPassword);
-  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-  bodyFormData.append('check_cart_expiration', 'true');
-
-  _forEach(checkoutBody.attributes, function (item, key) {
-    bodyFormData.append(key, item);
-  });
-
-  return bodyFormData;
-};
-var setLoggedUserData$1 = function setLoggedUserData(data) {
-  return {
-    id: data.id,
-    first_name: data.firstName,
-    last_name: data.lastName,
-    email: data.email,
-    confirmEmail: data.email,
-    city: (data == null ? void 0 : data.city) || '',
-    country: (data == null ? void 0 : data.countryId) || (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.stateId) || '',
-    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
-  };
-};
-var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
-  if (values === void 0) {
-    values = {};
-  }
-
-  if (logedInValues === void 0) {
-    logedInValues = {};
-  }
-
-  if (includeDob === void 0) {
-    includeDob = false;
-  }
-
-  var _values = values,
-      firstName = _values.firstName,
-      lastName = _values.lastName,
-      holderAge = _values.holderAge,
-      restValues = _objectWithoutPropertiesLoose(_values, _excluded);
-
-  var holders = [];
-  var ticket_holders = [];
-
-  var _loop = function _loop(i) {
-    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
-      var key = _ref4[0];
-      return key.includes(String(i));
-    }));
-    holders.push(individualHolder);
-  };
-
-  for (var i = 0; i <= ticketsQuantity; i++) {
-    _loop(i);
-  }
-
-  var filteredHolders = holders.filter(function (holder) {
-    return Object.entries(holder).length > 0;
-  });
-  ticket_holders = filteredHolders.map(function (item, index) {
-    return {
-      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
-      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
-      phone: item["holderPhone-" + index] || '',
-      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
-    };
-  });
-  var filteredRestValue = {};
-
-  _forEach(restValues, function (value, key) {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value;
-    }
-  });
-
-  var body = {
-    attributes: _extends({}, filteredRestValue, {
-      email: restValues.email || logedInValues.emailLogged,
-      confirm_email: restValues.email || logedInValues.emailLogged,
-      first_name: firstName || logedInValues.firstNameLogged,
-      last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders: ticket_holders
-    })
-  };
-
-  if (includeDob) {
-    var holderAgeDate = new Date(holderAge);
-    body.attributes.dob_day = holderAgeDate.getDate();
-    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
-    body.attributes.dob_year = holderAgeDate.getFullYear();
-  }
-
-  return body;
-};
-var getValidateFunctions = function getValidateFunctions(element, states, values) {
-  var validationFunctions = [];
-
-  if (element.required) {
-    if (element.name !== 'state' || element.name === 'state' && states.length) {
-      validationFunctions.push(requiredValidator);
-    }
-  }
-
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate);
-  }
-
-  if (element.name === 'confirmEmail') {
-    var isSameEmail = function isSameEmail(confirmEmail) {
-      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
-    };
-
-    validationFunctions.push(isSameEmail);
-  }
-
-  if (element.name === 'confirmPassword') {
-    var isSame = function isSame(confirmPassword) {
-      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
-    };
+              data = _yield$forgotPassword.data;
+              onForgotPasswordSuccess(data);
+              onClose();
+              _context.next = 14;
+              break;
 
-    validationFunctions.push(isSame);
-  }
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](1);
 
-  return combineValidators.apply(void 0, validationFunctions);
-};
-var assingUniqueIds = function assingUniqueIds(data) {
-  if (_get(data[0], 'uniqueId')) {
-    return data;
-  }
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
+              }
 
-  return _map(data, function (item) {
-    _forEach(item, function (itemValue, key) {
-      if (_isArray(itemValue)) {
-        item[key] = assingUniqueIds(itemValue);
-      }
-    });
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
 
-    return _extends({}, item, {
-      uniqueId: nanoid()
-    });
-  });
-};
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
 
-var _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
-var CheckboxField = function CheckboxField(_ref) {
-  var _rest$form, _field$name, _rest$form2, _field$name2;
+    return function onForgotPassword(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
-  var label = _ref.label,
-      field = _ref.field,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _onClose = loading ? function () {} : onClose;
 
-  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,
-    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);
+  return React.createElement(Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "forgot-password-modal"
+  }, React.createElement(Box, {
+    style: style
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      email: ''
+    },
+    validationSchema: Schema,
+    onSubmit: onForgotPassword
+  }, function (_ref4) {
+    var isValid = _ref4.isValid,
+        dirty = _ref4.dirty,
+        handleSubmit = _ref4.handleSubmit;
+    return React.createElement(Form, {
+      onSubmit: handleSubmit
+    }, React.createElement("div", {
+      className: "forgot-password-container"
+    }, React.createElement("div", {
+      className: "title"
+    }, "Password Reset"), React.createElement("div", {
+      className: "forgot-password-container__singleField"
+    }, React.createElement(Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React.createElement("div", {
+      className: "forgot-password-action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React.createElement(CircularProgress$1, {
+      size: "22px"
+    }) : 'Submit')), React.createElement("div", {
+      className: "login"
+    }, React.createElement("span", {
+      onClick: onLogin
+    }, "Back to Log In")));
+  }))));
 };
 
-var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
-  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none'
 };
-var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
-  return function (value) {
-    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
+var setLoggedUserData = function setLoggedUserData(data) {
+  return {
+    id: data.id,
+    first_name: data.firstName,
+    last_name: data.lastName,
+    email: data.email,
+    confirmEmail: data.email,
+    city: (data == null ? void 0 : data.city) || '',
+    country: (data == null ? void 0 : data.countryId) || (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.stateId) || '',
+    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
-var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
-  if (currency === void 0) {
-    currency = '';
-  }
-
-  switch (currency) {
-    case 'GBP':
-      return '£';
-
-    case 'EUR':
-      return '€';
-
-    case 'INR':
-      return '₹';
-
-    case 'JMD':
-      return 'J$';
-
-    case 'NZD':
-      return 'NZ$';
-
-    case 'MYR':
-      return 'RM';
+var LoginModal = function LoginModal(_ref) {
+  var onClose = _ref.onClose,
+      onLogin = _ref.onLogin,
+      _ref$alreadyHasUser = _ref.alreadyHasUser,
+      alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
+      _ref$userExpired = _ref.userExpired,
+      userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
+      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
+      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? _identity : _ref$onGetProfileData2,
+      _ref$onForgotPassword = _ref.onForgotPassword,
+      onForgotPassword = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
+      _ref$onSignup = _ref.onSignup,
+      onSignup = _ref$onSignup === void 0 ? _identity : _ref$onSignup,
+      _ref$modalClassname = _ref.modalClassname,
+      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
+      logo = _ref.logo,
+      _ref$showForgotPasswo = _ref.showForgotPasswordButton,
+      showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
+      _ref$showSignUpButton = _ref.showSignUpButton,
+      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
 
-    case 'MXN':
-      return 'Mex$';
+  var _useState = useState(''),
+      error = _useState[0],
+      setError = _useState[1];
 
-    case 'SGD':
-      return 'S$';
+  return React.createElement(Modal$1, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "login-modal " + modalClassname
+  }, React.createElement(Box$1, {
+    style: style$1
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      email: '',
+      password: ''
+    },
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
-    case 'AUD':
-      return 'A$';
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                email = _ref2.email, password = _ref2.password;
+                _context.prev = 1;
+                body = {
+                  email: email,
+                  password: password
+                };
+                _context.next = 5;
+                return authorize(body);
 
-    case 'ZAR':
-      return 'R';
+              case 5:
+                profileResponse = null;
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-    case 'ke':
-      return 'Ksh';
+              case 9:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 17;
+                break;
 
-    case 'TRY':
-      return '₺';
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-    case 'CAD':
-      return 'CA$';
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
+                }
 
-    case 'THB':
-      return '฿';
+                return _context.abrupt("return");
 
-    case 'ISK':
-      return 'Kr';
+              case 17:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
+                profileDataObj = setLoggedUserData(profileSpecifiedData);
 
-    case 'SEK':
-      return 'kr';
+                if (typeof window !== 'undefined') {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
+                }
 
-    default:
-      return 'US$';
-  }
-};
+                onLogin();
+                _context.next = 26;
+                break;
 
-var PhoneNumberField = function PhoneNumberField(_ref) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$form = _ref.form,
-      errors = _ref$form.errors,
-      setFieldError = _ref$form.setFieldError,
-      setStatus = _ref$form.setStatus;
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
 
-  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
+                if (axios.isAxiosError(_context.t1)) {
+                  _error = (_context.t1 == null ? void 0 : (_e$response = _context.t1.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
+                  setError(_error);
+                } else if (_context.t1 instanceof Error) {
+                  setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
+                }
 
+              case 26:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[1, 23], [6, 13]]);
+      }));
 
-  var debounceCb = useCallback(_debounce(function (cb) {
-    return void cb();
-  }, 1000), []);
-  useEffect(function () {
-    if (field.value) {
-      var _setStatus;
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
 
-      setStatus((_setStatus = {}, _setStatus[field.name] = true, _setStatus));
-    }
+      return onSubmit;
+    }()
+  }, function (props) {
+    return React.createElement(Form, {
+      onSubmit: props.handleSubmit
+    }, React.createElement("div", {
+      className: "modal-title"
+    }, "Login"), React.createElement("div", {
+      className: 'login-logo-container'
+    }, React.createElement("img", {
+      className: "login-logo-tff",
+      src: logo || "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
+      alt: "logo"
+    })), React.createElement("div", {
+      className: "server_auth__error"
+    }, error), alreadyHasUser && React.createElement("p", {
+      className: "info-text-for-login"
+    }, "It appears this email is already attached to an account. Please log in here to complete your registration."), userExpired && React.createElement("p", {
+      className: "info-text-for-login"
+    }, "Your session has expired, please log in again."), React.createElement("div", {
+      className: "login-modal-body"
+    }, React.createElement("div", {
+      className: "login-modal-body__email"
+    }, React.createElement(Field, {
+      name: 'email',
+      validate: requiredValidator
+    }, function (_ref3) {
+      var field = _ref3.field,
+          meta = _ref3.meta;
+      return React.createElement(TextField$1, Object.assign({
+        label: 'Email',
+        type: 'email',
+        fullWidth: true,
+        error: !!meta.error && meta.touched,
+        helperText: meta.touched && meta.error
+      }, field));
+    })), React.createElement("div", {
+      className: "login-modal-body__password"
+    }, React.createElement(Field, {
+      name: 'password',
+      validate: requiredValidator
+    }, function (_ref4) {
+      var field = _ref4.field,
+          meta = _ref4.meta;
+      return React.createElement(TextField$1, Object.assign({
+        label: "Password",
+        type: "password",
+        fullWidth: true,
+        error: !!meta.error && meta.touched,
+        helperText: meta.touched && meta.error
+      }, field));
+    })), React.createElement("div", {
+      className: "login-action-button"
+    }, React.createElement("button", {
+      type: "submit"
+    }, "Login")), showForgotPasswordButton && React.createElement("div", {
+      className: "forgot-password"
+    }, React.createElement("span", {
+      "aria-hidden": "true",
+      onClick: onForgotPassword
+    }, "Forgot password?")), showSignUpButton && React.createElement("div", {
+      className: "forgot-password"
+    }, React.createElement("span", {
+      "aria-hidden": "true",
+      onClick: onSignup
+    }, "Sign up"))));
+  }))));
+};
 
-    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var message, _setStatus2;
+var style$2 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
+};
+var SignupSchema = /*#__PURE__*/object().shape({
+  firstName: /*#__PURE__*/string().required('Required'),
+  lastName: /*#__PURE__*/string().required('Required'),
+  email: /*#__PURE__*/string().email('Invalid email').required('Required'),
+  password: /*#__PURE__*/string().min(6, 'Password must have 5+ characters').required('Required'),
+  confirmPassword: /*#__PURE__*/string().required('Required').oneOf([/*#__PURE__*/ref('password'), null], 'Passwords must match')
+});
+var SignupModal = function SignupModal(_ref) {
+  var _ref$onClose = _ref.onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
+      _ref$onLogin = _ref.onLogin,
+      onLogin = _ref$onLogin === void 0 ? function () {} : _ref$onLogin,
+      _ref$onRegisterSucces = _ref.onRegisterSuccess,
+      onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
+      _ref$onRegisterError = _ref.onRegisterError,
+      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError;
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
+  var onSignup = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var formData, res, access_token_register, refreshToken, tokens;
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.prev = 0;
+              setLoading(true);
+              formData = new FormData();
+              formData.set('first_name', values.firstName);
+              formData.set('last_name', values.lastName);
+              formData.set('email', values.email);
+              formData.set('password', values.password);
+              formData.set('password_confirmation', values.confirmPassword);
+              formData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+              formData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+              _context.next = 12;
+              return register(formData);
 
-              if (!field.value) {
-                _context.next = 4;
-                break;
-              }
-
-              _context.next = 4;
-              return validatePhoneNumber(field.value);
-
-            case 4:
-              setFieldError(field.name, '');
-              _context.next = 11;
+            case 12:
+              res = _context.sent;
+              access_token_register = _get(res, 'data.data.attributes.access_token');
+              refreshToken = _get(res, 'data.data.attributes.refresh_token');
+              handleSetAccessToken(access_token_register);
+              tokens = {
+                accessToken: access_token_register,
+                refreshToken: refreshToken
+              };
+              onRegisterSuccess(tokens);
+              onClose();
+              _context.next = 24;
               break;
 
-            case 7:
-              _context.prev = 7;
+            case 21:
+              _context.prev = 21;
               _context.t0 = _context["catch"](0);
-              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
-              setFieldError(field.name, message);
 
-            case 11:
-              _context.prev = 11;
-              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
-              return _context.finish(11);
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
 
-            case 14:
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
+
+            case 27:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 7, 11, 14]]);
-    }))); // eslint-disable-next-line
-  }, [field.value]);
-  return React.createElement(TextField$1, Object.assign({}, field, {
-    id: field.name,
-    label: label,
-    type: type,
-    fullWidth: true,
-    error: !!error,
-    helperText: error,
-    value: field.value || ''
-  }));
-};
-
-function Loader() {
-  return React.createElement("div", {
-    className: "loader-container"
-  }, React.createElement(CircularProgress$1, null));
-}
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
 
-var SelectField = function SelectField(_ref) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$selectOptions = _ref.selectOptions,
-      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      theme = _ref.theme;
-  var isTouched = Boolean(_get(touched, field.name));
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
-  var error = _get(errors, field.name);
+  var _onClose = loading ? function () {} : onClose;
 
-  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
-  }, label), React.createElement(Select, Object.assign({
-    id: field.name,
-    label: label,
-    type: type,
-    fullWidth: true,
-    error: !!error && isTouched,
-    inputProps: {
-      id: field.name
+  return React.createElement(Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "signup-modal"
+  }, React.createElement(Box, {
+    style: style$2
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
     },
-    "native": true,
-    className: theme,
-    MenuProps: {
-      className: theme
-    }
-  }, field, {
-    style: customTheme == null ? void 0 : customTheme.input
-  }), _map(selectOptions, function (option) {
-    return React.createElement("option", {
-      key: option.value,
-      value: option.value,
-      disabled: option.disabled
-    }, option.label);
-  })), isTouched && error ? React.createElement(FormHelperText, {
-    error: !!error && isTouched
-  }, error) : null);
+    validationSchema: SignupSchema,
+    onSubmit: onSignup
+  }, function (_ref3) {
+    var isValid = _ref3.isValid,
+        dirty = _ref3.dirty,
+        handleSubmit = _ref3.handleSubmit;
+    return React.createElement(Form, {
+      onSubmit: handleSubmit
+    }, React.createElement("div", {
+      className: "signup-container"
+    }, React.createElement("div", {
+      className: "title"
+    }, "Create an Account"), React.createElement("div", {
+      className: "signup-container__twoFields"
+    }, React.createElement("div", {
+      className: "is-half"
+    }, React.createElement(Field, {
+      name: "firstName",
+      label: "First Name",
+      component: CustomField
+    })), React.createElement("div", {
+      className: "is-half"
+    }, React.createElement(Field, {
+      name: "lastName",
+      label: "Last Name",
+      component: CustomField
+    }))), React.createElement("div", {
+      className: "signup-container__singleField"
+    }, React.createElement("div", {
+      className: ""
+    }, React.createElement(Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React.createElement("div", {
+      className: "signup-container__twoFields"
+    }, React.createElement("div", {
+      className: "is-half"
+    }, React.createElement(Field, {
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField
+    })), React.createElement("div", {
+      className: "is-half"
+    }, React.createElement(Field, {
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    })))), React.createElement("div", {
+      className: "signup-action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React.createElement(CircularProgress$1, {
+      size: "22px"
+    }) : 'Submit')), React.createElement("div", {
+      className: "login"
+    }, React.createElement("span", {
+      onClick: onLogin
+    }, "Login")));
+  }))));
 };
 
 var showZero = function showZero(value) {
@@ -2522,144 +2488,229 @@ var TimerWidget = function TimerWidget(_ref) {
   var hideTimer = function hideTimer() {
     var timerRl = document.querySelector('.timer');
 
-    if (timerRl) {
-      timerRl.style.visibility = "hidden";
+    if (timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  };
+
+  return showTimer && !!expires_at ? React.createElement("div", {
+    className: "timer"
+  }, React.createElement("div", {
+    className: 'close-icon',
+    onClick: hideTimer
+  }, React.createElement(SVG, {
+    src: getImage('cross.svg'),
+    width: '10',
+    height: '10',
+    fill: '#fff'
+  })), React.createElement("div", {
+    className: "toast-message"
+  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
+    className: "countdown"
+  }, React.createElement(Countdown$1, {
+    date: Date.now() + expires_at * 1000,
+    renderer: function renderer(props) {
+      return _renderer(_extends({}, props, {
+        handleCountdownFinish: handleCountdownFinish
+      }));
+    }
+  })))) : null;
+};
+
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+
+var _excluded$1 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
+  if (data === void 0) {
+    data = [];
+  }
+
+  if (propsInitialValues === void 0) {
+    propsInitialValues = {};
+  }
+
+  if (userValues === void 0) {
+    userValues = {};
+  }
+
+  var results = _flatMapDeep(data, function (_ref) {
+    var fields = _ref.fields;
+    return _map(fields, function (_ref2) {
+      var groupItems = _ref2.groupItems;
+      return _map(groupItems, function (_ref3) {
+        var name = _ref3.name;
+        return name;
+      });
+    });
+  });
+
+  var initialValues = {};
+
+  _forEach(results, function (item) {
+    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
+  }); // set logged in user as first ticket holder
+
+
+  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
+  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
+  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
+  return initialValues;
+};
+var createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
+  if (values === void 0) {
+    values = {};
+  }
+
+  var bodyFormData = new FormData();
+  bodyFormData.append('first_name', values.firstName);
+  bodyFormData.append('last_name', values.lastName);
+  bodyFormData.append('email', values.email);
+  bodyFormData.append('password', values.password);
+  bodyFormData.append('password_confirmation', values.confirmPassword);
+  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+  bodyFormData.append('check_cart_expiration', 'true');
+
+  _forEach(checkoutBody.attributes, function (item, key) {
+    bodyFormData.append(key, item);
+  });
+
+  return bodyFormData;
+};
+var setLoggedUserData$1 = function setLoggedUserData(data) {
+  return {
+    id: data.id,
+    first_name: data.firstName,
+    last_name: data.lastName,
+    email: data.email,
+    confirmEmail: data.email,
+    city: (data == null ? void 0 : data.city) || '',
+    country: (data == null ? void 0 : data.countryId) || (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.stateId) || '',
+    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
+  };
+};
+var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
+  if (values === void 0) {
+    values = {};
+  }
+
+  if (logedInValues === void 0) {
+    logedInValues = {};
+  }
+
+  if (includeDob === void 0) {
+    includeDob = false;
+  }
+
+  var _values = values,
+      firstName = _values.firstName,
+      lastName = _values.lastName,
+      holderAge = _values.holderAge,
+      restValues = _objectWithoutPropertiesLoose(_values, _excluded$1);
+
+  var holders = [];
+  var ticket_holders = [];
+
+  var _loop = function _loop(i) {
+    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
+      var key = _ref4[0];
+      return key.includes(String(i));
+    }));
+    holders.push(individualHolder);
+  };
+
+  for (var i = 0; i <= ticketsQuantity; i++) {
+    _loop(i);
+  }
+
+  var filteredHolders = holders.filter(function (holder) {
+    return Object.entries(holder).length > 0;
+  });
+  ticket_holders = filteredHolders.map(function (item, index) {
+    return {
+      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
+      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
+      phone: item["holderPhone-" + index] || '',
+      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
+    };
+  });
+  var filteredRestValue = {};
+
+  _forEach(restValues, function (value, key) {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value;
+    }
+  });
+
+  var body = {
+    attributes: _extends({}, filteredRestValue, {
+      email: restValues.email || logedInValues.emailLogged,
+      confirm_email: restValues.email || logedInValues.emailLogged,
+      first_name: firstName || logedInValues.firstNameLogged,
+      last_name: lastName || logedInValues.lastNameLogged,
+      ticket_holders: ticket_holders
+    })
+  };
+
+  if (includeDob) {
+    var holderAgeDate = new Date(holderAge);
+    body.attributes.dob_day = holderAgeDate.getDate();
+    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
+    body.attributes.dob_year = holderAgeDate.getFullYear();
+  }
+
+  return body;
+};
+var getValidateFunctions = function getValidateFunctions(element, states, values) {
+  var validationFunctions = [];
+
+  if (element.required) {
+    if (element.name !== 'state' || element.name === 'state' && states.length) {
+      validationFunctions.push(requiredValidator);
     }
-  };
+  }
 
-  return showTimer && !!expires_at ? React.createElement("div", {
-    className: "timer"
-  }, React.createElement("div", {
-    className: 'close-icon',
-    onClick: hideTimer
-  }, React.createElement(SVG, {
-    src: getImage('cross.svg'),
-    width: '10',
-    height: '10',
-    fill: '#fff'
-  })), React.createElement("div", {
-    className: "toast-message"
-  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
-    className: "countdown"
-  }, React.createElement(Countdown$1, {
-    date: Date.now() + expires_at * 1000,
-    renderer: function renderer(props) {
-      return _renderer(_extends({}, props, {
-        handleCountdownFinish: handleCountdownFinish
-      }));
-    }
-  })))) : null;
-};
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
 
-var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+  if (element.name === 'confirmEmail') {
+    var isSameEmail = function isSameEmail(confirmEmail) {
+      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
+    };
 
-var SnackbarAlert = function SnackbarAlert(_ref) {
-  var isOpen = _ref.isOpen,
-      message = _ref.message,
-      type = _ref.type,
-      position = _ref.position,
-      _ref$autoHideDuration = _ref.autoHideDuration,
-      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
-      variant = _ref.variant,
-      onClose = _ref.onClose;
-  return React.createElement("div", {
-    className: "snackbar-alert-container"
-  }, React.createElement(Snackbar, {
-    autoHideDuration: autoHideDuration,
-    open: isOpen,
-    anchorOrigin: position || {
-      vertical: 'top',
-      horizontal: 'center'
-    },
-    onClose: onClose,
-    classes: {
-      root: 'snackbar-alert-snackbar-root'
-    }
-  }, React.createElement(Alert, {
-    severity: type,
-    onClose: onClose,
-    variant: variant || 'filled',
-    classes: {
-      icon: 'snackbar-alert-icon',
-      root: 'snackbar-alert-alert-root',
-      action: 'snackbar-alert-action',
-      message: 'snackbar-alert-message',
-      filled: 'snackbar-alert-filled'
-    }
-  }, message)));
-};
+    validationFunctions.push(isSameEmail);
+  }
 
-var DATE_SIZE = 32;
-var compactStyles = {
-  '& > div': {
-    minWidth: 256
-  },
-  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
-    width: 256
-  },
-  '& .MuiTypography-caption': {
-    width: DATE_SIZE,
-    margin: 0
-  },
-  '& .PrivatePickersSlideTransition-root': {
-    minHeight: DATE_SIZE * 6
-  },
-  '& .PrivatePickersSlideTransition-root [role="row"]': {
-    margin: 0
-  },
-  '& .MuiPickersDay-dayWithMargin': {
-    margin: 0
-  },
-  '& .MuiPickersDay-root': {
-    width: DATE_SIZE,
-    height: DATE_SIZE
+  if (element.name === 'confirmPassword') {
+    var isSame = function isSame(confirmPassword) {
+      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+    };
+
+    validationFunctions.push(isSame);
   }
+
+  return combineValidators.apply(void 0, validationFunctions);
 };
-var compactStyleTheme = /*#__PURE__*/createTheme({
-  components: {
-    MuiPaper: {
-      defaultProps: {
-        sx: compactStyles
-      }
-    }
+var assingUniqueIds = function assingUniqueIds(data) {
+  if (_get(data[0], 'uniqueId')) {
+    return data;
   }
-});
-var DatePickerField = function DatePickerField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      form = _ref.form,
-      theme = _ref.theme,
-      _ref$useCompact = _ref.useCompact,
-      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
-  return React.createElement(ThemeProvider, {
-    theme: useCompact ? compactStyleTheme : {}
-  }, React.createElement(LocalizationProvider, {
-    dateAdapter: AdapterMoment
-  }, React.createElement(DatePicker, {
-    value: field.value || '',
-    onChange: function onChange(value) {
-      return form.setFieldValue(field.name, value);
-    },
-    PopperProps: {
-      placement: 'bottom-start'
-    },
-    showDaysOutsideCurrentMonth: true,
-    disableFuture: true,
-    inputFormat: "DD/MM/YYYY",
-    mask: "__/__/____",
-    renderInput: function renderInput(params) {
-      return React.createElement(CustomField, Object.assign({}, params, {
-        inputProps: _extends({}, params.inputProps, {
-          placeholder: 'dd/mm/yyyy'
-        }),
-        theme: theme,
-        field: field,
-        form: form,
-        label: label,
-        type: "tel"
-      }));
-    }
-  })));
+
+  return _map(data, function (item) {
+    _forEach(item, function (itemValue, key) {
+      if (_isArray(itemValue)) {
+        item[key] = assingUniqueIds(itemValue);
+      }
+    });
+
+    return _extends({}, item, {
+      uniqueId: nanoid()
+    });
+  });
 };
 
 var LogicRunner = function LogicRunner(_ref) {
@@ -3222,7 +3273,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       zIndex: 1205
     },
     open: true
-  }, React.createElement(CircularProgress, {
+  }, React.createElement(CircularProgress$1, {
     color: "inherit"
   })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
@@ -3489,7 +3540,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             onBlur: props.handleBlur,
             component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
-            theme: theme
+            theme: theme,
+            disableDropdown: element.disableDropdown
           })));
         })));
       }));
@@ -3514,8 +3566,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             label: element.label,
             type: element.type,
             required: true,
-            component: element.type === 'checkbox' ? CheckboxField : CustomField,
-            validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {})
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
+            validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {}),
+            disableDropdown: element.disableDropdown
           }));
         })));
       }));
@@ -3526,7 +3579,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       variant: "contained",
       className: "login-register-button",
       disabled: props.isSubmitting
-    }, props.isSubmitting ? React.createElement(CircularProgress, {
+    }, props.isSubmitting ? React.createElement(CircularProgress$1, {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
@@ -3848,7 +3901,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress$1, {
+  }, isLoading ? React.createElement(CircularProgress, {
     size: 26
   }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -4207,7 +4260,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setPaymentIsLoading(true);
       handlePaymentMiddleWare(null);
     }
-  }, paymentIsLoading ? React.createElement(CircularProgress$1, {
+  }, paymentIsLoading ? React.createElement(CircularProgress, {
     size: 26
   }) : 'Complete Registration')))));
 };
@@ -4538,169 +4591,122 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       navigator.clipboard.writeText(_get(inputRef, 'current.value'));
       onLinkCopied();
     }
-  }, hasCopyIcon ? React.createElement("img", {
-    src: "https://img.icons8.com/office/50/000000/copy.png",
-    alt: "copy"
-  }) : React.createElement("span", {
-    className: 'copy-icon'
-  }, "Copy")))), (showDefaultShareButtons || !!shareButtons.length) && React.createElement(SocialButtons, {
-    showDefaultShareButtons: showDefaultShareButtons,
-    name: data.product_name,
-    appId: messengerAppId,
-    shareLink: data.personal_share_link,
-    shareButtons: shareButtons
-  })))), React.createElement("div", {
-    className: "pricing-section"
-  }, React.createElement("div", {
-    className: "invitation_title"
-  }, "How much cheaper?"), _map(data.personal_share_sales, function (pricing, index) {
-    return React.createElement("div", {
-      key: index,
-      className: "pricing-section_wrapper"
-    }, React.createElement("div", {
-      className: "pricing-section_label"
-    }, pricing.label, pricing.subLabel && React.createElement("div", {
-      className: "pricing-section_sublabel"
-    }, pricing.subLabel)), React.createElement("div", {
-      className: "pricing-section_price"
-    }, ' ', pricing.price));
-  }))))));
-};
-
-var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
-  if (maxCount === void 0) {
-    maxCount = 10;
-  }
-
-  if (minCount === void 0) {
-    minCount = 1;
-  }
-
-  if (multiplier === void 0) {
-    multiplier = 1;
-  }
-
-  var options = [{
-    label: 0,
-    value: 0
-  }];
-
-  for (var i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
-    options.push({
-      label: i,
-      value: i
-    });
-  }
-
-  return options;
-};
-
-var TicketRow = function TicketRow(_ref) {
-  var ticketTier = _ref.ticketTier,
-      prevTicketTier = _ref.prevTicketTier,
-      selectedTickets = _ref.selectedTickets,
-      handleTicketSelect = _ref.handleTicketSelect;
-  var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
-  var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
-  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
-  var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
-  var onSaleContent = React.createElement("div", {
-    className: "get-tickets"
-  }, React.createElement(Box, {
-    className: "get-tickets__selectbox"
-  }, React.createElement(FormControl$1, {
-    fullWidth: true
-  }, React.createElement(Select, {
-    sx: {
-      borderRadius: 0
-    },
-    value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
-    onChange: handleTicketSelect,
-    displayEmpty: true,
-    inputProps: {
-      'aria-label': 'Without label'
-    },
-    MenuProps: {
-      PaperProps: {
-        sx: {
-          maxHeight: 150
-        },
-        className: 'get-tickets-paper'
-      }
-    }
-  }, options.map(function (option, index) {
-    return React.createElement(MenuItem, {
+  }, hasCopyIcon ? React.createElement("img", {
+    src: "https://img.icons8.com/office/50/000000/copy.png",
+    alt: "copy"
+  }) : React.createElement("span", {
+    className: 'copy-icon'
+  }, "Copy")))), (showDefaultShareButtons || !!shareButtons.length) && React.createElement(SocialButtons, {
+    showDefaultShareButtons: showDefaultShareButtons,
+    name: data.product_name,
+    appId: messengerAppId,
+    shareLink: data.personal_share_link,
+    shareButtons: shareButtons
+  })))), React.createElement("div", {
+    className: "pricing-section"
+  }, React.createElement("div", {
+    className: "invitation_title"
+  }, "How much cheaper?"), _map(data.personal_share_sales, function (pricing, index) {
+    return React.createElement("div", {
       key: index,
-      value: option.value
-    }, option.value);
-  })))));
-  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
+      className: "pricing-section_wrapper"
+    }, React.createElement("div", {
+      className: "pricing-section_label"
+    }, pricing.label, pricing.subLabel && React.createElement("div", {
+      className: "pricing-section_sublabel"
+    }, pricing.subLabel)), React.createElement("div", {
+      className: "pricing-section_price"
+    }, ' ', pricing.price));
+  }))))));
+};
 
-  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
+var isTimeExpired = function isTimeExpired(startDate, timezone) {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
+};
 
-  if (isSoldOut) {
-    returnValue = soldOutMessage;
-  } else if (isSalesClosed) {
-    returnValue = ticketsClosedMessage;
-  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
-    returnValue = onSaleContent;
-  } else if (_get(prevTicketTier, 'in_stock')) {
-    returnValue = 'SOON';
-  }
+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$showMessage = _ref.showMessage,
+      showMessage = _ref$showMessage === void 0 ? false : _ref$showMessage,
+      _ref$disableLeadingZe = _ref.disableLeadingZero,
+      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+      isLoggedIn = _ref.isLoggedIn;
 
-  return React.createElement(React.Fragment, null, returnValue, " ");
-};
+  var _useState = useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
 
-var TicketsSection = function TicketsSection(_ref) {
-  var ticketsList = _ref.ticketsList,
-      selectedTickets = _ref.selectedTickets,
-      handleTicketSelect = _ref.handleTicketSelect,
-      sortBySoldOut = _ref.sortBySoldOut,
-      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
-      hideTicketsHeader = _ref.hideTicketsHeader;
-  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
-  return React.createElement(React.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
-    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+  var _useState2 = useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
 
-    var ticketSelect = function ticketSelect(event) {
-      var value = event.target.value;
-      handleTicketSelect(ticket.id, value);
-    };
+  useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  useEffect(function () {
+    var timer;
 
-    var ticketIsDiscounted = false;
+    if (!timeExpired) {
+      timer = setInterval(function () {
+        if (isTimeExpired(startDate, timezone)) {
+          clearInterval(timer);
+          setTimeExpired(true);
+          callback();
+          return;
+        }
 
-    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
-      ticketIsDiscounted = true;
+        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 = dateArr[date];
+
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date];
+          }
+
+          if (timeLeft) {
+            timeLeft += ", " + val + " " + unit;
+          } else if (dateArr[date]) {
+            timeLeft += val + " " + unit;
+          }
+        }
+
+        setDuration(timeLeft);
+      }, 1000);
     }
 
-    var ticketIsFree = +ticket.price === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
-    return React.createElement("div", {
-      key: ticket.id || ticket.name,
-      className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
-    }, React.createElement("div", {
-      className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React.createElement("div", {
-      className: "event-tickets-container"
-    }, React.createElement("div", {
-      className: "event-detail__tier-price"
-    }, ticketIsDiscounted && React.createElement("p", {
-      className: "old-price"
-    }, "$ ", (+ticket.oldPrice).toFixed(2)), React.createElement("p", null, ticketPrice), !isSoldOut && !ticketIsFree && React.createElement("p", {
-      className: "fees"
-    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React.createElement("div", {
-      className: "event-detail__tier-state",
-      style: {
-        minWidth: 55
-      }
-    }, React.createElement(TicketRow, {
-      ticketTier: ticket,
-      prevTicketTier: arr[i - 1],
-      selectedTickets: selectedTickets,
-      handleTicketSelect: ticketSelect
-    }))));
-  }));
-};
+    return function () {
+      clearInterval(timer);
+    };
+  }, [timeExpired]);
+  return React.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
+    className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
+  }, React.createElement("div", null, React.createElement("p", {
+    className: 'title'
+  }, title), React.createElement("p", null, duration)), showMessage && React.createElement("p", {
+    className: 'message'
+  }, message)));
+}
 
 var generateQuantity = function generateQuantity(n) {
   var quantityList = [];
@@ -4861,70 +4867,11 @@ var WaitingList = function WaitingList(_ref) {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
-  }, loading ? React.createElement(CircularProgress$1, {
+  }, loading ? React.createElement(CircularProgress, {
     size: "22px"
   }) : 'ADD TO WAITING LIST')))));
 };
 
-var PromoCodeSection = function PromoCodeSection(_ref) {
-  var code = _ref.code,
-      codeIsApplied = _ref.codeIsApplied,
-      showPromoInput = _ref.showPromoInput,
-      setCode = _ref.setCode,
-      setShowPromoInput = _ref.setShowPromoInput,
-      updateTickets = _ref.updateTickets,
-      setCodeIsApplied = _ref.setCodeIsApplied;
-  var isPromoCodeHasValue = !!code.trim();
-
-  var renderInputField = function renderInputField() {
-    return React.createElement("div", {
-      className: "promo-code-block"
-    }, React.createElement("div", {
-      className: "promo-code-block"
-    }, React.createElement("p", {
-      className: "promo-code-text"
-    }, "Promo code")), React.createElement("input", {
-      className: "promo-code-input",
-      placeholder: "",
-      onChange: function onChange(e) {
-        setCode(e.target.value);
-      },
-      onKeyPress: function onKeyPress(event) {
-        if (event.key === 'Enter' && isPromoCodeHasValue) {
-          setShowPromoInput(false);
-          updateTickets(true, 'promo');
-        }
-      }
-    }), React.createElement(Button$1, {
-      className: "promo-submit-button",
-      onClick: function onClick() {
-        if (isPromoCodeHasValue) {
-          setShowPromoInput(false);
-          updateTickets(true, 'promo');
-        }
-      }
-    }, "APPLY"));
-  };
-
-  return React.createElement("div", null, codeIsApplied ? React.createElement("div", {
-    className: "alert-info"
-  }, React.createElement(SVG, {
-    src: getImage('done.svg'),
-    preProcessor: function preProcessor(code) {
-      return code.replace(/fill=".*?"/g, 'fill="currentColor"');
-    }
-  }), React.createElement("p", {
-    className: "promo-code-success"
-  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, !showPromoInput && React.createElement(Button$1, {
-    className: "promo-code-button",
-    placeholder: "Promo Codes",
-    onClick: function onClick() {
-      setCodeIsApplied(false);
-      setShowPromoInput(true);
-    }
-  }, "Got a promo code? Click here"), showPromoInput && renderInputField());
-};
-
 var AccessCodeSection = function AccessCodeSection(_ref) {
   var code = _ref.code,
       setCode = _ref.setCode,
@@ -4957,93 +4904,64 @@ var AccessCodeSection = function AccessCodeSection(_ref) {
   }, "ENTER"));
 };
 
-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$showMessage = _ref.showMessage,
-      showMessage = _ref$showMessage === void 0 ? false : _ref$showMessage,
-      _ref$disableLeadingZe = _ref.disableLeadingZero,
-      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
-      _ref$callback = _ref.callback,
-      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-      isLoggedIn = _ref.isLoggedIn;
-
-  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;
+var PromoCodeSection = function PromoCodeSection(_ref) {
+  var code = _ref.code,
+      codeIsApplied = _ref.codeIsApplied,
+      showPromoInput = _ref.showPromoInput,
+      setCode = _ref.setCode,
+      setShowPromoInput = _ref.setShowPromoInput,
+      updateTickets = _ref.updateTickets,
+      setCodeIsApplied = _ref.setCodeIsApplied;
+  var isPromoCodeHasValue = !!code.trim();
 
-    if (!timeExpired) {
-      timer = setInterval(function () {
-        if (isTimeExpired(startDate, timezone)) {
-          clearInterval(timer);
-          setTimeExpired(true);
-          callback();
-          return;
+  var renderInputField = function renderInputField() {
+    return React.createElement("div", {
+      className: "promo-code-block"
+    }, React.createElement("div", {
+      className: "promo-code-block"
+    }, React.createElement("p", {
+      className: "promo-code-text"
+    }, "Promo code")), React.createElement("input", {
+      className: "promo-code-input",
+      placeholder: "",
+      onChange: function onChange(e) {
+        setCode(e.target.value);
+      },
+      onKeyPress: function onKeyPress(event) {
+        if (event.key === 'Enter' && isPromoCodeHasValue) {
+          setShowPromoInput(false);
+          updateTickets(true, 'promo');
         }
-
-        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 = dateArr[date];
-
-          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
-            val = '0' + dateArr[date];
-          }
-
-          if (timeLeft) {
-            timeLeft += ", " + val + " " + unit;
-          } else if (dateArr[date]) {
-            timeLeft += val + " " + unit;
-          }
+      }
+    }), React.createElement(Button$1, {
+      className: "promo-submit-button",
+      onClick: function onClick() {
+        if (isPromoCodeHasValue) {
+          setShowPromoInput(false);
+          updateTickets(true, 'promo');
         }
+      }
+    }, "APPLY"));
+  };
 
-        setDuration(timeLeft);
-      }, 1000);
+  return React.createElement("div", null, codeIsApplied ? React.createElement("div", {
+    className: "alert-info"
+  }, React.createElement(SVG, {
+    src: getImage('done.svg'),
+    preProcessor: function preProcessor(code) {
+      return code.replace(/fill=".*?"/g, 'fill="currentColor"');
     }
-
-    return function () {
-      clearInterval(timer);
-    };
-  }, [timeExpired]);
-  return React.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
-    className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
-  }, React.createElement("div", null, React.createElement("p", {
-    className: 'title'
-  }, title), React.createElement("p", null, duration)), showMessage && React.createElement("p", {
-    className: 'message'
-  }, message)));
-}
+  }), React.createElement("p", {
+    className: "promo-code-success"
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, !showPromoInput && React.createElement(Button$1, {
+    className: "promo-code-button",
+    placeholder: "Promo Codes",
+    onClick: function onClick() {
+      setCodeIsApplied(false);
+      setShowPromoInput(true);
+    }
+  }, "Got a promo code? Click here"), showPromoInput && renderInputField());
+};
 
 var ReferralLogic = function ReferralLogic(props) {
   var eventId = props.eventId;
@@ -5087,6 +5005,141 @@ var ReferralLogic = function ReferralLogic(props) {
   return null;
 };
 
+var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
+  if (maxCount === void 0) {
+    maxCount = 10;
+  }
+
+  if (minCount === void 0) {
+    minCount = 1;
+  }
+
+  if (multiplier === void 0) {
+    multiplier = 1;
+  }
+
+  var options = [{
+    label: 0,
+    value: 0
+  }];
+
+  for (var i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
+    options.push({
+      label: i,
+      value: i
+    });
+  }
+
+  return options;
+};
+
+var TicketRow = function TicketRow(_ref) {
+  var ticketTier = _ref.ticketTier,
+      prevTicketTier = _ref.prevTicketTier,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect;
+  var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
+  var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
+  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
+  var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
+  var onSaleContent = React.createElement("div", {
+    className: "get-tickets"
+  }, React.createElement(Box$1, {
+    className: "get-tickets__selectbox"
+  }, React.createElement(FormControl$1, {
+    fullWidth: true
+  }, React.createElement(Select, {
+    sx: {
+      borderRadius: 0
+    },
+    value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
+    onChange: handleTicketSelect,
+    displayEmpty: true,
+    inputProps: {
+      'aria-label': 'Without label'
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          maxHeight: 150
+        },
+        className: 'get-tickets-paper'
+      }
+    }
+  }, options.map(function (option, index) {
+    return React.createElement(MenuItem, {
+      key: index,
+      value: option.value
+    }, option.value);
+  })))));
+  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
+
+  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
+
+  if (isSoldOut) {
+    returnValue = soldOutMessage;
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage;
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
+    returnValue = onSaleContent;
+  } else if (_get(prevTicketTier, 'in_stock')) {
+    returnValue = 'SOON';
+  }
+
+  return React.createElement(React.Fragment, null, returnValue, " ");
+};
+
+var TicketsSection = function TicketsSection(_ref) {
+  var ticketsList = _ref.ticketsList,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect,
+      sortBySoldOut = _ref.sortBySoldOut,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      hideTicketsHeader = _ref.hideTicketsHeader;
+  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
+  return React.createElement(React.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
+    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+
+    var ticketSelect = function ticketSelect(event) {
+      var value = event.target.value;
+      handleTicketSelect(ticket.id, value);
+    };
+
+    var ticketIsDiscounted = false;
+
+    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+      ticketIsDiscounted = true;
+    }
+
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
+    return React.createElement("div", {
+      key: ticket.id || ticket.name,
+      className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
+    }, React.createElement("div", {
+      className: "event-detail__tier-name"
+    }, ticket.displayName || ticket.name), React.createElement("div", {
+      className: "event-tickets-container"
+    }, React.createElement("div", {
+      className: "event-detail__tier-price"
+    }, ticketIsDiscounted && React.createElement("p", {
+      className: "old-price"
+    }, "$ ", (+ticket.oldPrice).toFixed(2)), React.createElement("p", null, ticketPrice), !isSoldOut && !ticketIsFree && React.createElement("p", {
+      className: "fees"
+    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React.createElement("div", {
+      className: "event-detail__tier-state",
+      style: {
+        minWidth: 55
+      }
+    }, React.createElement(TicketRow, {
+      ticketTier: ticket,
+      prevTicketTier: arr[i - 1],
+      selectedTickets: selectedTickets,
+      handleTicketSelect: ticketSelect
+    }))));
+  }));
+};
+
 var TicketsContainer = function TicketsContainer(_ref) {
   var onLoginSuccess = _ref.onLoginSuccess,
       getTicketsLabel = _ref.getTicketsLabel,
@@ -5130,7 +5183,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       ActionsSectionComponent = _ref.actionsSectionComponent,
       ticketsHeaderComponent = _ref.ticketsHeaderComponent,
       _ref$hideTicketsHeade = _ref.hideTicketsHeader,
-      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade;
+      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade,
+      _ref$enableInfluencer = _ref.enableInfluencersSection,
+      enableInfluencersSection = _ref$enableInfluencer === void 0 ? true : _ref$enableInfluencer;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
@@ -5537,6 +5592,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }) : null;
   var externalUrl = event == null ? void 0 : event.redirectUrl;
   var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
+  var influencers = event != null && event.referralsEnabled ? event == null ? void 0 : event.referrals : [];
   return React.createElement(ThemeProvider$1, {
     theme: themeMui
   }, !isLoading && React.createElement(ReferralLogic, {
@@ -5600,7 +5656,18 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, "Log out"))) : ''), showLoginModal ? React.createElement(LoginModal, {
     onClose: handleOnClose,
     onLogin: handleOnLogin
-  }) : null));
+  }) : null), enableInfluencersSection && influencers.length ? React.createElement("div", {
+    className: "event-influencers"
+  }, React.createElement("h3", null, React.createElement("span", null, "TOP"), " INFLUENCERS"), React.createElement("ol", {
+    className: "influencer-list"
+  }, influencers.map(function (influencer, i) {
+    var _influencer$lastName;
+
+    return React.createElement("li", {
+      className: "influencer-item",
+      key: i
+    }, influencer.firstName + " " + ((_influencer$lastName = influencer.lastName) == null ? void 0 : _influencer$lastName.charAt(0)), ' ');
+  }))) : null);
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {
@@ -5810,7 +5877,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
       width: 300
     },
     renderInput: function renderInput(params) {
-      return React.createElement(TextField$1, Object.assign({}, params, {
+      return React.createElement(TextField, Object.assign({}, params, {
         label: "Events"
       }));
     }
@@ -5819,7 +5886,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     className: "clear"
   }, "CLEAR")), loading ? React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
+  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React.createElement(Table, {
@@ -5970,7 +6037,7 @@ var TicketsTable = function TicketsTable(_ref) {
   })))));
 };
 
-var _excluded$2 = ["label", "field", "theme"];
+var _excluded$2 = ["label", "field", "theme", "disableDropdown"];
 var RadioField = function RadioField(_ref) {
   var label = _ref.label,
       field = _ref.field,
@@ -6048,13 +6115,13 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       currency = ticket.currency,
       resale_fee_amount = ticket.resale_fee_amount,
       ticket_type_is_active = ticket.ticket_type_is_active;
-  return React.createElement(Modal, {
+  return React.createElement(Modal$1, {
     open: true,
     onClose: onClose,
     "aria-labelledby": "modal-modal-title",
     "aria-describedby": "modal-modal-description",
     className: 'resale-modal'
-  }, React.createElement(Box, {
+  }, React.createElement(Box$1, {
     style: style$3
   }, React.createElement("h3", null, "Sell Ticket"), React.createElement("div", null, React.createElement("h3", null, "Ticket Details"), React.createElement("div", null, React.createElement("h4", null, "Event"), React.createElement("p", null, event_name)), React.createElement("div", null, React.createElement("h4", null, "Ticket Holder"), React.createElement("p", null, holder_name)), React.createElement("div", null, React.createElement("h4", null, "Ticket ID"), React.createElement("p", null, hash))), React.createElement("div", null, React.createElement("h3", null, "Sell to Whom"), React.createElement(Formik, {
     initialValues: initialValues,
@@ -6161,13 +6228,13 @@ var ConfirmModal = function ConfirmModal(_ref) {
       onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       _ref$onConfirm = _ref.onConfirm,
       onConfirm = _ref$onConfirm === void 0 ? function () {} : _ref$onConfirm;
-  return React.createElement(Modal, {
+  return React.createElement(Modal$1, {
     open: true,
     onClose: onClose,
     "aria-labelledby": "modal-modal-title",
     "aria-describedby": "modal-modal-description",
     className: 'confirm-modal'
-  }, React.createElement(Box, {
+  }, React.createElement(Box$1, {
     style: style$4
   }, React.createElement("p", null, message), React.createElement("div", {
     className: 'footer'
@@ -6405,7 +6472,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     className: "order-details"
   }, loading ? React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
+  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
@@ -6440,7 +6507,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     alt: "Icon"
   }), data == null ? void 0 : data.personal_share_link)), React.createElement("div", {
     className: "link-item"
-  }, React.createElement("p", null, "So far, you\u2019ve referred " + data.sales_referred + " tickets"))), React.createElement(TableContainer, {
+  }, React.createElement("p", null, "So far, you\u2019ve referred " + data.sales_referred + " tickets"))), data != null && data.sales_referred ? React.createElement("div", {
+    className: "total-referrer"
+  }, React.createElement("b", null, "So far, you've referred ", data.sales_referred, " tickets.")) : null, React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
     className: "tt-type",
@@ -6592,7 +6661,7 @@ var ResetPasswordContainer = function ResetPasswordContainer(_ref) {
     }, React.createElement("button", {
       type: "submit",
       disabled: !(isValid && dirty)
-    }, loading ? React.createElement(CircularProgress, {
+    }, loading ? React.createElement(CircularProgress$1, {
       size: "22px"
     }) : 'Submit')));
   }));
@@ -6727,12 +6796,12 @@ var RedirectModal = function RedirectModal(_ref) {
       message = _ref$message === void 0 ? 'Your cart has expired. Please click on "OK" to return to the ticket selection page.' : _ref$message,
       _ref$onClickOk = _ref.onClickOk,
       onClickOk = _ref$onClickOk === void 0 ? function () {} : _ref$onClickOk;
-  return React.createElement(Modal, {
+  return React.createElement(Modal$1, {
     open: true,
     "aria-labelledby": "modal-modal-title",
     "aria-describedby": "modal-modal-description",
     className: "redirect-modal"
-  }, React.createElement(Box, {
+  }, React.createElement(Box$1, {
     style: style$5
   }, React.createElement("p", null, message), React.createElement("div", {
     className: "footer"
@@ -6840,13 +6909,13 @@ var RsvpContainer = function RsvpContainer(_ref) {
     return null;
   }
 
-  return React.createElement(React.Fragment, null, React.createElement(Modal, {
+  return React.createElement(React.Fragment, null, React.createElement(Modal$1, {
     open: modal.isOpen,
     onClose: handleModalClose,
     "aria-labelledby": "modal-modal-title",
     "aria-describedby": "modal-modal-description",
     className: "rsvp-modal"
-  }, React.createElement(Box, {
+  }, React.createElement(Box$1, {
     style: style$6,
     className: "rsvp-modal-box"
   }, React.createElement("div", {