tf-checkout-react 1.0.40 → 1.0.44

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,7 +20,7 @@ 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';
@@ -31,7 +32,7 @@ import _isObject from 'lodash-es/isObject';
 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 Button from 'react-bootstrap/Button';
 import jwt_decode from 'jwt-decode';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -890,7 +891,7 @@ 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 combineValidators = function combineValidators() {
@@ -916,13 +917,14 @@ var requiredValidator = function requiredValidator(value) {
 };
 
 // preview1
+
 var ENV = {
-  EVENT_ID: 3483,
-  BASE_URL: 'https://preview1.ttf.fluxtech.me/api',
-  CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
+  EVENT_ID: 9766,
+  BASE_URL: 'https://www.ticketfairy.com/api',
+  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY: 'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL'
-}; // prod
+  STRIPE_PUBLISHABLE_KEY: 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
+};
 
 var isWindowDefined = typeof window !== 'undefined';
 var ttfHeaders = {
@@ -1108,7 +1110,15 @@ var LoginModal = function LoginModal(_ref) {
       onLogin = _ref.onLogin,
       alreadyHasUser = _ref.alreadyHasUser,
       userExpired = _ref.userExpired,
-      setUserExpired = _ref.setUserExpired;
+      setUserExpired = _ref.setUserExpired,
+      _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],
@@ -1128,7 +1138,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) {
@@ -1150,19 +1160,45 @@ 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);
+                onAuthorizeError(_context.t0.response);
+                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);
+                onGetProfileDataError(_context.t1.response);
+                return _context.abrupt("return");
+
+              case 40:
+                profileSpecifiedData = _get(profileResponse, 'data.data');
                 profileDataObj = {
                   id: profileSpecifiedData.id,
                   first_name: profileSpecifiedData.firstName,
@@ -1177,26 +1213,26 @@ var LoginModal = function LoginModal(_ref) {
 
                 setUserExpired(false);
                 onLogin();
-                _context.next = 32;
+                _context.next = 50;
                 break;
 
-              case 29:
-                _context.prev = 29;
-                _context.t0 = _context["catch"](1);
+              case 47:
+                _context.prev = 47;
+                _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 50:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[1, 29]]);
+        }, _callee, null, [[1, 47], [15, 22], [29, 36]]);
       }));
 
       function onSubmit(_x) {
@@ -1260,7 +1296,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',
@@ -1284,7 +1324,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) {
@@ -1305,12 +1345,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,
@@ -1325,12 +1378,12 @@ var RegisterModal = function RegisterModal(_ref) {
 
                 onClose();
 
-              case 21:
+              case 30:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee);
+        }, _callee, null, [[15, 22]]);
       }));
 
       function onSubmit(_x) {
@@ -1434,7 +1487,7 @@ var RegisterModal = function RegisterModal(_ref) {
   }));
 };
 
-var _excluded = ["holderAge", "firstName", "lastName", "confirmEmail", "confirmPassword", "holderFirstName", "holderLastName"];
+var _excluded = ["firstName", "lastName", "holderAge", "confirmEmail", "confirmPassword"];
 var getInitialValues = function getInitialValues(data, propsInitialValues) {
   if (data === void 0) {
     data = [];
@@ -1492,7 +1545,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 = {};
   }
@@ -1506,23 +1559,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
     })
   };
 
@@ -1536,6 +1618,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,
@@ -1552,6 +1641,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,
@@ -1563,6 +1653,11 @@ var CustomField = function CustomField(_ref) {
     InputLabelProps: {
       shrink: isShrink
     },
+    InputProps: {
+      classes: {
+        input: classes.input
+      }
+    },
     SelectProps: {
       "native": true
     }
@@ -1605,7 +1700,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() {
@@ -1629,19 +1726,21 @@ 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);
+                onGetStatesError(_context.t0.response);
 
-              case 11:
+              case 13:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 9]]);
+        }, _callee, null, [[0, 10]]);
       }));
 
       return function fetchStates() {
@@ -1665,9 +1764,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,
@@ -1679,9 +1775,7 @@ var LogicRunner = function LogicRunner(_ref) {
             };
             setValues(mappedValues);
             setUserValues(mappedValues);
-          } catch (e) {
-            console.log(e);
-          }
+          } catch (e) {}
         }
       }
     };
@@ -1699,6 +1793,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,
@@ -1706,7 +1805,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') || '' : '';
 
@@ -1738,7 +1865,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: '',
@@ -1753,8 +1884,8 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     state: '',
     zip: ''
   }),
-      userValues = _useState8[0],
-      setUserValues = _useState8[1];
+      userValues = _useState9[0],
+      setUserValues = _useState9[1];
 
   var isLoggedIn = !!access_token;
 
@@ -1767,12 +1898,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) {
@@ -1784,20 +1928,25 @@ 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);
+              onGetCartError(_context2.t0.response);
 
-            case 10:
+            case 15:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[0, 8]]);
+      }, _callee2, null, [[0, 12]]);
     }));
 
     return function fetchCart() {
@@ -1816,7 +1965,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
               _context3.prev = 0;
 
               if (!(typeof window !== 'undefined' && token)) {
-                _context3.next = 9;
+                _context3.next = 10;
                 break;
               }
 
@@ -1829,21 +1978,23 @@ 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);
+              onGetProfileDataError(_context3.t0.response);
 
-            case 13:
+            case 15:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3, null, [[0, 11]]);
+      }, _callee3, null, [[0, 12]]);
     }));
 
     return function fetchUserData(_x) {
@@ -1862,10 +2013,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) {
@@ -1874,13 +2026,21 @@ 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);
+                onGetCountriesError(_context4.t0.response);
+
+              case 12:
               case "end":
                 return _context4.stop();
             }
           }
-        }, _callee4);
+        }, _callee4, null, [[0, 9]]);
       }));
 
       return function fetchCountries() {
@@ -1903,7 +2063,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     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) {
@@ -1934,7 +2094,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                 }
 
               case 9:
-                _checkoutBody = createCheckoutDataBody(values, {
+                _checkoutBody = createCheckoutDataBody(ticketsQuantity, values, {
                   emailLogged: emailLogged,
                   firstNameLogged: firstNameLogged,
                   lastNameLogged: lastNameLogged
@@ -1949,17 +2109,54 @@ 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 = 33;
+                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.response);
+                return _context5.abrupt("return");
+
+              case 33:
+                _context5.next = 35;
                 return getProfileData(access_token_register);
 
-              case 23:
+              case 35:
                 profileData = _context5.sent;
                 profileSpecifiedData = _get(profileData, 'data.data');
                 profileDataObj = setLoggedUserData(profileSpecifiedData);
@@ -1968,42 +2165,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 = 42;
                 return postOnCheckout(checkoutBody, access_token_register);
 
-              case 30:
+              case 42:
                 res = _context5.sent;
                 handleSubmit(values, formikHelpers, res);
-                _context5.next = 37;
+                _context5.next = 50;
                 break;
 
-              case 34:
-                _context5.prev = 34;
-                _context5.t0 = _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);
-                  }
+              case 46:
+                _context5.prev = 46;
+                _context5.t1 = _context5["catch"](0);
 
-                  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');
@@ -2013,12 +2194,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
                   }
                 }
 
-              case 37:
+                onSubmitError(_context5.t1.response);
+
+              case 50:
               case "end":
                 return _context5.stop();
             }
           }
-        }, _callee5, null, [[0, 34]]);
+        }, _callee5, null, [[0, 46], [17, 28]]);
       }));
 
       function onSubmit(_x2, _x3) {
@@ -2035,7 +2218,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", {
@@ -2046,6 +2231,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
       className: "login-register-button",
       type: "button",
       onClick: function onClick() {
+        onLogin();
         setShowModalLogin(true);
       }
     }, "Login"))), _map(data, function (item) {
@@ -2062,13 +2248,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", {
@@ -2101,16 +2287,45 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
           }));
         })));
       }));
-    }), React.createElement("div", {
-      style: {
-        display: 'flex',
-        padding: 20,
-        justifyContent: 'center'
-      }
-    }, React.createElement(Button, {
+    }), showTicketHolderName && React.createElement(SectionContainer, {
+      key: ticketHoldersFields.id
+    }, 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, i) {
+        var groupClassname = group.groupClassname,
+            groupItems = group.groupItems;
+        return React.createElement("div", {
+          key: i
+        }, 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() {
@@ -2121,14 +2336,20 @@ var BillingInfoContainer = function BillingInfoContainer(_ref4) {
     },
     alreadyHasUser: alreadyHasUser,
     userExpired: userExpired,
-    setUserExpired: setUserExpired
+    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
   }));
 };
 
@@ -2409,7 +2630,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 ;
@@ -2441,7 +2662,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],
@@ -2492,17 +2719,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();
           }
@@ -2543,15 +2772,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();
           }
@@ -2623,7 +2853,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({}),
@@ -2644,7 +2878,7 @@ var ConfirmationContainer = function ConfirmationContainer(_ref) {
               dataEncoded = typeof window !== 'undefined' && window.localStorage.getItem('checkoutData');
 
               if (!dataEncoded) {
-                _context.next = 14;
+                _context.next = 16;
                 break;
               }
 
@@ -2658,21 +2892,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", {
@@ -2886,7 +3122,7 @@ var renderTiers = function renderTiers(boxOffice, selectedTickets, handleTicketS
 function Loader() {
   return React.createElement("div", {
     className: "loader-container"
-  }, React.createElement(CircularProgress, null));
+  }, React.createElement(CircularProgress$1, null));
 }
 
 var TicketsContainer = function TicketsContainer(_ref) {
@@ -2894,7 +3130,13 @@ 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;
 
   var _useState = useState({}),
       selectedTickets = _useState[0],
@@ -2971,6 +3213,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
                     return _isObject(item);
                   });
                   setTickets(_tickets);
+                  onGetTicketsSuccess(response.data);
                 }
 
                 _context.next = 11;
@@ -2979,7 +3222,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](0);
-                console.log('e', _context.t0);
+                onGetTicketsError(_context.t0.response);
 
               case 11:
                 _context.prev = 11;
@@ -3062,7 +3305,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
             case 13:
               _context2.prev = 13;
               _context2.t0 = _context2["catch"](6);
-              console.log('e', _context2.t0);
+              onAddToCartError(_context2.t0.response);
 
             case 16:
               _context2.prev = 16;
@@ -3102,13 +3345,13 @@ var TicketsContainer = function TicketsContainer(_ref) {
         setPromoCodeUpdated(promoCode);
       }
     }
-  }), React.createElement(Button$1, {
+  }), React.createElement(Button, {
     className: "promo-apply-button",
     placeholder: "Promo Code",
     onClick: function onClick() {
       setPromoCodeUpdated(promoCode);
     }
-  }, "Apply")), !showPromoInput && !isAllTicketsSoldOut ? React.createElement(Button$1, {
+  }, "Apply")), !showPromoInput && !isAllTicketsSoldOut ? React.createElement(Button, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
@@ -3119,7 +3362,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     style: {
       display: 'none'
     }
-  }), !isAllTicketsSoldOut && React.createElement(Button$1, {
+  }), !isAllTicketsSoldOut && React.createElement(Button, {
     "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 () {}