tf-checkout-react 1.0.106 → 1.2.1

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

@@ -1,5 +1,11 @@
-import React, { FC, useEffect, useState, useRef } from 'react'
-import { AxiosError } from 'axios'
+import './style.css'
+
+import { CircularProgress, ThemeOptions } from '@mui/material'
+import Backdrop from '@mui/material/Backdrop'
+import Button from '@mui/material/Button'
+import { createTheme,ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
+import axios, { AxiosError } from 'axios'
 import {
   Field,
   Form,
@@ -8,29 +14,36 @@ import {
   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 _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
-import _isEqual from 'lodash/isEqual'
 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 './style.css'
-import { combineValidators, requiredValidator } from '../../validators'
-import { IBillingInfoData } from '../../types'
 import {
   getCart,
   getCountries,
   getProfileData,
-  handleSetAccessToken,
+  getStates,
   postOnCheckout,
   register,
   setCustomHeader,
-  getStates,
 } from '../../api'
+import { IBillingInfoData } from '../../types'
+import { createCheckoutDataBodyWithDefaultHolder, getCookieByName } from '../../utils'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
+import { getQueryVariable } from '../../utils/getQueryVariable'
+import { combineValidators, requiredValidator } from '../../validators'
+import { DatePickerField } from '../common/DatePickerField'
+import { CheckboxField, CustomField, PhoneNumberField,SelectField } from '../common/index'
+import SnackbarAlert from '../common/SnackbarAlert'
+import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { LoginModal } from '../loginModal'
-import { RegisterModal } from '../registerModal'
+import { SignupModal } from '../signupModal'
+import TimerWidget from '../timerWidget'
 import {
   assingUniqueIds,
   createCheckoutDataBody,
@@ -39,19 +52,6 @@ import {
   getValidateFunctions,
   setLoggedUserData,
 } from './utils'
-import { createCheckoutDataBodyWithDefaultHolder } 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[];
@@ -62,10 +62,7 @@ export interface IBillingInfoPage {
     eventId: any,
     res: any
   ) => void;
-  onRegisterSuccess?: (value: {
-    accessToken: string;
-    refreshToken: string;
-  }) => void;
+  onRegisterSuccess?: (value: any) => void;
   onRegisterError?: (e: AxiosError, email: string) => void;
   onSubmitError?: (e: AxiosError) => void;
   onGetCartSuccess?: (res: any) => void;
@@ -95,8 +92,14 @@ export interface IBillingInfoPage {
   onSkipBillingPage: (data: any) => void;
   skipPage?: boolean;
   canSkipHolderNames?: boolean;
+  shouldFetchCountries?: boolean;
+  onForgotPasswordSuccess?: (res: any) => void;
+  onForgotPasswordError?: (e: AxiosError) => void;
   onCountdownFinish?: () => void;
   enableTimer?: boolean;
+  logo?: string;
+  showForgotPasswordButton?: boolean;
+  showSignUpButton?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -107,6 +110,7 @@ const LogicRunner: FC<{
   setUserValues: any;
   onGetStatesSuccess: any;
   onGetStatesError: any;
+  shouldFetchCountries: boolean;
 }> = ({
   values,
   setStates,
@@ -115,6 +119,7 @@ const LogicRunner: FC<{
   setUserValues,
   onGetStatesSuccess,
   onGetStatesError,
+  shouldFetchCountries,
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -137,7 +142,7 @@ const LogicRunner: FC<{
         }
       }
     }
-    fetchStates()
+    shouldFetchCountries && fetchStates()
   }, [values.country, setStates, setFieldValue])
   const userDataEncoded =
     typeof window !== 'undefined'
@@ -151,8 +156,8 @@ const LogicRunner: FC<{
           try {
             const parsedData = JSON.parse(userDataEncoded)
             const mappedValues = {
-              firstName: parsedData?.first_name || '',
-              lastName: parsedData?.last_name || '',
+              firstName: parsedData?.first_name || parsedData?.firstName || '',
+              lastName: parsedData?.last_name || parsedData?.lastName || '',
               email: parsedData?.email || '',
               phone: parsedData?.phone || '',
               confirmEmail: parsedData?.email || '',
@@ -160,15 +165,15 @@ const LogicRunner: FC<{
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || '1',
               zip: parsedData?.zip || '',
-              brand_opt_in: parsedData?.brand_opt_in || '',
+              brand_opt_in: parsedData?.brand_opt_in || false,
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
-              'holderFirstName-0': parsedData?.first_name || '',
-              'holderLastName-0': parsedData?.last_name || '',
+              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
               'holderEmail-0': parsedData?.email || '',
             }
-            setValues(mappedValues)
+            setValues({ ...values, ...mappedValues })
             setUserValues(mappedValues)
           } catch (e) {}
         }
@@ -178,6 +183,7 @@ const LogicRunner: FC<{
   }, [userDataEncoded, setValues, setUserValues])
   return null
 }
+
 export const BillingInfoContainer = ({
   data = [],
   ticketHoldersFields = {
@@ -212,8 +218,14 @@ export const BillingInfoContainer = ({
   onSkipBillingPage = () => {},
   skipPage = false,
   canSkipHolderNames = false,
+  onForgotPasswordSuccess = () => {},
+  onForgotPasswordError = () => {},
+  shouldFetchCountries = true,
   onCountdownFinish = () => {},
-  enableTimer = false
+  enableTimer = false,
+  logo,
+  showForgotPasswordButton = false,
+  showSignUpButton = false
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -226,16 +238,18 @@ export const BillingInfoContainer = ({
       ? window.localStorage.getItem('access_token') || ''
       : ''
   const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
-  IBillingInfoData[]
+    IBillingInfoData[]
   >(data)
-  const [isLoggedIn, setIsLoggedIn] = useState(!!access_token)
+  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 [showModalSignup, setShowModalSignup] = useState(false)
+  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
   const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
@@ -264,7 +278,7 @@ export const BillingInfoContainer = ({
   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 ttfOptIn = Boolean(_get(cartInfoData, 'ttfOptIn', false))
   const hideTtfOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', true)
   const expirationTime = _get(cartInfoData, 'expiresAt')
   const flagRequirePhone = getQueryVariable('phone_required') === 'true'
@@ -292,10 +306,10 @@ export const BillingInfoContainer = ({
   }
 
   useEffect(() => {
-    if ((pIsLoggedIn || access_token) && !isLoggedIn) {
-      setIsLoggedIn(true)
+    if ((pIsLoggedIn !== isLoggedIn) || xtfCookie) {
+      setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
     }
-  }, [pIsLoggedIn, isLoggedIn, access_token])
+  }, [pIsLoggedIn, isLoggedIn, xtfCookie])
   //just once
   useEffect(() => {
     // fetch countries data
@@ -316,7 +330,7 @@ export const BillingInfoContainer = ({
         }
       }
     }
-    fetchCountries()
+    shouldFetchCountries && fetchCountries()
     fetchCart()
   }, [])
   // fetch cart data
@@ -340,7 +354,7 @@ export const BillingInfoContainer = ({
   // fetch user data
   const fetchUserData = async (token: string) => {
     try {
-      if (isWindowDefined && token) {
+      if ((isWindowDefined && token) || isLoggedIn) {
         const userDataResponse = await getProfileData(token)
         const profileSpecifiedData = _get(userDataResponse, 'data.data')
         const profileDataObj = setLoggedUserData(profileSpecifiedData)
@@ -363,7 +377,7 @@ export const BillingInfoContainer = ({
   }
   useEffect(() => {
     fetchUserData(access_token)
-  }, [access_token])
+  }, [access_token, isLoggedIn])
 
   useEffect(() => {
     const collectPaymentData = async () => {
@@ -390,7 +404,7 @@ export const BillingInfoContainer = ({
   }, [skipPage, ticketsQuantity])
 
 
-  const collectCheckoutBody = (values: object): object => {
+  const collectCheckoutBody = (values: Record<string, unknown>, profileData?: any): Record<string, unknown> => {
     let checkoutBody = {}
 
     // Auto collect ticket holders name when it was skipped optionally
@@ -398,13 +412,18 @@ export const BillingInfoContainer = ({
       checkoutBody = createCheckoutDataBodyWithDefaultHolder(
         ticketsQuantity.length,
         values,
-        true
+        true,
+        { emailLogged, firstNameLogged, lastNameLogged },
       )
     } else {
       checkoutBody = createCheckoutDataBody(
         ticketsQuantity.length,
         values,
-        { emailLogged, firstNameLogged, lastNameLogged },
+        {
+          emailLogged: emailLogged || profileData.email,
+          firstNameLogged: firstNameLogged || profileData.first_name || profileData.firstName,
+          lastNameLogged: lastNameLogged || profileData.last_name || profileData.lastName,
+        },
         showDOB
       )
     }
@@ -416,22 +435,23 @@ export const BillingInfoContainer = ({
     localStorage.removeItem('referral_key')
   }
 
-  // Displaying loader
   if (loading || (enableTimer && !expirationTime && typeof window !== 'undefined')) {
     if (expirationTime === 0) {
       // Redirect to homepage (countdown finished and browser reloaded case)
-      window.location.href='/'
+      window.location.href = '/'
     }
-
-    return (
-      <Backdrop sx={{ color: '#fff' }} open={true}>
-        <CircularProgress color="inherit" />
-      </Backdrop>
-    )
   }
 
   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}
@@ -450,7 +470,7 @@ export const BillingInfoContainer = ({
           },
           userValues
         )}
-        enableReinitialize={true}
+        enableReinitialize={false}
         onSubmit={async (values, formikHelpers) => {
           try {
             if (isLoggedIn) {
@@ -466,7 +486,7 @@ export const BillingInfoContainer = ({
                 }
               }
 
-              const checkoutBody = collectCheckoutBody(values)
+              const checkoutBody = collectCheckoutBody(values, userData)
               const res = await postOnCheckout(checkoutBody, access_token)
               removeReferralKey()
               handleSubmit(
@@ -487,24 +507,22 @@ export const BillingInfoContainer = ({
               values,
               checkoutBodyForRegistration
             )
-            let access_token_register = null
             try {
+              setLoading(true)
               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,
+              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,
-              }
-              onRegisterSuccess(tokens)
+                userProfile
+              })
             } catch (e) {
+              setLoading(false)
               if (axios.isAxiosError(e)) {
                 const error = e?.response?.data?.message
                 if (_includes(error, 'You must be aged')) {
@@ -531,7 +549,7 @@ export const BillingInfoContainer = ({
               }
               return
             }
-            const profileData = await getProfileData(access_token_register)
+            const profileData = await getProfileData()
             const profileSpecifiedData = _get(profileData, 'data.data')
             const profileDataObj = setLoggedUserData(profileSpecifiedData)
             if (isWindowDefined) {
@@ -541,11 +559,8 @@ export const BillingInfoContainer = ({
               )
             }
 
-            const checkoutBody = collectCheckoutBody(values)
-            const res = await postOnCheckout(
-              checkoutBody,
-              access_token_register
-            )
+            const checkoutBody = collectCheckoutBody(values, profileDataObj)
+            const res = await postOnCheckout(checkoutBody)
             removeReferralKey()
             handleSubmit(
               values,
@@ -554,6 +569,7 @@ export const BillingInfoContainer = ({
               res
             )
           } catch (e) {
+            setLoading(false)
             if (axios.isAxiosError(e)) {
               if (e.response?.data.error === 'invalid_token') {
                 if (isWindowDefined) {
@@ -568,6 +584,8 @@ export const BillingInfoContainer = ({
               }
               onSubmitError(e)
             }
+          } finally {
+            setLoading(false)
           }
         }}
       >
@@ -582,6 +600,7 @@ export const BillingInfoContainer = ({
               setUserValues={setUserValues}
               onGetStatesSuccess={onGetStatesSuccess}
               onGetStatesError={onGetStatesError}
+              shouldFetchCountries={shouldFetchCountries}
             />
             <div className={`billing-info-container ${theme}`}>
               <SnackbarAlert
@@ -595,9 +614,11 @@ export const BillingInfoContainer = ({
               />
               {!isLoggedIn && (
                 <div className="account-actions-block">
-                  <div>{accountInfoTitle}</div>
-                  <div>Login & skip ahead:</div>
-                  <div className="login-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"
@@ -636,6 +657,7 @@ export const BillingInfoContainer = ({
                       const { groupClassname, groupItems } = group
                       return (
                         <React.Fragment key={group.uniqueId}>
+
                           <div className={groupClassname}>
                             {_map(
                               groupItems.filter(el => {
@@ -656,7 +678,7 @@ export const BillingInfoContainer = ({
                                   'confirmPassword',
                                   'password-info',
                                 ].includes(element.name) &&
-                                isLoggedIn ? null : (
+                                  isLoggedIn ? null : (
                                   <React.Fragment key={element.uniqueId}>
                                     <div className={element.className}>
                                       {element.component ? (
@@ -664,8 +686,8 @@ export const BillingInfoContainer = ({
                                       ) : (
                                         <Field
                                           name={element.name}
-                                          label={element.name === 'phone' 
-                                            ? `${element.label}${flagRequirePhone ? '' : ' (optional)'} ` 
+                                          label={element.name === 'phone'
+                                            ? `${element.label}${flagRequirePhone ? '' : ' (optional)'} `
                                             : element.label}
                                           type={element.type}
                                           validate={getValidateFunctions(
@@ -681,7 +703,7 @@ export const BillingInfoContainer = ({
                                               : element.type === 'select'
                                               ? SelectField
                                               : element.type === 'phone'
-                                              ? FormikPhoneNumberField
+                                              ? PhoneNumberField
                                               : element.type === 'date'
                                               ? DatePickerField
                                               : CustomField
@@ -690,8 +712,8 @@ export const BillingInfoContainer = ({
                                             element.name === 'country'
                                               ? countries
                                               : element.name === 'state'
-                                              ? states
-                                              : []
+                                                ? states
+                                                : []
                                           }
                                           theme={theme}
                                         />
@@ -709,7 +731,7 @@ export const BillingInfoContainer = ({
               })}
               {!_isEmpty(ticketHoldersFields.fields) && (
                 <div className="ticket-holders-fields">
-                  <p>{ticketHoldersFields.label}</p>
+                  <h2>{ticketHoldersFields.label}</h2>
                   {_map(ticketsQuantity, (_item, index) => (
                     <div key={_item}>
                       <h5>Ticket {index + 1}</h5>
@@ -731,6 +753,8 @@ export const BillingInfoContainer = ({
                                     component={
                                       element.type === 'checkbox'
                                         ? CheckboxField
+                                        : element.type === 'phone'
+                                        ? PhoneNumberField
                                         : CustomField
                                     }
                                     validate={combineValidators(
@@ -772,6 +796,7 @@ export const BillingInfoContainer = ({
       </Formik>
       {showModalLogin && (
         <LoginModal
+          logo={logo}
           onClose={() => {
             setShowModalLogin(false)
           }}
@@ -789,21 +814,42 @@ export const BillingInfoContainer = ({
             onGetProfileDataSuccess(data)
           }}
           onGetProfileDataError={onGetProfileDataError}
+          showSignUpButton={showSignUpButton}
+          showForgotPasswordButton={showForgotPasswordButton}
+          onForgotPassword={() => {
+            setShowModalLogin(false)
+            setShowModalForgotPassword(true)
+          }}
+          onSignup={() => {
+            setShowModalLogin(false)
+            setShowModalSignup(true)
+          }}
         />
       )}
-      {showModalRegister && (
-        <RegisterModal
+      {showModalSignup && (
+        <SignupModal
           onClose={() => {
-            setShowModalRegister(false)
+            setShowModalSignup(false)
           }}
-          onRegister={() => {
-            setShowModalRegister(false)
+          onLogin={() => {
+            setShowModalSignup(false)
+            setShowModalLogin(true)
           }}
-          onGetProfileDataSuccess={(data: any) => {
-            fetchCart()
-            onGetProfileDataSuccess(data)
+          onRegisterSuccess={onRegisterSuccess}
+          onRegisterError={onRegisterError}
+        />
+      )}
+      {showModalForgotPassword && (
+        <ForgotPasswordModal
+          onClose={() => {
+            setShowModalForgotPassword(false)
           }}
-          onGetProfileDataError={onGetProfileDataError}
+          onLogin={() => {
+            setShowModalForgotPassword(false)
+            setShowModalLogin(true)
+          }}
+          onForgotPasswordSuccess={onForgotPasswordSuccess}
+          onForgotPasswordError={onForgotPasswordError}
         />
       )}
     </ThemeProvider>

package/src/components/billing-info-container/style.css

@@ -103,4 +103,4 @@ button {
 
 .email-checking {
   margin-bottom: 15px;
-}
+}

package/src/components/billing-info-container/utils.ts

@@ -144,10 +144,10 @@ export const createCheckoutDataBody = (
     holder => Object.entries(holder).length > 0
   )
   ticket_holders = filteredHolders.map((item, index) => ({
-    first_name: item[`holderFirstName-${index}`] || '',
-    last_name: item[`holderLastName-${index}`] || '',
+    first_name: !index ? item[`holderFirstName-${index}`] || logedInValues.firstNameLogged || '' : item[`holderFirstName-${index}`] || '',
+    last_name: !index ? item[`holderLastName-${index}`] || logedInValues.lastNameLogged || '' : item[`holderLastName-${index}`] || '',
     phone: item[`holderPhone-${index}`] || '',
-    email: item[`holderEmail-${index}`] || '',
+    email: !index ? item[`holderEmail-${index}`] || logedInValues.emailLogged || '' : item[`holderEmail-${index}`] || '',
   }))
 
   const filteredRestValue: { [key: string]: any } = {}
@@ -205,6 +205,14 @@ export const getValidateFunctions = (
     validationFunctions.push(isSameEmail)
   }
 
+  if (element.name === 'confirmPassword') {
+    const isSame = (confirmPassword?: string) =>
+      values.password !== confirmPassword
+        ? 'Password confirmation does not match'
+        : null
+    validationFunctions.push(isSame)
+  }
+
   return combineValidators(...validationFunctions)
 }
 

package/src/components/common/PhoneNumberField.tsx

@@ -0,0 +1,68 @@
+import TextField from '@mui/material/TextField'
+import { FieldInputProps, FormikProps } from 'formik'
+import _debounce from 'lodash/debounce'
+import _get from 'lodash/get'
+import React, { useCallback, useEffect } from 'react'
+
+import { validatePhoneNumber } from '../../api'
+
+export interface IPhoneNumberField {
+  label: string;
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+
+  // optional
+  type: string;
+}
+
+export const PhoneNumberField = ({
+  label,
+  type = 'text',
+  field,
+  form: { errors, setFieldError, setStatus },
+}: IPhoneNumberField) => {
+  const error = _get(errors, field.name)
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debounceCb = useCallback(
+    _debounce((cb: () => void) => void cb(), 1000),
+    []
+  )
+
+  useEffect(() => {
+    if (field.value) {
+      setStatus({ [field.name]: true })
+    }
+    debounceCb(async () => {
+      try {
+        if (field.value) {
+          await validatePhoneNumber(field.value)
+        }
+        setFieldError(field.name, '')
+      } catch (error) {
+        const message = _get(
+          error,
+          'response.data.message',
+          'Invalid phone number'
+        )
+        setFieldError(field.name, message)
+      } finally {
+        setStatus({ [field.name]: false })
+      }
+    })
+    // eslint-disable-next-line
+  }, [field.value])
+
+  return (
+    <TextField
+      {...field}
+      id={field.name}
+      label={label}
+      type={type}
+      fullWidth={true}
+      error={!!error}
+      helperText={error}
+      value={field.value || ''}
+    />
+  )
+}

package/src/components/common/SnackbarAlert.tsx

@@ -51,4 +51,4 @@ const SnackbarAlert = ({
   )
 }
 
-export default SnackbarAlert
+export default SnackbarAlert