tf-checkout-react 1.0.106 → 1.1.0

package/dist/tf-checkout-react.cjs.development.js

@@ -17,17 +17,19 @@ var _isEmpty = _interopDefault(require('lodash/isEmpty'));
 var axios = _interopDefault(require('axios'));
 var _forEach = _interopDefault(require('lodash/forEach'));
 var material = require('@mui/material');
-var Modal = _interopDefault(require('@mui/material/Modal'));
 var Box = _interopDefault(require('@mui/material/Box'));
+var Modal = _interopDefault(require('@mui/material/Modal'));
+var TextField = _interopDefault(require('@mui/material/TextField'));
+var styles = require('@mui/styles');
+var Yup = require('yup');
 var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
 var _isArray = _interopDefault(require('lodash/isArray'));
 var nanoid = require('nanoid');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
-var styles = require('@mui/styles');
-var TextField = _interopDefault(require('@mui/material/TextField'));
-var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
+require('material-ui-phone-number');
+var _debounce = _interopDefault(require('lodash/debounce'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var styles$1 = require('@mui/material/styles');
@@ -52,17 +54,16 @@ var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var moment = _interopDefault(require('moment-timezone'));
 var privateTheming = require('@mui/private-theming');
+var Autocomplete = _interopDefault(require('@mui/material/Autocomplete'));
+var Paper = _interopDefault(require('@mui/material/Paper'));
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
 var TableCell = _interopDefault(require('@mui/material/TableCell'));
 var TableContainer = _interopDefault(require('@mui/material/TableContainer'));
 var TableHead = _interopDefault(require('@mui/material/TableHead'));
-var TableRow = _interopDefault(require('@mui/material/TableRow'));
-var Paper = _interopDefault(require('@mui/material/Paper'));
 var TablePagination = _interopDefault(require('@mui/material/TablePagination'));
-var Autocomplete = _interopDefault(require('@mui/material/Autocomplete'));
+var TableRow = _interopDefault(require('@mui/material/TableRow'));
 var _has = _interopDefault(require('lodash/has'));
-var yup = require('yup');
 var Radio = _interopDefault(require('@mui/material/Radio'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1005,14 +1006,87 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.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;
@@ -1025,7 +1099,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,
@@ -1046,7 +1120,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'
     });
@@ -1057,21 +1135,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 ? {
@@ -1180,20 +1264,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;
@@ -1272,14 +1377,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;
@@ -1340,6 +1442,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/");
 };
@@ -1349,6 +1463,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',
@@ -1360,6 +1500,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,
@@ -1367,27 +1522,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 = React.useState(''),
       error = _useState[0],
       setError = _useState[1];
 
-  var handleForgotPassword = function handleForgotPassword() {
-    if (typeof window !== 'undefined') {
-      window.open(CONFIGS.BASE_URL + "/password-restore/");
-    }
-  };
-
   return React__default.createElement(Modal, {
     open: true,
     onClose: onClose,
@@ -1403,7 +1557,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) {
@@ -1411,102 +1565,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) {
@@ -1520,11 +1638,13 @@ var LoginModal = function LoginModal(_ref) {
       onSubmit: props.handleSubmit
     }, React__default.createElement("div", {
       className: "modal-title"
-    }, "Login"), React__default.createElement("img", {
+    }, "Login"), React__default.createElement("div", {
+      className: 'login-logo-container'
+    }, React__default.createElement("img", {
       className: "login-logo-tff",
-      src: "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
-      alt: ""
-    }), React__default.createElement("div", {
+      src: logo || "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
+      alt: "logo"
+    })), React__default.createElement("div", {
       className: "server_auth__error"
     }, error), alreadyHasUser && React__default.createElement("p", {
       className: "info-text-for-login"
@@ -1566,204 +1686,372 @@ var LoginModal = function LoginModal(_ref) {
       className: "login-action-button"
     }, React__default.createElement("button", {
       type: "submit"
-    }, "Login")), React__default.createElement("div", {
-      className: 'forgot-password'
+    }, "Login")), showForgotPasswordButton && React__default.createElement("div", {
+      className: "forgot-password"
     }, React__default.createElement("span", {
-      onClick: handleForgotPassword
-    }, "Forgot password?"))));
+      "aria-hidden": "true",
+      onClick: onForgotPassword
+    }, "Forgot password?")), showSignUpButton && React__default.createElement("div", {
+      className: "forgot-password"
+    }, React__default.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__default.createElement("div", {
-    style: {
-      display: 'flex',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      right: 0,
-      left: 0,
-      backgroundColor: 'white',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 10
-    }
-  }, React__default.createElement(formik.Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
+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 = styles.useTheme();
+  var inputProps = {
+    sx: customTheme == null ? void 0 : customTheme.input
+  };
+  return React__default.createElement(TextField, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    select: isSelectField,
+    fullWidth: true,
+    error: !!error && isTouched,
+    helperText: isTouched && error,
+    SelectProps: {
+      "native": true,
+      className: theme,
+      MenuProps: {
+        className: theme
+      }
     },
-    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);
+    InputLabelProps: {
+      sx: customTheme == null ? void 0 : customTheme.input
+    },
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
+  }, field), isSelectField ? _map(selectOptions, function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  }) : null);
+};
 
-              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 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__*/Yup.object().shape({
+  firstName: /*#__PURE__*/Yup.string().required('Required'),
+  lastName: /*#__PURE__*/Yup.string().required('Required'),
+  email: /*#__PURE__*/Yup.string().email('Invalid email').required('Required'),
+  password: /*#__PURE__*/Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  confirmPassword: /*#__PURE__*/Yup.string().required('Required').oneOf([/*#__PURE__*/Yup.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 18:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 26;
-                break;
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
-                onGetProfileDataError(_context.t0.response);
-                return _context.abrupt("return");
+  var onSignup = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var formData, res, access_token_register, refreshToken, tokens;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              formData = new FormData();
+              formData.set('first_name', values.firstName);
+              formData.set('last_name', values.lastName);
+              formData.set('email', values.email);
+              formData.set('password', values.password);
+              formData.set('password_confirmation', values.confirmPassword);
+              formData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+              formData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+              _context.next = 12;
+              return register(formData);
 
-              case 26:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+            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;
 
-                if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                }
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
-                onClose();
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
 
-              case 30:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[15, 22]]);
-      }));
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
 
-      return onSubmit;
-    }()
-  }, function (props) {
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  return React__default.createElement(material.Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "signup-modal"
+  }, React__default.createElement(material.Box, {
+    style: style$1
+  }, React__default.createElement("div", null, React__default.createElement(formik.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__default.createElement(formik.Form, {
-      onSubmit: props.handleSubmit
+      onSubmit: handleSubmit
     }, React__default.createElement("div", {
-      className: "register-container"
-    }, React__default.createElement("div", null, "Create account"), React__default.createElement("button", {
-      type: "button",
-      onClick: onClose
-    }, "Close"), React__default.createElement("div", {
-      className: "register-container__twoFields"
+      className: "signup-container"
+    }, React__default.createElement("div", {
+      className: "title"
+    }, "Create an Account"), React__default.createElement("div", {
+      className: "signup-container__twoFields"
     }, React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'firstName',
-      validate: requiredValidator()
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.meta;
-      return React__default.createElement(material.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__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'lastName',
-      validate: requiredValidator()
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.meta;
-      return React__default.createElement(material.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__default.createElement("div", {
-      className: "register-container__singleField"
+      className: "signup-container__singleField"
     }, React__default.createElement("div", {
       className: ""
     }, React__default.createElement(formik.Field, {
-      name: 'email',
-      validate: requiredValidator()
-    }, function (_ref5) {
-      var field = _ref5.field,
-          meta = _ref5.meta;
-      return React__default.createElement(material.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__default.createElement("div", {
-      className: "register-container__twoFields"
+      className: "signup-container__twoFields"
     }, React__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'password',
-      validate: requiredValidator()
-    }, function (_ref6) {
-      var field = _ref6.field,
-          meta = _ref6.meta;
-      return React__default.createElement(material.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__default.createElement("div", {
       className: "is-half"
     }, React__default.createElement(formik.Field, {
-      name: 'confirmPassword',
-      validate: requiredValidator()
-    }, function (_ref7) {
-      var field = _ref7.field,
-          meta = _ref7.meta;
-      return React__default.createElement(material.TextField, Object.assign({
-        label: 'Confirm Passwod',
-        type: 'password',
-        fullWidth: true,
-        error: !!meta.error && meta.touched,
-        helperText: meta.touched && meta.error
-      }, field));
-    })))), React__default.createElement("button", {
-      type: "submit"
-    }, "Submit"));
-  }));
+      name: "confirmPassword",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    })))), React__default.createElement("div", {
+      className: "signup-action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React__default.createElement("div", {
+      className: "login"
+    }, React__default.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__*/Yup.object().shape({
+  email: /*#__PURE__*/Yup.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 = React.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__default.createElement(material.Modal, {
+    open: true,
+    onClose: _onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "forgot-password-modal"
+  }, React__default.createElement(material.Box, {
+    style: style$2
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      email: ''
+    },
+    validationSchema: Schema,
+    onSubmit: onForgotPassword
+  }, function (_ref4) {
+    var isValid = _ref4.isValid,
+        dirty = _ref4.dirty,
+        handleSubmit = _ref4.handleSubmit;
+    return React__default.createElement(formik.Form, {
+      onSubmit: handleSubmit
+    }, React__default.createElement("div", {
+      className: "forgot-password-container"
+    }, React__default.createElement("div", {
+      className: "title"
+    }, "Password Reset"), React__default.createElement("div", {
+      className: "forgot-password-container__singleField"
+    }, React__default.createElement(formik.Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "forgot-password-action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')), React__default.createElement("div", {
+      className: "login"
+    }, React__default.createElement("span", {
+      onClick: onLogin
+    }, "Back to Log In")));
+  }))));
 };
 
 var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
@@ -1824,7 +2112,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,
@@ -1878,10 +2166,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 = {};
@@ -1932,6 +2220,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) {
@@ -1972,62 +2268,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__default.createElement(material.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 = styles.useTheme();
-  var inputProps = {
-    sx: customTheme == null ? void 0 : customTheme.input
-  };
-  return React__default.createElement(TextField, Object.assign({
-    id: field.name,
-    label: label,
-    type: type,
-    select: isSelectField,
-    fullWidth: true,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    SelectProps: {
-      "native": true,
-      className: theme,
-      MenuProps: {
-        className: theme
-      }
-    },
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: InputProps,
-    inputProps: _extends({}, inputProps, pInputProps),
-    inputRef: inputRef
-  }, field), isSelectField ? _map(selectOptions, function (option) {
-    return React__default.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;
 };
@@ -2094,50 +2334,80 @@ 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 = styles.useTheme();
-  return React__default.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 = React.useCallback(_debounce(function (cb) {
+    return void cb();
+  }, 1000), []);
+  React.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__default.createElement(TextField, 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() {
@@ -2401,7 +2671,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 = React.useRef(values.country);
   React.useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
@@ -2456,7 +2727,7 @@ var LogicRunner = function LogicRunner(_ref) {
       };
     }();
 
-    fetchStates();
+    shouldFetchCountries && fetchStates();
   }, [values.country, setStates, setFieldValue]);
   var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
   React.useEffect(function () {
@@ -2467,8 +2738,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) || '',
@@ -2476,15 +2747,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) {}
         }
@@ -2557,10 +2828,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 = styles$1.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2571,7 +2853,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       dataWithUniqueIds = _useState[0],
       setDataWithUniqueIds = _useState[1];
 
-  var _useState2 = React.useState(!!access_token),
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
+
+  var _useState2 = React.useState(!!(pIsLoggedIn || xtfCookie)),
       isLoggedIn = _useState2[0],
       setIsLoggedIn = _useState2[1];
 
@@ -2600,14 +2884,18 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setUserExpired = _useState8[1];
 
   var _useState9 = React.useState(false),
-      showModalRegister = _useState9[0],
-      setShowModalRegister = _useState9[1];
+      showModalSignup = _useState9[0],
+      setShowModalSignup = _useState9[1];
 
-  var _useState10 = React.useState([]),
-      ticketsQuantity = _useState10[0],
-      setTicketsQuantity = _useState10[1];
+  var _useState10 = React.useState(false),
+      showModalForgotPassword = _useState10[0],
+      setShowModalForgotPassword = _useState10[1];
 
-  var _useState11 = React.useState({
+  var _useState11 = React.useState([]),
+      ticketsQuantity = _useState11[0],
+      setTicketsQuantity = _useState11[1];
+
+  var _useState12 = React.useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2622,16 +2910,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
     state: '',
     zip: ''
   }),
-      userValues = _useState11[0],
-      setUserValues = _useState11[1];
+      userValues = _useState12[0],
+      setUserValues = _useState12[1];
 
-  var _useState12 = React.useState(true),
-      loading = _useState12[0],
-      setLoading = _useState12[1];
+  var _useState13 = React.useState(true),
+      loading = _useState13[0],
+      setLoading = _useState13[1];
 
-  var _useState13 = React.useState(null),
-      error = _useState13[0],
-      setError = _useState13[1];
+  var _useState14 = React.useState(null),
+      error = _useState14[0],
+      setError = _useState14[1];
 
   var emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '');
 
@@ -2681,10 +2969,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   };
 
   React.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
 
   React.useEffect(function () {
     // fetch countries data
@@ -2733,7 +3021,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       };
     }();
 
-    fetchCountries();
+    shouldFetchCountries && fetchCountries();
     fetchCart();
   }, []); // fetch cart data
 
@@ -2793,7 +3081,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(isWindowDefined && token)) {
+              if (!(isWindowDefined && token || isLoggedIn)) {
                 _context4.next = 10;
                 break;
               }
@@ -2804,7 +3092,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
@@ -2840,7 +3128,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   React.useEffect(function () {
     fetchUserData(access_token);
-  }, [access_token]);
+  }, [access_token, isLoggedIn]);
   React.useEffect(function () {
     var collectPaymentData = /*#__PURE__*/function () {
       var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5() {
@@ -2896,16 +3184,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);
     }
 
@@ -2914,28 +3206,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__default.createElement(Backdrop, {
-      sx: {
-        color: '#fff'
-      },
-      open: true
-    }, React__default.createElement(material.CircularProgress, {
-      color: "inherit"
-    }));
   }
 
   return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
-  }, !!expirationTime && enableTimer && React__default.createElement(TimerWidget$1, {
+  }, loading && React__default.createElement(Backdrop, {
+    sx: {
+      color: '#fff',
+      backgroundColor: '#000000bd',
+      zIndex: 1205
+    },
+    open: true
+  }, React__default.createElement(material.CircularProgress, {
+    color: "inherit"
+  })), !!expirationTime && enableTimer && React__default.createElement(TimerWidget$1, {
     expires_at: expirationTime,
     onCountdownFinish: onCountdownFinish
   }), React__default.createElement(formik.Formik, {
@@ -2945,10 +3236,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) {
@@ -2972,14 +3263,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);
 
@@ -2996,27 +3287,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;
@@ -3045,33 +3339,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') {
@@ -3090,12 +3385,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) {
@@ -3114,7 +3414,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setValues: props.setValues,
       setUserValues: setUserValues,
       onGetStatesSuccess: onGetStatesSuccess,
-      onGetStatesError: onGetStatesError
+      onGetStatesError: onGetStatesError,
+      shouldFetchCountries: shouldFetchCountries
     }), React__default.createElement("div", {
       className: "billing-info-container " + theme
     }, React__default.createElement(SnackbarAlert, {
@@ -3127,8 +3428,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }
     }), !isLoggedIn && React__default.createElement("div", {
       className: "account-actions-block"
-    }, React__default.createElement("div", null, accountInfoTitle), React__default.createElement("div", null, "Login & skip ahead:"), React__default.createElement("div", {
-      className: "login-block"
+    }, React__default.createElement("div", {
+      className: "action-item"
+    }, React__default.createElement("div", null, accountInfoTitle), React__default.createElement("div", null, "Login & skip ahead:")), React__default.createElement("div", {
+      className: "action-item login-block"
     }, React__default.createElement("button", {
       className: "login-register-button",
       type: "button",
@@ -3186,7 +3489,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
           })));
@@ -3194,7 +3497,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     }), !_isEmpty(ticketHoldersFields.fields) && React__default.createElement("div", {
       className: "ticket-holders-fields"
-    }, React__default.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
+    }, React__default.createElement("h2", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React__default.createElement("div", {
         key: _item
       }, React__default.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
@@ -3229,6 +3532,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React__default.createElement(LoginModal, {
+    logo: logo,
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -3246,20 +3550,37 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
       _onGetProfileDataSuccess(data);
     },
-    onGetProfileDataError: onGetProfileDataError
-  }), showModalRegister && React__default.createElement(RegisterModal, {
+    onGetProfileDataError: onGetProfileDataError,
+    showSignUpButton: showSignUpButton,
+    showForgotPasswordButton: showForgotPasswordButton,
+    onForgotPassword: function onForgotPassword() {
+      setShowModalLogin(false);
+      setShowModalForgotPassword(true);
+    },
+    onSignup: function onSignup() {
+      setShowModalLogin(false);
+      setShowModalSignup(true);
+    }
+  }), showModalSignup && React__default.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__default.createElement(ForgotPasswordModal, {
+    onClose: function onClose() {
+      setShowModalForgotPassword(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalForgotPassword(false);
+      setShowModalLogin(true);
     },
-    onGetProfileDataError: onGetProfileDataError
+    onForgotPasswordSuccess: onForgotPasswordSuccess,
+    onForgotPasswordError: onForgotPasswordError
   }));
 };
 
@@ -3478,7 +3799,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onSubmit: handleSubmit
   }, React__default.createElement("div", {
     className: "card_form_inner"
-  }, React__default.createElement("label", {
+  }, React__default.createElement("div", {
     className: "card_number_element"
   }, React__default.createElement("span", {
     className: "card_label_text"
@@ -3488,19 +3809,21 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onChange: _identity,
     onBlur: _identity,
     onFocus: _identity
-  })), React__default.createElement("label", {
+  })), React__default.createElement("div", {
+    className: "elements"
+  }, React__default.createElement("div", {
     className: "expiration_element"
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React__default.createElement(reactStripeJs.CardExpiryElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), React__default.createElement("label", {
+  })), React__default.createElement("div", {
     className: "cvc_element"
   }, React__default.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React__default.createElement(reactStripeJs.CardCvcElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), !disableZipSection && React__default.createElement("label", {
+  }))), !disableZipSection && React__default.createElement("div", {
     className: "zip_element"
   }, React__default.createElement("p", {
     className: "card_label_text"
@@ -3590,7 +3913,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 = React.useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3605,16 +3930,20 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setError = _useState3[1];
 
   var _useState4 = React.useState(false),
-      paymentIsLoading = _useState4[0],
-      setPaymentIsLoading = _useState4[1];
+      showPaymentPlanSection = _useState4[0],
+      setShowPaymentPlanSection = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      paymentIsLoading = _useState5[0],
+      setPaymentIsLoading = _useState5[1];
 
-  var _useState5 = React.useState(true),
-      paymentDataIsLoading = _useState5[0],
-      setPaymentDataIsLoading = _useState5[1];
+  var _useState6 = React.useState(true),
+      paymentDataIsLoading = _useState6[0],
+      setPaymentDataIsLoading = _useState6[1];
 
-  var _useState6 = React.useState([]),
-      conditions = _useState6[0],
-      setConditions = _useState6[1];
+  var _useState7 = React.useState([]),
+      conditions = _useState7[0],
+      setConditions = _useState7[1];
 
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
@@ -3741,7 +4070,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;
               }
@@ -3826,11 +4155,33 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }, label), React__default.createElement("div", {
       className: className + " order_info_text"
     }, normalizer(orderData[id], orderData.currency)));
-  })), total !== "0.00" ? React__default.createElement("div", {
+  })), enablePaymentPlan && React__default.createElement("div", {
+    className: "payment_toggle"
+  }, React__default.createElement("label", {
+    htmlFor: "togBtn",
+    className: "switch"
+  }, React__default.createElement("input", {
+    type: "checkbox",
+    id: "togBtn",
+    disabled: true,
+    onChange: function onChange() {
+      return setShowPaymentPlanSection(!showPaymentPlanSection);
+    }
+  }), React__default.createElement("div", {
+    className: "slider round"
+  }), React__default.createElement("span", {
+    className: "tog_text"
+  }, "Click to checkout using Payment Plan"))), showPaymentPlanSection && React__default.createElement("div", {
+    className: "payment_plan"
+  }, React__default.createElement("h2", null, "PAYMENT PLAN"), React__default.createElement("div", {
+    className: "plan_block"
+  }, React__default.createElement("h3", null, "Mbrand Payment Plan Terms"), React__default.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__default.createElement("p", null, "This includes a non-refundable admin fee of $3.00 per payment."), React__default.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__default.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__default.createElement("p", null, "Your payment will proceed with the card ending in **** 4242."))), total !== '0.00' ? React__default.createElement("div", {
     className: "payment_info"
   }, React__default.createElement("div", {
     className: "payment_info_label"
-  }, "Please provide your payment information"), showErrorText && React__default.createElement("p", {
+  }, "ORDER CONFIRMATION"), showErrorText && React__default.createElement("p", {
     className: "payment_info__error"
   }, errorText), React__default.createElement("div", null, React__default.createElement(reactStripeJs.Elements, {
     stripe: getStripePromise(reviewData),
@@ -3860,7 +4211,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
   }, paymentIsLoading ? React__default.createElement(CircularProgress, {
     size: 26
-  }) : "Complete Registration")))));
+  }) : 'Complete Registration')))));
 };
 
 var config = {
@@ -4024,7 +4375,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,
@@ -4123,7 +4476,16 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
 
   return React__default.createElement("div", {
     className: "confirmation-page"
-  }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
+  }, data && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: 'header-container'
+  }, React__default.createElement("div", {
+    className: 'header-product-image'
+  }, React__default.createElement("img", {
+    className: 'product-image',
+    src: data.product_image
+  })), React__default.createElement("div", {
+    className: "header-product-text"
+  }, React__default.createElement("p", {
     className: "title"
   }, "Your Tickets are Confirmed!"), React__default.createElement("div", {
     className: "share-message-section"
@@ -4131,7 +4493,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
     className: "main"
   }, "Your tickets have been emailed to you"), React__default.createElement("span", {
     className: "helper"
-  }, "Please bring them with you to the event")), data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  }, "Please bring them with you to the event")))), data.disable_referral === false && isReferralEnabled && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "referral_text_image_section"
   }, React__default.createElement("div", {
     className: "referral_text_section"
@@ -4148,6 +4510,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }, " Invite friends "), "and we'll refund up to", React__default.createElement("span", {
     className: "strong-text"
   }, " 100% "), "of your ticket money, if they buy tickets as well!")), React__default.createElement("img", {
+    className: 'body-product-image',
     src: data.product_image,
     alt: "No Data"
   })), React__default.createElement("div", {
@@ -4177,10 +4540,12 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       navigator.clipboard.writeText(_get(inputRef, 'current.value'));
       onLinkCopied();
     }
-  }, React__default.createElement("img", {
+  }, hasCopyIcon ? React__default.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
     alt: "copy"
-  })))), (showDefaultShareButtons || !!shareButtons.length) && React__default.createElement(SocialButtons, {
+  }) : React__default.createElement("span", {
+    className: 'copy-icon'
+  }, "Copy")))), (showDefaultShareButtons || !!shareButtons.length) && React__default.createElement(SocialButtons, {
     showDefaultShareButtons: showDefaultShareButtons,
     name: data.product_name,
     appId: messengerAppId,
@@ -4241,7 +4606,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__default.createElement("div", {
+  var onSaleContent = React__default.createElement("div", {
     className: "get-tickets"
   }, React__default.createElement(Box, {
     className: "get-tickets__selectbox"
@@ -4271,17 +4636,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';
   }
 
@@ -4292,7 +4657,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;
@@ -4307,7 +4671,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;
     }
 
@@ -4510,7 +4874,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() {
@@ -4529,7 +4894,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onKeyPress: function onKeyPress(event) {
         if (event.key === 'Enter' && isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }), React__default.createElement(Button$1, {
@@ -4537,7 +4902,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }, "APPLY"));
@@ -4556,6 +4921,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());
@@ -4605,6 +4971,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,
@@ -4674,7 +5042,7 @@ function Countdown(_ref) {
     className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
   }, React__default.createElement("div", null, React__default.createElement("p", {
     className: 'title'
-  }, title), React__default.createElement("p", null, duration)), React__default.createElement("p", {
+  }, title), React__default.createElement("p", null, duration)), showMessage && React__default.createElement("p", {
     className: 'message'
   }, message)));
 }
@@ -4734,6 +5102,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,
@@ -4747,6 +5119,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,
@@ -4765,8 +5139,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
       setSelectedTickets = _useState[1];
 
   var isWindowDefined = typeof window !== 'undefined';
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
 
-  var _useState2 = React.useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+  var _useState2 = React.useState((isWindowDefined ? !!window.localStorage.getItem('access_token') : false) || !!xtfCookie),
       isLogged = _useState2[0],
       setIsLogged = _useState2[1];
 
@@ -4837,17 +5212,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);
+    };
+  }();
 
   React.useEffect(function () {
     try {
@@ -4856,7 +5264,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) {}
@@ -4879,34 +5287,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);
@@ -4920,42 +5328,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;
     });
   };
 
@@ -4966,14 +5374,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) {
@@ -4994,15 +5402,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;
               }
 
@@ -5014,7 +5422,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
               total = '';
 
               if (!skipBillingPage) {
-                _context.next = 27;
+                _context2.next = 32;
                 break;
               }
 
@@ -5023,15 +5431,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,
@@ -5042,44 +5464,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 = material.createTheme(themeOptions);
   React.useEffect(function () {
     isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
@@ -5124,34 +5548,35 @@ var TicketsContainer = function TicketsContainer(_ref) {
     style: contentStyle
   }, isLoading ? React__default.createElement(Loader, null) : React__default.createElement("div", {
     ref: ticketsContainerRef
-  }, React__default.createElement(TicketsSection, {
+  }, !isSalesClosed && React__default.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__default.createElement("p", {
+  }), externalUrl ? null : isSalesClosed ? React__default.createElement("p", {
     className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
   }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React__default.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__default.createElement(WaitingList, {
     tickets: tickets,
     eventId: eventId
-  }), codeIsLoading ? React__default.createElement(Loader, null) : showAccessCodeSection ? React__default.createElement(AccessCodeSection, {
+  }), codeIsLoading ? React__default.createElement(Loader, null) : isSalesClosed ? null : showAccessCodeSection ? React__default.createElement(AccessCodeSection, {
     code: code,
     setCode: setCode,
     updateTickets: updateTickets
   }) : showPromoCodeSection ? React__default.createElement(PromoCodeSection, {
     code: code,
     codeIsApplied: codeIsApplied,
+    setCodeIsApplied: setCodeIsApplied,
     showPromoInput: showPromoInput,
     setShowPromoInput: setShowPromoInput,
     setCode: setCode,
@@ -5197,10 +5622,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__default.createElement(EventInfoItem, {
@@ -5247,13 +5670,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 = React.useState(null),
       data = _useState[0],
@@ -5363,24 +5787,20 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
   return React__default.createElement("div", {
     className: "my-ticket " + theme
-  }, loading && React__default.createElement("div", {
-    className: "loading"
-  }, React__default.createElement(CircularProgress, null)), !isLogged ? React__default.createElement("div", {
-    className: "account-actions-block"
-  }, React__default.createElement("div", {
-    className: "login-block"
-  }, React__default.createElement("button", {
-    className: "login-register-button",
-    type: "button",
-    onClick: function onClick() {
-      setShowModalLogin(true);
-    }
-  }, "Login"), React__default.createElement("div", {
-    className: "logo-image-container"
-  }, React__default.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__default.createElement(React__default.Fragment, null, React__default.createElement(Autocomplete, {
+  }, React__default.createElement(React__default.Fragment, null, showModalLogin || !isLogged && React__default.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired,
+    logo: logo
+  })), data && React__default.createElement(React__default.Fragment, null, React__default.createElement("h2", null, "My Ticket Orders"), React__default.createElement("div", {
+    className: "order_event"
+  }, React__default.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5396,7 +5816,12 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
         label: "Events"
       }));
     }
-  }), React__default.createElement(TableContainer, {
+  }), React__default.createElement("button", {
+    type: "button",
+    className: "clear"
+  }, "CLEAR")), loading ? React__default.createElement("div", {
+    className: "loading"
+  }, React__default.createElement(CircularProgress, null)) : React__default.createElement(React__default.Fragment, null, React__default.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React__default.createElement(Table, {
@@ -5419,7 +5844,7 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
-  })), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
+  }))), React__default.createElement(React__default.Fragment, null, showModalLogin && React__default.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -5436,29 +5861,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 = React.useState(null),
+      pdfError = _useState[0],
+      setPdfError = _useState[1];
+
   return React__default.createElement("div", {
     className: "tickets-box"
-  }, React__default.createElement("h4", {
+  }, React__default.createElement(SnackbarAlert, {
+    type: "error",
+    isOpen: !!pdfError,
+    message: pdfError || '',
+    onClose: function onClose() {
+      return setPdfError(null);
+    }
+  }), React__default.createElement("h4", {
     className: "sub-title"
   }, "Your Tickets"), React__default.createElement(TableContainer, {
     component: Paper
   }, React__default.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Ticket ID"), React__default.createElement(TableCell, null, "Ticket Type"), React__default.createElement(TableCell, null, "Ticket Holder Name"), React__default.createElement(TableCell, null, "Status"), React__default.createElement(TableCell, null, "Download"), React__default.createElement(TableCell, null))), React__default.createElement(TableBody, null, tickets.map(function (ticket, index) {
+  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null), React__default.createElement(TableCell, null))), React__default.createElement(TableBody, null, tickets.map(function (ticket, index) {
     var _ticket$add_ons;
 
     return React__default.createElement(React.Fragment, {
       key: index
-    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, ticket.hash), React__default.createElement(TableCell, null, ticket.ticket_type), React__default.createElement(TableCell, null, ticket.holder_name), React__default.createElement(TableCell, null, ticket.status), React__default.createElement(TableCell, null, ticket.status !== "Sold" && React__default.createElement("span", {
+    }, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket ID"), React__default.createElement("span", null, ticket.hash))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket Type"), React__default.createElement("span", null, ticket.ticket_type))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Ticket Holder"), React__default.createElement("span", null, ticket.holder_name))), React__default.createElement(TableCell, null, React__default.createElement("div", {
+      className: "cell-block"
+    }, React__default.createElement("span", null, "Status"), React__default.createElement("span", null, ticket.status))), ticket.pdf_link && ticket.status !== "Sold" ? React__default.createElement(TableCell, null, Boolean(icon) && React__default.createElement("img", {
+      src: icon,
+      alt: "nodata"
+    }), React__default.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
-      onClick: function onClick() {
-        return downloadPDF(ticket.pdf_link);
-      }
-    }, "Download")), React__default.createElement(TableCell, null, ticket.is_sellable && React__default.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__default.createElement(TableCell, null, ticket.is_sellable && React__default.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
@@ -5482,11 +5972,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 = styles.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
@@ -5498,7 +5988,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$1 = {
+var style$3 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5511,33 +6001,33 @@ var style$1 = {
   maxHeight: '85vh',
   overflow: 'auto'
 };
-var schema = /*#__PURE__*/yup.object().shape({
-  to: /*#__PURE__*/yup.string().required(),
-  first_name: /*#__PURE__*/yup.string().when('to', {
+var schema = /*#__PURE__*/Yup.object().shape({
+  to: /*#__PURE__*/Yup.string().required(),
+  first_name: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().required('First Name is required')
+    then: /*#__PURE__*/Yup.string().required('First Name is required')
   }),
-  last_name: /*#__PURE__*/yup.string().when('to', {
+  last_name: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().required('Last Name is required')
+    then: /*#__PURE__*/Yup.string().required('Last Name is required')
   }),
-  email: /*#__PURE__*/yup.string().when('to', {
+  email: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().email('Invalid email').required('Email is required')
+    then: /*#__PURE__*/Yup.string().email('Invalid email').required('Email is required')
   }),
-  confirm_email: /*#__PURE__*/yup.string().when('to', {
+  confirm_email: /*#__PURE__*/Yup.string().when('to', {
     is: function is(to) {
       return to === 'friend';
     },
-    then: /*#__PURE__*/yup.string().email('Invalid email').oneOf([yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
+    then: /*#__PURE__*/Yup.string().email('Invalid email').oneOf([Yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
   }),
-  confirm: /*#__PURE__*/yup.boolean().oneOf([true])
+  confirm: /*#__PURE__*/Yup.boolean().oneOf([true])
 });
 var initialValues = {
   to: 'friend',
@@ -5567,7 +6057,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'resale-modal'
   }, React__default.createElement(Box, {
-    style: style$1
+    style: style$3
   }, React__default.createElement("h3", null, "Sell Ticket"), React__default.createElement("div", null, React__default.createElement("h3", null, "Ticket Details"), React__default.createElement("div", null, React__default.createElement("h4", null, "Event"), React__default.createElement("p", null, event_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket Holder"), React__default.createElement("p", null, holder_name)), React__default.createElement("div", null, React__default.createElement("h4", null, "Ticket ID"), React__default.createElement("p", null, hash))), React__default.createElement("div", null, React__default.createElement("h3", null, "Sell to Whom"), React__default.createElement(formik.Formik, {
     initialValues: initialValues,
     validationSchema: schema,
@@ -5633,12 +6123,12 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       type: 'text',
       component: CustomField
     }))))), ticket_type_is_active && React__default.createElement("div", null, React__default.createElement(formik.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__default.createElement("div", null, React__default.createElement("h4", null, "Terms of Resale"), React__default.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__default.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React__default.createElement("strong", null, event_name), " and I will not receive any refund."), React__default.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__default.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__default.createElement(formik.Field, {
+    })), React__default.createElement("div", null, React__default.createElement("h4", null, "Terms of Resale"), React__default.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__default.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React__default.createElement("strong", null, event_name), " and I will not receive any refund."), React__default.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__default.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__default.createElement(formik.Field, {
       name: 'confirm',
       label: 'I agree',
       type: 'checkbox',
@@ -5652,7 +6142,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
   }))));
 };
 
-var style$2 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5680,7 +6170,7 @@ var ConfirmModal = function ConfirmModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: 'confirm-modal'
   }, React__default.createElement(Box, {
-    style: style$2
+    style: style$4
   }, React__default.createElement("p", null, message), React__default.createElement("div", {
     className: 'footer'
   }, React__default.createElement(Button, {
@@ -5698,10 +6188,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 = React.useState({}),
       data = _useState[0],
@@ -5902,6 +6397,12 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     };
   }();
 
+  var orderSummery = "ID " + data.id + ", placed";
+
+  if (data.date) {
+    orderSummery += " " + data.date;
+  }
+
   return React__default.createElement("div", {
     className: "order-details"
   }, loading ? React__default.createElement("div", {
@@ -5910,19 +6411,45 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     className: "layout-title"
   }, "Order Details"), React__default.createElement("div", {
     className: "order-summary-box"
-  }, React__default.createElement("h4", {
+  }, React__default.createElement("div", {
+    className: "summary-block"
+  }, React__default.createElement("div", {
+    className: "summary-item"
+  }, React__default.createElement("h6", {
     className: "sub-title"
-  }, "Order Summary"), React__default.createElement("div", {
+  }, "Order Summary"), React__default.createElement("p", null, orderSummery)), React__default.createElement("div", {
+    className: "summary-item"
+  }, React__default.createElement("div", {
+    className: "return-button-container"
+  }, React__default.createElement("button", {
+    type: "button",
+    className: "return-button",
+    onClick: function onClick() {
+      if (typeof window !== 'undefined') {
+        window.location.assign('/orders');
+      }
+    }
+  }, "Back to Orders")))), React__default.createElement("div", {
     className: "personal-link"
-  }, React__default.createElement("b", null, "Your personal share link for this event is: "), React__default.createElement("a", {
+  }, React__default.createElement("div", {
+    className: "link-item"
+  }, React__default.createElement("span", null, "Personal Share Link: "), React__default.createElement("a", {
     href: data == null ? void 0 : data.personal_share_link,
     target: "_blank",
     rel: "noreferrer"
-  }, data == null ? void 0 : data.personal_share_link)), React__default.createElement(TableContainer, {
+  }, Boolean(personalLinkIcon) && React__default.createElement("img", {
+    src: personalLinkIcon,
+    alt: "Icon"
+  }), data == null ? void 0 : data.personal_share_link)), React__default.createElement("div", {
+    className: "link-item"
+  }, React__default.createElement("p", null, "So far, you\u2019ve referred " + data.sales_referred + " tickets"))), React__default.createElement(TableContainer, {
     component: Paper
   }, React__default.createElement(Table, {
+    className: "tt-type",
     "aria-label": "collapsible table"
-  }, React__default.createElement(TableHead, null, React__default.createElement(TableRow, null, React__default.createElement(TableCell, null, "Items"), React__default.createElement(TableCell, null, "Price"), React__default.createElement(TableCell, null, "Quantity"), React__default.createElement(TableCell, null, "Total"))), React__default.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__default.createElement(TableHead, null, React__default.createElement(TableRow, null, _map(columns, function (item) {
+    return React__default.createElement(TableCell, null, item.label || '');
+  }))), React__default.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__default.createElement(TableRow, {
       key: index
     }, React__default.createElement(TableCell, null, React__default.createElement("b", null, "Ticket Type: "), ticket.name), React__default.createElement(TableCell, null, ticket.currency + ticket.price), React__default.createElement(TableCell, null, ticket.quantity), React__default.createElement(TableCell, null, ticket.currency + ticket.total));
@@ -5942,7 +6469,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');
       }
     }
@@ -5957,6 +6486,120 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }));
 };
 
+var Schema$1 = /*#__PURE__*/Yup.object().shape({
+  password: /*#__PURE__*/Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  password_confirmation: /*#__PURE__*/Yup.string().required('Required').oneOf([/*#__PURE__*/Yup.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 = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  return React__default.createElement("div", {
+    className: "reset-password"
+  }, React__default.createElement("div", {
+    className: "title"
+  }, "Change Password"), React__default.createElement(formik.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__default.createElement(formik.Form, null, React__default.createElement("div", {
+      className: "body"
+    }, React__default.createElement("div", {
+      className: "field-item"
+    }, React__default.createElement(formik.Field, {
+      name: "password",
+      label: "New Password",
+      type: "password",
+      component: CustomField
+    })), React__default.createElement("div", {
+      className: "field-item"
+    }, React__default.createElement(formik.Field, {
+      name: "password_confirmation",
+      label: "Confirm Password",
+      type: "password",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "action-button"
+    }, React__default.createElement("button", {
+      type: "submit",
+      disabled: !(isValid && dirty)
+    }, loading ? React__default.createElement(material.CircularProgress, {
+      size: "22px"
+    }) : 'Submit')));
+  }));
+};
+
 var TicketResaleContainer = function TicketResaleContainer(_ref) {
   var _ref$onProcessTicketS = _ref.onProcessTicketSuccess,
       onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
@@ -6068,7 +6711,7 @@ var TicketResaleContainer = function TicketResaleContainer(_ref) {
   }, React__default.createElement("h3", null, successMessage ? successMessage : error)));
 };
 
-var style$3 = {
+var style$5 = {
   position: 'absolute',
   top: '10%',
   left: '50%',
@@ -6092,7 +6735,7 @@ var RedirectModal = function RedirectModal(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "redirect-modal"
   }, React__default.createElement(Box, {
-    style: style$3
+    style: style$5
   }, React__default.createElement("p", null, message), React__default.createElement("div", {
     className: "footer"
   }, React__default.createElement("button", {
@@ -6100,7 +6743,7 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-var style$4 = {
+var style$6 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6206,7 +6849,7 @@ var RsvpContainer = function RsvpContainer(_ref) {
     "aria-describedby": "modal-modal-description",
     className: "rsvp-modal"
   }, React__default.createElement(Box, {
-    style: style$4,
+    style: style$6,
     className: "rsvp-modal-box"
   }, React__default.createElement("div", {
     className: "rsvp-modal-container"
@@ -6249,11 +6892,13 @@ var RsvpContainer = function RsvpContainer(_ref) {
 
 exports.BillingInfoContainer = BillingInfoContainer;
 exports.ConfirmationContainer = ConfirmationContainer;
+exports.ForgotPasswordModal = ForgotPasswordModal;
 exports.LoginModal = LoginModal;
 exports.MyTicketsContainer = MyTicketsContainer;
 exports.OrderDetailsContainer = OrderDetailsContainer;
 exports.PaymentContainer = PaymentContainer;
 exports.RedirectModal = RedirectModal;
+exports.ResetPasswordContainer = ResetPasswordContainer;
 exports.RsvpContainer = RsvpContainer;
 exports.TicketResaleContainer = TicketResaleContainer;
 exports.TicketsContainer = TicketsContainer;