tf-checkout-react 1.2.16 → 1.2.19

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

@@ -130,7 +130,7 @@ const LogicRunner: FC<{
   onGetStatesSuccess,
   onGetStatesError,
   shouldFetchCountries,
-  brandOptIn
+  brandOptIn,
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -176,7 +176,9 @@ const LogicRunner: FC<{
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || '1',
               zip: parsedData?.zip || '',
-              brand_opt_in: brandOptIn ? brandOptIn : (parsedData?.brand_opt_in || false),
+              brand_opt_in: brandOptIn
+                ? brandOptIn
+                : parsedData?.brand_opt_in || false,
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
@@ -197,316 +199,417 @@ const LogicRunner: FC<{
   return null
 }
 
-export const BillingInfoContainer = ({
-  data = [],
-  ticketHoldersFields = {
-    id: 1,
-    fields: [],
-  },
-  initialValues = {},
-  buttonName = 'Submit',
-  handleSubmit = _identity,
-  theme = 'light',
-  onRegisterSuccess = () => {},
-  onRegisterError = () => {},
-  onSubmitError = () => {},
-  onGetCartSuccess = () => {},
-  onGetCartError = () => {},
-  onGetCountriesSuccess = () => {},
-  onGetCountriesError = () => {},
-  onGetStatesSuccess = () => {},
-  onGetStatesError = () => {},
-  onGetProfileDataSuccess = () => {},
-  onGetProfileDataError = () => {},
-  onAuthorizeSuccess = () => {},
-  onAuthorizeError = () => {},
-  onLogin,
-  onLoginSuccess = () => {},
-  isLoggedIn: pIsLoggedIn = false,
-  accountInfoTitle = '',
-  hideLogo,
-  themeOptions,
-  onErrorClose = () => {},
-  hideErrorsAlertSection = false,
-  onSkipBillingPage = () => {},
-  skipPage = false,
-  canSkipHolderNames = false,
-  onForgotPasswordSuccess = () => {},
-  onForgotPasswordError = () => {},
-  shouldFetchCountries = true,
-  onCountdownFinish = () => {},
-  enableTimer = false,
-  logo,
-  showForgotPasswordButton = false,
-  showSignUpButton = false,
-  brandOptIn = false,
-}: IBillingInfoPage) => {
-  const themeMui = createTheme(themeOptions)
-  const isWindowDefined = typeof window !== 'undefined'
-  const userData =
-    isWindowDefined && window.localStorage.getItem('user_data')
-      ? JSON.parse(window.localStorage.getItem('user_data') || '')
-      : {}
-  const access_token =
-    isWindowDefined && window.localStorage.getItem('access_token')
-      ? window.localStorage.getItem('access_token') || ''
-      : ''
-  const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
-    IBillingInfoData[]
-  >(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, setAlreadyHasUser] = useState(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 [error, setError] = useState(null)
-  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 showDOB = getQueryVariable('age_required') === 'true'
-  const showTicketHolders = getQueryVariable('names_required') === 'true'
-  const eventId = getQueryVariable('event_id')
-  const optedInFieldValue: boolean = brandOptIn
-  ? brandOptIn : _get(cartInfoData, 'optedIn', false)
-  const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
-  const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
-  const expirationTime = _get(cartInfoData, 'expiresAt')
-  const flagRequirePhone = getQueryVariable('phone_required') === 'true'
+export const BillingInfoContainer = React.memo(
+  ({
+    data = [],
+    ticketHoldersFields = {
+      id: 1,
+      fields: [],
+    },
+    initialValues = {},
+    buttonName = 'Submit',
+    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,
+    onAuthorizeSuccess = _identity,
+    onAuthorizeError = _identity,
+    onLogin,
+    onLoginSuccess = _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 = false,
+    showSignUpButton = false,
+    brandOptIn = false,
+  }: IBillingInfoPage) => {
+    const themeMui = createTheme(themeOptions)
+    const isWindowDefined = typeof window !== 'undefined'
+    const userData =
+      isWindowDefined && window.localStorage.getItem('user_data')
+        ? JSON.parse(window.localStorage.getItem('user_data') || '')
+        : {}
+    const access_token =
+      isWindowDefined && window.localStorage.getItem('access_token')
+        ? window.localStorage.getItem('access_token') || ''
+        : ''
+    const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
+      IBillingInfoData[]
+    >(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, setAlreadyHasUser] = useState(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 [error, setError] = useState(null)
+    const [phoneValidationIsLoading, setPhoneValidationIsLoading] = 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 showDOB = getQueryVariable('age_required') === 'true'
+    const showTicketHolders = getQueryVariable('names_required') === 'true'
+    const eventId = getQueryVariable('event_id')
+    const optedInFieldValue: boolean = brandOptIn
+      ? brandOptIn
+      : _get(cartInfoData, 'optedIn', false)
+    const ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
+    const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
+    const expirationTime = _get(cartInfoData, 'expiresAt')
+    const flagRequirePhone = getQueryVariable('phone_required') === 'true'
 
-  // Get prevProps
-  const prevData = useRef(data)
+    // Get prevProps
+    const prevData = useRef(data)
 
-  useEffect(() => {
-    const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
-    const isEqualData = _isEqual(prevData.current, data)
-    if (!hasUniqueId || !isEqualData) {
-      setDataWithUniqueIds(assingUniqueIds(data))
-      if (!isEqualData) {
-        prevData.current = data
+    useEffect(() => {
+      const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
+      const isEqualData = _isEqual(prevData.current, data)
+      if (!hasUniqueId || !isEqualData) {
+        setDataWithUniqueIds(assingUniqueIds(data))
+        if (!isEqualData) {
+          prevData.current = data
+        }
       }
-    }
-  }, [dataWithUniqueIds, data])
+    }, [dataWithUniqueIds, data])
 
-  const getQuantity = (cart: any = []) => {
-    let qty: any = 0
-    cart.forEach((item: any) => {
-      qty += +item.quantity
-    })
-    return qty
-  }
-
-  useEffect(() => {
-    if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
-      setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
+    const getQuantity = (cart: any = []) => {
+      let qty = 0
+      cart.forEach((item: any) => {
+        qty += +item.quantity
+      })
+      return qty
     }
-  }, [pIsLoggedIn, isLoggedIn, xtfCookie])
-  //just once
-  useEffect(() => {
-    // fetch countries data
-    const fetchCountries = async () => {
+
+    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(
+            _map(_get(res, 'data.data'), (item, key) => ({
+              label: item,
+              value: key,
+            }))
+          )
+          onGetCountriesSuccess(res.data)
+        } catch (e) {
+          if (axios.isAxiosError(e)) {
+            onGetCountriesError(e)
+          }
+        }
+      }
+      shouldFetchCountries && fetchCountries()
+      fetchCart()
+    }, [])
+    // fetch cart data
+    const fetchCart = async () => {
       try {
-        const res = await getCountries()
+        const res = await getCart()
         setCustomHeader(res)
-        setCountries(
-          _map(_get(res, 'data.data'), (item, key) => ({
-            label: item,
-            value: key,
-          }))
+        const cartInfo = _get(res, 'data.data.attributes')
+        setCartInfo(cartInfo)
+        const { cart = [] } = cartInfo
+        setTicketsQuantity(
+          new Array(getQuantity(cart)).fill(null).map(() => nanoid())
         )
-        onGetCountriesSuccess(res.data)
+        onGetCartSuccess(res.data)
       } catch (e) {
         if (axios.isAxiosError(e)) {
-          onGetCountriesError(e)
+          onGetCartError(e)
         }
       }
     }
-    shouldFetchCountries && fetchCountries()
-    fetchCart()
-  }, [])
-  // fetch cart data
-  const fetchCart = async () => {
-    try {
-      const res = await getCart()
-      setCustomHeader(res)
-      const cartInfo = _get(res, 'data.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)
-      }
-    }
-  }
-  // fetch user data
-  const fetchUserData = async (token: string) => {
-    try {
-      if ((isWindowDefined && token) || isLoggedIn) {
-        const userDataResponse = await getProfileData(token)
-        const profileSpecifiedData = _get(userDataResponse, 'data.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)
+    // fetch user data
+    const fetchUserData = async (token: string) => {
+      try {
+        if ((isWindowDefined && token) || isLoggedIn) {
+          const userDataResponse = await getProfileData(token)
+          const profileSpecifiedData = _get(userDataResponse, 'data.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(access_token)
-  }, [access_token, isLoggedIn])
+    useEffect(() => {
+      fetchUserData(access_token)
+      fetchCart()
+    }, [access_token, isLoggedIn])
 
-  useEffect(() => {
-    const collectPaymentData = async () => {
-      if (skipPage && !_isEmpty(ticketsQuantity) && !showDOB) {
-        setLoading(true)
-        const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-          ticketsQuantity.length,
-          userData
-        )
+    useEffect(() => {
+      const collectPaymentData = async () => {
+        if (skipPage && !_isEmpty(ticketsQuantity) && !showDOB) {
+          setLoading(true)
+          const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+            ticketsQuantity.length,
+            userData
+          )
 
-        try {
-          const res = await postOnCheckout(checkoutBody, access_token)
-          removeReferralKey()
-          onSkipBillingPage(_get(res, 'data.data.attributes'))
+          try {
+            const res = await postOnCheckout(checkoutBody, access_token)
+            removeReferralKey()
+            onSkipBillingPage(_get(res, 'data.data.attributes'))
+            setLoading(false)
+          } catch (e) {
+            onSubmitError(e)
+          }
+        } else {
           setLoading(false)
-        } catch (e) {
-          onSubmitError(e)
         }
-      } else {
-        setLoading(false)
       }
-    }
-    collectPaymentData()
-  }, [skipPage, ticketsQuantity])
+      collectPaymentData()
+    }, [skipPage, ticketsQuantity])
 
-  const collectCheckoutBody = (
-    values: Record<string, unknown>,
-    profileData?: any
-  ): Record<string, unknown> => {
-    let checkoutBody = {}
+    const collectCheckoutBody = (
+      values: Record<string, unknown>,
+      profileData?: any
+    ): Record<string, unknown> => {
+      let checkoutBody = {}
 
-    // Auto collect ticket holders name when it was skipped optionally
-    if (showDOB && !showTicketHolders && canSkipHolderNames) {
-      checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-        ticketsQuantity.length,
-        values,
-        true,
-        { emailLogged, firstNameLogged, lastNameLogged }
-      )
-    } else {
-      checkoutBody = createCheckoutDataBody(
-        ticketsQuantity.length,
-        values,
-        {
-          emailLogged: emailLogged || profileData.email,
-          firstNameLogged:
-            firstNameLogged || profileData.first_name || profileData.firstName,
-          lastNameLogged:
-            lastNameLogged || profileData.last_name || profileData.lastName,
-        },
-        showDOB
-      )
-    }
+      // Auto collect ticket holders name when it was skipped optionally
+      if (showDOB && !showTicketHolders && canSkipHolderNames) {
+        checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+          ticketsQuantity.length,
+          values,
+          true,
+          { emailLogged, firstNameLogged, lastNameLogged }
+        )
+      } else {
+        checkoutBody = createCheckoutDataBody(
+          ticketsQuantity.length,
+          values,
+          {
+            emailLogged: emailLogged || profileData.email,
+            firstNameLogged:
+              firstNameLogged ||
+              profileData.first_name ||
+              profileData.firstName,
+            lastNameLogged:
+              lastNameLogged || profileData.last_name || profileData.lastName,
+          },
+          showDOB
+        )
+      }
 
-    return checkoutBody
-  }
+      return checkoutBody
+    }
 
-  const removeReferralKey = () => {
-    localStorage.removeItem('referral_key')
-  }
+    const removeReferralKey = () => {
+      localStorage.removeItem('referral_key')
+    }
 
-  if (
-    loading ||
-    (enableTimer && !expirationTime && typeof window !== 'undefined')
-  ) {
-    if (expirationTime === 0) {
-      // Redirect to homepage (countdown finished and browser reloaded case)
-      window.location.href = '/'
+    if (
+      loading ||
+      (enableTimer && !expirationTime && typeof window !== 'undefined')
+    ) {
+      if (expirationTime === 0) {
+        // Redirect to homepage (countdown finished and browser reloaded case)
+        window.location.href = '/'
+      }
     }
-  }
 
-  return (
-    <ThemeProvider theme={themeMui}>
-      {loading && (
-        <Backdrop
-          sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
-          open={true}
-        >
-          <CircularProgress color="inherit" />
-        </Backdrop>
-      )}
-      {!!expirationTime && enableTimer && (
-        <TimerWidget
-          expires_at={expirationTime}
-          onCountdownFinish={onCountdownFinish}
-        />
-      )}
-      <Formik
-        initialValues={getInitialValues(
-          dataWithUniqueIds,
-          {
-            ...initialValues,
-            country: _get(userData, 'country', '') || '1',
-            state: _get(userData, 'state', '') || '1',
-            brand_opt_in: optedInFieldValue,
-            ttf_opt_in: ttfOptIn,
-          },
-          userValues
+    return (
+      <ThemeProvider theme={themeMui}>
+        {loading && (
+          <Backdrop
+            sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
+            open={true}
+          >
+            <CircularProgress color="inherit" />
+          </Backdrop>
         )}
-        enableReinitialize={false}
-        onSubmit={async (values, formikHelpers) => {
-          try {
-            if (isLoggedIn) {
-              if (access_token) {
-                const updatedUserData = await getProfileData(access_token)
-                const profileSpecifiedData = _get(updatedUserData, 'data.data')
-                const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                if (isWindowDefined) {
-                  window.localStorage.setItem(
-                    'user_data',
-                    JSON.stringify(profileDataObj)
+        {!!expirationTime && enableTimer && (
+          <TimerWidget
+            expires_at={expirationTime}
+            onCountdownFinish={onCountdownFinish}
+          />
+        )}
+        <Formik
+          initialValues={getInitialValues(
+            dataWithUniqueIds,
+            {
+              ...initialValues,
+              country: _get(userData, 'country', '') || '1',
+              state: _get(userData, 'state', '') || '1',
+              brand_opt_in: optedInFieldValue,
+              ttf_opt_in: ttfOptIn,
+            },
+            userValues
+          )}
+          enableReinitialize={false}
+          onSubmit={async (values, formikHelpers) => {
+            try {
+              if (isLoggedIn) {
+                if (access_token) {
+                  const updatedUserData = await getProfileData(access_token)
+                  const profileSpecifiedData = _get(
+                    updatedUserData,
+                    'data.data'
                   )
+                  const profileDataObj = setLoggedUserData(profileSpecifiedData)
+                  if (isWindowDefined) {
+                    window.localStorage.setItem(
+                      'user_data',
+                      JSON.stringify(profileDataObj)
+                    )
+                  }
+                }
+
+                const checkoutBody = collectCheckoutBody(values, userData)
+                const res = await postOnCheckout(checkoutBody, access_token)
+                removeReferralKey()
+                handleSubmit(
+                  values,
+                  formikHelpers as FormikHelpers<any>,
+                  eventId,
+                  res
+                )
+                return
+              }
+              const checkoutBodyForRegistration = createCheckoutDataBody(
+                ticketsQuantity.length,
+                values,
+                { emailLogged, firstNameLogged, lastNameLogged },
+                showDOB
+              )
+              const bodyFormData = createRegisterFormData(
+                values,
+                checkoutBodyForRegistration
+              )
+              try {
+                setLoading(true)
+                const resRegister = await register(bodyFormData)
+                const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
+                const accessToken = _get(
+                  resRegister,
+                  'data.data.attributes.access_token'
+                )
+                const refreshToken = _get(
+                  resRegister,
+                  'data.data.attributes.refresh_token'
+                )
+                const userProfile = _get(
+                  resRegister,
+                  'data.data.attributes.user_profile'
+                )
+
+                onRegisterSuccess({
+                  xtfCookie,
+                  accessToken,
+                  refreshToken,
+                  userProfile,
+                })
+              } catch (e) {
+                setLoading(false)
+                if (axios.isAxiosError(e)) {
+                  const error = e?.response?.data?.message
+                  if (_includes(error, 'You must be aged')) {
+                    formikHelpers.setFieldError('holderAge', error)
+                  }
+                  if (error?.password) {
+                    formikHelpers.setFieldError('password', error.password)
+                    formikHelpers.setFieldError(
+                      'confirmPassword',
+                      error.password
+                    )
+                  }
+                  if (error?.email && !onLogin) {
+                    // False will stand for outside controll
+                    setAlreadyHasUser(true)
+                    setShowModalLogin(true)
+                  }
+
+                  if (
+                    _includes(error, 'The cart is expired') &&
+                    !hideErrorsAlertSection
+                  ) {
+                    setError(error)
+                  }
+
+                  onRegisterError(e, values.email)
                 }
+                return
+              }
+              const profileData = await getProfileData()
+              const profileSpecifiedData = _get(profileData, 'data.data')
+              const profileDataObj = setLoggedUserData(profileSpecifiedData)
+              if (isWindowDefined) {
+                window.localStorage.setItem(
+                  'user_data',
+                  JSON.stringify(profileDataObj)
+                )
               }
 
-              const checkoutBody = collectCheckoutBody(values, userData)
-              const res = await postOnCheckout(checkoutBody, access_token)
+              const checkoutBody = collectCheckoutBody(values, profileDataObj)
+              const res = await postOnCheckout(checkoutBody)
               removeReferralKey()
               handleSubmit(
                 values,
@@ -514,388 +617,313 @@ export const BillingInfoContainer = ({
                 eventId,
                 res
               )
-              return
-            }
-            const checkoutBodyForRegistration = createCheckoutDataBody(
-              ticketsQuantity.length,
-              values,
-              { emailLogged, firstNameLogged, lastNameLogged },
-              showDOB
-            )
-            const bodyFormData = createRegisterFormData(
-              values,
-              checkoutBodyForRegistration
-            )
-            try {
-              setLoading(true)
-              const resRegister = await register(bodyFormData)
-              const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-              const accessToken = _get(
-                resRegister,
-                'data.data.attributes.access_token'
-              )
-              const refreshToken = _get(
-                resRegister,
-                'data.data.attributes.refresh_token'
-              )
-              const userProfile = _get(
-                resRegister,
-                'data.data.attributes.user_profile'
-              )
-
-              onRegisterSuccess({
-                xtfCookie,
-                accessToken,
-                refreshToken,
-                userProfile,
-              })
             } catch (e) {
               setLoading(false)
               if (axios.isAxiosError(e)) {
-                const error = e?.response?.data?.message
-                if (_includes(error, 'You must be aged')) {
-                  formikHelpers.setFieldError('holderAge', error)
-                }
-                if (error?.password) {
-                  formikHelpers.setFieldError('password', error.password)
-                  formikHelpers.setFieldError('confirmPassword', error.password)
-                }
-                if (error?.email && !onLogin) {
-                  // False will stand for outside controll
-                  setAlreadyHasUser(true)
-                  setShowModalLogin(true)
-                }
-
-                if (
-                  _includes(error, 'The cart is expired') &&
-                  !hideErrorsAlertSection
-                ) {
-                  setError(error)
+                if (e.response?.data.error === 'invalid_token') {
+                  if (isWindowDefined) {
+                    window.localStorage.removeItem('user_data')
+                    window.localStorage.removeItem('access_token')
+                    setUserExpired(true)
+                    setShowModalLogin(true)
+                  }
                 }
-
-                onRegisterError(e, values.email)
-              }
-              return
-            }
-            const profileData = await getProfileData()
-            const profileSpecifiedData = _get(profileData, 'data.data')
-            const profileDataObj = setLoggedUserData(profileSpecifiedData)
-            if (isWindowDefined) {
-              window.localStorage.setItem(
-                'user_data',
-                JSON.stringify(profileDataObj)
-              )
-            }
-
-            const checkoutBody = collectCheckoutBody(values, profileDataObj)
-            const res = await postOnCheckout(checkoutBody)
-            removeReferralKey()
-            handleSubmit(
-              values,
-              formikHelpers as FormikHelpers<any>,
-              eventId,
-              res
-            )
-          } catch (e) {
-            setLoading(false)
-            if (axios.isAxiosError(e)) {
-              if (e.response?.data.error === 'invalid_token') {
-                if (isWindowDefined) {
-                  window.localStorage.removeItem('user_data')
-                  window.localStorage.removeItem('access_token')
-                  setUserExpired(true)
-                  setShowModalLogin(true)
+                if (e.response?.data.message && !hideErrorsAlertSection) {
+                  setError(_get(e, 'response.data.message'))
                 }
+                onSubmitError(e)
               }
-              if (e.response?.data.message && !hideErrorsAlertSection) {
-                setError(_get(e, 'response.data.message'))
-              }
-              onSubmitError(e)
+            } finally {
+              setLoading(false)
             }
-          } finally {
-            setLoading(false)
-          }
-        }}
-      >
-        {(props: FormikProps<any>) => (
-          <Form onSubmit={props.handleSubmit}>
-            <ErrorFocus />
-            <LogicRunner
-              brandOptIn={brandOptIn}
-              values={props.values}
-              setStates={setStates}
-              setFieldValue={props.setFieldValue}
-              setValues={props.setValues}
-              setUserValues={setUserValues}
-              onGetStatesSuccess={onGetStatesSuccess}
-              onGetStatesError={onGetStatesError}
-              shouldFetchCountries={shouldFetchCountries}
-            />
-            <div className={`billing-info-container ${theme}`}>
-              <SnackbarAlert
-                type="error"
-                isOpen={!!error}
-                message={error || ''}
-                onClose={() => {
-                  setError(null)
-                  onErrorClose()
-                }}
+          }}
+        >
+          {(props: FormikProps<any>) => (
+            <Form onSubmit={props.handleSubmit}>
+              <ErrorFocus />
+              <LogicRunner
+                brandOptIn={brandOptIn}
+                values={props.values}
+                setStates={setStates}
+                setFieldValue={props.setFieldValue}
+                setValues={props.setValues}
+                setUserValues={setUserValues}
+                onGetStatesSuccess={onGetStatesSuccess}
+                onGetStatesError={onGetStatesError}
+                shouldFetchCountries={shouldFetchCountries}
               />
-              {!isLoggedIn && (
-                <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'
+              <div className={`billing-info-container ${theme}`}>
+                <SnackbarAlert
+                  type="error"
+                  isOpen={!!error}
+                  message={error || ''}
+                  onClose={() => {
+                    setError(null)
+                    onErrorClose()
+                  }}
+                />
+                {!isLoggedIn && (
+                  <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)
                           }
-                          alt="nodata"
-                        />
-                      </div>
-                    )}
+                        }}
+                      >
+                        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>
-                </div>
-              )}
-              {_map(dataWithUniqueIds, item => {
-                const { label, labelClassName, fields } = item
-                return (
-                  <React.Fragment key={item.uniqueId}>
-                    <p className={labelClassName}>{label}</p>
-                    {_map(fields, group => {
-                      const { groupClassname, groupItems } = group
-                      return (
-                        <React.Fragment key={group.uniqueId}>
-                          <div className={groupClassname}>
-                            {_map(
-                              groupItems.filter(el => {
-                                if (el.name === 'holderAge' && !showDOB) {
-                                  return false
-                                }
-                                if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
-                                  return false
-                                }
-                                if (el.name === 'phone') {
-                                  el.required = flagRequirePhone
-                                }
-                                return true
-                              }),
-                              element =>
-                                [
-                                  'password',
-                                  'confirmPassword',
-                                  'password-info',
-                                ].includes(element.name) &&
-                                isLoggedIn ? null : (
-                                  <React.Fragment key={element.uniqueId}>
-                                    <div className={element.className}>
-                                      {element.component ? (
-                                        element.component
-                                      ) : (
-                                        <Field
-                                          name={element.name}
-                                          label={
-                                            element.name === 'phone'
-                                              ? `${element.label}${
-                                                  flagRequirePhone
-                                                    ? ''
-                                                    : ' (optional)'
-                                                } `
-                                              : element.label
-                                          }
-                                          type={element.type}
-                                          fill={element.fill}
-                                          validate={getValidateFunctions(
-                                            element,
-                                            states,
-                                            props.values
-                                          )}
-                                          setFieldValue={props.setFieldValue}
-                                          onBlur={props.handleBlur}
-                                          component={
-                                            element.type === 'checkbox'
-                                              ? CheckboxField
-                                              : element.type === 'select'
-                                              ? SelectField
-                                              : element.type === 'phone'
-                                              ? PhoneNumberField
-                                              : element.type === 'date'
-                                              ? DatePickerField
-                                              : CustomField
-                                          }
-                                          selectOptions={
-                                            element.name === 'country'
-                                              ? countries
-                                              : element.name === 'state'
-                                              ? states
-                                              : []
-                                          }
-                                          theme={theme}
-                                          disableDropdown={
-                                            element.disableDropdown
-                                          }
-                                        />
-                                      )}
-                                    </div>
-                                  </React.Fragment>
-                                )
-                            )}
-                          </div>
-                        </React.Fragment>
-                      )
-                    })}
-                  </React.Fragment>
-                )
-              })}
-              {!_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 => {
+                )}
+                {_map(dataWithUniqueIds, item => {
+                  const { label, labelClassName, fields } = item
+                  return (
+                    <React.Fragment key={item.uniqueId}>
+                      <p className={labelClassName}>{label}</p>
+                      {_map(fields, group => {
                         const { groupClassname, groupItems } = group
                         return (
-                          <div key={group.id}>
+                          <React.Fragment key={group.uniqueId}>
                             <div className={groupClassname}>
-                              {_map(groupItems, element => (
-                                <div
-                                  className={element.className}
-                                  key={element.name}
-                                >
-                                  <Field
-                                    name={`${element.name}-${index}`}
-                                    label={element.label}
-                                    type={element.type}
-                                    component={
-                                      element.type === 'checkbox'
-                                        ? CheckboxField
-                                        : element.type === 'phone'
-                                        ? PhoneNumberField
-                                        : CustomField
-                                    }
-                                    validate={combineValidators(
-                                      element.required
-                                        ? requiredValidator
-                                        : () =>
-                                            props.errors[
-                                              `${element.name}-${index}`
-                                            ],
-                                      element.onValidate
-                                        ? element.onValidate
-                                        : () =>
-                                            props.errors[
-                                              `${element.name}-${index}`
-                                            ]
-                                    )}
-                                    disableDropdown={element.disableDropdown}
-                                  />
-                                </div>
-                              ))}
+                              {_map(
+                                groupItems.filter(el => {
+                                  if (el.name === 'holderAge' && !showDOB) {
+                                    return false
+                                  }
+                                  if (
+                                    el.name === 'ttf_opt_in' &&
+                                    hideTtfOptIn
+                                  ) {
+                                    return false
+                                  }
+                                  if (el.name === 'phone') {
+                                    el.required = flagRequirePhone
+                                  }
+                                  return true
+                                }),
+                                element =>
+                                  [
+                                    'password',
+                                    'confirmPassword',
+                                    'password-info',
+                                  ].includes(element.name) &&
+                                  isLoggedIn ? null : (
+                                    <React.Fragment key={element.uniqueId}>
+                                      <div className={element.className}>
+                                        {element.component ? (
+                                          element.component
+                                        ) : (
+                                          <Field
+                                            name={element.name}
+                                            label={
+                                              element.name === 'phone'
+                                                ? `${element.label}${
+                                                    flagRequirePhone
+                                                      ? ''
+                                                      : ' (optional)'
+                                                  } `
+                                                : element.label
+                                            }
+                                            type={element.type}
+                                            fill={element.fill}
+                                            validate={getValidateFunctions(
+                                              element,
+                                              states,
+                                              props.values
+                                            )}
+                                            setFieldValue={props.setFieldValue}
+                                            onBlur={props.handleBlur}
+                                            component={
+                                              element.type === 'checkbox'
+                                                ? CheckboxField
+                                                : element.type === 'select'
+                                                ? SelectField
+                                                : element.type === 'phone'
+                                                ? PhoneNumberField
+                                                : element.type === 'date'
+                                                ? DatePickerField
+                                                : CustomField
+                                            }
+                                            selectOptions={
+                                              element.name === 'country'
+                                                ? countries
+                                                : element.name === 'state'
+                                                ? states
+                                                : []
+                                            }
+                                            theme={theme}
+                                            disableDropdown={
+                                              element.disableDropdown
+                                            }
+                                          />
+                                        )}
+                                      </div>
+                                    </React.Fragment>
+                                  )
+                              )}
                             </div>
-                          </div>
+                          </React.Fragment>
                         )
                       })}
-                    </div>
-                  ))}
+                    </React.Fragment>
+                  )
+                })}
+                {!_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 { groupClassname, groupItems } = group
+                          return (
+                            <div key={group.id}>
+                              <div className={groupClassname}>
+                                {_map(groupItems, element => (
+                                  <div
+                                    className={element.className}
+                                    key={element.name}
+                                  >
+                                    <Field
+                                      name={`${element.name}-${index}`}
+                                      label={element.label}
+                                      type={element.type}
+                                      component={
+                                        element.type === 'checkbox'
+                                          ? CheckboxField
+                                          : element.type === 'phone'
+                                          ? PhoneNumberField
+                                          : CustomField
+                                      }
+                                      validate={combineValidators(
+                                        element.required
+                                          ? requiredValidator
+                                          : () =>
+                                              props.errors[
+                                                `${element.name}-${index}`
+                                              ],
+                                        element.onValidate
+                                          ? element.onValidate
+                                          : () =>
+                                              props.errors[
+                                                `${element.name}-${index}`
+                                              ]
+                                      )}
+                                      disableDropdown={element.disableDropdown}
+                                      setPhoneValidationIsLoading={
+                                        setPhoneValidationIsLoading
+                                      }
+                                    />
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <div className="button-container">
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    className="login-register-button"
+                    disabled={props.isSubmitting || phoneValidationIsLoading}
+                  >
+                    {props.isSubmitting ? (
+                      <CircularProgress size={26} />
+                    ) : (
+                      buttonName
+                    )}
+                  </Button>
                 </div>
-              )}
-              <div className="button-container">
-                <Button
-                  type="submit"
-                  variant="contained"
-                  className="login-register-button"
-                  disabled={props.isSubmitting}
-                >
-                  {props.isSubmitting ? (
-                    <CircularProgress size={26} />
-                  ) : (
-                    buttonName
-                  )}
-                </Button>
               </div>
-            </div>
-          </Form>
+            </Form>
+          )}
+        </Formik>
+        {showModalLogin && (
+          <LoginModal
+            logo={logo}
+            onClose={() => {
+              setShowModalLogin(false)
+            }}
+            onLogin={() => {
+              setShowModalLogin(false)
+              setUserExpired(false)
+              onLoginSuccess()
+            }}
+            alreadyHasUser={alreadyHasUser}
+            userExpired={userExpired}
+            onAuthorizeSuccess={onAuthorizeSuccess}
+            onAuthorizeError={onAuthorizeError}
+            onGetProfileDataSuccess={(data: any) => {
+              fetchCart()
+              onGetProfileDataSuccess(data)
+            }}
+            onGetProfileDataError={onGetProfileDataError}
+            showSignUpButton={showSignUpButton}
+            showForgotPasswordButton={showForgotPasswordButton}
+            onForgotPassword={() => {
+              setShowModalLogin(false)
+              setShowModalForgotPassword(true)
+            }}
+            onSignup={() => {
+              setShowModalLogin(false)
+              setShowModalSignup(true)
+            }}
+          />
         )}
-      </Formik>
-      {showModalLogin && (
-        <LoginModal
-          logo={logo}
-          onClose={() => {
-            setShowModalLogin(false)
-          }}
-          onLogin={() => {
-            setShowModalLogin(false)
-            setUserExpired(false)
-            onLoginSuccess()
-          }}
-          alreadyHasUser={alreadyHasUser}
-          userExpired={userExpired}
-          onAuthorizeSuccess={onAuthorizeSuccess}
-          onAuthorizeError={onAuthorizeError}
-          onGetProfileDataSuccess={(data: any) => {
-            fetchCart()
-            onGetProfileDataSuccess(data)
-          }}
-          onGetProfileDataError={onGetProfileDataError}
-          showSignUpButton={showSignUpButton}
-          showForgotPasswordButton={showForgotPasswordButton}
-          onForgotPassword={() => {
-            setShowModalLogin(false)
-            setShowModalForgotPassword(true)
-          }}
-          onSignup={() => {
-            setShowModalLogin(false)
-            setShowModalSignup(true)
-          }}
-        />
-      )}
-      {showModalSignup && (
-        <SignupModal
-          onClose={() => {
-            setShowModalSignup(false)
-          }}
-          onLogin={() => {
-            setShowModalSignup(false)
-            setShowModalLogin(true)
-          }}
-          onRegisterSuccess={onRegisterSuccess}
-          onRegisterError={onRegisterError}
-        />
-      )}
-      {showModalForgotPassword && (
-        <ForgotPasswordModal
-          onClose={() => {
-            setShowModalForgotPassword(false)
-          }}
-          onLogin={() => {
-            setShowModalForgotPassword(false)
-            setShowModalLogin(true)
-          }}
-          onForgotPasswordSuccess={onForgotPasswordSuccess}
-          onForgotPasswordError={onForgotPasswordError}
-        />
-      )}
-    </ThemeProvider>
-  )
-}
+        {showModalSignup && (
+          <SignupModal
+            onClose={() => {
+              setShowModalSignup(false)
+            }}
+            onLogin={() => {
+              setShowModalSignup(false)
+              setShowModalLogin(true)
+            }}
+            onRegisterSuccess={onRegisterSuccess}
+            onRegisterError={onRegisterError}
+          />
+        )}
+        {showModalForgotPassword && (
+          <ForgotPasswordModal
+            onClose={() => {
+              setShowModalForgotPassword(false)
+            }}
+            onLogin={() => {
+              setShowModalForgotPassword(false)
+              setShowModalLogin(true)
+            }}
+            onForgotPasswordSuccess={onForgotPasswordSuccess}
+            onForgotPasswordError={onForgotPasswordError}
+          />
+        )}
+      </ThemeProvider>
+    )
+  }
+)