tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
 import { CircularProgress, ThemeOptions } from '@mui/material'
@@ -16,19 +17,21 @@ import _isEmpty from 'lodash/isEmpty'
 import _isEqual from 'lodash/isEqual'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
-import React, { FC, useEffect, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 
 import {
   AttributesConfig,
   getCart,
   getCheckoutPageConfigs,
   getCountries,
+  getPaymentData,
   getProfileData,
   getStates,
   postOnCheckout,
   register,
   setCustomHeader,
 } from '../../api'
+import { updateCheckout } from '../../api/checkout'
 import { withCustomFields } from '../../hoc'
 import { usePixel } from '../../hooks/usePixel'
 import { IBillingInfoData } from '../../types'
@@ -41,21 +44,26 @@ import {
 } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { AddonsContainter, IAddonContainterProps } from '../addonsContainer'
+import SimpleAddonsContainer from '../addonsContainer/SimpleAddonsContainer'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import { LoginModal } from '../loginModal'
+import { IPaymentPage, PaymentContainer } from '../paymentContainer'
+import { handlePaymentMiddleWare } from '../paymentContainer/handlePayment'
 import { SignupModal } from '../signupModal'
 import TimerWidget from '../timerWidget'
 import {
   assingUniqueIds,
   createCheckoutDataBody,
   createRegisterFormData,
+  filterBillingInfoFields,
   getFieldComponent,
   getFieldLabel,
   getInitialValues,
   getValidateFunctions,
   ICheckoutBody,
+  renderComponentWithProps,
 } from './utils'
 
 export interface IBillingInfoPage {
@@ -65,7 +73,9 @@ export interface IBillingInfoPage {
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
     eventId: any,
-    res: any
+    res: any,
+    checkoutUpdateResponse?: any,
+    paymentResponse?: any
   ) => void;
   onRegisterSuccess?: (value: any) => void;
   onRegisterError?: (e: AxiosError, email: string) => void;
@@ -83,8 +93,11 @@ export interface IBillingInfoPage {
   onLogin?: () => void;
   onLoginSuccess?: () => void;
   onErrorClose?: () => void;
+  onCheckoutUpdateSuccess?: (res: any) => void;
+  onCheckoutUpdateError?: (e: AxiosError) => void;
   initialValues?: FormikValues;
   buttonName?: string;
+  freeOrderButtonName?: string;
   theme?: 'light' | 'dark';
   isLoggedIn?: boolean;
   accountInfoTitle?: string | JSX.Element;
@@ -113,11 +126,15 @@ export interface IBillingInfoPage {
   onPendingVerification?: () => void;
   includeAddons?: boolean;
   addonsProps?: IAddonContainterProps;
+  addOnDataWithCustomFields?: any;
+  isSinglePageCheckout?: boolean;
+  paymentProps?: Partial<IPaymentPage>;
 }
 
 const LogicRunner: FC<{
   brandOptIn?: boolean;
   values: any;
+  errors: any;
   setStates: React.Dispatch<any>;
   setFieldValue: any;
   setValues: any;
@@ -136,72 +153,72 @@ const LogicRunner: FC<{
   shouldFetchCountries,
   brandOptIn,
 }) => {
-    const prevCountry = useRef(values.country)
-    useEffect(() => {
-      const fetchStates = async () => {
-        try {
-          const res = await getStates(values.country)
-          const mappedStates = _map(res.data, (item, key) => ({
-            label: item,
-            value: key,
-          }))
-          setStates(mappedStates)
-          if (prevCountry.current !== values.country) {
-            const stateExists = mappedStates.find(
-              state => state.value === values.state
-            )?.value
-            setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
-            prevCountry.current = values.country
-          }
-          onGetStatesSuccess(res.data)
-        } catch (e) {
-          if (axios.isAxiosError(e)) {
-            onGetStatesError(e)
-          }
+  const prevCountry = useRef(values.country)
+  useEffect(() => {
+    const fetchStates = async () => {
+      try {
+        const res = await getStates(values.country)
+        const mappedStates = _map(res.data, (item, key) => ({
+          label: item,
+          value: key,
+        }))
+        setStates(mappedStates)
+        if (prevCountry.current !== values.country) {
+          const stateExists = mappedStates.find(
+            state => state.value === values.state
+          )?.value
+          setFieldValue('state', stateExists ?? mappedStates[0]?.value ?? '')
+          prevCountry.current = values.country
+        }
+        onGetStatesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetStatesError(e)
         }
       }
-      shouldFetchCountries && fetchStates()
-    }, [values.country, setStates, setFieldValue])
-    const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
-    useEffect(() => {
-      // set user data from local storage
-      const getStoredUserData = () => {
-        if (isBrowser) {
-          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: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
-                city: parsedData?.city || '',
-                confirmPassword: '',
-                password: '',
-                'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
-                'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
-                'holderEmail-0': parsedData?.email || '',
-              }
+    }
+    shouldFetchCountries && fetchStates()
+  }, [values.country, setStates, setFieldValue])
+  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
+  useEffect(() => {
+    // set user data from local storage
+    const getStoredUserData = () => {
+      if (isBrowser) {
+        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: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
+              city: parsedData?.city || '',
+              confirmPassword: '',
+              password: '',
+              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
+              'holderEmail-0': parsedData?.email || '',
+            }
 
-              const extraDataJSON = window.localStorage.getItem('extraData')
-              const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
+            const extraDataJSON = window.localStorage.getItem('extraData')
+            const extraData = extraDataJSON ? JSON.parse(extraDataJSON) : null
 
-              setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
-              setUserValues(mappedValues)
-            } catch (e) { }
-          }
+            setValues({ ...values, ...mappedValues, ...(extraData ?? {}) })
+            setUserValues(mappedValues)
+          } catch (e) {}
         }
       }
-      getStoredUserData()
-    }, [userDataEncoded, setValues, setUserValues])
-    return null
-  }
+    }
+    getStoredUserData()
+  }, [userDataEncoded, setValues, setUserValues, brandOptIn])
+  return null
+}
 
 const BillingInfoContainer = React.memo(
   ({
@@ -212,6 +229,7 @@ const BillingInfoContainer = React.memo(
     },
     initialValues = {},
     buttonName = 'Submit',
+    freeOrderButtonName = 'Complete Registration',
     handleSubmit = _identity,
     theme = 'light',
     onRegisterSuccess = _identity,
@@ -227,6 +245,8 @@ const BillingInfoContainer = React.memo(
     onGetProfileDataError = _identity,
     onLogin,
     onLoginSuccess = _identity,
+    onCheckoutUpdateSuccess = _identity,
+    onCheckoutUpdateError = _identity,
     isLoggedIn: pIsLoggedIn = false,
     accountInfoTitle = '',
     hideLogo,
@@ -254,12 +274,18 @@ const BillingInfoContainer = React.memo(
     onGetCheckoutConfigsError = _identity,
     includeAddons = false,
     addonsProps,
+    addOnDataWithCustomFields,
+    isSinglePageCheckout = false,
+    paymentProps = {},
   }: IBillingInfoPage) => {
     const [extraData, setExtraData] = useState(null)
     const [isConfigLoading, setIsConfigLoading] = useState(true)
     const [configs, setConfigs] = useState<null | AttributesConfig>(null)
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
+    const addressRef = useRef<any>(null)
+    const cardRef = useRef<any>(null)
+    const stripeRef = useRef<any>(null)
 
     useEffect(() => {
       if (isBrowser) {
@@ -285,7 +311,7 @@ const BillingInfoContainer = React.memo(
     const defaultCountry = isBrowser ? window.localStorage.getItem('eventCountry') : ''
     const userData =
       isBrowser && window.localStorage.getItem('user_data')
-        ? JSON.parse(window.localStorage.getItem('user_data') || '')
+        ? JSON.parse(window.localStorage.getItem('user_data') || '{}')
         : {}
     const [dataWithUniqueIds, setDataWithUniqueIds] = useState<IBillingInfoData[]>(
       assingUniqueIds(data)
@@ -319,7 +345,7 @@ const BillingInfoContainer = React.memo(
     const [loading, setLoading] = useState(true)
     const [cardLoading, setCardLoading] = useState(false)
     const [isCountriesLoading, setIsCountriesLoading] = useState(true)
-    const [error, setError] = useState(null)
+    const [error, setError] = useState<string | null>(null)
     const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
     const emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '')
     const firstNameLogged =
@@ -357,15 +383,19 @@ const BillingInfoContainer = React.memo(
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
-    const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
-
-    // Get prevProps
+    const [pendingVerificationMessage, setPendingVerificationMessage] = useState<string>()
+    const [reviewData, setReviewData] = useState<any>({})
+    const [checkoutData, setCheckoutData] = useState<any>({})
+    const [checkoutUpdateData, setCheckoutUpdateData] = useState<any>({})
     const prevData = useRef(data)
 
-    const addAddOnsInAttributes = (checkoutBody: any) => {
+    const addAddOnsInAttributes = useCallback((checkoutBody: any) => {
       const selectedAddOns = window.localStorage.getItem('add_ons') || '{}'
       checkoutBody.attributes.add_ons = JSON.parse(selectedAddOns)
-    }
+    }, [])
+    const [singleCheckoutAddons, setSingleCheckoutAddOns] = useState<any>({})
+
+    const orderIsFree = !Number(checkoutData?.total)
 
     useEffect(() => {
       const hasUniqueId = _get(dataWithUniqueIds, '[0].uniqueId')
@@ -378,13 +408,13 @@ const BillingInfoContainer = React.memo(
       }
     }, [dataWithUniqueIds, data])
 
-    const getQuantity = (cart: any = []) => {
+    const getQuantity = useCallback((cart: any = []) => {
       let qty = 0
       cart.forEach((item: any) => {
         qty += +item.quantity
       })
       return qty
-    }
+    }, [])
 
     useEffect(() => {
       if (pIsLoggedIn !== isLoggedIn || xtfCookie) {
@@ -412,10 +442,22 @@ const BillingInfoContainer = React.memo(
       shouldFetchCountries && fetchCountries()
       fetchCart()
 
+      // Initialize checkout with event_id on first load
+      if (isSinglePageCheckout && eventId) {
+        updateCheckoutWithAddOns()
+      }
+
       return () => {
         isBrowser && localStorage.removeItem('selectedTicketsQuantity')
       }
-    }, [])
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      eventId,
+      isSinglePageCheckout,
+      shouldFetchCountries,
+      onGetCountriesSuccess,
+      onGetCountriesError,
+    ])
 
     // fetch cart data
     const fetchCart = async () => {
@@ -464,6 +506,29 @@ const BillingInfoContainer = React.memo(
       fetchCart()
     }, [isLoggedIn])
 
+    useEffect(() => {
+      const fetchCheckoutUpdate = async () => {
+        if (!eventId) return
+
+        try {
+          const checkoutUpdateResponse = await updateCheckout({
+            attributes: {
+              event_id: eventId,
+            },
+          })
+
+          if (checkoutUpdateResponse.success) {
+            const checkoutAttributes = checkoutUpdateResponse.data.attributes
+            setCheckoutUpdateData(checkoutAttributes)
+          }
+        } catch (error) {
+          console.error('Failed to fetch checkout update:', error)
+        }
+      }
+
+      fetchCheckoutUpdate()
+    }, [eventId])
+
     useEffect(() => {
       const collectPaymentData = async () => {
         if (
@@ -489,9 +554,9 @@ const BillingInfoContainer = React.memo(
             onSkipBillingPage(checkoutResponse.data.attributes)
             setLoading(false)
           } catch (e) {
-            onSubmitError(e)
-            if (e.response?.data?.data?.hasUnverifiedOrder) {
-              setPendingVerificationMessage(e.response?.data?.message)
+            onSubmitError(e as AxiosError)
+            if (_get(e, 'response.data.data.hasUnverifiedOrder')) {
+              setPendingVerificationMessage(_get(e, 'response.data.message'))
             }
           }
         } else {
@@ -501,90 +566,171 @@ const BillingInfoContainer = React.memo(
       collectPaymentData()
     }, [skipPage, ticketsQuantity])
 
-    const collectCheckoutBody = (
-      values: Record<string, any>,
-      profileData?: any
-    ): Record<string, any> => {
-      let checkoutBody = {} as ICheckoutBody
-
-      // Auto collect ticket holders name when it was skipped optionally
-      if (showDOB && !showTicketHolders && canSkipHolderNames) {
-        checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-          ticketsQuantity.length,
-          values,
-          true,
-          { emailLogged, firstNameLogged, lastNameLogged }
-        )
-      } 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
-        )
-      }
+    const collectCheckoutBody = useCallback(
+      (values: Record<string, any>, profileData?: any): Record<string, any> => {
+        let checkoutBody = {} as ICheckoutBody
 
-      // Collect data_capture for Order Custom Fields
-      const data_capture: Record<string, any> = {}
-      _forEach(customFieldsOrderKeys, (key: string) => {
-        data_capture[key] = values[key]
+        // 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
+          )
+        }
 
-        // Delete from values list
-        delete checkoutBody.attributes[key]
-      })
+        // Collect data_capture for Order Custom Fields
+        const data_capture: Record<string, any> = {}
+        _forEach(customFieldsOrderKeys, (key: string) => {
+          data_capture[key] = values[key]
 
-      // Temp solution for hardcoded data capture values, to be deleted in the future
-      const captureKeys = [
-        'businessCategory',
-        'company',
-        'instagram',
-        'jobTitle',
-        'wallet_address',
-      ]
+          // Delete from values list
+          delete checkoutBody.attributes[key]
+        })
 
-      captureKeys.forEach(key => {
-        const path = `data_capture.${key}`
-        const value = _get(values, path, '')
+        // Temp solution for hardcoded data capture values, to be deleted in the future
+        const captureKeys = [
+          'businessCategory',
+          'company',
+          'instagram',
+          'jobTitle',
+          'wallet_address',
+        ]
 
-        if (value !== '') {
-          data_capture[key] = value
-        }
+        captureKeys.forEach(key => {
+          const path = `data_capture.${key}`
+          const value = _get(values, path, '')
 
-        const attributeKey = `data_capture[${key}]`
-        delete checkoutBody.attributes?.[attributeKey]
-      })
+          if (value !== '') {
+            data_capture[key] = value
+          }
+
+          const attributeKey = `data_capture[${key}]`
+          delete checkoutBody.attributes?.[attributeKey]
+        })
+
+        // Collect data_capture for Ticket Holders Fields
+        _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
+          const holderDataCapture: Record<string, any> = {}
+
+          _forEach(customFieldsTicketHolderKeys, customFieldKey => {
+            const customFieldHolderName = `${customFieldKey}-${holderIndex}`
+            const customFieldHolderKey = values[customFieldHolderName] || ''
+            holderDataCapture[customFieldKey] = customFieldHolderKey
+
+            // Delete holder specific value from values list
+            delete checkoutBody.attributes[customFieldHolderName]
+          })
+
+          // Assign Ticket Holder data_capture final value
+          if (!_isEmpty(holderDataCapture)) {
+            holder.ticket_data_capture = holderDataCapture
+          }
+        })
 
-      // Collect data_capture for Ticket Holders Fields
-      _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
-        const holderDataCapture: Record<string, any> = {}
+        return { attributes: { ...checkoutBody.attributes, data_capture } }
+      },
+      [
+        showDOB,
+        showTicketHolders,
+        canSkipHolderNames,
+        customFieldsOrderKeys,
+        ticketsQuantity.length,
+        emailLogged,
+        firstNameLogged,
+        lastNameLogged,
+        customFieldsTicketHolderKeys,
+      ]
+    )
+
+    const removeReferralKey = useCallback(() => {
+      localStorage.removeItem('referral_key')
+    }, [])
 
-        _forEach(customFieldsTicketHolderKeys, customFieldKey => {
-          const customFieldHolderName = `${customFieldKey}-${holderIndex}`
-          const customFieldHolderKey = values[customFieldHolderName] || ''
-          holderDataCapture[customFieldKey] = customFieldHolderKey
+    const updateCheckoutWithAddOns = useCallback(
+      async (addOns: { [key: string]: number } = {}) => {
+        if (!isSinglePageCheckout) return
 
-          // Delete holder specific value from values list
-          delete checkoutBody.attributes[customFieldHolderName]
+        const mergedAddOns = { ...singleCheckoutAddons }
+
+        // Update existing entries and add new ones
+        Object.entries(addOns).forEach(([key, value]) => {
+          const amount = Number(value)
+          if (amount) {
+            mergedAddOns[key] = amount
+          } else {
+            delete mergedAddOns[key]
+          }
         })
 
-        // Assign Ticket Holder data_capture final value
-        if (!_isEmpty(holderDataCapture)) {
-          holder.ticket_data_capture = holderDataCapture
+        try {
+          const checkoutUpdateData = {
+            attributes: {
+              event_id: eventId,
+              add_ons: mergedAddOns,
+            },
+          }
+
+          const checkoutResponse = await updateCheckout(checkoutUpdateData)
+
+          if (checkoutResponse.success) {
+            const checkoutDataObj = _get(
+              checkoutResponse,
+              'data.attributes.cart_price_breakdown',
+              {}
+            )
+            setCheckoutData(checkoutDataObj)
+            onCheckoutUpdateSuccess(checkoutResponse.data.attributes)
+            setSingleCheckoutAddOns(mergedAddOns)
+          }
+        } catch (error) {
+          const errorMessage = _get(
+            error,
+            'response.data.message',
+            'Failed to update add-ons'
+          )
+          setError(errorMessage)
+          onCheckoutUpdateError(error as AxiosError)
         }
-      })
+      },
+      [eventId, isSinglePageCheckout, onCheckoutUpdateError, onCheckoutUpdateSuccess]
+    )
 
-      return { attributes: { ...checkoutBody.attributes, data_capture } }
-    }
+    const handleAddOnSelect = useCallback(
+      async (selectedAddOns: { [key: string]: number }) => {
+        await updateCheckoutWithAddOns(selectedAddOns)
+      },
+      [updateCheckoutWithAddOns]
+    )
 
-    const removeReferralKey = () => {
-      localStorage.removeItem('referral_key')
-    }
+    const onAddOnSelect = useCallback(
+      (id: string, value: string, addon: any) => {
+        const quantity = parseInt(value) || 0
+        const addonId = addon.id || id
+
+        // Create updated add-ons object
+        const updatedAddOns: { [key: string]: number } = {}
+        updatedAddOns[addonId] = quantity
+
+        // Call handleAddOnSelect with the updated addons object
+        handleAddOnSelect(updatedAddOns)
+      },
+      [handleAddOnSelect]
+    )
 
     if (loading || (enableTimer && !expirationTime && isBrowser)) {
       if (expirationTime === 0) {
@@ -602,6 +748,13 @@ const BillingInfoContainer = React.memo(
     if (isTable) {
       dataWithUniqueIds[0].label = 'Get Your Tables'
     }
+
+    const stripePublishableKey =
+      reviewData?.payment_method?.stripe_publishable_key ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.apiKey
+    const stripeAccountId = reviewData?.payment_method?.stripe_connected_account ||
+      checkoutUpdateData?.additional_payment_information?.basic_config?.accountId
+
     return (
       <ThemeProvider theme={themeMui}>
         {(loading || cardLoading || isCountriesLoading || isConfigLoading) && (
@@ -616,6 +769,7 @@ const BillingInfoContainer = React.memo(
           <TimerWidget
             expires_at={expirationTime}
             onCountdownFinish={onCountdownFinish}
+            container={isSinglePageCheckout ? 'body' : ''}
           />
         )}
         {!isCountriesLoading && !isConfigLoading && (
@@ -625,7 +779,7 @@ const BillingInfoContainer = React.memo(
               {
                 country: initialCountry,
                 state: _get(userData, 'stateId', '') || '1',
-                brand_opt_in: optedInFieldValue,
+                brand_opt_in: Boolean(optedInFieldValue),
                 ttf_opt_in: ttfOptIn,
                 data_capture: {
                   instagram: _get(extraData, 'data_capture.instagram', ''),
@@ -642,6 +796,31 @@ const BillingInfoContainer = React.memo(
             enableReinitialize={false}
             onSubmit={async (values, formikHelpers) => {
               try {
+                if ((!cardRef.current || !stripeRef.current) && !orderIsFree) {
+                  setError('Fill in the card details')
+                  return
+                }
+
+                let stripePaymentMethod = null
+
+                if (isSinglePageCheckout && !orderIsFree) {
+                  const card = cardRef.current
+                  const stripePaymentMethodResponse = await stripeRef.current.createPaymentMethod({
+                    type: 'card',
+                    card: card || { token: '' },
+                    billing_details: {
+                      address: addressRef.current,
+                    },
+                  })
+
+                  if (stripePaymentMethodResponse?.error) {
+                    setError('' + stripePaymentMethodResponse?.error?.message)
+                    return
+                  }
+
+                  stripePaymentMethod = stripePaymentMethodResponse.paymentMethod
+                }
+
                 if (isBrowser) {
                   window.localStorage.setItem(
                     'extraData',
@@ -659,124 +838,217 @@ const BillingInfoContainer = React.memo(
                     })
                   )
                 }
-                if (isLoggedIn) {
-                  const checkoutBody = collectCheckoutBody(values, userData)
-
-                  if (isBrowser) {
-                    addAddOnsInAttributes(checkoutBody)
-                  }
 
-                  const checkoutResponse = await postOnCheckout(
-                    checkoutBody,
+                if (!isLoggedIn) {
+                  const checkoutBodyForRegistration = createCheckoutDataBody(
+                    ticketsQuantity.length,
+                    values,
+                    { emailLogged, firstNameLogged, lastNameLogged },
+                    showDOB
+                  )
+                  const bodyFormData = createRegisterFormData(
+                    values,
+                    checkoutBodyForRegistration,
                     flagFreeTicket
                   )
-                  removeReferralKey()
-                  // After checkout is successful recover updated profile and store it on local storage if needed
-                  if (isBrowser) {
-                    const updatedUserData = await getProfileData()
-                    const profileSpecifiedData = _get(updatedUserData, 'data')
-                    const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                    window.localStorage.setItem(
-                      'user_data',
-                      JSON.stringify(profileDataObj)
+                  try {
+                    setLoading(true)
+                    const resRegister = await register(bodyFormData)
+                    const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
+                    const refreshToken = _get(
+                      resRegister,
+                      'data.attributes.refresh_token'
                     )
-                  }
+                    const userProfile = _get(resRegister, 'data.attributes.user_profile')
 
-                  handleSubmit(
-                    values,
-                    formikHelpers as FormikHelpers<any>,
-                    eventId,
-                    checkoutResponse
-                  )
-                  return
-                }
-                const checkoutBodyForRegistration = createCheckoutDataBody(
-                  ticketsQuantity.length,
-                  values,
-                  { emailLogged, firstNameLogged, lastNameLogged },
-                  showDOB
-                )
-                const bodyFormData = createRegisterFormData(
-                  values,
-                  checkoutBodyForRegistration,
-                  flagFreeTicket
-                )
-                try {
-                  setLoading(true)
-                  const resRegister = await register(bodyFormData)
-                  const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-                  const refreshToken = _get(resRegister, 'data.attributes.refresh_token')
-                  const userProfile = _get(resRegister, 'data.attributes.user_profile')
-
-                  setIsNewUser(true)
-                  onRegisterSuccess({
-                    xtfCookie,
-                    refreshToken,
-                    userProfile,
-                  })
-                } catch (e) {
-                  setLoading(false)
-
-                  if (e.response?.data?.data?.hasUnverifiedOrder) {
-                    setPendingVerificationMessage(e.response?.data?.message)
-                  } else 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)
-                    }
+                    setIsNewUser(true)
+                    onRegisterSuccess({
+                      xtfCookie,
+                      refreshToken,
+                      userProfile,
+                    })
+                  } catch (e) {
+                    setLoading(false)
+                    const hasUnverifiedOrder = _get(
+                      e,
+                      'response.data.data.hasUnverifiedOrder'
+                    )
+                    const message = _get(e, 'response.data.message', {}) as
+                      | { password?: string | null, email?: string | null }
+                      | string
 
-                    if (
-                      _includes(error, 'The cart is expired') &&
-                      !hideErrorsAlertSection
-                    ) {
-                      setError(error)
-                    }
+                    if (hasUnverifiedOrder && typeof message === 'string') {
+                      setPendingVerificationMessage(message)
+                    } else if (axios.isAxiosError(e)) {
+                      if (
+                        _includes(message, 'You must be aged') &&
+                        typeof message === 'string'
+                      ) {
+                        formikHelpers.setFieldError('holderAge', message)
+                      }
+                      if (typeof message !== 'string' && message?.password) {
+                        formikHelpers.setFieldError('password', message.password)
+                        formikHelpers.setFieldError('confirmPassword', message.password)
+                      }
+                      if (typeof message !== 'string' && message?.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)
+                      onRegisterError(e, values.email)
+                    }
+                    return
                   }
-                  return
                 }
+
                 const profileData = await getProfileData()
                 const profileSpecifiedData = _get(profileData, 'data')
                 const profileDataObj = setLoggedUserData(profileSpecifiedData)
+                const userDataObj = isLoggedIn ? userData : profileDataObj
+
                 if (isBrowser) {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
+                  window.localStorage.setItem('user_data', JSON.stringify(userDataObj))
                 }
 
-                const checkoutBody = collectCheckoutBody(values, profileDataObj)
+                const checkoutBody = collectCheckoutBody(values, userDataObj)
 
-                if (isBrowser) {
+                if (isBrowser && !isSinglePageCheckout) {
                   addAddOnsInAttributes(checkoutBody)
                 }
 
+                if (isSinglePageCheckout) {
+                  checkoutBody.attributes.add_ons = singleCheckoutAddons
+                }
+
                 const checkoutResponse = await postOnCheckout(
                   checkoutBody,
                   flagFreeTicket
                 )
+
+                const checkoutUpdateResponse = await updateCheckout({
+                  attributes: {
+                    event_id: eventId,
+                  },
+                })
+
+                let paymentResponse = null
+
+                if (isSinglePageCheckout) {
+                  const { hash, total } = checkoutResponse.data.attributes
+                  localStorage.setItem('checkoutData', JSON.stringify({ hash, total }))
+
+                  const paymentDataResponse = await getPaymentData(String(hash))
+
+                  if (paymentDataResponse.success) {
+                    const { attributes } = paymentDataResponse.data
+                    setReviewData(attributes)
+
+                    const { order_details, cart } = attributes
+                    const {
+                      tickets: [ticket],
+                    } = order_details
+
+                    const updatedOrderData = {
+                      add_ons: order_details.add_ons || [],
+                      total: order_details.total,
+                      subtotal: order_details.subtotal,
+                      fees: order_details.fees,
+                      pay_now: order_details.pay_now || '',
+
+                      id: order_details?.id,
+                      product_name: cart[0]?.product_name,
+                      ticketType: ticket?.name,
+                      quantity: ticket?.quantity,
+                      price: ticket?.price,
+                      currency: order_details?.currency,
+                      guest_count: order_details?.guest_count || '',
+                      debt: order_details?.debt || null,
+                      cost: ticket?.cost,
+                    }
+
+                    const isFreeTickets =
+                      (!Number(total) && !Number(updatedOrderData.total)) ||
+                      !Number(updatedOrderData?.pay_now || 0)
+                    const paymentMethod = attributes.payment_method || {}
+                    const paymentPlanAvailable = paymentMethod.stripe_payment_plan_enabled
+
+                    if (!isFreeTickets) {
+                      if (!stripePaymentMethod) {
+                        setError('Fill in the card details')
+                        return
+                      }
+
+                      const confirmationResult = await stripeRef.current.confirmCardPayment(
+                        paymentMethod.stripe_client_secret,
+                        {
+                          payment_method: stripePaymentMethod.id,
+                        }
+                      )
+
+                      if (confirmationResult?.error) {
+                        setError('' + confirmationResult?.error?.message)
+                        return
+                      }
+                    }
+
+                    await handlePaymentMiddleWare(
+                      null,
+                      {},
+                      {
+                        reviewData: attributes,
+                        isFreeTickets,
+                        paymentPlanIsAvailable: paymentPlanAvailable,
+                        showPaymentPlanSection: true,
+                        handlePayment: (data: any) => {
+                          paymentResponse = data
+                        },
+                        setPaymentIsLoading: _identity,
+                        setError: _identity,
+                        orderData: updatedOrderData,
+                        eventId,
+                        isBrowser,
+                        onPaymentError: (error: any) => {
+                          throw error
+                        },
+                      }
+                    )
+                  }
+                }
+
                 removeReferralKey()
                 handleSubmit(
                   values,
                   formikHelpers as FormikHelpers<any>,
                   eventId,
-                  checkoutResponse
+                  checkoutResponse,
+                  checkoutUpdateResponse,
+                  paymentResponse
                 )
               } catch (e) {
                 setLoading(false)
-                if (e.response?.data?.data?.hasUnverifiedOrder) {
-                  setPendingVerificationMessage(e.response?.data?.message)
+                onSubmitError(e as AxiosError)
+                const hasUnverifiedOrder = _get(
+                  e,
+                  'response.data.data.hasUnverifiedOrder'
+                )
+                const message = _get(e, 'response.data.message', {}) as
+                  | { password?: string | null, email?: string | null }
+                  | string
+
+                if (hasUnverifiedOrder && typeof message === 'string') {
+                  setPendingVerificationMessage(message)
                 } else if (axios.isAxiosError(e)) {
                   if (
                     e.response?.status === 401 ||
-                    e.response?.data?.error === 'invalid_token'
+                    _get(e, 'response.data.error') === 'invalid_token'
                   ) {
                     if (isBrowser) {
                       window.localStorage.removeItem('user_data')
@@ -790,8 +1062,8 @@ const BillingInfoContainer = React.memo(
                       window.document.dispatchEvent(event)
                     }
                   }
-                  if (e.response?.data.message && !hideErrorsAlertSection) {
-                    setError(_get(e, 'response.data.message'))
+                  if (message && !hideErrorsAlertSection && typeof message === 'string') {
+                    setError(message)
                   }
                   onSubmitError(e)
                 }
@@ -806,6 +1078,7 @@ const BillingInfoContainer = React.memo(
                 <LogicRunner
                   brandOptIn={brandOptIn}
                   values={props.values}
+                  errors={props.errors}
                   setStates={setStates}
                   setFieldValue={props.setFieldValue}
                   setValues={props.setValues}
@@ -824,7 +1097,7 @@ const BillingInfoContainer = React.memo(
                       onErrorClose()
                     }}
                   />
-                  {!isLoggedIn && (
+                  {!isLoggedIn && !isSinglePageCheckout && (
                     <div className="account-actions-block">
                       <div className="action-item">
                         <div>{accountInfoTitle}</div>
@@ -860,180 +1133,146 @@ const BillingInfoContainer = React.memo(
                       </div>
                     </div>
                   )}
-                  {includeAddons ? <AddonsContainter
-                    {...addonsProps ?? {}}
-                  /> : null}
+                  {isSinglePageCheckout && eventId ? (
+                    <SimpleAddonsContainer
+                      {...(addonsProps ?? {})}
+                      eventId={eventId}
+                      addOnDataWithCustomFields={addOnDataWithCustomFields}
+                      configs={configs}
+                      onAddOnSelect={onAddOnSelect}
+                    />
+                  ) : includeAddons ? (
+                    <AddonsContainter
+                      {...(addonsProps ?? {})}
+                      addOnDataWithCustomFields={addOnDataWithCustomFields}
+                      configs={configs}
+                      onAddOnSelect={onAddOnSelect}
+                    />
+                  ) : null}
                   {!cardLoading &&
                     _map(dataWithUniqueIds, item => {
                       const { label, labelClassName, fields } = item
                       return (
-                        <React.Fragment key={item.uniqueId}>
+                        <div key={item.uniqueId} className="billing-info-fields">
                           <p className={labelClassName}>{label}</p>
                           {_map(fields, group => {
                             const { groupClassname, groupItems } = group
+                            const filteredGroupItems = filterBillingInfoFields(
+                              groupItems,
+                              {
+                                showDOB: Boolean(showDOB),
+                                hideTtfOptIn: Boolean(hideTtfOptIn),
+                                hidePhoneField: Boolean(hidePhoneField),
+                                flagRequirePhone: Boolean(flagRequirePhone),
+                                collectMandatoryWalletAddress: Boolean(
+                                  collectMandatoryWalletAddress
+                                ),
+                                collectMandatoryJobTitle: Boolean(
+                                  collectMandatoryJobTitle
+                                ),
+                                collectMandatoryBusinessCategory: Boolean(
+                                  collectMandatoryBusinessCategory
+                                ),
+                                collectMandatoryCompany: Boolean(collectMandatoryCompany),
+                                collectMandatoryInstagram: Boolean(
+                                  collectMandatoryInstagram
+                                ),
+                                flagFreeTicket: Boolean(flagFreeTicket),
+                                hideWalletAddressField: Boolean(hideWalletAddressField),
+                                hideJobTitleField: Boolean(hideJobTitleField),
+                                hideBusinessCategoryField: Boolean(
+                                  hideBusinessCategoryField
+                                ),
+                                hideCompanyField: Boolean(hideCompanyField),
+                                hideInstagramField,
+                              }
+                            )
                             return (
                               <React.Fragment key={group.uniqueId}>
                                 <div className={groupClassname}>
-                                  {_map(
-                                    groupItems.filter(el => {
-                                      if (el.name === 'holderAge' && !showDOB) {
-                                        return false
-                                      }
-                                      if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
-                                        return false
-                                      }
-                                      if (el.name === 'phone') {
-                                        if (!hidePhoneField) {
-                                          el.required = flagRequirePhone
-                                        } else {
-                                          return false
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[wallet_address]') {
-                                        if (collectMandatoryWalletAddress) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[jobTitle]') {
-                                        if (collectMandatoryJobTitle) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[businessCategory]') {
-                                        if (collectMandatoryBusinessCategory) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[company]') {
-                                        if (collectMandatoryCompany) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (el.name === 'data_capture[instagram]') {
-                                        if (collectMandatoryInstagram) {
-                                          el.required = true
-                                        }
-                                      }
-                                      if (
-                                        [
-                                          'street_address',
-                                          'country',
-                                          'state',
-                                          'city',
-                                        ].includes(el.name)
-                                      ) {
-                                        if (flagFreeTicket) {
-                                          el.required = false
-                                          return false
-                                        }
-                                      }
-                                      if (
-                                        hideWalletAddressField &&
-                                        (el.name === 'wallet-address-info' ||
-                                          el.name === 'data_capture[wallet_address]')
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideJobTitleField &&
-                                        el.name === 'data_capture[jobTitle]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideBusinessCategoryField &&
-                                        el.name === 'data_capture[businessCategory]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideCompanyField &&
-                                        el.name === 'data_capture[company]'
-                                      ) {
-                                        return false
-                                      }
-                                      if (
-                                        hideInstagramField &&
-                                        (el.name === 'data_capture[instagram]' ||
-                                          el.name === 'instagram-info')
-                                      ) {
-                                        return false
-                                      }
-                                      return true
-                                    }),
-                                    element =>
-                                      [
-                                        'password',
-                                        'confirmPassword',
-                                        'password-info',
-                                      ].includes(element.name) && isLoggedIn ? null : (
-                                        <React.Fragment key={element.uniqueId}>
-                                          <div
-                                            className={`${element.className} ${props?.errors[element.name] || ''
-                                              }`}
-                                          >
-                                            {element.component ? (
-                                              element.component
+                                  {_map(filteredGroupItems, element =>
+                                    [
+                                      'password',
+                                      'confirmPassword',
+                                      'password-info',
+                                    ].includes(element.name) && isLoggedIn ? null : (
+                                      <React.Fragment key={element.uniqueId}>
+                                        <div
+                                          className={`${element.className} ${
+                                            props?.errors[element.name] || ''
+                                          }`}
+                                        >
+                                          {element.component ? (
+                                            typeof element.component === 'function' ? (
+                                              renderComponentWithProps(
+                                                element.component as React.ComponentType<any>,
+                                                element.name === 'payment_info'
+                                                  ? { reviewData }
+                                                  : {}
+                                              )
                                             ) : (
-                                              <Field
-                                                {...element}
-                                                type={
-                                                  element.type === 'radio' ||
-                                                    element.type === 'checkbox'
-                                                    ? undefined
-                                                    : element.type
-                                                }
-                                                setPhoneValidationIsLoading={
-                                                  element.type === 'phone'
-                                                    ? setPhoneValidationIsLoading
-                                                    : undefined
-                                                }
-                                                label={getFieldLabel(element, configs)}
-                                                validate={getValidateFunctions(
-                                                  element,
-                                                  states,
-                                                  props.values,
-                                                  props.errors
-                                                )}
-                                                setFieldValue={props.setFieldValue}
-                                                onBlur={props.handleBlur}
-                                                component={getFieldComponent(element)}
-                                                selectOptions={
-                                                  element.name === 'country'
-                                                    ? _map(countries, item => ({
+                                              element.component
+                                            )
+                                          ) : (
+                                            <Field
+                                              {...element}
+                                              type={
+                                                element.type === 'radio' ||
+                                                element.type === 'checkbox'
+                                                  ? undefined
+                                                  : element.type
+                                              }
+                                              setPhoneValidationIsLoading={
+                                                element.type === 'phone'
+                                                  ? setPhoneValidationIsLoading
+                                                  : undefined
+                                              }
+                                              label={getFieldLabel(element, configs)}
+                                              validate={getValidateFunctions(
+                                                element,
+                                                states,
+                                                props.values,
+                                                props.errors
+                                              )}
+                                              setFieldValue={props.setFieldValue}
+                                              onBlur={props.handleBlur}
+                                              component={getFieldComponent(element)}
+                                              selectOptions={
+                                                element.name === 'country'
+                                                  ? _map(countries, item => ({
                                                       value: item.id,
                                                       label: item.name,
                                                     }))
-                                                    : element.name === 'state'
-                                                      ? [
-                                                        {
-                                                          label: element.label,
-                                                          value: '',
-                                                          disabled: true,
-                                                        },
-                                                        ...states,
-                                                      ]
-                                                      : element.selectOptions || []
-                                                }
-                                                theme={theme}
-                                                defaultCountry={
-                                                  defaultCountry || element.defaultCountry
-                                                }
-                                                dateFormat={element.format}
-                                                isCountryCodeEditable={
-                                                  isCountryCodeEditable
-                                                }
-                                              />
-                                            )}
-                                          </div>
-                                        </React.Fragment>
-                                      )
+                                                  : element.name === 'state'
+                                                  ? [
+                                                      {
+                                                        label: element.label,
+                                                        value: '',
+                                                        disabled: true,
+                                                      },
+                                                      ...states,
+                                                    ]
+                                                  : element.selectOptions || []
+                                              }
+                                              theme={theme}
+                                              defaultCountry={
+                                                defaultCountry || element.defaultCountry
+                                              }
+                                              dateFormat={element.format}
+                                              isCountryCodeEditable={
+                                                isCountryCodeEditable
+                                              }
+                                            />
+                                          )}
+                                        </div>
+                                      </React.Fragment>
+                                    )
                                   )}
                                 </div>
                               </React.Fragment>
                             )
                           })}
-                        </React.Fragment>
+                        </div>
                       )
                     })}
                   {!_isEmpty(ticketHoldersFields.fields) && (
@@ -1053,7 +1292,7 @@ const BillingInfoContainer = React.memo(
                                         {...element}
                                         type={
                                           element.type === 'radio' ||
-                                            element.type === 'checkbox'
+                                          element.type === 'checkbox'
                                             ? undefined
                                             : element.type
                                         }
@@ -1084,6 +1323,74 @@ const BillingInfoContainer = React.memo(
                       ))}
                     </div>
                   )}
+                  {isSinglePageCheckout && !orderIsFree && stripePublishableKey && (
+                    <PaymentContainer
+                      stripePublishableKey={stripePublishableKey}
+                      stripeAccountId={stripeAccountId}
+                      formTitle="Payment Information"
+                      orderInfoLabel=""
+                      enableTimer={false}
+                      checkoutData={checkoutData}
+                      paymentFields={paymentProps.paymentFields || []}
+                      onPaymentError={paymentProps.onPaymentError || _identity}
+                      handlePayment={paymentProps.handlePayment || _identity}
+                      onGetPaymentDataSuccess={
+                        paymentProps.onGetPaymentDataSuccess || _identity
+                      }
+                      onGetPaymentDataError={
+                        paymentProps.onGetPaymentDataError || _identity
+                      }
+                      themeOptions={themeOptions}
+                      paymentInfoLabel=""
+                      displayPaymentButton={false}
+                      hidePaymentForm={false}
+                      hideFieldsBlock={true}
+                      isSinglePageCheckout={true}
+                      stripePaymentProps={{
+                        stripeCardOptions: {
+                          style: {
+                            base: {
+                              fontFamily: 'OpenGround',
+                              fontSize: '14px',
+                              lineHeight: '20px',
+                              fontWeight: 600,
+                              color: '#000',
+                              backgroundColor: '#fff',
+                              ':-webkit-autofill': {
+                                color: '#000',
+                              },
+                              '::placeholder': {
+                                color: 'rgba(201, 201, 201, 0.5)',
+                              },
+                            },
+                            invalid: {
+                              color: '#E53935',
+                            },
+                          },
+                        },
+                        disableZipSection: true,
+                        paymentButtonText: '',
+                        enableAddressElement: false,
+                        onPaymentFieldsUpdate: async (
+                          _error,
+                          paymentFieldsData,
+                          stripe,
+                          card
+                        ) => {
+                          try {
+                            const address = {
+                              city: paymentFieldsData?.billing_info?.city,
+                              line1: paymentFieldsData?.billing_info?.street_address,
+                              state: paymentFieldsData?.billing_info?.state,
+                            }
+                            addressRef.current = address
+                            cardRef.current = card
+                            stripeRef.current = stripe
+                          } catch (error) {}
+                        },
+                      }}
+                    />
+                  )}
                   <div className="button-container">
                     <Button
                       type="submit"
@@ -1091,7 +1398,13 @@ const BillingInfoContainer = React.memo(
                       className="login-register-button"
                       disabled={props.isSubmitting || phoneValidationIsLoading}
                     >
-                      {props.isSubmitting ? <CircularProgress size={26} /> : buttonName}
+                      {props.isSubmitting ? (
+                        <CircularProgress size={26} />
+                      ) : orderIsFree ? (
+                        freeOrderButtonName
+                      ) : (
+                        buttonName
+                      )}
                     </Button>
                   </div>
                 </div>
@@ -1156,6 +1469,7 @@ const BillingInfoContainer = React.memo(
             onForgotPasswordSuccess={onForgotPasswordSuccess}
             onForgotPasswordError={onForgotPasswordError}
             showPoweredByImage={showPoweredByImage}
+            displaySuccessMessage
           />
         )}
         <VerificationPendingModal