tf-checkout-react 1.0.106 → 1.2.1

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

@@ -1,61 +1,62 @@
-import React, { Component, useState, memo, useRef, useEffect, 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 _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, FormHelperText, InputLabel, Snackbar, Alert, CircularProgress as CircularProgress$1, createTheme as createTheme$1 } from '@mui/material';
-import Modal from '@mui/material/Modal';
-import Box from '@mui/material/Box';
-import _flatMapDeep from 'lodash-es/flatMapDeep';
-import _isArray from 'lodash-es/isArray';
+import _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 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 FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import { useTheme } from '@mui/styles';
-import TextField$1 from '@mui/material/TextField';
-import MuiPhoneNumber from 'material-ui-phone-number';
+import 'material-ui-phone-number';
+import _debounce from 'lodash-es/debounce';
 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';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
 import TablePagination from '@mui/material/TablePagination';
-import Autocomplete from '@mui/material/Autocomplete';
+import TableRow from '@mui/material/TableRow';
 import _has from 'lodash-es/has';
-import { object, string, ref, boolean } from 'yup';
 import Radio from '@mui/material/Radio';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -903,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) {
@@ -998,14 +973,87 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/connect(ErrorFocusInternal);
 
+function getDomain(url, subdomain) {
+  var updatedUrl = url.replace(/(https?:\/\/)?(www.)?/i, '');
+
+  if (!subdomain) {
+    updatedUrl = updatedUrl.split('.');
+    updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join('.');
+  }
+
+  if (updatedUrl.indexOf('/') !== -1) {
+    return updatedUrl.split('/')[0];
+  }
+
+  return updatedUrl;
+}
+
+function setCustomCookie(name, value, days) {
+  if (days === void 0) {
+    days = 5;
+  }
+
+  var expires = '';
+
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = '; expires=' + date.toUTCString();
+  }
+
+  if (typeof window !== 'undefined') {
+    var domain = getDomain(window.location.hostname);
+    document.cookie = name + '=' + (value || '') + expires + '; path=/' + ("; domain=" + domain);
+  }
+}
+function getCookieByName(cname) {
+  if (typeof window === 'undefined') return '';
+  var name = cname + '=';
+  var ca = document.cookie.split(';');
+
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+
+  return '';
+}
+function deleteCookieByName(name) {
+  if (typeof window !== 'undefined') {
+    var domain = getDomain(window.location.hostname);
+    document.cookie = name + '=; Path=/' + ("; domain=" + domain) + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  }
+}
+
 var downloadPDF = function downloadPDF(pdfUrl) {
   if (typeof window === 'undefined') return;
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
   var accessToken = localStorage.getItem('access_token');
-  if (!accessToken) return;
-  fetch(pdfUrl, {
-    headers: {
+  if (!accessToken && !xtfCookie) return;
+  var headers = {};
+
+  if (accessToken) {
+    headers = {
       Authorization: "Bearer " + accessToken
-    }
+    };
+  }
+
+  if (xtfCookie) {
+    headers = {
+      'X-TF-ECOMMERCE': xtfCookie
+    };
+  }
+
+  return fetch(pdfUrl, {
+    headers: headers,
+    credentials: 'include'
   }).then( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(response) {
       var blobValue, fileNameHeader, fileName;
@@ -1018,7 +1066,7 @@ var downloadPDF = function downloadPDF(pdfUrl) {
 
             case 2:
               blobValue = _context.sent;
-              fileNameHeader = response.headers.get("content-disposition") || '';
+              fileNameHeader = response.headers.get('content-disposition') || '';
               fileName = fileNameHeader.split('"')[1];
               return _context.abrupt("return", {
                 blobValue: blobValue,
@@ -1039,7 +1087,11 @@ var downloadPDF = function downloadPDF(pdfUrl) {
   }()).then(function (_ref2) {
     var blobValue = _ref2.blobValue,
         fileName = _ref2.fileName;
-    if (!fileName) return;
+
+    if (!fileName) {
+      throw Error('Something went wrong.');
+    }
+
     var file = new Blob([blobValue], {
       type: 'application/pdf'
     });
@@ -1050,21 +1102,27 @@ var downloadPDF = function downloadPDF(pdfUrl) {
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
+  })["catch"](function (error) {
+    return error;
   });
 };
 
-var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, logedInValues, includeDob) {
+var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, logedInValues, includeDob, userCredentials) {
   if (includeDob === void 0) {
     includeDob = false;
   }
 
+  if (userCredentials === void 0) {
+    userCredentials = {};
+  }
+
   var ticket_holders = [];
-  var first_name = _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || '';
-  var last_name = _get(logedInValues, 'lastName', '') || _get(logedInValues, 'last_name') || '';
+  var first_name = _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || _get(userCredentials, 'firstNameLogged') || '';
+  var last_name = _get(logedInValues, 'lastName') || _get(logedInValues, 'last_name') || _get(userCredentials, 'lastNameLogged') || '';
 
   var phone = _get(logedInValues, 'phone', '');
 
-  var email = _get(logedInValues, 'email', '');
+  var email = _get(logedInValues, 'email') || _get(userCredentials, 'emailLogged') || '';
 
   for (var i = 0; i <= ticketsQuantity - 1; i++) {
     var individualHolder = i ? {
@@ -1102,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'
@@ -1173,20 +1232,41 @@ publicRequest.interceptors.request.use(function (config) {
     config.headers = _updatedHeaders;
   }
 
-  if (CONFIGS.X_SOURCE_ORIGIN) {
+  if (getCookieByName('X-TF-ECOMMERCE')) {
     var _updatedHeaders2 = _extends({}, config.headers, {
-      'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN
+      'X-TF-ECOMMERCE': getCookieByName('X-TF-ECOMMERCE')
     });
 
     config.headers = _updatedHeaders2;
   }
 
+  if (CONFIGS.X_SOURCE_ORIGIN) {
+    var _updatedHeaders3 = _extends({}, config.headers, {
+      'X-Source-Origin': CONFIGS.X_SOURCE_ORIGIN
+    });
+
+    config.headers = _updatedHeaders3;
+  }
+
   if (CONFIGS.BASE_URL) {
     config.baseURL = CONFIGS.BASE_URL + '/api';
   }
 
   return config;
 });
+publicRequest.interceptors.response.use(function (response) {
+  var xtfCookie = _get(response, 'headers.x-tf-ecommerce');
+
+  var url = _get(response, 'config.url');
+
+  var method = _get(response, 'config.method');
+
+  if (xtfCookie && !(url === '/auth' && method === 'delete')) {
+    setCustomCookie('X-TF-ECOMMERCE', xtfCookie);
+  }
+
+  return response;
+});
 
 publicRequest.setGuestToken = function (token) {
   return publicRequest.defaults.headers.common['Authorization-Guest'] = token;
@@ -1226,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;
   });
@@ -1246,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;
 };
@@ -1265,28 +1366,37 @@ var postOnCheckout = function postOnCheckout(data, accessToken) {
   return res;
 };
 var authorize = function authorize(data) {
-  return publicRequest.post("v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
+  return publicRequest.post("/auth?clientId=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
 };
 var register = function register(data) {
   return publicRequest.post('v1/oauth/register-rn', data);
 };
-var getAccessToken = function getAccessToken(data) {
-  return publicRequest.post('v1/oauth/access_token', 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;
@@ -1333,6 +1443,18 @@ var postReferralVisits = function postReferralVisits(eventId, referralId) {
     referrer: "" + referralId
   });
 };
+var logout = function logout() {
+  return publicRequest["delete"]('/auth');
+}; // forgot password
+
+var forgotPassword = function forgotPassword(email) {
+  return publicRequest.post("/auth/restore-password", {
+    email: email
+  });
+};
+var resetPassword = function resetPassword(data) {
+  return publicRequest.post("/auth/reset-password", data);
+};
 var processTicket = function processTicket(hash) {
   return publicRequest.post("v1/ticket/" + hash + "/process/");
 };
@@ -1342,480 +1464,574 @@ var declineInvitation = function declineInvitation(hash) {
 var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
   return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
+var validatePhoneNumber = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(phone) {
+    var response;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+
+          case 2:
+            response = _context.sent;
+            return _context.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
 
-var style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none'
-};
-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$onAuthorizeSucce = _ref.onAuthorizeSuccess,
-      onAuthorizeSuccess = _ref$onAuthorizeSucce === void 0 ? function () {} : _ref$onAuthorizeSucce,
-      _ref$onAuthorizeError = _ref.onAuthorizeError,
-      onAuthorizeError = _ref$onAuthorizeError === void 0 ? function () {} : _ref$onAuthorizeError,
-      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
-      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
-      _ref$modalClassname = _ref.modalClassname,
-      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname;
+  return function validatePhoneNumber(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
-  var _useState = useState(''),
-      error = _useState[0],
-      setError = _useState[1];
+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];
+  }
 
-  var handleForgotPassword = function handleForgotPassword() {
-    if (typeof window !== 'undefined') {
-      window.open(CONFIGS.BASE_URL + "/password-restore/");
+  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 = '';
 
-  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, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, 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;
-                bodyFormData = new FormData();
-                bodyFormData.append('email', email);
-                bodyFormData.append('password', password);
-                _context.next = 7;
-                return authorize(bodyFormData);
-
-              case 7:
-                resAutorize = _context.sent;
-                bodyFormDataToken = new FormData();
-                bodyFormDataToken.append('code', resAutorize.data.data.code);
-                bodyFormDataToken.append('scope', 'profile');
-                bodyFormDataToken.append('grant_type', 'authorization_code');
-                bodyFormDataToken.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-                bodyFormDataToken.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-                resAccessToken = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getAccessToken(bodyFormDataToken);
-
-              case 18:
-                resAccessToken = _context.sent;
-                onAuthorizeSuccess(resAccessToken.data);
-                _context.next = 26;
-                break;
-
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
+  if (!value) {
+    errorMessage = message || 'Required';
+  }
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onAuthorizeError(_context.t0);
-                }
+  return errorMessage;
+};
+var emailValidator = function emailValidator(email) {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
+};
 
-                return _context.abrupt("return");
+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';
 
-              case 26:
-                accessToken = _get(resAccessToken, 'data.access_token');
-                handleSetAccessToken(accessToken);
-                profileResponse = null;
-                _context.prev = 29;
-                _context.next = 32;
-                return getProfileData(accessToken);
+  var error = _get(errors, field.name);
 
-              case 32:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 40;
-                break;
+  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);
+};
 
-              case 36:
-                _context.prev = 36;
-                _context.t1 = _context["catch"](29);
+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"
+      }));
+    }
+  })));
+};
 
-                if (axios.isAxiosError(_context.t1)) {
-                  onGetProfileDataError(_context.t1);
-                }
+var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue"];
+var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
 
-                return _context.abrupt("return");
+  var label = _ref.label,
+      field = _ref.field,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-              case 40:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+  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);
+};
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                  window.localStorage.setItem('access_token', accessToken);
-                  event = new window.CustomEvent('tf-login');
-                  window.document.dispatchEvent(event);
-                }
+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 = '';
+  }
 
-                onLogin();
-                _context.next = 49;
-                break;
+  switch (currency) {
+    case 'GBP':
+      return '£';
 
-              case 46:
-                _context.prev = 46;
-                _context.t2 = _context["catch"](1);
+    case 'EUR':
+      return '€';
 
-                if (axios.isAxiosError(_context.t2)) {
-                  _error = (_context.t2 == null ? void 0 : (_e$response = _context.t2.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
-                  setError(_error);
-                } else if (_context.t2 instanceof Error) {
-                  setError((_context.t2 == null ? void 0 : _context.t2.message) || 'Error');
-                }
+    case 'INR':
+      return '₹';
 
-              case 49:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[1, 46], [15, 22], [29, 36]]);
-      }));
+    case 'JMD':
+      return 'J$';
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+    case 'NZD':
+      return 'NZ$';
 
-      return onSubmit;
-    }()
-  }, function (props) {
-    return React.createElement(Form, {
-      onSubmit: props.handleSubmit
-    }, React.createElement("div", {
-      className: "modal-title"
-    }, "Login"), React.createElement("img", {
-      className: "login-logo-tff",
-      src: "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
-      alt: ""
-    }), 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")), React.createElement("div", {
-      className: 'forgot-password'
-    }, React.createElement("span", {
-      onClick: handleForgotPassword
-    }, "Forgot password?"))));
-  }))));
+    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 RegisterModal = function RegisterModal(_ref) {
-  var onClose = _ref.onClose,
-      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
-      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
-  return React.createElement("div", {
-    style: {
-      display: 'flex',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 10
+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;
+
+  var error = _get(errors, 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));
     }
-  }, React.createElement(Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
-    },
-    onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var firstName, lastName, email, password, confirmPassword, bodyFormData, resRegister, access_token, profileResponse, profileSpecifiedData, profileDataObj;
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                firstName = _ref2.firstName, lastName = _ref2.lastName, email = _ref2.email, password = _ref2.password, confirmPassword = _ref2.confirmPassword;
-                bodyFormData = new FormData();
-                bodyFormData.append('first_name', firstName);
-                bodyFormData.append('last_name', lastName);
-                bodyFormData.append('email', email);
-                bodyFormData.append('password', password);
-                bodyFormData.append('password_confirmation', confirmPassword);
-                bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-                bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-                _context.next = 11;
-                return register(bodyFormData);
 
-              case 11:
-                resRegister = _context.sent;
-                access_token = _get(resRegister, 'data.data.attributes.access_token');
-                handleSetAccessToken(access_token);
-                profileResponse = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getProfileData(access_token);
+    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var message, _setStatus2;
 
-              case 18:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 26;
+      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 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
-                onGetProfileDataError(_context.t0.response);
-                return _context.abrupt("return");
+              _context.next = 4;
+              return validatePhoneNumber(field.value);
 
-              case 26:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+            case 4:
+              setFieldError(field.name, '');
+              _context.next = 11;
+              break;
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                }
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+              setFieldError(field.name, message);
 
-                onClose();
+            case 11:
+              _context.prev = 11;
+              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
+              return _context.finish(11);
 
-              case 30:
-              case "end":
-                return _context.stop();
-            }
+            case 14:
+            case "end":
+              return _context.stop();
           }
-        }, _callee, null, [[15, 22]]);
-      }));
+        }
+      }, _callee, null, [[0, 7, 11, 14]]);
+    }))); // eslint-disable-next-line
+  }, [field.value]);
+  return React.createElement(TextField, Object.assign({}, field, {
+    id: field.name,
+    label: label,
+    type: type,
+    fullWidth: true,
+    error: !!error,
+    helperText: error,
+    value: field.value || ''
+  }));
+};
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+function Loader() {
+  return React.createElement("div", {
+    className: "loader-container"
+  }, React.createElement(CircularProgress, null));
+}
 
-      return onSubmit;
-    }()
-  }, function (props) {
-    return React.createElement(Form, {
-      onSubmit: props.handleSubmit
-    }, React.createElement("div", {
-      className: "register-container"
-    }, React.createElement("div", null, "Create account"), React.createElement("button", {
-      type: "button",
-      onClick: onClose
-    }, "Close"), React.createElement("div", {
-      className: "register-container__twoFields"
-    }, React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: 'firstName',
-      validate: requiredValidator()
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.meta;
-      return React.createElement(TextField, Object.assign({
-        label: 'First Name',
-        type: 'text',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })), React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: 'lastName',
-      validate: requiredValidator()
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.meta;
-      return React.createElement(TextField, Object.assign({
-        label: 'Last Name',
-        type: 'text',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    }))), React.createElement("div", {
-      className: "register-container__singleField"
-    }, React.createElement("div", {
-      className: ""
-    }, React.createElement(Field, {
-      name: 'email',
-      validate: requiredValidator()
-    }, function (_ref5) {
-      var field = _ref5.field,
-          meta = _ref5.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: "register-container__twoFields"
-    }, React.createElement("div", {
-      className: "is-half"
-    }, React.createElement(Field, {
-      name: 'password',
-      validate: requiredValidator()
-    }, function (_ref6) {
-      var field = _ref6.field,
-          meta = _ref6.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: "is-half"
-    }, React.createElement(Field, {
-      name: 'confirmPassword',
-      validate: requiredValidator()
-    }, function (_ref7) {
-      var field = _ref7.field,
-          meta = _ref7.meta;
-      return React.createElement(TextField, Object.assign({
-        label: 'Confirm Passwod',
-        type: 'password',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })))), React.createElement("button", {
-      type: "submit"
-    }, "Submit"));
-  }));
+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));
+
+  var error = _get(errors, field.name);
+
+  var customTheme = useTheme();
+  return React.createElement(FormControl, {
+    fullWidth: true
+  }, React.createElement(InputLabel, {
+    style: customTheme == null ? void 0 : customTheme.input,
+    htmlFor: field.name,
+    error: !!error && isTouched,
+    shrink: true
+  }, 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
+  }), _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 _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
-var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
-  if (data === void 0) {
-    data = [];
-  }
+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)));
+};
 
-  if (propsInitialValues === void 0) {
-    propsInitialValues = {};
-  }
+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;
 
-  if (userValues === void 0) {
-    userValues = {};
-  }
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-  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 onForgotPassword = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+      var email, _yield$forgotPassword, data;
 
-  var initialValues = {};
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              email = _ref2.email;
+              _context.prev = 1;
+              setLoading(true);
+              _context.next = 5;
+              return forgotPassword(email);
 
-  _forEach(results, function (item) {
-    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
-  }); // set logged in user as first ticket holder
+            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);
 
-  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 = {};
-  }
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
+              }
 
-  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');
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
 
-  _forEach(checkoutBody.attributes, function (item, key) {
-    bodyFormData.append(key, item);
-  });
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
 
-  return bodyFormData;
+    return function onForgotPassword(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  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 style$1 = {
+  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 {
@@ -1832,564 +2048,652 @@ var setLoggedUserData = function setLoggedUserData(data) {
     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 = {};
-  }
+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;
 
-  if (logedInValues === void 0) {
-    logedInValues = {};
-  }
+  var _useState = useState(''),
+      error = _useState[0],
+      setError = _useState[1];
 
-  if (includeDob === void 0) {
-    includeDob = false;
-  }
+  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 _values = values,
-      firstName = _values.firstName,
-      lastName = _values.lastName,
-      holderAge = _values.holderAge,
-      restValues = _objectWithoutPropertiesLoose(_values, _excluded);
+        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);
 
-  var holders = [];
-  var ticket_holders = [];
+              case 5:
+                profileResponse = null;
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-  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);
-  };
+              case 9:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 17;
+                break;
 
-  for (var i = 0; i <= ticketsQuantity; i++) {
-    _loop(i);
-  }
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-  var filteredHolders = holders.filter(function (holder) {
-    return Object.entries(holder).length > 0;
-  });
-  ticket_holders = filteredHolders.map(function (item, index) {
-    return {
-      first_name: item["holderFirstName-" + index] || '',
-      last_name: item["holderLastName-" + index] || '',
-      phone: item["holderPhone-" + index] || '',
-      email: item["holderEmail-" + index] || ''
-    };
-  });
-  var filteredRestValue = {};
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
+                }
 
-  _forEach(restValues, function (value, key) {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value;
-    }
-  });
+                return _context.abrupt("return");
 
-  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
-    })
-  };
+              case 17:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
+                profileDataObj = setLoggedUserData(profileSpecifiedData);
+
+                if (typeof window !== 'undefined') {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
+                }
 
-  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();
-  }
+                onLogin();
+                _context.next = 26;
+                break;
 
-  return body;
-};
-var getValidateFunctions = function getValidateFunctions(element, states, values) {
-  var validationFunctions = [];
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
 
-  if (element.required) {
-    if (element.name !== 'state' || element.name === 'state' && states.length) {
-      validationFunctions.push(requiredValidator);
-    }
-  }
+                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');
+                }
 
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate);
-  }
+              case 26:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[1, 23], [6, 13]]);
+      }));
 
-  if (element.name === 'confirmEmail') {
-    var isSameEmail = function isSameEmail(confirmEmail) {
-      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
-    };
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
 
-    validationFunctions.push(isSameEmail);
-  }
+      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"))));
+  }))));
+};
 
-  return combineValidators.apply(void 0, validationFunctions);
+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 assingUniqueIds = function assingUniqueIds(data) {
-  if (_get(data[0], 'uniqueId')) {
-    return data;
-  }
+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;
 
-  return _map(data, function (item) {
-    _forEach(item, function (itemValue, key) {
-      if (_isArray(itemValue)) {
-        item[key] = assingUniqueIds(itemValue);
-      }
-    });
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-    return _extends({}, item, {
-      uniqueId: nanoid()
-    });
-  });
-};
+  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);
 
-var _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
-var CheckboxField = function CheckboxField(_ref) {
-  var _rest$form, _field$name, _rest$form2, _field$name2;
+            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;
 
-  var label = _ref.label,
-      field = _ref.field,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
-  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);
-};
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
 
-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';
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
 
-  var error = _get(errors, field.name);
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
 
-  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({
-    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
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  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: ''
     },
-    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);
+    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 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 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 getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
-  if (currency === void 0) {
-    currency = '';
+
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
   }
 
-  switch (currency) {
-    case 'GBP':
-      return '£';
+  var image = '';
 
-    case 'EUR':
-      return '€';
+  if (!name.trim().length) {
+    return image;
+  }
 
-    case 'INR':
-      return '₹';
+  if (process.env.NODE_ENV === 'production') {
+    image = require("./images/" + name);
+    return image["default"];
+  }
 
-    case 'JMD':
-      return 'J$';
+  return image;
+};
 
-    case 'NZD':
-      return 'NZ$';
+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;
 
-    case 'MYR':
-      return 'RM';
+  var _useState = useState(true),
+      showTimer = _useState[0],
+      setShowTimer = _useState[1];
 
-    case 'MXN':
-      return 'Mex$';
+  var handleCountdownFinish = function handleCountdownFinish() {
+    setShowTimer(false);
 
-    case 'SGD':
-      return 'S$';
+    if (!buyLoading) {
+      onCountdownFinish();
+    }
+  };
 
-    case 'AUD':
-      return 'A$';
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+        seconds = _ref2.seconds,
+        completed = _ref2.completed,
+        handleCountdownFinish = _ref2.handleCountdownFinish;
 
-    case 'ZAR':
-      return 'R';
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
 
-    case 'ke':
-      return 'Ksh';
+    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
 
-    case 'TRY':
-      return '₺';
+  var hideTimer = function hideTimer() {
+    var timerRl = document.querySelector('.timer');
 
-    case 'CAD':
-      return 'CA$';
+    if (timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  };
 
-    case 'THB':
-      return '฿';
+  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;
+};
 
-    case 'ISK':
-      return 'Kr';
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
 
-    case 'SEK':
-      return 'kr';
+var _excluded$1 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
+  if (data === void 0) {
+    data = [];
+  }
 
-    default:
-      return 'US$';
+  if (propsInitialValues === void 0) {
+    propsInitialValues = {};
   }
-};
-var removePlusSign = function removePlusSign(string) {
-  if (string === void 0) {
-    string = '';
+
+  if (userValues === void 0) {
+    userValues = {};
   }
 
-  return string.replace('+', '');
-};
+  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 _excluded$2 = ["label", "field", "form", "setFieldValue", "selectOptions"];
-var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref.setFieldValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var initialValues = {};
 
-  var error = _get(errors, field.name);
+  _forEach(results, function (item) {
+    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
+  }); // set logged in user as first ticket holder
 
-  var isTouched = Boolean(_get(touched, field.name));
-  var customTheme = useTheme();
-  return React.createElement(MuiPhoneNumber, Object.assign({
-    name: 'phone',
-    value: initialValues.phone,
-    onChange: function onChange(e) {
-      return setFieldValue("phone", removePlusSign(e));
-    },
-    variant: "outlined",
-    defaultCountry: 'us',
-    disableDropdown: true,
-    label: label,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    fullWidth: true,
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    autoFormat: false
-  }, rest));
-};
 
-function Loader() {
-  return React.createElement("div", {
-    className: "loader-container"
-  }, React.createElement(CircularProgress, null));
-}
+  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 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));
+  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');
 
-  var error = _get(errors, field.name);
+  _forEach(checkoutBody.attributes, function (item, key) {
+    bodyFormData.append(key, item);
+  });
 
-  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
-  }), _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);
+  return bodyFormData;
 };
-
-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 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 getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
+var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
+  if (values === void 0) {
+    values = {};
   }
 
-  var image = '';
-
-  if (!name.trim().length) {
-    return image;
+  if (logedInValues === void 0) {
+    logedInValues = {};
   }
 
-  if (process.env.NODE_ENV === 'production') {
-    image = require("./images/" + name);
-    return image["default"];
+  if (includeDob === void 0) {
+    includeDob = false;
   }
 
-  return image;
-};
-
-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;
-
-  var _useState = useState(true),
-      showTimer = _useState[0],
-      setShowTimer = _useState[1];
+  var _values = values,
+      firstName = _values.firstName,
+      lastName = _values.lastName,
+      holderAge = _values.holderAge,
+      restValues = _objectWithoutPropertiesLoose(_values, _excluded$1);
 
-  var handleCountdownFinish = function handleCountdownFinish() {
-    setShowTimer(false);
+  var holders = [];
+  var ticket_holders = [];
 
-    if (!buyLoading) {
-      onCountdownFinish();
-    }
+  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);
   };
 
-  var _renderer = function renderer(_ref2) {
-    var minutes = _ref2.minutes,
-        seconds = _ref2.seconds,
-        completed = _ref2.completed,
-        handleCountdownFinish = _ref2.handleCountdownFinish;
+  for (var i = 0; i <= ticketsQuantity; i++) {
+    _loop(i);
+  }
 
-    if (completed) {
-      handleCountdownFinish();
-      return null;
+  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;
     }
+  });
 
-    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  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
+    })
   };
 
-  var hideTimer = function hideTimer() {
-    var timerRl = document.querySelector('.timer');
+  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();
+  }
 
-    if (timerRl) {
-      timerRl.style.visibility = "hidden";
-    }
-  };
+  return body;
+};
+var getValidateFunctions = function getValidateFunctions(element, states, values) {
+  var validationFunctions = [];
 
-  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
-      }));
+  if (element.required) {
+    if (element.name !== 'state' || element.name === 'state' && states.length) {
+      validationFunctions.push(requiredValidator);
     }
-  })))) : null;
-};
+  }
 
-var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
 
-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)));
-};
+  if (element.name === 'confirmEmail') {
+    var isSameEmail = function isSameEmail(confirmEmail) {
+      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : 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
+    validationFunctions.push(isSameEmail);
+  }
+
+  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) {
@@ -2399,7 +2703,8 @@ var LogicRunner = function LogicRunner(_ref) {
       setValues = _ref.setValues,
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
-      onGetStatesError = _ref.onGetStatesError;
+      onGetStatesError = _ref.onGetStatesError,
+      shouldFetchCountries = _ref.shouldFetchCountries;
   var prevCountry = useRef(values.country);
   useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
@@ -2454,7 +2759,7 @@ var LogicRunner = function LogicRunner(_ref) {
       };
     }();
 
-    fetchStates();
+    shouldFetchCountries && fetchStates();
   }, [values.country, setStates, setFieldValue]);
   var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
   useEffect(function () {
@@ -2465,8 +2770,8 @@ var LogicRunner = function LogicRunner(_ref) {
           try {
             var parsedData = JSON.parse(userDataEncoded);
             var mappedValues = {
-              firstName: (parsedData == null ? void 0 : parsedData.first_name) || '',
-              lastName: (parsedData == null ? void 0 : parsedData.last_name) || '',
+              firstName: (parsedData == null ? void 0 : parsedData.first_name) || (parsedData == null ? void 0 : parsedData.firstName) || '',
+              lastName: (parsedData == null ? void 0 : parsedData.last_name) || (parsedData == null ? void 0 : parsedData.lastName) || '',
               email: (parsedData == null ? void 0 : parsedData.email) || '',
               phone: (parsedData == null ? void 0 : parsedData.phone) || '',
               confirmEmail: (parsedData == null ? void 0 : parsedData.email) || '',
@@ -2474,15 +2779,15 @@ var LogicRunner = function LogicRunner(_ref) {
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
               country: (parsedData == null ? void 0 : parsedData.country) || '1',
               zip: (parsedData == null ? void 0 : parsedData.zip) || '',
-              brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || '',
+              brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || false,
               city: (parsedData == null ? void 0 : parsedData.city) || '',
               confirmPassword: '',
               password: '',
-              'holderFirstName-0': (parsedData == null ? void 0 : parsedData.first_name) || '',
-              'holderLastName-0': (parsedData == null ? void 0 : parsedData.last_name) || '',
+              'holderFirstName-0': (parsedData == null ? void 0 : parsedData.first_name) || (parsedData == null ? void 0 : parsedData.firstName) || '',
+              'holderLastName-0': (parsedData == null ? void 0 : parsedData.last_name) || (parsedData == null ? void 0 : parsedData.lastName) || '',
               'holderEmail-0': (parsedData == null ? void 0 : parsedData.email) || ''
             };
-            setValues(mappedValues);
+            setValues(_extends({}, values, mappedValues));
             setUserValues(mappedValues);
           } catch (e) {}
         }
@@ -2555,10 +2860,21 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       skipPage = _ref3$skipPage === void 0 ? false : _ref3$skipPage,
       _ref3$canSkipHolderNa = _ref3.canSkipHolderNames,
       canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa,
+      _ref3$onForgotPasswor = _ref3.onForgotPasswordSuccess,
+      onForgotPasswordSuccess = _ref3$onForgotPasswor === void 0 ? function () {} : _ref3$onForgotPasswor,
+      _ref3$onForgotPasswor2 = _ref3.onForgotPasswordError,
+      onForgotPasswordError = _ref3$onForgotPasswor2 === void 0 ? function () {} : _ref3$onForgotPasswor2,
+      _ref3$shouldFetchCoun = _ref3.shouldFetchCountries,
+      shouldFetchCountries = _ref3$shouldFetchCoun === void 0 ? true : _ref3$shouldFetchCoun,
       _ref3$onCountdownFini = _ref3.onCountdownFinish,
       onCountdownFinish = _ref3$onCountdownFini === void 0 ? function () {} : _ref3$onCountdownFini,
       _ref3$enableTimer = _ref3.enableTimer,
-      enableTimer = _ref3$enableTimer === void 0 ? false : _ref3$enableTimer;
+      enableTimer = _ref3$enableTimer === void 0 ? false : _ref3$enableTimer,
+      logo = _ref3.logo,
+      _ref3$showForgotPassw = _ref3.showForgotPasswordButton,
+      showForgotPasswordButton = _ref3$showForgotPassw === void 0 ? false : _ref3$showForgotPassw,
+      _ref3$showSignUpButto = _ref3.showSignUpButton,
+      showSignUpButton = _ref3$showSignUpButto === void 0 ? false : _ref3$showSignUpButto;
 
   var themeMui = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2569,7 +2885,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       dataWithUniqueIds = _useState[0],
       setDataWithUniqueIds = _useState[1];
 
-  var _useState2 = useState(!!access_token),
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
+
+  var _useState2 = useState(!!(pIsLoggedIn || xtfCookie)),
       isLoggedIn = _useState2[0],
       setIsLoggedIn = _useState2[1];
 
@@ -2598,14 +2916,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setUserExpired = _useState8[1];
 
   var _useState9 = useState(false),
-      showModalRegister = _useState9[0],
-      setShowModalRegister = _useState9[1];
+      showModalSignup = _useState9[0],
+      setShowModalSignup = _useState9[1];
+
+  var _useState10 = useState(false),
+      showModalForgotPassword = _useState10[0],
+      setShowModalForgotPassword = _useState10[1];
 
-  var _useState10 = useState([]),
-      ticketsQuantity = _useState10[0],
-      setTicketsQuantity = _useState10[1];
+  var _useState11 = useState([]),
+      ticketsQuantity = _useState11[0],
+      setTicketsQuantity = _useState11[1];
 
-  var _useState11 = useState({
+  var _useState12 = useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2620,16 +2942,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     state: '',
     zip: ''
   }),
-      userValues = _useState11[0],
-      setUserValues = _useState11[1];
+      userValues = _useState12[0],
+      setUserValues = _useState12[1];
 
-  var _useState12 = useState(true),
-      loading = _useState12[0],
-      setLoading = _useState12[1];
+  var _useState13 = useState(true),
+      loading = _useState13[0],
+      setLoading = _useState13[1];
 
-  var _useState13 = useState(null),
-      error = _useState13[0],
-      setError = _useState13[1];
+  var _useState14 = useState(null),
+      error = _useState14[0],
+      setError = _useState14[1];
 
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
 
@@ -2679,10 +3001,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   };
 
   useEffect(function () {
-    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
-      setIsLoggedIn(true);
+    if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
+      setIsLoggedIn(!!(pIsLoggedIn || xtfCookie));
     }
-  }, [pIsLoggedIn, isLoggedIn, access_token]); //just once
+  }, [pIsLoggedIn, isLoggedIn, xtfCookie]); //just once
 
   useEffect(function () {
     // fetch countries data
@@ -2731,7 +3053,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       };
     }();
 
-    fetchCountries();
+    shouldFetchCountries && fetchCountries();
     fetchCart();
   }, []); // fetch cart data
 
@@ -2791,7 +3113,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(isWindowDefined && token)) {
+              if (!(isWindowDefined && token || isLoggedIn)) {
                 _context4.next = 10;
                 break;
               }
@@ -2802,7 +3124,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 4:
               userDataResponse = _context4.sent;
               profileSpecifiedData = _get(userDataResponse, 'data.data');
-              profileDataObj = setLoggedUserData(profileSpecifiedData);
+              profileDataObj = setLoggedUserData$1(profileSpecifiedData);
               setUserValues(_extends({}, profileDataObj, {
                 firstName: profileDataObj.first_name,
                 lastName: profileDataObj.last_name
@@ -2838,7 +3160,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   useEffect(function () {
     fetchUserData(access_token);
-  }, [access_token]);
+  }, [access_token, isLoggedIn]);
   useEffect(function () {
     var collectPaymentData = /*#__PURE__*/function () {
       var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5() {
@@ -2894,16 +3216,20 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     collectPaymentData();
   }, [skipPage, ticketsQuantity]);
 
-  var collectCheckoutBody = function collectCheckoutBody(values) {
+  var collectCheckoutBody = function collectCheckoutBody(values, profileData) {
     var checkoutBody = {}; // Auto collect ticket holders name when it was skipped optionally
 
     if (showDOB && !showTicketHolders && canSkipHolderNames) {
-      checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity.length, values, true);
-    } else {
-      checkoutBody = createCheckoutDataBody(ticketsQuantity.length, values, {
+      checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity.length, values, true, {
         emailLogged: emailLogged,
         firstNameLogged: firstNameLogged,
         lastNameLogged: lastNameLogged
+      });
+    } else {
+      checkoutBody = createCheckoutDataBody(ticketsQuantity.length, values, {
+        emailLogged: emailLogged || profileData.email,
+        firstNameLogged: firstNameLogged || profileData.first_name || profileData.firstName,
+        lastNameLogged: lastNameLogged || profileData.last_name || profileData.lastName
       }, showDOB);
     }
 
@@ -2912,28 +3238,27 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var removeReferralKey = function removeReferralKey() {
     localStorage.removeItem('referral_key');
-  }; // Displaying loader
-
+  };
 
   if (loading || enableTimer && !expirationTime && typeof window !== 'undefined') {
     if (expirationTime === 0) {
       // Redirect to homepage (countdown finished and browser reloaded case)
       window.location.href = '/';
     }
-
-    return React.createElement(Backdrop, {
-      sx: {
-        color: '#fff'
-      },
-      open: true
-    }, React.createElement(CircularProgress$1, {
-      color: "inherit"
-    }));
   }
 
   return React.createElement(ThemeProvider, {
     theme: themeMui
-  }, !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
+  }, loading && React.createElement(Backdrop, {
+    sx: {
+      color: '#fff',
+      backgroundColor: '#000000bd',
+      zIndex: 1205
+    },
+    open: true
+  }, React.createElement(CircularProgress$1, {
+    color: "inherit"
+  })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
   }), React.createElement(Formik, {
@@ -2943,10 +3268,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       brand_opt_in: optedInFieldValue,
       ttf_opt_in: ttfOptIn
     }), userValues),
-    enableReinitialize: true,
+    enableReinitialize: false,
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee6(values, formikHelpers) {
-        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, checkoutBodyForRegistration, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, _error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2, _e$response3;
+        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, checkoutBodyForRegistration, bodyFormData, resRegister, _xtfCookie, accessToken, refreshToken, userProfile, _e$response, _e$response$data, _error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2, _e$response3;
 
         return runtime_1.wrap(function _callee6$(_context6) {
           while (1) {
@@ -2970,14 +3295,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
               case 5:
                 updatedUserData = _context6.sent;
                 _profileSpecifiedData = _get(updatedUserData, 'data.data');
-                _profileDataObj = setLoggedUserData(_profileSpecifiedData);
+                _profileDataObj = setLoggedUserData$1(_profileSpecifiedData);
 
                 if (isWindowDefined) {
                   window.localStorage.setItem('user_data', JSON.stringify(_profileDataObj));
                 }
 
               case 9:
-                _checkoutBody = collectCheckoutBody(values);
+                _checkoutBody = collectCheckoutBody(values, userData);
                 _context6.next = 12;
                 return postOnCheckout(_checkoutBody, access_token);
 
@@ -2994,27 +3319,30 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   lastNameLogged: lastNameLogged
                 }, showDOB);
                 bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
-                access_token_register = null;
-                _context6.prev = 19;
+                _context6.prev = 18;
+                setLoading(true);
                 _context6.next = 22;
                 return register(bodyFormData);
 
               case 22:
                 resRegister = _context6.sent;
-                access_token_register = _get(resRegister, 'data.data.attributes.access_token');
+                _xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce');
+                accessToken = _get(resRegister, 'data.data.attributes.access_token');
                 refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
-                handleSetAccessToken(access_token_register);
-                tokens = {
-                  accessToken: access_token_register,
-                  refreshToken: refreshToken
-                };
-                onRegisterSuccess(tokens);
-                _context6.next = 34;
+                userProfile = _get(resRegister, 'data.data.attributes.user_profile');
+                onRegisterSuccess({
+                  xtfCookie: _xtfCookie,
+                  accessToken: accessToken,
+                  refreshToken: refreshToken,
+                  userProfile: userProfile
+                });
+                _context6.next = 35;
                 break;
 
               case 30:
                 _context6.prev = 30;
-                _context6.t0 = _context6["catch"](19);
+                _context6.t0 = _context6["catch"](18);
+                setLoading(false);
 
                 if (axios.isAxiosError(_context6.t0)) {
                   _error = _context6.t0 == null ? void 0 : (_e$response = _context6.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
@@ -3043,33 +3371,34 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
                 return _context6.abrupt("return");
 
-              case 34:
-                _context6.next = 36;
-                return getProfileData(access_token_register);
+              case 35:
+                _context6.next = 37;
+                return getProfileData();
 
-              case 36:
+              case 37:
                 profileData = _context6.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
-                profileDataObj = setLoggedUserData(profileSpecifiedData);
+                profileDataObj = setLoggedUserData$1(profileSpecifiedData);
 
                 if (isWindowDefined) {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
-                checkoutBody = collectCheckoutBody(values);
-                _context6.next = 43;
-                return postOnCheckout(checkoutBody, access_token_register);
+                checkoutBody = collectCheckoutBody(values, profileDataObj);
+                _context6.next = 44;
+                return postOnCheckout(checkoutBody);
 
-              case 43:
+              case 44:
                 res = _context6.sent;
                 removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context6.next = 51;
+                _context6.next = 53;
                 break;
 
-              case 48:
-                _context6.prev = 48;
+              case 49:
+                _context6.prev = 49;
                 _context6.t1 = _context6["catch"](0);
+                setLoading(false);
 
                 if (axios.isAxiosError(_context6.t1)) {
                   if (((_e$response2 = _context6.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
@@ -3088,12 +3417,17 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   onSubmitError(_context6.t1);
                 }
 
-              case 51:
+              case 53:
+                _context6.prev = 53;
+                setLoading(false);
+                return _context6.finish(53);
+
+              case 56:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, null, [[0, 48], [19, 30]]);
+        }, _callee6, null, [[0, 49, 53, 56], [18, 30]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -3112,7 +3446,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setValues: props.setValues,
       setUserValues: setUserValues,
       onGetStatesSuccess: onGetStatesSuccess,
-      onGetStatesError: onGetStatesError
+      onGetStatesError: onGetStatesError,
+      shouldFetchCountries: shouldFetchCountries
     }), React.createElement("div", {
       className: "billing-info-container " + theme
     }, React.createElement(SnackbarAlert, {
@@ -3125,8 +3460,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }
     }), !isLoggedIn && React.createElement("div", {
       className: "account-actions-block"
-    }, React.createElement("div", null, accountInfoTitle), React.createElement("div", null, "Login & skip ahead:"), React.createElement("div", {
-      className: "login-block"
+    }, React.createElement("div", {
+      className: "action-item"
+    }, React.createElement("div", null, accountInfoTitle), React.createElement("div", null, "Login & skip ahead:")), React.createElement("div", {
+      className: "action-item login-block"
     }, React.createElement("button", {
       className: "login-register-button",
       type: "button",
@@ -3184,7 +3521,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             validate: getValidateFunctions(element, states, props.values),
             setFieldValue: props.setFieldValue,
             onBlur: props.handleBlur,
-            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
+            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
           })));
@@ -3192,7 +3529,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     }), !_isEmpty(ticketHoldersFields.fields) && React.createElement("div", {
       className: "ticket-holders-fields"
-    }, React.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
+    }, React.createElement("h2", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React.createElement("div", {
         key: _item
       }, React.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
@@ -3211,7 +3548,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             label: element.label,
             type: element.type,
             required: true,
-            component: element.type === 'checkbox' ? CheckboxField : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
             validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {})
           }));
         })));
@@ -3227,6 +3564,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
+    logo: logo,
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -3244,20 +3582,37 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
       _onGetProfileDataSuccess(data);
     },
-    onGetProfileDataError: onGetProfileDataError
-  }), showModalRegister && React.createElement(RegisterModal, {
+    onGetProfileDataError: onGetProfileDataError,
+    showSignUpButton: showSignUpButton,
+    showForgotPasswordButton: showForgotPasswordButton,
+    onForgotPassword: function onForgotPassword() {
+      setShowModalLogin(false);
+      setShowModalForgotPassword(true);
+    },
+    onSignup: function onSignup() {
+      setShowModalLogin(false);
+      setShowModalSignup(true);
+    }
+  }), showModalSignup && React.createElement(SignupModal, {
     onClose: function onClose() {
-      setShowModalRegister(false);
+      setShowModalSignup(false);
     },
-    onRegister: function onRegister() {
-      setShowModalRegister(false);
+    onLogin: function onLogin() {
+      setShowModalSignup(false);
+      setShowModalLogin(true);
     },
-    onGetProfileDataSuccess: function onGetProfileDataSuccess(data) {
-      fetchCart();
-
-      _onGetProfileDataSuccess(data);
+    onRegisterSuccess: onRegisterSuccess,
+    onRegisterError: onRegisterError
+  }), showModalForgotPassword && React.createElement(ForgotPasswordModal, {
+    onClose: function onClose() {
+      setShowModalForgotPassword(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalForgotPassword(false);
+      setShowModalLogin(true);
     },
-    onGetProfileDataError: onGetProfileDataError
+    onForgotPasswordSuccess: onForgotPasswordSuccess,
+    onForgotPasswordError: onForgotPasswordError
   }));
 };
 
@@ -3476,7 +3831,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onSubmit: handleSubmit
   }, React.createElement("div", {
     className: "card_form_inner"
-  }, React.createElement("label", {
+  }, React.createElement("div", {
     className: "card_number_element"
   }, React.createElement("span", {
     className: "card_label_text"
@@ -3486,19 +3841,21 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onChange: _identity,
     onBlur: _identity,
     onFocus: _identity
-  })), React.createElement("label", {
+  })), React.createElement("div", {
+    className: "elements"
+  }, React.createElement("div", {
     className: "expiration_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React.createElement(CardExpiryElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), React.createElement("label", {
+  })), React.createElement("div", {
     className: "cvc_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React.createElement(CardCvcElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), !disableZipSection && React.createElement("label", {
+  }))), !disableZipSection && React.createElement("div", {
     className: "zip_element"
   }, React.createElement("p", {
     className: "card_label_text"
@@ -3588,7 +3945,9 @@ var PaymentContainer = function PaymentContainer(_ref) {
       _ref$onCountdownFinis = _ref.onCountdownFinish,
       onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis,
       _ref$enableTimer = _ref.enableTimer,
-      enableTimer = _ref$enableTimer === void 0 ? false : _ref$enableTimer;
+      enableTimer = _ref$enableTimer === void 0 ? false : _ref$enableTimer,
+      _ref$enablePaymentPla = _ref.enablePaymentPlan,
+      enablePaymentPlan = _ref$enablePaymentPla === void 0 ? false : _ref$enablePaymentPla;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3603,16 +3962,20 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setError = _useState3[1];
 
   var _useState4 = useState(false),
-      paymentIsLoading = _useState4[0],
-      setPaymentIsLoading = _useState4[1];
+      showPaymentPlanSection = _useState4[0],
+      setShowPaymentPlanSection = _useState4[1];
+
+  var _useState5 = useState(false),
+      paymentIsLoading = _useState5[0],
+      setPaymentIsLoading = _useState5[1];
 
-  var _useState5 = useState(true),
-      paymentDataIsLoading = _useState5[0],
-      setPaymentDataIsLoading = _useState5[1];
+  var _useState6 = useState(true),
+      paymentDataIsLoading = _useState6[0],
+      setPaymentDataIsLoading = _useState6[1];
 
-  var _useState6 = useState([]),
-      conditions = _useState6[0],
-      setConditions = _useState6[1];
+  var _useState7 = useState([]),
+      conditions = _useState7[0],
+      setConditions = _useState7[1];
 
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
@@ -3739,7 +4102,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
             case 3:
               order_hash = reviewData.order_details.order_hash;
 
-              if (!(total === "0.00")) {
+              if (!(total === '0.00')) {
                 _context3.next = 10;
                 break;
               }
@@ -3824,11 +4187,33 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }, label), React.createElement("div", {
       className: className + " order_info_text"
     }, normalizer(orderData[id], orderData.currency)));
-  })), total !== "0.00" ? React.createElement("div", {
+  })), enablePaymentPlan && React.createElement("div", {
+    className: "payment_toggle"
+  }, React.createElement("label", {
+    htmlFor: "togBtn",
+    className: "switch"
+  }, React.createElement("input", {
+    type: "checkbox",
+    id: "togBtn",
+    disabled: true,
+    onChange: function onChange() {
+      return setShowPaymentPlanSection(!showPaymentPlanSection);
+    }
+  }), React.createElement("div", {
+    className: "slider round"
+  }), React.createElement("span", {
+    className: "tog_text"
+  }, "Click to checkout using Payment Plan"))), showPaymentPlanSection && React.createElement("div", {
+    className: "payment_plan"
+  }, React.createElement("h2", null, "PAYMENT PLAN"), React.createElement("div", {
+    className: "plan_block"
+  }, React.createElement("h3", null, "Mbrand Payment Plan Terms"), React.createElement("p", null, "By clicking on the \u201CConfirm Payment Plan\u201D button, you are starting your payment plan of 2 payments of $115.00, which will be drawn from your account every 2 weeks, with the first payment taken later today."), React.createElement("p", null, "This includes a non-refundable admin fee of $3.00 per payment."), React.createElement("p", {
+    className: "payment_note"
+  }, "NOTE: If today\u2019s payment fails, your payment plan will not activate, and your tickets will not be issued until you complete your final payment."), React.createElement("p", null, "If you do not complete your payements, your order will be canceled. Your first payment of $115.00, plus the non-refundable admin fee of $3.00 will not be refunded."), React.createElement("p", null, "Your payment will proceed with the card ending in **** 4242."))), total !== '0.00' ? React.createElement("div", {
     className: "payment_info"
   }, React.createElement("div", {
     className: "payment_info_label"
-  }, "Please provide your payment information"), showErrorText && React.createElement("p", {
+  }, "ORDER CONFIRMATION"), showErrorText && React.createElement("p", {
     className: "payment_info__error"
   }, errorText), React.createElement("div", null, React.createElement(Elements, {
     stripe: getStripePromise(reviewData),
@@ -3858,7 +4243,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
   }, paymentIsLoading ? React.createElement(CircularProgress, {
     size: 26
-  }) : "Complete Registration")))));
+  }) : 'Complete Registration')))));
 };
 
 var config = {
@@ -4022,7 +4407,9 @@ var SocialButtons = function SocialButtons(_ref2) {
 };
 
 var ConfirmationContainer = function ConfirmationContainer(_ref) {
-  var isReferralEnabled = _ref.isReferralEnabled,
+  var _ref$hasCopyIcon = _ref.hasCopyIcon,
+      hasCopyIcon = _ref$hasCopyIcon === void 0 ? true : _ref$hasCopyIcon,
+      isReferralEnabled = _ref.isReferralEnabled,
       showDefaultShareButtons = _ref.showDefaultShareButtons,
       _ref$messengerAppId = _ref.messengerAppId,
       messengerAppId = _ref$messengerAppId === void 0 ? '' : _ref$messengerAppId,
@@ -4121,7 +4508,16 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
 
   return React.createElement("div", {
     className: "confirmation-page"
-  }, data && React.createElement(React.Fragment, null, React.createElement("p", {
+  }, data && React.createElement(React.Fragment, null, React.createElement("div", {
+    className: 'header-container'
+  }, React.createElement("div", {
+    className: 'header-product-image'
+  }, React.createElement("img", {
+    className: 'product-image',
+    src: data.product_image
+  })), React.createElement("div", {
+    className: "header-product-text"
+  }, React.createElement("p", {
     className: "title"
   }, "Your Tickets are Confirmed!"), React.createElement("div", {
     className: "share-message-section"
@@ -4129,7 +4525,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "main"
   }, "Your tickets have been emailed to you"), React.createElement("span", {
     className: "helper"
-  }, "Please bring them with you to the event")), data.disable_referral === false && isReferralEnabled && React.createElement(React.Fragment, null, React.createElement("div", {
+  }, "Please bring them with you to the event")))), data.disable_referral === false && isReferralEnabled && React.createElement(React.Fragment, null, React.createElement("div", {
     className: "referral_text_image_section"
   }, React.createElement("div", {
     className: "referral_text_section"
@@ -4146,6 +4542,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, " Invite friends "), "and we'll refund up to", React.createElement("span", {
     className: "strong-text"
   }, " 100% "), "of your ticket money, if they buy tickets as well!")), React.createElement("img", {
+    className: 'body-product-image',
     src: data.product_image,
     alt: "No Data"
   })), React.createElement("div", {
@@ -4175,10 +4572,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       navigator.clipboard.writeText(_get(inputRef, 'current.value'));
       onLinkCopied();
     }
-  }, React.createElement("img", {
+  }, hasCopyIcon ? React.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
     alt: "copy"
-  })))), (showDefaultShareButtons || !!shareButtons.length) && React.createElement(SocialButtons, {
+  }) : React.createElement("span", {
+    className: 'copy-icon'
+  }, "Copy")))), (showDefaultShareButtons || !!shareButtons.length) && React.createElement(SocialButtons, {
     showDefaultShareButtons: showDefaultShareButtons,
     name: data.product_name,
     appId: messengerAppId,
@@ -4202,141 +4601,93 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }))))));
 };
 
-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 isTimeExpired = function isTimeExpired(startDate, timezone) {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
 };
 
-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 = isSalesClosed ? ticketsClosedMessage : 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, {
-      key: index,
-      value: option.value
-    }, option.value);
-  })))));
-  var returnValue = '';
+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;
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage;
-  }
+  var _useState = useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
 
-  if (ticketTier.displayTicket) {
-    returnValue = onSaleContent;
-  }
+  var _useState2 = useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
 
-  if (_get(prevTicketTier, 'in_stock')) {
-    returnValue = 'SOON';
-  }
+  useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  useEffect(function () {
+    var timer;
 
-  return React.createElement(React.Fragment, null, returnValue, " ");
-};
+    if (!timeExpired) {
+      timer = setInterval(function () {
+        if (isTimeExpired(startDate, timezone)) {
+          clearInterval(timer);
+          setTimeExpired(true);
+          callback();
+          return;
+        }
 
-var TicketsSection = function TicketsSection(_ref) {
-  var ticketsList = _ref.ticketsList,
-      selectedTickets = _ref.selectedTickets,
-      handleTicketSelect = _ref.handleTicketSelect,
-      codeIsApplied = _ref.codeIsApplied,
-      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 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 = '';
 
-    var ticketSelect = function ticketSelect(event) {
-      var value = event.target.value;
-      handleTicketSelect(ticket.id, value);
-    };
+        for (var date in dateArr) {
+          var unit = dateArr[date] === 1 ? date : date + 's';
+          var val = dateArr[date];
 
-    var ticketIsDiscounted = false;
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date];
+          }
 
-    if (ticket.oldPrice && codeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
-      ticketIsDiscounted = true;
+          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 = [];
@@ -4502,13 +4853,46 @@ var WaitingList = function WaitingList(_ref) {
   }) : 'ADD TO WAITING LIST')))));
 };
 
+var AccessCodeSection = function AccessCodeSection(_ref) {
+  var code = _ref.code,
+      setCode = _ref.setCode,
+      updateTickets = _ref.updateTickets;
+  var isAccessCodeHasValue = !!code.trim();
+  return React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("p", {
+    className: "access-code-text"
+  }, "Access code required")), React.createElement("input", {
+    className: "access-code-input",
+    placeholder: "",
+    onChange: function onChange(e) {
+      setCode(e.target.value);
+    },
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === 'Enter' && isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }), React.createElement(Button$1, {
+    className: "access-submit-button",
+    onClick: function onClick() {
+      if (isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }, "ENTER"));
+};
+
 var PromoCodeSection = function PromoCodeSection(_ref) {
   var code = _ref.code,
       codeIsApplied = _ref.codeIsApplied,
       showPromoInput = _ref.showPromoInput,
       setCode = _ref.setCode,
       setShowPromoInput = _ref.setShowPromoInput,
-      updateTickets = _ref.updateTickets;
+      updateTickets = _ref.updateTickets,
+      setCodeIsApplied = _ref.setCodeIsApplied;
   var isPromoCodeHasValue = !!code.trim();
 
   var renderInputField = function renderInputField() {
@@ -4527,7 +4911,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onKeyPress: function onKeyPress(event) {
         if (event.key === 'Enter' && isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }), React.createElement(Button$1, {
@@ -4535,7 +4919,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }, "APPLY"));
@@ -4554,129 +4938,12 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     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,
-      updateTickets = _ref.updateTickets;
-  var isAccessCodeHasValue = !!code.trim();
-  return React.createElement("div", {
-    className: "access-code-block"
-  }, React.createElement("div", {
-    className: "access-code-block"
-  }, React.createElement("p", {
-    className: "access-code-text"
-  }, "Access code required")), React.createElement("input", {
-    className: "access-code-input",
-    placeholder: "",
-    onChange: function onChange(e) {
-      setCode(e.target.value);
-    },
-    onKeyPress: function onKeyPress(event) {
-      if (event.key === 'Enter' && isAccessCodeHasValue) {
-        updateTickets(true);
-      }
-    }
-  }), React.createElement(Button$1, {
-    className: "access-submit-button",
-    onClick: function onClick() {
-      if (isAccessCodeHasValue) {
-        updateTickets(true);
-      }
-    }
-  }, "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$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;
-
-    if (!timeExpired) {
-      timer = setInterval(function () {
-        if (isTimeExpired(startDate, timezone)) {
-          clearInterval(timer);
-          setTimeExpired(true);
-          callback();
-          return;
-        }
-
-        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);
-    }
-
-    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)), React.createElement("p", {
-    className: 'message'
-  }, message)));
-}
-
 var ReferralLogic = function ReferralLogic(props) {
   var eventId = props.eventId;
   var isWindowDefined = typeof window !== 'undefined';
@@ -4714,9 +4981,144 @@ var ReferralLogic = function ReferralLogic(props) {
           }, _callee, null, [[0, 6]]);
         }))();
       }
-    }
-  }, []);
-  return null;
+    }
+  }, []);
+  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) {
@@ -4732,6 +5134,10 @@ var TicketsContainer = function TicketsContainer(_ref) {
       onGetTicketsSuccess = _ref$onGetTicketsSucc === void 0 ? function () {} : _ref$onGetTicketsSucc,
       _ref$onGetTicketsErro = _ref.onGetTicketsError,
       onGetTicketsError = _ref$onGetTicketsErro === void 0 ? function () {} : _ref$onGetTicketsErro,
+      _ref$onLogoutSuccess = _ref.onLogoutSuccess,
+      onLogoutSuccess = _ref$onLogoutSuccess === void 0 ? function () {} : _ref$onLogoutSuccess,
+      _ref$onLogoutError = _ref.onLogoutError,
+      onLogoutError = _ref$onLogoutError === void 0 ? function () {} : _ref$onLogoutError,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'light' : _ref$theme,
       _ref$queryPromoCode = _ref.queryPromoCode,
@@ -4745,6 +5151,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
       hideSessionButtons = _ref$hideSessionButto === void 0 ? false : _ref$hideSessionButto,
       _ref$hideWaitingList = _ref.hideWaitingList,
       hideWaitingList = _ref$hideWaitingList === void 0 ? false : _ref$hideWaitingList,
+      _ref$enableBillingInf = _ref.enableBillingInfoAutoCreate,
+      enableBillingInfoAutoCreate = _ref$enableBillingInf === void 0 ? true : _ref$enableBillingInf,
       _ref$isButtonScrollab = _ref.isButtonScrollable,
       isButtonScrollable = _ref$isButtonScrollab === void 0 ? false : _ref$isButtonScrollab,
       _ref$sortBySoldOut = _ref.sortBySoldOut,
@@ -4756,15 +5164,18 @@ 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],
       setSelectedTickets = _useState[1];
 
   var isWindowDefined = typeof window !== 'undefined';
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
 
-  var _useState2 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+  var _useState2 = useState((isWindowDefined ? !!window.localStorage.getItem('access_token') : false) || !!xtfCookie),
       isLogged = _useState2[0],
       setIsLogged = _useState2[1];
 
@@ -4835,17 +5246,50 @@ var TicketsContainer = function TicketsContainer(_ref) {
     !!eventId && getTicketsApi();
   }, [eventId]);
 
-  var handleLogout = function handleLogout() {
-    if (isWindowDefined) {
-      window.localStorage.removeItem('access_token');
-      window.localStorage.removeItem('user_data');
-      setIsLogged(false);
+  var handleLogout = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var _event;
 
-      var _event = new window.CustomEvent('tf-logout');
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return logout();
 
-      window.document.dispatchEvent(_event);
-    }
-  };
+            case 3:
+              onLogoutSuccess();
+
+              if (isWindowDefined) {
+                window.localStorage.removeItem('access_token');
+                window.localStorage.removeItem('user_data');
+                setIsLogged(false);
+                _event = new window.CustomEvent('tf-logout');
+                deleteCookieByName('X-TF-ECOMMERCE');
+                window.document.dispatchEvent(_event);
+              }
+
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              onLogoutError(_context.t0);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+
+    return function handleLogout() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
 
   useEffect(function () {
     try {
@@ -4854,7 +5298,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
         if (userData.country === '') {
           handleLogout();
-          window.open("https://www.ticketfairy.com/account/change_information?need_country=true");
+          window.open('https://www.ticketfairy.com/account/change_information?need_country=true');
         }
       }
     } catch (e) {}
@@ -4877,34 +5321,34 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   };
 
-  function getTicketsApi(_x) {
+  function getTicketsApi(_x, _x2) {
     return _getTicketsApi.apply(this, arguments);
   }
 
   function _getTicketsApi() {
-    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2(isUpdateingCode) {
+    _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee3(isUpdateingCode, type) {
       var response, eventResponse, attributes, _event2;
 
-      return runtime_1.wrap(function _callee2$(_context2) {
+      return runtime_1.wrap(function _callee3$(_context3) {
         while (1) {
-          switch (_context2.prev = _context2.next) {
+          switch (_context3.prev = _context3.next) {
             case 0:
-              _context2.prev = 0;
+              _context3.prev = 0;
               isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true);
-              _context2.next = 4;
+              _context3.next = 4;
               return getTickets(eventId, code);
 
             case 4:
-              response = _context2.sent;
-              _context2.next = 7;
+              response = _context3.sent;
+              _context3.next = 7;
               return getEvent(eventId);
 
             case 7:
-              eventResponse = _context2.sent;
+              eventResponse = _context3.sent;
 
               if (response.data.success) {
                 attributes = _get(response, 'data.data.attributes');
-                setCodeIsApplied(attributes.ValidPromoCode);
+                type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode);
                 setTickets(_get(attributes, 'tickets'));
                 setShowWaitingList(attributes.showWaitingList);
                 onGetTicketsSuccess(response.data);
@@ -4918,42 +5362,42 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setEvent(_event2);
               }
 
-              _context2.next = 15;
+              _context3.next = 15;
               break;
 
             case 12:
-              _context2.prev = 12;
-              _context2.t0 = _context2["catch"](0);
+              _context3.prev = 12;
+              _context3.t0 = _context3["catch"](0);
 
-              if (axios.isAxiosError(_context2.t0)) {
-                onGetTicketsError(_context2.t0);
+              if (axios.isAxiosError(_context3.t0)) {
+                onGetTicketsError(_context3.t0);
               }
 
             case 15:
-              _context2.prev = 15;
+              _context3.prev = 15;
               setIsLoading(false);
               setCodeIsLoading(false);
-              return _context2.finish(15);
+              return _context3.finish(15);
 
             case 19:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[0, 12, 15, 19]]);
+      }, _callee3, null, [[0, 12, 15, 19]]);
     }));
     return _getTicketsApi.apply(this, arguments);
   }
 
   var handleTicketSelect = function handleTicketSelect(key, value) {
     setSelectedTickets(function (prevState) {
-      var _ref2;
+      var _ref3;
 
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState;
       }
 
-      return _ref2 = {}, _ref2[key] = value, _ref2;
+      return _ref3 = {}, _ref3[key] = value, _ref3;
     });
   };
 
@@ -4964,14 +5408,14 @@ var TicketsContainer = function TicketsContainer(_ref) {
   };
 
   var handleBook = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
       var _product_options, _product_options2, _ticket_types;
 
       var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, _result$data$data$att5, _result$data4, _result$data4$data, _result$data4$data$at, skipBillingPage, nameIsRequired, ageIsRequired, phoneIsRequired, hash, total, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult;
 
-      return runtime_1.wrap(function _callee$(_context) {
+      return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               setHandleBookIsLoading(true);
               ticket = _find(tickets, function (item) {
@@ -4992,15 +5436,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
                   }, _ticket_types)
                 }
               };
-              _context.prev = 6;
-              _context.next = 9;
+              _context2.prev = 6;
+              _context2.next = 9;
               return addToCart(eventId, data);
 
             case 9:
-              result = _context.sent;
+              result = _context2.sent;
 
               if (!(result.status === 200)) {
-                _context.next = 28;
+                _context2.next = 33;
                 break;
               }
 
@@ -5012,7 +5456,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
               total = '';
 
               if (!skipBillingPage) {
-                _context.next = 27;
+                _context2.next = 32;
                 break;
               }
 
@@ -5021,15 +5465,29 @@ var TicketsContainer = function TicketsContainer(_ref) {
               userData = _isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
               access_token = _isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
               checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketQuantity, userData);
-              _context.next = 24;
+
+              if (!enableBillingInfoAutoCreate) {
+                _context2.next = 28;
+                break;
+              }
+
+              _context2.next = 25;
               return postOnCheckout(checkoutBody, access_token);
 
-            case 24:
-              checkoutResult = _context.sent;
+            case 25:
+              _context2.t0 = _context2.sent;
+              _context2.next = 29;
+              break;
+
+            case 28:
+              _context2.t0 = null;
+
+            case 29:
+              checkoutResult = _context2.t0;
               hash = _get(checkoutResult, 'data.data.attributes.hash');
               total = _get(checkoutResult, 'data.data.attributes.total');
 
-            case 27:
+            case 32:
               onAddToCartSuccess({
                 skip_billing_page: skipBillingPage,
                 names_required: nameIsRequired,
@@ -5040,44 +5498,46 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 total: total
               });
 
-            case 28:
-              _context.next = 33;
+            case 33:
+              _context2.next = 38;
               break;
 
-            case 30:
-              _context.prev = 30;
-              _context.t0 = _context["catch"](6);
+            case 35:
+              _context2.prev = 35;
+              _context2.t1 = _context2["catch"](6);
 
-              if (axios.isAxiosError(_context.t0)) {
-                onAddToCartError(_context.t0);
+              if (axios.isAxiosError(_context2.t1)) {
+                onAddToCartError(_context2.t1);
               }
 
-            case 33:
-              _context.prev = 33;
+            case 38:
+              _context2.prev = 38;
               setHandleBookIsLoading(false);
-              return _context.finish(33);
+              return _context2.finish(38);
 
-            case 36:
+            case 41:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, null, [[6, 30, 33, 36]]);
+      }, _callee2, null, [[6, 35, 38, 41]]);
     }));
 
     return function handleBook() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
-  var updateTickets = function updateTickets(isUpdateingCode) {
-    getTicketsApi(isUpdateingCode);
+  var updateTickets = function updateTickets(isUpdateingCode, type) {
+    getTicketsApi(isUpdateingCode, type);
   };
 
   var isTicketOnSale = _some(tickets, function (item) {
     return item.salesStarted && !item.salesEnded && !item.soldOut;
   });
 
+  var eventHasTickets = !_isEmpty(tickets);
+  var isSalesClosed = event == null ? void 0 : event.salesEnded;
   var themeMui = createTheme$1(themeOptions);
   useEffect(function () {
     isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
@@ -5113,6 +5573,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, {
@@ -5122,34 +5583,35 @@ var TicketsContainer = function TicketsContainer(_ref) {
     style: contentStyle
   }, isLoading ? React.createElement(Loader, null) : React.createElement("div", {
     ref: ticketsContainerRef
-  }, React.createElement(TicketsSection, {
+  }, !isSalesClosed && React.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
-    codeIsApplied: codeIsApplied,
     sortBySoldOut: sortBySoldOut,
     ticketsHeaderComponent: ticketsHeaderComponent,
     hideTicketsHeader: hideTicketsHeader || _isEmpty(tickets)
-  }), externalUrl ? null : event != null && event.salesEnded ? React.createElement("p", {
+  }), externalUrl ? null : isSalesClosed ? React.createElement("p", {
     className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
   }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React.createElement(Countdown, {
     startDate: event.salesStart,
     timezone: event.timezone,
     title: "Sales start in:",
     message: "No tickets are currently available for this event.",
+    showMessage: !eventHasTickets,
     callback: updateTickets,
     disableLeadingZero: disableCountdownLeadingZero,
     isLoggedIn: isLoggedIn
   }) : null, showWaitingList && event.salesStarted && !hideWaitingList && React.createElement(WaitingList, {
     tickets: tickets,
     eventId: eventId
-  }), codeIsLoading ? React.createElement(Loader, null) : showAccessCodeSection ? React.createElement(AccessCodeSection, {
+  }), codeIsLoading ? React.createElement(Loader, null) : isSalesClosed ? null : showAccessCodeSection ? React.createElement(AccessCodeSection, {
     code: code,
     setCode: setCode,
     updateTickets: updateTickets
   }) : showPromoCodeSection ? React.createElement(PromoCodeSection, {
     code: code,
     codeIsApplied: codeIsApplied,
+    setCodeIsApplied: setCodeIsApplied,
     showPromoInput: showPromoInput,
     setShowPromoInput: setShowPromoInput,
     setCode: setCode,
@@ -5175,7 +5637,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) {
@@ -5195,10 +5668,8 @@ var tableConfig = function tableConfig(key) {
   switch (key) {
     default:
       config = {
-        header: ['Order No.', 'Date', 'Event', 'Total'],
+        header: [],
         body: [function (row) {
-          return row.id;
-        }, function (row) {
           return row.date;
         }, function (row) {
           return React.createElement(EventInfoItem, {
@@ -5245,13 +5716,14 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
   var _data$orders;
 
   var _ref$handleDetailsInf = _ref.handleDetailsInfo,
-      handleDetailsInfo = _ref$handleDetailsInf === void 0 ? function () {} : _ref$handleDetailsInf,
+      handleDetailsInfo = _ref$handleDetailsInf === void 0 ? _identity : _ref$handleDetailsInf,
       _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
-      onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
+      onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? _identity : _ref$onGetOrdersSucce,
       _ref$onGetOrdersError = _ref.onGetOrdersError,
-      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError,
+      onGetOrdersError = _ref$onGetOrdersError === void 0 ? _identity : _ref$onGetOrdersError,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? 'dark' : _ref$theme;
+      theme = _ref$theme === void 0 ? 'dark' : _ref$theme,
+      logo = _ref.logo;
 
   var _useState = useState(null),
       data = _useState[0],
@@ -5361,24 +5833,20 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
   return React.createElement("div", {
     className: "my-ticket " + theme
-  }, loading && React.createElement("div", {
-    className: "loading"
-  }, React.createElement(CircularProgress, null)), !isLogged ? React.createElement("div", {
-    className: "account-actions-block"
-  }, React.createElement("div", {
-    className: "login-block"
-  }, React.createElement("button", {
-    className: "login-register-button",
-    type: "button",
-    onClick: function onClick() {
-      setShowModalLogin(true);
-    }
-  }, "Login"), React.createElement("div", {
-    className: "logo-image-container"
-  }, React.createElement("img", {
-    src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
-    alt: "nodata"
-  })))) : null, data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
+  }, React.createElement(React.Fragment, null, showModalLogin || !isLogged && React.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired,
+    logo: logo
+  })), data && React.createElement(React.Fragment, null, React.createElement("h2", null, "My Ticket Orders"), React.createElement("div", {
+    className: "order_event"
+  }, React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5390,11 +5858,16 @@ 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"
       }));
     }
-  }), React.createElement(TableContainer, {
+  }), React.createElement("button", {
+    type: "button",
+    className: "clear"
+  }, "CLEAR")), loading ? React.createElement("div", {
+    className: "loading"
+  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React.createElement(Table, {
@@ -5417,7 +5890,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  })), React.createElement(React.Fragment, null, showModalLogin && React.createElement(LoginModal, {
+  }))), React.createElement(React.Fragment, null, showModalLogin && React.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -5434,29 +5907,94 @@ var TicketsTable = function TicketsTable(_ref) {
   var _ref$tickets = _ref.tickets,
       tickets = _ref$tickets === void 0 ? [] : _ref$tickets,
       _ref$handleSellTicket = _ref.handleSellTicket,
-      handleSellTicket = _ref$handleSellTicket === void 0 ? function () {} : _ref$handleSellTicket,
+      handleSellTicket = _ref$handleSellTicket === void 0 ? _identity : _ref$handleSellTicket,
       _ref$handleRemoveFrom = _ref.handleRemoveFromResale,
-      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? function () {} : _ref$handleRemoveFrom;
+      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? _identity : _ref$handleRemoveFrom,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon;
+
+  var _useState = useState(null),
+      pdfError = _useState[0],
+      setPdfError = _useState[1];
+
   return React.createElement("div", {
     className: "tickets-box"
-  }, React.createElement("h4", {
+  }, React.createElement(SnackbarAlert, {
+    type: "error",
+    isOpen: !!pdfError,
+    message: pdfError || '',
+    onClose: function onClose() {
+      return setPdfError(null);
+    }
+  }), React.createElement("h4", {
     className: "sub-title"
   }, "Your Tickets"), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Ticket ID"), React.createElement(TableCell, null, "Ticket Type"), React.createElement(TableCell, null, "Ticket Holder Name"), React.createElement(TableCell, null, "Status"), React.createElement(TableCell, null, "Download"), React.createElement(TableCell, null))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
     var _ticket$add_ons;
 
     return React.createElement(Fragment, {
       key: index
-    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, ticket.status !== "Sold" && React.createElement("span", {
+    }, React.createElement(TableRow, null, React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket ID"), React.createElement("span", null, ticket.hash))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket Type"), React.createElement("span", null, ticket.ticket_type))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket Holder"), React.createElement("span", null, ticket.holder_name))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Status"), React.createElement("span", null, ticket.status))), ticket.pdf_link && ticket.status !== "Sold" ? React.createElement(TableCell, null, Boolean(icon) && React.createElement("img", {
+      src: icon,
+      alt: "nodata"
+    }), React.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
-      onClick: function onClick() {
-        return downloadPDF(ticket.pdf_link);
-      }
-    }, "Download")), React.createElement(TableCell, null, ticket.is_sellable && React.createElement("span", {
+      onClick: function () {
+        var _onClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+          var pdfDownloadError;
+          return runtime_1.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return downloadPDF(ticket.pdf_link);
+
+                case 3:
+                  pdfDownloadError = _context.sent;
+
+                  if (pdfDownloadError) {
+                    setPdfError(pdfDownloadError == null ? void 0 : pdfDownloadError.message);
+                  }
+
+                  _context.next = 10;
+                  break;
+
+                case 7:
+                  _context.prev = 7;
+                  _context.t0 = _context["catch"](0);
+
+                  if (_context.t0 && typeof _context.t0 === 'string') {
+                    setPdfError(_context.t0);
+                  }
+
+                case 10:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[0, 7]]);
+        }));
+
+        function onClick() {
+          return _onClick.apply(this, arguments);
+        }
+
+        return onClick;
+      }()
+    }, "Download")) : null, React.createElement(TableCell, null, ticket.is_sellable && React.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
@@ -5480,11 +6018,11 @@ var TicketsTable = function TicketsTable(_ref) {
   })))));
 };
 
-var _excluded$3 = ["label", "field", "theme"];
+var _excluded$2 = ["label", "field", "theme"];
 var RadioField = function RadioField(_ref) {
   var label = _ref.label,
       field = _ref.field,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var customTheme = useTheme();
   return React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
@@ -5496,7 +6034,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$1 = {
+var style$3 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5558,14 +6096,14 @@ 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, {
-    style: style$1
+  }, 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,
     validationSchema: schema,
@@ -5631,12 +6169,12 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       type: 'text',
       component: CustomField
     }))))), ticket_type_is_active && React.createElement("div", null, React.createElement(Field, {
-      name: 'to',
-      label: 'I will sell my ticket to anyone who wants to buy it',
-      type: 'radio',
-      value: 'anyone',
+      name: "to",
+      label: "I will sell my ticket to anyone who wants to buy it",
+      type: "radio",
+      value: "anyone",
       component: RadioField
-    })), React.createElement("div", null, React.createElement("h4", null, "Terms of Resale"), React.createElement("p", null, "I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back."), React.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React.createElement("strong", null, event_name), " and I will not receive any refund."), React.createElement("p", null, "If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of ", React.createElement("strong", null, currency + resale_fee_amount), ", and that any existing refunds due to me for referring sales for this event are no longer valid."), React.createElement(Field, {
+    })), React.createElement("div", null, React.createElement("h4", null, "Terms of Resale"), React.createElement("p", null, "I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back."), React.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React.createElement("strong", null, event_name), " and I will not receive any refund."), React.createElement("p", null, "If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of ", React.createElement("strong", null, (currency || '') + " " + (resale_fee_amount || '')), ", and that any existing refunds due to me for referring sales for this event are no longer valid."), React.createElement(Field, {
       name: 'confirm',
       label: 'I agree',
       type: 'checkbox',
@@ -5650,7 +6188,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
   }))));
 };
 
-var style$2 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5671,14 +6209,14 @@ 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, {
-    style: style$2
+  }, React.createElement(Box$1, {
+    style: style$4
   }, React.createElement("p", null, message), React.createElement("div", {
     className: 'footer'
   }, React.createElement(Button, {
@@ -5696,10 +6234,15 @@ var getTotal = function getTotal(data) {
 var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   var _data$items, _data$items$ticket_ty, _data$items2, _data$items2$add_ons;
 
-  var _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$onGetOrdersSucce = _ref.onGetOrdersSuccess,
       onGetOrdersSuccess = _ref$onGetOrdersSucce === void 0 ? function () {} : _ref$onGetOrdersSucce,
       _ref$onGetOrdersError = _ref.onGetOrdersError,
-      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError;
+      onGetOrdersError = _ref$onGetOrdersError === void 0 ? function () {} : _ref$onGetOrdersError,
+      onReturnButtonClick = _ref.onReturnButtonClick,
+      _ref$personalLinkIcon = _ref.personalLinkIcon,
+      personalLinkIcon = _ref$personalLinkIcon === void 0 ? '' : _ref$personalLinkIcon;
 
   var _useState = useState({}),
       data = _useState[0],
@@ -5900,6 +6443,12 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     };
   }();
 
+  var orderSummery = "ID " + data.id + ", placed";
+
+  if (data.date) {
+    orderSummery += " " + data.date;
+  }
+
   return React.createElement("div", {
     className: "order-details"
   }, loading ? React.createElement("div", {
@@ -5908,19 +6457,47 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
-  }, React.createElement("h4", {
+  }, React.createElement("div", {
+    className: "summary-block"
+  }, React.createElement("div", {
+    className: "summary-item"
+  }, React.createElement("h6", {
     className: "sub-title"
-  }, "Order Summary"), React.createElement("div", {
+  }, "Order Summary"), React.createElement("p", null, orderSummery)), React.createElement("div", {
+    className: "summary-item"
+  }, React.createElement("div", {
+    className: "return-button-container"
+  }, React.createElement("button", {
+    type: "button",
+    className: "return-button",
+    onClick: function onClick() {
+      if (typeof window !== 'undefined') {
+        window.location.assign('/orders');
+      }
+    }
+  }, "Back to Orders")))), React.createElement("div", {
     className: "personal-link"
-  }, React.createElement("b", null, "Your personal share link for this event is: "), React.createElement("a", {
+  }, React.createElement("div", {
+    className: "link-item"
+  }, React.createElement("span", null, "Personal Share Link: "), React.createElement("a", {
     href: data == null ? void 0 : data.personal_share_link,
     target: "_blank",
     rel: "noreferrer"
-  }, data == null ? void 0 : data.personal_share_link)), React.createElement(TableContainer, {
+  }, Boolean(personalLinkIcon) && React.createElement("img", {
+    src: personalLinkIcon,
+    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"))), 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",
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Items"), React.createElement(TableCell, null, "Price"), React.createElement(TableCell, null, "Quantity"), React.createElement(TableCell, null, "Total"))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, _map(columns, function (item) {
+    return React.createElement(TableCell, null, item.label || '');
+  }))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
     return React.createElement(TableRow, {
       key: index
     }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type: "), ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
@@ -5940,7 +6517,9 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     type: "button",
     className: "return-button",
     onClick: function onClick() {
-      if (typeof window !== 'undefined') {
+      if (onReturnButtonClick) {
+        onReturnButtonClick(data);
+      } else if (typeof window !== 'undefined') {
         window.location.assign('/orders');
       }
     }
@@ -5955,6 +6534,120 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }));
 };
 
+var Schema$1 = /*#__PURE__*/object().shape({
+  password: /*#__PURE__*/string().min(6, 'Password must have 5+ characters').required('Required'),
+  password_confirmation: /*#__PURE__*/string().required('Required').oneOf([/*#__PURE__*/ref('password'), null], 'Passwords must match')
+});
+var ResetPasswordContainer = function ResetPasswordContainer(_ref) {
+  var _ref$token = _ref.token,
+      tokenProps = _ref$token === void 0 ? '' : _ref$token,
+      _ref$onResetPasswordS = _ref.onResetPasswordSuccess,
+      onResetPasswordSuccess = _ref$onResetPasswordS === void 0 ? function () {} : _ref$onResetPasswordS,
+      _ref$onResetPasswordE = _ref.onResetPasswordError,
+      onResetPasswordError = _ref$onResetPasswordE === void 0 ? function () {} : _ref$onResetPasswordE;
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  return React.createElement("div", {
+    className: "reset-password"
+  }, React.createElement("div", {
+    className: "title"
+  }, "Change Password"), React.createElement(Formik, {
+    initialValues: {
+      password: '',
+      password_confirmation: ''
+    },
+    validationSchema: Schema$1,
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+        var token, params, payload, res;
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.prev = 0;
+                setLoading(true);
+
+                if (tokenProps) {
+                  token = tokenProps;
+                } else {
+                  if (typeof window !== 'undefined') {
+                    params = new URL("" + window.location).searchParams;
+                    token = params.get('token');
+                  }
+                }
+
+                payload = _extends({
+                  token: token
+                }, values);
+                _context.next = 6;
+                return resetPassword(payload);
+
+              case 6:
+                res = _context.sent;
+                onResetPasswordSuccess(res);
+                _context.next = 13;
+                break;
+
+              case 10:
+                _context.prev = 10;
+                _context.t0 = _context["catch"](0);
+
+                if (axios.isAxiosError(_context.t0)) {
+                  onResetPasswordError(_context.t0);
+                }
+
+              case 13:
+                _context.prev = 13;
+                setLoading(false);
+                return _context.finish(13);
+
+              case 16:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[0, 10, 13, 16]]);
+      }));
+
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
+      }
+
+      return onSubmit;
+    }()
+  }, function (_ref2) {
+    var isValid = _ref2.isValid,
+        dirty = _ref2.dirty;
+    return React.createElement(Form, null, React.createElement("div", {
+      className: "body"
+    }, React.createElement("div", {
+      className: "field-item"
+    }, React.createElement(Field, {
+      name: "password",
+      label: "New Password",
+      type: "password",
+      component: CustomField
+    })), React.createElement("div", {
+      className: "field-item"
+    }, React.createElement(Field, {
+      name: "password_confirmation",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    }))), React.createElement("div", {
+      className: "action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React.createElement(CircularProgress$1, {
+      size: "22px"
+    }) : 'Submit')));
+  }));
+};
+
 var TicketResaleContainer = function TicketResaleContainer(_ref) {
   var _ref$onProcessTicketS = _ref.onProcessTicketSuccess,
       onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
@@ -6066,7 +6759,7 @@ var TicketResaleContainer = function TicketResaleContainer(_ref) {
   }, React.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
-var style$3 = {
+var style$5 = {
   position: 'absolute',
   top: '10%',
   left: '50%',
@@ -6084,13 +6777,13 @@ 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, {
-    style: style$3
+  }, React.createElement(Box$1, {
+    style: style$5
   }, React.createElement("p", null, message), React.createElement("div", {
     className: "footer"
   }, React.createElement("button", {
@@ -6098,7 +6791,7 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-var style$4 = {
+var style$6 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6197,14 +6890,14 @@ 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, {
-    style: style$4,
+  }, React.createElement(Box$1, {
+    style: style$6,
     className: "rsvp-modal-box"
   }, React.createElement("div", {
     className: "rsvp-modal-container"
@@ -6245,5 +6938,5 @@ var RsvpContainer = function RsvpContainer(_ref) {
   }, "RSVP"))))))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, RsvpContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+export { BillingInfoContainer, ConfirmationContainer, ForgotPasswordModal, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, ResetPasswordContainer, RsvpContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map