tf-checkout-react 1.0.75 → 1.0.76

package/dist/components/billing-info-container/index.d.ts

@@ -3,6 +3,8 @@ import { AxiosError } from 'axios';
 import { FormikHelpers, FormikValues } from 'formik';
 import './style.css';
 import { IBillingInfoData } from '../../types';
+import { ThemeOptions } from '@mui/material';
+import { CSSProperties } from '@mui/styled-engine';
 export interface IBillingInfoPage {
     data?: IBillingInfoData[];
     ticketHoldersFields?: IBillingInfoData;
@@ -30,7 +32,10 @@ export interface IBillingInfoPage {
     theme?: 'light' | 'dark';
     isLoggedIn?: boolean;
     accountInfoTitle?: string | JSX.Element;
-    fontFamily?: string;
     hideLogo?: boolean;
+    themeOptions?: ThemeOptions & {
+        input?: CSSProperties;
+        checkbox?: CSSProperties;
+    };
 }
-export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, fontFamily, hideLogo, }: IBillingInfoPage) => JSX.Element;
+export declare const BillingInfoContainer: ({ data, ticketHoldersFields, initialValues, buttonName, handleSubmit, theme, onRegisterSuccess, onRegisterError, onSubmitError, onGetCartSuccess, onGetCartError, onGetCountriesSuccess, onGetCountriesError, onGetStatesSuccess, onGetStatesError, onGetProfileDataSuccess, onGetProfileDataError, onAuthorizeSuccess, onAuthorizeError, onLogin, onLoginSuccess, isLoggedIn: pIsLoggedIn, accountInfoTitle, hideLogo, themeOptions }: IBillingInfoPage) => JSX.Element;

package/dist/components/billing-info-container/utils.d.ts

@@ -30,6 +30,7 @@ interface IUserData {
     state?: string;
     zip?: string;
     zipCode?: string;
+    stateId?: string;
 }
 export declare const setLoggedUserData: (data: IUserData) => {
     id: string;

package/dist/components/paymentContainer/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import { AxiosError } from 'axios';
 import './style.css';
 import { IPaymentField } from '../../types';
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js';
+import { ThemeOptions } from '@mui/material';
 export interface IPaymentPage {
     paymentFields: IPaymentField[];
     handlePayment: any;
@@ -15,6 +16,9 @@ export interface IPaymentPage {
     onPaymentError: (value: AxiosError) => void;
     stripeCardOptions?: StripeCardNumberElementOptions;
     disableZipSection: boolean;
-    fontFamily?: string;
+    themeOptions?: ThemeOptions & {
+        input?: CSSProperties;
+        checkbox?: CSSProperties;
+    };
 }
-export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, disableZipSection, fontFamily, }: IPaymentPage) => JSX.Element;
+export declare const PaymentContainer: ({ paymentFields, handlePayment, formTitle, errorText, checkoutData, onErrorClose, onGetPaymentDataSuccess, onGetPaymentDataError, onPaymentError, stripeCardOptions, disableZipSection, themeOptions, }: IPaymentPage) => JSX.Element;

package/dist/components/ticketsContainer/index.d.ts

@@ -6,6 +6,7 @@ interface CartSuccess {
     names_required: boolean;
     age_required: boolean;
     event_id: string;
+    hash?: string;
 }
 export interface IGetTickets {
     eventId: number;

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

@@ -7,7 +7,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var formik = require('formik');
-var LoadingButton = _interopDefault(require('@mui/lab/LoadingButton'));
+var Button = _interopDefault(require('@mui/material/Button'));
 var _identity = _interopDefault(require('lodash/identity'));
 var _map = _interopDefault(require('lodash/map'));
 var _get = _interopDefault(require('lodash/get'));
@@ -21,12 +21,13 @@ var _flatMapDeep = _interopDefault(require('lodash/flatMapDeep'));
 var _isArray = _interopDefault(require('lodash/isArray'));
 var nanoid = require('nanoid');
 var TextField = _interopDefault(require('@mui/material/TextField'));
+var styles = require('@mui/styles');
 var FormGroup = _interopDefault(require('@mui/material/FormGroup'));
 var FormControlLabel = _interopDefault(require('@mui/material/FormControlLabel'));
 var Checkbox = _interopDefault(require('@mui/material/Checkbox'));
 var Select = _interopDefault(require('@mui/material/Select'));
 var MuiPhoneNumber = _interopDefault(require('material-ui-phone-number'));
-var styles = require('@mui/material/styles');
+var styles$1 = require('@mui/material/styles');
 var Container = _interopDefault(require('@mui/material/Container'));
 var CircularProgress = _interopDefault(require('@mui/material/CircularProgress'));
 var Alert = _interopDefault(require('@mui/material/Alert'));
@@ -36,13 +37,12 @@ var reactShare = require('react-share');
 var _some = _interopDefault(require('lodash/some'));
 var _find = _interopDefault(require('lodash/find'));
 var _isEmpty = _interopDefault(require('lodash/isEmpty'));
-var Button = _interopDefault(require('react-bootstrap/Button'));
+var Button$1 = _interopDefault(require('react-bootstrap/Button'));
 var jwt_decode = _interopDefault(require('jwt-decode'));
 var _sortBy = _interopDefault(require('lodash/sortBy'));
 var _has = _interopDefault(require('lodash/has'));
 var FormControl = _interopDefault(require('@mui/material/FormControl'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
-var Button$1 = _interopDefault(require('@mui/material/Button'));
 var SVG = _interopDefault(require('react-inlinesvg'));
 var Table = _interopDefault(require('@mui/material/Table'));
 var TableBody = _interopDefault(require('@mui/material/TableBody'));
@@ -994,6 +994,42 @@ var ErrorFocusInternal = /*#__PURE__*/function (_Component) {
 
 var ErrorFocus = /*#__PURE__*/formik.connect(ErrorFocusInternal);
 
+var createCheckoutDataBodyWithDefaultHolder = function createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, logedInValues) {
+  var ticket_holders = [];
+  var first_name = _get(logedInValues, 'firstName') || _get(logedInValues, 'first_name') || '';
+  var last_name = _get(logedInValues, 'lastName', '') || _get(logedInValues, 'last_name') || '';
+
+  var phone = _get(logedInValues, 'phone', '');
+
+  var email = _get(logedInValues, 'email', '');
+
+  for (var i = 0; i <= ticketsQuantity - 1; i++) {
+    var individualHolder = i ? {
+      first_name: '',
+      last_name: '',
+      phone: '',
+      email: ''
+    } : {
+      first_name: first_name,
+      last_name: last_name,
+      phone: phone,
+      email: email
+    };
+    ticket_holders.push(individualHolder);
+  }
+
+  var body = {
+    attributes: _extends({}, logedInValues, {
+      email: email,
+      confirm_email: email,
+      first_name: first_name,
+      last_name: last_name,
+      ticket_holders: ticket_holders
+    })
+  };
+  return body;
+};
+
 var isWindowDefined = typeof window !== 'undefined';
 var ttfHeaders = {
   Accept: 'application/vnd.api+json',
@@ -1658,7 +1694,7 @@ var setLoggedUserData = function setLoggedUserData(data) {
     country: (data == null ? void 0 : data.country) || '',
     phone: (data == null ? void 0 : data.phone) || '',
     street_address: (data == null ? void 0 : data.streetAddress) || '',
-    state: (data == null ? void 0 : data.state) || '',
+    state: (data == null ? void 0 : data.stateId) || '',
     zip: (data == null ? void 0 : data.zip) || (data == null ? void 0 : data.zipCode) || ''
   };
 };
@@ -1784,6 +1820,7 @@ var CustomField = function CustomField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name)) || _includes(field.name, 'holder') && !!error && !!submitCount;
+  var customTheme = styles.useTheme();
   return React__default.createElement(TextField, Object.assign({
     id: field.name,
     label: label,
@@ -1798,6 +1835,12 @@ var CustomField = function CustomField(_ref) {
       MenuProps: {
         className: theme
       }
+    },
+    InputLabelProps: {
+      sx: customTheme.input
+    },
+    inputProps: {
+      sx: customTheme.input
     }
   }, field), isSelectField ? _map(selectOptions, function (option) {
     return React__default.createElement("option", {
@@ -1814,9 +1857,13 @@ var CheckboxField = function CheckboxField(_ref) {
       field = _ref.field,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
+  var customTheme = styles.useTheme();
   return React__default.createElement(FormGroup, null, React__default.createElement(FormControlLabel, {
     control: React__default.createElement(Checkbox, Object.assign({}, field, rest)),
-    label: label
+    label: label,
+    componentsProps: {
+      typography: customTheme.checkbox
+    }
   }));
 };
 
@@ -1835,9 +1882,11 @@ var SelectField = function SelectField(_ref) {
 
   var error = _get(errors, field.name);
 
+  var customTheme = styles.useTheme();
   return React__default.createElement(material.FormControl, {
     fullWidth: true
   }, React__default.createElement(material.InputLabel, {
+    style: customTheme.input,
     htmlFor: field.name,
     error: !!error && isTouched,
     shrink: true
@@ -1855,7 +1904,9 @@ var SelectField = function SelectField(_ref) {
     MenuProps: {
       className: theme
     }
-  }, field), _map(selectOptions, function (option) {
+  }, field, {
+    style: customTheme.input
+  }), _map(selectOptions, function (option) {
     return React__default.createElement("option", {
       key: option.value,
       value: option.value,
@@ -1953,6 +2004,7 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
   var error = _get(errors, field.name);
 
   var isTouched = Boolean(_get(touched, field.name));
+  var customTheme = styles.useTheme();
   return React__default.createElement(MuiPhoneNumber, Object.assign({
     name: 'phone',
     onChange: function onChange(e) {
@@ -1965,6 +2017,12 @@ var FormikPhoneNumberField = function FormikPhoneNumberField(_ref) {
     error: !!error && isTouched,
     helperText: isTouched && error,
     fullWidth: true,
+    InputLabelProps: {
+      sx: customTheme.input
+    },
+    InputProps: {
+      sx: customTheme.input
+    },
     autoFormat: false
   }, rest));
 };
@@ -1977,10 +2035,11 @@ var LogicRunner = function LogicRunner(_ref) {
       setUserValues = _ref.setUserValues,
       onGetStatesSuccess = _ref.onGetStatesSuccess,
       onGetStatesError = _ref.onGetStatesError;
+  var prevCountry = React.useRef(values.country);
   React.useEffect(function () {
     var fetchStates = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var _mappedStates$0$value, _mappedStates$, res, mappedStates;
+        var res, mappedStates, _mappedStates$0$value, _mappedStates$;
 
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
@@ -1999,7 +2058,12 @@ var LogicRunner = function LogicRunner(_ref) {
                   };
                 });
                 setStates(mappedStates);
-                setFieldValue('state', (_mappedStates$0$value = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.value) != null ? _mappedStates$0$value : '');
+
+                if (prevCountry.current !== values.country) {
+                  setFieldValue('state', (_mappedStates$0$value = (_mappedStates$ = mappedStates[0]) == null ? void 0 : _mappedStates$.value) != null ? _mappedStates$0$value : '');
+                  prevCountry.current = values.country;
+                }
+
                 onGetStatesSuccess(res.data);
                 _context.next = 13;
                 break;
@@ -2037,13 +2101,13 @@ var LogicRunner = function LogicRunner(_ref) {
             var parsedData = JSON.parse(userDataEncoded);
             var mappedValues = {
               firstName: (parsedData == null ? void 0 : parsedData.first_name) || '',
-              lastName: parsedData == null ? void 0 : parsedData.last_name,
+              lastName: (parsedData == null ? void 0 : parsedData.last_name) || '',
               email: (parsedData == null ? void 0 : parsedData.email) || '',
               phone: (parsedData == null ? void 0 : parsedData.phone) || '',
               confirmEmail: (parsedData == null ? void 0 : parsedData.email) || '',
               state: (parsedData == null ? void 0 : parsedData.state) || '',
               street_address: (parsedData == null ? void 0 : parsedData.street_address) || '',
-              country: (parsedData == null ? void 0 : parsedData.country) || 1,
+              country: (parsedData == null ? void 0 : parsedData.country) || "1",
               zip: (parsedData == null ? void 0 : parsedData.zip) || '',
               brand_opt_in: (parsedData == null ? void 0 : parsedData.brand_opt_in) || '',
               city: (parsedData == null ? void 0 : parsedData.city) || '',
@@ -2114,15 +2178,9 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       pIsLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
       _ref3$accountInfoTitl = _ref3.accountInfoTitle,
       accountInfoTitle = _ref3$accountInfoTitl === void 0 ? '' : _ref3$accountInfoTitl,
-      fontFamily = _ref3.fontFamily,
-      hideLogo = _ref3.hideLogo;
-  var themeMui = styles.createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
+      hideLogo = _ref3.hideLogo,
+      themeOptions = _ref3.themeOptions;
+  var themeMui = styles$1.createTheme(themeOptions);
   var isWindowDefined = typeof window !== 'undefined';
   var userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
   var access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
@@ -2248,7 +2306,7 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
                 setCountries(_map(_get(res, 'data.data'), function (item, key) {
                   return {
                     label: item,
-                    value: Number(key)
+                    value: key
                   };
                 }));
                 onGetCountriesSuccess(res.data);
@@ -2348,7 +2406,10 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
               userDataResponse = _context4.sent;
               profileSpecifiedData = _get(userDataResponse, 'data.data');
               profileDataObj = setLoggedUserData(profileSpecifiedData);
-              setUserValues(profileDataObj);
+              setUserValues(_extends({}, profileDataObj, {
+                firstName: profileDataObj.first_name,
+                lastName: profileDataObj.last_name
+              }));
               window.localStorage.setItem('user_data', JSON.stringify(profileDataObj));
               onGetProfileDataSuccess(userDataResponse.data);
 
@@ -2380,13 +2441,12 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
   React.useEffect(function () {
     fetchUserData(access_token);
   }, [access_token]);
-  return React__default.createElement(styles.ThemeProvider, {
+  return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement(formik.Formik, {
     initialValues: getInitialValues(dataWithUniqueIds, _extends({}, initialValues, {
-      firstName: firstNameLogged,
-      lastName: lastNameLogged,
-      country: 1,
+      country: _get(userData, 'country', '') || "1",
+      state: _get(userData, 'state', '') || "1",
       brand_opt_in: optedInFieldValue
     }), userValues),
     enableReinitialize: true,
@@ -2650,17 +2710,14 @@ var BillingInfoContainer = function BillingInfoContainer(_ref3) {
       }));
     })), React__default.createElement("div", {
       className: "button-container"
-    }, React__default.createElement(LoadingButton, {
+    }, React__default.createElement(Button, {
       type: "submit",
       variant: "contained",
       className: "login-register-button",
-      loadingIndicator: React__default.createElement(material.CircularProgress, {
-        color: "inherit",
-        size: 26
-      }),
-      loading: props.isSubmitting,
       disabled: props.isSubmitting
-    }, buttonName))));
+    }, props.isSubmitting ? React__default.createElement(material.CircularProgress, {
+      size: 26
+    }) : buttonName))));
   }), showModalLogin && React__default.createElement(LoginModal, {
     onClose: function onClose() {
       setShowModalLogin(false);
@@ -2951,7 +3008,9 @@ var CheckoutForm = function CheckoutForm(_ref) {
   }, React__default.createElement("button", {
     disabled: buttonIsDiabled,
     type: "submit"
-  }, isLoading ? React__default.createElement(CircularProgress, null) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
+  }, isLoading ? React__default.createElement(CircularProgress, {
+    size: 26
+  }) : "Pay " + getCurrencySymbolByCurrency(currency) + total))));
 };
 
 var publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || '';
@@ -3013,7 +3072,7 @@ var PaymentContainer = function PaymentContainer(_ref) {
       stripeCardOptions = _ref$stripeCardOption === void 0 ? {} : _ref$stripeCardOption,
       _ref$disableZipSectio = _ref.disableZipSection,
       disableZipSection = _ref$disableZipSectio === void 0 ? false : _ref$disableZipSectio,
-      fontFamily = _ref.fontFamily;
+      themeOptions = _ref.themeOptions;
 
   var _useState = React.useState(initialReviewValues),
       reviewData = _useState[0],
@@ -3197,14 +3256,8 @@ var PaymentContainer = function PaymentContainer(_ref) {
     };
   }();
 
-  var themeMui = styles.createTheme({
-    typography: {
-      allVariants: {
-        fontFamily: fontFamily
-      }
-    }
-  });
-  return React__default.createElement(styles.ThemeProvider, {
+  var themeMui = styles$1.createTheme(themeOptions);
+  return React__default.createElement(styles$1.ThemeProvider, {
     theme: themeMui
   }, React__default.createElement("div", {
     className: "payment_page"
@@ -3888,7 +3941,7 @@ var WaitingList = function WaitingList(_ref) {
       return emailValidator(value);
     }),
     component: CustomField
-  })), React__default.createElement(Button$1, {
+  })), React__default.createElement(Button, {
     type: "submit",
     variant: "contained",
     className: "waiting-list-button"
@@ -3939,7 +3992,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
         setPromoCodeUpdated(promoCode);
       }
     }
-  }), React__default.createElement(Button, {
+  }), React__default.createElement(Button$1, {
     className: "promo-apply-button",
     placeholder: "Promo Code",
     onClick: function onClick() {
@@ -3947,7 +4000,7 @@ var PromoCodeSection = function PromoCodeSection(_ref) {
     }
   }, "Apply")), isPromotionsEnabled && !showPromoInput && isAllTicketsSoldOut && React__default.createElement("p", {
     className: "promo-code-text"
-  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React__default.createElement(Button, {
+  }, "Access code needed"), isPromotionsEnabled && !showPromoInput ? React__default.createElement(Button$1, {
     className: "promo-code-button",
     placeholder: "Promo Codes",
     onClick: function onClick() {
@@ -4105,7 +4158,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee2() {
       var _product_options, _product_options2, _ticket_types;
 
-      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at;
+      var ticket, optionName, ticketId, ticketQuantity, data, result, _result$data$data$att, _result$data, _result$data$data, _result$data$data$att2, _result$data$data$att3, _result$data2, _result$data2$data, _result$data2$data$at, _result$data$data$att4, _result$data3, _result$data3$data, _result$data3$data$at, skipBillingPage, nameIsRequired, ageIsRequired, hash, isWindowDefined, userData, access_token, ticketsQuantity, checkoutBody, checkoutResult;
 
       return runtime_1.wrap(function _callee2$(_context2) {
         while (1) {
@@ -4137,38 +4190,67 @@ var TicketsContainer = function TicketsContainer(_ref) {
             case 9:
               result = _context2.sent;
 
-              if (result.status === 200) {
-                setCustomHeader(result);
-                onAddToCartSuccess({
-                  skip_billing_page: (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false,
-                  names_required: (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false,
-                  age_required: (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false,
-                  event_id: String(eventId)
-                });
+              if (!(result.status === 200)) {
+                _context2.next = 27;
+                break;
+              }
+
+              setCustomHeader(result);
+              skipBillingPage = (_result$data$data$att = result == null ? void 0 : (_result$data = result.data) == null ? void 0 : (_result$data$data = _result$data.data) == null ? void 0 : (_result$data$data$att2 = _result$data$data.attributes) == null ? void 0 : _result$data$data$att2.skip_billing_page) != null ? _result$data$data$att : false;
+              nameIsRequired = (_result$data$data$att3 = result == null ? void 0 : (_result$data2 = result.data) == null ? void 0 : (_result$data2$data = _result$data2.data) == null ? void 0 : (_result$data2$data$at = _result$data2$data.attributes) == null ? void 0 : _result$data2$data$at.names_required) != null ? _result$data$data$att3 : false;
+              ageIsRequired = (_result$data$data$att4 = result == null ? void 0 : (_result$data3 = result.data) == null ? void 0 : (_result$data3$data = _result$data3.data) == null ? void 0 : (_result$data3$data$at = _result$data3$data.attributes) == null ? void 0 : _result$data3$data$at.age_required) != null ? _result$data$data$att4 : false;
+              hash = '';
+
+              if (!skipBillingPage) {
+                _context2.next = 26;
+                break;
               }
 
-              _context2.next = 16;
+              // Get user data for checkout data
+              isWindowDefined = typeof window !== 'undefined';
+              userData = isWindowDefined && window.localStorage.getItem('user_data') ? JSON.parse(window.localStorage.getItem('user_data') || '') : {};
+              access_token = isWindowDefined && window.localStorage.getItem('access_token') ? window.localStorage.getItem('access_token') || '' : '';
+              ticketsQuantity = Object.keys(selectedTickets).length;
+              checkoutBody = createCheckoutDataBodyWithDefaultHolder(ticketsQuantity, userData);
+              _context2.next = 24;
+              return postOnCheckout(checkoutBody, access_token);
+
+            case 24:
+              checkoutResult = _context2.sent;
+              hash = _get(checkoutResult, 'data.data.attributes.hash');
+
+            case 26:
+              onAddToCartSuccess({
+                skip_billing_page: skipBillingPage,
+                names_required: nameIsRequired,
+                age_required: ageIsRequired,
+                event_id: String(eventId),
+                hash: hash
+              });
+
+            case 27:
+              _context2.next = 32;
               break;
 
-            case 13:
-              _context2.prev = 13;
+            case 29:
+              _context2.prev = 29;
               _context2.t0 = _context2["catch"](6);
 
               if (axios.isAxiosError(_context2.t0)) {
                 onAddToCartError(_context2.t0);
               }
 
-            case 16:
-              _context2.prev = 16;
+            case 32:
+              _context2.prev = 32;
               setHandleBookIsLoading(false);
-              return _context2.finish(16);
+              return _context2.finish(32);
 
-            case 19:
+            case 35:
             case "end":
               return _context2.stop();
           }
         }
-      }, _callee2, null, [[6, 13, 16, 19]]);
+      }, _callee2, null, [[6, 29, 32, 35]]);
     }));
 
     return function handleBook() {
@@ -4200,7 +4282,7 @@ var TicketsContainer = function TicketsContainer(_ref) {
     setShowPromoInput: setShowPromoInput,
     isPromotionsEnabled: isPromotionsEnabled,
     isAllTicketsSoldOut: isAllTicketsSoldOut
-  }), !isAllTicketsSoldOut && React__default.createElement(Button, {
+  }), !isAllTicketsSoldOut && React__default.createElement(Button$1, {
     "aria-hidden": true,
     className: "book-button " + (handleBookIsLoading || _isEmpty(selectedTickets) || Object.values(selectedTickets)[0] === 0 ? 'disabled' : ''),
     onClick: !handleBookIsLoading && !_isEmpty(selectedTickets) && Object.values(selectedTickets)[0] > 0 ? handleBook : function () {}