tf-checkout-react 1.0.106 → 1.2.1

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

@@ -4,65 +4,66 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var React = require('react');
-var React__default = _interopDefault(React);
-var formik = require('formik');
+var material = require('@mui/material');
+var Backdrop = _interopDefault(require('@mui/material/Backdrop'));
 var Button = _interopDefault(require('@mui/material/Button'));
-var _identity = _interopDefault(require('lodash/identity'));
-var _map = _interopDefault(require('lodash/map'));
+var styles = require('@mui/material/styles');
+var axios = _interopDefault(require('axios'));
+var formik = require('formik');
 var _get = _interopDefault(require('lodash/get'));
+var _identity = _interopDefault(require('lodash/identity'));
 var _includes = _interopDefault(require('lodash/includes'));
-var _isEqual = _interopDefault(require('lodash/isEqual'));
 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 _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
-var _isArray = _interopDefault(require('lodash/isArray'));
+var _isEqual = _interopDefault(require('lodash/isEqual'));
+var _map = _interopDefault(require('lodash/map'));
 var nanoid = require('nanoid');
+var React = require('react');
+var React__default = _interopDefault(React);
+var _forEach = _interopDefault(require('lodash/forEach'));
+var DatePicker = _interopDefault(require('@mui/lab/DatePicker'));
+var AdapterMoment = _interopDefault(require('@mui/lab/AdapterMoment'));
+var LocalizationProvider = _interopDefault(require('@mui/lab/LocalizationProvider'));
+var TextField = _interopDefault(require('@mui/material/TextField'));
+var styles$1 = require('@mui/styles');
 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');
-var Backdrop = _interopDefault(require('@mui/material/Backdrop'));
+var Yup = require('yup');
+var Box = _interopDefault(require('@mui/material/Box'));
+var Modal = _interopDefault(require('@mui/material/Modal'));
 var Countdown$1 = _interopDefault(require('react-countdown'));
 var _isNumber = _interopDefault(require('lodash/isNumber'));
 var SVG = _interopDefault(require('react-inlinesvg'));
-var DatePicker = _interopDefault(require('@mui/lab/DatePicker'));
-var AdapterMoment = _interopDefault(require('@mui/lab/AdapterMoment'));
-var LocalizationProvider = _interopDefault(require('@mui/lab/LocalizationProvider'));
+var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
+var _isArray = _interopDefault(require('lodash/isArray'));
 var Container = _interopDefault(require('@mui/material/Container'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
 var reactStripeJs = require('@stripe/react-stripe-js');
 var stripeJs = require('@stripe/stripe-js');
 var reactShare = require('react-share');
-var _some = _interopDefault(require('lodash/some'));
+var privateTheming = require('@mui/private-theming');
+var jwt_decode = _interopDefault(require('jwt-decode'));
 var _find = _interopDefault(require('lodash/find'));
+var _some = _interopDefault(require('lodash/some'));
 var Button$1 = _interopDefault(require('react-bootstrap/Button'));
-var jwt_decode = _interopDefault(require('jwt-decode'));
+var moment = _interopDefault(require('moment-timezone'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
 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) {
@@ -910,32 +911,6 @@ try {
 }
 });
 
-var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-var combineValidators = function combineValidators() {
-  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
-    validators[_key] = arguments[_key];
-  }
-
-  return function () {
-    for (var i = 0; i < validators.length; ++i) {
-      var error_message = validators[i].apply(validators, arguments);
-      if (error_message) return error_message;
-    }
-  };
-};
-var requiredValidator = function requiredValidator(value, message) {
-  var errorMessage = '';
-
-  if (!value) {
-    errorMessage = message || 'Required';
-  }
-
-  return errorMessage;
-};
-var emailValidator = function emailValidator(email) {
-  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
-};
-
 var CONFIGS = {};
 var setConfigs = function setConfigs(configs) {
   _forEach(configs, function (value, key) {
@@ -1005,14 +980,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 +1073,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 +1094,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 +1109,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 ? {
@@ -1109,6 +1167,7 @@ var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWit
 };
 
 var isWindowDefined = typeof window !== 'undefined';
+var isDocumentDefined = typeof document !== 'undefined';
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
   'Content-Type': 'application/vnd.api+json'
@@ -1180,20 +1239,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;
@@ -1233,8 +1313,26 @@ var handleSetAccessToken = function handleSetAccessToken(token) {
   }
 };
 function getEvent(id) {
+  var referralValue = "";
+
+  if (isWindowDefined) {
+    var params = new URL("" + window.location);
+    var referralId = params.searchParams.get('ttf_r') || '';
+    var referral_key = window.localStorage.getItem('referral_key');
+    var referralIdlocal = "";
+
+    if (referral_key) {
+      referralIdlocal = referral_key.split('.')[1];
+    }
+
+    referralValue = referralId || referralIdlocal;
+  }
+
   var response = publicRequest.get("v1/event/" + id, {
-    headers: ttfHeaders
+    headers: _extends({}, ttfHeaders, {
+      "Referer-Url": isDocumentDefined ? document.referrer : '',
+      "Referrer-Id": isWindowDefined ? referralValue : ''
+    })
   })["catch"](function (error) {
     throw error;
   });
@@ -1253,7 +1351,10 @@ function getTickets(id, promoCode) {
 }
 var addToCart = function addToCart(id, data) {
   var res = publicRequest.post("v1/event/" + id + "/add-to-cart/", {
-    data: data
+    data: data,
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
   });
   return res;
 };
@@ -1272,28 +1373,37 @@ var postOnCheckout = function postOnCheckout(data, accessToken) {
   return res;
 };
 var authorize = function authorize(data) {
-  return publicRequest.post("v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
+  return publicRequest.post("/auth?clientId=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
 };
 var register = function register(data) {
   return publicRequest.post('v1/oauth/register-rn', data);
 };
-var getAccessToken = function getAccessToken(data) {
-  return publicRequest.post('v1/oauth/access_token', data);
-};
 var getPaymentData = function getPaymentData(hash) {
-  var response = publicRequest.get("v1/order/" + hash + "/review/")["catch"](function (error) {
+  var response = publicRequest.get("v1/order/" + hash + "/review/", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return response;
 };
 var handlePaymentSuccess = function handlePaymentSuccess(orderHash) {
-  var res = publicRequest.post("v1/order/" + orderHash + "/success")["catch"](function (error) {
+  var res = publicRequest.post("v1/order/" + orderHash + "/success", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return res;
 };
 var handleFreeSuccess = function handleFreeSuccess(orderHash) {
-  var res = publicRequest.post("v1/order/" + orderHash + "/complete_free_registration")["catch"](function (error) {
+  var res = publicRequest.post("v1/order/" + orderHash + "/complete_free_registration", {
+    headers: {
+      "Referer-Url": isDocumentDefined ? document.referrer : ''
+    }
+  })["catch"](function (error) {
     throw error;
   });
   return res;
@@ -1340,6 +1450,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,480 +1471,574 @@ var declineInvitation = function declineInvitation(hash) {
 var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
   return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
+var validatePhoneNumber = /*#__PURE__*/function () {
+  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(phone) {
+    var response;
+    return runtime_1.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return publicRequest.get("/v1/account/validate_phone?phone=" + phone);
+
+          case 2:
+            response = _context.sent;
+            return _context.abrupt("return", response.data);
+
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
 
-var style = {
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-  minWidth: 480,
-  backgroundColor: '#e3e3e3',
-  border: '1px solid white',
-  outline: 'none'
-};
-var LoginModal = function LoginModal(_ref) {
-  var onClose = _ref.onClose,
-      onLogin = _ref.onLogin,
-      _ref$alreadyHasUser = _ref.alreadyHasUser,
-      alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
-      _ref$userExpired = _ref.userExpired,
-      userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
-      _ref$onAuthorizeSucce = _ref.onAuthorizeSuccess,
-      onAuthorizeSuccess = _ref$onAuthorizeSucce === void 0 ? function () {} : _ref$onAuthorizeSucce,
-      _ref$onAuthorizeError = _ref.onAuthorizeError,
-      onAuthorizeError = _ref$onAuthorizeError === void 0 ? function () {} : _ref$onAuthorizeError,
-      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
-      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
-      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
-      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2,
-      _ref$modalClassname = _ref.modalClassname,
-      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname;
+  return function validatePhoneNumber(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
 
-  var _useState = React.useState(''),
-      error = _useState[0],
-      setError = _useState[1];
+var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+var combineValidators = function combineValidators() {
+  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
+    validators[_key] = arguments[_key];
+  }
 
-  var handleForgotPassword = function handleForgotPassword() {
-    if (typeof window !== 'undefined') {
-      window.open(CONFIGS.BASE_URL + "/password-restore/");
+  return function () {
+    for (var i = 0; i < validators.length; ++i) {
+      var error_message = validators[i].apply(validators, arguments);
+      if (error_message) return error_message;
     }
   };
+};
+var requiredValidator = function requiredValidator(value, message) {
+  var errorMessage = '';
 
-  return React__default.createElement(Modal, {
-    open: true,
-    onClose: onClose,
-    "aria-labelledby": "modal-modal-title",
-    "aria-describedby": "modal-modal-description",
-    className: "login-modal " + modalClassname
-  }, React__default.createElement(Box, {
-    style: style
-  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
-    initialValues: {
-      email: '',
-      password: ''
-    },
-    onSubmit: function () {
-      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
-
-        return runtime_1.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                email = _ref2.email, password = _ref2.password;
-                _context.prev = 1;
-                bodyFormData = new FormData();
-                bodyFormData.append('email', email);
-                bodyFormData.append('password', password);
-                _context.next = 7;
-                return authorize(bodyFormData);
-
-              case 7:
-                resAutorize = _context.sent;
-                bodyFormDataToken = new FormData();
-                bodyFormDataToken.append('code', resAutorize.data.data.code);
-                bodyFormDataToken.append('scope', 'profile');
-                bodyFormDataToken.append('grant_type', 'authorization_code');
-                bodyFormDataToken.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-                bodyFormDataToken.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-                resAccessToken = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getAccessToken(bodyFormDataToken);
+  if (!value) {
+    errorMessage = message || 'Required';
+  }
 
-              case 18:
-                resAccessToken = _context.sent;
-                onAuthorizeSuccess(resAccessToken.data);
-                _context.next = 26;
-                break;
+  return errorMessage;
+};
+var emailValidator = function emailValidator(email) {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
+};
 
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
+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';
 
-                if (axios.isAxiosError(_context.t0)) {
-                  onAuthorizeError(_context.t0);
-                }
+  var error = _get(errors, field.name);
 
-                return _context.abrupt("return");
+  var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
+  var customTheme = styles$1.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);
+};
 
-              case 26:
-                accessToken = _get(resAccessToken, 'data.access_token');
-                handleSetAccessToken(accessToken);
-                profileResponse = null;
-                _context.prev = 29;
-                _context.next = 32;
-                return getProfileData(accessToken);
+var DATE_SIZE = 32;
+var compactStyles = {
+  '& > div': {
+    minWidth: 256
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE
+  }
+};
+var compactStyleTheme = /*#__PURE__*/styles.createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      }
+    }
+  }
+});
+var DatePickerField = function DatePickerField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      form = _ref.form,
+      theme = _ref.theme,
+      _ref$useCompact = _ref.useCompact,
+      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
+  return React__default.createElement(styles.ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React__default.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React__default.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    inputFormat: "DD/MM/YYYY",
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React__default.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: 'dd/mm/yyyy'
+        }),
+        theme: theme,
+        field: field,
+        form: form,
+        label: label,
+        type: "tel"
+      }));
+    }
+  })));
+};
 
-              case 32:
-                profileResponse = _context.sent;
-                onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 40;
-                break;
+var _excluded = ["label", "field", "selectOptions", "theme", "setFieldValue"];
+var CheckboxField = function CheckboxField(_ref) {
+  var _rest$form, _field$name, _rest$form2, _field$name2;
 
-              case 36:
-                _context.prev = 36;
-                _context.t1 = _context["catch"](29);
+  var label = _ref.label,
+      field = _ref.field,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-                if (axios.isAxiosError(_context.t1)) {
-                  onGetProfileDataError(_context.t1);
-                }
+  var customTheme = styles$1.useTheme();
+  return React__default.createElement(material.FormControl, {
+    error: !!(rest != null && (_rest$form = rest.form) != null && _rest$form.errors && rest.form.errors[(_field$name = field == null ? void 0 : field.name) != null ? _field$name : ""])
+  }, React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
+    control: React__default.createElement(Checkbox, Object.assign({}, field, rest)),
+    label: label,
+    componentsProps: {
+      typography: customTheme == null ? void 0 : customTheme.checkbox
+    }
+  })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React__default.createElement(material.FormHelperText, null, "Required") : null);
+};
 
-                return _context.abrupt("return");
+var currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
+  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
+};
+var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
+  return function (value) {
+    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
+  };
+};
+var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
+  if (currency === void 0) {
+    currency = '';
+  }
 
-              case 40:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+  switch (currency) {
+    case 'GBP':
+      return '£';
 
-                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);
-                }
+    case 'EUR':
+      return '€';
 
-                onLogin();
-                _context.next = 49;
+    case 'INR':
+      return '₹';
+
+    case 'JMD':
+      return 'J$';
+
+    case 'NZD':
+      return 'NZ$';
+
+    case 'MYR':
+      return 'RM';
+
+    case 'MXN':
+      return 'Mex$';
+
+    case 'SGD':
+      return 'S$';
+
+    case 'AUD':
+      return 'A$';
+
+    case 'ZAR':
+      return 'R';
+
+    case 'ke':
+      return 'Ksh';
+
+    case 'TRY':
+      return '₺';
+
+    case 'CAD':
+      return 'CA$';
+
+    case 'THB':
+      return '฿';
+
+    case 'ISK':
+      return 'Kr';
+
+    case 'SEK':
+      return 'kr';
+
+    default:
+      return 'US$';
+  }
+};
+
+var PhoneNumberField = function PhoneNumberField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$form = _ref.form,
+      errors = _ref$form.errors,
+      setFieldError = _ref$form.setFieldError,
+      setStatus = _ref$form.setStatus;
+
+  var error = _get(errors, field.name); // eslint-disable-next-line react-hooks/exhaustive-deps
+
+
+  var debounceCb = 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;
+              }
 
-              case 46:
-                _context.prev = 46;
-                _context.t2 = _context["catch"](1);
+              _context.next = 4;
+              return validatePhoneNumber(field.value);
 
-                if (axios.isAxiosError(_context.t2)) {
-                  _error = (_context.t2 == null ? void 0 : (_e$response = _context.t2.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
-                  setError(_error);
-                } else if (_context.t2 instanceof Error) {
-                  setError((_context.t2 == null ? void 0 : _context.t2.message) || 'Error');
-                }
+            case 4:
+              setFieldError(field.name, '');
+              _context.next = 11;
+              break;
 
-              case 49:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee, null, [[1, 46], [15, 22], [29, 36]]);
-      }));
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              message = _get(_context.t0, 'response.data.message', 'Invalid phone number');
+              setFieldError(field.name, message);
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+            case 11:
+              _context.prev = 11;
+              setStatus((_setStatus2 = {}, _setStatus2[field.name] = false, _setStatus2));
+              return _context.finish(11);
 
-      return onSubmit;
-    }()
-  }, function (props) {
-    return React__default.createElement(formik.Form, {
-      onSubmit: props.handleSubmit
-    }, React__default.createElement("div", {
-      className: "modal-title"
-    }, "Login"), React__default.createElement("img", {
-      className: "login-logo-tff",
-      src: "https://www.ticketfairy.com/resources/images/logo-ttf-black.svg",
-      alt: ""
-    }), React__default.createElement("div", {
-      className: "server_auth__error"
-    }, error), alreadyHasUser && React__default.createElement("p", {
-      className: "info-text-for-login"
-    }, "It appears this email is already attached to an account. Please log in here to complete your registration."), userExpired && React__default.createElement("p", {
-      className: "info-text-for-login"
-    }, "Your session has expired, please log in again."), React__default.createElement("div", {
-      className: "login-modal-body"
-    }, React__default.createElement("div", {
-      className: "login-modal-body__email"
-    }, React__default.createElement(formik.Field, {
-      name: 'email',
-      validate: requiredValidator
-    }, function (_ref3) {
-      var field = _ref3.field,
-          meta = _ref3.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));
-    })), React__default.createElement("div", {
-      className: "login-modal-body__password"
-    }, React__default.createElement(formik.Field, {
-      name: 'password',
-      validate: requiredValidator
-    }, function (_ref4) {
-      var field = _ref4.field,
-          meta = _ref4.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));
-    })), React__default.createElement("div", {
-      className: "login-action-button"
-    }, React__default.createElement("button", {
-      type: "submit"
-    }, "Login")), React__default.createElement("div", {
-      className: 'forgot-password'
-    }, React__default.createElement("span", {
-      onClick: handleForgotPassword
-    }, "Forgot password?"))));
-  }))));
+            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,
+    type: type,
+    fullWidth: true,
+    error: !!error,
+    helperText: error,
+    value: field.value || ''
+  }));
 };
 
-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;
+function Loader() {
   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
+    className: "loader-container"
+  }, React__default.createElement(CircularProgress, null));
+}
+
+var SelectField = function SelectField(_ref) {
+  var label = _ref.label,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      field = _ref.field,
+      _ref$selectOptions = _ref.selectOptions,
+      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
+      _ref$form = _ref.form,
+      touched = _ref$form.touched,
+      errors = _ref$form.errors,
+      theme = _ref.theme;
+  var isTouched = Boolean(_get(touched, field.name));
+
+  var error = _get(errors, field.name);
+
+  var customTheme = styles$1.useTheme();
+  return React__default.createElement(material.FormControl, {
+    fullWidth: true
+  }, React__default.createElement(material.InputLabel, {
+    style: customTheme == null ? void 0 : customTheme.input,
+    htmlFor: field.name,
+    error: !!error && isTouched,
+    shrink: true
+  }, label), React__default.createElement(Select, Object.assign({
+    id: field.name,
+    label: label,
+    type: type,
+    fullWidth: true,
+    error: !!error && isTouched,
+    inputProps: {
+      id: field.name
+    },
+    "native": true,
+    className: theme,
+    MenuProps: {
+      className: theme
     }
-  }, React__default.createElement(formik.Formik, {
-    initialValues: {
-      firstName: '',
-      lastName: '',
-      email: '',
-      password: '',
-      confirmPassword: ''
+  }, field, {
+    style: customTheme == null ? void 0 : customTheme.input
+  }), _map(selectOptions, function (option) {
+    return React__default.createElement("option", {
+      key: option.value,
+      value: option.value,
+      disabled: option.disabled
+    }, option.label);
+  })), isTouched && error ? React__default.createElement(material.FormHelperText, {
+    error: !!error && isTouched
+  }, error) : null);
+};
+
+var SnackbarAlert = function SnackbarAlert(_ref) {
+  var isOpen = _ref.isOpen,
+      message = _ref.message,
+      type = _ref.type,
+      position = _ref.position,
+      _ref$autoHideDuration = _ref.autoHideDuration,
+      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
+      variant = _ref.variant,
+      onClose = _ref.onClose;
+  return React__default.createElement("div", {
+    className: "snackbar-alert-container"
+  }, React__default.createElement(material.Snackbar, {
+    autoHideDuration: autoHideDuration,
+    open: isOpen,
+    anchorOrigin: position || {
+      vertical: 'top',
+      horizontal: 'center'
     },
-    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);
+    onClose: onClose,
+    classes: {
+      root: 'snackbar-alert-snackbar-root'
+    }
+  }, React__default.createElement(material.Alert, {
+    severity: type,
+    onClose: onClose,
+    variant: variant || 'filled',
+    classes: {
+      icon: 'snackbar-alert-icon',
+      root: 'snackbar-alert-alert-root',
+      action: 'snackbar-alert-action',
+      message: 'snackbar-alert-message',
+      filled: 'snackbar-alert-filled'
+    }
+  }, message)));
+};
 
-              case 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 = {
+  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;
 
-              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 onForgotPassword = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+      var email, _yield$forgotPassword, data;
 
-              case 26:
-                profileSpecifiedData = _get(profileResponse, 'data.data');
-                profileDataObj = {
-                  id: profileSpecifiedData.id,
-                  first_name: profileSpecifiedData.firstName,
-                  last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
-                };
+      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 (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                }
+              if (axios.isAxiosError(_context.t0)) {
+                onForgotPasswordError(_context.t0);
+              }
 
-                onClose();
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
 
-              case 30:
-              case "end":
-                return _context.stop();
-            }
+            case 17:
+            case "end":
+              return _context.stop();
           }
-        }, _callee, null, [[15, 22]]);
-      }));
+        }
+      }, _callee, null, [[1, 11, 14, 17]]);
+    }));
 
-      function onSubmit(_x) {
-        return _onSubmit.apply(this, arguments);
-      }
+    return function onForgotPassword(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
 
-      return onSubmit;
-    }()
-  }, function (props) {
+  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
+  }, 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: 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"
-    }, 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));
-    })), 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));
-    }))), React__default.createElement("div", {
-      className: "register-container__singleField"
+      className: "forgot-password-container"
     }, React__default.createElement("div", {
-      className: ""
+      className: "title"
+    }, "Password Reset"), React__default.createElement("div", {
+      className: "forgot-password-container__singleField"
     }, 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"
-    }, 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));
-    })), 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"));
-  }));
-};
-
-var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
-var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
-  if (data === void 0) {
-    data = [];
-  }
-
-  if (propsInitialValues === void 0) {
-    propsInitialValues = {};
-  }
-
-  if (userValues === void 0) {
-    userValues = {};
-  }
-
-  var results = _flatMapDeep(data, function (_ref) {
-    var fields = _ref.fields;
-    return _map(fields, function (_ref2) {
-      var groupItems = _ref2.groupItems;
-      return _map(groupItems, function (_ref3) {
-        var name = _ref3.name;
-        return name;
-      });
-    });
-  });
-
-  var initialValues = {};
-
-  _forEach(results, function (item) {
-    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
-  }); // set logged in user as first ticket holder
-
-
-  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
-  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
-  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
-  return initialValues;
+      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 createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
-  if (values === void 0) {
-    values = {};
-  }
-
-  var bodyFormData = new FormData();
-  bodyFormData.append('first_name', values.firstName);
-  bodyFormData.append('last_name', values.lastName);
-  bodyFormData.append('email', values.email);
-  bodyFormData.append('password', values.password);
-  bodyFormData.append('password_confirmation', values.confirmPassword);
-  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-  bodyFormData.append('check_cart_expiration', 'true');
-
-  _forEach(checkoutBody.attributes, function (item, key) {
-    bodyFormData.append(key, item);
-  });
 
-  return bodyFormData;
+var style$1 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none'
 };
 var setLoggedUserData = function setLoggedUserData(data) {
   return {
@@ -1839,559 +2055,647 @@ var setLoggedUserData = function setLoggedUserData(data) {
     zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
-var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
-  if (values === void 0) {
-    values = {};
-  }
-
-  if (logedInValues === void 0) {
-    logedInValues = {};
-  }
-
-  if (includeDob === void 0) {
-    includeDob = false;
-  }
-
-  var _values = values,
-      firstName = _values.firstName,
-      lastName = _values.lastName,
-      holderAge = _values.holderAge,
-      restValues = _objectWithoutPropertiesLoose(_values, _excluded);
+var LoginModal = function LoginModal(_ref) {
+  var onClose = _ref.onClose,
+      onLogin = _ref.onLogin,
+      _ref$alreadyHasUser = _ref.alreadyHasUser,
+      alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
+      _ref$userExpired = _ref.userExpired,
+      userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
+      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? _identity : _ref$onGetProfileData,
+      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? _identity : _ref$onGetProfileData2,
+      _ref$onForgotPassword = _ref.onForgotPassword,
+      onForgotPassword = _ref$onForgotPassword === void 0 ? _identity : _ref$onForgotPassword,
+      _ref$onSignup = _ref.onSignup,
+      onSignup = _ref$onSignup === void 0 ? _identity : _ref$onSignup,
+      _ref$modalClassname = _ref.modalClassname,
+      modalClassname = _ref$modalClassname === void 0 ? '' : _ref$modalClassname,
+      logo = _ref.logo,
+      _ref$showForgotPasswo = _ref.showForgotPasswordButton,
+      showForgotPasswordButton = _ref$showForgotPasswo === void 0 ? false : _ref$showForgotPasswo,
+      _ref$showSignUpButton = _ref.showSignUpButton,
+      showSignUpButton = _ref$showSignUpButton === void 0 ? false : _ref$showSignUpButton;
 
-  var holders = [];
-  var ticket_holders = [];
+  var _useState = React.useState(''),
+      error = _useState[0],
+      setError = _useState[1];
 
-  var _loop = function _loop(i) {
-    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
-      var key = _ref4[0];
-      return key.includes(String(i));
-    }));
-    holders.push(individualHolder);
-  };
+  return React__default.createElement(Modal, {
+    open: true,
+    onClose: onClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "login-modal " + modalClassname
+  }, React__default.createElement(Box, {
+    style: style$1
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      email: '',
+      password: ''
+    },
+    onSubmit: function () {
+      var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
+        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
-  for (var i = 0; i <= ticketsQuantity; i++) {
-    _loop(i);
-  }
+        return runtime_1.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                email = _ref2.email, password = _ref2.password;
+                _context.prev = 1;
+                body = {
+                  email: email,
+                  password: password
+                };
+                _context.next = 5;
+                return authorize(body);
 
-  var filteredHolders = holders.filter(function (holder) {
-    return Object.entries(holder).length > 0;
-  });
-  ticket_holders = filteredHolders.map(function (item, index) {
-    return {
-      first_name: item["holderFirstName-" + index] || '',
-      last_name: item["holderLastName-" + index] || '',
-      phone: item["holderPhone-" + index] || '',
-      email: item["holderEmail-" + index] || ''
-    };
-  });
-  var filteredRestValue = {};
+              case 5:
+                profileResponse = null;
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-  _forEach(restValues, function (value, key) {
-    if (!key.includes('holder')) {
-      filteredRestValue[key] = value;
-    }
-  });
+              case 9:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 17;
+                break;
 
-  var body = {
-    attributes: _extends({}, filteredRestValue, {
-      email: restValues.email || logedInValues.emailLogged,
-      confirm_email: restValues.email || logedInValues.emailLogged,
-      first_name: firstName || logedInValues.firstNameLogged,
-      last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders: ticket_holders
-    })
-  };
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-  if (includeDob) {
-    var holderAgeDate = new Date(holderAge);
-    body.attributes.dob_day = holderAgeDate.getDate();
-    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
-    body.attributes.dob_year = holderAgeDate.getFullYear();
-  }
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
+                }
 
-  return body;
-};
-var getValidateFunctions = function getValidateFunctions(element, states, values) {
-  var validationFunctions = [];
+                return _context.abrupt("return");
 
-  if (element.required) {
-    if (element.name !== 'state' || element.name === 'state' && states.length) {
-      validationFunctions.push(requiredValidator);
-    }
-  }
+              case 17:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
+                profileDataObj = setLoggedUserData(profileSpecifiedData);
 
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate);
-  }
+                if (typeof window !== 'undefined') {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+                  event = new window.CustomEvent('tf-login');
+                  window.document.dispatchEvent(event);
+                }
 
-  if (element.name === 'confirmEmail') {
-    var isSameEmail = function isSameEmail(confirmEmail) {
-      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
-    };
+                onLogin();
+                _context.next = 26;
+                break;
 
-    validationFunctions.push(isSameEmail);
-  }
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
 
-  return combineValidators.apply(void 0, validationFunctions);
-};
-var assingUniqueIds = function assingUniqueIds(data) {
-  if (_get(data[0], 'uniqueId')) {
-    return data;
-  }
+                if (axios.isAxiosError(_context.t1)) {
+                  _error = (_context.t1 == null ? void 0 : (_e$response = _context.t1.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
+                  setError(_error);
+                } else if (_context.t1 instanceof Error) {
+                  setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
+                }
 
-  return _map(data, function (item) {
-    _forEach(item, function (itemValue, key) {
-      if (_isArray(itemValue)) {
-        item[key] = assingUniqueIds(itemValue);
+              case 26:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[1, 23], [6, 13]]);
+      }));
+
+      function onSubmit(_x) {
+        return _onSubmit.apply(this, arguments);
       }
-    });
 
-    return _extends({}, item, {
-      uniqueId: nanoid.nanoid()
-    });
-  });
+      return onSubmit;
+    }()
+  }, function (props) {
+    return React__default.createElement(formik.Form, {
+      onSubmit: props.handleSubmit
+    }, React__default.createElement("div", {
+      className: "modal-title"
+    }, "Login"), React__default.createElement("div", {
+      className: 'login-logo-container'
+    }, React__default.createElement("img", {
+      className: "login-logo-tff",
+      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"
+    }, "It appears this email is already attached to an account. Please log in here to complete your registration."), userExpired && React__default.createElement("p", {
+      className: "info-text-for-login"
+    }, "Your session has expired, please log in again."), React__default.createElement("div", {
+      className: "login-modal-body"
+    }, React__default.createElement("div", {
+      className: "login-modal-body__email"
+    }, React__default.createElement(formik.Field, {
+      name: 'email',
+      validate: requiredValidator
+    }, function (_ref3) {
+      var field = _ref3.field,
+          meta = _ref3.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));
+    })), React__default.createElement("div", {
+      className: "login-modal-body__password"
+    }, React__default.createElement(formik.Field, {
+      name: 'password',
+      validate: requiredValidator
+    }, function (_ref4) {
+      var field = _ref4.field,
+          meta = _ref4.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));
+    })), React__default.createElement("div", {
+      className: "login-action-button"
+    }, React__default.createElement("button", {
+      type: "submit"
+    }, "Login")), showForgotPasswordButton && React__default.createElement("div", {
+      className: "forgot-password"
+    }, React__default.createElement("span", {
+      "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 _excluded$1 = ["label", "field", "selectOptions", "theme", "setFieldValue"];
-var CheckboxField = function CheckboxField(_ref) {
-  var _rest$form, _field$name, _rest$form2, _field$name2;
+var style$2 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#fff',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px'
+};
+var 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;
 
-  var label = _ref.label,
-      field = _ref.field,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+  var _useState = React.useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
 
-  var customTheme = styles.useTheme();
-  return React__default.createElement(material.FormControl, {
-    error: !!(rest != null && (_rest$form = rest.form) != null && _rest$form.errors && rest.form.errors[(_field$name = field == null ? void 0 : field.name) != null ? _field$name : ""])
-  }, React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
-    control: React__default.createElement(Checkbox, Object.assign({}, field, rest)),
-    label: label,
-    componentsProps: {
-      typography: customTheme == null ? void 0 : customTheme.checkbox
-    }
-  })), !!(rest != null && (_rest$form2 = rest.form) != null && _rest$form2.errors && rest.form.errors[(_field$name2 = field == null ? void 0 : field.name) != null ? _field$name2 : ""]) ? React__default.createElement(material.FormHelperText, null, "Required") : null);
-};
+  var onSignup = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var formData, res, access_token_register, refreshToken, tokens;
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              formData = new FormData();
+              formData.set('first_name', values.firstName);
+              formData.set('last_name', values.lastName);
+              formData.set('email', values.email);
+              formData.set('password', values.password);
+              formData.set('password_confirmation', values.confirmPassword);
+              formData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+              formData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+              _context.next = 12;
+              return register(formData);
 
-var CustomField = function CustomField(_ref) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$selectOptions = _ref.selectOptions,
-      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      submitCount = _ref$form.submitCount,
-      theme = _ref.theme,
-      _ref$inputProps = _ref.inputProps,
-      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
-      _ref$InputProps = _ref.InputProps,
-      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
-      inputRef = _ref.inputRef;
-  var isSelectField = type === 'select';
+            case 12:
+              res = _context.sent;
+              access_token_register = _get(res, 'data.data.attributes.access_token');
+              refreshToken = _get(res, 'data.data.attributes.refresh_token');
+              handleSetAccessToken(access_token_register);
+              tokens = {
+                accessToken: access_token_register,
+                refreshToken: refreshToken
+              };
+              onRegisterSuccess(tokens);
+              onClose();
+              _context.next = 24;
+              break;
 
-  var error = _get(errors, field.name);
+            case 21:
+              _context.prev = 21;
+              _context.t0 = _context["catch"](0);
 
-  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
+              if (axios.isAxiosError(_context.t0)) {
+                onRegisterError(_context.t0, values.email);
+              }
+
+            case 24:
+              _context.prev = 24;
+              setLoading(false);
+              return _context.finish(24);
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 21, 24, 27]]);
+    }));
+
+    return function onSignup(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var _onClose = loading ? function () {} : onClose;
+
+  return React__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$2
+  }, React__default.createElement("div", null, React__default.createElement(formik.Formik, {
+    initialValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      password: '',
+      confirmPassword: ''
     },
-    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);
+    validationSchema: SignupSchema,
+    onSubmit: onSignup
+  }, function (_ref3) {
+    var isValid = _ref3.isValid,
+        dirty = _ref3.dirty,
+        handleSubmit = _ref3.handleSubmit;
+    return React__default.createElement(formik.Form, {
+      onSubmit: handleSubmit
+    }, React__default.createElement("div", {
+      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",
+      label: "First Name",
+      component: CustomField
+    })), React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "lastName",
+      label: "Last Name",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "signup-container__singleField"
+    }, React__default.createElement("div", {
+      className: ""
+    }, React__default.createElement(formik.Field, {
+      name: "email",
+      label: "Email",
+      component: CustomField
+    }))), React__default.createElement("div", {
+      className: "signup-container__twoFields"
+    }, React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      name: "password",
+      label: "Password",
+      type: "password",
+      component: CustomField
+    })), React__default.createElement("div", {
+      className: "is-half"
+    }, React__default.createElement(formik.Field, {
+      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 currencyNormalizerCreator = function currencyNormalizerCreator(value, currency) {
-  return !value ? '' : "" + getCurrencySymbolByCurrency(currency) + value;
-};
-var createFixedFloatNormalizer = function createFixedFloatNormalizer(fixedValue) {
-  return function (value) {
-    return value || "" + value === '0' ? (+value).toFixed(fixedValue) : '';
-  };
-};
-var getCurrencySymbolByCurrency = function getCurrencySymbolByCurrency(currency) {
-  if (currency === void 0) {
-    currency = '';
+var showZero = function showZero(value) {
+  if (value === void 0) {
+    value = 0;
   }
 
-  switch (currency) {
-    case 'GBP':
-      return '£';
+  var intNumber = Number(value);
+  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
+};
 
-    case 'EUR':
-      return '€';
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
+  }
 
-    case 'INR':
-      return '₹';
+  var image = '';
 
-    case 'JMD':
-      return 'J$';
+  if (!name.trim().length) {
+    return image;
+  }
 
-    case 'NZD':
-      return 'NZ$';
+  return image;
+};
 
-    case 'MYR':
-      return 'RM';
+var TimerWidget = function TimerWidget(_ref) {
+  var expires_at = _ref.expires_at,
+      buyLoading = _ref.buyLoading,
+      _ref$onCountdownFinis = _ref.onCountdownFinish,
+      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
 
-    case 'MXN':
-      return 'Mex$';
+  var _useState = React.useState(true),
+      showTimer = _useState[0],
+      setShowTimer = _useState[1];
 
-    case 'SGD':
-      return 'S$';
+  var handleCountdownFinish = function handleCountdownFinish() {
+    setShowTimer(false);
 
-    case 'AUD':
-      return 'A$';
+    if (!buyLoading) {
+      onCountdownFinish();
+    }
+  };
 
-    case 'ZAR':
-      return 'R';
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+        seconds = _ref2.seconds,
+        completed = _ref2.completed,
+        handleCountdownFinish = _ref2.handleCountdownFinish;
 
-    case 'ke':
-      return 'Ksh';
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
 
-    case 'TRY':
-      return '₺';
+    return React__default.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
 
-    case 'CAD':
-      return 'CA$';
+  var hideTimer = function hideTimer() {
+    var timerRl = document.querySelector('.timer');
 
-    case 'THB':
-      return '฿';
+    if (timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  };
 
-    case 'ISK':
-      return 'Kr';
+  return showTimer && !!expires_at ? React__default.createElement("div", {
+    className: "timer"
+  }, React__default.createElement("div", {
+    className: 'close-icon',
+    onClick: hideTimer
+  }, React__default.createElement(SVG, {
+    src: getImage('cross.svg'),
+    width: '10',
+    height: '10',
+    fill: '#fff'
+  })), React__default.createElement("div", {
+    className: "toast-message"
+  }, React__default.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React__default.createElement("p", {
+    className: "countdown"
+  }, React__default.createElement(Countdown$1, {
+    date: Date.now() + expires_at * 1000,
+    renderer: function renderer(props) {
+      return _renderer(_extends({}, props, {
+        handleCountdownFinish: handleCountdownFinish
+      }));
+    }
+  })))) : null;
+};
 
-    case 'SEK':
-      return 'kr';
+var TimerWidget$1 = /*#__PURE__*/React.memo(TimerWidget);
 
-    default:
-      return 'US$';
+var _excluded$1 = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
+  if (data === void 0) {
+    data = [];
   }
-};
-var removePlusSign = function removePlusSign(string) {
-  if (string === void 0) {
-    string = '';
+
+  if (propsInitialValues === void 0) {
+    propsInitialValues = {};
   }
 
-  return string.replace('+', '');
-};
+  if (userValues === void 0) {
+    userValues = {};
+  }
 
-var _excluded$2 = ["label", "field", "form", "setFieldValue", "selectOptions"];
-var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      initialValues = _ref$form.initialValues,
-      setFieldValue = _ref.setFieldValue,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  var results = _flatMapDeep(data, function (_ref) {
+    var fields = _ref.fields;
+    return _map(fields, function (_ref2) {
+      var groupItems = _ref2.groupItems;
+      return _map(groupItems, function (_ref3) {
+        var name = _ref3.name;
+        return name;
+      });
+    });
+  });
 
-  var error = _get(errors, field.name);
+  var initialValues = {};
 
-  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,
-    label: label,
-    error: !!error && isTouched,
-    helperText: isTouched && error,
-    fullWidth: true,
-    InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    InputProps: {
-      sx: customTheme == null ? void 0 : customTheme.input
-    },
-    autoFormat: false
-  }, rest));
-};
+  _forEach(results, function (item) {
+    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
+  }); // set logged in user as first ticket holder
 
-function Loader() {
-  return React__default.createElement("div", {
-    className: "loader-container"
-  }, React__default.createElement(CircularProgress, null));
-}
 
-var SelectField = function SelectField(_ref) {
-  var label = _ref.label,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      field = _ref.field,
-      _ref$selectOptions = _ref.selectOptions,
-      selectOptions = _ref$selectOptions === void 0 ? [] : _ref$selectOptions,
-      _ref$form = _ref.form,
-      touched = _ref$form.touched,
-      errors = _ref$form.errors,
-      theme = _ref.theme;
-  var isTouched = Boolean(_get(touched, field.name));
+  initialValues['holderFirstName-0'] = propsInitialValues.firstName || userValues.firstName || '';
+  initialValues['holderLastName-0'] = propsInitialValues.lastName || userValues.lastName || '';
+  initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || '';
+  return initialValues;
+};
+var createRegisterFormData = function createRegisterFormData(values, checkoutBody) {
+  if (values === void 0) {
+    values = {};
+  }
 
-  var error = _get(errors, field.name);
+  var bodyFormData = new FormData();
+  bodyFormData.append('first_name', values.firstName);
+  bodyFormData.append('last_name', values.lastName);
+  bodyFormData.append('email', values.email);
+  bodyFormData.append('password', values.password);
+  bodyFormData.append('password_confirmation', values.confirmPassword);
+  bodyFormData.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
+  bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
+  bodyFormData.append('check_cart_expiration', 'true');
 
-  var customTheme = styles.useTheme();
-  return React__default.createElement(material.FormControl, {
-    fullWidth: true
-  }, React__default.createElement(material.InputLabel, {
-    style: customTheme == null ? void 0 : customTheme.input,
-    htmlFor: field.name,
-    error: !!error && isTouched,
-    shrink: true
-  }, label), React__default.createElement(Select, Object.assign({
-    id: field.name,
-    label: label,
-    type: type,
-    fullWidth: true,
-    error: !!error && isTouched,
-    inputProps: {
-      id: field.name
-    },
-    "native": true,
-    className: theme,
-    MenuProps: {
-      className: theme
-    }
-  }, field, {
-    style: customTheme == null ? void 0 : customTheme.input
-  }), _map(selectOptions, function (option) {
-    return React__default.createElement("option", {
-      key: option.value,
-      value: option.value,
-      disabled: option.disabled
-    }, option.label);
-  })), isTouched && error ? React__default.createElement(material.FormHelperText, {
-    error: !!error && isTouched
-  }, error) : null);
+  _forEach(checkoutBody.attributes, function (item, key) {
+    bodyFormData.append(key, item);
+  });
+
+  return bodyFormData;
+};
+var setLoggedUserData$1 = function setLoggedUserData(data) {
+  return {
+    id: data.id,
+    first_name: data.firstName,
+    last_name: data.lastName,
+    email: data.email,
+    confirmEmail: data.email,
+    city: (data == null ? void 0 : data.city) || '',
+    country: (data == null ? void 0 : data.countryId) || (data == null ? void 0 : data.country) || '',
+    phone: (data == null ? void 0 : data.phone) || '',
+    street_address: (data == null ? void 0 : data.streetAddress) || '',
+    state: (data == null ? void 0 : data.stateId) || '',
+    zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
+  };
 };
-
-var showZero = function showZero(value) {
-  if (value === void 0) {
-    value = 0;
+var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
+  if (values === void 0) {
+    values = {};
   }
 
-  var intNumber = Number(value);
-  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
-};
-
-var getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
+  if (logedInValues === void 0) {
+    logedInValues = {};
   }
 
-  var image = '';
-
-  if (!name.trim().length) {
-    return image;
+  if (includeDob === void 0) {
+    includeDob = false;
   }
 
-  return image;
-};
-
-var TimerWidget = function TimerWidget(_ref) {
-  var expires_at = _ref.expires_at,
-      buyLoading = _ref.buyLoading,
-      _ref$onCountdownFinis = _ref.onCountdownFinish,
-      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
-
-  var _useState = React.useState(true),
-      showTimer = _useState[0],
-      setShowTimer = _useState[1];
+  var _values = values,
+      firstName = _values.firstName,
+      lastName = _values.lastName,
+      holderAge = _values.holderAge,
+      restValues = _objectWithoutPropertiesLoose(_values, _excluded$1);
 
-  var handleCountdownFinish = function handleCountdownFinish() {
-    setShowTimer(false);
+  var holders = [];
+  var ticket_holders = [];
 
-    if (!buyLoading) {
-      onCountdownFinish();
-    }
+  var _loop = function _loop(i) {
+    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
+      var key = _ref4[0];
+      return key.includes(String(i));
+    }));
+    holders.push(individualHolder);
   };
 
-  var _renderer = function renderer(_ref2) {
-    var minutes = _ref2.minutes,
-        seconds = _ref2.seconds,
-        completed = _ref2.completed,
-        handleCountdownFinish = _ref2.handleCountdownFinish;
+  for (var i = 0; i <= ticketsQuantity; i++) {
+    _loop(i);
+  }
 
-    if (completed) {
-      handleCountdownFinish();
-      return null;
+  var filteredHolders = holders.filter(function (holder) {
+    return Object.entries(holder).length > 0;
+  });
+  ticket_holders = filteredHolders.map(function (item, index) {
+    return {
+      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
+      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
+      phone: item["holderPhone-" + index] || '',
+      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
+    };
+  });
+  var filteredRestValue = {};
+
+  _forEach(restValues, function (value, key) {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value;
     }
+  });
 
-    return React__default.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  var body = {
+    attributes: _extends({}, filteredRestValue, {
+      email: restValues.email || logedInValues.emailLogged,
+      confirm_email: restValues.email || logedInValues.emailLogged,
+      first_name: firstName || logedInValues.firstNameLogged,
+      last_name: lastName || logedInValues.lastNameLogged,
+      ticket_holders: ticket_holders
+    })
   };
 
-  var hideTimer = function hideTimer() {
-    var timerRl = document.querySelector('.timer');
+  if (includeDob) {
+    var holderAgeDate = new Date(holderAge);
+    body.attributes.dob_day = holderAgeDate.getDate();
+    body.attributes.dob_month = holderAgeDate.getMonth() + 1;
+    body.attributes.dob_year = holderAgeDate.getFullYear();
+  }
 
-    if (timerRl) {
-      timerRl.style.visibility = "hidden";
-    }
-  };
+  return body;
+};
+var getValidateFunctions = function getValidateFunctions(element, states, values) {
+  var validationFunctions = [];
 
-  return showTimer && !!expires_at ? React__default.createElement("div", {
-    className: "timer"
-  }, React__default.createElement("div", {
-    className: 'close-icon',
-    onClick: hideTimer
-  }, React__default.createElement(SVG, {
-    src: getImage('cross.svg'),
-    width: '10',
-    height: '10',
-    fill: '#fff'
-  })), React__default.createElement("div", {
-    className: "toast-message"
-  }, React__default.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React__default.createElement("p", {
-    className: "countdown"
-  }, React__default.createElement(Countdown$1, {
-    date: Date.now() + expires_at * 1000,
-    renderer: function renderer(props) {
-      return _renderer(_extends({}, props, {
-        handleCountdownFinish: handleCountdownFinish
-      }));
+  if (element.required) {
+    if (element.name !== 'state' || element.name === 'state' && states.length) {
+      validationFunctions.push(requiredValidator);
     }
-  })))) : null;
-};
+  }
 
-var TimerWidget$1 = /*#__PURE__*/React.memo(TimerWidget);
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate);
+  }
 
-var SnackbarAlert = function SnackbarAlert(_ref) {
-  var isOpen = _ref.isOpen,
-      message = _ref.message,
-      type = _ref.type,
-      position = _ref.position,
-      _ref$autoHideDuration = _ref.autoHideDuration,
-      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
-      variant = _ref.variant,
-      onClose = _ref.onClose;
-  return React__default.createElement("div", {
-    className: "snackbar-alert-container"
-  }, React__default.createElement(material.Snackbar, {
-    autoHideDuration: autoHideDuration,
-    open: isOpen,
-    anchorOrigin: position || {
-      vertical: 'top',
-      horizontal: 'center'
-    },
-    onClose: onClose,
-    classes: {
-      root: 'snackbar-alert-snackbar-root'
-    }
-  }, React__default.createElement(material.Alert, {
-    severity: type,
-    onClose: onClose,
-    variant: variant || 'filled',
-    classes: {
-      icon: 'snackbar-alert-icon',
-      root: 'snackbar-alert-alert-root',
-      action: 'snackbar-alert-action',
-      message: 'snackbar-alert-message',
-      filled: 'snackbar-alert-filled'
-    }
-  }, message)));
-};
+  if (element.name === 'confirmEmail') {
+    var isSameEmail = function isSameEmail(confirmEmail) {
+      return values.email !== confirmEmail ? 'Please confirm your email address correctly' : null;
+    };
 
-var DATE_SIZE = 32;
-var compactStyles = {
-  '& > div': {
-    minWidth: 256
-  },
-  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
-    width: 256
-  },
-  '& .MuiTypography-caption': {
-    width: DATE_SIZE,
-    margin: 0
-  },
-  '& .PrivatePickersSlideTransition-root': {
-    minHeight: DATE_SIZE * 6
-  },
-  '& .PrivatePickersSlideTransition-root [role="row"]': {
-    margin: 0
-  },
-  '& .MuiPickersDay-dayWithMargin': {
-    margin: 0
-  },
-  '& .MuiPickersDay-root': {
-    width: DATE_SIZE,
-    height: DATE_SIZE
+    validationFunctions.push(isSameEmail);
   }
-};
-var compactStyleTheme = /*#__PURE__*/styles$1.createTheme({
-  components: {
-    MuiPaper: {
-      defaultProps: {
-        sx: compactStyles
-      }
-    }
+
+  if (element.name === 'confirmPassword') {
+    var isSame = function isSame(confirmPassword) {
+      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+    };
+
+    validationFunctions.push(isSame);
   }
-});
-var DatePickerField = function DatePickerField(_ref) {
-  var label = _ref.label,
-      field = _ref.field,
-      form = _ref.form,
-      theme = _ref.theme,
-      _ref$useCompact = _ref.useCompact,
-      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
-  return React__default.createElement(styles$1.ThemeProvider, {
-    theme: useCompact ? compactStyleTheme : {}
-  }, React__default.createElement(LocalizationProvider, {
-    dateAdapter: AdapterMoment
-  }, React__default.createElement(DatePicker, {
-    value: field.value || '',
-    onChange: function onChange(value) {
-      return form.setFieldValue(field.name, value);
-    },
-    PopperProps: {
-      placement: 'bottom-start'
-    },
-    showDaysOutsideCurrentMonth: true,
-    disableFuture: true,
-    inputFormat: "DD/MM/YYYY",
-    mask: "__/__/____",
-    renderInput: function renderInput(params) {
-      return React__default.createElement(CustomField, Object.assign({}, params, {
-        inputProps: _extends({}, params.inputProps, {
-          placeholder: 'dd/mm/yyyy'
-        }),
-        theme: theme,
-        field: field,
-        form: form,
-        label: label,
-        type: "tel"
-      }));
-    }
-  })));
+
+  return combineValidators.apply(void 0, validationFunctions);
+};
+var assingUniqueIds = function assingUniqueIds(data) {
+  if (_get(data[0], 'uniqueId')) {
+    return data;
+  }
+
+  return _map(data, function (item) {
+    _forEach(item, function (itemValue, key) {
+      if (_isArray(itemValue)) {
+        item[key] = assingUniqueIds(itemValue);
+      }
+    });
+
+    return _extends({}, item, {
+      uniqueId: nanoid.nanoid()
+    });
+  });
 };
 
 var LogicRunner = function LogicRunner(_ref) {
@@ -2401,7 +2705,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 +2761,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 +2772,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 +2781,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,12 +2862,23 @@ 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;
-
-  var themeMui = styles$1.createTheme(themeOptions);
+      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.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
@@ -2571,7 +2887,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 +2918,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(false),
+      showModalForgotPassword = _useState10[0],
+      setShowModalForgotPassword = _useState10[1];
 
-  var _useState10 = React.useState([]),
-      ticketsQuantity = _useState10[0],
-      setTicketsQuantity = _useState10[1];
+  var _useState11 = React.useState([]),
+      ticketsQuantity = _useState11[0],
+      setTicketsQuantity = _useState11[1];
 
-  var _useState11 = React.useState({
+  var _useState12 = React.useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -2622,16 +2944,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 +3003,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 +3055,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       };
     }();
 
-    fetchCountries();
+    shouldFetchCountries && fetchCountries();
     fetchCart();
   }, []); // fetch cart data
 
@@ -2793,7 +3115,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(isWindowDefined && token)) {
+              if (!(isWindowDefined && token || isLoggedIn)) {
                 _context4.next = 10;
                 break;
               }
@@ -2804,7 +3126,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 +3162,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 +3218,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 +3240,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, {
+  return React__default.createElement(styles.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 +3270,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 +3297,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 +3321,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 +3373,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 +3419,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 +3448,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 +3462,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 +3523,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 +3531,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) {
@@ -3213,7 +3550,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             label: element.label,
             type: element.type,
             required: true,
-            component: element.type === 'checkbox' ? CheckboxField : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'phone' ? PhoneNumberField : CustomField,
             validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {})
           }));
         })));
@@ -3229,6 +3566,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       size: 26
     }) : buttonName))));
   }), showModalLogin && React__default.createElement(LoginModal, {
+    logo: logo,
     onClose: function onClose() {
       setShowModalLogin(false);
     },
@@ -3246,20 +3584,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 +3833,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 +3843,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 +3947,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 +3964,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 +4104,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;
               }
@@ -3792,8 +4155,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  var themeMui = styles$1.createTheme(themeOptions);
-  return React__default.createElement(styles$1.ThemeProvider, {
+  var themeMui = styles.createTheme(themeOptions);
+  return React__default.createElement(styles.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement("div", {
     className: "payment_page"
@@ -3826,11 +4189,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 +4245,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }
   }, paymentIsLoading ? React__default.createElement(CircularProgress, {
     size: 26
-  }) : "Complete Registration")))));
+  }) : 'Complete Registration')))));
 };
 
 var config = {
@@ -4024,7 +4409,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 +4510,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 +4527,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 +4544,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 +4574,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,
@@ -4204,141 +4603,93 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }))))));
 };
 
-var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
-  if (maxCount === void 0) {
-    maxCount = 10;
-  }
-
-  if (minCount === void 0) {
-    minCount = 1;
-  }
-
-  if (multiplier === void 0) {
-    multiplier = 1;
-  }
-
-  var options = [{
-    label: 0,
-    value: 0
-  }];
-
-  for (var i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
-    options.push({
-      label: i,
-      value: i
-    });
-  }
-
-  return options;
+var isTimeExpired = function isTimeExpired(startDate, timezone) {
+  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
 };
 
-var TicketRow = function TicketRow(_ref) {
-  var ticketTier = _ref.ticketTier,
-      prevTicketTier = _ref.prevTicketTier,
-      selectedTickets = _ref.selectedTickets,
-      handleTicketSelect = _ref.handleTicketSelect;
-  var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
-  var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
-  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
-  var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
-  var onSaleContent = isSalesClosed ? ticketsClosedMessage : React__default.createElement("div", {
-    className: "get-tickets"
-  }, React__default.createElement(Box, {
-    className: "get-tickets__selectbox"
-  }, React__default.createElement(FormControl, {
-    fullWidth: true
-  }, React__default.createElement(Select, {
-    sx: {
-      borderRadius: 0
-    },
-    value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
-    onChange: handleTicketSelect,
-    displayEmpty: true,
-    inputProps: {
-      'aria-label': 'Without label'
-    },
-    MenuProps: {
-      PaperProps: {
-        sx: {
-          maxHeight: 150
-        },
-        className: 'get-tickets-paper'
-      }
-    }
-  }, options.map(function (option, index) {
-    return React__default.createElement(MenuItem, {
-      key: index,
-      value: option.value
-    }, option.value);
-  })))));
-  var returnValue = '';
+function Countdown(_ref) {
+  var startDate = _ref.startDate,
+      _ref$timezone = _ref.timezone,
+      timezone = _ref$timezone === void 0 ? moment.tz.guess() : _ref$timezone,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$showMessage = _ref.showMessage,
+      showMessage = _ref$showMessage === void 0 ? false : _ref$showMessage,
+      _ref$disableLeadingZe = _ref.disableLeadingZero,
+      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
+      _ref$callback = _ref.callback,
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+      isLoggedIn = _ref.isLoggedIn;
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage;
-  }
+  var _useState = React.useState(''),
+      duration = _useState[0],
+      setDuration = _useState[1];
 
-  if (ticketTier.displayTicket) {
-    returnValue = onSaleContent;
-  }
+  var _useState2 = React.useState(false),
+      timeExpired = _useState2[0],
+      setTimeExpired = _useState2[1];
 
-  if (_get(prevTicketTier, 'in_stock')) {
-    returnValue = 'SOON';
-  }
+  React.useEffect(function () {
+    setTimeExpired(isTimeExpired(startDate, timezone));
+  }, []);
+  React.useEffect(function () {
+    var timer;
 
-  return React__default.createElement(React__default.Fragment, null, returnValue, " ");
-};
+    if (!timeExpired) {
+      timer = setInterval(function () {
+        if (isTimeExpired(startDate, timezone)) {
+          clearInterval(timer);
+          setTimeExpired(true);
+          callback();
+          return;
+        }
 
-var TicketsSection = function TicketsSection(_ref) {
-  var ticketsList = _ref.ticketsList,
-      selectedTickets = _ref.selectedTickets,
-      handleTicketSelect = _ref.handleTicketSelect,
-      codeIsApplied = _ref.codeIsApplied,
-      sortBySoldOut = _ref.sortBySoldOut,
-      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
-      hideTicketsHeader = _ref.hideTicketsHeader;
-  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
-  return React__default.createElement(React__default.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
-    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+        var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
+        var diffTime = moment(startDate).diff(currentDate);
+        var duration = moment.duration(diffTime);
+        var dateArr = {
+          year: duration.years(),
+          month: duration.months(),
+          day: duration.days(),
+          hour: duration.hours(),
+          minute: duration.minutes(),
+          second: duration.seconds()
+        };
+        var timeLeft = '';
 
-    var ticketSelect = function ticketSelect(event) {
-      var value = event.target.value;
-      handleTicketSelect(ticket.id, value);
-    };
+        for (var date in dateArr) {
+          var unit = dateArr[date] === 1 ? date : date + 's';
+          var val = dateArr[date];
 
-    var ticketIsDiscounted = false;
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date];
+          }
 
-    if (ticket.oldPrice && codeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
-      ticketIsDiscounted = true;
+          if (timeLeft) {
+            timeLeft += ", " + val + " " + unit;
+          } else if (dateArr[date]) {
+            timeLeft += val + " " + unit;
+          }
+        }
+
+        setDuration(timeLeft);
+      }, 1000);
     }
 
-    var ticketIsFree = +ticket.price === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
-    return React__default.createElement("div", {
-      key: ticket.id || ticket.name,
-      className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
-    }, React__default.createElement("div", {
-      className: "event-detail__tier-name"
-    }, ticket.displayName || ticket.name), React__default.createElement("div", {
-      className: "event-tickets-container"
-    }, React__default.createElement("div", {
-      className: "event-detail__tier-price"
-    }, ticketIsDiscounted && React__default.createElement("p", {
-      className: "old-price"
-    }, "$ ", (+ticket.oldPrice).toFixed(2)), React__default.createElement("p", null, ticketPrice), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
-      className: "fees"
-    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React__default.createElement("div", {
-      className: "event-detail__tier-state",
-      style: {
-        minWidth: 55
-      }
-    }, React__default.createElement(TicketRow, {
-      ticketTier: ticket,
-      prevTicketTier: arr[i - 1],
-      selectedTickets: selectedTickets,
-      handleTicketSelect: ticketSelect
-    }))));
-  }));
-};
+    return function () {
+      clearInterval(timer);
+    };
+  }, [timeExpired]);
+  return React__default.createElement(React__default.Fragment, null, !timeExpired && duration && React__default.createElement("div", {
+    className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
+  }, React__default.createElement("div", null, React__default.createElement("p", {
+    className: 'title'
+  }, title), React__default.createElement("p", null, duration)), showMessage && React__default.createElement("p", {
+    className: 'message'
+  }, message)));
+}
 
 var generateQuantity = function generateQuantity(n) {
   var quantityList = [];
@@ -4504,13 +4855,46 @@ var WaitingList = function WaitingList(_ref) {
   }) : 'ADD TO WAITING LIST')))));
 };
 
+var AccessCodeSection = function AccessCodeSection(_ref) {
+  var code = _ref.code,
+      setCode = _ref.setCode,
+      updateTickets = _ref.updateTickets;
+  var isAccessCodeHasValue = !!code.trim();
+  return React__default.createElement("div", {
+    className: "access-code-block"
+  }, React__default.createElement("div", {
+    className: "access-code-block"
+  }, React__default.createElement("p", {
+    className: "access-code-text"
+  }, "Access code required")), React__default.createElement("input", {
+    className: "access-code-input",
+    placeholder: "",
+    onChange: function onChange(e) {
+      setCode(e.target.value);
+    },
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === 'Enter' && isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }), React__default.createElement(Button$1, {
+    className: "access-submit-button",
+    onClick: function onClick() {
+      if (isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }, "ENTER"));
+};
+
 var PromoCodeSection = function PromoCodeSection(_ref) {
   var code = _ref.code,
       codeIsApplied = _ref.codeIsApplied,
       showPromoInput = _ref.showPromoInput,
       setCode = _ref.setCode,
       setShowPromoInput = _ref.setShowPromoInput,
-      updateTickets = _ref.updateTickets;
+      updateTickets = _ref.updateTickets,
+      setCodeIsApplied = _ref.setCodeIsApplied;
   var isPromoCodeHasValue = !!code.trim();
 
   var renderInputField = function renderInputField() {
@@ -4529,7 +4913,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 +4921,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
           setShowPromoInput(false);
-          updateTickets(true);
+          updateTickets(true, 'promo');
         }
       }
     }, "APPLY"));
@@ -4556,129 +4940,12 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
+      setCodeIsApplied(false);
       setShowPromoInput(true);
     }
   }, "Got a promo code? Click here"), showPromoInput && renderInputField());
 };
 
-var AccessCodeSection = function AccessCodeSection(_ref) {
-  var code = _ref.code,
-      setCode = _ref.setCode,
-      updateTickets = _ref.updateTickets;
-  var isAccessCodeHasValue = !!code.trim();
-  return React__default.createElement("div", {
-    className: "access-code-block"
-  }, React__default.createElement("div", {
-    className: "access-code-block"
-  }, React__default.createElement("p", {
-    className: "access-code-text"
-  }, "Access code required")), React__default.createElement("input", {
-    className: "access-code-input",
-    placeholder: "",
-    onChange: function onChange(e) {
-      setCode(e.target.value);
-    },
-    onKeyPress: function onKeyPress(event) {
-      if (event.key === 'Enter' && isAccessCodeHasValue) {
-        updateTickets(true);
-      }
-    }
-  }), React__default.createElement(Button$1, {
-    className: "access-submit-button",
-    onClick: function onClick() {
-      if (isAccessCodeHasValue) {
-        updateTickets(true);
-      }
-    }
-  }, "ENTER"));
-};
-
-var isTimeExpired = function isTimeExpired(startDate, timezone) {
-  return !moment(startDate).isAfter(moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss'));
-};
-
-function Countdown(_ref) {
-  var startDate = _ref.startDate,
-      _ref$timezone = _ref.timezone,
-      timezone = _ref$timezone === void 0 ? moment.tz.guess() : _ref$timezone,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      _ref$message = _ref.message,
-      message = _ref$message === void 0 ? '' : _ref$message,
-      _ref$disableLeadingZe = _ref.disableLeadingZero,
-      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
-      _ref$callback = _ref.callback,
-      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
-      isLoggedIn = _ref.isLoggedIn;
-
-  var _useState = React.useState(''),
-      duration = _useState[0],
-      setDuration = _useState[1];
-
-  var _useState2 = React.useState(false),
-      timeExpired = _useState2[0],
-      setTimeExpired = _useState2[1];
-
-  React.useEffect(function () {
-    setTimeExpired(isTimeExpired(startDate, timezone));
-  }, []);
-  React.useEffect(function () {
-    var timer;
-
-    if (!timeExpired) {
-      timer = setInterval(function () {
-        if (isTimeExpired(startDate, timezone)) {
-          clearInterval(timer);
-          setTimeExpired(true);
-          callback();
-          return;
-        }
-
-        var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
-        var diffTime = moment(startDate).diff(currentDate);
-        var duration = moment.duration(diffTime);
-        var dateArr = {
-          year: duration.years(),
-          month: duration.months(),
-          day: duration.days(),
-          hour: duration.hours(),
-          minute: duration.minutes(),
-          second: duration.seconds()
-        };
-        var timeLeft = '';
-
-        for (var date in dateArr) {
-          var unit = dateArr[date] === 1 ? date : date + 's';
-          var val = dateArr[date];
-
-          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
-            val = '0' + dateArr[date];
-          }
-
-          if (timeLeft) {
-            timeLeft += ", " + val + " " + unit;
-          } else if (dateArr[date]) {
-            timeLeft += val + " " + unit;
-          }
-        }
-
-        setDuration(timeLeft);
-      }, 1000);
-    }
-
-    return function () {
-      clearInterval(timer);
-    };
-  }, [timeExpired]);
-  return React__default.createElement(React__default.Fragment, null, !timeExpired && duration && React__default.createElement("div", {
-    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", {
-    className: 'message'
-  }, message)));
-}
-
 var ReferralLogic = function ReferralLogic(props) {
   var eventId = props.eventId;
   var isWindowDefined = typeof window !== 'undefined';
@@ -4716,9 +4983,144 @@ var ReferralLogic = function ReferralLogic(props) {
           }, _callee, null, [[0, 6]]);
         }))();
       }
-    }
-  }, []);
-  return null;
+    }
+  }, []);
+  return null;
+};
+
+var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount, multiplier) {
+  if (maxCount === void 0) {
+    maxCount = 10;
+  }
+
+  if (minCount === void 0) {
+    minCount = 1;
+  }
+
+  if (multiplier === void 0) {
+    multiplier = 1;
+  }
+
+  var options = [{
+    label: 0,
+    value: 0
+  }];
+
+  for (var i = minCount; i <= Math.min(50, maxCount); i += multiplier) {
+    options.push({
+      label: i,
+      value: i
+    });
+  }
+
+  return options;
+};
+
+var TicketRow = function TicketRow(_ref) {
+  var ticketTier = _ref.ticketTier,
+      prevTicketTier = _ref.prevTicketTier,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect;
+  var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
+  var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
+  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
+  var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
+  var onSaleContent = React__default.createElement("div", {
+    className: "get-tickets"
+  }, React__default.createElement(Box, {
+    className: "get-tickets__selectbox"
+  }, React__default.createElement(FormControl, {
+    fullWidth: true
+  }, React__default.createElement(Select, {
+    sx: {
+      borderRadius: 0
+    },
+    value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
+    onChange: handleTicketSelect,
+    displayEmpty: true,
+    inputProps: {
+      'aria-label': 'Without label'
+    },
+    MenuProps: {
+      PaperProps: {
+        sx: {
+          maxHeight: 150
+        },
+        className: 'get-tickets-paper'
+      }
+    }
+  }, options.map(function (option, index) {
+    return React__default.createElement(MenuItem, {
+      key: index,
+      value: option.value
+    }, option.value);
+  })))));
+  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
+
+  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
+
+  if (isSoldOut) {
+    returnValue = soldOutMessage;
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage;
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
+    returnValue = onSaleContent;
+  } else if (_get(prevTicketTier, 'in_stock')) {
+    returnValue = 'SOON';
+  }
+
+  return React__default.createElement(React__default.Fragment, null, returnValue, " ");
+};
+
+var TicketsSection = function TicketsSection(_ref) {
+  var ticketsList = _ref.ticketsList,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect,
+      sortBySoldOut = _ref.sortBySoldOut,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      hideTicketsHeader = _ref.hideTicketsHeader;
+  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
+  return React__default.createElement(React__default.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
+    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
+
+    var ticketSelect = function ticketSelect(event) {
+      var value = event.target.value;
+      handleTicketSelect(ticket.id, value);
+    };
+
+    var ticketIsDiscounted = false;
+
+    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
+      ticketIsDiscounted = true;
+    }
+
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
+    return React__default.createElement("div", {
+      key: ticket.id || ticket.name,
+      className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
+    }, React__default.createElement("div", {
+      className: "event-detail__tier-name"
+    }, ticket.displayName || ticket.name), React__default.createElement("div", {
+      className: "event-tickets-container"
+    }, React__default.createElement("div", {
+      className: "event-detail__tier-price"
+    }, ticketIsDiscounted && React__default.createElement("p", {
+      className: "old-price"
+    }, "$ ", (+ticket.oldPrice).toFixed(2)), React__default.createElement("p", null, ticketPrice), !isSoldOut && !ticketIsFree && React__default.createElement("p", {
+      className: "fees"
+    }, ticket.feeIncluded ? '(incl. Fees)' : '(excl. Fees)')), React__default.createElement("div", {
+      className: "event-detail__tier-state",
+      style: {
+        minWidth: 55
+      }
+    }, React__default.createElement(TicketRow, {
+      ticketTier: ticket,
+      prevTicketTier: arr[i - 1],
+      selectedTickets: selectedTickets,
+      handleTicketSelect: ticketSelect
+    }))));
+  }));
 };
 
 var TicketsContainer = function TicketsContainer(_ref) {
@@ -4734,6 +5136,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 +5153,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,
@@ -4758,15 +5166,18 @@ var TicketsContainer = function TicketsContainer(_ref) {
       ActionsSectionComponent = _ref.actionsSectionComponent,
       ticketsHeaderComponent = _ref.ticketsHeaderComponent,
       _ref$hideTicketsHeade = _ref.hideTicketsHeader,
-      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade;
+      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade,
+      _ref$enableInfluencer = _ref.enableInfluencersSection,
+      enableInfluencersSection = _ref$enableInfluencer === void 0 ? true : _ref$enableInfluencer;
 
   var _useState = React.useState({}),
       selectedTickets = _useState[0],
       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 +5248,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 +5300,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 +5323,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 +5364,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 +5410,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 +5438,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 +5458,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
               total = '';
 
               if (!skipBillingPage) {
-                _context.next = 27;
+                _context2.next = 32;
                 break;
               }
 
@@ -5023,15 +5467,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 +5500,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);
@@ -5115,6 +5575,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }) : null;
   var externalUrl = event == null ? void 0 : event.redirectUrl;
   var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
+  var influencers = event != null && event.referralsEnabled ? event == null ? void 0 : event.referrals : [];
   return React__default.createElement(privateTheming.ThemeProvider, {
     theme: themeMui
   }, !isLoading && React__default.createElement(ReferralLogic, {
@@ -5124,34 +5585,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,
@@ -5177,7 +5639,18 @@ var TicketsContainer = function TicketsContainer(_ref) {
   }, "Log out"))) : ''), showLoginModal ? React__default.createElement(LoginModal, {
     onClose: handleOnClose,
     onLogin: handleOnLogin
-  }) : null));
+  }) : null), enableInfluencersSection && influencers.length ? React__default.createElement("div", {
+    className: "event-influencers"
+  }, React__default.createElement("h3", null, React__default.createElement("span", null, "TOP"), " INFLUENCERS"), React__default.createElement("ol", {
+    className: "influencer-list"
+  }, influencers.map(function (influencer, i) {
+    var _influencer$lastName;
+
+    return React__default.createElement("li", {
+      className: "influencer-item",
+      key: i
+    }, influencer.firstName + " " + ((_influencer$lastName = influencer.lastName) == null ? void 0 : _influencer$lastName.charAt(0)), ' ');
+  }))) : null);
 };
 
 var EventInfoItem = function EventInfoItem(_ref) {
@@ -5197,10 +5670,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 +5718,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 +5835,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 +5864,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 +5892,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 +5909,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,13 +6020,13 @@ 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();
+  var customTheme = styles$1.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
     control: React__default.createElement(Radio, Object.assign({}, field, rest)),
     label: label,
@@ -5498,7 +6036,7 @@ var RadioField = function RadioField(_ref) {
   }));
 };
 
-var style$1 = {
+var style$3 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5511,33 +6049,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 +6105,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 +6171,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 +6190,7 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
   }))));
 };
 
-var style$2 = {
+var style$4 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -5680,7 +6218,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 +6236,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 +6445,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 +6459,47 @@ 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"))), data != null && data.sales_referred ? React__default.createElement("div", {
+    className: "total-referrer"
+  }, React__default.createElement("b", null, "So far, you've referred ", data.sales_referred, " tickets.")) : null, 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 +6519,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 +6536,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 +6761,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 +6785,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 +6793,7 @@ var RedirectModal = function RedirectModal(_ref) {
   }, "OK"))));
 };
 
-var style$4 = {
+var style$6 = {
   position: 'absolute',
   top: '50%',
   left: '50%',
@@ -6206,7 +6899,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 +6942,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;