tf-checkout-react 1.0.106 → 1.1.0

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

@@ -1,4 +1,4 @@
-import React, { Component, useState, memo, useRef, useEffect, Fragment } from 'react';
+import React, { Component, useState, useCallback, useEffect, memo, useRef, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
 import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
@@ -9,19 +9,21 @@ 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 { TextField, Modal as Modal$1, Box as Box$1, CircularProgress, FormControl, FormHelperText, InputLabel, Snackbar, Alert, createTheme as createTheme$1 } from '@mui/material';
 import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+import TextField$1 from '@mui/material/TextField';
+import { useTheme } from '@mui/styles';
+import { object, string, ref, boolean } from 'yup';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
 import _isArray from 'lodash-es/isArray';
 import { nanoid } from 'nanoid';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import { useTheme } from '@mui/styles';
-import TextField$1 from '@mui/material/TextField';
-import MuiPhoneNumber from 'material-ui-phone-number';
-import CircularProgress from '@mui/material/CircularProgress';
+import 'material-ui-phone-number';
+import _debounce from 'lodash-es/debounce';
+import CircularProgress$1 from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Backdrop from '@mui/material/Backdrop';
@@ -45,17 +47,16 @@ 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) {
@@ -998,14 +999,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 +1092,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 +1113,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 +1128,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 ? {
@@ -1173,20 +1257,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;
@@ -1265,14 +1370,11 @@ 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) {
     throw error;
@@ -1333,6 +1435,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,6 +1456,32 @@ 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);
+  }));
+
+  return function validatePhoneNumber(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
 var style = {
   position: 'absolute',
@@ -1353,6 +1493,21 @@ var style = {
   border: '1px solid white',
   outline: 'none'
 };
+var setLoggedUserData = function setLoggedUserData(data) {
+  return {
+    id: data.id,
+    first_name: data.firstName,
+    last_name: data.lastName,
+    email: data.email,
+    confirmEmail: data.email,
+    city: (data == null ? void 0 : data.city) || '',
+    country: (data == null ? void 0 : data.countryId) || (data == null ? void 0 : data.country) || '',
+    phone: (data == null ? void 0 : data.phone) || '',
+    street_address: (data == null ? void 0 : data.streetAddress) || '',
+    state: (data == null ? void 0 : data.stateId) || '',
+    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
+  };
+};
 var LoginModal = function LoginModal(_ref) {
   var onClose = _ref.onClose,
       onLogin = _ref.onLogin,
@@ -1360,27 +1515,26 @@ var LoginModal = function LoginModal(_ref) {
       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,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
+      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;
+      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
+      logo = _ref.logo,
+      _ref$showForgotPasswo = _ref.showForgotPasswordButton,
+      showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
+      _ref$showSignUpButton = _ref.showSignUpButton,
+      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
 
   var _useState = useState(''),
       error = _useState[0],
       setError = _useState[1];
 
-  var handleForgotPassword = function handleForgotPassword() {
-    if (typeof window !== 'undefined') {
-      window.open(CONFIGS.BASE_URL + "/password-restore/");
-    }
-  };
-
   return React.createElement(Modal, {
     open: true,
     onClose: onClose,
@@ -1396,7 +1550,7 @@ var LoginModal = function LoginModal(_ref) {
     },
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
+        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1404,102 +1558,66 @@ var LoginModal = function LoginModal(_ref) {
               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 (axios.isAxiosError(_context.t0)) {
-                  onAuthorizeError(_context.t0);
-                }
-
-                return _context.abrupt("return");
+                body = {
+                  email: email,
+                  password: password
+                };
+                _context.next = 5;
+                return authorize(body);
 
-              case 26:
-                accessToken = _get(resAccessToken, 'data.access_token');
-                handleSetAccessToken(accessToken);
+              case 5:
                 profileResponse = null;
-                _context.prev = 29;
-                _context.next = 32;
-                return getProfileData(accessToken);
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-              case 32:
+              case 9:
                 profileResponse = _context.sent;
                 onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 40;
+                _context.next = 17;
                 break;
 
-              case 36:
-                _context.prev = 36;
-                _context.t1 = _context["catch"](29);
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-                if (axios.isAxiosError(_context.t1)) {
-                  onGetProfileDataError(_context.t1);
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
                 }
 
                 return _context.abrupt("return");
 
-              case 40:
+              case 17:
                 profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+                profileDataObj = setLoggedUserData(profileSpecifiedData);
 
                 if (typeof window !== 'undefined') {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                  window.localStorage.setItem('access_token', accessToken);
                   event = new window.CustomEvent('tf-login');
                   window.document.dispatchEvent(event);
                 }
 
                 onLogin();
-                _context.next = 49;
+                _context.next = 26;
                 break;
 
-              case 46:
-                _context.prev = 46;
-                _context.t2 = _context["catch"](1);
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
 
-                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';
+                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.t2 instanceof Error) {
-                  setError((_context.t2 == null ? void 0 : _context.t2.message) || 'Error');
+                } else if (_context.t1 instanceof Error) {
+                  setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
                 }
 
-              case 49:
+              case 26:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 46], [15, 22], [29, 36]]);
+        }, _callee, null, [[1, 23], [6, 13]]);
       }));
 
       function onSubmit(_x) {
@@ -1513,11 +1631,13 @@ var LoginModal = function LoginModal(_ref) {
       onSubmit: props.handleSubmit
     }, React.createElement("div", {
       className: "modal-title"
-    }, "Login"), React.createElement("img", {
+    }, "Login"), React.createElement("div", {
+      className: 'login-logo-container'
+    }, React.createElement("img", {
       className: "login-logo-tff",
-      src: "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
-      alt: ""
-    }), React.createElement("div", {
+      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"
@@ -1559,204 +1679,372 @@ var LoginModal = function LoginModal(_ref) {
       className: "login-action-button"
     }, React.createElement("button", {
       type: "submit"
-    }, "Login")), React.createElement("div", {
-      className: 'forgot-password'
+    }, "Login")), showForgotPasswordButton && React.createElement("div", {
+      className: "forgot-password"
     }, React.createElement("span", {
-      onClick: handleForgotPassword
-    }, "Forgot password?"))));
+      "aria-hidden": "true",
+      onClick: onForgotPassword
+    }, "Forgot password?")), showSignUpButton && React.createElement("div", {
+      className: "forgot-password"
+    }, React.createElement("span", {
+      "aria-hidden": "true",
+      onClick: onSignup
+    }, "Sign up"))));
   }))));
 };
 
-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
-    }
-  }, 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);
+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 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);
+  var error = _get(errors, field.name);
 
-              case 18:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 26;
-                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$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
+    },
+    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 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
-                onGetProfileDataError(_context.t0.response);
-                return _context.abrupt("return");
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
+};
+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;
 
-              case 26:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                }
+  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);
 
-                onClose();
+            case 12:
+              res = _context.sent;
+              access_token_register = _get(res, 'data.data.attributes.access_token');
+              refreshToken = _get(res, 'data.data.attributes.refresh_token');
+              handleSetAccessToken(access_token_register);
+              tokens = {
+                accessToken: access_token_register,
+                refreshToken: refreshToken
+              };
+              onRegisterSuccess(tokens);
+              onClose();
+              _context.next = 24;
+              break;
 
-              case 30:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[15, 22]]);
-      }));
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
 
-      return onSubmit;
-    }()
-  }, function (props) {
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
+
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  return React.createElement(Modal$1, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "signup-modal"
+  }, React.createElement(Box$1, {
+    style: style$1
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
+    },
+    validationSchema: SignupSchema,
+    onSubmit: onSignup
+  }, function (_ref3) {
+    var isValid = _ref3.isValid,
+        dirty = _ref3.dirty,
+        handleSubmit = _ref3.handleSubmit;
     return React.createElement(Form, {
-      onSubmit: props.handleSubmit
+      onSubmit: 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"
+      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',
-      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));
+      name: "firstName",
+      label: "First Name",
+      component: CustomField
     })), 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));
+      name: "lastName",
+      label: "Last Name",
+      component: CustomField
     }))), React.createElement("div", {
-      className: "register-container__singleField"
+      className: "signup-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));
+      name: "email",
+      label: "Email",
+      component: CustomField
     }))), React.createElement("div", {
-      className: "register-container__twoFields"
+      className: "signup-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));
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField
     })), 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"));
-  }));
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    })))), React.createElement("div", {
+      className: "signup-action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React.createElement(CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React.createElement("div", {
+      className: "login"
+    }, React.createElement("span", {
+      onClick: onLogin
+    }, "Login")));
+  }))));
+};
+
+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 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;
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var onForgotPassword = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+      var email, _yield$forgotPassword, data;
+
+      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);
+
+            case 5:
+              _yield$forgotPassword = _context.sent;
+              data = _yield$forgotPassword.data;
+              onForgotPasswordSuccess(data);
+              onClose();
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](1);
+
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
+              }
+
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
+
+    return function onForgotPassword(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  return React.createElement(Modal$1, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "forgot-password-modal"
+  }, React.createElement(Box$1, {
+    style: style$2
+  }, React.createElement("div", null, React.createElement(Formik, {
+    initialValues: {
+      email: ''
+    },
+    validationSchema: Schema,
+    onSubmit: onForgotPassword
+  }, function (_ref4) {
+    var isValid = _ref4.isValid,
+        dirty = _ref4.dirty,
+        handleSubmit = _ref4.handleSubmit;
+    return React.createElement(Form, {
+      onSubmit: handleSubmit
+    }, React.createElement("div", {
+      className: "forgot-password-container"
+    }, React.createElement("div", {
+      className: "title"
+    }, "Password Reset"), React.createElement("div", {
+      className: "forgot-password-container__singleField"
+    }, React.createElement(Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React.createElement("div", {
+      className: "forgot-password-action-button"
+    }, React.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React.createElement(CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React.createElement("div", {
+      className: "login"
+    }, React.createElement("span", {
+      onClick: onLogin
+    }, "Back to Log In")));
+  }))));
 };
 
 var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
@@ -1817,7 +2105,7 @@ var createRegisterFormData = function createRegisterFormData(values, checkoutBod
 
   return bodyFormData;
 };
-var setLoggedUserData = function setLoggedUserData(data) {
+var setLoggedUserData$1 = function setLoggedUserData(data) {
   return {
     id: data.id,
     first_name: data.firstName,
@@ -1871,10 +2159,10 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
   });
   ticket_holders = filteredHolders.map(function (item, index) {
     return {
-      first_name: item["holderFirstName-" + index] || '',
-      last_name: item["holderLastName-" + index] || '',
+      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: item["holderEmail-" + index] || ''
+      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
     };
   });
   var filteredRestValue = {};
@@ -1925,6 +2213,14 @@ var getValidateFunctions = function getValidateFunctions(element, states, values
     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 assingUniqueIds = function assingUniqueIds(data) {
@@ -1965,62 +2261,6 @@ var CheckboxField = function CheckboxField(_ref) {
   })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React.createElement(FormHelperText, null, "Required") : null);
 };
 
-var 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';
-
-  var error = _get(errors, field.name);
-
-  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
-  var customTheme = useTheme();
-  var inputProps = {
-    sx: customTheme == null ? void 0 : customTheme.input
-  };
-  return React.createElement(TextField$1, Object.assign({
-    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);
-};
-
 var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
   return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
 };
@@ -2087,56 +2327,86 @@ var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency)
       return 'US$';
   }
 };
-var removePlusSign = function removePlusSign(string) {
-  if (string === void 0) {
-    string = '';
-  }
-
-  return string.replace('+', '');
-};
 
-var _excluded$2 = ["label", "field", "form", "setFieldValue", "selectOptions"];
-var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
+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,
-      touched = _ref$form.touched,
       errors = _ref$form.errors,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref.setFieldValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      setFieldError = _ref$form.setFieldError,
+      setStatus = _ref$form.setStatus;
 
-  var error = _get(errors, field.name);
+  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  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,
+
+  var debounceCb = useCallback(_debounce(function (cb) {
+    return void cb();
+  }, 1000), []);
+  useEffect(function () {
+    if (field.value) {
+      var _setStatus;
+
+      setStatus((_setStatus = {}, _setStatus[field.name] = true, _setStatus));
+    }
+
+    debounceCb( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var message, _setStatus2;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+
+              if (!field.value) {
+                _context.next = 4;
+                break;
+              }
+
+              _context.next = 4;
+              return validatePhoneNumber(field.value);
+
+            case 4:
+              setFieldError(field.name, '');
+              _context.next = 11;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+              setFieldError(field.name, message);
+
+            case 11:
+              _context.prev = 11;
+              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
+              return _context.finish(11);
+
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 11, 14]]);
+    }))); // eslint-disable-next-line
+  }, [field.value]);
+  return React.createElement(TextField$1, Object.assign({}, field, {
+    id: field.name,
     label: label,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
+    type: type,
     fullWidth: true,
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    autoFormat: false
-  }, rest));
+    error: !!error,
+    helperText: error,
+    value: field.value || ''
+  }));
 };
 
 function Loader() {
   return React.createElement("div", {
     className: "loader-container"
-  }, React.createElement(CircularProgress, null));
+  }, React.createElement(CircularProgress$1, null));
 }
 
 var SelectField = function SelectField(_ref) {
@@ -2399,7 +2669,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 +2725,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 +2736,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 +2745,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 +2826,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 +2851,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 +2882,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([]),
-      ticketsQuantity = _useState10[0],
-      setTicketsQuantity = _useState10[1];
+  var _useState10 = useState(false),
+      showModalForgotPassword = _useState10[0],
+      setShowModalForgotPassword = _useState10[1];
 
-  var _useState11 = useState({
+  var _useState11 = useState([]),
+      ticketsQuantity = _useState11[0],
+      setTicketsQuantity = _useState11[1];
+
+  var _useState12 = useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2620,16 +2908,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 +2967,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 +3019,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       };
     }();
 
-    fetchCountries();
+    shouldFetchCountries && fetchCountries();
     fetchCart();
   }, []); // fetch cart data
 
@@ -2791,7 +3079,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(isWindowDefined && token)) {
+              if (!(isWindowDefined && token || isLoggedIn)) {
                 _context4.next = 10;
                 break;
               }
@@ -2802,7 +3090,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 +3126,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 +3182,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 +3204,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, {
+    color: "inherit"
+  })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
   }), React.createElement(Formik, {
@@ -2943,10 +3234,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 +3261,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 +3285,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 +3337,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 +3383,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 +3412,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 +3426,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 +3487,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 +3495,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) {
@@ -3223,10 +3526,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       variant: "contained",
       className: "login-register-button",
       disabled: props.isSubmitting
-    }, props.isSubmitting ? React.createElement(CircularProgress$1, {
+    }, props.isSubmitting ? React.createElement(CircularProgress, {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
+    logo: logo,
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -3244,20 +3548,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 +3797,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 +3807,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"
@@ -3525,7 +3848,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress, {
+  }, isLoading ? React.createElement(CircularProgress$1, {
     size: 26
   }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
@@ -3588,7 +3911,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 +3928,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 +4068,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 +4153,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),
@@ -3856,9 +4207,9 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setPaymentIsLoading(true);
       handlePaymentMiddleWare(null);
     }
-  }, paymentIsLoading ? React.createElement(CircularProgress, {
+  }, paymentIsLoading ? React.createElement(CircularProgress$1, {
     size: 26
-  }) : "Complete Registration")))));
+  }) : 'Complete Registration')))));
 };
 
 var config = {
@@ -4022,7 +4373,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 +4474,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 +4491,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 +4508,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 +4538,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,
@@ -4239,7 +4604,7 @@ var TicketRow = function TicketRow(_ref) {
   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", {
+  var onSaleContent = React.createElement("div", {
     className: "get-tickets"
   }, React.createElement(Box, {
     className: "get-tickets__selectbox"
@@ -4269,17 +4634,17 @@ var TicketRow = function TicketRow(_ref) {
       value: option.value
     }, option.value);
   })))));
-  var returnValue = '';
+  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage;
-  }
+  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
 
-  if (ticketTier.displayTicket) {
+  if (isSoldOut) {
+    returnValue = soldOutMessage;
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage;
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
     returnValue = onSaleContent;
-  }
-
-  if (_get(prevTicketTier, 'in_stock')) {
+  } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON';
   }
 
@@ -4290,7 +4655,6 @@ 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;
@@ -4305,7 +4669,7 @@ var TicketsSection = function TicketsSection(_ref) {
 
     var ticketIsDiscounted = false;
 
-    if (ticket.oldPrice && codeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
+    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
       ticketIsDiscounted = true;
     }
 
@@ -4497,7 +4861,7 @@ var WaitingList = function WaitingList(_ref) {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
-  }, loading ? React.createElement(CircularProgress, {
+  }, loading ? React.createElement(CircularProgress$1, {
     size: "22px"
   }) : 'ADD TO WAITING LIST')))));
 };
@@ -4508,7 +4872,8 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       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 +4892,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 +4900,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }, "APPLY"));
@@ -4554,6 +4919,7 @@ 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());
@@ -4603,6 +4969,8 @@ function Countdown(_ref) {
       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,
@@ -4672,7 +5040,7 @@ function Countdown(_ref) {
     className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
   }, React.createElement("div", null, React.createElement("p", {
     className: 'title'
-  }, title), React.createElement("p", null, duration)), React.createElement("p", {
+  }, title), React.createElement("p", null, duration)), showMessage && React.createElement("p", {
     className: 'message'
   }, message)));
 }
@@ -4732,6 +5100,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 +5117,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,
@@ -4763,8 +5137,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       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 +5210,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;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return logout();
 
-      var _event = new window.CustomEvent('tf-logout');
+            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);
+              }
 
-      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 +5262,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 +5285,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 +5326,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 +5372,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 +5400,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 +5420,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
               total = '';
 
               if (!skipBillingPage) {
-                _context.next = 27;
+                _context2.next = 32;
                 break;
               }
 
@@ -5021,15 +5429,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 +5462,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);
@@ -5122,34 +5546,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,
@@ -5195,10 +5620,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 +5668,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 +5785,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) {
@@ -5394,7 +5814,12 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
         label: "Events"
       }));
     }
-  }), React.createElement(TableContainer, {
+  }), React.createElement("button", {
+    type: "button",
+    className: "clear"
+  }, "CLEAR")), loading ? React.createElement("div", {
+    className: "loading"
+  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React.createElement(Table, {
@@ -5417,7 +5842,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 +5859,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 +5970,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 +5986,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$1 = {
+var style$3 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5565,7 +6055,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'resale-modal'
   }, React.createElement(Box, {
-    style: style$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 +6121,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 +6140,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
   }))));
 };
 
-var style$2 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5678,7 +6168,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'confirm-modal'
   }, React.createElement(Box, {
-    style: style$2
+    style: style$4
   }, React.createElement("p", null, message), React.createElement("div", {
     className: 'footer'
   }, React.createElement(Button, {
@@ -5696,10 +6186,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,27 +6395,59 @@ 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", {
     className: "loading"
-  }, React.createElement(CircularProgress, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
+  }, React.createElement(CircularProgress$1, null)) : React.createElement(React.Fragment, null, React.createElement("h1", {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
-  }, 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"))), 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 +6467,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 +6484,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, {
+      size: "22px"
+    }) : 'Submit')));
+  }));
+};
+
 var TicketResaleContainer = function TicketResaleContainer(_ref) {
   var _ref$onProcessTicketS = _ref.onProcessTicketSuccess,
       onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
@@ -6066,7 +6709,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%',
@@ -6090,7 +6733,7 @@ var RedirectModal = function RedirectModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "redirect-modal"
   }, React.createElement(Box, {
-    style: style$3
+    style: style$5
   }, React.createElement("p", null, message), React.createElement("div", {
     className: "footer"
   }, React.createElement("button", {
@@ -6098,7 +6741,7 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-var style$4 = {
+var style$6 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6204,7 +6847,7 @@ var RsvpContainer = function RsvpContainer(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "rsvp-modal"
   }, React.createElement(Box, {
-    style: style$4,
+    style: style$6,
     className: "rsvp-modal-box"
   }, React.createElement("div", {
     className: "rsvp-modal-container"
@@ -6245,5 +6888,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