tf-checkout-react 1.0.99 → 1.0.100-beta.2

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

@@ -1,777 +1,821 @@
-import React, { FC, useEffect, useState, useRef } from 'react'
-import { AxiosError } from 'axios'
-import {
-  Field,
-  Form,
-  Formik,
-  FormikHelpers,
-  FormikProps,
-  FormikValues,
-} from 'formik'
-import Button from '@mui/material/Button'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-import _includes from 'lodash/includes'
-import _isEqual from 'lodash/isEqual'
-import _isEmpty from 'lodash/isEmpty'
-
-import './style.css'
-import { combineValidators, requiredValidator } from '../../validators'
-import { IBillingInfoData } from '../../types'
-import {
-  getCart,
-  getCountries,
-  getProfileData,
-  handleSetAccessToken,
-  postOnCheckout,
-  register,
-  setCustomHeader,
-  getStates,
-} from '../../api'
-import { LoginModal } from '../loginModal'
-import { RegisterModal } from '../registerModal'
-import {
-  assingUniqueIds,
-  createCheckoutDataBody,
-  createRegisterFormData,
-  getInitialValues,
-  getValidateFunctions,
-  setLoggedUserData,
-} from './utils'
-import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
-import axios from 'axios'
-import { CustomField, CheckboxField, SelectField, FormikPhoneNumberField } from '../common/index'
-import { Alert, CircularProgress, ThemeOptions } from '@mui/material'
-import { nanoid } from 'nanoid'
-import { getQueryVariable } from '../../utils/getQueryVariable'
-import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import Backdrop from '@mui/material/Backdrop'
-
-export interface IBillingInfoPage {
-  data?: IBillingInfoData[];
-  ticketHoldersFields?: IBillingInfoData;
-  handleSubmit?: (
-    values: FormikValues,
-    formikHelpers: FormikHelpers<FormikValues>,
-    eventId: any,
-    res: any
-  ) => void;
-  onRegisterSuccess?: (value: {
-    accessToken: string;
-    refreshToken: string;
-  }) => void;
-  onRegisterError?: (e: AxiosError, email: string) => void;
-  onSubmitError?: (e: AxiosError) => void;
-  onGetCartSuccess?: (res: any) => void;
-  onGetCartError?: (e: AxiosError) => void;
-  onGetCountriesSuccess?: (res: any) => void;
-  onGetCountriesError?: (e: AxiosError) => void;
-  onGetStatesSuccess?: (res: any) => void;
-  onGetStatesError?: (e: AxiosError) => void;
-  onGetProfileDataSuccess?: (res: any) => void;
-  onGetProfileDataError?: (e: AxiosError) => void;
-  onAuthorizeSuccess?: () => void;
-  onAuthorizeError?: (e: AxiosError) => void;
-  onLogin?: () => void;
-  onLoginSuccess?: () => void;
-  onErrorClose?: () => void;
-  initialValues?: FormikValues;
-  buttonName?: string;
-  theme?: 'light' | 'dark';
-  isLoggedIn?: boolean;
-  accountInfoTitle?: string | JSX.Element;
-  hideLogo?: boolean;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  hideErrorsAlertSection?: boolean;
-  onSkipBillingPage: (data: any) => void;
-  skipPage?: boolean;
-  canSkipHolderNames?: boolean;
-}
-
-const LogicRunner: FC<{
-  values: any;
-  setStates: React.Dispatch<any>;
-  setFieldValue: any;
-  setValues: any;
-  setUserValues: any;
-  onGetStatesSuccess: any;
-  onGetStatesError: any;
-}> = ({
-  values,
-  setStates,
-  setFieldValue,
-  setValues,
-  setUserValues,
-  onGetStatesSuccess,
-  onGetStatesError,
-}) => {
-  const prevCountry = useRef(values.country)
-  useEffect(() => {
-    const fetchStates = async () => {
-      try {
-        const res = await getStates(values.country)
-        const mappedStates = _map(_get(res, 'data.data'), (item, key) => ({
-          label: item,
-          value: key,
-        }))
-        setStates(mappedStates)
-        if (prevCountry.current !== values.country) {
-          setFieldValue('state', mappedStates[0]?.value ?? '')
-          prevCountry.current = values.country
-        }
-        onGetStatesSuccess(res.data)
-      } catch (e) {
-        if (axios.isAxiosError(e)) {
-          onGetStatesError(e)
-        }
-      }
-    }
-    fetchStates()
-  }, [values.country, setStates, setFieldValue])
-  const userDataEncoded =
-    typeof window !== 'undefined'
-      ? window.localStorage.getItem('user_data')
-      : ''
-  useEffect(() => {
-    // set user data from local storage
-    const getStoredUserData = () => {
-      if (typeof window !== 'undefined') {
-        if (userDataEncoded) {
-          try {
-            const parsedData = JSON.parse(userDataEncoded)
-            const mappedValues = {
-              firstName: parsedData?.first_name || '',
-              lastName: parsedData?.last_name || '',
-              email: parsedData?.email || '',
-              phone: parsedData?.phone || '',
-              confirmEmail: parsedData?.email || '',
-              state: parsedData?.state || '',
-              street_address: parsedData?.street_address || '',
-              country: parsedData?.country || '1',
-              zip: parsedData?.zip || '',
-              brand_opt_in: parsedData?.brand_opt_in || '',
-              city: parsedData?.city || '',
-              confirmPassword: '',
-              password: '',
-              'holderFirstName-0': parsedData?.first_name || '',
-              'holderLastName-0': parsedData?.last_name || '',
-              'holderEmail-0': parsedData?.email || '',
-            }
-            setValues(mappedValues)
-            setUserValues(mappedValues)
-          } catch (e) {}
-        }
-      }
-    }
-    getStoredUserData()
-  }, [userDataEncoded, setValues, setUserValues])
-  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
-}: 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 [isLoggedIn, setIsLoggedIn] = useState(!!access_token)
-  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 [showModalRegister, setShowModalRegister] = 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 = _get(cartInfoData, 'optedIn', false)
-  const ttfOptIn: boolean = Boolean(_get(cartInfoData, 'ttfOptIn', false))
-  const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
-  const flagRequirePhone = getQueryVariable('phone_required') === 'true'
-
-  // 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
-      }
-    }
-  }, [dataWithUniqueIds, data])
-
-  const getQuantity = (cart: any = []) => {
-    let qty: any = 0
-    cart.forEach((item: any) => {
-      qty += +item.quantity
-    })
-    return qty
-  }
-
-  useEffect(() => {
-    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
-      setIsLoggedIn(true)
-    }
-  }, [pIsLoggedIn, isLoggedIn, access_token])
-  //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)
-        }
-      }
-    }
-    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) {
-        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])
-
-  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)
-          onSkipBillingPage(_get(res, 'data.data.attributes'))
-          setLoading(false)
-        } catch (e) {
-          onSubmitError(e)
-        }
-      } else {
-        setLoading(false)
-      }
-    }
-    collectPaymentData()
-  }, [skipPage, ticketsQuantity])
-
-
-  const collectCheckoutBody = (values: object): object => {
-    let checkoutBody = {}
-
-    // Auto collect ticket holders name when it was skipped optionally
-    if (showDOB && !showTicketHolders && canSkipHolderNames) {
-      checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-        ticketsQuantity.length,
-        values,
-        true
-      )
-    } else {
-      checkoutBody = createCheckoutDataBody(
-        ticketsQuantity.length,
-        values,
-        { emailLogged, firstNameLogged, lastNameLogged },
-        showDOB
-      )
-    }
-
-    return checkoutBody
-  }
-
-  // Displaying loader
-  if (loading) {
-    return (
-      <Backdrop sx={{ color: '#fff' }} open={true}>
-        <CircularProgress color="inherit" />
-      </Backdrop>
-    )
-  }
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <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={true}
-        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)
-              const res = await postOnCheckout(checkoutBody, access_token)
-              handleSubmit(
-                values,
-                formikHelpers as FormikHelpers<any>,
-                eventId,
-                res
-              )
-              return
-            }
-            const checkoutBodyForRegistration = createCheckoutDataBody(
-              ticketsQuantity.length,
-              values,
-              { emailLogged, firstNameLogged, lastNameLogged },
-              showDOB
-            )
-            const bodyFormData = createRegisterFormData(
-              values,
-              checkoutBodyForRegistration
-            )
-            let access_token_register = null
-            try {
-              const resRegister = await register(bodyFormData)
-              access_token_register = _get(
-                resRegister,
-                'data.data.attributes.access_token'
-              )
-              const refreshToken = _get(
-                resRegister,
-                'data.data.attributes.refresh_token'
-              )
-              handleSetAccessToken(access_token_register)
-              const tokens = {
-                accessToken: access_token_register,
-                refreshToken,
-              }
-              onRegisterSuccess(tokens)
-            } catch (e) {
-              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)
-                }
-                onRegisterError(e, values.email)
-              }
-              return
-            }
-            const profileData = await getProfileData(access_token_register)
-            const profileSpecifiedData = _get(profileData, 'data.data')
-            const profileDataObj = setLoggedUserData(profileSpecifiedData)
-            if (isWindowDefined) {
-              window.localStorage.setItem(
-                'user_data',
-                JSON.stringify(profileDataObj)
-              )
-            }
-
-            const checkoutBody = collectCheckoutBody(values)
-            const res = await postOnCheckout(
-              checkoutBody,
-              access_token_register
-            )
-            handleSubmit(
-              values,
-              formikHelpers as FormikHelpers<any>,
-              eventId,
-              res
-            )
-          } catch (e) {
-            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) {
-                if (typeof document !== undefined) {
-                  document.body.scrollTop = document.documentElement.scrollTop = 0
-                }
-                setError(_get(e, 'response.data.message'))
-              }
-              onSubmitError(e)
-            }
-          }
-        }}
-      >
-        {(props: FormikProps<any>) => (
-          <Form onSubmit={props.handleSubmit}>
-            <ErrorFocus />
-            <LogicRunner
-              values={props.values}
-              setStates={setStates}
-              setFieldValue={props.setFieldValue}
-              setValues={props.setValues}
-              setUserValues={setUserValues}
-              onGetStatesSuccess={onGetStatesSuccess}
-              onGetStatesError={onGetStatesError}
-            />
-            <div className={`billing-info-container ${theme}`}>
-              {error && !hideErrorsAlertSection && (
-                <Alert severity="error" onClose={onErrorClose} variant="filled">
-                  {error}
-                </Alert>
-              )}
-              {!isLoggedIn && (
-                <div className="account-actions-block">
-                  <div>{accountInfoTitle}</div>
-                  <div>Login & skip ahead:</div>
-                  <div className="login-block">
-                    <button
-                      className="login-register-button"
-                      type="button"
-                      onClick={() => {
-                        // If outside login needed to skip package login functionallity
-                        if (onLogin) {
-                          onLogin()
-                        } else {
-                          setShowModalLogin(true)
-                        }
-                      }}
-                    >
-                      Login
-                    </button>
-                    {!hideLogo && (
-                      <div className="logo-image-container">
-                        <img
-                          src={
-                            theme === 'dark'
-                              ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
-                              : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
-                          }
-                          alt="nodata"
-                        />
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-              {_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}
-                                          validate={getValidateFunctions(
-                                            element,
-                                            states,
-                                            props.values
-                                          )}
-                                          setFieldValue={props.setFieldValue}
-                                          onBlur={props.handleBlur}
-                                          component={
-                                            element.type === 'checkbox'
-                                              ? CheckboxField
-                                              : element.type === 'select'
-                                              ? SelectField
-                                              : element.type === 'phone'
-                                              ? FormikPhoneNumberField
-                                              : CustomField
-                                          }
-                                          selectOptions={
-                                            element.name === 'country'
-                                              ? countries
-                                              : element.name === 'state'
-                                              ? states
-                                              : []
-                                          }
-                                          theme={theme}
-                                        />
-                                      )}
-                                    </div>
-                                  </React.Fragment>
-                                )
-                            )}
-                          </div>
-                        </React.Fragment>
-                      )
-                    })}
-                  </React.Fragment>
-                )
-              })}
-              {!_isEmpty(ticketHoldersFields.fields) && (
-                <div className="ticket-holders-fields">
-                  <p>{ticketHoldersFields.label}</p>
-                  {_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}
-                                    required={true}
-                                    component={
-                                      element.type === 'checkbox'
-                                        ? CheckboxField
-                                        : CustomField
-                                    }
-                                    validate={combineValidators(
-                                      element.required
-                                        ? requiredValidator
-                                        : () => {},
-                                      element.onValidate
-                                        ? element.onValidate
-                                        : () => {}
-                                    )}
-                                  />
-                                </div>
-                              ))}
-                            </div>
-                          </div>
-                        )
-                      })}
-                    </div>
-                  ))}
-                </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>
-        )}
-      </Formik>
-      {showModalLogin && (
-        <LoginModal
-          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}
-        />
-      )}
-      {showModalRegister && (
-        <RegisterModal
-          onClose={() => {
-            setShowModalRegister(false)
-          }}
-          onRegister={() => {
-            setShowModalRegister(false)
-          }}
-          onGetProfileDataSuccess={(data: any) => {
-            fetchCart()
-            onGetProfileDataSuccess(data)
-          }}
-          onGetProfileDataError={onGetProfileDataError}
-        />
-      )}
-    </ThemeProvider>
-  )
-}
+import React, { FC, useEffect, useState, useRef } from 'react'
+import { AxiosError } from 'axios'
+import {
+  Field,
+  Form,
+  Formik,
+  FormikHelpers,
+  FormikProps,
+  FormikValues,
+} from 'formik'
+import Button from '@mui/material/Button'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+import _includes from 'lodash/includes'
+import _isEqual from 'lodash/isEqual'
+import _isEmpty from 'lodash/isEmpty'
+
+import './style.css'
+import { combineValidators, requiredValidator } from '../../validators'
+import { IBillingInfoData } from '../../types'
+import {
+  getCart,
+  getCountries,
+  getProfileData,
+  postOnCheckout,
+  register,
+  setCustomHeader,
+  getStates,
+} from '../../api'
+import { LoginModal } from '../loginModal'
+import { RegisterModal } from '../registerModal'
+import {
+  assingUniqueIds,
+  createCheckoutDataBody,
+  createRegisterFormData,
+  getInitialValues,
+  getValidateFunctions,
+  setLoggedUserData,
+} from './utils'
+import { createCheckoutDataBodyWithDefaultHolder, getCookieByName } from '../../utils'
+import axios from 'axios'
+import { CustomField, CheckboxField, SelectField, FormikPhoneNumberField } from '../common/index'
+import { CircularProgress, ThemeOptions } from '@mui/material'
+import { nanoid } from 'nanoid'
+import { getQueryVariable } from '../../utils/getQueryVariable'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
+import Backdrop from '@mui/material/Backdrop'
+import TimerWidget from '../timerWidget'
+import SnackbarAlert from '../common/SnackbarAlert'
+import { DatePickerField } from '../common/DatePickerField'
+
+export interface IBillingInfoPage {
+  data?: IBillingInfoData[];
+  ticketHoldersFields?: IBillingInfoData;
+  handleSubmit?: (
+    values: FormikValues,
+    formikHelpers: FormikHelpers<FormikValues>,
+    eventId: any,
+    res: any
+  ) => void;
+  onRegisterSuccess?: (value: any) => void;
+  onRegisterError?: (e: AxiosError, email: string) => void;
+  onSubmitError?: (e: AxiosError) => void;
+  onGetCartSuccess?: (res: any) => void;
+  onGetCartError?: (e: AxiosError) => void;
+  onGetCountriesSuccess?: (res: any) => void;
+  onGetCountriesError?: (e: AxiosError) => void;
+  onGetStatesSuccess?: (res: any) => void;
+  onGetStatesError?: (e: AxiosError) => void;
+  onGetProfileDataSuccess?: (res: any) => void;
+  onGetProfileDataError?: (e: AxiosError) => void;
+  onAuthorizeSuccess?: () => void;
+  onAuthorizeError?: (e: AxiosError) => void;
+  onLogin?: () => void;
+  onLoginSuccess?: () => void;
+  onErrorClose?: () => void;
+  initialValues?: FormikValues;
+  buttonName?: string;
+  theme?: 'light' | 'dark';
+  isLoggedIn?: boolean;
+  accountInfoTitle?: string | JSX.Element;
+  hideLogo?: boolean;
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
+  hideErrorsAlertSection?: boolean;
+  onSkipBillingPage: (data: any) => void;
+  skipPage?: boolean;
+  canSkipHolderNames?: boolean;
+  shouldFetchCountries?: boolean;
+  onCountdownFinish?: () => void;
+  enableTimer?: boolean;
+}
+
+const LogicRunner: FC<{
+  values: any;
+  setStates: React.Dispatch<any>;
+  setFieldValue: any;
+  setValues: any;
+  setUserValues: any;
+  onGetStatesSuccess: any;
+  onGetStatesError: any;
+  shouldFetchCountries: boolean;
+}> = ({
+  values,
+  setStates,
+  setFieldValue,
+  setValues,
+  setUserValues,
+  onGetStatesSuccess,
+  onGetStatesError,
+  shouldFetchCountries,
+}) => {
+  const prevCountry = useRef(values.country)
+  useEffect(() => {
+    const fetchStates = async () => {
+      try {
+        const res = await getStates(values.country)
+        const mappedStates = _map(_get(res, 'data.data'), (item, key) => ({
+          label: item,
+          value: key,
+        }))
+        setStates(mappedStates)
+        if (prevCountry.current !== values.country) {
+          setFieldValue('state', mappedStates[0]?.value ?? '')
+          prevCountry.current = values.country
+        }
+        onGetStatesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetStatesError(e)
+        }
+      }
+    }
+    shouldFetchCountries && fetchStates()
+  }, [values.country, setStates, setFieldValue])
+  const userDataEncoded =
+    typeof window !== 'undefined'
+      ? window.localStorage.getItem('user_data')
+      : ''
+  useEffect(() => {
+    // set user data from local storage
+    const getStoredUserData = () => {
+      if (typeof window !== 'undefined') {
+        if (userDataEncoded) {
+          try {
+            const parsedData = JSON.parse(userDataEncoded)
+            const mappedValues = {
+              firstName: parsedData?.first_name || parsedData?.firstName || '',
+              lastName: parsedData?.last_name || parsedData?.lastName || '',
+              email: parsedData?.email || '',
+              phone: parsedData?.phone || '',
+              confirmEmail: parsedData?.email || '',
+              state: parsedData?.state || '',
+              street_address: parsedData?.street_address || '',
+              country: parsedData?.country || '1',
+              zip: parsedData?.zip || '',
+              brand_opt_in: parsedData?.brand_opt_in || false,
+              city: parsedData?.city || '',
+              confirmPassword: '',
+              password: '',
+              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+              'holderEmail-0': parsedData?.email || '',
+            }
+            setValues({ ...values, ...mappedValues })
+            setUserValues(mappedValues)
+          } catch (e) {}
+        }
+      }
+    }
+    getStoredUserData()
+  }, [userDataEncoded, setValues, setUserValues])
+  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,
+  shouldFetchCountries = true,
+  onCountdownFinish = () => {},
+  enableTimer = 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 [showModalRegister, setShowModalRegister] = 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 = _get(cartInfoData, 'optedIn', false)
+  const ttfOptIn: boolean = 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)
+
+  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])
+
+  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))
+    }
+  }, [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 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)
+      }
+    }
+  }
+  useEffect(() => {
+    fetchUserData(access_token)
+  }, [access_token, isLoggedIn])
+
+  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'))
+          setLoading(false)
+        } catch (e) {
+          onSubmitError(e)
+        }
+      } else {
+        setLoading(false)
+      }
+    }
+    collectPaymentData()
+  }, [skipPage, ticketsQuantity])
+
+
+  const collectCheckoutBody = (values: object, profileData?: any): object => {
+    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
+      )
+    }
+
+    return checkoutBody
+  }
+
+  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 = '/'
+    }
+  }
+
+  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
+        )}
+        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, 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)
+            }
+          } finally {
+            setLoading(false)
+          }
+        }}
+      >
+        {(props: FormikProps<any>) => (
+          <Form onSubmit={props.handleSubmit}>
+            <ErrorFocus />
+            <LogicRunner
+              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()
+                }}
+              />
+              {!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'
+                          }
+                          alt="nodata"
+                        />
+                      </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}
+                                          validate={getValidateFunctions(
+                                            element,
+                                            states,
+                                            props.values
+                                          )}
+                                          setFieldValue={props.setFieldValue}
+                                          onBlur={props.handleBlur}
+                                          component={
+                                            element.type === 'checkbox'
+                                              ? CheckboxField
+                                              : element.type === 'select'
+                                                ? SelectField
+                                                : element.type === 'phone'
+                                                  ? FormikPhoneNumberField
+                                                  : element.type === 'date'
+                                                    ? DatePickerField
+                                                    : CustomField
+                                          }
+                                          selectOptions={
+                                            element.name === 'country'
+                                              ? countries
+                                              : element.name === 'state'
+                                                ? states
+                                                : []
+                                          }
+                                          theme={theme}
+                                        />
+                                      )}
+                                    </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 => {
+                        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}
+                                    required={true}
+                                    component={
+                                      element.type === 'checkbox'
+                                        ? CheckboxField
+                                        : CustomField
+                                    }
+                                    validate={combineValidators(
+                                      element.required
+                                        ? requiredValidator
+                                        : () => {},
+                                      element.onValidate
+                                        ? element.onValidate
+                                        : () => {}
+                                    )}
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </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>
+        )}
+      </Formik>
+      {showModalLogin && (
+        <LoginModal
+          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}
+        />
+      )}
+      {showModalRegister && (
+        <RegisterModal
+          onClose={() => {
+            setShowModalRegister(false)
+          }}
+          onRegister={() => {
+            setShowModalRegister(false)
+          }}
+          onGetProfileDataSuccess={(data: any) => {
+            fetchCart()
+            onGetProfileDataSuccess(data)
+          }}
+          onGetProfileDataError={onGetProfileDataError}
+        />
+      )}
+    </ThemeProvider>
+  )
+}