tf-checkout-react 1.3.42 → 1.3.43

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

@@ -1,4 +1,4 @@
-import { FormControl, FormHelperText, InputLabel, Snackbar, Alert, Modal, Box, CircularProgress as CircularProgress$1, TextField as TextField$1, createTheme as createTheme$1 } from '@mui/material';
+import { Snackbar, Alert, Modal, Box, CircularProgress, TextField as TextField$1, FormControl, FormHelperText, InputLabel, createTheme as createTheme$1 } from '@mui/material';
 import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
@@ -12,21 +12,26 @@ import _isEmpty from 'lodash-es/isEmpty';
 import _isEqual from 'lodash-es/isEqual';
 import _map from 'lodash-es/map';
 import { nanoid } from 'nanoid';
-import React, { Component, useEffect, useState, useRef, useCallback, memo, Fragment } from 'react';
+import React, { Component, useEffect, useState, useRef, memo, useCallback, Fragment } from 'react';
 import _forEach from 'lodash-es/forEach';
-import { DatePicker } from '@mui/x-date-pickers';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { object, string, ref, boolean } from 'yup';
 import TextField from '@mui/material/TextField';
 import { useTheme } from '@mui/styles';
 import _isFunction from 'lodash-es/isFunction';
 import _isObject from 'lodash-es/isObject';
+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 _flatMapDeep from 'lodash-es/flatMapDeep';
+import _isArray from 'lodash-es/isArray';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup';
 import MuiPhoneNumber from 'material-ui-phone-number';
 import _debounce from 'lodash-es/debounce';
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress$1 from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
 import FormControl$1 from '@mui/material/FormControl';
 import FormHelperText$1 from '@mui/material/FormHelperText';
@@ -36,14 +41,9 @@ import RadioGroup from '@mui/material/RadioGroup';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import OutlinedInput from '@mui/material/OutlinedInput';
-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 _flatMapDeep from 'lodash-es/flatMapDeep';
-import _isArray from 'lodash-es/isArray';
+import { DatePicker } from '@mui/x-date-pickers';
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import Alert$1 from '@mui/material/Alert';
 import Container from '@mui/material/Container';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
@@ -1748,6 +1748,42 @@ var emailValidator = function emailValidator(email) {
   return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
 };
 
+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)));
+};
+
 var CustomField = function CustomField(_ref2) {
   var _ref$current;
 
@@ -1766,7 +1802,11 @@ var CustomField = function CustomField(_ref2) {
       pInputProps = _ref2$inputProps === void 0 ? {} : _ref2$inputProps,
       _ref2$InputProps = _ref2.InputProps,
       InputProps = _ref2$InputProps === void 0 ? {} : _ref2$InputProps,
-      inputRef = _ref2.inputRef;
+      inputRef = _ref2.inputRef,
+      _ref2$multiline = _ref2.multiline,
+      multiline = _ref2$multiline === void 0 ? false : _ref2$multiline,
+      minRows = _ref2.minRows,
+      maxRows = _ref2.maxRows;
 
   var _useState = useState(Boolean(field.value)),
       isShrinked = _useState[0],
@@ -1816,7 +1856,10 @@ var CustomField = function CustomField(_ref2) {
     },
     InputProps: InputProps,
     inputProps: _extends({}, inputProps, pInputProps),
-    inputRef: _ref
+    inputRef: _ref,
+    multiline: multiline,
+    minRows: minRows,
+    maxRows: maxRows
   }, field, {
     onBlur: function onBlur(e) {
       setIsShrinked(Boolean(field.value));
@@ -1834,446 +1877,358 @@ var CustomField = function CustomField(_ref2) {
   }) : null);
 };
 
-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
-  },
-  '& .MuiPickersArrowSwitcher-spacer': {
-    width: 0
-  },
-  '& [role="presentation"] .PrivatePickersFadeTransitionGroup-root': {
-    marginRight: -1
-  }
-};
-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,
-      _ref$dateFormat = _ref.dateFormat,
-      dateFormat = _ref$dateFormat === void 0 ? 'DD/MM/YYYY' : _ref$dateFormat,
-      _ref$datePlaceholder = _ref.datePlaceholder,
-      datePlaceholder = _ref$datePlaceholder === void 0 ? 'dd/mm/yyyy' : _ref$datePlaceholder;
-  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: dateFormat,
-    mask: "__/__/____",
-    renderInput: function renderInput(params) {
-      return React.createElement(CustomField, Object.assign({}, params, {
-        inputProps: _extends({}, params.inputProps, {
-          placeholder: datePlaceholder
-        }),
-        theme: theme,
-        field: _extends({}, field, {
-          onChange: function onChange(evt) {
-            if (params.inputProps && params.inputProps.onChange) {
-              params.inputProps.onChange(evt);
-            }
-          }
-        }),
-        form: form,
-        label: label,
-        type: "tel"
-      }));
-    }
-  })));
+var PoweredBy = function PoweredBy() {
+  return React.createElement("div", {
+    className: "powered-container"
+  }, React.createElement("div", {
+    className: 'powered-text'
+  }, "Powered By"), React.createElement("img", {
+    className: 'powered-img',
+    alt: "The Ticket Fairy",
+    src: "https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg"
+  }), React.createElement("div", {
+    className: 'powered-ttf'
+  }, "The", React.createElement("strong", null, "Ticket"), "Fairy"));
 };
 
-var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue", "disableDropdown", "setPhoneValidationIsLoading", "defaultCountry", "dateFormat", "datePlaceholder"];
-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 style = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
 };
+var Schema = /*#__PURE__*/object().shape({
+  email: /*#__PURE__*/string().email('Invalid email').required('Required')
+});
+var ForgotPasswordModal = function ForgotPasswordModal(_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$onForgotPassword = _ref.onForgotPasswordSuccess,
+      onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
+      _ref$onForgotPassword2 = _ref.onForgotPasswordError,
+      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? function () {} : _ref$onForgotPassword2,
+      _ref$showPoweredByIma = _ref.showPoweredByImage,
+      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
-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,
-      values = _ref$form.values,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref$form.setFieldValue,
-      setFieldTouched = _ref$form.setFieldTouched,
-      setErrors = _ref$form.setErrors,
-      _ref$disableDropdown = _ref.disableDropdown,
-      disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown,
-      _ref$defaultCountry = _ref.defaultCountry,
-      defaultCountry = _ref$defaultCountry === void 0 ? 'us' : _ref$defaultCountry,
-      _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? false : _ref$fill,
-      setPhoneValidationIsLoading = _ref.setPhoneValidationIsLoading;
-
-  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) {
-      setPhoneValidationIsLoading(true);
-    }
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var newErrors, _newErrors, message;
+  var onForgotPassword = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+      var email, _yield$forgotPassword, data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _context.prev = 0;
-
-              if (values[field.name]) {
-                _context.next = 6;
-                break;
-              }
+              email = _ref2.email;
+              _context.prev = 1;
+              setLoading(true);
+              _context.next = 5;
+              return forgotPassword(email);
 
-              newErrors = _extends({}, errors);
-              delete newErrors[field.name];
-              setErrors(newErrors);
-              return _context.abrupt("return");
+            case 5:
+              _yield$forgotPassword = _context.sent;
+              data = _yield$forgotPassword.data;
+              onForgotPasswordSuccess(data);
+              onClose();
+              _context.next = 14;
+              break;
 
-            case 6:
-              if (!values[field.name]) {
-                _context.next = 9;
-                break;
-              }
-
-              _context.next = 9;
-              return validatePhoneNumber(values[field.name]);
-
-            case 9:
-              if (errors[field.name]) {
-                _newErrors = _extends({}, errors);
-                delete _newErrors[field.name];
-                setErrors(_newErrors);
-              }
-
-              _context.next = 16;
-              break;
-
-            case 12:
-              _context.prev = 12;
-              _context.t0 = _context["catch"](0);
-              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](1);
 
-              if (values[field.name] && errors[field.name] !== message) {
-                setFieldError(field.name, message);
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
               }
 
-            case 16:
-              _context.prev = 16;
-              setPhoneValidationIsLoading(false);
-              return _context.finish(16);
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
 
-            case 19:
+            case 17:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 12, 16, 19]]);
-    }))); // eslint-disable-next-line
-  }, [field.value]);
-  return React.createElement(React.Fragment, null, React.createElement(MuiPhoneNumber, {
-    name: field.name,
-    value: fill ? values[field.name] : initialValues[field.name],
-    onChange: function onChange(value, country) {
-      if ("+" + (country == null ? void 0 : country.dialCode) === value || value === '+') {
-        setFieldValue(field.name, '');
-        setFieldError(field.name, '');
-      } else {
-        setFieldTouched(field.name, true);
-        setFieldValue(field.name, value);
-      }
-    },
-    variant: "outlined",
-    defaultCountry: defaultCountry,
-    disableDropdown: disableDropdown,
-    label: label,
-    error: !!error && (isTouched || fill),
-    helperText: (isTouched || fill) && error,
-    fullWidth: true,
-    autoFormat: false,
-    disableAreaCodes: true,
-    countryCodeEditable: false
-  }));
-};
-
-function Loader() {
-  return React.createElement("div", {
-    className: "loader-container"
-  }, React.createElement(CircularProgress, null));
-}
-
-var NativeSelectField = function NativeSelectField(_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,
-      setFieldValue = _ref$form.setFieldValue,
-      theme = _ref.theme,
-      _ref$onChange = _ref.onChange,
-      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
 
-  var isTouched = Boolean(_get(touched, field.name));
+    return function onForgotPassword(_x) {
+      return _ref3.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: "forgot-password-modal"
+  }, React.createElement(Box, {
+    style: style
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      email: ''
     },
-    "native": true,
-    className: theme,
-    MenuProps: {
-      className: theme
-    }
-  }, field, {
-    style: customTheme == null ? void 0 : customTheme.input,
-    onChange: function onChange(e) {
-      _onChange(e);
+    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")), showPoweredByImage ? React.createElement(PoweredBy, null) : null);
+  }))));
+};
 
-      setFieldValue(field.name, e.target.value);
-    }
-  }), _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);
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none'
+};
+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 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,
+      _ref$showPoweredByIma = _ref.showPoweredByImage,
+      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
-var RadioGroupField = function RadioGroupField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      radios = _ref.radios,
-      _ref$form = _ref.form,
-      errors = _ref$form.errors,
-      setFieldValue = _ref$form.setFieldValue,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? _identity : _ref$onChange;
-  var radioId = "radio-" + field.name;
+  var _useState = useState(''),
+      error = _useState[0],
+      setError = _useState[1];
 
-  var error = _get(errors, field.name);
+  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;
 
-  var handleChange = function handleChange(e) {
-    var value = e.target.value;
-    setFieldValue(field.name, value);
-    onChange(e);
-  };
+        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);
 
-  return React.createElement(FormControl$1, null, error ? React.createElement(FormHelperText$1, {
-    className: "radio-error",
-    error: true
-  }, error) : null, label && React.createElement(FormLabel, {
-    id: radioId
-  }, label), React.createElement(RadioGroup, {
-    "aria-labelledby": radioId,
-    name: field.name,
-    value: field.value,
-    onChange: handleChange
-  }, radios.map(function (radio) {
-    var id = radio.id,
-        name = radio.name,
-        value = radio.value;
-    return React.createElement(FormControlLabel, {
-      key: id,
-      label: name,
-      value: value,
-      control: React.createElement(Radio, null)
-    });
-  })));
-};
+              case 5:
+                profileResponse = null;
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-function SelectField(_ref) {
-  var label = _ref.label,
-      isMultiple = _ref.isMultiple,
-      field = _ref.field,
-      _ref$form = _ref.form,
-      errors = _ref$form.errors,
-      setFieldValue = _ref$form.setFieldValue,
-      options = _ref.options,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? _identity : _ref$onChange;
-  var name = field.name,
-      value = field.value;
-  var selectId = "select-field-" + name;
+              case 9:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 17;
+                break;
 
-  var error = _get(errors, name);
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-  var handleChange = function handleChange(event) {
-    var value = event.target.value;
-    setFieldValue(name, value);
-    onChange(event);
-  };
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
+                }
 
-  return React.createElement(React.Fragment, null, React.createElement(FormControl, {
-    fullWidth: true,
-    error: Boolean(error)
-  }, label && React.createElement(InputLabel, {
-    id: selectId
-  }, label), React.createElement(Select, {
-    id: name,
-    labelId: selectId,
-    multiple: isMultiple,
-    value: value,
-    onChange: handleChange,
-    input: React.createElement(OutlinedInput, {
-      label: label
-    }),
-    renderValue: function renderValue(selected) {
-      return isMultiple ? selected.join(', ') : selected;
-    },
-    sx: {
-      textAlign: 'start'
-    }
-  }, options.map(function (option) {
-    return React.createElement(MenuItem, {
-      key: option.name,
-      value: option.value
-    }, isMultiple && React.createElement(Checkbox, {
-      checked: value.indexOf(option.value) > -1
-    }), React.createElement(ListItemText, {
-      primary: option.name
-    }));
-  })), error ? React.createElement(FormHelperText$1, {
-    error: true
-  }, error) : null));
-}
+                return _context.abrupt("return");
 
-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)));
-};
+              case 17:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
+                profileDataObj = setLoggedUserData$1(profileSpecifiedData);
 
-var PoweredBy = function PoweredBy() {
-  return React.createElement("div", {
-    className: "powered-container"
-  }, React.createElement("div", {
-    className: 'powered-text'
-  }, "Powered By"), React.createElement("img", {
-    className: 'powered-img',
-    alt: "The Ticket Fairy",
-    src: "https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg"
-  }), React.createElement("div", {
-    className: 'powered-ttf'
-  }, "The", React.createElement("strong", null, "Ticket"), "Fairy"));
+                if (typeof window !== 'undefined') {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
+                }
+
+                onLogin();
+                _context.next = 26;
+                break;
+
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
+
+                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]]);
+      }));
+
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
+
+      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")), showPoweredByImage ? React.createElement(PoweredBy, null) : null));
+  }))));
 };
 
-var style = {
+var style$2 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -2284,18 +2239,22 @@ var style = {
   outline: 'none',
   padding: '14px'
 };
-var Schema = /*#__PURE__*/object().shape({
-  email: /*#__PURE__*/string().email('Invalid email').required('Required')
-});
-var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
-  var _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
-      _ref$onLogin = _ref.onLogin,
+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$onForgotPassword = _ref.onForgotPasswordSuccess,
-      onForgotPasswordSuccess = _ref$onForgotPassword === void 0 ? function () {} : _ref$onForgotPassword,
-      _ref$onForgotPassword2 = _ref.onForgotPasswordError,
-      onForgotPasswordError = _ref$onForgotPassword2 === void 0 ? function () {} : _ref$onForgotPassword2,
+      _ref$onRegisterSucces = _ref.onRegisterSuccess,
+      onRegisterSuccess = _ref$onRegisterSucces === void 0 ? function () {} : _ref$onRegisterSucces,
+      _ref$onRegisterError = _ref.onRegisterError,
+      onRegisterError = _ref$onRegisterError === void 0 ? function () {} : _ref$onRegisterError,
       _ref$showPoweredByIma = _ref.showPoweredByImage,
       showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
@@ -2303,51 +2262,63 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
       loading = _useState[0],
       setLoading = _useState[1];
 
-  var onForgotPassword = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-      var email, _yield$forgotPassword, data;
-
+  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:
-              email = _ref2.email;
-              _context.prev = 1;
+              _context.prev = 0;
               setLoading(true);
-              _context.next = 5;
-              return forgotPassword(email);
+              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 5:
-              _yield$forgotPassword = _context.sent;
-              data = _yield$forgotPassword.data;
-              onForgotPasswordSuccess(data);
+            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 = 14;
+              _context.next = 24;
               break;
 
-            case 11:
-              _context.prev = 11;
-              _context.t0 = _context["catch"](1);
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
               if (axios.isAxiosError(_context.t0)) {
-                onForgotPasswordError(_context.t0);
+                onRegisterError(_context.t0, values.email);
               }
 
-            case 14:
-              _context.prev = 14;
+            case 24:
+              _context.prev = 24;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(24);
 
-            case 17:
+            case 27:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 11, 14, 17]]);
+      }, _callee, null, [[0, 21, 24, 27]]);
     }));
 
-    return function onForgotPassword(_x) {
-      return _ref3.apply(this, arguments);
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
     };
   }();
 
@@ -2358,529 +2329,597 @@ var ForgotPasswordModal = function ForgotPasswordModal(_ref) {
     onClose: _onClose,
     "aria-labelledby": "modal-modal-title",
     "aria-describedby": "modal-modal-description",
-    className: "forgot-password-modal"
+    className: "signup-modal"
   }, React.createElement(Box, {
-    style: style
+    style: style$2
   }, React.createElement("div", null, React.createElement(Formik, {
     initialValues: {
-      email: ''
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
     },
-    validationSchema: Schema,
-    onSubmit: onForgotPassword
-  }, function (_ref4) {
-    var isValid = _ref4.isValid,
-        dirty = _ref4.dirty,
-        handleSubmit = _ref4.handleSubmit;
+    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: "forgot-password-container"
+      className: "signup-container"
     }, React.createElement("div", {
       className: "title"
-    }, "Password Reset"), React.createElement("div", {
-      className: "forgot-password-container__singleField"
+    }, "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: "forgot-password-action-button"
+      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, {
+    }, loading ? React.createElement(CircularProgress, {
       size: "22px"
     }) : 'Submit')), React.createElement("div", {
       className: "login"
     }, React.createElement("span", {
       onClick: onLogin
-    }, "Back to Log In")), showPoweredByImage ? React.createElement(PoweredBy, null) : null);
+    }, "Login")), showPoweredByImage ? React.createElement(PoweredBy, null) : null);
   }))));
 };
 
-var style$1 = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none'
-};
-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 showZero = function showZero(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  var intNumber = Number(value);
+  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
 };
-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,
-      _ref$showPoweredByIma = _ref.showPoweredByImage,
-      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
-  var _useState = useState(''),
-      error = _useState[0],
-      setError = _useState[1];
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
+  }
 
-  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;
+  var image = '';
 
-        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);
+  if (!name.trim().length) {
+    return image;
+  }
 
-              case 5:
-                profileResponse = null;
-                _context.prev = 6;
-                _context.next = 9;
-                return getProfileData();
+  if (process.env.NODE_ENV === 'production') {
+    image = require("./images/" + name);
+    return image["default"];
+  }
 
-              case 9:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 17;
-                break;
+  return image;
+};
 
-              case 13:
-                _context.prev = 13;
-                _context.t0 = _context["catch"](6);
+var TimerWidget = function TimerWidget(_ref) {
+  var expires_at = _ref.expires_at,
+      buyLoading = _ref.buyLoading,
+      _ref$onCountdownFinis = _ref.onCountdownFinish,
+      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onGetProfileDataError(_context.t0);
-                }
+  var _useState = useState(true),
+      showTimer = _useState[0],
+      setShowTimer = _useState[1];
 
-                return _context.abrupt("return");
+  var handleCountdownFinish = function handleCountdownFinish() {
+    setShowTimer(false);
 
-              case 17:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = setLoggedUserData$1(profileSpecifiedData);
+    if (!buyLoading) {
+      onCountdownFinish();
+    }
+  };
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                  event = new window.CustomEvent('tf-login');
-                  window.document.dispatchEvent(event);
-                }
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+        seconds = _ref2.seconds,
+        completed = _ref2.completed,
+        handleCountdownFinish = _ref2.handleCountdownFinish;
 
-                onLogin();
-                _context.next = 26;
-                break;
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
 
-              case 23:
-                _context.prev = 23;
-                _context.t1 = _context["catch"](1);
+    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
 
-                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');
-                }
+  var hideTimer = function hideTimer() {
+    var timerRl = document.querySelector('.timer');
 
-              case 26:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[1, 23], [6, 13]]);
+    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;
+};
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
 
-      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")), showPoweredByImage ? React.createElement(PoweredBy, null) : null));
-  }))));
-};
+var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue", "disableDropdown", "setPhoneValidationIsLoading", "defaultCountry", "required", "uniqueId", "dateFormat", "datePlaceholder"];
+var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
 
-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 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 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,
-      _ref$showPoweredByIma = _ref.showPoweredByImage,
-      showPoweredByImage = _ref$showPoweredByIma === void 0 ? false : _ref$showPoweredByIma;
 
-  var _useState = useState(false),
-      loading = _useState[0],
-      setLoading = _useState[1];
+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,
+      values = _ref$form.values,
+      initialValues = _ref$form.initialValues,
+      setFieldValue = _ref$form.setFieldValue,
+      setFieldTouched = _ref$form.setFieldTouched,
+      setErrors = _ref$form.setErrors,
+      _ref$disableDropdown = _ref.disableDropdown,
+      disableDropdown = _ref$disableDropdown === void 0 ? true : _ref$disableDropdown,
+      _ref$defaultCountry = _ref.defaultCountry,
+      defaultCountry = _ref$defaultCountry === void 0 ? 'us' : _ref$defaultCountry,
+      _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? false : _ref$fill,
+      setPhoneValidationIsLoading = _ref.setPhoneValidationIsLoading;
+
+  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) {
+      setPhoneValidationIsLoading(true);
+    }
+
+    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var newErrors, _newErrors, message;
 
-  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;
+              if (values[field.name]) {
+                _context.next = 6;
+                break;
+              }
+
+              newErrors = _extends({}, errors);
+              delete newErrors[field.name];
+              setErrors(newErrors);
+              return _context.abrupt("return");
+
+            case 6:
+              if (!values[field.name]) {
+                _context.next = 9;
+                break;
+              }
+
+              _context.next = 9;
+              return validatePhoneNumber(values[field.name]);
+
+            case 9:
+              if (errors[field.name]) {
+                _newErrors = _extends({}, errors);
+                delete _newErrors[field.name];
+                setErrors(_newErrors);
+              }
+
+              _context.next = 16;
               break;
 
-            case 21:
-              _context.prev = 21;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
 
-              if (axios.isAxiosError(_context.t0)) {
-                onRegisterError(_context.t0, values.email);
+              if (values[field.name] && errors[field.name] !== message) {
+                setFieldError(field.name, message);
               }
 
-            case 24:
-              _context.prev = 24;
-              setLoading(false);
-              return _context.finish(24);
+            case 16:
+              _context.prev = 16;
+              setPhoneValidationIsLoading(false);
+              return _context.finish(16);
 
-            case 27:
+            case 19:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 21, 24, 27]]);
-    }));
+      }, _callee, null, [[0, 12, 16, 19]]);
+    }))); // eslint-disable-next-line
+  }, [field.value]);
+  return React.createElement(React.Fragment, null, React.createElement(MuiPhoneNumber, {
+    name: field.name,
+    value: fill ? values[field.name] : initialValues[field.name],
+    onChange: function onChange(value, country) {
+      if ("+" + (country == null ? void 0 : country.dialCode) === value || value === '+') {
+        setFieldValue(field.name, '');
+        setFieldError(field.name, '');
+      } else {
+        setFieldTouched(field.name, true);
+        setFieldValue(field.name, value);
+      }
+    },
+    variant: "outlined",
+    defaultCountry: defaultCountry,
+    disableDropdown: disableDropdown,
+    label: label,
+    error: !!error && (isTouched || fill),
+    helperText: (isTouched || fill) && error,
+    fullWidth: true,
+    autoFormat: false,
+    disableAreaCodes: true,
+    countryCodeEditable: false
+  }));
+};
 
-    return function onSignup(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+function Loader() {
+  return React.createElement("div", {
+    className: "loader-container"
+  }, React.createElement(CircularProgress$1, null));
+}
 
-  var _onClose = loading ? function () {} : onClose;
+var NativeSelectField = function NativeSelectField(_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,
+      setFieldValue = _ref$form.setFieldValue,
+      theme = _ref.theme,
+      _ref$onChange = _ref.onChange,
+      _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange;
 
-  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: ''
-    },
-    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")), showPoweredByImage ? React.createElement(PoweredBy, null) : null);
-  }))));
-};
+  var isTouched = Boolean(_get(touched, field.name));
 
-var showZero = function showZero(value) {
-  if (value === void 0) {
-    value = 0;
-  }
+  var error = _get(errors, field.name);
 
-  var intNumber = Number(value);
-  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
+  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
+    },
+    "native": true,
+    className: theme,
+    MenuProps: {
+      className: theme
+    }
+  }, field, {
+    style: customTheme == null ? void 0 : customTheme.input,
+    onChange: function onChange(e) {
+      _onChange(e);
+
+      setFieldValue(field.name, e.target.value);
+    }
+  }), _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);
 };
 
-var getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
-  }
+var RadioGroupField = function RadioGroupField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      radios = _ref.radios,
+      disabled = _ref.disabled,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      setFieldValue = _ref$form.setFieldValue,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? _identity : _ref$onChange;
+  var radioId = "radio-" + field.name;
 
-  var image = '';
+  var error = _get(errors, field.name);
 
-  if (!name.trim().length) {
-    return image;
-  }
+  var isTouched = Boolean(_get(touched, field.name));
 
-  if (process.env.NODE_ENV === 'production') {
-    image = require("./images/" + name);
-    return image["default"];
-  }
+  var handleChange = function handleChange(e) {
+    var value = e.target.value;
+    setFieldValue(field.name, value);
+    onChange(e);
+  };
 
-  return image;
+  if (!radios) return null;
+  return React.createElement(FormControl$1, {
+    disabled: disabled,
+    error: isTouched && Boolean(error)
+  }, isTouched && Boolean(error) ? React.createElement(FormHelperText$1, {
+    className: "radio-error",
+    error: true
+  }, error) : null, label && React.createElement(FormLabel, {
+    id: radioId
+  }, label), React.createElement(RadioGroup, {
+    "aria-labelledby": radioId,
+    name: field.name,
+    value: field.value,
+    onChange: handleChange
+  }, radios.map(function (radio) {
+    var id = radio.id,
+        label = radio.label,
+        value = radio.value;
+    return React.createElement(FormControlLabel, {
+      key: id,
+      label: label,
+      value: value,
+      control: React.createElement(Radio, null)
+    });
+  })));
 };
 
-var TimerWidget = function TimerWidget(_ref) {
-  var expires_at = _ref.expires_at,
-      buyLoading = _ref.buyLoading,
-      _ref$onCountdownFinis = _ref.onCountdownFinish,
-      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
+function SelectField(_ref) {
+  var label = _ref.label,
+      isMultiple = _ref.isMultiple,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      setFieldValue = _ref$form.setFieldValue,
+      options = _ref.options,
+      disabled = _ref.disabled,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? _identity : _ref$onChange;
+  var name = field.name,
+      value = field.value;
+  var selectId = "select-field-" + name;
 
-  var _useState = useState(true),
-      showTimer = _useState[0],
-      setShowTimer = _useState[1];
+  var error = _get(errors, name);
 
-  var handleCountdownFinish = function handleCountdownFinish() {
-    setShowTimer(false);
+  var isTouched = Boolean(_get(touched, field.name));
 
-    if (!buyLoading) {
-      onCountdownFinish();
-    }
+  var handleChange = function handleChange(event) {
+    var value = event.target.value;
+    setFieldValue(name, value);
+    onChange(event);
   };
 
-  var _renderer = function renderer(_ref2) {
-    var minutes = _ref2.minutes,
-        seconds = _ref2.seconds,
-        completed = _ref2.completed,
-        handleCountdownFinish = _ref2.handleCountdownFinish;
+  var getSelectedItemLabel = function getSelectedItemLabel(selectedValue) {
+    var selectedItem = options.find(function (option) {
+      return option.value === selectedValue;
+    });
 
-    if (completed) {
-      handleCountdownFinish();
-      return null;
-    }
+    var label = _get(selectedItem, 'label', '');
 
-    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+    return label;
   };
 
-  var hideTimer = function hideTimer() {
-    var timerRl = document.querySelector('.timer');
+  return React.createElement(React.Fragment, null, React.createElement(FormControl, {
+    fullWidth: true,
+    disabled: disabled,
+    error: isTouched && Boolean(error)
+  }, label && React.createElement(InputLabel, {
+    id: selectId
+  }, label), React.createElement(Select, {
+    id: name,
+    labelId: selectId,
+    multiple: isMultiple,
+    value: value,
+    onChange: handleChange,
+    input: React.createElement(OutlinedInput, {
+      label: label
+    }),
+    renderValue: function renderValue(selected) {
+      if (isMultiple) {
+        var selectedLabels = _map(selected, function (selectedValue) {
+          return getSelectedItemLabel(selectedValue);
+        });
 
-    if (timerRl) {
-      timerRl.style.visibility = "hidden";
+        return selectedLabels.join(', ');
+      }
+
+      var selectedLabel = getSelectedItemLabel(selected);
+      return selectedLabel;
+    },
+    sx: {
+      textAlign: 'start'
     }
-  };
+  }, options.map(function (option) {
+    return React.createElement(MenuItem, {
+      key: option.label,
+      value: option.value
+    }, isMultiple && React.createElement(Checkbox, {
+      checked: value.indexOf(option.value) > -1
+    }), React.createElement(ListItemText, {
+      primary: option.label
+    }));
+  })), isTouched && Boolean(error) ? React.createElement(FormHelperText$1, {
+    error: true
+  }, error) : null));
+}
 
-  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
+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
+  },
+  '& .MuiPickersArrowSwitcher-spacer': {
+    width: 0
+  },
+  '& [role="presentation"] .PrivatePickersFadeTransitionGroup-root': {
+    marginRight: -1
+  }
+};
+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,
+      _ref$dateFormat = _ref.dateFormat,
+      dateFormat = _ref$dateFormat === void 0 ? 'DD/MM/YYYY' : _ref$dateFormat,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? 'dd/mm/yyyy' : _ref$placeholder;
+  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: dateFormat,
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: placeholder
+        }),
+        theme: theme,
+        field: _extends({}, field, {
+          onChange: function onChange(evt) {
+            if (params.inputProps && params.inputProps.onChange) {
+              params.inputProps.onChange(evt);
+            }
+          }
+        }),
+        form: form,
+        label: label,
+        type: "tel"
       }));
     }
-  })))) : 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) {
@@ -2900,16 +2939,22 @@ var getInitialValues = function getInitialValues(data, propsInitialValues, userV
     return _map(fields, function (_ref2) {
       var groupItems = _ref2.groupItems;
       return _map(groupItems, function (_ref3) {
-        var name = _ref3.name;
-        return name;
+        var name = _ref3.name,
+            value = _ref3.value;
+        return {
+          name: name,
+          value: value
+        };
       });
     });
   });
 
   var initialValues = {};
 
-  _forEach(results, function (item) {
-    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
+  _forEach(results, function (groupItem) {
+    var name = groupItem.name,
+        value = groupItem.value;
+    initialValues[name] = value || propsInitialValues[name] || userValues[name] || '';
   }); // set logged in user as first ticket holder
 
 
@@ -3078,7 +3123,9 @@ var assingUniqueIds = function assingUniqueIds(data) {
 
   return _map(data, function (item) {
     _forEach(item, function (itemValue, key) {
-      if (_isArray(itemValue)) {
+      if (_isArray(itemValue) && !itemValue.some(function (item) {
+        return typeof item === 'string';
+      })) {
         item[key] = assingUniqueIds(itemValue);
       }
     });
@@ -3088,6 +3135,42 @@ var assingUniqueIds = function assingUniqueIds(data) {
     });
   });
 };
+var isRequiredField = function isRequiredField(element) {
+  var flagRequirePhone = getQueryVariable('phone_required') === 'true';
+  var collectMandatoryWalletAddress = getQueryVariable('collect_mandatory_wallet_address') === 'true';
+  var name = element.name,
+      required = element.required;
+
+  if (required || name === 'phone' && flagRequirePhone || name === 'data_capture[wallet_address]' && !collectMandatoryWalletAddress) {
+    return true;
+  }
+
+  return false;
+};
+var getFieldLabel = function getFieldLabel(element) {
+  if (isRequiredField(element) || React.isValidElement(element.label)) {
+    return element.label;
+  }
+
+  return element.label + " (optional)";
+};
+var getFieldComponent = function getFieldComponent(element) {
+  var type = _get(element, 'type', 'text');
+
+  var fieldComponentConfigs = {
+    checkbox: CheckboxField,
+    select: NativeSelectField,
+    select_multi: SelectField,
+    phone: PhoneNumberField,
+    date: DatePickerField,
+    radio: RadioGroupField,
+    text: CustomField
+  };
+
+  var fieldComponent = _get(fieldComponentConfigs, type, CustomField);
+
+  return fieldComponent;
+};
 
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
@@ -3688,7 +3771,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
       zIndex: 1205
     },
     open: true
-  }, React.createElement(CircularProgress$1, {
+  }, React.createElement(CircularProgress, {
     color: "inherit"
   })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
@@ -3983,29 +4066,24 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
             key: element.uniqueId
           }, React.createElement("div", {
             className: element.className + " " + ((props == null ? void 0 : props.errors[element.name]) || '')
-          }, element.component ? element.component : React.createElement(Field, {
+          }, element.component ? element.component : React.createElement(Field, Object.assign({}, element, {
+            type: element.type === 'radio' ? undefined : element.type,
             setPhoneValidationIsLoading: element.type === 'phone' ? setPhoneValidationIsLoading : undefined,
-            name: element.name,
-            label: element.name === 'phone' ? "" + element.label + (flagRequirePhone ? '' : ' (optional)') + " " : element.name === 'data_capture[wallet_address]' ? "" + element.label + (!collectMandatoryWalletAddress ? ' (optional)' : '') + " " : element.label,
-            type: element.type,
-            fill: element.fill,
+            label: getFieldLabel(element),
             validate: getValidateFunctions(element, states, props.values, props.errors),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? NativeSelectField : element.type === 'phone' ? PhoneNumberField : element.type === 'date' ? DatePickerField : element.type === 'radio' ? RadioGroupField : element.type === 'select_multi' ? SelectField : CustomField,
+            component: getFieldComponent(element),
             selectOptions: element.name === 'country' ? _map(countries, function (item) {
               return {
                 value: item.id,
                 label: item.name
               };
-            }) : element.name === 'state' ? states : [],
-            radios: element.radios,
+            }) : element.name === 'state' ? states : element.selectOptions || [],
             theme: theme,
-            disableDropdown: element.disableDropdown,
             defaultCountry: defaultCountry || element.defaultCountry,
-            dateFormat: element.format,
-            datePlaceholder: element.placeholder
-          })));
+            dateFormat: element.format
+          }))));
         })));
       }));
     }), !_isEmpty(ticketHoldersFields.fields) && React.createElement("div", {
@@ -4028,20 +4106,19 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
           return React.createElement("div", {
             className: element.className,
             key: element.name
-          }, React.createElement(Field, {
+          }, React.createElement(Field, Object.assign({}, element, {
+            type: element.type === 'radio' ? undefined : element.type,
             name: element.name + "-" + index,
-            label: "" + element.label + (element.required ? '' : ' (optional)'),
-            type: element.type,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
+            label: getFieldLabel(element),
+            component: getFieldComponent(element),
             validate: combineValidators(element.required ? requiredValidator : function () {
               return props.errors[element.name + "-" + index];
             }, element.onValidate ? element.onValidate : function () {
               return props.errors[element.name + "-" + index];
             }),
-            disableDropdown: element.disableDropdown,
             setPhoneValidationIsLoading: setPhoneValidationIsLoading,
             defaultCountry: defaultCountry || element.defaultCountry
-          }));
+          })));
         })));
       }));
     })), React.createElement("div", {
@@ -4051,7 +4128,7 @@ var BillingInfoContainer = /*#__PURE__*/React.memo(function (_ref4) {
       variant: "contained",
       className: "login-register-button",
       disabled: props.isSubmitting || phoneValidationIsLoading
-    }, props.isSubmitting ? React.createElement(CircularProgress$1, {
+    }, props.isSubmitting ? React.createElement(CircularProgress, {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
@@ -4444,7 +4521,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress, {
+  }, isLoading ? React.createElement(CircularProgress$1, {
     size: 26
   }) : (paymentButtonText ? paymentButtonText : 'Pay') + " " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -4824,7 +4901,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setPaymentIsLoading(true);
       handlePaymentMiddleWare(null);
     }
-  }, paymentIsLoading ? React.createElement(CircularProgress, {
+  }, paymentIsLoading ? React.createElement(CircularProgress$1, {
     size: 26
   }) : 'Complete Registration')))));
 };
@@ -5303,7 +5380,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     disabled: loading
   }, "Cancel"), React.createElement(Button, {
     onClick: onConfirm
-  }, loading ? React.createElement(CircularProgress, {
+  }, loading ? React.createElement(CircularProgress$1, {
     size: "22px"
   }) : 'OK'))));
 };
@@ -5557,7 +5634,7 @@ var WaitingList = function WaitingList(_ref) {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
-  }, loading ? React.createElement(CircularProgress, {
+  }, loading ? React.createElement(CircularProgress$1, {
     size: "22px"
   }) : 'ADD TO WAITING LIST')))));
 };
@@ -5603,7 +5680,8 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       updateTickets = _ref.updateTickets,
       setCodeIsApplied = _ref.setCodeIsApplied,
       codeIsInvalid = _ref.codeIsInvalid,
-      setCodeIsInvalid = _ref.setCodeIsInvalid;
+      setCodeIsInvalid = _ref.setCodeIsInvalid,
+      promoText = _ref.promoText;
   var isPromoCodeHasValue = !!code.trim();
 
   var renderInputField = function renderInputField() {
@@ -5659,7 +5737,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       setShowPromoInput(true);
       setCodeIsInvalid(false);
     }
-  }, "Got a promo code? Click here"), showPromoInput && renderInputField());
+  }, promoText != null ? promoText : 'Got a promo code? Click here'), showPromoInput && renderInputField());
 };
 
 var ReferralLogic = function ReferralLogic(props) {
@@ -5913,7 +5991,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       handleNotInvitedModalClose = _ref$handleNotInvited === void 0 ? _identity : _ref$handleNotInvited,
       _ref$handleInvalidLin = _ref.handleInvalidLinkModalClose,
       handleInvalidLinkModalClose = _ref$handleInvalidLin === void 0 ? _identity : _ref$handleInvalidLin,
-      ordersPath = _ref.ordersPath;
+      ordersPath = _ref.ordersPath,
+      promoText = _ref.promoText;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
@@ -6455,6 +6534,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setIsInvalidLinkError('');
   };
 
+  var hideTopInfluencers = event == null ? void 0 : event.hideTopInfluencers;
   return React.createElement(ThemeProvider$1, {
     theme: themeMui
   }, !isLoading && React.createElement(ReferralLogic, {
@@ -6525,7 +6605,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setCode: setCode,
     updateTickets: updateTickets,
     codeIsInvalid: codeIsInvalid,
-    setCodeIsInvalid: setCodeIsInvalid
+    setCodeIsInvalid: setCodeIsInvalid,
+    promoText: promoText
   }) : null, wrappedActionsSectionComponent, canShowGetTicketBtn() && React.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
@@ -6547,7 +6628,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, "Log out"))) : ''), showLoginModal ? React.createElement(LoginModal, {
     onClose: handleOnClose,
     onLogin: handleOnLogin
-  }) : null), enableInfluencersSection && influencers.length ? React.createElement("div", {
+  }) : null), enableInfluencersSection && !hideTopInfluencers && influencers.length ? React.createElement("div", {
     className: "event-influencers"
   }, React.createElement("h3", null, React.createElement("span", null, "TOP"), " INFLUENCERS"), React.createElement("ol", {
     className: "influencer-list"
@@ -6774,7 +6855,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     }
   }), loading ? React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
+  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React.createElement(Table, {
@@ -6978,7 +7059,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     }, React.createElement(Button, {
       type: "submit",
       disabled: !(isValid && dirty)
-    }, loading ? React.createElement(CircularProgress, {
+    }, loading ? React.createElement(CircularProgress$1, {
       size: "22px"
     }) : 'Sell Ticket')));
   }))));
@@ -7087,7 +7168,7 @@ var TicketsTable = function TicketsTable(_ref) {
 
             return onClick;
           }()
-        }, ticketIsDownloading ? React.createElement(CircularProgress, {
+        }, ticketIsDownloading ? React.createElement(CircularProgress$1, {
           size: "22px"
         }) : 'Download'));
       }
@@ -7429,7 +7510,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     className: "order-details"
   }, loading ? React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
+  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
@@ -7640,7 +7721,7 @@ var ResetPasswordContainer = function ResetPasswordContainer(_ref) {
     }, React.createElement("button", {
       type: "submit",
       disabled: !(isValid && dirty)
-    }, loading ? React.createElement(CircularProgress$1, {
+    }, loading ? React.createElement(CircularProgress, {
       size: "22px"
     }) : 'Submit')));
   }));
@@ -8354,7 +8435,7 @@ var AddonsContainter = function AddonsContainter(_ref) {
   if (loading) {
     return React.createElement("div", {
       className: classNamePrefix + "_loader"
-    }, React.createElement(CircularProgress$1, {
+    }, React.createElement(CircularProgress, {
       size: 50
     }));
   }