tf-checkout-react 1.0.42 → 1.0.46

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

@@ -1,17 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Formik, Form, Field } from 'formik';
-import Button from '@mui/material/Button';
+import LoadingButton from '@mui/lab/LoadingButton';
 import _identity from 'lodash-es/identity';
 import _map from 'lodash-es/map';
 import _get from 'lodash-es/get';
 import _includes from 'lodash-es/includes';
 import axios from 'axios';
-import { TextField } from '@mui/material';
+import { TextField, CircularProgress } from '@mui/material';
 import Modal from '@mui/material/Modal';
 import Box from '@mui/material/Box';
 import _forEach from 'lodash-es/forEach';
 import _flatMapDeep from 'lodash-es/flatMapDeep';
 import TextField$1 from '@mui/material/TextField';
+import { makeStyles } from '@mui/styles';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
@@ -19,20 +20,19 @@ import Container from '@mui/material/Container';
 import Alert from '@mui/material/Alert';
 import { useStripe, useElements, CardNumberElement, CardExpiryElement, CardCvcElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
-import CircularProgress from '@mui/material/CircularProgress';
+import CircularProgress$1 from '@mui/material/CircularProgress';
 import SVG from 'react-inlinesvg';
-import _sortBy from 'lodash-es/sortBy';
-import _has from 'lodash-es/has';
 import _some from 'lodash-es/some';
 import _find from 'lodash-es/find';
 import _isEmpty from 'lodash-es/isEmpty';
-import _filter from 'lodash-es/filter';
-import _isObject from 'lodash-es/isObject';
+import Button$1 from 'react-bootstrap/Button';
+import jwt_decode from 'jwt-decode';
+import _sortBy from 'lodash-es/sortBy';
+import _has from 'lodash-es/has';
 import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import Button$1 from 'react-bootstrap/Button';
-import jwt_decode from 'jwt-decode';
+import Button from '@mui/material/Button';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -890,9 +890,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".style_billing-info-container__3ZE3J{margin:0 auto;max-width:800px}.style_billing-info-container__3ZE3J .style_is-half__1W_rP{width:49%}.style_billing-info-container__3ZE3J p{color:#000}.style_billing-info-container__3ZE3J .style_main-header__2OFWa{font-size:2rem;font-weight:600}.style_billing-info-container__twoFields__2tDqt{display:flex;justify-content:space-between;margin-top:15px}.style_billing-info-container__singleField__2bcsf{margin-top:15px}button{margin-top:10px}.style_account-actions-block__16OH-{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.style_login-register-button__fGgZf,.style_MuiButtonBase-root__1UBk9.style_MuiButton-root__3NzEO,.style_MuiButtonBase-root__1UBk9.style_MuiButton-root__3NzEO:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.style_logo-image-container__2A2uH{margin-top:5px;text-align:center;width:49%}.style_logo-image-container__2A2uH img{height:30px}.style_login-block__22kcN{align-items:center;display:flex;flex-direction:column}.style_login-register-button__fGgZf:hover{background-color:#505050!important;border-color:#505050!important}.style_login-register-block__36tu5{display:flex;justify-content:space-between}";
+var css_248z = ".style_button-container__2bhts{display:flex;justify-content:center;padding:20px}.style_billing-info-container__3ZE3J{margin:0 auto;max-width:800px}.style_billing-info-container__3ZE3J .style_is-half__1W_rP{width:49%}.style_billing-info-container__3ZE3J p{color:#000}.style_billing-info-container__3ZE3J .style_main-header__2OFWa{font-size:2rem;font-weight:600}.style_billing-info-container__twoFields__2tDqt{display:flex;justify-content:space-between;margin-top:15px}.style_billing-info-container__singleField__2bcsf{margin-top:15px}button{margin-top:10px}.style_account-actions-block__16OH-{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.style_login-register-button__fGgZf,.style_MuiButtonBase-root__1UBk9.style_MuiButton-root__3NzEO,.style_MuiButtonBase-root__1UBk9.style_MuiButton-root__3NzEO:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.style_logo-image-container__2A2uH{margin-top:5px;text-align:center;width:49%}.style_logo-image-container__2A2uH img{height:30px}.style_login-block__22kcN{align-items:center;display:flex;flex-direction:column}.style_login-register-button__fGgZf:hover{background-color:#505050!important;border-color:#505050!important}.style_login-register-block__36tu5{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.style_billing-info-container__3ZE3J{width:90%}.style_billing-info-container__3ZE3J .style_main-header__2OFWa{font-size:1.5rem}}";
 styleInject(css_248z);
 
+var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 var combineValidators = function combineValidators() {
   for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
     validators[_key] = arguments[_key];
@@ -901,19 +902,22 @@ var combineValidators = function combineValidators() {
   return function () {
     for (var i = 0; i < validators.length; ++i) {
       var error_message = validators[i].apply(validators, arguments);
-      if (error_message !== undefined) return error_message;
+      if (error_message) return error_message;
     }
   };
 };
-var requiredValidator = function requiredValidator(value) {
+var requiredValidator = function requiredValidator(value, message) {
   var errorMessage = '';
 
   if (!value) {
-    errorMessage = 'Required';
+    errorMessage = message || 'Required';
   }
 
   return errorMessage;
 };
+var emailValidator = function emailValidator(email) {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '';
+};
 
 // preview1
 
@@ -935,6 +939,10 @@ if (isWindowDefined && localStorage.getItem('auth_guest_token')) {
   ttfHeaders['Authorization-Guest'] = /*#__PURE__*/localStorage.getItem('auth_guest_token');
 }
 
+if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc') {
+  ttfHeaders['X-Source-Origin'] = 'houseofx.nyc';
+}
+
 var publicRequest = /*#__PURE__*/axios.create({
   baseURL: ENV.BASE_URL ,
   headers: ttfHeaders
@@ -978,7 +986,9 @@ publicRequest.interceptors.request.use(function (config) {
   }
 
   if (isWindowDefined && window.location.origin !== 'https://www.houseofx.nyc' && window.location.origin !== 'https://tickets-staging.houseofx.nyc') {
-    var _updatedHeaders2 = _extends({}, config.headers);
+    var _updatedHeaders2 = _extends({}, config.headers, {
+      'X-Source-Origin': 'houseofx.nyc'
+    });
 
     config.headers = _updatedHeaders2;
   }
@@ -1084,6 +1094,9 @@ var getConfirmationData = function getConfirmationData(orderHash) {
 var getStates = function getStates(countryId) {
   return publicRequest.get("/countries/" + countryId + "/states/");
 };
+var addToWaitingList = function addToWaitingList(id, data) {
+  return publicRequest.post("/v1/event/" + id + "/add_to_waiting_list", data);
+};
 
 var css_248z$1 = ".style_modal-title__2sUq_{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.style_login-modal-body__2sFg5{padding:15px 25px}.style_login-modal-body__2sFg5 input{background:#fff!important}.style_login-modal-body__email__2nnEH,.style_login-modal-body__password__qS3g7{margin-bottom:20px}.style_login-action-button__1g9qt button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.style_login-action-button__1g9qt button:hover{background-color:#505050;border-color:#505050}.style_server_auth__error__1340S{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.style_info-text-for-login__28JQf{font-size:14px;margin-bottom:4px;padding-left:10px}";
 styleInject(css_248z$1);
@@ -1101,9 +1114,18 @@ var style = {
 var LoginModal = function LoginModal(_ref) {
   var onClose = _ref.onClose,
       onLogin = _ref.onLogin,
-      alreadyHasUser = _ref.alreadyHasUser,
-      userExpired = _ref.userExpired,
-      setUserExpired = _ref.setUserExpired;
+      _ref$alreadyHasUser = _ref.alreadyHasUser,
+      alreadyHasUser = _ref$alreadyHasUser === void 0 ? false : _ref$alreadyHasUser,
+      _ref$userExpired = _ref.userExpired,
+      userExpired = _ref$userExpired === void 0 ? false : _ref$userExpired,
+      _ref$onAuthorizeSucce = _ref.onAuthorizeSuccess,
+      onAuthorizeSuccess = _ref$onAuthorizeSucce === void 0 ? function () {} : _ref$onAuthorizeSucce,
+      _ref$onAuthorizeError = _ref.onAuthorizeError,
+      onAuthorizeError = _ref$onAuthorizeError === void 0 ? function () {} : _ref$onAuthorizeError,
+      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
+      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
 
   var _useState = useState(''),
       error = _useState[0],
@@ -1123,7 +1145,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, profileData, profileSpecifiedData, profileDataObj, _e$response, _e$response$data, _error;
+        var email, password, bodyFormData, resAutorize, bodyFormDataToken, resAccessToken, accessToken, profileResponse, profileSpecifiedData, profileDataObj, _e$response, _e$response$data, _error;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1145,19 +1167,53 @@ var LoginModal = function LoginModal(_ref) {
                 bodyFormDataToken.append('grant_type', 'authorization_code');
                 bodyFormDataToken.append('client_id', ENV.CLIENT_ID );
                 bodyFormDataToken.append('client_secret', ENV.CLIENT_SECRET );
-                _context.next = 16;
+                resAccessToken = null;
+                _context.prev = 15;
+                _context.next = 18;
                 return getAccessToken(bodyFormDataToken);
 
-              case 16:
+              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");
+
+              case 26:
                 accessToken = _get(resAccessToken, 'data.access_token');
                 handleSetAccessToken(accessToken);
-                _context.next = 21;
+                profileResponse = null;
+                _context.prev = 29;
+                _context.next = 32;
                 return getProfileData(accessToken);
 
-              case 21:
-                profileData = _context.sent;
-                profileSpecifiedData = _get(profileData, 'data.data');
+              case 32:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 40;
+                break;
+
+              case 36:
+                _context.prev = 36;
+                _context.t1 = _context["catch"](29);
+
+                if (axios.isAxiosError(_context.t1)) {
+                  onGetProfileDataError(_context.t1);
+                }
+
+                return _context.abrupt("return");
+
+              case 40:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = {
                   id: profileSpecifiedData.id,
                   first_name: profileSpecifiedData.firstName,
@@ -1170,28 +1226,27 @@ var LoginModal = function LoginModal(_ref) {
                   window.localStorage.setItem('access_token', accessToken);
                 }
 
-                setUserExpired(false);
                 onLogin();
-                _context.next = 32;
+                _context.next = 49;
                 break;
 
-              case 29:
-                _context.prev = 29;
-                _context.t0 = _context["catch"](1);
+              case 46:
+                _context.prev = 46;
+                _context.t2 = _context["catch"](1);
 
-                if (axios.isAxiosError(_context.t0)) {
-                  _error = (_context.t0 == null ? void 0 : (_e$response = _context.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
+                if (axios.isAxiosError(_context.t2)) {
+                  _error = (_context.t2 == null ? void 0 : (_e$response = _context.t2.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message) || 'Error';
                   setError(_error);
-                } else if (_context.t0 instanceof Error) {
-                  setError((_context.t0 == null ? void 0 : _context.t0.message) || 'Error');
+                } else if (_context.t2 instanceof Error) {
+                  setError((_context.t2 == null ? void 0 : _context.t2.message) || 'Error');
                 }
 
-              case 32:
+              case 49:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 29]]);
+        }, _callee, null, [[1, 46], [15, 22], [29, 36]]);
       }));
 
       function onSubmit(_x) {
@@ -1255,7 +1310,11 @@ var css_248z$2 = ".style_register-container___s5V8{margin:0 auto;max-width:800px
 styleInject(css_248z$2);
 
 var RegisterModal = function RegisterModal(_ref) {
-  var onClose = _ref.onClose;
+  var onClose = _ref.onClose,
+      _ref$onGetProfileData = _ref.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref$onGetProfileData === void 0 ? function () {} : _ref$onGetProfileData,
+      _ref$onGetProfileData2 = _ref.onGetProfileDataError,
+      onGetProfileDataError = _ref$onGetProfileData2 === void 0 ? function () {} : _ref$onGetProfileData2;
   return React.createElement("div", {
     style: {
       display: 'flex',
@@ -1279,7 +1338,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, profileData, profileSpecifiedData, profileDataObj;
+        var firstName, lastName, email, password, confirmPassword, bodyFormData, resRegister, access_token, profileResponse, profileSpecifiedData, profileDataObj;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -1300,12 +1359,25 @@ var RegisterModal = function RegisterModal(_ref) {
                 resRegister = _context.sent;
                 access_token = _get(resRegister, 'data.data.attributes.access_token');
                 handleSetAccessToken(access_token);
-                _context.next = 16;
+                profileResponse = null;
+                _context.prev = 15;
+                _context.next = 18;
                 return getProfileData(access_token);
 
-              case 16:
-                profileData = _context.sent;
-                profileSpecifiedData = _get(profileData, 'data.data');
+              case 18:
+                profileResponse = _context.sent;
+                onGetProfileDataSuccess(profileResponse.data);
+                _context.next = 26;
+                break;
+
+              case 22:
+                _context.prev = 22;
+                _context.t0 = _context["catch"](15);
+                onGetProfileDataError(_context.t0.response);
+                return _context.abrupt("return");
+
+              case 26:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = {
                   id: profileSpecifiedData.id,
                   first_name: profileSpecifiedData.firstName,
@@ -1320,12 +1392,12 @@ var RegisterModal = function RegisterModal(_ref) {
 
                 onClose();
 
-              case 21:
+              case 30:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee);
+        }, _callee, null, [[15, 22]]);
       }));
 
       function onSubmit(_x) {
@@ -1429,8 +1501,8 @@ var RegisterModal = function RegisterModal(_ref) {
   }));
 };
 
-var _excluded = ["holderAge", "firstName", "lastName", "confirmEmail", "confirmPassword", "holderFirstName", "holderLastName"];
-var getInitialValues = function getInitialValues(data, propsInitialValues) {
+var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
+var getInitialValues = function getInitialValues(data, propsInitialValues, userValues) {
   if (data === void 0) {
     data = [];
   }
@@ -1439,6 +1511,10 @@ var getInitialValues = function getInitialValues(data, propsInitialValues) {
     propsInitialValues = {};
   }
 
+  if (userValues === void 0) {
+    userValues = {};
+  }
+
   var results = _flatMapDeep(data, function (_ref) {
     var fields = _ref.fields;
     return _map(fields, function (_ref2) {
@@ -1453,7 +1529,7 @@ var getInitialValues = function getInitialValues(data, propsInitialValues) {
   var initialValues = {};
 
   _forEach(results, function (item) {
-    initialValues[item] = propsInitialValues[item] || '';
+    initialValues[item] = propsInitialValues[item] || userValues[item] || '';
   });
 
   return initialValues;
@@ -1487,7 +1563,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
-var createCheckoutDataBody = function createCheckoutDataBody(values, logedInValues, includeDob) {
+var createCheckoutDataBody = function createCheckoutDataBody(ticketsQuantity, values, logedInValues, includeDob) {
   if (values === void 0) {
     values = {};
   }
@@ -1501,23 +1577,52 @@ var createCheckoutDataBody = function createCheckoutDataBody(values, logedInValu
   }
 
   var _values = values,
-      holderAge = _values.holderAge,
       firstName = _values.firstName,
       lastName = _values.lastName,
-      holderFirstName = _values.holderFirstName,
-      holderLastName = _values.holderLastName,
+      holderAge = _values.holderAge,
       restValues = _objectWithoutPropertiesLoose(_values, _excluded);
 
+  var holders = [];
+  var ticket_holders = [];
+
+  var _loop = function _loop(i) {
+    var individualHolder = Object.fromEntries(Object.entries(values).filter(function (_ref4) {
+      var key = _ref4[0];
+      return key.includes(String(i));
+    }));
+    holders.push(individualHolder);
+  };
+
+  for (var i = 0; i <= ticketsQuantity; i++) {
+    _loop(i);
+  }
+
+  var filteredHolders = holders.filter(function (holder) {
+    return Object.entries(holder).length > 0;
+  });
+  ticket_holders = filteredHolders.map(function (item, index) {
+    return {
+      first_name: item["holderFirstName-" + index] || '',
+      last_name: item["holderLastName-" + index] || '',
+      phone: item["holderPhone-" + index] || '',
+      email: item["holderEmail-" + index] || ''
+    };
+  });
+  var filteredRestValue = {};
+
+  _forEach(restValues, function (value, key) {
+    if (!key.includes('holder')) {
+      filteredRestValue[key] = value;
+    }
+  });
+
   var body = {
-    attributes: _extends({}, restValues, {
+    attributes: _extends({}, filteredRestValue, {
       email: restValues.email || logedInValues.emailLogged,
       confirm_email: restValues.email || logedInValues.emailLogged,
       first_name: firstName || logedInValues.firstNameLogged,
       last_name: lastName || logedInValues.lastNameLogged,
-      ticket_holders: [{
-        first_name: holderFirstName,
-        last_name: holderLastName
-      }]
+      ticket_holders: ticket_holders
     })
   };
 
@@ -1531,6 +1636,13 @@ var createCheckoutDataBody = function createCheckoutDataBody(values, logedInValu
   return body;
 };
 
+var useStyles = /*#__PURE__*/makeStyles({
+  input: {
+    "&::placeholder": {
+      color: "gray"
+    }
+  }
+});
 var CustomField = function CustomField(_ref) {
   var label = _ref.label,
       _ref$type = _ref.type,
@@ -1547,6 +1659,7 @@ var CustomField = function CustomField(_ref) {
 
   var error = _get(errors, field.name);
 
+  var classes = useStyles();
   return React.createElement(TextField$1, Object.assign({
     id: field.name,
     label: label,
@@ -1558,22 +1671,31 @@ var CustomField = function CustomField(_ref) {
     InputLabelProps: {
       shrink: isShrink
     },
+    InputProps: {
+      classes: {
+        input: classes.input
+      }
+    },
     SelectProps: {
       "native": true
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React.createElement("option", {
       key: option.value,
-      value: option.value
+      value: option.value,
+      disabled: option.disabled
     }, option.label);
   }) : null);
 };
 
+var _excluded$1 = ["label", "field"];
 var CheckboxField = function CheckboxField(_ref) {
   var label = _ref.label,
-      field = _ref.field;
+      field = _ref.field,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
   return React.createElement(FormGroup, null, React.createElement(FormControlLabel, {
-    control: React.createElement(Checkbox, Object.assign({}, field)),
+    control: React.createElement(Checkbox, Object.assign({}, field, rest)),
     label: label
   }));
 };
@@ -1600,7 +1722,9 @@ var LogicRunner = function LogicRunner(_ref) {
       setStates = _ref.setStates,
       setFieldValue = _ref.setFieldValue,
       setValues = _ref.setValues,
-      setUserValues = _ref.setUserValues;
+      setUserValues = _ref.setUserValues,
+      onGetStatesSuccess = _ref.onGetStatesSuccess,
+      onGetStatesError = _ref.onGetStatesError;
   useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
@@ -1624,19 +1748,24 @@ var LogicRunner = function LogicRunner(_ref) {
                 });
                 setStates(mappedStates);
                 setFieldValue('state', (_mappedStates$0$label = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.label) != null ? _mappedStates$0$label : '');
-                _context.next = 11;
+                onGetStatesSuccess(res.data);
+                _context.next = 13;
                 break;
 
-              case 9:
-                _context.prev = 9;
+              case 10:
+                _context.prev = 10;
                 _context.t0 = _context["catch"](0);
 
-              case 11:
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetStatesError(_context.t0);
+                }
+
+              case 13:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 9]]);
+        }, _callee, null, [[0, 10]]);
       }));
 
       return function fetchStates() {
@@ -1660,9 +1789,6 @@ var LogicRunner = function LogicRunner(_ref) {
               email: (parsedData == null ? void 0 : parsedData.email) || '',
               phone: (parsedData == null ? void 0 : parsedData.phone) || '',
               confirmEmail: '',
-              holderFirstName: '',
-              holderLastName: '',
-              holderAge: '',
               state: (parsedData == null ? void 0 : parsedData.state) || '',
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
               country: (parsedData == null ? void 0 : parsedData.country) || 1,
@@ -1674,9 +1800,7 @@ var LogicRunner = function LogicRunner(_ref) {
             };
             setValues(mappedValues);
             setUserValues(mappedValues);
-          } catch (e) {
-            console.log(e);
-          }
+          } catch (e) {}
         }
       }
     };
@@ -1694,6 +1818,11 @@ var SectionContainer = function SectionContainer(_ref3) {
 var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   var _ref4$data = _ref4.data,
       data = _ref4$data === void 0 ? [] : _ref4$data,
+      _ref4$ticketHoldersFi = _ref4.ticketHoldersFields,
+      ticketHoldersFields = _ref4$ticketHoldersFi === void 0 ? {
+    id: 1,
+    fields: []
+  } : _ref4$ticketHoldersFi,
       _ref4$initialValues = _ref4.initialValues,
       initialValues = _ref4$initialValues === void 0 ? {} : _ref4$initialValues,
       _ref4$buttonName = _ref4.buttonName,
@@ -1701,7 +1830,35 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       _ref4$handleSubmit = _ref4.handleSubmit,
       handleSubmit = _ref4$handleSubmit === void 0 ? _identity : _ref4$handleSubmit,
       _ref4$theme = _ref4.theme,
-      theme = _ref4$theme === void 0 ? 'light' : _ref4$theme;
+      theme = _ref4$theme === void 0 ? 'light' : _ref4$theme,
+      _ref4$onRegisterSucce = _ref4.onRegisterSuccess,
+      onRegisterSuccess = _ref4$onRegisterSucce === void 0 ? function () {} : _ref4$onRegisterSucce,
+      _ref4$onRegisterError = _ref4.onRegisterError,
+      onRegisterError = _ref4$onRegisterError === void 0 ? function () {} : _ref4$onRegisterError,
+      _ref4$onSubmitError = _ref4.onSubmitError,
+      onSubmitError = _ref4$onSubmitError === void 0 ? function () {} : _ref4$onSubmitError,
+      _ref4$onGetCartSucces = _ref4.onGetCartSuccess,
+      onGetCartSuccess = _ref4$onGetCartSucces === void 0 ? function () {} : _ref4$onGetCartSucces,
+      _ref4$onGetCartError = _ref4.onGetCartError,
+      onGetCartError = _ref4$onGetCartError === void 0 ? function () {} : _ref4$onGetCartError,
+      _ref4$onGetCountriesS = _ref4.onGetCountriesSuccess,
+      onGetCountriesSuccess = _ref4$onGetCountriesS === void 0 ? function () {} : _ref4$onGetCountriesS,
+      _ref4$onGetCountriesE = _ref4.onGetCountriesError,
+      onGetCountriesError = _ref4$onGetCountriesE === void 0 ? function () {} : _ref4$onGetCountriesE,
+      _ref4$onGetStatesSucc = _ref4.onGetStatesSuccess,
+      onGetStatesSuccess = _ref4$onGetStatesSucc === void 0 ? function () {} : _ref4$onGetStatesSucc,
+      _ref4$onGetStatesErro = _ref4.onGetStatesError,
+      onGetStatesError = _ref4$onGetStatesErro === void 0 ? function () {} : _ref4$onGetStatesErro,
+      _ref4$onGetProfileDat = _ref4.onGetProfileDataSuccess,
+      onGetProfileDataSuccess = _ref4$onGetProfileDat === void 0 ? function () {} : _ref4$onGetProfileDat,
+      _ref4$onGetProfileDat2 = _ref4.onGetProfileDataError,
+      onGetProfileDataError = _ref4$onGetProfileDat2 === void 0 ? function () {} : _ref4$onGetProfileDat2,
+      _ref4$onAuthorizeSucc = _ref4.onAuthorizeSuccess,
+      onAuthorizeSuccess = _ref4$onAuthorizeSucc === void 0 ? function () {} : _ref4$onAuthorizeSucc,
+      _ref4$onAuthorizeErro = _ref4.onAuthorizeError,
+      onAuthorizeError = _ref4$onAuthorizeErro === void 0 ? function () {} : _ref4$onAuthorizeErro,
+      _ref4$onLogin = _ref4.onLogin,
+      onLogin = _ref4$onLogin === void 0 ? function () {} : _ref4$onLogin;
   var userData = typeof window !== 'undefined' && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = typeof window !== 'undefined' && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
 
@@ -1733,7 +1890,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       showModalRegister = _useState7[0],
       setShowModalRegister = _useState7[1];
 
-  var _useState8 = useState({
+  var _useState8 = useState(1),
+      ticketsQuantity = _useState8[0],
+      setTicketsQuantity = _useState8[1];
+
+  var _useState9 = useState({
     firstName: '',
     lastName: '',
     email: '',
@@ -1748,8 +1909,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     state: '',
     zip: ''
   }),
-      userValues = _useState8[0],
-      setUserValues = _useState8[1];
+      userValues = _useState9[0],
+      setUserValues = _useState9[1];
 
   var isLoggedIn = !!access_token;
 
@@ -1762,12 +1923,25 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
   var showDOB = getQueryVariable('age_required') === 'true';
   var showTicketHolderName = getQueryVariable('names_required') === 'true';
 
-  var optedInFieldValue = _get(cartInfoData, 'optedIn', false); // fetch cart data
+  var optedInFieldValue = _get(cartInfoData, 'optedIn', false);
+
+  var getQuantity = function getQuantity(cart) {
+    if (cart === void 0) {
+      cart = [];
+    }
+
+    var qty = 0;
+    cart.forEach(function (item) {
+      qty += +item.quantity;
+    });
+    return qty;
+  }; // fetch cart data
 
 
   var fetchCart = /*#__PURE__*/function () {
     var _ref5 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
-      var res;
+      var res, cartInfo, _cartInfo$cart, cart;
+
       return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
@@ -1779,20 +1953,28 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
             case 3:
               res = _context2.sent;
               setCustomHeader(res);
-              setCartInfo(_get(res, 'data.data.attributes'));
-              _context2.next = 10;
+              cartInfo = _get(res, 'data.data.attributes');
+              setCartInfo(cartInfo);
+              _cartInfo$cart = cartInfo.cart, cart = _cartInfo$cart === void 0 ? [] : _cartInfo$cart;
+              setTicketsQuantity(getQuantity(cart));
+              onGetCartSuccess(res.data);
+              _context2.next = 15;
               break;
 
-            case 8:
-              _context2.prev = 8;
+            case 12:
+              _context2.prev = 12;
               _context2.t0 = _context2["catch"](0);
 
-            case 10:
+              if (axios.isAxiosError(_context2.t0)) {
+                onGetCartError(_context2.t0);
+              }
+
+            case 15:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 8]]);
+      }, _callee2, null, [[0, 12]]);
     }));
 
     return function fetchCart() {
@@ -1811,7 +1993,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
               _context3.prev = 0;
 
               if (!(typeof window !== 'undefined' && token)) {
-                _context3.next = 9;
+                _context3.next = 10;
                 break;
               }
 
@@ -1824,21 +2006,26 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
               profileDataObj = setLoggedUserData(profileSpecifiedData);
               setUserValues(profileDataObj);
               window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
+              onGetProfileDataSuccess(userDataResponse.data);
 
-            case 9:
-              _context3.next = 13;
+            case 10:
+              _context3.next = 15;
               break;
 
-            case 11:
-              _context3.prev = 11;
+            case 12:
+              _context3.prev = 12;
               _context3.t0 = _context3["catch"](0);
 
-            case 13:
+              if (axios.isAxiosError(_context3.t0)) {
+                onGetProfileDataError(_context3.t0);
+              }
+
+            case 15:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 11]]);
+      }, _callee3, null, [[0, 12]]);
     }));
 
     return function fetchUserData(_x) {
@@ -1857,10 +2044,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
           while (1) {
             switch (_context4.prev = _context4.next) {
               case 0:
-                _context4.next = 2;
+                _context4.prev = 0;
+                _context4.next = 3;
                 return getCountries();
 
-              case 2:
+              case 3:
                 res = _context4.sent;
                 setCustomHeader(res);
                 setCountries(_map(_get(res, 'data.data'), function (item, key) {
@@ -1869,13 +2057,24 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                     value: Number(key)
                   };
                 }));
+                onGetCountriesSuccess(res.data);
+                _context4.next = 12;
+                break;
 
-              case 5:
+              case 9:
+                _context4.prev = 9;
+                _context4.t0 = _context4["catch"](0);
+
+                if (axios.isAxiosError(_context4.t0)) {
+                  onGetCountriesError(_context4.t0);
+                }
+
+              case 12:
               case "end":
                 return _context4.stop();
             }
           }
-        }, _callee4);
+        }, _callee4, null, [[0, 9]]);
       }));
 
       return function fetchCountries() {
@@ -1894,11 +2093,11 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       lastName: lastNameLogged,
       country: 1,
       brand_opt_in: optedInFieldValue
-    })),
+    }), userValues),
     enableReinitialize: true,
     onSubmit: function () {
       var _onSubmit = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee5(values, formikHelpers) {
-        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, bodyFormData, resRegister, access_token_register, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response, _e$response$data, _e$response2, error;
+        var updatedUserData, _profileSpecifiedData, _profileDataObj, _checkoutBody, _res, bodyFormData, access_token_register, resRegister, refreshToken, tokens, _e$response, _e$response$data, error, profileData, profileSpecifiedData, profileDataObj, checkoutBody, res, _e$response2;
 
         return runtime_1.wrap(function _callee5$(_context5) {
           while (1) {
@@ -1929,7 +2128,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                 }
 
               case 9:
-                _checkoutBody = createCheckoutDataBody(values, {
+                _checkoutBody = createCheckoutDataBody(ticketsQuantity, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
@@ -1944,17 +2143,55 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
 
               case 15:
                 bodyFormData = createRegisterFormData(values);
-                _context5.next = 18;
+                access_token_register = null;
+                _context5.prev = 17;
+                _context5.next = 20;
                 return register(bodyFormData);
 
-              case 18:
+              case 20:
                 resRegister = _context5.sent;
                 access_token_register = _get(resRegister, 'data.data.attributes.access_token');
+                refreshToken = _get(resRegister, 'data.data.attributes.refresh_token');
                 handleSetAccessToken(access_token_register);
-                _context5.next = 23;
+                tokens = {
+                  accessToken: access_token_register,
+                  refreshToken: refreshToken
+                };
+                onRegisterSuccess(tokens);
+                _context5.next = 32;
+                break;
+
+              case 28:
+                _context5.prev = 28;
+                _context5.t0 = _context5["catch"](17);
+
+                if (axios.isAxiosError(_context5.t0)) {
+                  error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
+
+                  if (_includes(error, 'You must be aged')) {
+                    formikHelpers.setFieldError('holderAge', error);
+                  }
+
+                  if (error != null && error.password) {
+                    formikHelpers.setFieldError('password', error.password);
+                    formikHelpers.setFieldError('confirmPassword', error.password);
+                  }
+
+                  if (error != null && error.email) {
+                    setAlreadyHasUser(true);
+                    setShowModalLogin(true);
+                  }
+
+                  onRegisterError(_context5.t0);
+                }
+
+                return _context5.abrupt("return");
+
+              case 32:
+                _context5.next = 34;
                 return getProfileData(access_token_register);
 
-              case 23:
+              case 34:
                 profileData = _context5.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -1963,42 +2200,26 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
                 }
 
-                checkoutBody = createCheckoutDataBody(values, {
+                checkoutBody = createCheckoutDataBody(ticketsQuantity, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
                 }, showDOB);
-                _context5.next = 30;
+                _context5.next = 41;
                 return postOnCheckout(checkoutBody, access_token_register);
 
-              case 30:
+              case 41:
                 res = _context5.sent;
                 handleSubmit(values, formikHelpers, res);
-                _context5.next = 37;
+                _context5.next = 48;
                 break;
 
-              case 34:
-                _context5.prev = 34;
-                _context5.t0 = _context5["catch"](0);
+              case 45:
+                _context5.prev = 45;
+                _context5.t1 = _context5["catch"](0);
 
-                if (axios.isAxiosError(_context5.t0)) {
-                  error = _context5.t0 == null ? void 0 : (_e$response = _context5.t0.response) == null ? void 0 : (_e$response$data = _e$response.data) == null ? void 0 : _e$response$data.message;
-
-                  if (_includes(error, 'You must be aged')) {
-                    formikHelpers.setFieldError('holderAge', error);
-                  }
-
-                  if (error != null && error.password) {
-                    formikHelpers.setFieldError('password', error.password);
-                    formikHelpers.setFieldError('confirmPassword', error.password);
-                  }
-
-                  if (error != null && error.email) {
-                    setAlreadyHasUser(true);
-                    setShowModalLogin(true);
-                  }
-
-                  if (((_e$response2 = _context5.t0.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
+                if (axios.isAxiosError(_context5.t1)) {
+                  if (((_e$response2 = _context5.t1.response) == null ? void 0 : _e$response2.data.error) === 'invalid_token') {
                     if (typeof window !== 'undefined') {
                       window.localStorage.removeItem('user_data');
                       window.localStorage.removeItem('access_token');
@@ -2006,14 +2227,16 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                       setShowModalLogin(true);
                     }
                   }
+
+                  onSubmitError(_context5.t1);
                 }
 
-              case 37:
+              case 48:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[0, 34]]);
+        }, _callee5, null, [[0, 45], [17, 28]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2030,7 +2253,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       setStates: setStates,
       setFieldValue: props.setFieldValue,
       setValues: props.setValues,
-      setUserValues: setUserValues
+      setUserValues: setUserValues,
+      onGetStatesSuccess: onGetStatesSuccess,
+      onGetStatesError: onGetStatesError
     }), React.createElement("div", {
       className: "billing-info-container " + theme
     }, !isLoggedIn && React.createElement("div", {
@@ -2041,6 +2266,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       className: "login-register-button",
       type: "button",
       onClick: function onClick() {
+        onLogin();
         setShowModalLogin(true);
       }
     }, "Login"))), _map(data, function (item) {
@@ -2057,13 +2283,13 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
         key: id
       }, React.createElement("p", {
         className: labelClassName
-      }, label), _map(fields, function (group, index) {
+      }, label), _map(fields, function (group) {
         var groupClassname = group.groupClassname,
             groupItems = group.groupItems,
             groupLabel = group.groupLabel,
             groupLabelClassName = group.groupLabelClassName;
-        return React.createElement("div", {
-          key: index
+        return React.createElement(SectionContainer, {
+          key: group.id
         }, !isLoggedIn && React.createElement("div", {
           className: groupLabelClassName
         }, groupLabel), React.createElement("div", {
@@ -2096,16 +2322,43 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
           }));
         })));
       }));
-    }), React.createElement("div", {
-      style: {
-        display: 'flex',
-        padding: 20,
-        justifyContent: 'center'
-      }
-    }, React.createElement(Button, {
+    }), showTicketHolderName && React.createElement("div", null, React.createElement("p", null, ticketHoldersFields.label), _map(new Array(ticketsQuantity), function (_item, index) {
+      return React.createElement("div", {
+        key: index
+      }, React.createElement("h5", null, "Ticket ", index + 1), _map(ticketHoldersFields.fields, function (group) {
+        var groupClassname = group.groupClassname,
+            groupItems = group.groupItems;
+        return React.createElement("div", {
+          key: group.id
+        }, React.createElement("div", {
+          className: groupClassname
+        }, _map(groupItems, function (element) {
+          return React.createElement("div", {
+            className: element.className,
+            key: element.name + "-" + index
+          }, React.createElement(Field, {
+            name: element.name + "-" + index,
+            key: element.name + "-" + index,
+            label: element.label,
+            type: element.type,
+            required: true,
+            component: element.type === 'checkbox' ? CheckboxField : CustomField,
+            validate: combineValidators(element.required ? requiredValidator : function () {}, element.onValidate ? element.onValidate : function () {})
+          }));
+        })));
+      }));
+    })), React.createElement("div", {
+      className: "button-container"
+    }, React.createElement(LoadingButton, {
       type: "submit",
       variant: "contained",
-      className: "login-register-button"
+      className: "login-register-button",
+      loadingIndicator: React.createElement(CircularProgress, {
+        color: "inherit",
+        size: 26
+      }),
+      loading: props.isSubmitting,
+      disabled: props.isSubmitting
     }, buttonName))));
   }), showModalLogin && React.createElement(LoginModal, {
     onClose: function onClose() {
@@ -2113,17 +2366,23 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     },
     onLogin: function onLogin() {
       setShowModalLogin(false);
+      setUserExpired(false);
     },
     alreadyHasUser: alreadyHasUser,
     userExpired: userExpired,
-    setUserExpired: setUserExpired
+    onAuthorizeSuccess: onAuthorizeSuccess,
+    onAuthorizeError: onAuthorizeError,
+    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataError: onGetProfileDataError
   }), showModalRegister && React.createElement(RegisterModal, {
     onClose: function onClose() {
       setShowModalRegister(false);
     },
     onRegister: function onRegister() {
       setShowModalRegister(false);
-    }
+    },
+    onGetProfileDataSuccess: onGetProfileDataSuccess,
+    onGetProfileDataError: onGetProfileDataError
   }));
 };
 
@@ -2404,7 +2663,7 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React.createElement("button", {
     disabled: !stripe || !!error || isLoading,
     type: "submit"
-  }, isLoading ? React.createElement(CircularProgress, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
+  }, isLoading ? React.createElement(CircularProgress$1, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
 var testId = ENV.STRIPE_PUBLISHABLE_KEY ;
@@ -2436,7 +2695,13 @@ var PaymentContainer = function PaymentContainer(_ref) {
       errorText = _ref.errorText,
       checkoutData = _ref.checkoutData,
       _ref$onErrorClose = _ref.onErrorClose,
-      onErrorClose = _ref$onErrorClose === void 0 ? _identity : _ref$onErrorClose;
+      onErrorClose = _ref$onErrorClose === void 0 ? _identity : _ref$onErrorClose,
+      _ref$onGetPaymentData = _ref.onGetPaymentDataSuccess,
+      onGetPaymentDataSuccess = _ref$onGetPaymentData === void 0 ? function () {} : _ref$onGetPaymentData,
+      _ref$onGetPaymentData2 = _ref.onGetPaymentDataError,
+      onGetPaymentDataError = _ref$onGetPaymentData2 === void 0 ? function () {} : _ref$onGetPaymentData2,
+      _ref$onPaymentError = _ref.onPaymentError,
+      onPaymentError = _ref$onPaymentError === void 0 ? function () {} : _ref$onPaymentError;
 
   var _useState = useState(initialReviewValues),
       reviewData = _useState[0],
@@ -2487,17 +2752,19 @@ var PaymentContainer = function PaymentContainer(_ref) {
                   currency: order_details == null ? void 0 : order_details.currency
                 };
                 setOrderData(_orderData);
+                onGetPaymentDataSuccess(response.data);
               }
 
-              _context.next = 10;
+              _context.next = 11;
               break;
 
             case 7:
               _context.prev = 7;
               _context.t0 = _context["catch"](0);
               setError(_get(_context.t0, 'response.data.message'));
+              onGetPaymentDataError(_context.t0.response);
 
-            case 10:
+            case 11:
             case "end":
               return _context.stop();
           }
@@ -2538,15 +2805,16 @@ var PaymentContainer = function PaymentContainer(_ref) {
                 setPaymentIsLoading(false);
               }
 
-              _context2.next = 14;
+              _context2.next = 15;
               break;
 
             case 11:
               _context2.prev = 11;
               _context2.t0 = _context2["catch"](0);
               setError(_get(_context2.t0, 'response.data.message'));
+              onPaymentError(_context2.t0.response);
 
-            case 14:
+            case 15:
             case "end":
               return _context2.stop();
           }
@@ -2618,7 +2886,11 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
       _ref$shareButtons = _ref.shareButtons,
       shareButtons = _ref$shareButtons === void 0 ? [] : _ref$shareButtons,
       _ref$shareLink = _ref.shareLink,
-      shareLink = _ref$shareLink === void 0 ? '' : _ref$shareLink;
+      shareLink = _ref$shareLink === void 0 ? '' : _ref$shareLink,
+      _ref$onGetConfirmatio = _ref.onGetConfirmationDataSuccess,
+      onGetConfirmationDataSuccess = _ref$onGetConfirmatio === void 0 ? function () {} : _ref$onGetConfirmatio,
+      _ref$onGetConfirmatio2 = _ref.onGetConfirmationDataError,
+      onGetConfirmationDataError = _ref$onGetConfirmatio2 === void 0 ? function () {} : _ref$onGetConfirmatio2;
   var inputRef = useRef(null);
 
   var _useState = useState({}),
@@ -2639,7 +2911,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
               dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData');
 
               if (!dataEncoded) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
@@ -2653,21 +2925,23 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
               response = _context.sent;
               _data = _get(response, 'data.data.attributes');
               setData(_data);
-              _context.next = 14;
+              onGetConfirmationDataSuccess(response.data);
+              _context.next = 16;
               break;
 
-            case 12:
-              _context.prev = 12;
+            case 13:
+              _context.prev = 13;
               _context.t0 = _context["catch"](4);
+              onGetConfirmationDataError(_context.t0.response);
 
-            case 14:
+            case 16:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 12]]);
+      }, _callee, null, [[4, 13]]);
     }))();
-  }, []);
+  }, [onGetConfirmationDataSuccess, onGetConfirmationDataError]);
   return React.createElement("div", {
     className: "confirmation-page"
   }, React.createElement("p", {
@@ -2800,10 +3074,14 @@ var getTicketSelectOptions = function getTicketSelectOptions(maxCount, minCount,
   return options;
 };
 
-var computeTierStateLabel = function computeTierStateLabel(tier, prevTier, selectedTickets, handleTicketSelect) {
-  var soldOutMessage = tier.soldOutMessage ? ("" + tier.soldOutMessage).toUpperCase() : 'SOLD OUT';
-  var isSalesClosed = !tier.salesStarted || tier.salesEnded || !_has(tier, 'maxQuantity') || tier.maxQuantity === 0;
-  var options = getTicketSelectOptions(tier.maxQuantity, tier.minQuantity, tier.multiplier);
+var TicketRow = function TicketRow(_ref) {
+  var ticketTier = _ref.ticketTier,
+      prevTicketTier = _ref.prevTicketTier,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect;
+  var soldOutMessage = ticketTier.soldOutMessage ? ("" + ticketTier.soldOutMessage).toUpperCase() : 'SOLD OUT';
+  var isSalesClosed = !ticketTier.salesStarted || ticketTier.salesEnded || !_has(ticketTier, 'maxQuantity') || ticketTier.maxQuantity === 0;
+  var options = getTicketSelectOptions(ticketTier.maxQuantity, ticketTier.minQuantity, ticketTier.multiplier);
   var onSaleContent = isSalesClosed ? null : React.createElement("div", {
     className: "get-tickets"
   }, React.createElement(Box, {
@@ -2811,7 +3089,7 @@ var computeTierStateLabel = function computeTierStateLabel(tier, prevTier, selec
   }, React.createElement(FormControl, {
     fullWidth: true
   }, React.createElement(Select, {
-    value: selectedTickets[tier.id] ? selectedTickets[tier.id] : 0,
+    value: selectedTickets[ticketTier.id] ? selectedTickets[ticketTier.id] : 0,
     onChange: handleTicketSelect,
     displayEmpty: true,
     inputProps: {
@@ -2831,57 +3109,243 @@ var computeTierStateLabel = function computeTierStateLabel(tier, prevTier, selec
       value: option.value
     }, option.value);
   })))));
-  if (tier.sold_out || !tier.displayTicket || tier.soldOut) return soldOutMessage;
-  if (!+tier.cost && !+tier.price) return 'FREE';
-  if (tier.displayTicket) return onSaleContent;
-  if (prevTier.in_stock) return 'SOON';
-  return '';
+  var returnValue = '';
+
+  if (ticketTier.sold_out || !ticketTier.displayTicket || ticketTier.soldOut) {
+    returnValue = soldOutMessage;
+  }
+
+  if (!+ticketTier.cost && !+ticketTier.price) {
+    returnValue = 'FREE';
+  }
+
+  if (ticketTier.displayTicket) {
+    returnValue = onSaleContent;
+  }
+
+  if (_get(prevTicketTier, 'in_stock')) {
+    returnValue = 'SOON';
+  }
+
+  return React.createElement(React.Fragment, null, returnValue, " ");
 };
 
-var renderTiers = function renderTiers(boxOffice, selectedTickets, handleTicketSelect, promoCodeIsApplied) {
-  var sortedBoxOfiice = _sortBy(boxOffice, 'sortOrder');
+var TicketsSection = function TicketsSection(_ref) {
+  var ticketsList = _ref.ticketsList,
+      selectedTickets = _ref.selectedTickets,
+      handleTicketSelect = _ref.handleTicketSelect,
+      promoCodeIsApplied = _ref.promoCodeIsApplied;
+
+  var sortedTicketsList = _sortBy(ticketsList, 'sortOrder');
 
-  var primaryTiers = sortedBoxOfiice.map(function (tier, i, arr) {
-    var isSoldOut = tier.sold_out || !tier.displayTicket || tier.soldOut;
+  return React.createElement(React.Fragment, null, sortedTicketsList.map(function (ticket, i, arr) {
+    var isSoldOut = ticket.sold_out || !ticket.displayTicket || ticket.soldOut;
 
     var ticketSelect = function ticketSelect(event) {
       var value = event.target.value;
-      handleTicketSelect(tier.id, value);
+      handleTicketSelect(ticket.id, value);
     };
 
     var ticketIsDiscounted = false;
 
-    if (tier.oldPrice && promoCodeIsApplied && !isSoldOut && tier.oldPrice !== tier.price) {
+    if (ticket.oldPrice && promoCodeIsApplied && !isSoldOut && ticket.oldPrice !== ticket.price) {
       ticketIsDiscounted = true;
     }
 
     return React.createElement("div", {
-      key: tier.id || tier.name,
+      key: ticket.id || ticket.name,
       className: "event-detail__tier " + (isSoldOut ? 'disabled' : '')
     }, React.createElement("div", {
       className: "event-detail__tier-name"
-    }, tier.displayName || tier.name), React.createElement("div", {
+    }, ticket.displayName || ticket.name), React.createElement("div", {
       className: "event-tickets-container"
     }, React.createElement("div", {
       className: "event-detail__tier-price"
     }, ticketIsDiscounted && React.createElement("p", {
       className: "old-price"
-    }, "$ ", (+tier.oldPrice).toFixed(2)), React.createElement("p", null, isSoldOut ? 'SOLD OUT' : "$ " + (+tier.cost || +tier.price).toFixed(2)), !isSoldOut && React.createElement("p", {
-      className: 'fees'
-    }, tier.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)')), React.createElement("div", {
+    }, "$ ", (+ticket.oldPrice).toFixed(2)), React.createElement("p", null, isSoldOut ? 'SOLD OUT' : "$ " + (+ticket.cost || +ticket.price).toFixed(2)), !isSoldOut && React.createElement("p", {
+      className: "fees"
+    }, ticket.taxesIncluded ? '(incl. Fees)' : '(excl. Fees)')), React.createElement("div", {
       className: "event-detail__tier-state",
       style: {
         minWidth: 55
       }
-    }, computeTierStateLabel(tier, arr[i - 1], selectedTickets, ticketSelect))));
+    }, React.createElement(TicketRow, {
+      ticketTier: ticket,
+      prevTicketTier: arr[i - 1],
+      selectedTickets: selectedTickets,
+      handleTicketSelect: ticketSelect
+    }))));
+  }));
+};
+
+var css_248z$7 = ".style_waiting-list__2sJxM{padding:17px 35px 20px}.style_waiting-list__2sJxM .style_field-item__34MYc{margin-bottom:30px}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2{width:100%!important}.style_waiting-list__2sJxM .style_waiting-list-button__tO7D2:hover{background-color:#505050}.style_waiting-list__2sJxM .style_success-message__BvF3R h3{margin:10px 0}.style_waiting-list__2sJxM .style_success-message__BvF3R p{margin:0}";
+styleInject(css_248z$7);
+
+var generateQuantity = function generateQuantity(n) {
+  var quantityList = [];
+
+  for (var i = 1; i <= n; i++) {
+    quantityList.push({
+      label: i,
+      value: i
+    });
+  }
+
+  return quantityList;
+};
+
+var WaitingList = function WaitingList(_ref) {
+  var _ref$tickets = _ref.tickets,
+      tickets = _ref$tickets === void 0 ? {} : _ref$tickets;
+
+  var _useState = useState(false),
+      showSuccessMessage = _useState[0],
+      setShowSuccessMessage = _useState[1];
+
+  var _useState2 = useState(false),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var ticketTypesList = Object.values(tickets).map(function (d) {
+    return {
+      label: d.displayName,
+      value: d.id
+    };
   });
-  return primaryTiers;
+
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(values) {
+      var id, requestData, _yield$addToWaitingLi, data;
+
+      return runtime_1.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              setLoading(true);
+              id = ENV.EVENT_ID;
+              requestData = {
+                data: {
+                  attributes: values
+                }
+              };
+              _context.next = 6;
+              return addToWaitingList(id, requestData);
+
+            case 6:
+              _yield$addToWaitingLi = _context.sent;
+              data = _yield$addToWaitingLi.data;
+
+              if (data.success) {
+                setShowSuccessMessage(true);
+              }
+
+              _context.next = 14;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              console.log(_context.t0);
+
+            case 14:
+              _context.prev = 14;
+              setLoading(false);
+              return _context.finish(14);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 11, 14, 17]]);
+    }));
+
+    return function handleSubmit(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return React.createElement("div", {
+    className: "waiting-list"
+  }, showSuccessMessage ? React.createElement("div", {
+    className: "success-message"
+  }, React.createElement("h3", null, "You've been added to the waiting list!"), React.createElement("p", null, "You'll be notified if tickets become available.")) : React.createElement(React.Fragment, null, React.createElement("h2", null, "WAITING LIST"), React.createElement(Formik, {
+    initialValues: {
+      ticketTypeId: '',
+      quantity: '',
+      firstName: '',
+      lastName: '',
+      email: ''
+    },
+    onSubmit: handleSubmit
+  }, React.createElement(Form, null, React.createElement("div", {
+    className: "field-item"
+  }, React.createElement(Field, {
+    name: "ticketTypeId",
+    label: "Ticket types",
+    type: "select",
+    component: CustomField,
+    selectOptions: [{
+      label: 'Type of Ticket',
+      value: '',
+      disabled: true
+    }].concat(ticketTypesList)
+  })), React.createElement("div", {
+    className: "field-item"
+  }, React.createElement(Field, {
+    name: "quantity",
+    label: "Quantity",
+    type: "select",
+    component: CustomField,
+    selectOptions: [{
+      label: 'Quantity Requested',
+      value: '',
+      disabled: true
+    }].concat(generateQuantity(10))
+  })), React.createElement("div", {
+    className: "field-item"
+  }, React.createElement(Field, {
+    name: "firstName",
+    label: "First name",
+    validate: function validate(value) {
+      return requiredValidator(value, 'Please enter your First name');
+    },
+    component: CustomField
+  })), React.createElement("div", {
+    className: "field-item"
+  }, React.createElement(Field, {
+    name: "lastName",
+    label: "Last name",
+    validate: function validate(value) {
+      return requiredValidator(value, 'Please enter your Last name');
+    },
+    component: CustomField
+  })), React.createElement("div", {
+    className: "field-item"
+  }, React.createElement(Field, {
+    name: "email",
+    label: "Email",
+    validate: combineValidators(function (value) {
+      return requiredValidator(value, 'Please enter your Email');
+    }, function (value) {
+      return emailValidator(value);
+    }),
+    component: CustomField
+  })), React.createElement(Button, {
+    type: "submit",
+    variant: "contained",
+    className: "waiting-list-button"
+  }, loading ? React.createElement(CircularProgress$1, {
+    size: "22px"
+  }) : 'ADD TO WAITING LIST')))));
 };
 
 function Loader() {
   return React.createElement("div", {
     className: "loader-container"
-  }, React.createElement(CircularProgress, null));
+  }, React.createElement(CircularProgress$1, null));
 }
 
 var TicketsContainer = function TicketsContainer(_ref) {
@@ -2889,7 +3353,15 @@ var TicketsContainer = function TicketsContainer(_ref) {
       eventId = _ref.eventId,
       onAddToCartSuccess = _ref.onAddToCartSuccess,
       _ref$contentStyle = _ref.contentStyle,
-      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle;
+      contentStyle = _ref$contentStyle === void 0 ? {} : _ref$contentStyle,
+      _ref$onAddToCartError = _ref.onAddToCartError,
+      onAddToCartError = _ref$onAddToCartError === void 0 ? function () {} : _ref$onAddToCartError,
+      _ref$onGetTicketsSucc = _ref.onGetTicketsSuccess,
+      onGetTicketsSuccess = _ref$onGetTicketsSucc === void 0 ? function () {} : _ref$onGetTicketsSucc,
+      _ref$onGetTicketsErro = _ref.onGetTicketsError,
+      onGetTicketsError = _ref$onGetTicketsErro === void 0 ? function () {} : _ref$onGetTicketsErro,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'light' : _ref$theme;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
@@ -2900,28 +3372,32 @@ var TicketsContainer = function TicketsContainer(_ref) {
       setTickets = _useState2[1];
 
   var _useState3 = useState(false),
-      isLoading = _useState3[0],
-      setIsLoading = _useState3[1];
+      showWaitingList = _useState3[0],
+      setShowWaitingList = _useState3[1];
 
   var _useState4 = useState(false),
-      handleBookIsLoading = _useState4[0],
-      setHandleBookIsLoading = _useState4[1];
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
 
-  var _useState5 = useState(''),
-      promoCode = _useState5[0],
-      setPromoCode = _useState5[1];
+  var _useState5 = useState(false),
+      handleBookIsLoading = _useState5[0],
+      setHandleBookIsLoading = _useState5[1];
 
   var _useState6 = useState(''),
-      promoCodeUpdated = _useState6[0],
-      setPromoCodeUpdated = _useState6[1];
+      promoCode = _useState6[0],
+      setPromoCode = _useState6[1];
 
-  var _useState7 = useState(false),
-      showPromoInput = _useState7[0],
-      setShowPromoInput = _useState7[1];
+  var _useState7 = useState(''),
+      promoCodeUpdated = _useState7[0],
+      setPromoCodeUpdated = _useState7[1];
 
   var _useState8 = useState(false),
-      promoCodeIsApplied = _useState8[0],
-      setPromoCodeIsApplied = _useState8[1];
+      showPromoInput = _useState8[0],
+      setShowPromoInput = _useState8[1];
+
+  var _useState9 = useState(false),
+      promoCodeIsApplied = _useState9[0],
+      setPromoCodeIsApplied = _useState9[1];
 
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -2944,8 +3420,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
 
     function _getTicketsApi() {
       _getTicketsApi = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var response, attributes, _tickets;
-
+        var response, attributes;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
@@ -2962,10 +3437,9 @@ var TicketsContainer = function TicketsContainer(_ref) {
                   setCustomHeader(response);
                   attributes = _get(response, 'data.data.attributes');
                   setPromoCodeIsApplied(attributes.ValidPromoCode);
-                  _tickets = _filter(Object.values(attributes) || [], function (item) {
-                    return _isObject(item);
-                  });
-                  setTickets(_tickets);
+                  setTickets(_get(attributes, 'tickets'));
+                  setShowWaitingList(attributes.showWaitingList);
+                  onGetTicketsSuccess(response.data);
                 }
 
                 _context.next = 11;
@@ -2974,7 +3448,10 @@ var TicketsContainer = function TicketsContainer(_ref) {
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](0);
-                console.log('e', _context.t0);
+
+                if (axios.isAxiosError(_context.t0)) {
+                  onGetTicketsError(_context.t0);
+                }
 
               case 11:
                 _context.prev = 11;
@@ -3057,7 +3534,10 @@ var TicketsContainer = function TicketsContainer(_ref) {
             case 13:
               _context2.prev = 13;
               _context2.t0 = _context2["catch"](6);
-              console.log('e', _context2.t0);
+
+              if (axios.isAxiosError(_context2.t0)) {
+                onAddToCartError(_context2.t0);
+              }
 
             case 16:
               _context2.prev = 16;
@@ -3081,9 +3561,16 @@ var TicketsContainer = function TicketsContainer(_ref) {
     return !(item.sold_out || item.soldOut);
   });
   return React.createElement("div", {
-    className: "get-tickets-page",
+    className: "get-tickets-page " + theme,
     style: contentStyle
-  }, isLoading ? React.createElement(Loader, null) : React.createElement("div", null, renderTiers(tickets, selectedTickets, handleTicketSelect, promoCodeIsApplied), promoCodeIsApplied ? React.createElement("div", {
+  }, isLoading ? React.createElement(Loader, null) : React.createElement(React.Fragment, null, showWaitingList ? React.createElement(WaitingList, {
+    tickets: tickets
+  }) : React.createElement("div", null, React.createElement(TicketsSection, {
+    ticketsList: tickets,
+    selectedTickets: selectedTickets,
+    handleTicketSelect: handleTicketSelect,
+    promoCodeIsApplied: promoCodeIsApplied
+  }), promoCodeIsApplied ? React.createElement("div", {
     className: "alert-info"
   }, "Your promo code was applied successfully.") : null, showPromoInput && React.createElement("div", {
     className: "promo-code-block"
@@ -3118,8 +3605,8 @@ var TicketsContainer = function TicketsContainer(_ref) {
     "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 () {}
-  }, getTicketsLabel || 'GET TICKETS')));
+  }, getTicketsLabel || 'GET TICKETS'))));
 };
 
-export { BillingInfoContainer, ConfirmationContainer, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator };
+export { BillingInfoContainer, ConfirmationContainer, LoginModal, PaymentContainer, TicketsContainer, createFixedFloatNormalizer, currencyNormalizerCreator };
 //# sourceMappingURL=tf-checkout-react.esm.js.map