tf-checkout-react 1.0.99 → 1.0.100-beta.2

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

@@ -1,4 +1,4 @@
-import React, { Component, useState, useRef, useEffect, Fragment } from 'react';
+import React, { Component, useState, memo, useRef, useEffect, Fragment } from 'react';
 import { connect, Formik, Form, Field } from 'formik';
 import Button from '@mui/material/Button';
 import _identity from 'lodash-es/identity';
@@ -9,7 +9,7 @@ import _isEqual from 'lodash-es/isEqual';
 import _isEmpty from 'lodash-es/isEmpty';
 import axios from 'axios';
 import _forEach from 'lodash-es/forEach';
-import { TextField, FormControl, FormHelperText, InputLabel, CircularProgress as CircularProgress$1, Alert, createTheme as createTheme$1 } from '@mui/material';
+import { TextField, FormControl, FormHelperText, InputLabel, Snackbar, Alert, CircularProgress as CircularProgress$1, createTheme as createTheme$1 } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
@@ -23,35 +23,37 @@ import TextField$1 from '@mui/material/TextField';
 import MuiPhoneNumber from 'material-ui-phone-number';
 import CircularProgress from '@mui/material/CircularProgress';
 import Select from '@mui/material/Select';
-import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Backdrop from '@mui/material/Backdrop';
+import Countdown$1 from 'react-countdown';
+import _isNumber from 'lodash-es/isNumber';
+import SVG from 'react-inlinesvg';
+import DatePicker from '@mui/lab/DatePicker';
+import AdapterMoment from '@mui/lab/AdapterMoment';
+import LocalizationProvider from '@mui/lab/LocalizationProvider';
 import Container from '@mui/material/Container';
 import Alert$1 from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import Countdown$1 from 'react-countdown';
-import _isNumber from 'lodash-es/isNumber';
 import { FacebookShareButton, FacebookIcon, FacebookMessengerShareButton, FacebookMessengerIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, PinterestShareButton, PinterestIcon, VKShareButton, VKIcon, OKShareButton, OKIcon, TelegramShareButton, TelegramIcon, WhatsappShareButton, WhatsappIcon, RedditShareButton, RedditIcon, TumblrShareButton, TumblrIcon, MailruShareButton, MailruIcon, EmailShareButton, EmailIcon, LivejournalShareButton, LivejournalIcon, ViberShareButton, ViberIcon, WorkplaceShareButton, WorkplaceIcon, LineShareButton, LineIcon, PocketShareButton, PocketIcon, InstapaperShareButton, InstapaperIcon, WeiboShareButton, WeiboIcon, HatenaShareButton, HatenaIcon } from 'react-share';
 import _some from 'lodash-es/some';
-import _every from 'lodash-es/every';
 import _find from 'lodash-es/find';
 import Button$1 from 'react-bootstrap/Button';
 import jwt_decode from 'jwt-decode';
 import _sortBy from 'lodash-es/sortBy';
 import FormControl$1 from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
-import SVG from 'react-inlinesvg';
 import moment from 'moment-timezone';
 import { ThemeProvider as ThemeProvider$1 } from '@mui/private-theming';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import TablePagination from '@mui/material/TablePagination';
 import Autocomplete from '@mui/material/Autocomplete';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
 import _has from 'lodash-es/has';
 import { object, string, ref, boolean } from 'yup';
 import Radio from '@mui/material/Radio';
@@ -996,14 +998,87 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/connect(ErrorFocusInternal);
 
+function getDomain(url, subdomain) {
+  var updatedUrl = url.replace(/(https?:\/\/)?(www.)?/i, '');
+
+  if (!subdomain) {
+    updatedUrl = updatedUrl.split('.');
+    updatedUrl = updatedUrl.slice(updatedUrl.length - 2).join('.');
+  }
+
+  if (updatedUrl.indexOf('/') !== -1) {
+    return updatedUrl.split('/')[0];
+  }
+
+  return updatedUrl;
+}
+
+function setCustomCookie(name, value, days) {
+  if (days === void 0) {
+    days = 5;
+  }
+
+  var expires = '';
+
+  if (days) {
+    var date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = '; expires=' + date.toUTCString();
+  }
+
+  if (typeof window !== 'undefined') {
+    var domain = getDomain(window.location.hostname);
+    document.cookie = name + '=' + (value || '') + expires + '; path=/' + ("; domain=" + domain);
+  }
+}
+function getCookieByName(cname) {
+  if (typeof window === 'undefined') return '';
+  var name = cname + '=';
+  var ca = document.cookie.split(';');
+
+  for (var i = 0; i < ca.length; i++) {
+    var c = ca[i];
+
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+
+  return '';
+}
+function deleteCookieByName(name) {
+  if (typeof window !== 'undefined') {
+    var domain = getDomain(window.location.hostname);
+    document.cookie = name + '=; Path=/' + ("; domain=" + domain) + '; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+  }
+}
+
 var downloadPDF = function downloadPDF(pdfUrl) {
   if (typeof window === 'undefined') return;
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
   var accessToken = localStorage.getItem('access_token');
-  if (!accessToken) return;
-  fetch(pdfUrl, {
-    headers: {
+  if (!accessToken && !xtfCookie) return;
+  var headers = {};
+
+  if (accessToken) {
+    headers = {
       Authorization: "Bearer " + accessToken
-    }
+    };
+  }
+
+  if (xtfCookie) {
+    headers = {
+      'X-TF-ECOMMERCE': xtfCookie
+    };
+  }
+
+  return fetch(pdfUrl, {
+    headers: headers,
+    credentials: 'include'
   }).then( /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(response) {
       var blobValue, fileNameHeader, fileName;
@@ -1016,7 +1091,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,
@@ -1037,7 +1112,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'
     });
@@ -1048,21 +1127,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 ? {
@@ -1114,6 +1199,13 @@ var publicRequest = /*#__PURE__*/axios.create({
   headers: ttfHeaders
 });
 publicRequest.interceptors.response.use(function (response) {
+  var authGuestToken = _get(response, 'headers.authorization-guest');
+
+  if (isWindowDefined && authGuestToken) {
+    window.localStorage.setItem('auth_guest_token', authGuestToken);
+    publicRequest.setGuestToken(authGuestToken);
+  }
+
   return response;
 }, function (error) {
   var _error$response;
@@ -1122,7 +1214,6 @@ publicRequest.interceptors.response.use(function (response) {
     if (isWindowDefined) {
       var _error$response2, _error$response2$data;
 
-      window.localStorage.removeItem('auth_guest_token');
       window.localStorage.removeItem('user_data');
       window.localStorage.removeItem('access_token');
       var errorType = error == null ? void 0 : (_error$response2 = error.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.error;
@@ -1133,6 +1224,13 @@ publicRequest.interceptors.response.use(function (response) {
     }
   }
 
+  var authGuestToken = _get(error, 'response.headers.authorization-guest');
+
+  if (isWindowDefined && authGuestToken) {
+    window.localStorage.setItem('auth_guest_token', authGuestToken);
+    publicRequest.setGuestToken(authGuestToken);
+  }
+
   return Promise.reject(error);
 });
 publicRequest.interceptors.request.use(function (config) {
@@ -1158,20 +1256,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;
@@ -1202,14 +1321,6 @@ var setCustomHeader = function setCustomHeader(response) {
     }
   }
 };
-var handleSetAccessToken = function handleSetAccessToken(token) {
-  if (token) {
-    if (isWindowDefined) {
-      window.localStorage.setItem('access_token', token);
-      publicRequest.setAccessToken(token);
-    }
-  }
-};
 function getEvent(id) {
   var response = publicRequest.get("v1/event/" + id, {
     headers: ttfHeaders
@@ -1250,14 +1361,11 @@ var postOnCheckout = function postOnCheckout(data, accessToken) {
   return res;
 };
 var authorize = function authorize(data) {
-  return publicRequest.post("v1/oauth/authorize-rn?client_id=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
+  return publicRequest.post("/auth?clientId=" + (CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'), data);
 };
 var register = function register(data) {
   return publicRequest.post('v1/oauth/register-rn', data);
 };
-var getAccessToken = function getAccessToken(data) {
-  return publicRequest.post('v1/oauth/access_token', data);
-};
 var getPaymentData = function getPaymentData(hash) {
   var response = publicRequest.get("v1/order/" + hash + "/review/")["catch"](function (error) {
     throw error;
@@ -1318,8 +1426,17 @@ var postReferralVisits = function postReferralVisits(eventId, referralId) {
     referrer: "" + referralId
   });
 };
-var checkTicketStatus = function checkTicketStatus(hash) {
-  return publicRequest.post("v1/ticket/" + hash + "/status/");
+var logout = function logout() {
+  return publicRequest["delete"]('/auth');
+};
+var processTicket = function processTicket(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/process/");
+};
+var declineInvitation = function declineInvitation(hash) {
+  return publicRequest.post("v1/ticket/" + hash + "/decline");
+};
+var sendRSVPInfo = function sendRSVPInfo(eventId, data) {
+  return publicRequest.post("v1/event/" + eventId + "/send-rsvp-info", data);
 };
 
 var style = {
@@ -1339,10 +1456,6 @@ var LoginModal = function LoginModal(_ref) {
       alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
       _ref$userExpired = _ref.userExpired,
       userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
-      _ref$onAuthorizeSucce = _ref.onAuthorizeSuccess,
-      onAuthorizeSuccess = _ref$onAuthorizeSucce === void 0 ? function () {} : _ref$onAuthorizeSucce,
-      _ref$onAuthorizeError = _ref.onAuthorizeError,
-      onAuthorizeError = _ref$onAuthorizeError === void 0 ? function () {} : _ref$onAuthorizeError,
       _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
       onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
       _ref$onGetProfileData2 = _ref.onGetProfileDataError,
@@ -1375,7 +1488,7 @@ var LoginModal = function LoginModal(_ref) {
     },
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref2) {
-        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
+        var email, password, body, profileResponse, profileSpecifiedData, profileDataObj, event, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1383,66 +1496,36 @@ var LoginModal = function LoginModal(_ref) {
               case 0:
                 email = _ref2.email, password = _ref2.password;
                 _context.prev = 1;
-                bodyFormData = new FormData();
-                bodyFormData.append('email', email);
-                bodyFormData.append('password', password);
-                _context.next = 7;
-                return authorize(bodyFormData);
-
-              case 7:
-                resAutorize = _context.sent;
-                bodyFormDataToken = new FormData();
-                bodyFormDataToken.append('code', resAutorize.data.data.code);
-                bodyFormDataToken.append('scope', 'profile');
-                bodyFormDataToken.append('grant_type', 'authorization_code');
-                bodyFormDataToken.append('client_id', CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf');
-                bodyFormDataToken.append('client_secret', CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9');
-                resAccessToken = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getAccessToken(bodyFormDataToken);
-
-              case 18:
-                resAccessToken = _context.sent;
-                onAuthorizeSuccess(resAccessToken.data);
-                _context.next = 26;
-                break;
-
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
-
-                if (axios.isAxiosError(_context.t0)) {
-                  onAuthorizeError(_context.t0);
-                }
-
-                return _context.abrupt("return");
+                body = {
+                  email: email,
+                  password: password
+                };
+                _context.next = 5;
+                return authorize(body);
 
-              case 26:
-                accessToken = _get(resAccessToken, 'data.access_token');
-                handleSetAccessToken(accessToken);
+              case 5:
                 profileResponse = null;
-                _context.prev = 29;
-                _context.next = 32;
-                return getProfileData(accessToken);
+                _context.prev = 6;
+                _context.next = 9;
+                return getProfileData();
 
-              case 32:
+              case 9:
                 profileResponse = _context.sent;
                 onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 40;
+                _context.next = 17;
                 break;
 
-              case 36:
-                _context.prev = 36;
-                _context.t1 = _context["catch"](29);
+              case 13:
+                _context.prev = 13;
+                _context.t0 = _context["catch"](6);
 
-                if (axios.isAxiosError(_context.t1)) {
-                  onGetProfileDataError(_context.t1);
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetProfileDataError(_context.t0);
                 }
 
                 return _context.abrupt("return");
 
-              case 40:
+              case 17:
                 profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = {
                   id: profileSpecifiedData.id,
@@ -1453,32 +1536,31 @@ var LoginModal = function LoginModal(_ref) {
 
                 if (typeof window !== 'undefined') {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
-                  window.localStorage.setItem('access_token', accessToken);
                   event = new window.CustomEvent('tf-login');
                   window.document.dispatchEvent(event);
                 }
 
                 onLogin();
-                _context.next = 49;
+                _context.next = 26;
                 break;
 
-              case 46:
-                _context.prev = 46;
-                _context.t2 = _context["catch"](1);
+              case 23:
+                _context.prev = 23;
+                _context.t1 = _context["catch"](1);
 
-                if (axios.isAxiosError(_context.t2)) {
-                  _error = (_context.t2 == null ? void 0 : (_e$response = _context.t2.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
+                if (axios.isAxiosError(_context.t1)) {
+                  _error = (_context.t1 == null ? void 0 : (_e$response = _context.t1.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
                   setError(_error);
-                } else if (_context.t2 instanceof Error) {
-                  setError((_context.t2 == null ? void 0 : _context.t2.message) || 'Error');
+                } else if (_context.t1 instanceof Error) {
+                  setError((_context.t1 == null ? void 0 : _context.t1.message) || 'Error');
                 }
 
-              case 49:
+              case 26:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 46], [15, 22], [29, 36]]);
+        }, _callee, null, [[1, 23], [6, 13]]);
       }));
 
       function onSubmit(_x) {
@@ -1575,7 +1657,7 @@ var RegisterModal = function RegisterModal(_ref) {
     },
     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;
+        var firstName, lastName, email, password, confirmPassword, bodyFormData, profileResponse, profileSpecifiedData, profileDataObj;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -1593,27 +1675,24 @@ var RegisterModal = function RegisterModal(_ref) {
                 return register(bodyFormData);
 
               case 11:
-                resRegister = _context.sent;
-                access_token = _get(resRegister, 'data.data.attributes.access_token');
-                handleSetAccessToken(access_token);
                 profileResponse = null;
-                _context.prev = 15;
-                _context.next = 18;
-                return getProfileData(access_token);
+                _context.prev = 12;
+                _context.next = 15;
+                return getProfileData();
 
-              case 18:
+              case 15:
                 profileResponse = _context.sent;
                 onGetProfileDataSuccess(profileResponse.data);
-                _context.next = 26;
+                _context.next = 23;
                 break;
 
-              case 22:
-                _context.prev = 22;
-                _context.t0 = _context["catch"](15);
+              case 19:
+                _context.prev = 19;
+                _context.t0 = _context["catch"](12);
                 onGetProfileDataError(_context.t0.response);
                 return _context.abrupt("return");
 
-              case 26:
+              case 23:
                 profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = {
                   id: profileSpecifiedData.id,
@@ -1623,18 +1702,17 @@ var RegisterModal = function RegisterModal(_ref) {
                 };
 
                 if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('access_token', access_token);
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
                 onClose();
 
-              case 30:
+              case 27:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[15, 22]]);
+        }, _callee, null, [[12, 19]]);
       }));
 
       function onSubmit(_x) {
@@ -1788,6 +1866,7 @@ var createRegisterFormData = function createRegisterFormData(values, checkoutBod
   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);
@@ -1803,7 +1882,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     email: data.email,
     confirmEmail: data.email,
     city: (data == null ? void 0 : data.city) || '',
-    country: (data == null ? void 0 : data.country) || '',
+    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) || '',
@@ -1849,10 +1928,10 @@ var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, va
   });
   ticket_holders = filteredHolders.map(function (item, index) {
     return {
-      first_name: item["holderFirstName-" + index] || '',
-      last_name: item["holderLastName-" + index] || '',
+      first_name: !index ? item["holderFirstName-" + index] || logedInValues.firstNameLogged || '' : item["holderFirstName-" + index] || '',
+      last_name: !index ? item["holderLastName-" + index] || logedInValues.lastNameLogged || '' : item["holderLastName-" + index] || '',
       phone: item["holderPhone-" + index] || '',
-      email: item["holderEmail-" + index] || ''
+      email: !index ? item["holderEmail-" + index] || logedInValues.emailLogged || '' : item["holderEmail-" + index] || ''
     };
   });
   var filteredRestValue = {};
@@ -1903,6 +1982,14 @@ var getValidateFunctions = function getValidateFunctions(element, states, values
     validationFunctions.push(isSameEmail);
   }
 
+  if (element.name === 'confirmPassword') {
+    var isSame = function isSame(confirmPassword) {
+      return values.password !== confirmPassword ? 'Password confirmation does not match' : null;
+    };
+
+    validationFunctions.push(isSame);
+  }
+
   return combineValidators.apply(void 0, validationFunctions);
 };
 var assingUniqueIds = function assingUniqueIds(data) {
@@ -1954,13 +2041,21 @@ var CustomField = function CustomField(_ref) {
       touched = _ref$form.touched,
       errors = _ref$form.errors,
       submitCount = _ref$form.submitCount,
-      theme = _ref.theme;
+      theme = _ref.theme,
+      _ref$inputProps = _ref.inputProps,
+      pInputProps = _ref$inputProps === void 0 ? {} : _ref$inputProps,
+      _ref$InputProps = _ref.InputProps,
+      InputProps = _ref$InputProps === void 0 ? {} : _ref$InputProps,
+      inputRef = _ref.inputRef;
   var isSelectField = type === 'select';
 
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
   var customTheme = useTheme();
+  var inputProps = {
+    sx: customTheme == null ? void 0 : customTheme.input
+  };
   return React.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -1977,12 +2072,11 @@ var CustomField = function CustomField(_ref) {
       }
     },
     InputLabelProps: {
-      sx: customTheme == null ? void 0 : customTheme.input,
-      shrink: field.name === 'holderAge' ? true : undefined
-    },
-    inputProps: {
       sx: customTheme == null ? void 0 : customTheme.input
-    }
+    },
+    InputProps: InputProps,
+    inputProps: _extends({}, inputProps, pInputProps),
+    inputRef: inputRef
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React.createElement("option", {
       key: option.value,
@@ -2160,6 +2254,209 @@ var SelectField = function SelectField(_ref) {
   }, error) : null);
 };
 
+var showZero = function showZero(value) {
+  if (value === void 0) {
+    value = 0;
+  }
+
+  var intNumber = Number(value);
+  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
+};
+
+var getImage = function getImage(name) {
+  if (name === void 0) {
+    name = '';
+  }
+
+  var image = '';
+
+  if (!name.trim().length) {
+    return image;
+  }
+
+  if (process.env.NODE_ENV === 'production') {
+    image = require("./images/" + name);
+    return image["default"];
+  }
+
+  return image;
+};
+
+var TimerWidget = function TimerWidget(_ref) {
+  var expires_at = _ref.expires_at,
+      buyLoading = _ref.buyLoading,
+      _ref$onCountdownFinis = _ref.onCountdownFinish,
+      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
+
+  var _useState = useState(true),
+      showTimer = _useState[0],
+      setShowTimer = _useState[1];
+
+  var handleCountdownFinish = function handleCountdownFinish() {
+    setShowTimer(false);
+
+    if (!buyLoading) {
+      onCountdownFinish();
+    }
+  };
+
+  var _renderer = function renderer(_ref2) {
+    var minutes = _ref2.minutes,
+        seconds = _ref2.seconds,
+        completed = _ref2.completed,
+        handleCountdownFinish = _ref2.handleCountdownFinish;
+
+    if (completed) {
+      handleCountdownFinish();
+      return null;
+    }
+
+    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
+  };
+
+  var hideTimer = function hideTimer() {
+    var timerRl = document.querySelector('.timer');
+
+    if (timerRl) {
+      timerRl.style.visibility = "hidden";
+    }
+  };
+
+  return showTimer && !!expires_at ? React.createElement("div", {
+    className: "timer"
+  }, React.createElement("div", {
+    className: 'close-icon',
+    onClick: hideTimer
+  }, React.createElement(SVG, {
+    src: getImage('cross.svg'),
+    width: '10',
+    height: '10',
+    fill: '#fff'
+  })), React.createElement("div", {
+    className: "toast-message"
+  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
+    className: "countdown"
+  }, React.createElement(Countdown$1, {
+    date: Date.now() + expires_at * 1000,
+    renderer: function renderer(props) {
+      return _renderer(_extends({}, props, {
+        handleCountdownFinish: handleCountdownFinish
+      }));
+    }
+  })))) : null;
+};
+
+var TimerWidget$1 = /*#__PURE__*/memo(TimerWidget);
+
+var SnackbarAlert = function SnackbarAlert(_ref) {
+  var isOpen = _ref.isOpen,
+      message = _ref.message,
+      type = _ref.type,
+      position = _ref.position,
+      _ref$autoHideDuration = _ref.autoHideDuration,
+      autoHideDuration = _ref$autoHideDuration === void 0 ? 3000 : _ref$autoHideDuration,
+      variant = _ref.variant,
+      onClose = _ref.onClose;
+  return React.createElement("div", {
+    className: "snackbar-alert-container"
+  }, React.createElement(Snackbar, {
+    autoHideDuration: autoHideDuration,
+    open: isOpen,
+    anchorOrigin: position || {
+      vertical: 'top',
+      horizontal: 'center'
+    },
+    onClose: onClose,
+    classes: {
+      root: 'snackbar-alert-snackbar-root'
+    }
+  }, React.createElement(Alert, {
+    severity: type,
+    onClose: onClose,
+    variant: variant || 'filled',
+    classes: {
+      icon: 'snackbar-alert-icon',
+      root: 'snackbar-alert-alert-root',
+      action: 'snackbar-alert-action',
+      message: 'snackbar-alert-message',
+      filled: 'snackbar-alert-filled'
+    }
+  }, message)));
+};
+
+var DATE_SIZE = 32;
+var compactStyles = {
+  '& > div': {
+    minWidth: 256
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE
+  }
+};
+var compactStyleTheme = /*#__PURE__*/createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      }
+    }
+  }
+});
+var DatePickerField = function DatePickerField(_ref) {
+  var label = _ref.label,
+      field = _ref.field,
+      form = _ref.form,
+      theme = _ref.theme,
+      _ref$useCompact = _ref.useCompact,
+      useCompact = _ref$useCompact === void 0 ? true : _ref$useCompact;
+  return React.createElement(ThemeProvider, {
+    theme: useCompact ? compactStyleTheme : {}
+  }, React.createElement(LocalizationProvider, {
+    dateAdapter: AdapterMoment
+  }, React.createElement(DatePicker, {
+    value: field.value || '',
+    onChange: function onChange(value) {
+      return form.setFieldValue(field.name, value);
+    },
+    PopperProps: {
+      placement: 'bottom-start'
+    },
+    showDaysOutsideCurrentMonth: true,
+    disableFuture: true,
+    inputFormat: "DD/MM/YYYY",
+    mask: "__/__/____",
+    renderInput: function renderInput(params) {
+      return React.createElement(CustomField, Object.assign({}, params, {
+        inputProps: _extends({}, params.inputProps, {
+          placeholder: 'dd/mm/yyyy'
+        }),
+        theme: theme,
+        field: field,
+        form: form,
+        label: label,
+        type: "tel"
+      }));
+    }
+  })));
+};
+
 var LogicRunner = function LogicRunner(_ref) {
   var values = _ref.values,
       setStates = _ref.setStates,
@@ -2167,7 +2464,8 @@ var LogicRunner = function LogicRunner(_ref) {
       setValues = _ref.setValues,
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
-      onGetStatesError = _ref.onGetStatesError;
+      onGetStatesError = _ref.onGetStatesError,
+      shouldFetchCountries = _ref.shouldFetchCountries;
   var prevCountry = useRef(values.country);
   useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
@@ -2222,7 +2520,7 @@ var LogicRunner = function LogicRunner(_ref) {
       };
     }();
 
-    fetchStates();
+    shouldFetchCountries && fetchStates();
   }, [values.country, setStates, setFieldValue]);
   var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
   useEffect(function () {
@@ -2233,8 +2531,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) || '',
@@ -2242,15 +2540,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) {}
         }
@@ -2322,7 +2620,13 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       _ref3$skipPage = _ref3.skipPage,
       skipPage = _ref3$skipPage === void 0 ? false : _ref3$skipPage,
       _ref3$canSkipHolderNa = _ref3.canSkipHolderNames,
-      canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa;
+      canSkipHolderNames = _ref3$canSkipHolderNa === void 0 ? false : _ref3$canSkipHolderNa,
+      _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 = createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
@@ -2333,7 +2637,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       dataWithUniqueIds = _useState[0],
       setDataWithUniqueIds = _useState[1];
 
-  var _useState2 = useState(!!access_token),
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
+
+  var _useState2 = useState(!!(pIsLoggedIn || xtfCookie)),
       isLoggedIn = _useState2[0],
       setIsLoggedIn = _useState2[1];
 
@@ -2411,6 +2717,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   var hideTtfOptIn = _get(cartInfoData, 'hide_ttf_opt_in', true);
 
+  var expirationTime = _get(cartInfoData, 'expiresAt');
+
   var flagRequirePhone = getQueryVariable('phone_required') === 'true'; // Get prevProps
 
   var prevData = useRef(data);
@@ -2441,10 +2749,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   };
 
   useEffect(function () {
-    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
-      setIsLoggedIn(true);
+    if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
+      setIsLoggedIn(!!(pIsLoggedIn || xtfCookie));
     }
-  }, [pIsLoggedIn, isLoggedIn, access_token]); //just once
+  }, [pIsLoggedIn, isLoggedIn, xtfCookie]); //just once
 
   useEffect(function () {
     // fetch countries data
@@ -2493,7 +2801,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       };
     }();
 
-    fetchCountries();
+    shouldFetchCountries && fetchCountries();
     fetchCart();
   }, []); // fetch cart data
 
@@ -2553,7 +2861,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             case 0:
               _context4.prev = 0;
 
-              if (!(isWindowDefined && token)) {
+              if (!(isWindowDefined && token || isLoggedIn)) {
                 _context4.next = 10;
                 break;
               }
@@ -2600,7 +2908,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
   useEffect(function () {
     fetchUserData(access_token);
-  }, [access_token]);
+  }, [access_token, isLoggedIn]);
   useEffect(function () {
     var collectPaymentData = /*#__PURE__*/function () {
       var _ref7 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5() {
@@ -2610,7 +2918,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
             switch (_context5.prev = _context5.next) {
               case 0:
                 if (!(skipPage && !_isEmpty(ticketsQuantity) && !showDOB)) {
-                  _context5.next = 16;
+                  _context5.next = 17;
                   break;
                 }
 
@@ -2622,29 +2930,30 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
 
               case 6:
                 res = _context5.sent;
+                removeReferralKey();
                 onSkipBillingPage(_get(res, 'data.data.attributes'));
                 setLoading(false);
-                _context5.next = 14;
+                _context5.next = 15;
                 break;
 
-              case 11:
-                _context5.prev = 11;
+              case 12:
+                _context5.prev = 12;
                 _context5.t0 = _context5["catch"](3);
                 onSubmitError(_context5.t0);
 
-              case 14:
-                _context5.next = 17;
+              case 15:
+                _context5.next = 18;
                 break;
 
-              case 16:
+              case 17:
                 setLoading(false);
 
-              case 17:
+              case 18:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[3, 11]]);
+        }, _callee5, null, [[3, 12]]);
       }));
 
       return function collectPaymentData() {
@@ -2655,47 +2964,62 @@ 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
-      }, showDOB);
+      });
+    } 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);
     }
 
     return checkoutBody;
-  }; // Displaying loader
+  };
 
+  var removeReferralKey = function removeReferralKey() {
+    localStorage.removeItem('referral_key');
+  };
 
-  if (loading) {
-    return React.createElement(Backdrop, {
-      sx: {
-        color: '#fff'
-      },
-      open: true
-    }, React.createElement(CircularProgress$1, {
-      color: "inherit"
-    }));
+  if (loading || enableTimer && !expirationTime && typeof window !== 'undefined') {
+    if (expirationTime === 0) {
+      // Redirect to homepage (countdown finished and browser reloaded case)
+      window.location.href = '/';
+    }
   }
 
   return React.createElement(ThemeProvider, {
     theme: themeMui
-  }, React.createElement(Formik, {
+  }, loading && React.createElement(Backdrop, {
+    sx: {
+      color: '#fff',
+      backgroundColor: '#000000bd',
+      zIndex: 1205
+    },
+    open: true
+  }, React.createElement(CircularProgress$1, {
+    color: "inherit"
+  })), !!expirationTime && enableTimer && React.createElement(TimerWidget$1, {
+    expires_at: expirationTime,
+    onCountdownFinish: onCountdownFinish
+  }), React.createElement(Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
       country: _get(userData, 'country', '') || '1',
       state: _get(userData, 'state', '') || '1',
       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) {
@@ -2704,7 +3028,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 _context6.prev = 0;
 
                 if (!isLoggedIn) {
-                  _context6.next = 15;
+                  _context6.next = 16;
                   break;
                 }
 
@@ -2726,43 +3050,47 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 }
 
               case 9:
-                _checkoutBody = collectCheckoutBody(values);
+                _checkoutBody = collectCheckoutBody(values, userData);
                 _context6.next = 12;
                 return postOnCheckout(_checkoutBody, access_token);
 
               case 12:
                 _res = _context6.sent;
+                removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, _res);
                 return _context6.abrupt("return");
 
-              case 15:
+              case 16:
                 checkoutBodyForRegistration = createCheckoutDataBody(ticketsQuantity.length, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
                 bodyFormData = createRegisterFormData(values, checkoutBodyForRegistration);
-                access_token_register = null;
                 _context6.prev = 18;
-                _context6.next = 21;
+                setLoading(true);
+                _context6.next = 22;
                 return register(bodyFormData);
 
-              case 21:
+              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 = 33;
+                userProfile = _get(resRegister, 'data.data.attributes.user_profile');
+                onRegisterSuccess({
+                  xtfCookie: _xtfCookie,
+                  accessToken: accessToken,
+                  refreshToken: refreshToken,
+                  userProfile: userProfile
+                });
+                _context6.next = 35;
                 break;
 
-              case 29:
-                _context6.prev = 29;
+              case 30:
+                _context6.prev = 30;
                 _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;
@@ -2782,16 +3110,20 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     setShowModalLogin(true);
                   }
 
+                  if (_includes(_error, 'The cart is expired') && !hideErrorsAlertSection) {
+                    setError(_error);
+                  }
+
                   onRegisterError(_context6.t0, values.email);
                 }
 
                 return _context6.abrupt("return");
 
-              case 33:
-                _context6.next = 35;
-                return getProfileData(access_token_register);
-
               case 35:
+                _context6.next = 37;
+                return getProfileData();
+
+              case 37:
                 profileData = _context6.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -2800,19 +3132,21 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
-                checkoutBody = collectCheckoutBody(values);
-                _context6.next = 42;
-                return postOnCheckout(checkoutBody, access_token_register);
+                checkoutBody = collectCheckoutBody(values, profileDataObj);
+                _context6.next = 44;
+                return postOnCheckout(checkoutBody);
 
-              case 42:
+              case 44:
                 res = _context6.sent;
+                removeReferralKey();
                 handleSubmit(values, formikHelpers, eventId, res);
-                _context6.next = 49;
+                _context6.next = 53;
                 break;
 
-              case 46:
-                _context6.prev = 46;
+              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') {
@@ -2824,23 +3158,24 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                     }
                   }
 
-                  if ((_e$response3 = _context6.t1.response) != null && _e$response3.data.message) {
-                    if (typeof document !== undefined) {
-                      document.body.scrollTop = document.documentElement.scrollTop = 0;
-                    }
-
+                  if ((_e$response3 = _context6.t1.response) != null && _e$response3.data.message && !hideErrorsAlertSection) {
                     setError(_get(_context6.t1, 'response.data.message'));
                   }
 
                   onSubmitError(_context6.t1);
                 }
 
-              case 49:
+              case 53:
+                _context6.prev = 53;
+                setLoading(false);
+                return _context6.finish(53);
+
+              case 56:
               case "end":
                 return _context6.stop();
             }
           }
-        }, _callee6, null, [[0, 46], [18, 29]]);
+        }, _callee6, null, [[0, 49, 53, 56], [18, 30]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2859,17 +3194,24 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       setValues: props.setValues,
       setUserValues: setUserValues,
       onGetStatesSuccess: onGetStatesSuccess,
-      onGetStatesError: onGetStatesError
+      onGetStatesError: onGetStatesError,
+      shouldFetchCountries: shouldFetchCountries
     }), React.createElement("div", {
       className: "billing-info-container " + theme
-    }, error && !hideErrorsAlertSection && React.createElement(Alert, {
-      severity: "error",
-      onClose: onErrorClose,
-      variant: "filled"
-    }, error), !isLoggedIn && React.createElement("div", {
+    }, React.createElement(SnackbarAlert, {
+      type: "error",
+      isOpen: !!error,
+      message: error || '',
+      onClose: function onClose() {
+        setError(null);
+        onErrorClose();
+      }
+    }), !isLoggedIn && React.createElement("div", {
       className: "account-actions-block"
-    }, React.createElement("div", null, accountInfoTitle), React.createElement("div", null, "Login & skip ahead:"), React.createElement("div", {
-      className: "login-block"
+    }, React.createElement("div", {
+      className: "action-item"
+    }, React.createElement("div", null, accountInfoTitle), React.createElement("div", null, "Login & skip ahead:")), React.createElement("div", {
+      className: "action-item login-block"
     }, React.createElement("button", {
       className: "login-register-button",
       type: "button",
@@ -2927,7 +3269,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 : CustomField,
+            component: element.type === 'checkbox' ? CheckboxField : element.type === 'select' ? SelectField : element.type === 'phone' ? FormikPhoneNumberField : element.type === 'date' ? DatePickerField : CustomField,
             selectOptions: element.name === 'country' ? countries : element.name === 'state' ? states : [],
             theme: theme
           })));
@@ -2935,7 +3277,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     }), !_isEmpty(ticketHoldersFields.fields) && React.createElement("div", {
       className: "ticket-holders-fields"
-    }, React.createElement("p", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
+    }, React.createElement("h2", null, ticketHoldersFields.label), _map(ticketsQuantity, function (_item, index) {
       return React.createElement("div", {
         key: _item
       }, React.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
@@ -3041,7 +3383,8 @@ var CheckoutForm = function CheckoutForm(_ref) {
       handleSetLoading = _ref$handleSetLoading === void 0 ? function () {} : _ref$handleSetLoading,
       _ref$conditions = _ref.conditions,
       conditions = _ref$conditions === void 0 ? [] : _ref$conditions,
-      disableZipSection = _ref.disableZipSection;
+      disableZipSection = _ref.disableZipSection,
+      paymentButtonText = _ref.paymentButtonText;
   var stripe = useStripe();
   var elements = useElements();
 
@@ -3069,7 +3412,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              handleSetLoading(true);
+              setStripeError(null);
               _context.prev = 1;
               event.preventDefault();
 
@@ -3129,17 +3472,18 @@ var CheckoutForm = function CheckoutForm(_ref) {
               return _context.abrupt("return");
 
             case 20:
-              _context.next = 22;
+              handleSetLoading(true);
+              _context.next = 23;
               return stripe.confirmCardPayment(stripe_client_secret, {
                 payment_method: paymentMethodReq.paymentMethod.id
               });
 
-            case 22:
+            case 23:
               _yield$stripe$confirm = _context.sent;
               _error = _yield$stripe$confirm.error;
 
               if (!_error) {
-                _context.next = 28;
+                _context.next = 29;
                 break;
               }
 
@@ -3147,22 +3491,22 @@ var CheckoutForm = function CheckoutForm(_ref) {
               handleSetLoading(false);
               return _context.abrupt("return");
 
-            case 28:
+            case 29:
               onSubmit(null);
-              _context.next = 34;
+              _context.next = 35;
               break;
 
-            case 31:
-              _context.prev = 31;
+            case 32:
+              _context.prev = 32;
               _context.t0 = _context["catch"](1);
               onSubmit(_context.t0);
 
-            case 34:
+            case 35:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 31]]);
+      }, _callee, null, [[1, 32]]);
     }));
 
     return function handleSubmit(_x) {
@@ -3218,7 +3562,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onSubmit: handleSubmit
   }, React.createElement("div", {
     className: "card_form_inner"
-  }, React.createElement("label", {
+  }, React.createElement("div", {
     className: "card_number_element"
   }, React.createElement("span", {
     className: "card_label_text"
@@ -3228,19 +3572,21 @@ var CheckoutForm = function CheckoutForm(_ref) {
     onChange: _identity,
     onBlur: _identity,
     onFocus: _identity
-  })), React.createElement("label", {
+  })), React.createElement("div", {
+    className: "elements"
+  }, React.createElement("div", {
     className: "expiration_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "Expiration date"), React.createElement(CardExpiryElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), React.createElement("label", {
+  })), React.createElement("div", {
     className: "cvc_element"
   }, React.createElement("span", {
     className: "card_label_text"
   }, "CVC"), React.createElement(CardCvcElement, {
     options: _extends({}, options, stripeCardOptions)
-  })), !disableZipSection && React.createElement("label", {
+  }))), !disableZipSection && React.createElement("div", {
     className: "zip_element"
   }, React.createElement("p", {
     className: "card_label_text"
@@ -3269,64 +3615,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
     type: "submit"
   }, isLoading ? React.createElement(CircularProgress, {
     size: 26
-  }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
-};
-
-var showZero = function showZero(value) {
-  if (value === void 0) {
-    value = 0;
-  }
-
-  var intNumber = Number(value);
-  return _isNumber(intNumber) ? intNumber >= 0 && intNumber < 10 ? '0' + intNumber : intNumber : null;
-};
-
-var TimerWidget = function TimerWidget(_ref) {
-  var expires_at = _ref.expires_at,
-      buyLoading = _ref.buyLoading,
-      _ref$onCountdownFinis = _ref.onCountdownFinish,
-      onCountdownFinish = _ref$onCountdownFinis === void 0 ? function () {} : _ref$onCountdownFinis;
-
-  var _useState = useState(true),
-      showTimer = _useState[0],
-      setShowTimer = _useState[1];
-
-  var handleCountdownFinish = function handleCountdownFinish() {
-    setShowTimer(false);
-
-    if (!buyLoading) {
-      onCountdownFinish();
-    }
-  };
-
-  var _renderer = function renderer(_ref2) {
-    var minutes = _ref2.minutes,
-        seconds = _ref2.seconds,
-        completed = _ref2.completed,
-        handleCountdownFinish = _ref2.handleCountdownFinish;
-
-    if (completed) {
-      handleCountdownFinish();
-      return null;
-    }
-
-    return React.createElement("span", null, showZero(minutes), ":", showZero(seconds));
-  };
-
-  return showTimer && !!expires_at ? React.createElement("div", {
-    className: "timer"
-  }, React.createElement("div", {
-    className: "toast-message"
-  }, React.createElement("p", null, "Please complete your purchase before the timer reaches zero."), React.createElement("p", {
-    className: "countdown"
-  }, React.createElement(Countdown$1, {
-    date: Date.now() + expires_at * 1000,
-    renderer: function renderer(props) {
-      return _renderer(_extends({}, props, {
-        handleCountdownFinish: handleCountdownFinish
-      }));
-    }
-  })))) : null;
+  }) : (paymentButtonText ? paymentButtonText : 'Pay') + " " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
@@ -3387,7 +3676,10 @@ 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,
+      paymentButtonText = _ref.paymentButtonText;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3402,16 +3694,20 @@ var PaymentContainer = function PaymentContainer(_ref) {
       setError = _useState3[1];
 
   var _useState4 = useState(false),
-      paymentIsLoading = _useState4[0],
-      setPaymentIsLoading = _useState4[1];
+      showPaymentPlanSection = _useState4[0],
+      setShowPaymentPlanSection = _useState4[1];
+
+  var _useState5 = useState(false),
+      paymentIsLoading = _useState5[0],
+      setPaymentIsLoading = _useState5[1];
 
-  var _useState5 = useState(true),
-      paymentDataIsLoading = _useState5[0],
-      setPaymentDataIsLoading = _useState5[1];
+  var _useState6 = useState(true),
+      paymentDataIsLoading = _useState6[0],
+      setPaymentDataIsLoading = _useState6[1];
 
-  var _useState6 = useState([]),
-      conditions = _useState6[0],
-      setConditions = _useState6[1];
+  var _useState7 = useState([]),
+      conditions = _useState7[0],
+      setConditions = _useState7[1];
 
   var showFormTitle = Boolean(formTitle);
   var showErrorText = Boolean(errorText);
@@ -3529,37 +3825,36 @@ var PaymentContainer = function PaymentContainer(_ref) {
               _context3.prev = 0;
 
               if (!error) {
-                _context3.next = 4;
+                _context3.next = 3;
                 break;
               }
 
-              setPaymentIsLoading(false);
               throw error;
 
-            case 4:
+            case 3:
               order_hash = reviewData.order_details.order_hash;
 
-              if (!(total === "0.00")) {
-                _context3.next = 11;
+              if (!(total === '0.00')) {
+                _context3.next = 10;
                 break;
               }
 
-              _context3.next = 8;
+              _context3.next = 7;
               return handleFreeSuccess(order_hash);
 
-            case 8:
+            case 7:
               _context3.t0 = _context3.sent;
-              _context3.next = 14;
+              _context3.next = 13;
               break;
 
-            case 11:
-              _context3.next = 13;
+            case 10:
+              _context3.next = 12;
               return handlePaymentSuccess(order_hash);
 
-            case 13:
+            case 12:
               _context3.t0 = _context3.sent;
 
-            case 14:
+            case 13:
               paymentSuccessResponse = _context3.t0;
 
               if (paymentSuccessResponse.status === 200) {
@@ -3570,10 +3865,11 @@ var PaymentContainer = function PaymentContainer(_ref) {
               _context3.next = 22;
               break;
 
-            case 18:
-              _context3.prev = 18;
+            case 17:
+              _context3.prev = 17;
               _context3.t1 = _context3["catch"](0);
               setError(_get(_context3.t1, 'response.data.message'));
+              setPaymentIsLoading(false);
               onPaymentError(_context3.t1.response);
 
             case 22:
@@ -3581,7 +3877,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 18]]);
+      }, _callee3, null, [[0, 17]]);
     }));
 
     return function handlePaymentMiddleWare(_x) {
@@ -3594,7 +3890,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
     theme: themeMui
   }, React.createElement("div", {
     className: "payment_page"
-  }, !paymentIsLoading && !error && enableTimer && React.createElement(TimerWidget, {
+  }, enableTimer && React.createElement(TimerWidget$1, {
     expires_at: _get(reviewData, 'expires_at', 0),
     buyLoading: paymentIsLoading,
     onCountdownFinish: onCountdownFinish
@@ -3623,11 +3919,33 @@ var PaymentContainer = function PaymentContainer(_ref) {
     }, label), React.createElement("div", {
       className: className + " order_info_text"
     }, normalizer(orderData[id], orderData.currency)));
-  })), total !== "0.00" ? React.createElement("div", {
+  })), enablePaymentPlan && React.createElement("div", {
+    className: "payment_toggle"
+  }, React.createElement("label", {
+    htmlFor: "togBtn",
+    className: "switch"
+  }, React.createElement("input", {
+    type: "checkbox",
+    id: "togBtn",
+    disabled: true,
+    onChange: function onChange() {
+      return setShowPaymentPlanSection(!showPaymentPlanSection);
+    }
+  }), React.createElement("div", {
+    className: "slider round"
+  }), React.createElement("span", {
+    className: "tog_text"
+  }, "Click to checkout using Payment Plan"))), showPaymentPlanSection && React.createElement("div", {
+    className: "payment_plan"
+  }, React.createElement("h2", null, "PAYMENT PLAN"), React.createElement("div", {
+    className: "plan_block"
+  }, React.createElement("h3", null, "Mbrand Payment Plan Terms"), React.createElement("p", null, "By clicking on the \u201CConfirm Payment Plan\u201D button, you are starting your payment plan of 2 payments of $115.00, which will be drawn from your account every 2 weeks, with the first payment taken later today."), React.createElement("p", null, "This includes a non-refundable admin fee of $3.00 per payment."), React.createElement("p", {
+    className: "payment_note"
+  }, "NOTE: If today\u2019s payment fails, your payment plan will not activate, and your tickets will not be issued until you complete your final payment."), React.createElement("p", null, "If you do not complete your payements, your order will be canceled. Your first payment of $115.00, plus the non-refundable admin fee of $3.00 will not be refunded."), React.createElement("p", null, "Your payment will proceed with the card ending in **** 4242."))), total !== '0.00' ? React.createElement("div", {
     className: "payment_info"
   }, React.createElement("div", {
     className: "payment_info_label"
-  }, "Please provide your payment information"), showErrorText && React.createElement("p", {
+  }, "ORDER CONFIRMATION"), showErrorText && React.createElement("p", {
     className: "payment_info__error"
   }, errorText), React.createElement("div", null, React.createElement(Elements, {
     stripe: getStripePromise(reviewData),
@@ -3645,18 +3963,20 @@ var PaymentContainer = function PaymentContainer(_ref) {
     },
     conditions: conditions,
     stripeCardOptions: stripeCardOptions,
-    disableZipSection: disableZipSection
+    disableZipSection: disableZipSection,
+    paymentButtonText: paymentButtonText
   })))) : React.createElement("div", {
     className: "payment_button " + (paymentIsLoading ? 'disabled-payment-button' : '')
   }, React.createElement("button", {
     disabled: paymentIsLoading,
     type: "button",
     onClick: function onClick() {
+      setPaymentIsLoading(true);
       handlePaymentMiddleWare(null);
     }
   }, paymentIsLoading ? React.createElement(CircularProgress, {
     size: 26
-  }) : "Complete Registration")))));
+  }) : 'Complete Registration')))));
 };
 
 var config = {
@@ -3830,7 +4150,9 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
       _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
       onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2,
-      orderHash = _ref.orderHash;
+      orderHash = _ref.orderHash,
+      _ref$onLinkCopied = _ref.onLinkCopied,
+      onLinkCopied = _ref$onLinkCopied === void 0 ? function () {} : _ref$onLinkCopied;
   var inputRef = useRef(null);
 
   var _useState = useState(null),
@@ -3968,7 +4290,8 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
   }), React.createElement("div", {
     className: "share-by-link-copy-icon",
     onClick: function onClick() {
-      return navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+      navigator.clipboard.writeText(_get(inputRef, 'current.value'));
+      onLinkCopied();
     }
   }, React.createElement("img", {
     src: "https://img.icons8.com/office/50/000000/copy.png",
@@ -4034,7 +4357,7 @@ var TicketRow = function TicketRow(_ref) {
   var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded;
   var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
   var ticketsClosedMessage = !ticketTier.salesStarted ? 'Sales not started' : 'Sales Ended';
-  var onSaleContent = isSalesClosed ? ticketsClosedMessage : React.createElement("div", {
+  var onSaleContent = React.createElement("div", {
     className: "get-tickets"
   }, React.createElement(Box, {
     className: "get-tickets__selectbox"
@@ -4064,17 +4387,17 @@ var TicketRow = function TicketRow(_ref) {
       value: option.value
     }, option.value);
   })))));
-  var returnValue = '';
+  var returnValue = ''; // ticketTier.soldOut === false --> means that ticket is in the stock
 
-  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
-    returnValue = soldOutMessage;
-  }
+  var isSoldOut = ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut || ticketTier.soldOut === false;
 
-  if (ticketTier.displayTicket) {
+  if (isSoldOut) {
+    returnValue = soldOutMessage;
+  } else if (isSalesClosed) {
+    returnValue = ticketsClosedMessage;
+  } else if (ticketTier.displayTicket && ticketTier.maxQuantity) {
     returnValue = onSaleContent;
-  }
-
-  if (_get(prevTicketTier, 'in_stock')) {
+  } else if (_get(prevTicketTier, 'in_stock')) {
     returnValue = 'SOON';
   }
 
@@ -4085,11 +4408,11 @@ var TicketsSection = function TicketsSection(_ref) {
   var ticketsList = _ref.ticketsList,
       selectedTickets = _ref.selectedTickets,
       handleTicketSelect = _ref.handleTicketSelect,
-      promoCodeIsApplied = _ref.promoCodeIsApplied;
-
-  var sortedTicketsList = _sortBy(ticketsList, 'sortOrder');
-
-  return React.createElement(React.Fragment, null, sortedTicketsList.map(function (ticket, i, arr) {
+      sortBySoldOut = _ref.sortBySoldOut,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      hideTicketsHeader = _ref.hideTicketsHeader;
+  var sortedTicketsList = sortBySoldOut ? _sortBy(_sortBy(ticketsList, 'sortOrder'), 'soldOut') : _sortBy(ticketsList, 'sortOrder');
+  return React.createElement(React.Fragment, null, !hideTicketsHeader && ticketsHeaderComponent, sortedTicketsList.map(function (ticket, i, arr) {
     var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
@@ -4099,12 +4422,12 @@ var TicketsSection = function TicketsSection(_ref) {
 
     var ticketIsDiscounted = false;
 
-    if (ticket.oldPrice && promoCodeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
+    if (ticket.oldPrice && !isSoldOut && ticket.oldPrice !== ticket.price) {
       ticketIsDiscounted = true;
     }
 
-    var ticketIsFree = (+ticket.cost || +ticket.price) === 0;
-    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.cost || +ticket.price).toFixed(2);
+    var ticketIsFree = +ticket.price === 0;
+    var ticketPrice = isSoldOut ? 'SOLD OUT' : ticketIsFree ? 'FREE' : "$ " + (+ticket.price).toFixed(2);
     return React.createElement("div", {
       key: ticket.id || ticket.name,
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
@@ -4296,36 +4619,15 @@ var WaitingList = function WaitingList(_ref) {
   }) : 'ADD TO WAITING LIST')))));
 };
 
-var getImage = function getImage(name) {
-  if (name === void 0) {
-    name = '';
-  }
-
-  var image = '';
-
-  if (!name.trim().length) {
-    return image;
-  }
-
-  if (process.env.NODE_ENV === 'production') {
-    image = require("./images/" + name);
-    return image["default"];
-  }
-
-  return image;
-};
-
 var PromoCodeSection = function PromoCodeSection(_ref) {
-  var promoCode = _ref.promoCode,
-      promoCodeIsApplied = _ref.promoCodeIsApplied,
+  var code = _ref.code,
+      codeIsApplied = _ref.codeIsApplied,
       showPromoInput = _ref.showPromoInput,
-      isPromotionsEnabled = _ref.isPromotionsEnabled,
-      setPromoCode = _ref.setPromoCode,
-      setPromoCodeUpdated = _ref.setPromoCodeUpdated,
+      setCode = _ref.setCode,
       setShowPromoInput = _ref.setShowPromoInput,
-      isAccessCodeEnabled = _ref.isAccessCodeEnabled,
-      isPromoLoading = _ref.isPromoLoading;
-  var isPromoCodeHasValue = !!promoCode.trim();
+      updateTickets = _ref.updateTickets,
+      setCodeIsApplied = _ref.setCodeIsApplied;
+  var isPromoCodeHasValue = !!code.trim();
 
   var renderInputField = function renderInputField() {
     return React.createElement("div", {
@@ -4334,30 +4636,30 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
       className: "promo-code-block"
     }, React.createElement("p", {
       className: "promo-code-text"
-    }, isAccessCodeEnabled ? 'Access code required' : 'Promo code')), React.createElement("input", {
+    }, "Promo code")), React.createElement("input", {
       className: "promo-code-input",
       placeholder: "",
       onChange: function onChange(e) {
-        setPromoCode(e.target.value);
+        setCode(e.target.value);
       },
       onKeyPress: function onKeyPress(event) {
         if (event.key === 'Enter' && isPromoCodeHasValue) {
-          setPromoCodeUpdated(promoCode);
           setShowPromoInput(false);
+          updateTickets(true, 'promo');
         }
       }
     }), React.createElement(Button$1, {
       className: "promo-submit-button",
       onClick: function onClick() {
         if (isPromoCodeHasValue) {
-          setPromoCodeUpdated(promoCode);
           setShowPromoInput(false);
+          updateTickets(true, 'promo');
         }
       }
-    }, isAccessCodeEnabled ? 'ENTER' : 'APPLY'));
+    }, "APPLY"));
   };
 
-  return isPromoLoading ? React.createElement(Loader, null) : React.createElement("div", null, promoCodeIsApplied ? React.createElement("div", {
+  return React.createElement("div", null, codeIsApplied ? React.createElement("div", {
     className: "alert-info"
   }, React.createElement(SVG, {
     src: getImage('done.svg'),
@@ -4366,13 +4668,46 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     }
   }), React.createElement("p", {
     className: "promo-code-success"
-  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, showPromoInput && renderInputField(), isPromotionsEnabled && !showPromoInput && !isAccessCodeEnabled ? React.createElement(Button$1, {
+  }, "PROMO CODE APPLIED SUCCESSFULLY")) : null, !showPromoInput && React.createElement(Button$1, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
+      setCodeIsApplied(false);
       setShowPromoInput(true);
     }
-  }, "Got a promo code? Click here") : !isPromotionsEnabled && !showPromoInput && isAccessCodeEnabled && !promoCodeIsApplied ? renderInputField() : null);
+  }, "Got a promo code? Click here"), showPromoInput && renderInputField());
+};
+
+var AccessCodeSection = function AccessCodeSection(_ref) {
+  var code = _ref.code,
+      setCode = _ref.setCode,
+      updateTickets = _ref.updateTickets;
+  var isAccessCodeHasValue = !!code.trim();
+  return React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("div", {
+    className: "access-code-block"
+  }, React.createElement("p", {
+    className: "access-code-text"
+  }, "Access code required")), React.createElement("input", {
+    className: "access-code-input",
+    placeholder: "",
+    onChange: function onChange(e) {
+      setCode(e.target.value);
+    },
+    onKeyPress: function onKeyPress(event) {
+      if (event.key === 'Enter' && isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }), React.createElement(Button$1, {
+    className: "access-submit-button",
+    onClick: function onClick() {
+      if (isAccessCodeHasValue) {
+        updateTickets(true);
+      }
+    }
+  }, "ENTER"));
 };
 
 var isTimeExpired = function isTimeExpired(startDate, timezone) {
@@ -4387,8 +4722,13 @@ function Countdown(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$message = _ref.message,
       message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$showMessage = _ref.showMessage,
+      showMessage = _ref$showMessage === void 0 ? false : _ref$showMessage,
+      _ref$disableLeadingZe = _ref.disableLeadingZero,
+      disableLeadingZero = _ref$disableLeadingZe === void 0 ? false : _ref$disableLeadingZe,
       _ref$callback = _ref.callback,
-      callback = _ref$callback === void 0 ? function () {} : _ref$callback;
+      callback = _ref$callback === void 0 ? function () {} : _ref$callback,
+      isLoggedIn = _ref.isLoggedIn;
 
   var _useState = useState(''),
       duration = _useState[0],
@@ -4410,6 +4750,7 @@ function Countdown(_ref) {
           clearInterval(timer);
           setTimeExpired(true);
           callback();
+          return;
         }
 
         var currentDate = moment.tz(moment(), timezone).format('YYYY-MM-DD HH:mm:ss');
@@ -4427,7 +4768,11 @@ function Countdown(_ref) {
 
         for (var date in dateArr) {
           var unit = dateArr[date] === 1 ? date : date + 's';
-          var val = String(dateArr[date]).length === 1 ? '0' + dateArr[date] : dateArr[date];
+          var val = dateArr[date];
+
+          if (!disableLeadingZero && String(dateArr[date]).length === 1) {
+            val = '0' + dateArr[date];
+          }
 
           if (timeLeft) {
             timeLeft += ", " + val + " " + unit;
@@ -4445,10 +4790,10 @@ function Countdown(_ref) {
     };
   }, [timeExpired]);
   return React.createElement(React.Fragment, null, !timeExpired && duration && React.createElement("div", {
-    className: 'countdown'
+    className: "countdown " + (!isLoggedIn ? 'countdown-on-bottom' : '')
   }, React.createElement("div", null, React.createElement("p", {
     className: 'title'
-  }, title), React.createElement("p", null, duration)), React.createElement("p", {
+  }, title), React.createElement("p", null, duration)), showMessage && React.createElement("p", {
     className: 'message'
   }, message)));
 }
@@ -4460,7 +4805,8 @@ var ReferralLogic = function ReferralLogic(props) {
     if (isWindowDefined) {
       var params = new URL("" + window.location).searchParams;
       var referralId = params.get('ttf_r') || '';
-      var isAlreadyCounted = !!localStorage.getItem('referral_key');
+      var referralValue = [eventId, '.', referralId].join('');
+      var isAlreadyCounted = localStorage.getItem('referral_key') === referralValue;
 
       if (referralId && eventId && !isAlreadyCounted) {
         _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
@@ -4473,7 +4819,7 @@ var ReferralLogic = function ReferralLogic(props) {
                   return postReferralVisits("" + eventId, referralId);
 
                 case 3:
-                  localStorage.setItem('referral_key', [eventId, '.', referralId].join(''));
+                  localStorage.setItem('referral_key', referralValue);
                   _context.next = 8;
                   break;
 
@@ -4507,6 +4853,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,
@@ -4519,62 +4869,82 @@ var TicketsContainer = function TicketsContainer(_ref) {
       _ref$hideSessionButto = _ref.hideSessionButtons,
       hideSessionButtons = _ref$hideSessionButto === void 0 ? false : _ref$hideSessionButto,
       _ref$hideWaitingList = _ref.hideWaitingList,
-      hideWaitingList = _ref$hideWaitingList === void 0 ? false : _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,
+      sortBySoldOut = _ref$sortBySoldOut === void 0 ? false : _ref$sortBySoldOut,
+      _ref$disableCountdown = _ref.disableCountdownLeadingZero,
+      disableCountdownLeadingZero = _ref$disableCountdown === void 0 ? false : _ref$disableCountdown,
+      _ref$isLoggedIn = _ref.isLoggedIn,
+      isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
+      ActionsSectionComponent = _ref.actionsSectionComponent,
+      ticketsHeaderComponent = _ref.ticketsHeaderComponent,
+      _ref$hideTicketsHeade = _ref.hideTicketsHeader,
+      hideTicketsHeader = _ref$hideTicketsHeade === void 0 ? false : _ref$hideTicketsHeade;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
       setSelectedTickets = _useState[1];
 
   var isWindowDefined = typeof window !== 'undefined';
+  var xtfCookie = getCookieByName('X-TF-ECOMMERCE');
 
-  var _useState2 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+  var _useState2 = useState((isWindowDefined ? !!window.localStorage.getItem('access_token') : false) || !!xtfCookie),
       isLogged = _useState2[0],
       setIsLogged = _useState2[1];
 
-  var _React$useState = React.useState(false),
-      showLoginModal = _React$useState[0],
-      setShowLoginModal = _React$useState[1];
-
-  var _useState3 = useState([]),
-      tickets = _useState3[0],
-      setTickets = _useState3[1];
+  var _useState3 = useState(false),
+      showLoginModal = _useState3[0],
+      setShowLoginModal = _useState3[1];
 
-  var _useState4 = useState(null),
-      event = _useState4[0],
-      setEvent = _useState4[1];
+  var _useState4 = useState([]),
+      tickets = _useState4[0],
+      setTickets = _useState4[1];
 
-  var _useState5 = useState(false),
-      showWaitingList = _useState5[0],
-      setShowWaitingList = _useState5[1];
+  var _useState5 = useState(null),
+      event = _useState5[0],
+      setEvent = _useState5[1];
 
   var _useState6 = useState(false),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
+      showWaitingList = _useState6[0],
+      setShowWaitingList = _useState6[1];
 
-  var _useState7 = useState(false),
-      isPromoLoading = _useState7[0],
-      setIsPromoLoading = _useState7[1];
+  var _useState7 = useState(true),
+      isLoading = _useState7[0],
+      setIsLoading = _useState7[1];
 
   var _useState8 = useState(false),
-      handleBookIsLoading = _useState8[0],
-      setHandleBookIsLoading = _useState8[1];
+      codeIsLoading = _useState8[0],
+      setCodeIsLoading = _useState8[1];
 
-  var _useState9 = useState(''),
-      promoCode = _useState9[0],
-      setPromoCode = _useState9[1];
+  var _useState9 = useState(false),
+      handleBookIsLoading = _useState9[0],
+      setHandleBookIsLoading = _useState9[1];
 
   var _useState10 = useState(getQueryVariable('r') || queryPromoCode),
-      promoCodeUpdated = _useState10[0],
-      setPromoCodeUpdated = _useState10[1];
+      code = _useState10[0],
+      setCode = _useState10[1];
 
   var _useState11 = useState(false),
       showPromoInput = _useState11[0],
       setShowPromoInput = _useState11[1];
 
   var _useState12 = useState(false),
-      promoCodeIsApplied = _useState12[0],
-      setPromoCodeIsApplied = _useState12[1];
+      codeIsApplied = _useState12[0],
+      setCodeIsApplied = _useState12[1];
 
+  var _useState13 = useState(isAccessCodeEnabled),
+      showAccessCodeSection = _useState13[0],
+      setShowAccessCodeSection = _useState13[1];
+
+  var _useState14 = useState(isPromotionsEnabled),
+      showPromoCodeSection = _useState14[0],
+      setShowPromoCodeSection = _useState14[1];
+
+  var ticketsContainerRef = useRef(null);
   useEffect(function () {
     if (typeof window !== 'undefined') {
       var access_token = window.localStorage.getItem('access_token');
@@ -4590,20 +4960,66 @@ var TicketsContainer = function TicketsContainer(_ref) {
     }
   }, []);
   useEffect(function () {
-    !!eventId && getTicketsApi(!!promoCodeUpdated);
-  }, [eventId, promoCodeUpdated]);
+    !!eventId && getTicketsApi();
+  }, [eventId]);
 
-  var handleLogout = function handleLogout() {
-    if (isWindowDefined) {
-      window.localStorage.removeItem('access_token');
-      window.localStorage.removeItem('user_data');
-      setIsLogged(false);
+  var handleLogout = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var _event;
 
-      var _event = new window.CustomEvent('tf-logout');
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return logout();
 
-      window.document.dispatchEvent(_event);
-    }
-  };
+            case 3:
+              onLogoutSuccess();
+
+              if (isWindowDefined) {
+                window.localStorage.removeItem('access_token');
+                window.localStorage.removeItem('user_data');
+                setIsLogged(false);
+                _event = new window.CustomEvent('tf-logout');
+                deleteCookieByName('X-TF-ECOMMERCE');
+                window.document.dispatchEvent(_event);
+              }
+
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](0);
+              onLogoutError(_context.t0);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 7]]);
+    }));
+
+    return function handleLogout() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  useEffect(function () {
+    try {
+      if (typeof window !== 'undefined') {
+        var userData = window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '{}') : {};
+
+        if (userData.country === '') {
+          handleLogout();
+          window.open('https://www.ticketfairy.com/account/change_information?need_country=true');
+        }
+      }
+    } catch (e) {}
+  }, []);
 
   var handleExternalLogin = function handleExternalLogin() {
     setIsLogged(true);
@@ -4622,40 +5038,40 @@ 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(isUpdateingPromoCode) {
+    _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;
-              !isUpdateingPromoCode && setIsLoading(true);
-              setIsPromoLoading(true);
-              _context2.next = 5;
-              return getTickets(eventId, promoCodeUpdated);
+              _context3.prev = 0;
+              isUpdateingCode ? setCodeIsLoading(true) : setIsLoading(true);
+              _context3.next = 4;
+              return getTickets(eventId, code);
 
-            case 5:
-              response = _context2.sent;
-              _context2.next = 8;
+            case 4:
+              response = _context3.sent;
+              _context3.next = 7;
               return getEvent(eventId);
 
-            case 8:
-              eventResponse = _context2.sent;
+            case 7:
+              eventResponse = _context3.sent;
 
               if (response.data.success) {
-                setCustomHeader(response);
                 attributes = _get(response, 'data.data.attributes');
-                setPromoCodeIsApplied(attributes.ValidPromoCode);
+                type === 'promo' && setCodeIsApplied(attributes.ValidPromoCode);
                 setTickets(_get(attributes, 'tickets'));
                 setShowWaitingList(attributes.showWaitingList);
                 onGetTicketsSuccess(response.data);
-                setPromoCode('');
+                setCode('');
+                setShowAccessCodeSection(attributes.is_access_code);
+                setShowPromoCodeSection(attributes.isPromotionsEnabled);
               }
 
               if (eventResponse.data.success) {
@@ -4663,42 +5079,42 @@ var TicketsContainer = function TicketsContainer(_ref) {
                 setEvent(_event2);
               }
 
-              _context2.next = 16;
+              _context3.next = 15;
               break;
 
-            case 13:
-              _context2.prev = 13;
-              _context2.t0 = _context2["catch"](0);
+            case 12:
+              _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 16:
-              _context2.prev = 16;
+            case 15:
+              _context3.prev = 15;
               setIsLoading(false);
-              setIsPromoLoading(false);
-              return _context2.finish(16);
+              setCodeIsLoading(false);
+              return _context3.finish(15);
 
-            case 20:
+            case 19:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
         }
-      }, _callee2, null, [[0, 13, 16, 20]]);
+      }, _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;
     });
   };
 
@@ -4709,14 +5125,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, _isWindowDefined, userData, access_token, checkoutBody, checkoutResult;
+      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) {
@@ -4737,27 +5153,27 @@ 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 = 27;
+                _context2.next = 33;
                 break;
               }
 
-              setCustomHeader(result);
               skipBillingPage = (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false;
               nameIsRequired = (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false;
               ageIsRequired = (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false;
               phoneIsRequired = (_result$data$data$att5 = result == null ? void 0 : (_result$data4 = result.data) == null ? void 0 : (_result$data4$data = _result$data4.data) == null ? void 0 : (_result$data4$data$at = _result$data4$data.attributes) == null ? void 0 : _result$data4$data$at.phone_required) != null ? _result$data$data$att5 : false;
               hash = '';
+              total = '';
 
               if (!skipBillingPage) {
-                _context.next = 26;
+                _context2.next = 32;
                 break;
               }
 
@@ -4766,65 +5182,79 @@ 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;
-              hash = _get(checkoutResult, 'data.data.attributes.hash');
+            case 25:
+              _context2.t0 = _context2.sent;
+              _context2.next = 29;
+              break;
 
-            case 26:
+            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 32:
               onAddToCartSuccess({
                 skip_billing_page: skipBillingPage,
                 names_required: nameIsRequired,
                 phone_required: phoneIsRequired,
                 age_required: ageIsRequired,
                 event_id: String(eventId),
-                hash: hash
+                hash: hash,
+                total: total
               });
 
-            case 27:
-              _context.next = 32;
+            case 33:
+              _context2.next = 38;
               break;
 
-            case 29:
-              _context.prev = 29;
-              _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 32:
-              _context.prev = 32;
+            case 38:
+              _context2.prev = 38;
               setHandleBookIsLoading(false);
-              return _context.finish(32);
+              return _context2.finish(38);
 
-            case 35:
+            case 41:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee, null, [[6, 29, 32, 35]]);
+      }, _callee2, null, [[6, 35, 38, 41]]);
     }));
 
     return function handleBook() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
 
-  var updateTickets = function updateTickets() {
-    getTicketsApi();
+  var updateTickets = function updateTickets(isUpdateingCode, type) {
+    getTicketsApi(isUpdateingCode, type);
   };
 
-  var isAllTicketsSoldOut = _every(tickets, function (item) {
-    return item.sold_out || item.soldOut;
-  });
-
   var isTicketOnSale = _some(tickets, function (item) {
     return item.salesStarted && !item.salesEnded && !item.soldOut;
   });
 
+  var eventHasTickets = !_isEmpty(tickets);
+  var isSalesClosed = event == null ? void 0 : event.salesEnded;
   var themeMui = createTheme$1(themeOptions);
   useEffect(function () {
     isWindowDefined && window.document.addEventListener('custom-logout', handleLogout);
@@ -4838,44 +5268,74 @@ var TicketsContainer = function TicketsContainer(_ref) {
       isWindowDefined && window.document.removeEventListener('custom-login', handleExternalLogin);
     };
   }, []);
+
+  var handleGetTicketClick = function handleGetTicketClick() {
+    if (!handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0) {
+      handleBook();
+    } else {
+      if (isButtonScrollable && ticketsContainerRef && ticketsContainerRef.current) {
+        ticketsContainerRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+      }
+    }
+  };
+
+  var bookButtonIsDisabled = handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0;
+  var wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.cloneElement(ActionsSectionComponent, {
+    handleGetTicketClick: handleGetTicketClick,
+    isTicketOnSale: isTicketOnSale
+  }) : null;
+  var externalUrl = event == null ? void 0 : event.redirectUrl;
+  var eventSaleIsNotStarted = !(event != null && event.salesStarted) && (event == null ? void 0 : event.salesStart);
   return React.createElement(ThemeProvider$1, {
     theme: themeMui
-  }, React.createElement(ReferralLogic, {
+  }, !isLoading && React.createElement(ReferralLogic, {
     eventId: eventId
   }), React.createElement("div", {
     className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", null, React.createElement(TicketsSection, {
+  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", {
+    ref: ticketsContainerRef
+  }, !isSalesClosed && React.createElement(TicketsSection, {
     ticketsList: tickets,
     selectedTickets: selectedTickets,
     handleTicketSelect: handleTicketSelect,
-    promoCodeIsApplied: promoCodeIsApplied
-  }), event != null && event.salesEnded ? React.createElement("p", {
-    className: 'event-closed-message'
-  }, "Sales for this event are closed.") : !(event != null && event.salesStarted) && event != null && event.salesStart ? React.createElement(Countdown, {
+    sortBySoldOut: sortBySoldOut,
+    ticketsHeaderComponent: ticketsHeaderComponent,
+    hideTicketsHeader: hideTicketsHeader || _isEmpty(tickets)
+  }), externalUrl ? null : isSalesClosed ? React.createElement("p", {
+    className: "event-closed-message " + (!isLoggedIn ? 'event-closed-on-bottom' : '')
+  }, "Sales for this event are closed.") : eventSaleIsNotStarted ? React.createElement(Countdown, {
     startDate: event.salesStart,
     timezone: event.timezone,
     title: "Sales start in:",
     message: "No tickets are currently available for this event.",
-    callback: updateTickets
+    showMessage: !eventHasTickets,
+    callback: updateTickets,
+    disableLeadingZero: disableCountdownLeadingZero,
+    isLoggedIn: isLoggedIn
   }) : null, showWaitingList && event.salesStarted && !hideWaitingList && React.createElement(WaitingList, {
     tickets: tickets,
     eventId: eventId
-  }), React.createElement(PromoCodeSection, {
-    promoCode: promoCode,
-    promoCodeIsApplied: promoCodeIsApplied,
+  }), codeIsLoading ? React.createElement(Loader, null) : isSalesClosed ? null : showAccessCodeSection ? React.createElement(AccessCodeSection, {
+    code: code,
+    setCode: setCode,
+    updateTickets: updateTickets
+  }) : showPromoCodeSection ? React.createElement(PromoCodeSection, {
+    code: code,
+    codeIsApplied: codeIsApplied,
+    setCodeIsApplied: setCodeIsApplied,
     showPromoInput: showPromoInput,
-    setPromoCode: setPromoCode,
-    setPromoCodeUpdated: setPromoCodeUpdated,
     setShowPromoInput: setShowPromoInput,
-    isPromotionsEnabled: isPromotionsEnabled,
-    isAccessCodeEnabled: isAccessCodeEnabled,
-    isAllTicketsSoldOut: isAllTicketsSoldOut,
-    isPromoLoading: isPromoLoading
-  }), (isTicketOnSale || !(event != null && event.salesEnded)) && React.createElement(Button$1, {
+    setCode: setCode,
+    updateTickets: updateTickets
+  }) : null, wrappedActionsSectionComponent, !wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !(event != null && event.salesEnded) && !externalUrl && React.createElement(Button$1, {
     "aria-hidden": true,
-    className: "book-button " + (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0 ? 'disabled' : ''),
-    onClick: !handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0 ? handleBook : function () {}
+    className: "book-button \n                  " + (bookButtonIsDisabled ? 'disabled' : '') + "  \n                  " + (isButtonScrollable ? 'is-scrollable' : '') + "\n                  " + (!isLoggedIn ? 'on-bottom' : '') + "\n                ",
+    onClick: handleGetTicketClick
   }, getTicketsLabel || 'GET TICKETS'), isLogged && !hideSessionButtons ? React.createElement("div", {
     className: "session-wrapper"
   }, React.createElement("span", {
@@ -4913,10 +5373,7 @@ var tableConfig = function tableConfig(key) {
   switch (key) {
     default:
       config = {
-        header: ['Order No.', 'Date', 'Event', 'Total'],
         body: [function (row) {
-          return row.id;
-        }, function (row) {
           return row.date;
         }, function (row) {
           return React.createElement(EventInfoItem, {
@@ -4985,16 +5442,30 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
 
   var _useState4 = useState(''),
       filter = _useState4[0],
-      setFilter = _useState4[1]; //just once
+      setFilter = _useState4[1];
+
+  var isWindowDefined = typeof window !== 'undefined';
+
+  var _useState5 = useState(isWindowDefined ? !!window.localStorage.getItem('access_token') : false),
+      isLogged = _useState5[0],
+      setIsLogged = _useState5[1];
+
+  var _useState6 = useState(false),
+      showModalLogin = _useState6[0],
+      setShowModalLogin = _useState6[1];
+
+  var _useState7 = useState(false),
+      userExpired = _useState7[0],
+      setUserExpired = _useState7[1]; //just once
 
 
   useEffect(function () {
     fetchData(1, limit, filter);
-  }, []);
+  }, [isLogged]);
 
   var fetchData = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(page, limit, filter) {
-      var response, _data;
+      var response, _data, _error$response;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
@@ -5011,25 +5482,37 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
               _data = _get(response, 'data.data.attributes');
               _data.page -= 1;
               setData(_data);
-              _context.next = 14;
+              _context.next = 15;
               break;
 
             case 11:
               _context.prev = 11;
               _context.t0 = _context["catch"](0);
+
+              if (axios.isAxiosError(_context.t0)) {
+                if (((_error$response = _context.t0.response) == null ? void 0 : _error$response.data.error) === 'invalid_token') {
+                  if (isWindowDefined) {
+                    window.localStorage.removeItem('user_data');
+                    window.localStorage.removeItem('access_token');
+                    setUserExpired(true);
+                    setShowModalLogin(true);
+                  }
+                }
+              }
+
               onGetOrdersError(_context.t0);
 
-            case 14:
-              _context.prev = 14;
+            case 15:
+              _context.prev = 15;
               setLoading(false);
-              return _context.finish(14);
+              return _context.finish(15);
 
-            case 17:
+            case 18:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[0, 11, 14, 17]]);
+      }, _callee, null, [[0, 11, 15, 18]]);
     }));
 
     return function fetchData(_x, _x2, _x3) {
@@ -5055,7 +5538,24 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     className: "my-ticket " + theme
   }, loading && React.createElement("div", {
     className: "loading"
-  }, React.createElement(CircularProgress, null)), data && React.createElement(React.Fragment, null, React.createElement(Autocomplete, {
+  }, React.createElement(CircularProgress, null)), !isLogged ? React.createElement("div", {
+    className: "account-actions-block"
+  }, React.createElement("div", {
+    className: "login-block"
+  }, React.createElement("button", {
+    className: "login-register-button",
+    type: "button",
+    onClick: function onClick() {
+      setShowModalLogin(true);
+    }
+  }, "Login"), React.createElement("div", {
+    className: "logo-image-container"
+  }, React.createElement("img", {
+    src: theme === 'dark' ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg' : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg',
+    alt: "nodata"
+  })))) : null, data && React.createElement(React.Fragment, null, React.createElement("h2", null, "My Ticket Orders"), React.createElement("div", {
+    className: "order_event"
+  }, React.createElement(Autocomplete, {
     disablePortal: true,
     id: "combo-box-demo",
     getOptionLabel: function getOptionLabel(option) {
@@ -5071,16 +5571,14 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
         label: "Events"
       }));
     }
-  }), React.createElement(TableContainer, {
+  }), React.createElement("button", {
+    className: "clear"
+  }, "CLEAR")), React.createElement(TableContainer, {
     component: Paper,
     className: "my-ticket-table"
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, tableConfig().header.map(function (column, index) {
-    return React.createElement(TableCell, {
-      key: index
-    }, column);
-  }), React.createElement(TableCell, null))), React.createElement(TableBody, null, (_data$orders = data.orders) == null ? void 0 : _data$orders.map(function (row) {
+  }, React.createElement(TableBody, null, (_data$orders = data.orders) == null ? void 0 : _data$orders.map(function (row) {
     return React.createElement(Row, {
       key: row.id,
       row: row,
@@ -5094,6 +5592,16 @@ var MyTicketsContainer = function MyTicketsContainer(_ref) {
     page: data.page,
     onPageChange: handleChangePage,
     onRowsPerPageChange: handleChangeRowsPerPage
+  })), React.createElement(React.Fragment, null, showModalLogin && React.createElement(LoginModal, {
+    onClose: function onClose() {
+      setShowModalLogin(false);
+    },
+    onLogin: function onLogin() {
+      setShowModalLogin(false);
+      setUserExpired(false);
+      setIsLogged(true);
+    },
+    userExpired: userExpired
   })));
 };
 
@@ -5103,27 +5611,94 @@ var TicketsTable = function TicketsTable(_ref) {
       _ref$handleSellTicket = _ref.handleSellTicket,
       handleSellTicket = _ref$handleSellTicket === void 0 ? function () {} : _ref$handleSellTicket,
       _ref$handleRemoveFrom = _ref.handleRemoveFromResale,
-      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? function () {} : _ref$handleRemoveFrom;
+      handleRemoveFromResale = _ref$handleRemoveFrom === void 0 ? function () {} : _ref$handleRemoveFrom,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon;
+
+  var _useState = useState(null),
+      pdfError = _useState[0],
+      setPdfError = _useState[1];
+
   return React.createElement("div", {
     className: "tickets-box"
-  }, React.createElement("h4", {
+  }, React.createElement(SnackbarAlert, {
+    type: "error",
+    isOpen: !!pdfError,
+    message: pdfError || '',
+    onClose: function onClose() {
+      return setPdfError(null);
+    }
+  }), React.createElement("h4", {
     className: "sub-title"
   }, "Your Tickets"), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Ticket ID"), React.createElement(TableCell, null, "Ticket Type"), React.createElement(TableCell, null, "Ticket Holder Name"), React.createElement(TableCell, null, "Status"), React.createElement(TableCell, null, "Download"), React.createElement(TableCell, null))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null), React.createElement(TableCell, null))), React.createElement(TableBody, null, tickets.map(function (ticket, index) {
     var _ticket$add_ons;
 
     return React.createElement(Fragment, {
       key: index
-    }, React.createElement(TableRow, null, React.createElement(TableCell, null, ticket.hash), React.createElement(TableCell, null, ticket.ticket_type), React.createElement(TableCell, null, ticket.holder_name), React.createElement(TableCell, null, ticket.status), React.createElement(TableCell, null, React.createElement("span", {
+    }, React.createElement(TableRow, null, React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket ID"), React.createElement("span", null, ticket.hash))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket Type"), React.createElement("span", null, ticket.ticket_type))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Ticket Holder"), React.createElement("span", null, ticket.holder_name))), React.createElement(TableCell, null, React.createElement("div", {
+      className: "cell-block"
+    }, React.createElement("span", null, "Status"), React.createElement("span", null, ticket.status))), React.createElement(TableCell, null, ticket.status !== 'Sold' && React.createElement("div", {
+      className: "tb-download"
+    }, Boolean(icon) && React.createElement("img", {
+      src: icon,
+      alt: ""
+    }), React.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
-      onClick: function onClick() {
-        return downloadPDF(ticket.pdf_link);
-      }
-    }, "Download")), React.createElement(TableCell, null, ticket.is_sellable && React.createElement("span", {
+      onClick: function () {
+        var _onClick = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+          var pdfDownloadError;
+          return runtime_1.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.prev = 0;
+                  _context.next = 3;
+                  return downloadPDF(ticket.pdf_link);
+
+                case 3:
+                  pdfDownloadError = _context.sent;
+
+                  if (pdfDownloadError) {
+                    setPdfError(pdfDownloadError == null ? void 0 : pdfDownloadError.message);
+                  }
+
+                  _context.next = 10;
+                  break;
+
+                case 7:
+                  _context.prev = 7;
+                  _context.t0 = _context["catch"](0);
+
+                  if (_context.t0 && typeof _context.t0 === 'string') {
+                    setPdfError(_context.t0);
+                  }
+
+                case 10:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee, null, [[0, 7]]);
+        }));
+
+        function onClick() {
+          return _onClick.apply(this, arguments);
+        }
+
+        return onClick;
+      }()
+    }, "Download"))), React.createElement(TableCell, null, ticket.is_sellable && React.createElement("span", {
       "aria-hidden": true,
       className: "action-button",
       onClick: function onClick() {
@@ -5223,7 +5798,8 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       holder_name = ticket.holder_name,
       event_name = ticket.event_name,
       currency = ticket.currency,
-      resale_fee_amount = ticket.resale_fee_amount;
+      resale_fee_amount = ticket.resale_fee_amount,
+      ticket_type_is_active = ticket.ticket_type_is_active;
   return React.createElement(Modal, {
     open: true,
     onClose: onClose,
@@ -5296,13 +5872,13 @@ var TicketResaleModal = function TicketResaleModal(_ref) {
       label: 'Confirm Email address',
       type: 'text',
       component: CustomField
-    }))))), React.createElement("div", null, React.createElement(Field, {
-      name: 'to',
-      label: 'I will sell my ticket to anyone who wants to buy it',
-      type: 'radio',
-      value: 'anyone',
+    }))))), ticket_type_is_active && React.createElement("div", null, React.createElement(Field, {
+      name: "to",
+      label: "I will sell my ticket to anyone who wants to buy it",
+      type: "radio",
+      value: "anyone",
       component: RadioField
-    })), React.createElement("div", null, React.createElement("h4", null, "Terms of Resale"), React.createElement("p", null, "I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back."), React.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React.createElement("strong", null, event_name), " and I will not receive any refund."), React.createElement("p", null, "If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of ", React.createElement("strong", null, currency + resale_fee_amount), ", and that any existing refunds due to me for referring sales for this event are no longer valid."), React.createElement(Field, {
+    })), React.createElement("div", null, React.createElement("h4", null, "Terms of Resale"), React.createElement("p", null, "I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back."), React.createElement("p", null, "I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to ", React.createElement("strong", null, event_name), " and I will not receive any refund."), React.createElement("p", null, "If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of ", React.createElement("strong", null, (currency || '') + " " + (resale_fee_amount || '')), ", and that any existing refunds due to me for referring sales for this event are no longer valid."), React.createElement(Field, {
       name: 'confirm',
       label: 'I agree',
       type: 'checkbox',
@@ -5362,10 +5938,14 @@ 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,
+      _ref$personalLinkIcon = _ref.personalLinkIcon,
+      personalLinkIcon = _ref$personalLinkIcon === void 0 ? '' : _ref$personalLinkIcon;
 
   var _useState = useState({}),
       data = _useState[0],
@@ -5435,7 +6015,15 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
   }, []);
 
   var handleSellTicket = function handleSellTicket(ticket) {
-    setActiveTicket(ticket);
+    var ticketTypesArr = data.items.ticket_types;
+
+    var sellTicketType = _find(ticketTypesArr, function (ticketType) {
+      return ticketType.hash === ticket.ticket_type_hash;
+    });
+
+    setActiveTicket(_extends({}, ticket, {
+      ticket_type_is_active: sellTicketType == null ? void 0 : sellTicketType.active
+    }));
     setShowResaleModal(true);
   };
 
@@ -5558,6 +6146,12 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     };
   }();
 
+  var orderSummery = "ID " + data.id + ", placed";
+
+  if (data.date) {
+    orderSummery += " " + data.date;
+  }
+
   return React.createElement("div", {
     className: "order-details"
   }, loading ? React.createElement("div", {
@@ -5566,19 +6160,45 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     className: "layout-title"
   }, "Order Details"), React.createElement("div", {
     className: "order-summary-box"
-  }, React.createElement("h4", {
+  }, React.createElement("div", {
+    className: "summary-block"
+  }, React.createElement("div", {
+    className: "summary-item"
+  }, React.createElement("h6", {
     className: "sub-title"
-  }, "Order Summary"), React.createElement("div", {
+  }, "Order Summary"), React.createElement("p", null, orderSummery)), React.createElement("div", {
+    className: "summary-item"
+  }, React.createElement("div", {
+    className: "return-button-container"
+  }, React.createElement("button", {
+    type: "button",
+    className: "return-button",
+    onClick: function onClick() {
+      if (typeof window !== 'undefined') {
+        window.location.assign('/orders');
+      }
+    }
+  }, "Back to Orders")))), React.createElement("div", {
     className: "personal-link"
-  }, React.createElement("b", null, "Your personal share link for this event is: "), React.createElement("a", {
+  }, React.createElement("div", {
+    className: "link-item"
+  }, React.createElement("span", null, "Personal Share Link: "), React.createElement("a", {
     href: data == null ? void 0 : data.personal_share_link,
     target: "_blank",
     rel: "noreferrer"
-  }, data == null ? void 0 : data.personal_share_link)), React.createElement(TableContainer, {
+  }, Boolean(personalLinkIcon) && React.createElement("img", {
+    src: personalLinkIcon,
+    alt: "Icon"
+  }), data == null ? void 0 : data.personal_share_link)), React.createElement("div", {
+    className: "link-item"
+  }, React.createElement("p", null, "So far, you\u2019ve referred " + data.sales_referred + " tickets"))), React.createElement(TableContainer, {
     component: Paper
   }, React.createElement(Table, {
+    className: "tt-type",
     "aria-label": "collapsible table"
-  }, React.createElement(TableHead, null, React.createElement(TableRow, null, React.createElement(TableCell, null, "Items"), React.createElement(TableCell, null, "Price"), React.createElement(TableCell, null, "Quantity"), React.createElement(TableCell, null, "Total"))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
+  }, React.createElement(TableHead, null, React.createElement(TableRow, null, _map(columns, function (item) {
+    return React.createElement(TableCell, null, item.label || '');
+  }))), React.createElement(TableBody, null, data == null ? void 0 : (_data$items = data.items) == null ? void 0 : (_data$items$ticket_ty = _data$items.ticket_types) == null ? void 0 : _data$items$ticket_ty.map(function (ticket, index) {
     return React.createElement(TableRow, {
       key: index
     }, React.createElement(TableCell, null, React.createElement("b", null, "Ticket Type: "), ticket.name), React.createElement(TableCell, null, ticket.currency + ticket.price), React.createElement(TableCell, null, ticket.quantity), React.createElement(TableCell, null, ticket.currency + ticket.total));
@@ -5592,17 +6212,7 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
     tickets: data.tickets,
     handleSellTicket: handleSellTicket,
     handleRemoveFromResale: handleRemoveFromResale
-  }), React.createElement("div", {
-    className: "return-button-container"
-  }, React.createElement("button", {
-    type: "button",
-    className: "return-button",
-    onClick: function onClick() {
-      if (typeof window !== 'undefined') {
-        window.location.assign('/orders');
-      }
-    }
-  }, "Return to Order History"))), showResaleModal && React.createElement(TicketResaleModal, {
+  })), showResaleModal && React.createElement(TicketResaleModal, {
     ticket: activeTicket,
     onClose: handleOnClose,
     onSubmit: handleOnSubmit
@@ -5614,81 +6224,294 @@ var OrderDetailsContainer = function OrderDetailsContainer(_ref) {
 };
 
 var TicketResaleContainer = function TicketResaleContainer(_ref) {
-  var _ref$onCheckTicketSta = _ref.onCheckTicketStatusSuccess,
-      onCheckTicketStatusSuccess = _ref$onCheckTicketSta === void 0 ? function () {} : _ref$onCheckTicketSta,
-      _ref$onCheckTicketSta2 = _ref.onCheckTicketStatusError,
-      onCheckTicketStatusError = _ref$onCheckTicketSta2 === void 0 ? function () {} : _ref$onCheckTicketSta2,
+  var _ref$onProcessTicketS = _ref.onProcessTicketSuccess,
+      onProcessTicketSuccess = _ref$onProcessTicketS === void 0 ? function () {} : _ref$onProcessTicketS,
+      _ref$onProcessTicketE = _ref.onProcessTicketError,
+      onProcessTicketError = _ref$onProcessTicketE === void 0 ? function () {} : _ref$onProcessTicketE,
+      _ref$onDeclineTicketP = _ref.onDeclineTicketPurchaseSuccess,
+      onDeclineTicketPurchaseSuccess = _ref$onDeclineTicketP === void 0 ? function () {} : _ref$onDeclineTicketP,
+      _ref$onDeclineTicketP2 = _ref.onDeclineTicketPurchaseError,
+      onDeclineTicketPurchaseError = _ref$onDeclineTicketP2 === void 0 ? function () {} : _ref$onDeclineTicketP2,
       orderHash = _ref.orderHash;
   var isWindowDefined = typeof window !== 'undefined';
 
-  var _useState = useState(null),
+  var _useState = useState(''),
       error = _useState[0],
       setError = _useState[1];
 
+  var _useState2 = useState(''),
+      successMessage = _useState2[0],
+      setSuccessMessage = _useState2[1];
+
   useEffect(function () {
     _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-      var params, hash, response, data, age_required, names_required, event_id, _error$response, _error$response$data;
+      var params, hash, isDeclined, response, _error$response, _error$response$data, _response, data, age_required, names_required, event_id, _error$response2, _error$response2$data;
 
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               if (!isWindowDefined) {
-                _context.next = 24;
+                _context.next = 38;
                 break;
               }
 
               params = new URL("" + window.location).searchParams;
-              hash = params.get('o') || orderHash || null;
+              hash = params.get('invitation_hash') || orderHash || null;
+              isDeclined = params.get('decline') || false;
 
               if (!hash) {
-                _context.next = 23;
+                _context.next = 37;
                 break;
               }
 
-              _context.prev = 4;
-              _context.next = 7;
-              return checkTicketStatus(hash);
+              if (!isDeclined) {
+                _context.next = 19;
+                break;
+              }
 
-            case 7:
+              _context.prev = 6;
+              _context.next = 9;
+              return declineInvitation(hash);
+
+            case 9:
               response = _context.sent;
-              data = _get(response, 'data.data.attributes');
+              onDeclineTicketPurchaseSuccess(response);
+              setSuccessMessage("Thanks for letting us know! We'll offer this ticket to someone else!");
+              _context.next = 18;
+              break;
+
+            case 14:
+              _context.prev = 14;
+              _context.t0 = _context["catch"](6);
+              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
+              onDeclineTicketPurchaseError(_context.t0.response);
+
+            case 18:
+              return _context.abrupt("return");
+
+            case 19:
+              _context.prev = 19;
+              _context.next = 22;
+              return processTicket(hash);
+
+            case 22:
+              _response = _context.sent;
+              data = _get(_response, 'data.data.attributes');
               age_required = _get(data, 'age_required', false);
               names_required = _get(data, 'names_required', false);
               event_id = _get(data, 'event_id');
-              onCheckTicketStatusSuccess(response.data);
+              onProcessTicketSuccess(_response.data);
               window.location.href = "/billing/billing-info/?age_required=" + age_required + "&names_required=" + names_required + "&event_id=" + event_id;
-              _context.next = 21;
+              _context.next = 35;
               break;
 
-            case 16:
-              _context.prev = 16;
-              _context.t0 = _context["catch"](4);
-              console.log(_context.t0);
-              setError(_context.t0 == null ? void 0 : (_error$response = _context.t0.response) == null ? void 0 : (_error$response$data = _error$response.data) == null ? void 0 : _error$response$data.message);
-              onCheckTicketStatusError(_context.t0.response);
+            case 31:
+              _context.prev = 31;
+              _context.t1 = _context["catch"](19);
+              setError(_context.t1 == null ? void 0 : (_error$response2 = _context.t1.response) == null ? void 0 : (_error$response2$data = _error$response2.data) == null ? void 0 : _error$response2$data.message);
+              onProcessTicketError(_context.t1.response);
 
-            case 21:
-              _context.next = 24;
+            case 35:
+              _context.next = 38;
               break;
 
-            case 23:
+            case 37:
               window.location.href = '/';
 
-            case 24:
+            case 38:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 16]]);
+      }, _callee, null, [[6, 14], [19, 31]]);
     }))();
   }, []);
   return React.createElement("div", {
     className: "ticket-resale-page"
   }, React.createElement("div", {
-    className: "error-block"
-  }, React.createElement("h3", null, error)));
+    className: "" + (successMessage ? 'success-block' : 'error-block')
+  }, React.createElement("h3", null, successMessage ? successMessage : error)));
+};
+
+var style$3 = {
+  position: 'absolute',
+  top: '10%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+};
+var RedirectModal = function RedirectModal(_ref) {
+  var _ref$message = _ref.message,
+      message = _ref$message === void 0 ? 'Your cart has expired. Please click on "OK" to return to the ticket selection page.' : _ref$message,
+      _ref$onClickOk = _ref.onClickOk,
+      onClickOk = _ref$onClickOk === void 0 ? function () {} : _ref$onClickOk;
+  return React.createElement(Modal, {
+    open: true,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "redirect-modal"
+  }, React.createElement(Box, {
+    style: style$3
+  }, React.createElement("p", null, message), React.createElement("div", {
+    className: "footer"
+  }, React.createElement("button", {
+    onClick: onClickOk
+  }, "OK"))));
+};
+
+var style$4 = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+};
+var RsvpContainer = function RsvpContainer(_ref) {
+  var _ref$showSection = _ref.showSection,
+      showSection = _ref$showSection === void 0 ? false : _ref$showSection,
+      eventId = _ref.eventId;
+  var userDataEncoded = typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : '';
+  var parsedData = JSON.parse(userDataEncoded || '{}');
+
+  var _useState = useState(false),
+      loading = _useState[0],
+      setLoading = _useState[1];
+
+  var _useState2 = useState({
+    isOpen: false,
+    text: ''
+  }),
+      modal = _useState2[0],
+      setModal = _useState2[1];
+
+  var handleModalClose = function handleModalClose() {
+    setModal({
+      isOpen: false,
+      text: ''
+    });
+  };
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var requestData, _yield$sendRSVPInfo, data, _error$response$data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              requestData = {
+                data: {
+                  email: values.email
+                }
+              };
+              _context.next = 5;
+              return sendRSVPInfo(eventId, requestData);
+
+            case 5:
+              _yield$sendRSVPInfo = _context.sent;
+              data = _yield$sendRSVPInfo.data;
+              setModal({
+                isOpen: true,
+                text: data.message
+              });
+              _context.next = 13;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](0);
+
+              if (_context.t0.response.status === 403) {
+                setModal({
+                  isOpen: true,
+                  text: (_error$response$data = _context.t0.response.data) == null ? void 0 : _error$response$data.message
+                });
+              }
+
+            case 13:
+              _context.prev = 13;
+              setLoading(false);
+              return _context.finish(13);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 10, 13, 16]]);
+    }));
+
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  if (!showSection) {
+    return null;
+  }
+
+  return React.createElement(React.Fragment, null, React.createElement(Modal, {
+    open: modal.isOpen,
+    onClose: handleModalClose,
+    "aria-labelledby": "modal-modal-title",
+    "aria-describedby": "modal-modal-description",
+    className: "rsvp-modal"
+  }, React.createElement(Box, {
+    style: style$4,
+    className: "rsvp-modal-box"
+  }, React.createElement("div", {
+    className: "rsvp-modal-container"
+  }, React.createElement("div", {
+    className: "rsvp-modal-header"
+  }, modal.text), React.createElement("div", {
+    className: "rsvp-modal-button"
+  }, React.createElement("button", {
+    onClick: handleModalClose
+  }, "OK"))))), React.createElement("div", {
+    className: "rsvp-container"
+  }, loading ? React.createElement(Loader, null) : React.createElement(React.Fragment, null, React.createElement("div", {
+    className: "rsvp-header"
+  }, "RSVP"), React.createElement("div", {
+    className: "rsvp-email-container"
+  }, React.createElement(Formik, {
+    initialValues: {
+      email: (parsedData == null ? void 0 : parsedData.email) || ''
+    },
+    onSubmit: handleSubmit,
+    enableReinitialize: true
+  }, React.createElement(Form, null, React.createElement("div", {
+    className: "rsvp-email-input-container"
+  }, React.createElement(Field, {
+    name: "email",
+    label: "EMAIL ADDRESS",
+    type: "email",
+    validate: combineValidators(function (value) {
+      return requiredValidator(value, 'Please enter your Email');
+    }, function (value) {
+      return emailValidator(value);
+    }),
+    component: CustomField
+  })), React.createElement("div", {
+    className: "rsvp-button-container"
+  }, React.createElement(Button, {
+    type: "submit"
+  }, "RSVP"))))))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, MyTicketsContainer, OrderDetailsContainer, PaymentContainer, RedirectModal, RsvpContainer, TicketResaleContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator, setConfigs };
 //# sourceMappingURL=tf-checkout-react.esm.js.map