tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/billing-info-container/index.tsx

@@ -1,1695 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import './style.css'
-
-import { CircularProgress, ThemeOptions } from '@mui/material'
-import Backdrop from '@mui/material/Backdrop'
-import Button from '@mui/material/Button'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import { Stripe, StripeElementsOptions } from '@stripe/stripe-js'
-import axios, { AxiosError } from 'axios'
-import { Field, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
-import _find from 'lodash/find'
-import _forEach from 'lodash/forEach'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _isEqual from 'lodash/isEqual'
-import _map from 'lodash/map'
-import { nanoid } from 'nanoid'
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
-
-import {
-  AttributesConfig,
-  checkEmailExists,
-  getCart,
-  getCheckoutPageConfigs,
-  getCountries,
-  getPaymentData,
-  getProfileData,
-  getStates,
-  postOnCheckout,
-  setCustomHeader,
-} from '../../api'
-import { updateCheckout } from '../../api/checkout'
-import { withCustomFields } from '../../hoc'
-import { usePixel } from '../../hooks/usePixel'
-import { IBillingInfoData } from '../../types'
-import { ICheckoutResponseData } from '../../types/api/checkout'
-import {
-  createCheckoutDataBodyWithDefaultHolder,
-  deleteCookieByName,
-  getCookieByName,
-  isBrowser,
-  setLoggedUserData,
-} from '../../utils'
-import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { emailRegex } from '../../validators'
-import { AddonsContainter, IAddonContainterProps } from '../addonsContainer'
-import SimpleAddonsContainer from '../addonsContainer/SimpleAddonsContainer'
-import SnackbarAlert from '../common/SnackbarAlert'
-import { ForgotPasswordModal } from '../forgotPasswordModal'
-import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
-import { LoginModal } from '../loginModal'
-import { IPaymentPage, PaymentContainer } from '../paymentContainer'
-import { SignupModal } from '../signupModal'
-import TimerWidget from '../timerWidget'
-import { usePaymentRedirect, useStripePayment } from './hooks'
-import {
-  assingUniqueIds,
-  createCheckoutDataBody,
-  filterBillingInfoFields,
-  getFieldComponent,
-  getFieldLabel,
-  getInitialValues,
-  getValidateFunctions,
-  ICheckoutBody,
-  renderComponentWithProps,
-} from './utils'
-
-export interface IBillingInfoPage {
-  data?: IBillingInfoData[];
-  ticketHoldersFields?: IBillingInfoData;
-  handleSubmit?: (
-    values: FormikValues,
-    formikHelpers: FormikHelpers<FormikValues>,
-    eventId: any,
-    res: any,
-    checkoutUpdateResponse?: any,
-    paymentResponse?: any
-  ) => void;
-  onRegisterSuccess?: (value: any) => void;
-  onRegisterError?: (e: AxiosError, email: string) => void;
-  onSubmitError?: (e: AxiosError) => void;
-  onGetCartSuccess?: (res: any) => void;
-  onGetCartError?: (e: AxiosError) => void;
-  onGetCountriesSuccess?: (res: any) => void;
-  onGetCountriesError?: (e: AxiosError) => void;
-  onGetStatesSuccess?: (res: any) => void;
-  onGetStatesError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  onGetCheckoutConfigsSuccess?: (res: any) => void;
-  onGetCheckoutConfigsError?: (e: AxiosError) => void;
-  onLogin?: () => void;
-  onLoginSuccess?: () => void;
-  onErrorClose?: () => void;
-  onCheckoutUpdateSuccess?: (res: any) => void;
-  onCheckoutUpdateError?: (e: AxiosError) => void;
-  initialValues?: FormikValues;
-  buttonName?: string;
-  freeOrderButtonName?: string;
-  theme?: 'light' | 'dark';
-  isLoggedIn?: boolean;
-  accountInfoTitle?: string | JSX.Element;
-  hideLogo?: boolean;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  hideErrorsAlertSection?: boolean;
-  onSkipBillingPage: (data: any) => void;
-  skipPage?: boolean;
-  canSkipHolderNames?: boolean;
-  shouldFetchCountries?: boolean;
-  onForgotPasswordSuccess?: (res: any) => void;
-  onForgotPasswordError?: (e: AxiosError) => void;
-  onCountdownFinish?: () => void;
-  enableTimer?: boolean;
-  logo?: string;
-  showForgotPasswordButton?: boolean;
-  showSignUpButton?: boolean;
-  brandOptIn?: boolean;
-  showPoweredByImage?: boolean;
-  isCountryCodeEditable?: boolean;
-  customFieldsOrderKeys?: string[];
-  customFieldsTicketHolderKeys?: string[];
-  onPendingVerification?: () => void;
-  includeAddons?: boolean;
-  addonsProps?: IAddonContainterProps;
-  addOnDataWithCustomFields?: any;
-  isSinglePageCheckout?: boolean;
-  paymentProps?: Partial<IPaymentPage>;
-  paymentSectionAddon?: React.ReactNode;
-}
-
-const LogicRunner: FC<{
-  brandOptIn?: boolean;
-  values: any;
-  errors: any;
-  setStates: React.Dispatch<any>;
-  setFieldValue: any;
-  setValues: any;
-  setUserValues: any;
-  onGetStatesSuccess: any;
-  onGetStatesError: any;
-  shouldFetchCountries: boolean;
-}> = ({
-  values,
-  setStates,
-  setFieldValue,
-  setValues,
-  setUserValues,
-  onGetStatesSuccess,
-  onGetStatesError,
-  shouldFetchCountries,
-  brandOptIn,
-}) => {
-  const prevCountry = useRef(values.country)
-  const prevBuyerData = useRef({
-    firstName: '',
-    lastName: '',
-    email: '',
-    phone: '',
-  })
-  const hasLoadedUserData = useRef(false)
-  useEffect(() => {
-    const fetchStates = async () => {
-      try {
-        const res = await getStates(values.country)
-        const mappedStates = _map(res.data, (item, key) => ({
-          label: item,
-          value: key,
-        }))
-        setStates(mappedStates)
-        if (prevCountry.current !== values.country) {
-          const stateExists = mappedStates.find(
-            state => state.value === values.state
-          )?.value
-          setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
-          prevCountry.current = values.country
-        }
-        onGetStatesSuccess(res.data)
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetStatesError(e)
-        }
-      }
-    }
-    shouldFetchCountries && fetchStates()
-  }, [values.country, setStates, setFieldValue])
-
-  // Auto-fill first holder with buyer data
-  useEffect(() => {
-    const buyerFirstName = values.firstName || ''
-    const buyerLastName = values.lastName || ''
-    const buyerEmail = values.email || ''
-    const buyerPhone = values.phone || ''
-
-    // Check if any buyer data has changed
-    const firstNameChanged = prevBuyerData.current.firstName !== buyerFirstName
-    const lastNameChanged = prevBuyerData.current.lastName !== buyerLastName
-    const emailChanged = prevBuyerData.current.email !== buyerEmail
-    const phoneChanged = prevBuyerData.current.phone !== buyerPhone
-
-    // Update holder fields individually based on what changed
-    if (firstNameChanged) {
-      setFieldValue('holderFirstName-0', buyerFirstName, false)
-      prevBuyerData.current.firstName = buyerFirstName
-    }
-
-    if (lastNameChanged) {
-      setFieldValue('holderLastName-0', buyerLastName, false)
-      prevBuyerData.current.lastName = buyerLastName
-    }
-
-    if (emailChanged) {
-      setFieldValue('holderEmail-0', buyerEmail, false)
-      prevBuyerData.current.email = buyerEmail
-    }
-
-    if (phoneChanged) {
-      setFieldValue('holderPhone-0', buyerPhone, false)
-      prevBuyerData.current.phone = buyerPhone
-    }
-  }, [values.firstName, values.lastName, values.email, values.phone, setFieldValue])
-
-  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
-  useEffect(() => {
-    // set user data from local storage only on initial load
-    const getStoredUserData = () => {
-      if (isBrowser && userDataEncoded && !hasLoadedUserData.current) {
-        try {
-          const parsedData = JSON.parse(userDataEncoded)
-          const mappedValues = {
-            firstName: parsedData?.first_name || parsedData?.firstName || '',
-            lastName: parsedData?.last_name || parsedData?.lastName || '',
-            email: parsedData?.email || '',
-            phone: parsedData?.phone || '',
-            confirmEmail: parsedData?.email || '',
-            state: parsedData?.state || '',
-            street_address: parsedData?.street_address || '',
-            country: parsedData?.country || '1',
-            zip: parsedData?.zip || '',
-            brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
-            city: parsedData?.city || '',
-            confirmPassword: '',
-            password: '',
-            'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-            'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
-            'holderEmail-0': parsedData?.email || '',
-            'holderPhone-0': parsedData?.phone || '',
-          }
-
-          const extraDataJSON = window.localStorage.getItem('extraData')
-          const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
-
-          setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
-          setUserValues(mappedValues)
-          hasLoadedUserData.current = true
-        } catch (e) {}
-      }
-    }
-    getStoredUserData()
-    // Only run on mount or when userDataEncoded first becomes available
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-  return null
-}
-
-// Component to check if email exists
-/**
- * A utility component that checks if an email address already exists in the system.
- *
- * Performs debounced validation and existence checking for user email addresses.
- * Only checks when both email and confirmEmail match, are valid, and user is not logged in.
- *
- * @param email - The primary email address to check
- * @param confirmEmail - The confirmation email address (must match email)
- * @param isLoggedIn - Whether the user is currently logged in
- * @param setEmailExists - Callback function to update the email existence state
- *
- * @remarks
- * - Uses a 500ms debounce to avoid excessive API calls
- * - Validates email format using regex before checking existence
- * - Automatically returns false if user is logged in
- * - Returns null as it's a logic-only component with no UI
- */
-const EmailExistenceChecker: FC<{
-  email: string;
-  confirmEmail: string;
-  isLoggedIn: boolean;
-  setEmailExists: (exists: boolean) => void;
-}> = ({ email, confirmEmail, isLoggedIn, setEmailExists }) => {
-  useEffect(() => {
-    const checkEmail = async () => {
-      // Don't check if user is logged in
-      if (isLoggedIn) {
-        setEmailExists(false)
-        return
-      }
-
-      // Only check if both emails exist, match, and are valid
-      if (!email || !confirmEmail || email !== confirmEmail || !emailRegex.test(email)) {
-        setEmailExists(false)
-        return
-      }
-
-      // Check if email exists
-      try {
-        const result = await checkEmailExists(email)
-        setEmailExists(result.exists)
-      } catch {
-        setEmailExists(false)
-      }
-    }
-
-    // Debounce the check
-    const timeoutId = setTimeout(() => {
-      checkEmail()
-    }, 800)
-
-    return () => clearTimeout(timeoutId)
-  }, [email, confirmEmail, isLoggedIn, setEmailExists])
-
-  return null
-}
-
-const BillingInfoContainer = React.memo(
-  ({
-    data = [],
-    ticketHoldersFields = {
-      id: 1,
-      fields: [],
-    },
-    initialValues = {},
-    buttonName = 'Submit',
-    freeOrderButtonName = 'Complete Registration',
-    handleSubmit = _identity,
-    theme = 'light',
-    onRegisterSuccess = _identity,
-    onRegisterError = _identity,
-    onSubmitError = _identity,
-    onGetCartSuccess = _identity,
-    onGetCartError = _identity,
-    onGetCountriesSuccess = _identity,
-    onGetCountriesError = _identity,
-    onGetStatesSuccess = _identity,
-    onGetStatesError = _identity,
-    onGetProfileDataSuccess = _identity,
-    onGetProfileDataError = _identity,
-    onLogin,
-    onLoginSuccess = _identity,
-    onCheckoutUpdateSuccess = _identity,
-    onCheckoutUpdateError = _identity,
-    isLoggedIn: pIsLoggedIn = false,
-    accountInfoTitle = '',
-    hideLogo,
-    themeOptions,
-    onErrorClose = _identity,
-    hideErrorsAlertSection = false,
-    onSkipBillingPage = _identity,
-    skipPage = false,
-    canSkipHolderNames = false,
-    onForgotPasswordSuccess = _identity,
-    onForgotPasswordError = _identity,
-    shouldFetchCountries = true,
-    onCountdownFinish = _identity,
-    enableTimer = false,
-    logo,
-    showForgotPasswordButton = true,
-    showSignUpButton = false,
-    brandOptIn = false,
-    showPoweredByImage = false,
-    customFieldsOrderKeys,
-    customFieldsTicketHolderKeys,
-    isCountryCodeEditable = true,
-    onPendingVerification = _identity,
-    onGetCheckoutConfigsSuccess = _identity,
-    onGetCheckoutConfigsError = _identity,
-    includeAddons = false,
-    addonsProps,
-    addOnDataWithCustomFields,
-    isSinglePageCheckout = false,
-    paymentProps = {},
-    paymentSectionAddon,
-  }: IBillingInfoPage) => {
-    const [extraData, setExtraData] = useState(null)
-    const [isConfigLoading, setIsConfigLoading] = useState(true)
-    const [configs, setConfigs] = useState<null | AttributesConfig>(null)
-    const isNewUser = false
-    const themeMui = createTheme(themeOptions)
-    const elementsRef = useRef<any>(null)
-    const stripeRef = useRef<Stripe | null>(null)
-
-    useEffect(() => {
-      if (isBrowser) {
-        const extraData = window.localStorage.getItem('extraData')
-        if (extraData) {
-          setExtraData(JSON.parse(extraData))
-        }
-      }
-      getCheckoutPageConfigs()
-        .then(data => {
-          if (data?.data?.attributes) {
-            setConfigs(data.data.attributes)
-            setIsConfigLoading(false)
-          }
-          onGetCheckoutConfigsSuccess(data)
-        })
-        .catch(e => {
-          setIsConfigLoading(false)
-          onGetCheckoutConfigsError(e)
-        })
-    }, [isBrowser])
-
-    const defaultCountry = isBrowser ? window.localStorage.getItem('eventCountry') : ''
-    const userData =
-      isBrowser && window.localStorage.getItem('user_data')
-        ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
-        : {}
-    const additionalConfigs =
-      isBrowser && window.localStorage.getItem('checkoutAdditionalConfigs')
-        ? JSON.parse(
-            window.localStorage.getItem('checkoutAdditionalConfigs') ||
-              '{"resale": false, "resaleWithAddons": false}'
-          )
-        : { resale: false, resaleWithAddons: false }
-    const [dataWithUniqueIds, setDataWithUniqueIds] = useState<IBillingInfoData[]>(
-      assingUniqueIds(data)
-    )
-    const xtfCookie = getCookieByName('X-TF-ECOMMERCE')
-    const [isLoggedIn, setIsLoggedIn] = useState(!!(pIsLoggedIn || xtfCookie))
-    const [cartInfoData, setCartInfo] = useState<any>({})
-    const [countries, setCountries] = useState<any>([])
-    const [states, setStates] = useState<any>([])
-    const [showModalLogin, setShowModalLogin] = useState(false)
-    const alreadyHasUser= false
-    const [userExpired, setUserExpired] = useState(false)
-    const [showModalSignup, setShowModalSignup] = useState(false)
-    const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
-    const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
-    const [userValues, setUserValues] = useState<any>({
-      firstName: '',
-      lastName: '',
-      email: '',
-      phone: '',
-      confirmEmail: '',
-      holderFirstName: '',
-      holderLastName: '',
-      holderAge: '',
-      city: '',
-      country: '',
-      street_address: '',
-      state: '',
-      zip: '',
-    })
-    const [loading, setLoading] = useState(true)
-    const [cardLoading, setCardLoading] = useState(false)
-    const [isCountriesLoading, setIsCountriesLoading] = useState(true)
-    const [error, setError] = useState<string | null>(null)
-    const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
-    const [emailExists, setEmailExists] = useState(false)
-    const emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '')
-    const firstNameLogged =
-      _get(userData, 'first_name', '') || _get(userValues, 'first_name', '')
-    const lastNameLogged =
-      _get(userData, 'last_name', '') || _get(userValues, 'last_name', '')
-    const phoneLogged = _get(userData, 'phone', '') || _get(userValues, 'phone', '')
-    const showDOB = configs?.age_required
-    const showTicketHolders = configs?.names_required
-    const eventId = configs?.event_id
-    const optedInFieldValue: boolean = brandOptIn
-      ? brandOptIn
-      : _get(cartInfoData, 'optedIn', false)
-    const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
-    const isTable = Boolean(_get(cartInfoData, 'is_table', false))
-    const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
-    const expirationTime = _get(cartInfoData, 'expiresAt')
-    const flagRequirePhone = configs?.phone_required
-    const collectMandatoryWalletAddress = configs?.collect_mandatory_wallet_address
-    const collectOptionalWalletAddress = configs?.collect_optional_wallet_address
-    const flagFreeTicket = configs?.free_ticket
-    const hidePhoneField = configs?.hide_phone_field
-    const hideWalletAddressField =
-      !collectOptionalWalletAddress && !collectMandatoryWalletAddress
-    const collectMandatoryCompany = configs?.collect_mandatory_company
-    const collectOptionalCompany = configs?.collect_optional_company
-    const hideCompanyField = !collectOptionalCompany && !collectMandatoryCompany
-    const collectMandatoryJobTitle = configs?.collect_mandatory_job_title
-    const collectOptionalJobTitle = configs?.collect_optional_job_title
-    const hideJobTitleField = !collectMandatoryJobTitle && !collectOptionalJobTitle
-    const collectMandatoryInstagram = configs?.collect_mandatory_instagram
-    const collectOptionalInstagram = configs?.collect_optional_instagram
-    const hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram
-    const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
-    const collectOptionalBusinessCategory = configs?.collect_optional_business_category
-    const eventHasAddons = configs?.has_add_on
-    const addonMaxQuantityGroups = configs?.addon_max_quantity_groups ?? undefined
-    const hideBusinessCategoryField =
-      !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
-
-    const [pendingVerificationMessage, setPendingVerificationMessage] = useState<string>()
-    const [reviewData, setReviewData] = useState<any>({})
-    const [checkoutData, setCheckoutData] = useState<any>({})
-    const [checkoutUpdateData, setCheckoutUpdateData] =
-      useState<ICheckoutResponseData | null>(null)
-    const prevData = useRef(data)
-
-    const addAddOnsInAttributes = useCallback((checkoutBody: any) => {
-      const selectedAddOns = window.localStorage.getItem('add_ons') || '{}'
-      const addOnDataCapture = window.localStorage.getItem('add_on_data_capture') || '{}'
-
-      checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns)
-      checkoutBody.attributes.add_on_data_capture = JSON.parse(addOnDataCapture)
-    }, [])
-    const [singleCheckoutAddons, setSingleCheckoutAddOns] = useState<any>({})
-
-    const orderIsFree = !Number(checkoutData?.total)
-
-    useEffect(() => {
-      const hasUniqueId = _get(data, '[0].uniqueId')
-      const isEqualData = _isEqual(prevData.current, data)
-      if (!hasUniqueId || !isEqualData) {
-        setDataWithUniqueIds(assingUniqueIds(data))
-        if (!isEqualData) {
-          prevData.current = data
-        }
-      }
-    }, [data])
-
-    const getQuantity = useCallback((cart: any = []) => {
-      let qty = 0
-      cart.forEach((item: any) => {
-        qty += +item.quantity
-      })
-      return qty
-    }, [])
-
-    useEffect(() => {
-      if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
-        setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
-      }
-    }, [pIsLoggedIn, isLoggedIn, xtfCookie])
-
-    //just once
-    useEffect(() => {
-      // fetch countries data
-      const fetchCountries = async () => {
-        try {
-          const res = await getCountries()
-          setCustomHeader(res)
-          setCountries(res.data)
-          setIsCountriesLoading(false)
-          onGetCountriesSuccess(res.data)
-        } catch (e) {
-          if (axios.isAxiosError(e)) {
-            onGetCountriesError(e)
-          }
-          setIsCountriesLoading(false)
-        }
-      }
-      shouldFetchCountries && fetchCountries()
-      fetchCart()
-
-      // Initialize checkout with event_id on first load
-      if (isSinglePageCheckout && eventId) {
-        updateCheckoutWithAddOns()
-      }
-
-      return () => {
-        isBrowser && localStorage.removeItem('selectedTicketsQuantity')
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-      eventId,
-      isSinglePageCheckout,
-      shouldFetchCountries,
-      onGetCountriesSuccess,
-      onGetCountriesError,
-    ])
-
-    // fetch cart data
-    const fetchCart = async () => {
-      try {
-        setCardLoading(true)
-        const res = await getCart()
-        setCustomHeader(res)
-        const cartInfo = res.data.attributes
-        setCartInfo(cartInfo)
-        const { cart = [] } = cartInfo
-        setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(() => nanoid()))
-        onGetCartSuccess(res.data)
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetCartError(e)
-        }
-      } finally {
-        setCardLoading(false)
-      }
-    }
-
-    // fetch user data
-    const fetchUserData = async () => {
-      try {
-        if (isLoggedIn) {
-          const userDataResponse = await getProfileData()
-          const profileSpecifiedData = _get(userDataResponse, 'data')
-          const profileDataObj = setLoggedUserData(profileSpecifiedData)
-          setUserValues({
-            ...profileDataObj,
-            firstName: profileDataObj.first_name,
-            lastName: profileDataObj.last_name,
-          })
-          window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
-          onGetProfileDataSuccess(userDataResponse.data)
-        }
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetProfileDataError(e)
-        }
-      }
-    }
-
-    useEffect(() => {
-      fetchUserData()
-      fetchCart()
-    }, [isLoggedIn])
-
-    useEffect(() => {
-      const fetchCheckoutUpdate = async () => {
-        if (!eventId) return
-
-        try {
-          const checkoutUpdateResponse = await updateCheckout({
-            attributes: {
-              event_id: eventId,
-              is_from_resale: additionalConfigs?.resale,
-            },
-          })
-          if (checkoutUpdateResponse.success) {
-            const checkoutAttributes = checkoutUpdateResponse.data.attributes
-            const cartPriceBreakdown = _get(
-              checkoutAttributes,
-              'cart_price_breakdown',
-              {}
-            )
-            localStorage.setItem(
-              'checkoutData',
-              JSON.stringify({ hash: '', total: _get(cartPriceBreakdown, 'total', 0) })
-            )
-            setCheckoutUpdateData(checkoutAttributes)
-            onCheckoutUpdateSuccess({ expires_at: expirationTime, ...cartPriceBreakdown })
-          }
-        } catch (error) {
-          console.error('Failed to fetch checkout update:', error)
-        }
-      }
-
-      fetchCheckoutUpdate()
-    }, [eventId, additionalConfigs?.resale])
-
-    useEffect(() => {
-      const collectPaymentData = async () => {
-        if (
-          skipPage &&
-          !_isEmpty(ticketsQuantity) &&
-          !showDOB &&
-          !loading &&
-          !isNewUser
-        ) {
-          setLoading(true)
-          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketsQuantity.length,
-            userData
-          )
-
-          try {
-            if (isBrowser) {
-              addAddOnsInAttributes(checkoutBody)
-            }
-
-            const checkoutResponse = await postOnCheckout(checkoutBody, flagFreeTicket)
-            removeReferralKey()
-            removeAdditionalConfigs()
-            onSkipBillingPage(checkoutResponse.data.attributes)
-            setLoading(false)
-          } catch (e) {
-            onSubmitError(e as AxiosError)
-            if (_get(e, 'response.data.data.hasUnverifiedOrder')) {
-              setPendingVerificationMessage(_get(e, 'response.data.message'))
-            }
-          }
-        } else {
-          setLoading(false)
-        }
-      }
-      collectPaymentData()
-    }, [skipPage, ticketsQuantity])
-
-    const collectCheckoutBody = useCallback(
-      (values: Record<string, any>, profileData?: any): Record<string, any> => {
-        let checkoutBody = {} as ICheckoutBody
-
-        // Auto collect ticket holders name when it was skipped optionally
-        if (showDOB && !showTicketHolders && canSkipHolderNames) {
-          checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-            ticketsQuantity.length,
-            values,
-            true,
-            { emailLogged, firstNameLogged, lastNameLogged, phoneLogged }
-          )
-        } else {
-          checkoutBody = createCheckoutDataBody(
-            ticketsQuantity.length,
-            values,
-            {
-              emailLogged: emailLogged || profileData.email,
-              firstNameLogged:
-                firstNameLogged || profileData.first_name || profileData.firstName,
-              lastNameLogged:
-                lastNameLogged || profileData.last_name || profileData.lastName,
-              phoneLogged: phoneLogged || profileData.phone,
-            },
-            showDOB
-          )
-        }
-
-        // Collect data_capture for Order Custom Fields
-        const data_capture: Record<string, any> = {}
-        _forEach(customFieldsOrderKeys, (key: string) => {
-          data_capture[key] = values[key]
-
-          // Delete from values list
-          delete checkoutBody.attributes[key]
-        })
-
-        // Temp solution for hardcoded data capture values, to be deleted in the future
-        const captureKeys = [
-          'businessCategory',
-          'company',
-          'instagram',
-          'jobTitle',
-          'wallet_address',
-        ]
-
-        captureKeys.forEach(key => {
-          const path = `data_capture.${key}`
-          const value = _get(values, path, '')
-
-          if (value !== '') {
-            data_capture[key] = value
-          }
-
-          const attributeKey = `data_capture[${key}]`
-          delete checkoutBody.attributes?.[attributeKey]
-        })
-
-        // Collect data_capture for Ticket Holders Fields
-        _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
-          const holderDataCapture: Record<string, any> = {}
-
-          _forEach(customFieldsTicketHolderKeys, customFieldKey => {
-            const customFieldHolderName = `${customFieldKey}-${holderIndex}`
-            const customFieldHolderKey = values[customFieldHolderName] || ''
-            holderDataCapture[customFieldKey] = customFieldHolderKey
-
-            // Delete holder specific value from values list
-            delete checkoutBody.attributes[customFieldHolderName]
-          })
-
-          // Assign Ticket Holder data_capture final value
-          if (!_isEmpty(holderDataCapture)) {
-            holder.ticket_data_capture = holderDataCapture
-          }
-        })
-
-        // Collect add_on_data_capture for Add-on Custom Fields
-        const add_on_data_capture: Record<string, any> = {}
-        _forEach(values, (val: any, key: string) => {
-          // Matches keys like: `${addonId}-${groupId}-${fieldKey}` created in AddonComponent
-          const match = key.match(/^(\d+)-\d+-(.+)$/)
-          if (match) {
-            const addonId = match[1]
-            const fieldKey = match[2]
-
-            // Initialize addon bucket
-            if (!add_on_data_capture[addonId]) {
-              add_on_data_capture[addonId] = {}
-            }
-
-            add_on_data_capture[addonId][fieldKey] = val
-
-            // Remove the raw form key from attributes to avoid leaking internals
-            delete checkoutBody.attributes[key]
-          }
-        })
-
-        // Also include add_on_data_capture from localStorage for single-page checkout
-        if (isBrowser) {
-          const storedAddOnDataCapture = localStorage.getItem('add_on_data_capture')
-          if (storedAddOnDataCapture) {
-            const parsed = JSON.parse(storedAddOnDataCapture)
-            Object.keys(parsed).forEach(addonId => {
-              if (!add_on_data_capture[addonId]) {
-                add_on_data_capture[addonId] = {}
-              }
-              Object.keys(parsed[addonId]).forEach(fieldKey => {
-                add_on_data_capture[addonId][fieldKey] = parsed[addonId][fieldKey]
-              })
-            })
-          }
-        }
-
-        const mergedAttributes: Record<string, any> = {
-          ...checkoutBody.attributes,
-          data_capture,
-        }
-
-        if (!_isEmpty(add_on_data_capture)) {
-          mergedAttributes.add_on_data_capture = add_on_data_capture
-        }
-
-        return { attributes: mergedAttributes }
-      },
-      [
-        showDOB,
-        showTicketHolders,
-        canSkipHolderNames,
-        customFieldsOrderKeys,
-        ticketsQuantity.length,
-        emailLogged,
-        firstNameLogged,
-        lastNameLogged,
-        phoneLogged,
-        customFieldsTicketHolderKeys,
-      ]
-    )
-
-    const removeReferralKey = useCallback(() => {
-      localStorage.removeItem('referral_key')
-    }, [])
-
-    const removeAdditionalConfigs = useCallback(() => {
-      localStorage.removeItem('checkoutAdditionalConfigs')
-    }, [])
-
-    useEffect(() => {
-      onCheckoutUpdateSuccess({ expires_at: expirationTime, ...checkoutData })
-    }, [checkoutData, cartInfoData])
-
-    // Initialize payment hooks
-    usePaymentRedirect({
-      stripeRef,
-      setError,
-      setLoading,
-      removeReferralKey,
-      removeAdditionalConfigs,
-      handleSubmit,
-      isBrowser,
-    })
-
-    const { processPayment } = useStripePayment({
-      stripeRef,
-      elementsRef,
-      setError,
-      isBrowser,
-    })
-
-    const updateCheckoutWithAddOns = useCallback(
-      async (addOns: { [key: string]: number } = {}) => {
-        if (!isSinglePageCheckout) return
-
-        const mergedAddOns = { ...singleCheckoutAddons }
-
-        // Update existing entries and add new ones
-        Object.entries(addOns).forEach(([key, value]) => {
-          const amount = Number(value)
-          if (amount) {
-            mergedAddOns[key] = amount
-          } else {
-            delete mergedAddOns[key]
-          }
-        })
-
-        try {
-          const checkoutUpdateData = {
-            attributes: {
-              event_id: eventId,
-              add_ons: mergedAddOns,
-              is_from_resale: additionalConfigs?.resale,
-            },
-          }
-
-          const checkoutResponse = await updateCheckout(checkoutUpdateData)
-
-          if (checkoutResponse.success) {
-            const checkoutDataObj = _get(
-              checkoutResponse,
-              'data.attributes.cart_price_breakdown',
-              {}
-            )
-            setCheckoutData(checkoutDataObj)
-            setSingleCheckoutAddOns(mergedAddOns)
-            const updatedAttributes = _get(checkoutResponse, 'data.attributes', {})
-            if (updatedAttributes.additional_payment_information) {
-              setCheckoutUpdateData(updatedAttributes)
-            }
-          }
-        } catch (error) {
-          const errorMessage = _get(
-            error,
-            'response.data.message',
-            'Failed to update add-ons'
-          )
-          setError(errorMessage)
-          onCheckoutUpdateError(error as AxiosError)
-        }
-      },
-      [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]
-    )
-
-    const handleAddOnSelect = useCallback(
-      async (selectedAddOns: { [key: string]: number }) => {
-        await updateCheckoutWithAddOns(selectedAddOns)
-      },
-      [updateCheckoutWithAddOns]
-    )
-
-    const onAddOnSelect = useCallback(
-      (id: string, value: string, _addon: any, fieldUpdates: Record<string, any> = {}) => {
-        const quantity = parseInt(value) || 0
-        const addonId = id
-
-        // Get current add-ons and their custom fields
-        const currentAddOns = JSON.parse(localStorage.getItem('add_ons') || '{}')
-        const currentDataCapture = JSON.parse(
-          localStorage.getItem('add_on_data_capture') || '{}'
-        )
-
-        // Update quantities
-        const updatedAddOns = { ...currentAddOns }
-        updatedAddOns[addonId] = quantity
-
-        // Update custom fields if any
-        const updatedDataCapture = { ...currentDataCapture }
-        if (Object.keys(fieldUpdates).length > 0) {
-          updatedDataCapture[addonId] = {
-            ...(updatedDataCapture[addonId] || {}),
-            ...fieldUpdates,
-          }
-        }
-
-        if (quantity === 0 && updatedDataCapture[addonId]) {
-          delete updatedDataCapture[addonId]
-        }
-        // Save to localStorage
-        localStorage.setItem('add_ons', JSON.stringify(updatedAddOns))
-        localStorage.setItem('add_on_data_capture', JSON.stringify(updatedDataCapture))
-
-        // Call handleAddOnSelect with the updated addons object
-        handleAddOnSelect(updatedAddOns)
-      },
-      [handleAddOnSelect]
-    )
-    if (loading || (enableTimer && !expirationTime && isBrowser)) {
-      if (expirationTime === 0) {
-        // Redirect to homepage (countdown finished and browser reloaded case)
-        window.location.href = '/'
-      }
-    }
-
-    const selectedCountry =
-      _find(countries, item => item.code.toLowerCase() === defaultCountry) || {}
-    const initialCountry = selectedCountry.id || _get(userData, 'countryId', '') || '1'
-
-    const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-    usePixel(eventId || cartInfoData?.eventId, { page: 'billing', pageUrl })
-    if (isTable) {
-      dataWithUniqueIds[0].label = 'Get Your Tables'
-    }
-
-    const stripePublishableKey =
-      reviewData?.payment_method?.stripe_publishable_key ||
-      checkoutUpdateData?.additional_payment_information?.basic_config?.apiKey
-    const stripeAccountId =
-      reviewData?.payment_method?.stripe_connected_account ||
-      checkoutUpdateData?.additional_payment_information?.basic_config?.accountId
-    const addOnsIncludedOnInvitation =
-      additionalConfigs.resale && additionalConfigs.resaleWithAddons
-
-    const elementsOptions: StripeElementsOptions = {
-      ...checkoutUpdateData?.additional_payment_information?.elements_config,
-    }
-
-    if (loading || cardLoading || isCountriesLoading || isConfigLoading || !eventId) {
-      return (
-        <Backdrop
-          sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
-          open={true}
-        >
-          <CircularProgress color="inherit" />
-        </Backdrop>
-      )
-    }
-
-    return (
-      <ThemeProvider theme={themeMui}>
-        {!!expirationTime && enableTimer && (
-          <TimerWidget
-            expires_at={expirationTime}
-            onCountdownFinish={onCountdownFinish}
-            container={isSinglePageCheckout ? 'body' : ''}
-          />
-        )}
-        {!isCountriesLoading && !isConfigLoading && (
-          <Formik
-            initialValues={getInitialValues(
-              dataWithUniqueIds,
-              {
-                country: initialCountry,
-                state:
-                  _get(userData, 'stateId', '') || _get(userData, 'state', '') || '1',
-                brand_opt_in: Boolean(optedInFieldValue),
-                ttf_opt_in: ttfOptIn,
-                data_capture: {
-                  instagram: _get(extraData, 'data_capture.instagram', ''),
-                  company: _get(extraData, 'data_capture.company', ''),
-                  businessCategory: _get(extraData, 'data_capture.businessCategory', ''),
-                  jobTitle: _get(extraData, 'data_capture.jobTitle', ''),
-                },
-                ...initialValues,
-              },
-              userValues,
-              ticketHoldersFields,
-              ticketsQuantity
-            )}
-            enableReinitialize={false}
-            onSubmit={async (values, formikHelpers) => {
-              try {
-                // Validation: if phone is required for ticket holders, mark errors and stop submit
-                const flagRequirePhoneLocal = Boolean(configs?.phone_required)
-                if (flagRequirePhoneLocal) {
-                  const holdersCount = ticketsQuantity.length
-                  let hasHolderPhoneError = false
-                  for (let i = 0; i < holdersCount; i++) {
-                    const fieldName = `holderPhone-${i}`
-                    const value = _get(values, fieldName, '')
-                    if (!value) {
-                      hasHolderPhoneError = true
-                      formikHelpers.setFieldTouched(fieldName, true, false)
-                      formikHelpers.setFieldError(fieldName, 'This field is required')
-                    }
-                  }
-                  if (hasHolderPhoneError) {
-                    // Do not proceed with submit; Formik will show errors and our PhoneNumberField now shows errors when submitCount > 0
-                    return
-                  }
-                }
-
-                if ((!elementsRef.current || !stripeRef.current) && !orderIsFree) {
-                  setError('Fill in the payment details')
-                  return
-                }
-
-                if (isSinglePageCheckout && !orderIsFree) {
-                  // For PaymentElement, we'll use confirmPayment directly
-                  // No need to create payment method separately
-                }
-
-                if (isBrowser) {
-                  window.localStorage.setItem(
-                    'extraData',
-                    JSON.stringify({
-                      data_capture: {
-                        instagram: _get(values, 'data_capture.instagram', ''),
-                        company: _get(values, 'data_capture.company', ''),
-                        businessCategory: _get(
-                          values,
-                          'data_capture.businessCategory',
-                          ''
-                        ),
-                        jobTitle: _get(values, 'data_capture.jobTitle', ''),
-                      },
-                    })
-                  )
-                }
-
-                // Guest checkout: no need to register, just get profile if logged in
-                let userDataObj = userData
-                if (isLoggedIn) {
-                  try {
-                    const profileData = await getProfileData()
-                    const profileSpecifiedData = _get(profileData, 'data')
-                    userDataObj = setLoggedUserData(profileSpecifiedData)
-                  } catch (e) {
-                    // If profile fetch fails, use values from form
-                    userDataObj = {
-                      email: values.email,
-                      first_name: values.firstName,
-                      last_name: values.lastName,
-                      phone: values.phone,
-                    }
-                  }
-                } else {
-                  // For guest checkout, use form values
-                  userDataObj = {
-                    email: values.email,
-                    first_name: values.firstName,
-                    last_name: values.lastName,
-                    phone: values.phone,
-                  }
-                }
-
-                if (isBrowser) {
-                  window.localStorage.setItem('user_data', JSON.stringify(userDataObj))
-                }
-
-                const checkoutBody = collectCheckoutBody(values, userDataObj)
-
-                if (isBrowser && !isSinglePageCheckout) {
-                  addAddOnsInAttributes(checkoutBody)
-                }
-
-                if (isSinglePageCheckout) {
-                  checkoutBody.attributes.add_ons = singleCheckoutAddons
-                  // Include add_on_data_capture for single-page checkout
-                  const storedAddOnDataCapture =
-                    localStorage.getItem('add_on_data_capture')
-                  if (storedAddOnDataCapture) {
-                    checkoutBody.attributes.add_on_data_capture =
-                      JSON.parse(storedAddOnDataCapture)
-                  }
-                }
-
-                const checkoutResponse = await postOnCheckout(
-                  checkoutBody,
-                  flagFreeTicket
-                )
-
-                const checkoutUpdateResponse = await updateCheckout({
-                  attributes: {
-                    event_id: eventId,
-                    add_ons: checkoutBody?.attributes?.add_ons ?? [],
-                    is_from_resale: additionalConfigs?.resale,
-                  },
-                })
-                setCheckoutUpdateData(checkoutUpdateResponse.data.attributes)
-
-                let paymentResponse = null
-
-                if (isSinglePageCheckout) {
-                  const { hash, total } = checkoutResponse.data.attributes
-                  localStorage.setItem('checkoutData', JSON.stringify({ hash, total }))
-
-                  const paymentDataResponse = await getPaymentData(String(hash))
-
-                  if (paymentDataResponse.success) {
-                    const { attributes } = paymentDataResponse.data
-                    setReviewData(attributes)
-
-                    const { order_details, cart } = attributes
-                    const {
-                      tickets: [ticket],
-                    } = order_details
-
-                    const updatedOrderData = {
-                      add_ons: order_details.add_ons || [],
-                      total: order_details.total,
-                      subtotal: order_details.subtotal,
-                      fees: order_details.fees,
-                      pay_now: order_details.pay_now || '',
-
-                      id: order_details?.id,
-                      product_name: cart[0]?.product_name,
-                      ticketType: ticket?.name,
-                      quantity: ticket?.quantity,
-                      price: ticket?.price,
-                      currency: order_details?.currency,
-                      guest_count: order_details?.guest_count || '',
-                      debt: order_details?.debt || null,
-                      cost: ticket?.cost,
-                    }
-
-                    const isFreeTickets =
-                      (!Number(total) && !Number(updatedOrderData.total)) ||
-                      !Number(updatedOrderData?.pay_now || 0)
-                    // Process payment using the hook
-                    paymentResponse = await processPayment(
-                      paymentDataResponse,
-                      values,
-                      formikHelpers,
-                      checkoutResponse,
-                      checkoutUpdateResponse,
-                      {
-                        attributes,
-                        isFreeTickets,
-                        updatedOrderData,
-                        eventId,
-                      }
-                    )
-
-                    if (!paymentResponse && !isFreeTickets) {
-                      // Payment failed or redirected, don't continue
-                      return
-                    }
-                  }
-                }
-
-                removeReferralKey()
-                removeAdditionalConfigs()
-                handleSubmit(
-                  values,
-                  formikHelpers as FormikHelpers<any>,
-                  eventId,
-                  checkoutResponse,
-                  checkoutUpdateResponse,
-                  paymentResponse
-                )
-              } catch (e) {
-                setLoading(false)
-                onSubmitError(e as AxiosError)
-                const hasUnverifiedOrder = _get(
-                  e,
-                  'response.data.data.hasUnverifiedOrder'
-                )
-                const message = _get(e, 'response.data.message', {}) as
-                  | { password?: string | null, email?: string | null }
-                  | string
-
-                if (hasUnverifiedOrder && typeof message === 'string') {
-                  setPendingVerificationMessage(message)
-                } else if (axios.isAxiosError(e)) {
-                  if (
-                    (e as any).response?.status === 401 ||
-                    _get(e, 'response.data.error') === 'invalid_token'
-                  ) {
-                    if (isBrowser) {
-                      window.localStorage.removeItem('user_data')
-                      setUserExpired(true)
-                      setShowModalLogin(true)
-                      setIsLoggedIn(false)
-                      setShowModalSignup(false)
-                      setShowModalForgotPassword(false)
-                      const event = new window.CustomEvent('tf-logout')
-                      deleteCookieByName('X-TF-ECOMMERCE')
-                      window.document.dispatchEvent(event)
-                    }
-                  }
-                  if (message && !hideErrorsAlertSection && typeof message === 'string') {
-                    setError(message)
-                  }
-                  onSubmitError(e)
-                }
-
-                // Keep form values intact - don't reset
-                formikHelpers.setSubmitting(false)
-              } finally {
-                setLoading(false)
-              }
-            }}
-          >
-            {(props: FormikProps<any>) => (
-              <Form onSubmit={props.handleSubmit}>
-                <ErrorFocus />
-                <LogicRunner
-                  brandOptIn={brandOptIn}
-                  values={props.values}
-                  errors={props.errors}
-                  setStates={setStates}
-                  setFieldValue={props.setFieldValue}
-                  setValues={props.setValues}
-                  setUserValues={setUserValues}
-                  onGetStatesSuccess={onGetStatesSuccess}
-                  onGetStatesError={onGetStatesError}
-                  shouldFetchCountries={shouldFetchCountries}
-                />
-                <EmailExistenceChecker
-                  email={props.values.email || ''}
-                  confirmEmail={props.values.confirmEmail || ''}
-                  isLoggedIn={isLoggedIn}
-                  setEmailExists={setEmailExists}
-                />
-                <div className={`billing-info-container ${theme}`}>
-                  {!!error && (
-                    <SnackbarAlert
-                      type="error"
-                      isOpen={!!error}
-                      message={error || ''}
-                      onClose={() => {
-                        setError(null)
-                        onErrorClose()
-                      }}
-                    />
-                  )}
-                  {!isLoggedIn && !isSinglePageCheckout && (
-                    <div className="account-actions-block">
-                      <div className="action-item">
-                        <div>{accountInfoTitle}</div>
-                        <div>Login & skip ahead:</div>
-                      </div>
-                      <div className="action-item login-block">
-                        <button
-                          className="login-register-button"
-                          type="button"
-                          onClick={() => {
-                            // If outside login needed to skip package login functionallity
-                            if (onLogin) {
-                              onLogin()
-                            } else {
-                              setShowModalLogin(true)
-                            }
-                          }}
-                        >
-                          Login
-                        </button>
-                        {!hideLogo && (
-                          <div className="logo-image-container">
-                            <img
-                              src={
-                                theme === 'dark'
-                                  ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
-                                  : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
-                              }
-                              alt="nodata"
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  )}
-                  {isSinglePageCheckout &&
-                  !addOnsIncludedOnInvitation &&
-                  eventHasAddons &&
-                  eventId ? (
-                    <SimpleAddonsContainer
-                      {...(addonsProps ?? {})}
-                      eventId={eventId}
-                      addOnDataWithCustomFields={addOnDataWithCustomFields}
-                      configs={configs}
-                      onAddOnSelect={onAddOnSelect}
-                      addonMaxQuantityGroups={addonMaxQuantityGroups}
-                    />
-                  ) : !addOnsIncludedOnInvitation &&
-                    includeAddons &&
-                    !isSinglePageCheckout ? (
-                    <AddonsContainter
-                      {...(addonsProps ?? {})}
-                      addOnDataWithCustomFields={addOnDataWithCustomFields}
-                      configs={configs}
-                      onAddOnSelect={onAddOnSelect}
-                    />
-                  ) : null}
-                  {!cardLoading &&
-                    _map(dataWithUniqueIds, item => {
-                      const { label, labelClassName, fields } = item
-                      return (
-                        <div key={item.uniqueId} className="billing-info-fields">
-                          <p className={labelClassName}>{label}</p>
-                          {_map(fields, group => {
-                            const { groupClassname, groupItems } = group
-                            const filteredGroupItems = filterBillingInfoFields(
-                              groupItems,
-                              {
-                                showDOB: Boolean(showDOB),
-                                hideTtfOptIn: Boolean(hideTtfOptIn),
-                                hidePhoneField: Boolean(hidePhoneField),
-                                flagRequirePhone: Boolean(flagRequirePhone),
-                                collectMandatoryWalletAddress: Boolean(
-                                  collectMandatoryWalletAddress
-                                ),
-                                collectMandatoryJobTitle: Boolean(
-                                  collectMandatoryJobTitle
-                                ),
-                                collectMandatoryBusinessCategory: Boolean(
-                                  collectMandatoryBusinessCategory
-                                ),
-                                collectMandatoryCompany: Boolean(collectMandatoryCompany),
-                                collectMandatoryInstagram: Boolean(
-                                  collectMandatoryInstagram
-                                ),
-                                flagFreeTicket: Boolean(flagFreeTicket),
-                                hideWalletAddressField: Boolean(hideWalletAddressField),
-                                hideJobTitleField: Boolean(hideJobTitleField),
-                                hideBusinessCategoryField: Boolean(
-                                  hideBusinessCategoryField
-                                ),
-                                hideCompanyField: Boolean(hideCompanyField),
-                                hideInstagramField,
-                              }
-                            )
-                            return (
-                              <React.Fragment key={group.uniqueId}>
-                                <div className={groupClassname}>
-                                  {_map(filteredGroupItems, element => {
-                                    // Hide password fields in single-page checkout or when user is logged in
-                                    const shouldHidePasswordFields =
-                                      ['password', 'confirmPassword', 'password-info'].includes(
-                                        element.name
-                                      ) &&
-                                      (isLoggedIn || isSinglePageCheckout)
-
-                                    return shouldHidePasswordFields ? null : (
-                                      <React.Fragment key={element.uniqueId}>
-                                        <div
-                                          className={`${element.className} ${
-                                            props?.errors[element.name] || ''
-                                          }`}
-                                        >
-                                          {element.component ? (
-                                            typeof element.component === 'function' ? (
-                                              renderComponentWithProps(
-                                                element.component as React.ComponentType<any>,
-                                                element.name === 'payment_info'
-                                                  ? { reviewData }
-                                                  : {}
-                                              )
-                                            ) : (
-                                              element.component
-                                            )
-                                          ) : (
-                                            <Field
-                                              {...element}
-                                              type={
-                                                element.type === 'radio' ||
-                                                element.type === 'checkbox'
-                                                  ? undefined
-                                                  : element.type
-                                              }
-                                              setPhoneValidationIsLoading={
-                                                element.type === 'phone'
-                                                  ? setPhoneValidationIsLoading
-                                                  : undefined
-                                              }
-                                              fill={element.type === 'phone' ? true : undefined}
-                                              label={getFieldLabel(element, configs)}
-                                              validate={getValidateFunctions(
-                                                element,
-                                                states,
-                                                props.values,
-                                                props.errors
-                                              )}
-                                              setFieldValue={props.setFieldValue}
-                                              onBlur={props.handleBlur}
-                                              component={getFieldComponent(element)}
-                                              selectOptions={
-                                                element.name === 'country'
-                                                  ? _map(countries, item => ({
-                                                      value: item.id,
-                                                      label: item.name,
-                                                    }))
-                                                  : element.name === 'state'
-                                                  ? [
-                                                      {
-                                                        label: element.label,
-                                                        value: '',
-                                                        disabled: true,
-                                                      },
-                                                      ...states,
-                                                    ]
-                                                  : element.selectOptions || []
-                                              }
-                                              theme={theme}
-                                              defaultCountry={
-                                                defaultCountry || element.defaultCountry
-                                              }
-                                              dateFormat={element.format}
-                                              isCountryCodeEditable={
-                                                isCountryCodeEditable
-                                              }
-                                            />
-                                          )}
-                                        </div>
-                                      </React.Fragment>
-                                    )
-                                  })}
-                                </div>
-                                {/* Show login suggestion if email is registered */}
-                                {group.groupItems.some(el => el.name === 'confirmEmail') &&
-                                  emailExists &&
-                                  !isLoggedIn && (
-                                    <div className="email-registered-message">
-                                      <p className="email-registered-text">
-                                        ✓ This email is already registered. Log in to
-                                        auto-fill your information
-                                      </p>
-                                      <Button
-                                        type="button"
-                                        variant="contained"
-                                        className="email-login-button"
-                                        onClick={() => {
-                                          if (onLogin) {
-                                            onLogin()
-                                          } else {
-                                            setShowModalLogin(true)
-                                          }
-                                        }}
-                                      >
-                                        Log in
-                                      </Button>
-                                    </div>
-                                  )}
-                              </React.Fragment>
-                            )
-                          })}
-                        </div>
-                      )
-                    })}
-                  {!_isEmpty(ticketHoldersFields.fields) && (
-                    <div className="ticket-holders-fields">
-                      <h2>{ticketHoldersFields.label}</h2>
-                      {_map(ticketsQuantity, (_item, index) => (
-                        <div key={_item}>
-                          <h5>Ticket {index + 1}</h5>
-                          {_map(ticketHoldersFields.fields, group => {
-                            const { id, groupClassname, groupItems } = group
-                            return (
-                              <div key={id}>
-                                <div className={groupClassname}>
-                                  {_map(groupItems, element => (
-                                    <div className={element.className} key={element.name}>
-                                      <Field
-                                        {...element}
-                                        type={
-                                          element.type === 'radio' ||
-                                          element.type === 'checkbox'
-                                            ? undefined
-                                            : element.type
-                                        }
-                                        name={`${element.name}-${index}`}
-                                        label={getFieldLabel(element, configs)}
-                                        component={getFieldComponent(element)}
-                                        validate={getValidateFunctions(
-                                          element,
-                                          states,
-                                          props.values,
-                                          props.errors
-                                        )}
-                                        setPhoneValidationIsLoading={
-                                          setPhoneValidationIsLoading
-                                        }
-                                        fill={element.type === 'phone' ? true : undefined}
-                                        defaultCountry={
-                                          defaultCountry || element.defaultCountry
-                                        }
-                                        isCountryCodeEditable={isCountryCodeEditable}
-                                      />
-                                    </div>
-                                  ))}
-                                </div>
-                              </div>
-                            )
-                          })}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                  <div className="payment-section">
-                    {isSinglePageCheckout && !orderIsFree && stripePublishableKey && (
-                      <PaymentContainer
-                        stripePublishableKey={stripePublishableKey}
-                        stripeAccountId={stripeAccountId}
-                        formTitle="Payment Information"
-                        orderInfoLabel=""
-                        enableTimer={false}
-                        checkoutData={checkoutData}
-                        elementsOptions={elementsOptions}
-                        paymentElementOptions={{
-                          fields: { billingDetails: { phone: 'never' } },
-                          wallets: {
-                            applePay:
-                              checkoutUpdateData?.additional_payment_information
-                                ?.stripe_wallets?.applePay || 'never',
-                            googlePay:
-                              checkoutUpdateData?.additional_payment_information
-                                ?.stripe_wallets?.googlePay || 'never',
-                          },
-                        }}
-                        onStripeReady={(stripe, elements) => {
-                          stripeRef.current = stripe
-                          elementsRef.current = elements
-                        }}
-                        paymentFields={paymentProps.paymentFields || []}
-                        onPaymentError={paymentProps.onPaymentError || _identity}
-                        handlePayment={paymentProps.handlePayment || _identity}
-                        onGetPaymentDataSuccess={
-                          paymentProps.onGetPaymentDataSuccess || _identity
-                        }
-                        onGetPaymentDataError={
-                          paymentProps.onGetPaymentDataError || _identity
-                        }
-                        themeOptions={themeOptions}
-                        paymentInfoLabel=""
-                        displayPaymentButton={false}
-                        hidePaymentForm={false}
-                        hideFieldsBlock={true}
-                        isSinglePageCheckout={true}
-                      />
-                    )}
-                    {paymentSectionAddon}
-                  </div>
-                  <div className="button-container">
-                    <Button
-                      type="submit"
-                      variant="contained"
-                      className="login-register-button"
-                      disabled={props.isSubmitting || phoneValidationIsLoading}
-                    >
-                      {props.isSubmitting ? (
-                        <CircularProgress size={26} />
-                      ) : orderIsFree ? (
-                        freeOrderButtonName
-                      ) : (
-                        buttonName
-                      )}
-                    </Button>
-                  </div>
-                </div>
-              </Form>
-            )}
-          </Formik>
-        )}
-        {showModalLogin && (
-          <LoginModal
-            logo={logo}
-            onClose={() => {
-              setShowModalLogin(false)
-            }}
-            onLogin={() => {
-              setShowModalLogin(false)
-              setUserExpired(false)
-              onLoginSuccess()
-            }}
-            alreadyHasUser={alreadyHasUser}
-            userExpired={userExpired}
-            onGetProfileDataSuccess={(data: any) => {
-              fetchCart()
-              onGetProfileDataSuccess(data)
-            }}
-            onGetProfileDataError={onGetProfileDataError}
-            showSignUpButton={showSignUpButton}
-            showForgotPasswordButton={showForgotPasswordButton}
-            onForgotPassword={() => {
-              setShowModalLogin(false)
-              setShowModalForgotPassword(true)
-            }}
-            onSignup={() => {
-              setShowModalLogin(false)
-              setShowModalSignup(true)
-            }}
-            showPoweredByImage={showPoweredByImage}
-          />
-        )}
-        {showModalSignup && (
-          <SignupModal
-            onClose={() => {
-              setShowModalSignup(false)
-            }}
-            onLogin={() => {
-              setShowModalSignup(false)
-              setShowModalLogin(true)
-            }}
-            onRegisterSuccess={onRegisterSuccess}
-            onRegisterError={onRegisterError}
-            showPoweredByImage={showPoweredByImage}
-          />
-        )}
-        {showModalForgotPassword && (
-          <ForgotPasswordModal
-            onClose={() => {
-              setShowModalForgotPassword(false)
-            }}
-            onLoginButtonClick={() => {
-              setShowModalForgotPassword(false)
-              setShowModalLogin(true)
-            }}
-            onForgotPasswordSuccess={onForgotPasswordSuccess}
-            onForgotPasswordError={onForgotPasswordError}
-            showPoweredByImage={showPoweredByImage}
-            displaySuccessMessage
-          />
-        )}
-        <VerificationPendingModal
-          message={pendingVerificationMessage}
-          onClose={() => {
-            onPendingVerification()
-          }}
-        />
-      </ThemeProvider>
-    )
-  }
-)
-
-const WithCustomFieldsBillingInfoContainer = withCustomFields(BillingInfoContainer)
-
-export { WithCustomFieldsBillingInfoContainer as BillingInfoContainer }