tf-checkout-react-native 1.0.47 → 2.0.0-beta.5

package/src/containers/billingInfo/Billing.tsx

@@ -1,1902 +0,0 @@
-import _every from 'lodash/every'
-import _find from 'lodash/find'
-import _forEach from 'lodash/forEach'
-import _map from 'lodash/map'
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { ActivityIndicator, Alert, Image, Linking, Text, View } from 'react-native'
-import DeviceCountry, { TYPE_ANY } from 'react-native-device-country'
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
-
-import Constants from '../../api/Constants'
-import {
-  ICheckoutBody,
-  ICheckoutTicketHolder,
-  IFetchAccessTokenResponse,
-  IRegisterNewUserBody,
-} from '../../api/types'
-import {
-  Button,
-  CartTimer,
-  Checkbox,
-  DatePicker,
-  DropdownMaterial,
-  Input,
-  Loading,
-  Login,
-  PhoneInput,
-} from '../../components'
-import { IDropdownItem } from '../../components/dropdown/types'
-import { ILoginSuccessData } from '../../components/login/types'
-import { IOnChangePhoneNumberPayload } from '../../components/phoneInput/types'
-import { BillingCore, BillingCoreHandle, SessionHandle } from '../../core'
-import { SessionHandleType } from '../../core/Session/SessionCoreTypes'
-import { Config } from '../../helpers/Config'
-import { getCountryDialCode } from '../../helpers/CountryCodes'
-import { useDebounced } from '../../helpers/Debounced'
-import { getData, LocalStorageKeys } from '../../helpers/LocalStorage'
-import { emptyPhone } from '../../helpers/StringsHelper'
-import {
-  validateAge,
-  validateDropDownEmpty,
-  validateEmail,
-  validateEmpty,
-  validatePasswords,
-  validatePhoneNumber,
-} from '../../helpers/Validators'
-import R from '../../res'
-import { IError, IUserProfile, IUserProfilePublic } from '../../types'
-import s from './styles'
-import {
-  IBillingFormFieldsData,
-  IBillingProps,
-  ITicketHolderField,
-  SkippingStatusType,
-} from './types'
-
-/*
-  Fields to hide when ticket is free
-  - Billing Street Address
-  - City
-  - State/County
-  - Post Code/Zip
-  - Country
-*/
-
-const Billing = forwardRef<SessionHandleType, IBillingProps>(
-  (
-    {
-      styles,
-      texts,
-      cartProps: {
-        isAgeRequired,
-        isNameRequired,
-        isPhoneRequired,
-        minimumAge,
-        isBillingRequired,
-        isTicketFree,
-        isPhoneHidden,
-      },
-      loginBrandImages,
-      skipBillingConfig,
-      areAlertsEnabled = true,
-      areLoadingIndicatorsEnabled = true,
-      onLoadingChange,
-      onLoginError,
-      onLoginSuccess,
-      onRegisterError,
-      onRegisterSuccess,
-      onCheckoutSuccess,
-      onCheckoutError,
-      onFetchUserProfileSuccess,
-      onFetchUserProfileError,
-      onFetchCartError,
-      onFetchCartSuccess,
-      onFetchCountriesError,
-      onFetchCountriesSuccess,
-      onFetchStatesError,
-      onFetchStatesSuccess,
-      onSkippingStatusChange,
-      onLogoutSuccess,
-      onLogoutError,
-      onCartExpired,
-      shouldCartTimerNotMinimizeOnTap,
-      config = {
-        isCheckoutAlwaysButtonEnabled: false,
-        shouldHideTicketHolderSectionOnSingleTicket: false,
-      },
-    },
-    ref
-  ) => {
-    //#region State
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [isSubmittingData, setIsSubmittingData] = useState<boolean>(false)
-    const [loggedUserFirstName, setLoggedUserFirstName] = useState<string>('')
-    const [loginMessage, setLoginMessage] = useState('')
-    const [firstName, setFirstName] = useState('')
-    const [lastName, setLastName] = useState('')
-    const [email, setEmail] = useState('')
-    const [emailConfirmation, setEmailConfirmation] = useState('')
-    const [password, setPassword] = useState('')
-    const [passwordConfirmation, setPasswordConfirmation] = useState('')
-    const [isSubToTicketFairy, setIsSubToTicketFairy] = useState(false)
-    const [isSubToBrand, setIsSubToBrand] = useState(false)
-    const [phone, setPhone] = useState('')
-    const [street, setStreet] = useState('')
-    const [city, setCity] = useState('')
-    const [countryId, setCountryId] = useState('')
-    const [stateId, setStateId] = useState('')
-    const [postalCode, setPostalCode] = useState('')
-    const [dateOfBirth, setDateOfBirth] = useState<Date | undefined>(undefined)
-    const [selectedCountry, setSelectedCountry] = useState<IDropdownItem | undefined>(
-      undefined
-    )
-    const [selectedState, setSelectedState] = useState<IDropdownItem | undefined>(
-      undefined
-    )
-
-    const [ticketHoldersData, setTicketHoldersData] = useState<ITicketHolderField[]>([])
-
-    const [numberOfTicketHolders, setNumberOfTicketHolders] = useState<
-      number | undefined
-    >(0)
-
-    const [states, setStates] = useState<IDropdownItem[]>([])
-    const [countries, setCountries] = useState<IDropdownItem[]>([])
-
-    const [isLoginDialogVisible, setIsLoginDialogVisible] = useState(false)
-    const [skippingStatus, setSkippingStatus] = useState<SkippingStatusType>(undefined)
-    const [isTtfCheckboxHidden, setIsTtfCheckboxHidden] = useState(false)
-    //#endregion State
-
-    //#region Labels
-    const holderLabels = useMemo(() => {
-      if (
-        numberOfTicketHolders === 1 &&
-        config.shouldHideTicketHolderSectionOnSingleTicket
-      ) {
-        return null
-      }
-
-      const optional = isNameRequired ? '' : texts?.form?.optional || '(optional)'
-      return {
-        firstName: texts?.form?.holderFirstName
-          ? `${texts.form.holderFirstName} ${optional}`
-          : `First Name ${optional}`,
-        lastName: texts?.form?.holderLastName
-          ? `${texts.form.holderLastName} ${optional}`
-          : `Last Name ${optional}`,
-        email: texts?.form?.holderEmail
-          ? `${texts.form.holderEmail} ${texts?.form?.optional || '(optional)'}`
-          : `Email ${optional}`,
-        phone: texts?.form?.holderPhone
-          ? `${texts.form.holderPhone} ${texts?.form?.optional || '(optional)'}`
-          : `Phone ${optional}`,
-      }
-    }, [isNameRequired, texts, numberOfTicketHolders])
-
-    const brandCheckBoxText =
-      texts?.form?.isSubToBrand ||
-      'I would like to be updated on news, events and offers.'
-
-    const phoneLabel = useMemo(() => {
-      const optionalPhone = isPhoneRequired ? '' : texts?.form?.optional || ' (optional)'
-      return texts?.form?.phone
-        ? `${texts?.form?.phone} ${optionalPhone}`
-        : `Phone ${optionalPhone}`
-    }, [isPhoneRequired, texts])
-
-    const addressLabel = useMemo(() => {
-      const optionalAddress = Config.IS_BILLING_STREET_NAME_REQUIRED
-        ? ''
-        : texts?.form?.optional || ' (optional)'
-
-      return texts?.form?.street
-        ? `${texts.form.street} ${optionalAddress}`
-        : `Street ${optionalAddress}`
-    }, [texts])
-    //#endregion Labels
-
-    // Cart expiration timer
-    const [secondsLeft, setSecondsLeft] = React.useState(420)
-
-    //#region Errors state
-    const firstNameError = useDebounced(firstName, validateEmpty)
-    const lastNameError = useDebounced(lastName, validateEmpty)
-    const emailError = useDebounced(email, () => validateEmail(email, emailConfirmation))
-    const confirmEmailError = useDebounced(emailConfirmation, () =>
-      validateEmail(emailConfirmation, email)
-    )
-    const passwordError = useDebounced(password, () =>
-      validatePasswords(password, passwordConfirmation)
-    )
-    const confirmPasswordError = useDebounced(passwordConfirmation, () =>
-      validatePasswords(passwordConfirmation, password)
-    )
-    const [phoneError, setPhoneError] = useState('')
-    const streetError = useDebounced(street, validateEmpty)
-    const cityError = useDebounced(city, validateEmpty)
-    const postalCodeError = useDebounced(postalCode, validateEmpty)
-    const [ttfPrivacyPolicyError, setTtfPrivacyPolicyError] = useState('')
-
-    const [firstNameErrorState, setFirstNameErrorState] = useState('')
-    const [lastNameErrorState, setLastNameErrorState] = useState('')
-    const [streetErrorState, setStreetErrorState] = useState('')
-    const [dateOfBirthError, setDateOfBirthError] = useState('')
-    const [emailErrorState, setEmailErrorState] = useState('')
-    const [emailConfirmationErrorState, setEmailConfirmationErrorState] = useState('')
-    const [cityErrorState, setCityErrorState] = useState('')
-    const [postalCodeErrorState, setPostalCodeErrorState] = useState('')
-    const [countryErrorState, setCountryErrorState] = useState('')
-    const [stateErrorState, setStateErrorState] = useState('')
-    const [passwordErrorState, setPasswordErrorState] = useState('')
-    const [confirmPasswordErrorState, setConfirmPasswordErrorState] = useState('')
-
-    const requiredText = texts?.required || 'Required'
-
-    //#endregion Errors state
-    //#endregion
-
-    const getSkippingStatus = (numOfTickets: number): SkippingStatusType => {
-      // DO NOT SKIP IF
-      // * User is not logged in.
-      // * Event Collect_names is turned on and tickets are more than one.
-      // * Event validate_age is turned on.
-      // * phone_required is turned on and customer does not have a phone number.
-
-      if (isBillingRequired || skippingStatus === 'fail') {
-        return 'false'
-      }
-
-      if ((isNameRequired && numOfTickets > 1) || isAgeRequired) {
-        return 'false'
-      } else {
-        return 'skipping'
-      }
-    }
-
-    //#region Refs
-    const storedToken = useRef('')
-    const storedProfileData = useRef({} as IUserProfilePublic)
-    const phoneErrorCounter = useRef(0)
-    const billingCoreRef = useRef<BillingCoreHandle>(null)
-    const sessionHandleRef = useRef<SessionHandleType>(null)
-    const phoneCountryCode = useRef('')
-    const errorsRef = useRef({
-      firstName: '',
-      lastName: '',
-      email: '',
-      confirmEmail: '',
-      password: '',
-      confirmPassword: '',
-      dateOfBirth: '',
-      phone: '',
-      street: '',
-      city: '',
-      country: '',
-      zipCode: '',
-      state: '',
-      privacy: '',
-    })
-
-    //#endregion
-
-    //#region Imperative Handler
-    useImperativeHandle(ref, () => ({
-      async refreshAccessToken(refreshToken: string): Promise<IFetchAccessTokenResponse> {
-        if (!sessionHandleRef.current) {
-          return {
-            accessTokenError: {
-              message: 'Session Handle ref is not initialized',
-            },
-          }
-        }
-
-        const { accessTokenError, accessTokenData } =
-          await sessionHandleRef.current!.refreshAccessToken(refreshToken)
-        if (!accessTokenError && accessTokenData?.accessToken) {
-          await fetchData()
-        }
-        return {
-          accessTokenData,
-          accessTokenError,
-        }
-      },
-
-      async reloadData() {
-        await fetchData()
-      },
-    }))
-    //#endregion Imperative Handler
-
-    //#region Handlers
-    const handleSetPhoneError = useCallback(
-      (error: string) => {
-        if (isPhoneRequired && phone.length > 0) {
-          setPhoneError(error)
-        }
-      },
-      [isPhoneRequired, phone.length]
-    )
-
-    const handleOnChangePhoneNumber = (payload: IOnChangePhoneNumberPayload) => {
-      setPhone(payload.input)
-
-      if (payload.isValid) {
-        errorsRef.current.phone = ''
-        setPhoneError('')
-
-        return
-      }
-
-      if (!payload.isValid && phoneErrorCounter.current > 0) {
-        errorsRef.current.phone =
-          texts?.form?.phoneInput?.customError || 'Invalid phone number'
-
-        return handleSetPhoneError(
-          texts?.form?.phoneInput?.customError || 'Invalid phone number'
-        )
-      }
-
-      phoneErrorCounter.current = phoneErrorCounter.current + 1
-    }
-
-    const handleOnLoadingChange = useCallback(
-      (loading: boolean) => {
-        if (onLoadingChange) {
-          onLoadingChange(loading)
-        }
-      },
-      [onLoadingChange]
-    )
-
-    const handleOnSkippingStatusChange = useCallback(
-      (status: SkippingStatusType) => {
-        onSkippingStatusChange?.(status)
-      },
-      [onSkippingStatusChange]
-    )
-
-    const showAlert = (text: string) => {
-      if (areAlertsEnabled) {
-        Alert.alert('', text)
-      }
-    }
-
-    const showLoginDialog = () => setIsLoginDialogVisible(true)
-    const hideLoginDialog = () => setIsLoginDialogVisible(false)
-
-    const handleIsSubToBrandToggle = () => {
-      setIsSubToBrand(!isSubToBrand)
-    }
-
-    const handleIsSubToTicketFairyToggle = () => {
-      const newValue = !isSubToTicketFairy
-
-      if (newValue) {
-        errorsRef.current.privacy = ''
-        setTtfPrivacyPolicyError('')
-      } else {
-        errorsRef.current.privacy = requiredText
-        setTtfPrivacyPolicyError(requiredText)
-      }
-
-      setIsSubToTicketFairy(newValue)
-    }
-
-    const handleOpenPrivacyLink = async () => {
-      const canOpenLink = await Linking.canOpenURL(Constants.PRIVACY_POLICY_LINK)
-      if (canOpenLink) {
-        await Linking.openURL(Constants.PRIVACY_POLICY_LINK)
-      }
-    }
-
-    const handleSetFormDataFromUserProfile = (
-      userProfile: IUserProfilePublic,
-      accessToken?: string
-    ) => {
-      storedProfileData.current = userProfile
-      setFirstName(userProfile.firstName)
-      setLastName(userProfile.lastName)
-      setEmail(userProfile.email)
-      setEmailConfirmation(userProfile.email)
-      setPhone(userProfile.phone)
-      setStreet(userProfile.streetAddress)
-      setCity(userProfile.city)
-      setPostalCode(userProfile.zipCode)
-      setCountryId(userProfile.countryId)
-      setStateId(userProfile.stateId)
-      setLoggedUserFirstName(userProfile.firstName)
-
-      let dob: Date | undefined
-
-      if (userProfile.dateOfBirth) {
-        const dobSplitted = userProfile.dateOfBirth.split('-')
-        dob = new Date(
-          parseInt(dobSplitted[0]!, 10),
-          parseInt(dobSplitted[1]!, 10) - 1,
-          parseInt(dobSplitted[2]!, 10)
-        )
-        handleOnSelectDate(dob)
-      }
-
-      const thData = [...ticketHoldersData]
-      thData.forEach((th, index) => {
-        th.firstName = index === 0 ? userProfile.firstName : ''
-        th.lastName = index === 0 ? userProfile.lastName : ''
-        th.email = index === 0 ? userProfile.email : ''
-        th.phone = index === 0 ? userProfile.phone : ''
-      })
-      setTicketHoldersData(thData)
-
-      if (accessToken) {
-        storedToken.current = accessToken
-      }
-
-      showErrorMessages({
-        firstName: userProfile.firstName,
-        lastName: userProfile.lastName,
-        email: userProfile.email,
-        confirmEmail: userProfile.email,
-        street: userProfile.streetAddress,
-        city: userProfile.city,
-        selectedCountry: userProfile.countryId
-          ? {
-              label: '',
-              value: userProfile.countryId,
-            }
-          : undefined,
-        selectedState: userProfile.stateId
-          ? {
-              label: '',
-              value: userProfile.stateId,
-            }
-          : undefined,
-        postalCode: userProfile.zipCode,
-        dateOfBirth: dob,
-        phoneNumber: userProfile.phone,
-        isRegistering: !loggedUserFirstName && !storedToken.current,
-        ticketHolderData: ticketHoldersData,
-      })
-    }
-
-    const clearFormErrors = () => {
-      setFirstNameErrorState('')
-      setLastNameErrorState('')
-      setEmailErrorState('')
-      setEmailConfirmationErrorState('')
-      setDateOfBirthError('')
-      setPhoneError('')
-      setStreetErrorState('')
-      setCityErrorState('')
-      setCountryErrorState('')
-      setPostalCodeErrorState('')
-      setStateErrorState('')
-      setTtfPrivacyPolicyError('')
-      errorsRef.current = {
-        firstName: '',
-        lastName: '',
-        email: '',
-        confirmEmail: '',
-        password: '',
-        confirmPassword: '',
-        dateOfBirth: '',
-        phone: '',
-        street: '',
-        city: '',
-        country: '',
-        zipCode: '',
-        state: '',
-        privacy: '',
-      }
-    }
-
-    const handleOnLoginSuccess = async ({
-      userProfile,
-      accessTokenData,
-    }: ILoginSuccessData) => {
-      clearFormErrors()
-
-      let countryCode = 'US'
-      const accessToken = await getData(LocalStorageKeys.ACCESS_TOKEN)
-      const usrProfile = { ...userProfile }
-
-      onLoginSuccess?.({
-        userProfile,
-        accessTokenData,
-      })
-
-      try {
-        const deviceCountry = await DeviceCountry.getCountryCode(TYPE_ANY)
-        countryCode = deviceCountry.code.toUpperCase()
-      } catch (err) {
-        countryCode = 'US'
-      }
-
-      if (!userProfile.phone) {
-        usrProfile.phone = ''
-      } else {
-        if (!usrProfile.phone?.includes('+')) {
-          usrProfile.phone = `${getCountryDialCode(countryCode)}${usrProfile.phone}`
-        }
-      }
-
-      if (!isBillingRequired && skippingStatus === 'fail') {
-        setSkippingStatus('skipping')
-
-        const phoneValidError = validatePhoneNumber({
-          phoneNumber: userProfile.phone,
-          customError: texts?.form?.phoneInput?.customError,
-        })
-
-        if (phoneValidError && isPhoneRequired) {
-          setIsLoading(false)
-          handleSetPhoneError(
-            texts?.invalidPhoneNumberError || 'Please enter a valid phone number'
-          )
-        }
-
-        await performCheckout(
-          getCheckoutBodyWhenSkipping({
-            userProfile: usrProfile,
-            ticketsQuantity: numberOfTicketHolders || 1,
-          })
-        )
-      }
-      handleSetFormDataFromUserProfile(usrProfile, accessToken)
-    }
-
-    const handleOnLoginError = (error: IError) => {
-      onLoginError?.(error)
-    }
-
-    const handleOnLogoutSuccess = async () => {
-      setFirstName('')
-      setLastName('')
-      setEmail('')
-      setEmailConfirmation('')
-      setPhone('')
-      setStreet('')
-      setCity('')
-      setPostalCode('')
-      setPassword('')
-      setPasswordConfirmation('')
-      setCountryId('')
-      setStateId('')
-      handleOnSelectDate(undefined)
-
-      setSelectedCountry({
-        value: '-1',
-        label: texts?.form?.country || 'Country',
-        code: '__',
-      })
-      setStates([
-        {
-          value: '-1',
-          label: texts?.form?.state || 'State/County',
-        },
-      ])
-      setIsSubToTicketFairy(false)
-      setIsSubToBrand(false)
-      storedToken.current = ''
-      setLoggedUserFirstName('')
-
-      const thData = [...ticketHoldersData]
-      thData.forEach((th) => {
-        th.firstName = ''
-        th.lastName = ''
-        th.email = ''
-        th.phone = ''
-        th.firstNameError = ''
-        th.lastNameError = ''
-      })
-      setTicketHoldersData(thData)
-      onLogoutSuccess?.()
-    }
-
-    //#region Handlers input changed
-    const handleOnSelectDate = (newDate: Date | undefined) => {
-      setDateOfBirth(newDate)
-
-      if (dateOfBirthError.length > 0 && newDate) {
-        setDateOfBirthError('')
-      }
-
-      if (minimumAge) {
-        const ageError = validateAge(newDate, minimumAge)
-        setDateOfBirthError(ageError)
-      } else {
-        if (!newDate) {
-          setDateOfBirthError(requiredText)
-        }
-      }
-    }
-
-    const handleOnStreetChanged = (text: string) => {
-      if (streetErrorState.length > 0 && text.length > 0) {
-        setStreetErrorState('')
-      }
-      setStreet(text)
-    }
-
-    const handleOnCityChanged = (text: string) => {
-      if (cityErrorState.length > 0 && text.length > 0) {
-        setCityErrorState('')
-      }
-      setCity(text)
-    }
-
-    const handleOnFirstNameChanged = (text: string) => {
-      if (firstNameErrorState.length > 0 && text.length > 0) {
-        setFirstNameErrorState('')
-      }
-      setFirstName(text)
-    }
-
-    const handleOnLastNameChanged = (text: string) => {
-      if (lastNameErrorState.length > 0 && text.length > 0) {
-        setLastNameErrorState('')
-      }
-      setLastName(text)
-    }
-
-    const handleOnEmailChanged = (text: string) => {
-      if (emailErrorState.length > 0 && text.length > 0) {
-        setEmailErrorState('')
-      }
-      setEmail(text)
-    }
-
-    const handleOnEmailConfirmationChanged = (text: string) => {
-      if (emailConfirmationErrorState.length > 0 && text.length > 0) {
-        setEmailConfirmationErrorState('')
-      }
-      setEmailConfirmation(text)
-    }
-
-    const handleOnPostalCodeChanged = (text: string) => {
-      if (postalCodeErrorState.length > 0 && text.length > 0) {
-        setPostalCodeErrorState('')
-      }
-      setPostalCode(text)
-    }
-
-    const handleOnStateChanged = (itm: IDropdownItem) => {
-      if (stateErrorState.length > 0 && itm.value !== '-1') {
-        setStateErrorState('')
-      } else if (itm.value === '-1') {
-        setStateErrorState(requiredText)
-      }
-      setSelectedState(itm)
-    }
-
-    const handleOnCountryChanged = (itm: IDropdownItem) => {
-      if (countryErrorState.length > 0 && itm.value !== '-1') {
-        setCountryErrorState('')
-      } else if (itm.value === '-1') {
-        setCountryErrorState(requiredText)
-      }
-      setSelectedCountry(itm)
-    }
-
-    const handleOnPasswordChanged = (text: string) => {
-      if (passwordErrorState.length > 0 && text.length > 0) {
-        setPasswordErrorState('')
-      }
-      setPassword(text)
-    }
-
-    const handleOnConfirmPasswordChanged = (text: string) => {
-      if (confirmPasswordErrorState.length > 0 && text.length > 0) {
-        setConfirmPasswordErrorState('')
-      }
-      setPasswordConfirmation(text)
-    }
-    //#endregion Handlers input changed
-
-    //#endregion
-
-    //#region Form validation
-    const checkIsStoredPhoneNumberFormat = (storedPhoneNumber?: string) => {
-      if (!storedPhoneNumber) {
-        handleSetPhoneError(
-          texts?.invalidPhoneNumberError || 'Please enter a valid phone number'
-        )
-        return false
-      }
-
-      if (!storedPhoneNumber.includes('+')) {
-        handleSetPhoneError(
-          texts?.invalidPhoneNumberError || 'Please enter a valid phone number'
-        )
-        return false
-      }
-      return true
-    }
-
-    const showErrorMessages = (data: IBillingFormFieldsData) => {
-      if (secondsLeft === 0) {
-        return false
-      }
-
-      const validateFirstName = validateEmpty(data.firstName)
-      const validateLastName = validateEmpty(data.lastName)
-
-      const validateEmails = validateEmail(data.email, data.confirmEmail)
-      const validateEmailsConfirmation = validateEmail(data.confirmEmail, data.email)
-
-      if (isTicketFree) {
-        setFirstNameErrorState(validateFirstName)
-        setLastNameErrorState(validateLastName)
-        errorsRef.current.firstName = validateFirstName
-        errorsRef.current.lastName = validateLastName
-
-        setEmailErrorState(validateEmails)
-        setEmailConfirmationErrorState(validateEmailsConfirmation)
-        errorsRef.current.email = validateEmails
-        errorsRef.current.confirmEmail = validateEmailsConfirmation
-
-        if (data.isRegistering) {
-          const validatePassword = validatePasswords(data.password, data.confirmPassword)
-          const validatePasswordConfirmation = validatePasswords(
-            data.confirmPassword,
-            data.password
-          )
-
-          setPasswordErrorState(validatePassword)
-          setConfirmPasswordErrorState(validatePasswordConfirmation)
-
-          errorsRef.current.password = validatePassword
-          errorsRef.current.confirmPassword = validatePasswordConfirmation
-        }
-
-        if (isAgeRequired) {
-          if (minimumAge) {
-            const birthdayValidation = validateAge(data.dateOfBirth, minimumAge)
-            setDateOfBirthError(birthdayValidation)
-            errorsRef.current.dateOfBirth = birthdayValidation
-          } else {
-            setDateOfBirthError(data.dateOfBirth ? '' : requiredText)
-            errorsRef.current.dateOfBirth = data.dateOfBirth ? '' : requiredText
-          }
-        }
-
-        if (isPhoneRequired && !isPhoneHidden) {
-          const validatePhone = validatePhoneNumber({
-            phoneNumber: data.phoneNumber,
-            customError: texts?.form?.phoneInput?.customError,
-            countryCode: phoneCountryCode.current,
-          })
-          setPhoneError(validatePhone)
-          errorsRef.current.phone = validatePhone
-        }
-
-        errorsRef.current.privacy = isSubToTicketFairy ? '' : requiredText
-
-        if (isNameRequired) {
-          const ticketHoldersDataCopy = [...data.ticketHolderData]
-          _map(data.ticketHolderData, (th, index) => {
-            if (isNameRequired) {
-              ticketHoldersDataCopy[index].firstNameError = validateEmpty(th.firstName)
-              ticketHoldersDataCopy[index].lastNameError = validateEmpty(th.lastName)
-            }
-          })
-
-          setTicketHoldersData(ticketHoldersDataCopy)
-        }
-
-        return
-      } // end of Ticket Free
-
-      const validateStreet = validateEmpty(data.street)
-      const validateCity = validateEmpty(data.city)
-      const validatePostalCode = validateEmpty(data.postalCode)
-
-      setStreetErrorState(validateStreet)
-      setCityErrorState(validateCity)
-      setPostalCodeErrorState(validatePostalCode)
-      setFirstNameErrorState(validateFirstName)
-      setLastNameErrorState(validateLastName)
-      setEmailErrorState(validateEmails)
-      setEmailConfirmationErrorState(validateEmailsConfirmation)
-
-      errorsRef.current.street = validateStreet
-      errorsRef.current.city = validateCity
-      errorsRef.current.zipCode = validatePostalCode
-      errorsRef.current.firstName = validateFirstName
-      errorsRef.current.lastName = validateLastName
-      errorsRef.current.email = validateEmails
-      errorsRef.current.confirmEmail = validateEmailsConfirmation
-
-      if (data.isRegistering) {
-        const validatePassword = validatePasswords(data.password, data.confirmPassword)
-        const validatePasswordConfirmation = validatePasswords(
-          data.confirmPassword,
-          data.password
-        )
-
-        setPasswordErrorState(validatePassword)
-        setConfirmPasswordErrorState(validatePasswordConfirmation)
-
-        errorsRef.current.password = validatePassword
-        errorsRef.current.confirmPassword = validatePasswordConfirmation
-      }
-
-      const countryValidation = validateDropDownEmpty(data.selectedCountry?.value)
-
-      setCountryErrorState(countryValidation)
-      errorsRef.current.country = countryValidation
-
-      if (isAgeRequired) {
-        if (minimumAge) {
-          const birthdayValidation = validateAge(data.dateOfBirth, minimumAge)
-          setDateOfBirthError(birthdayValidation)
-          errorsRef.current.dateOfBirth = birthdayValidation
-        } else {
-          setDateOfBirthError(data.dateOfBirth ? '' : requiredText)
-          errorsRef.current.dateOfBirth = data.dateOfBirth ? '' : requiredText
-        }
-      }
-
-      const validateState = validateDropDownEmpty(data.selectedState?.value)
-
-      setStateErrorState(validateState)
-      errorsRef.current.state = validateState
-
-      if (isPhoneRequired && !isPhoneHidden) {
-        const validatePhone = validatePhoneNumber({
-          phoneNumber: data.phoneNumber,
-          customError: texts?.form?.phoneInput?.customError,
-          countryCode: phoneCountryCode.current,
-        })
-
-        setPhoneError(validatePhone)
-        errorsRef.current.phone = validatePhone
-      }
-
-      //setTtfPrivacyPolicyError(isSubToTicketFairy ? '' : requiredText)
-      errorsRef.current.privacy = isSubToTicketFairy ? '' : requiredText
-
-      if (isNameRequired) {
-        const ticketHoldersDataCopy = [...data.ticketHolderData]
-        _map(data.ticketHolderData, (th, index) => {
-          if (isNameRequired) {
-            ticketHoldersDataCopy[index].firstNameError = validateEmpty(th.firstName)
-            ticketHoldersDataCopy[index].lastNameError = validateEmpty(th.lastName)
-          }
-        })
-
-        setTicketHoldersData(ticketHoldersDataCopy)
-      }
-    }
-
-    const checkBasicDataValid = (): boolean => {
-      if (secondsLeft === 0) {
-        return false
-      }
-
-      if (isTicketFree) {
-        if (
-          errorsRef.current.firstName ||
-          errorsRef.current.lastName ||
-          errorsRef.current.email ||
-          errorsRef.current.confirmEmail
-        ) {
-          return false
-        }
-      } else {
-        if (
-          errorsRef.current.firstName ||
-          errorsRef.current.lastName ||
-          errorsRef.current.email ||
-          errorsRef.current.confirmEmail ||
-          errorsRef.current.city ||
-          errorsRef.current.zipCode ||
-          errorsRef.current.state ||
-          errorsRef.current.country ||
-          errorsRef.current.street
-        ) {
-          return false
-        }
-      }
-
-      if (isPhoneRequired && !isPhoneHidden && errorsRef.current.phone) {
-        if (isLoading) {
-          setIsLoading(false)
-        }
-
-        return false
-      }
-
-      return true
-    }
-
-    const fillAllRequiredFieldsAlert =
-      texts?.form?.fillAllRequiredFieldsAlert ||
-      'You must fill all Ticket Holder required fields'
-
-    const checkExtraDataValid = (): string => {
-      if (!isTtfCheckboxHidden && !isSubToTicketFairy) {
-        setTtfPrivacyPolicyError(
-          texts?.form?.ttfPrivacyPolicyRequiredError || requiredText
-        )
-        return 'Please review the errors'
-      }
-
-      if (isAgeRequired) {
-        if (!dateOfBirth) {
-          setDateOfBirthError(requiredText)
-          return 'Please enter your date of birth'
-        }
-
-        if (minimumAge) {
-          const ageValidationMessage = validateAge(dateOfBirth, minimumAge)
-          if (ageValidationMessage) {
-            setDateOfBirthError(ageValidationMessage)
-            return ageValidationMessage
-          }
-        }
-      }
-
-      if (!isNameRequired) {
-        return ''
-      }
-
-      if (
-        ticketHoldersData.length === 1 &&
-        config.shouldHideTicketHolderSectionOnSingleTicket
-      ) {
-        return ''
-      }
-
-      return _every(
-        _map(
-          ticketHoldersData,
-          (th) => validateEmpty(th.firstName) || validateEmpty(th.lastName)
-        ),
-        (itm) => itm === ''
-      )
-        ? ''
-        : fillAllRequiredFieldsAlert
-    }
-    //#endregion
-
-    //#region Submit form
-    const handleOnRegisterFail = (rawError: any) => {
-      onRegisterError?.(rawError)
-    }
-
-    const performCheckout = async (checkoutBodyWhenSkipping?: ICheckoutBody) => {
-      if (!billingCoreRef.current) {
-        return onCheckoutError?.({ message: 'BillingCore is not ready' })
-      }
-
-      const checkoutBody = checkoutBodyWhenSkipping || getCheckoutBody()
-
-      setIsSubmittingData(true)
-      const { error: checkoutError, data: checkoutData } =
-        await billingCoreRef.current.checkoutOrder(checkoutBody)
-      setIsLoading(false)
-      setIsSubmittingData(false)
-
-      if (checkoutError) {
-        onCheckoutError?.(checkoutError)
-        setSkippingStatus('false')
-        return showAlert(checkoutError.message)
-      }
-
-      if (!checkoutData) {
-        onCheckoutError?.({ message: 'Checkout returned not data' })
-        setSkippingStatus('false')
-        return showAlert('Checkout returned not data')
-      }
-
-      setSkippingStatus('success')
-      billingCoreRef.current.stopCartTimer()
-      onCheckoutSuccess(checkoutData)
-    }
-
-    const getRegisterFormData = (data: IRegisterNewUserBody): FormData => {
-      const bodyFormData = new FormData()
-      _forEach(data.attributes, (item: any, key: string) => {
-        bodyFormData.append(key, item)
-      })
-      return bodyFormData
-    }
-
-    const performNewUserRegister = async () => {
-      if (!billingCoreRef.current) {
-        showAlert('BillingCore is not ready')
-        return onRegisterError?.({ message: 'BillingCore is not initialized' })
-      }
-
-      setIsSubmittingData(true)
-
-      const registerUserBody = getRegisterNewUserBody()
-      const registerForm = getRegisterFormData(registerUserBody)
-
-      const { registerNewUserResponseData, registerNewUserResponseError } =
-        await billingCoreRef.current.registerNewUser(registerForm)
-
-      if (registerNewUserResponseError) {
-        setIsSubmittingData(false)
-        if (registerNewUserResponseError.isAlreadyRegistered) {
-          setLoginMessage(registerNewUserResponseError.message!)
-          showLoginDialog()
-          return handleOnRegisterFail(registerNewUserResponseError.raw)
-        }
-        handleOnRegisterFail(registerNewUserResponseError.raw)
-        return showAlert(registerNewUserResponseError.message!)
-      }
-
-      if (!registerNewUserResponseData) {
-        setIsSubmittingData(false)
-        handleOnRegisterFail('Register user returned no data')
-        return showAlert('Register user returned no data')
-      }
-
-      storedToken.current = registerNewUserResponseData.accessTokenData.accessToken
-
-      onRegisterSuccess?.(registerNewUserResponseData)
-
-      await performCheckout()
-    }
-
-    const getRegisterNewUserBody = (): IRegisterNewUserBody => {
-      const phoneNumber = isPhoneRequired ? phone : emptyPhone(phone)
-
-      const body: IRegisterNewUserBody = isTicketFree
-        ? {
-            attributes: {
-              email: email,
-              first_name: firstName,
-              last_name: lastName,
-              password: password,
-              phone: phoneNumber,
-              password_confirmation: passwordConfirmation,
-              client_id: Config.CLIENT_ID!,
-              client_secret: Config.CLIENT_SECRET!,
-              check_cart_expiration: true,
-            },
-          }
-        : {
-            attributes: {
-              city: city,
-              country: parseInt(selectedCountry!.value as string, 10),
-              email: email,
-              first_name: firstName,
-              last_name: lastName,
-              password: password,
-              phone: phoneNumber,
-              state: parseInt(selectedState!.value as string, 10),
-              street_address: street,
-              zip: postalCode,
-              password_confirmation: passwordConfirmation,
-              client_id: Config.CLIENT_ID!,
-              client_secret: Config.CLIENT_SECRET!,
-              check_cart_expiration: true,
-            },
-          }
-
-      if (body.attributes.phone === undefined) {
-        delete body.attributes.phone
-      }
-
-      if (isAgeRequired && dateOfBirth) {
-        body.attributes.dob_day = dateOfBirth.getDate()
-        body.attributes.dob_month = dateOfBirth.getMonth() + 1
-        body.attributes.dob_year = dateOfBirth.getFullYear()
-      }
-
-      return body
-    }
-
-    const getCheckoutBody = (): ICheckoutBody => {
-      const parsedTicketHolders: ICheckoutTicketHolder[] = []
-
-      if (config.shouldHideTicketHolderSectionOnSingleTicket && numberOfTicketHolders) {
-        parsedTicketHolders.push({
-          first_name: firstName,
-          last_name: lastName,
-          phone: phone,
-          email: email,
-        })
-      } else {
-        for (let i = 0; i <= numberOfTicketHolders! - 1; i++) {
-          const individualHolder = {
-            first_name: ticketHoldersData[i]?.firstName || '',
-            last_name: ticketHoldersData[i]?.lastName || '',
-            phone: ticketHoldersData[i]?.phone || '',
-            email: ticketHoldersData[i]?.email || '',
-          }
-          parsedTicketHolders.push(individualHolder)
-        }
-      }
-
-      const formattedPhone = isPhoneRequired ? phone : emptyPhone(phone)
-
-      const checkoutBody: ICheckoutBody = isTicketFree
-        ? {
-            attributes: {
-              confirm_email: emailConfirmation,
-              email: email,
-              first_name: firstName,
-              last_name: lastName,
-              password: password,
-              phone: formattedPhone,
-              ticket_holders: parsedTicketHolders,
-              ttf_opt_in: isSubToTicketFairy,
-              brand_opt_in: isSubToBrand,
-            },
-          }
-        : {
-            attributes: {
-              city: city,
-              confirm_email: emailConfirmation,
-              country: parseInt(selectedCountry!.value as string, 10),
-              email: email,
-              first_name: firstName,
-              last_name: lastName,
-              password: password,
-              phone: formattedPhone,
-              state: parseInt(selectedState!.value as string, 10),
-              street_address: street,
-              zip: postalCode,
-              ticket_holders: parsedTicketHolders,
-              ttf_opt_in: isSubToTicketFairy,
-              brand_opt_in: isSubToBrand,
-            },
-          }
-
-      if (isAgeRequired && dateOfBirth) {
-        checkoutBody.attributes.dob_day = dateOfBirth.getDate()
-        checkoutBody.attributes.dob_month = dateOfBirth.getMonth() + 1
-        checkoutBody.attributes.dob_year = dateOfBirth.getFullYear()
-      }
-
-      if (checkoutBody.attributes.phone === undefined) {
-        delete checkoutBody.attributes.phone
-      }
-
-      return checkoutBody
-    }
-
-    const getCheckoutBodyWhenSkipping = ({
-      userProfile,
-      ticketsQuantity,
-    }: {
-      userProfile: IUserProfilePublic
-      ticketsQuantity: number
-    }): ICheckoutBody => {
-      const parsedTicketHolders: ICheckoutTicketHolder[] = []
-      const hFirstName = userProfile.firstName
-      const hLastName = userProfile.lastName
-      const hPhone = userProfile.phone
-      const hEmail = userProfile.email
-
-      for (let i = 0; i <= ticketsQuantity - 1; i++) {
-        const individualHolder = i
-          ? {
-              first_name: '',
-              last_name: '',
-              phone: '',
-              email: '',
-            }
-          : {
-              first_name: hFirstName,
-              last_name: hLastName,
-              phone: hPhone,
-              email: hEmail,
-            }
-
-        parsedTicketHolders.push(individualHolder)
-      }
-
-      const checkoutBody: ICheckoutBody = isTicketFree
-        ? {
-            attributes: {
-              confirm_email: userProfile.email,
-              email: userProfile.email,
-              first_name: userProfile.firstName,
-              last_name: userProfile.lastName,
-              phone: userProfile.phone,
-              ticket_holders: parsedTicketHolders,
-              ttf_opt_in: isSubToTicketFairy,
-              brand_opt_in: isSubToBrand,
-              password: password,
-            },
-          }
-        : {
-            attributes: {
-              city: userProfile.city,
-              confirm_email: userProfile.email,
-              country: parseInt(userProfile.countryId, 10),
-              email: userProfile.email,
-              first_name: userProfile.firstName,
-              last_name: userProfile.lastName,
-              phone: userProfile.phone,
-              state: parseInt(userProfile.stateId, 10),
-              street_address: userProfile.streetAddress,
-              zip: userProfile.zipCode,
-              ticket_holders: parsedTicketHolders,
-              ttf_opt_in: isSubToTicketFairy,
-              brand_opt_in: isSubToBrand,
-              password: password,
-            },
-          }
-
-      if (checkoutBody.attributes.phone === undefined) {
-        delete checkoutBody.attributes.phone
-      }
-
-      return checkoutBody
-    }
-
-    const onSubmit = async () => {
-      showErrorMessages({
-        firstName: firstName,
-        lastName: lastName,
-        email: email,
-        confirmEmail: emailConfirmation,
-        password: password,
-        confirmPassword: passwordConfirmation,
-        street: street,
-        city: city,
-        selectedCountry: selectedCountry,
-        selectedState: selectedState,
-        postalCode: postalCode,
-        dateOfBirth: dateOfBirth,
-        phoneNumber: phone,
-        isRegistering: !loggedUserFirstName && !storedToken.current,
-        ticketHolderData: ticketHoldersData,
-      })
-
-      const isBasicDataValid = checkBasicDataValid()
-      const isExtraDataValidErrors = checkExtraDataValid()
-
-      if (isExtraDataValidErrors || !isBasicDataValid) {
-        return
-      }
-
-      if (loggedUserFirstName && storedToken.current) {
-        await performCheckout()
-      } else {
-        await performNewUserRegister()
-      }
-    }
-    //#endregion
-
-    const setCountryByEvent = async () => {
-      const eventCountry = await getData(LocalStorageKeys.EVENT_COUNTRY)
-
-      if (!eventCountry) {
-        return
-      }
-
-      if (countries.length > 1 && eventCountry) {
-        const selectedCountryItem = _find(countries, (item) => {
-          const stringValue = item.code as string
-          return stringValue.toUpperCase() === eventCountry?.toUpperCase()
-        })
-        setSelectedCountry(selectedCountryItem)
-      }
-    }
-
-    //#region Fetch Initial Data
-    const fetchData = async () => {
-      if (!billingCoreRef.current) {
-        onFetchCartError?.({ message: 'BillingCoreRef not initialized' })
-        return showAlert('BillingCoreRef not initialized')
-      }
-
-      setIsLoading(true)
-
-      let usrPrfl: IUserProfile | undefined
-      const usrTkn = await getData(LocalStorageKeys.ACCESS_TOKEN)
-      let skippingStatusInner: SkippingStatusType
-
-      const { countriesData, countriesError } =
-        await billingCoreRef.current.getCountries()
-
-      if (countriesError) {
-        setSkippingStatus('fail')
-        setIsLoading(false)
-        onFetchCountriesError?.(countriesError)
-        return showAlert(countriesError.message || 'Error fetching countries')
-      }
-
-      onFetchCountriesSuccess?.(countriesData!)
-
-      const parsedCountries: IDropdownItem[] = _map(countriesData, (item) => {
-        return { label: item.name, value: item.id, code: item.code }
-      })
-
-      if (usrTkn) {
-        storedToken.current = usrTkn
-        const { userProfileError, userProfileData } =
-          await billingCoreRef.current.getUserProfile()
-
-        if (userProfileError || !userProfileData) {
-          setSkippingStatus('fail')
-          setIsLoading(false)
-          onFetchUserProfileError?.(userProfileError!)
-
-          return showAlert(userProfileError?.message || 'Error fetching user profile')
-        }
-
-        onFetchUserProfileSuccess?.({
-          firstName: userProfileData.firstName,
-          lastName: userProfileData.lastName,
-        })
-
-        usrPrfl = userProfileData
-      } else {
-        skippingStatusInner = 'fail'
-        parsedCountries.unshift({
-          value: '-1',
-          label: texts?.form?.country || 'Country',
-          code: '__',
-        })
-        setSelectedCountry({
-          value: '-1',
-          label: texts?.form?.country || 'Country',
-          code: '__',
-        })
-      }
-
-      const { cartData, cartError } = await billingCoreRef.current.getCart()
-
-      if (cartError || !cartData) {
-        setSkippingStatus('fail')
-        setIsLoading(false)
-        onFetchCartError?.(cartError || { message: 'Error fetching cart' })
-        return showAlert(cartError?.message || 'Error fetching cart')
-      }
-
-      onFetchCartSuccess?.()
-
-      if (skippingStatusInner === 'fail') {
-        setSkippingStatus('fail')
-      } else {
-        setSkippingStatus(getSkippingStatus(cartData.quantity))
-      }
-
-      setNumberOfTicketHolders(cartData.quantity)
-      setIsSubToBrand(cartData.isMarketingOptedIn)
-      setIsSubToTicketFairy(cartData.isTfOptIn || false)
-      setIsTtfCheckboxHidden(cartData.isTfOptInHidden || false)
-
-      if (cartData.expiresAt) {
-        setSecondsLeft(cartData.expiresAt)
-      }
-
-      const tHolders: ITicketHolderField[] = []
-      for (let i = 0; i < cartData.quantity; i++) {
-        tHolders.push({
-          firstName: i === 0 && usrPrfl ? usrPrfl.firstName : '',
-          lastName: i === 0 && usrPrfl ? usrPrfl.lastName : '',
-          email: i === 0 && usrPrfl ? usrPrfl.email : '',
-          phone: i === 0 && usrPrfl ? usrPrfl.phone : '',
-          firstNameError: '',
-          lastNameError: '',
-        })
-      }
-
-      let phoneCountry = 'US'
-      let phoneCountryDialCode = '+1'
-      const eventCountry = await getData(LocalStorageKeys.EVENT_COUNTRY)
-
-      if (eventCountry) {
-        phoneCountry = eventCountry.toUpperCase()
-        phoneCountryDialCode = getCountryDialCode(phoneCountry)
-      } else {
-        try {
-          const deviceCountry = await DeviceCountry.getCountryCode(TYPE_ANY)
-          phoneCountry = deviceCountry.code.toUpperCase()
-          phoneCountryDialCode = getCountryDialCode(phoneCountry)
-        } catch (err) {
-          phoneCountry = 'US'
-        }
-      }
-
-      if (usrPrfl) {
-        if (!isPhoneHidden && isPhoneRequired) {
-          if (!checkIsStoredPhoneNumberFormat(usrPrfl.phone)) {
-            setPhoneError(
-              texts?.invalidPhoneNumberError || 'Please enter a valid phone number'
-            )
-            skippingStatusInner = 'fail'
-            setSkippingStatus('fail')
-            setIsLoading(false)
-          } else {
-            // We can perform Checkout process since phone is valid
-            if (!isBillingRequired && usrTkn && cartData) {
-              const checkoutBody: ICheckoutBody = getCheckoutBodyWhenSkipping({
-                userProfile: usrPrfl,
-                ticketsQuantity: cartData.quantity,
-              })
-              return await performCheckout(checkoutBody)
-            } else {
-              if (skippingStatusInner === 'skipping') {
-                setSkippingStatus('fail')
-              }
-            }
-          }
-        } else {
-          // We can perform Checkout process since phone is valid
-          if (!isBillingRequired && usrTkn && cartData) {
-            const checkoutBody: ICheckoutBody = getCheckoutBodyWhenSkipping({
-              userProfile: usrPrfl,
-              ticketsQuantity: cartData.quantity,
-            })
-            return await performCheckout(checkoutBody)
-          } else {
-            if (skippingStatusInner === 'skipping') {
-              setSkippingStatus('fail')
-            }
-          }
-        }
-
-        const userPhone = usrPrfl.phone === null ? phoneCountryDialCode : usrPrfl.phone
-
-        if (userPhone.length <= 5) {
-          phoneCountryCode.current = userPhone
-        }
-
-        handleSetFormDataFromUserProfile({
-          ...usrPrfl,
-          phone: userPhone,
-        })
-      } else {
-        // There is no user profile data
-        phoneCountryCode.current = phoneCountryDialCode
-        setPhone(phoneCountryDialCode)
-      }
-
-      setCountries(parsedCountries)
-      setTicketHoldersData(tHolders)
-      setIsSubmittingData(false)
-      setIsLoading(false)
-    }
-    //#endregion Fetch Initial Data
-
-    //#region Effects
-    useEffect(() => {
-      handleOnLoadingChange(isLoading)
-    }, [isLoading, handleOnLoadingChange])
-
-    useEffect(() => {
-      handleOnSkippingStatusChange(skippingStatus)
-    }, [handleOnSkippingStatusChange, skippingStatus])
-
-    useEffect(() => {
-      if (countryId) {
-        if (countries.length > 1) {
-          const selectedCountryItem = _find(countries, (item) => item.value === countryId)
-          setSelectedCountry(selectedCountryItem)
-        }
-      } else {
-        setCountryByEvent()
-      }
-    }, [countries, countryId])
-
-    useEffect(() => {
-      const getStates = async () => {
-        if (!selectedCountry) {
-          return
-        }
-
-        if (!billingCoreRef.current) {
-          onFetchCartError?.({ message: 'BillingCoreRef not initialized' })
-          return showAlert('BillingCoreRef not initialized')
-        }
-
-        const { statesData, statesError } = await billingCoreRef.current.getStates(
-          selectedCountry.value.toString()
-        )
-
-        if (statesError) {
-          onFetchStatesError?.(statesError!)
-          return showAlert(statesError?.message || 'Error fetching states')
-        }
-
-        const parsedStates: IDropdownItem[] = _map(statesData, (item, index) => {
-          return { label: item, value: index }
-        })
-
-        onFetchStatesSuccess?.()
-        setStates(parsedStates)
-      }
-
-      if (selectedCountry && selectedCountry.value !== '-1') {
-        getStates()
-      }
-    }, [selectedCountry])
-
-    useEffect(() => {
-      if (states.length > 1 && stateId) {
-        const selectedStateItem = _find(states, (item) => item.value === stateId)
-        if (!selectedStateItem) {
-          return setSelectedState({
-            value: '-1',
-            label: texts?.form?.state || 'State/County',
-          })
-        }
-        setSelectedState(selectedStateItem)
-      } else {
-        setSelectedState({
-          value: '-1',
-          label: texts?.form?.state || 'State/County',
-        })
-      }
-    }, [stateId, states])
-
-    useEffect(() => {
-      setCountries([
-        {
-          value: '-1',
-          label: texts?.form?.country || 'Country',
-        },
-      ])
-      setStates([
-        {
-          value: '-1',
-          label: texts?.form?.state || 'State/County',
-        },
-      ])
-      fetchData()
-    }, [])
-    //#endregion
-
-    const isDataValid = checkBasicDataValid()
-
-    const isButtonDisabled = config.isCheckoutAlwaysButtonEnabled ? false : !isDataValid
-
-    //#region RENDER
-    const renderTicketHolders = () => {
-      if (!numberOfTicketHolders || !holderLabels || ticketHoldersData.length === 0) {
-        return null
-      }
-
-      const tHolders = []
-      for (let i = 0; i < numberOfTicketHolders; i++) {
-        const thItemTitle = texts?.form?.ticketHolderItem || 'Ticket Holder'
-        tHolders.push(
-          <View key={`ticketHolder.${i}`}>
-            <Text style={styles?.ticketHolderItemHeader}>
-              {thItemTitle} {i + 1}
-            </Text>
-            <Input
-              label={holderLabels.firstName}
-              value={ticketHoldersData[i].firstName}
-              onChangeText={(text) => {
-                const copyTicketHolders = [...ticketHoldersData]
-                copyTicketHolders[i].firstName = text
-                copyTicketHolders[i].firstNameError = validateEmpty(text)
-
-                setTicketHoldersData(copyTicketHolders)
-              }}
-              error={ticketHoldersData[i].firstNameError}
-              styles={styles?.inputStyles}
-            />
-            <Input
-              label={holderLabels.lastName}
-              value={ticketHoldersData[i].lastName}
-              onChangeText={(text) => {
-                const copyTicketHolders = [...ticketHoldersData]
-                copyTicketHolders[i].lastName = text
-                copyTicketHolders[i].lastNameError = validateEmpty(text)
-
-                setTicketHoldersData(copyTicketHolders)
-              }}
-              error={ticketHoldersData[i].lastNameError}
-              styles={styles?.inputStyles}
-            />
-            <Input
-              label={holderLabels.email}
-              value={ticketHoldersData[i].email}
-              onChangeText={(text) => {
-                const copyTicketHolders = [...ticketHoldersData]
-                copyTicketHolders[i].email = text
-                setTicketHoldersData(copyTicketHolders)
-              }}
-              keyboardType="email-address"
-              styles={styles?.inputStyles}
-              autoCapitalize="none"
-            />
-            <Input
-              label={holderLabels.phone}
-              value={ticketHoldersData[i].phone}
-              onChangeText={(text) => {
-                const copyTicketHolders = [...ticketHoldersData]
-                copyTicketHolders[i].phone = text
-                setTicketHoldersData(copyTicketHolders)
-              }}
-              keyboardType="phone-pad"
-              styles={styles?.inputStyles}
-            />
-          </View>
-        )
-      }
-
-      return (
-        <>
-          <Text style={styles?.ticketHoldersTitle}>
-            {texts?.form?.ticketHoldersTitle || 'Ticket Holders'}
-          </Text>
-          {tHolders}
-        </>
-      )
-    }
-
-    const renderCheckingOut = () => {
-      const skippingStyles = skipBillingConfig?.styles
-      return (
-        <View style={[s.skippingRootContainer, skippingStyles?.rootContainer]}>
-          <View style={[s.skippingDialogContainer, skippingStyles?.dialogContainer]}>
-            <Image
-              source={skipBillingConfig?.brandImage || R.images.brand}
-              style={[s.skippingBrandImage, skippingStyles?.brandImage]}
-            />
-            <Text style={[s.skippingMessage, skippingStyles?.text]}>
-              {texts?.skippingMessage || 'Checking out...'}
-            </Text>
-            {!!skipBillingConfig?.isActivityIndicatorVisible && (
-              <ActivityIndicator
-                color={skippingStyles?.activityIndicator?.color || R.colors.black}
-                size={skippingStyles?.activityIndicator?.size || 'large'}
-              />
-            )}
-          </View>
-        </View>
-      )
-    }
-
-    const renderContent = () => (
-      <>
-        <KeyboardAwareScrollView extraScrollHeight={32}>
-          <View style={styles?.rootContainer}>
-            <Login
-              onLoginSuccessful={handleOnLoginSuccess}
-              onLoginError={handleOnLoginError}
-              onLogoutSuccess={handleOnLogoutSuccess}
-              onLogoutError={onLogoutError}
-              isLoginDialogVisible={isLoginDialogVisible}
-              showLoginDialog={showLoginDialog}
-              hideLoginDialog={hideLoginDialog}
-              userFirstName={loggedUserFirstName}
-              texts={{ ...texts?.loginTexts, message: loginMessage }}
-              styles={styles?.loginStyles}
-              brandImages={loginBrandImages}
-            />
-            <Text style={styles?.screenTitle}>
-              {texts?.form?.getYourTicketsTitle || 'Get Your Tickets'}
-            </Text>
-
-            <Input
-              label={texts?.form?.firstName || 'First name'}
-              value={firstName}
-              onChangeText={handleOnFirstNameChanged}
-              error={firstNameError || firstNameErrorState}
-              styles={styles?.inputStyles}
-            />
-            <Input
-              label={texts?.form?.lastName || 'Last name'}
-              value={lastName}
-              onChangeText={handleOnLastNameChanged}
-              error={lastNameError || lastNameErrorState}
-              styles={styles?.inputStyles}
-            />
-
-            <Text style={styles?.texts}>
-              {texts?.form?.emailsAdvice ||
-                `IMPORTANT: Please double check that your email address is correct.\nIt's where we send your confirmation and e-tickets to!`}
-            </Text>
-
-            <Input
-              label={texts?.form?.email || 'Email'}
-              value={email}
-              onChangeText={handleOnEmailChanged}
-              keyboardType="email-address"
-              error={emailError || emailErrorState}
-              styles={styles?.inputStyles}
-              autoCapitalize="none"
-            />
-            <Input
-              label={texts?.form?.confirmEmail || 'Confirm email'}
-              value={emailConfirmation}
-              onChangeText={handleOnEmailConfirmationChanged}
-              keyboardType="email-address"
-              error={confirmEmailError || emailConfirmationErrorState}
-              styles={styles?.inputStyles}
-              autoCapitalize="none"
-            />
-            {isAgeRequired && (
-              <DatePicker
-                text={texts?.form?.dateOfBirth || 'Date of Birth'}
-                onSelectDate={handleOnSelectDate}
-                selectedDate={dateOfBirth}
-                styles={styles?.datePicker}
-                error={dateOfBirthError}
-              />
-            )}
-            {!loggedUserFirstName && (
-              <>
-                <Text style={styles?.passwordTitle}>
-                  {texts?.form?.choosePassword ||
-                    'Choose a password for your new TICKETFAIRY account'}
-                </Text>
-                <Input
-                  label={texts?.form?.password || 'Password'}
-                  isSecure
-                  onChangeText={handleOnPasswordChanged}
-                  error={passwordError || passwordErrorState}
-                  styles={styles?.inputStyles}
-                  autoCapitalize="none"
-                  secureTextEntry={true}
-                  textContentType="oneTimeCode"
-                />
-                <Input
-                  label={texts?.form?.confirmPassword || 'Confirm password'}
-                  isSecure
-                  onChangeText={handleOnConfirmPasswordChanged}
-                  error={confirmPasswordError || confirmPasswordErrorState}
-                  styles={styles?.inputStyles}
-                  autoCapitalize="none"
-                  secureTextEntry={true}
-                  textContentType="oneTimeCode"
-                />
-              </>
-            )}
-
-            {!isPhoneHidden && (
-              <PhoneInput
-                phoneNumber={phone}
-                onChangePhoneNumber={handleOnChangePhoneNumber}
-                styles={styles?.phoneInputStyles}
-                error={phoneError}
-                texts={{
-                  label: phoneLabel,
-                  ...texts?.form?.phoneInput,
-                }}
-              />
-            )}
-
-            {!isTicketFree && (
-              <>
-                <Input
-                  label={addressLabel}
-                  value={street}
-                  onChangeText={handleOnStreetChanged}
-                  error={streetError || streetErrorState}
-                  styles={styles?.inputStyles}
-                />
-                <Input
-                  label={texts?.form?.city || 'City'}
-                  value={city}
-                  onChangeText={handleOnCityChanged}
-                  error={cityError || cityErrorState}
-                  styles={styles?.inputStyles}
-                />
-                <DropdownMaterial
-                  items={countries}
-                  onSelectItem={handleOnCountryChanged}
-                  selectedOption={selectedCountry}
-                  styles={styles?.dropdownMaterialStyles}
-                  materialInputProps={{
-                    label: texts?.form?.country || 'Country',
-                    error: countryErrorState,
-                  }}
-                />
-                <Input
-                  label={texts?.form?.zipCode || 'Postal Code / Zip Code'}
-                  value={postalCode}
-                  onChangeText={handleOnPostalCodeChanged}
-                  error={postalCodeError || postalCodeErrorState}
-                  styles={styles?.inputStyles}
-                />
-                <DropdownMaterial
-                  items={states}
-                  onSelectItem={handleOnStateChanged}
-                  selectedOption={selectedState}
-                  styles={styles?.dropdownMaterialStyles}
-                  materialInputProps={{
-                    label: texts?.form?.state || 'State',
-                    error: stateErrorState,
-                  }}
-                />
-              </>
-            )}
-            <Checkbox
-              onPress={handleIsSubToBrandToggle}
-              text={brandCheckBoxText}
-              isActive={isSubToBrand}
-              styles={styles?.checkboxStyles}
-            />
-
-            {!isTtfCheckboxHidden && (
-              <Checkbox
-                onPress={handleIsSubToTicketFairyToggle}
-                isActive={isSubToTicketFairy}
-                customTextComp={
-                  <Text
-                    style={[
-                      styles?.customCheckbox?.text,
-                      !!ttfPrivacyPolicyError && {
-                        color: styles?.customCheckbox?.errorColor,
-                      },
-                    ]}
-                  >
-                    {texts?.form?.isSubToTicketFairy ||
-                      `I agree that The Ticket Fairy may use the personal data that have provided for marketing purposes, such as recommending events that I might be interested in, in accordance with its `}
-                    <Text
-                      style={styles?.privacyPolicyLinkStyle}
-                      onPress={handleOpenPrivacyLink}
-                    >
-                      {texts?.form?.privacyPolicy || 'Privacy Policy'}
-                    </Text>
-                    .
-                  </Text>
-                }
-                styles={{ error: s.ttfPolicyError, ...styles?.checkboxStyles }}
-                error={ttfPrivacyPolicyError}
-              />
-            )}
-
-            {renderTicketHolders()}
-
-            <Button
-              onPress={onSubmit}
-              text={texts?.checkoutButton || 'CHECKOUT'}
-              isDisabled={isButtonDisabled}
-              isLoading={isSubmittingData}
-              styles={
-                isButtonDisabled
-                  ? {
-                      button: s.submitButtonDisabled,
-                      ...styles?.checkoutButtonDisabled,
-                    }
-                  : {
-                      container: [s.submitButton, styles?.checkoutButton?.container],
-                      text: styles?.checkoutButton?.text,
-                      button: styles?.checkoutButton?.button,
-                    }
-              }
-            />
-          </View>
-          {areLoadingIndicatorsEnabled && isLoading && <Loading />}
-        </KeyboardAwareScrollView>
-        <CartTimer
-          secondsLeft={secondsLeft}
-          styles={styles?.cartTimer}
-          texts={texts?.cartTimer}
-          shouldNotMinimize={shouldCartTimerNotMinimizeOnTap}
-        />
-      </>
-    )
-
-    return (
-      <BillingCore
-        ref={billingCoreRef}
-        onSecondsLeftChange={setSecondsLeft}
-        onCartExpired={onCartExpired}
-      >
-        <SessionHandle ref={sessionHandleRef}>
-          {skippingStatus === 'skipping' && areLoadingIndicatorsEnabled
-            ? renderCheckingOut()
-            : renderContent()}
-        </SessionHandle>
-      </BillingCore>
-    )
-    //#endregion
-  }
-)
-
-export default Billing