tf-checkout-react 1.4.24 → 1.4.25

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

@@ -6,14 +6,7 @@ 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,
-  Formik,
-  FormikHelpers,
-  FormikProps,
-  FormikValues,
-} from 'formik'
+import { Field, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
 import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
@@ -42,6 +35,7 @@ import {
   deleteCookieByName,
   getCookieByName,
   isBrowser,
+  setLoggedUserData,
 } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { combineValidators, requiredValidator } from '../../validators'
@@ -59,7 +53,6 @@ import {
   getFieldLabel,
   getInitialValues,
   getValidateFunctions,
-  setLoggedUserData,
 } from './utils'
 
 export interface IBillingInfoPage {
@@ -142,7 +135,7 @@ const LogicRunner: FC<{
     const fetchStates = async () => {
       try {
         const res = await getStates(values.country)
-        const mappedStates = _map(_get(res, 'data.data'), (item, key) => ({
+        const mappedStates = _map(res.data, (item, key) => ({
           label: item,
           value: key,
         }))
@@ -163,14 +156,11 @@ const LogicRunner: FC<{
     }
     shouldFetchCountries && fetchStates()
   }, [values.country, setStates, setFieldValue])
-  const userDataEncoded =
-    typeof window !== 'undefined'
-      ? window.localStorage.getItem('user_data')
-      : ''
+  const userDataEncoded = isBrowser ? window.localStorage.getItem('user_data') : ''
   useEffect(() => {
     // set user data from local storage
     const getStoredUserData = () => {
-      if (typeof window !== 'undefined') {
+      if (isBrowser) {
         if (userDataEncoded) {
           try {
             const parsedData = JSON.parse(userDataEncoded)
@@ -184,16 +174,12 @@ const LogicRunner: FC<{
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || '1',
               zip: parsedData?.zip || '',
-              brand_opt_in: brandOptIn
-                ? brandOptIn
-                : parsedData?.brand_opt_in || false,
+              brand_opt_in: brandOptIn ? brandOptIn : parsedData?.brand_opt_in || false,
               city: parsedData?.city || '',
               confirmPassword: '',
               password: '',
-              'holderFirstName-0':
-                parsedData?.first_name || parsedData?.firstName || '',
-              'holderLastName-0':
-                parsedData?.last_name || parsedData?.lastName || '',
+              'holderFirstName-0': parsedData?.first_name || parsedData?.firstName || '',
+              'holderLastName-0': parsedData?.last_name || parsedData?.lastName || '',
               'holderEmail-0': parsedData?.email || '',
             }
 
@@ -264,37 +250,37 @@ export const BillingInfoContainer = React.memo(
     const [configs, setConfigs] = useState<null | AttributesConfig>(null)
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
-    const isWindowDefined = typeof window !== 'undefined'
+
     useEffect(() => {
-      if (isWindowDefined) {
+      if (isBrowser) {
         const extraData = window.localStorage.getItem('extraData')
         if (extraData) {
           setExtraData(JSON.parse(extraData))
         }
       }
-      getCheckoutPageConfigs().then(data => {
-        if (data?.data?.attributes) {
-          setConfigs(data.data.attributes)
+      getCheckoutPageConfigs()
+        .then(data => {
+          if (data?.data?.attributes) {
+            setConfigs(data.data.attributes)
+            setIsConfigLoading(false)
+          }
+        })
+        .catch(() => {
           setIsConfigLoading(false)
-        }
-      }).catch(() => {
-        setIsConfigLoading(false)
-      })
-    }, [isWindowDefined])
-    const defaultCountry = isWindowDefined
-      ? window.localStorage.getItem('eventCountry')
-      : ''
+        })
+    }, [isBrowser])
+    const defaultCountry = isBrowser ? window.localStorage.getItem('eventCountry') : ''
     const userData =
-      isWindowDefined && window.localStorage.getItem('user_data')
+      isBrowser && window.localStorage.getItem('user_data')
         ? JSON.parse(window.localStorage.getItem('user_data') || '')
         : {}
     const access_token =
-      isWindowDefined && window.localStorage.getItem('access_token')
+      isBrowser && window.localStorage.getItem('access_token')
         ? window.localStorage.getItem('access_token') || ''
         : ''
-    const [dataWithUniqueIds, setDataWithUniqueIds] = useState<
-      IBillingInfoData[]
-    >(assingUniqueIds(data))
+    const [dataWithUniqueIds, setDataWithUniqueIds] = useState<IBillingInfoData[]>(
+      assingUniqueIds(data)
+    )
     const xtfCookie = getCookieByName('X-TF-ECOMMERCE')
     const [isLoggedIn, setIsLoggedIn] = useState(!!(pIsLoggedIn || xtfCookie))
     const [cartInfoData, setCartInfo] = useState<any>({})
@@ -304,9 +290,7 @@ export const BillingInfoContainer = React.memo(
     const [alreadyHasUser, setAlreadyHasUser] = useState(false)
     const [userExpired, setUserExpired] = useState(false)
     const [showModalSignup, setShowModalSignup] = useState(false)
-    const [showModalForgotPassword, setShowModalForgotPassword] = useState(
-      false
-    )
+    const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
     const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
     const [userValues, setUserValues] = useState<any>({
       firstName: '',
@@ -327,11 +311,8 @@ export const BillingInfoContainer = React.memo(
     const [cardLoading, setCardLoading] = useState(false)
     const [isCountriesLoading, setIsCountriesLoading] = useState(true)
     const [error, setError] = useState(null)
-    const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(
-      false
-    )
-    const emailLogged =
-      _get(userData, 'email', '') || _get(userValues, 'email', '')
+    const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
+    const emailLogged = _get(userData, 'email', '') || _get(userValues, 'email', '')
     const firstNameLogged =
       _get(userData, 'first_name', '') || _get(userValues, 'first_name', '')
     const lastNameLogged =
@@ -355,25 +336,19 @@ export const BillingInfoContainer = React.memo(
       !collectOptionalWalletAddress && !collectMandatoryWalletAddress
     const collectMandatoryCompany = configs?.collect_mandatory_company
     const collectOptionalCompany = configs?.collect_optional_company
-    const hideCompanyField =
-      !collectOptionalCompany && !collectMandatoryCompany
+    const hideCompanyField = !collectOptionalCompany && !collectMandatoryCompany
     const collectMandatoryJobTitle = configs?.collect_mandatory_job_title
     const collectOptionalJobTitle = configs?.collect_optional_job_title
-    const hideJobTitleField =
-      !collectMandatoryJobTitle && !collectOptionalJobTitle
+    const hideJobTitleField = !collectMandatoryJobTitle && !collectOptionalJobTitle
     const collectMandatoryInstagram = configs?.collect_mandatory_instagram
     const collectOptionalInstagram = configs?.collect_optional_instagram
-    const hideInstagramField =
-      !collectMandatoryInstagram && !collectOptionalInstagram
+    const hideInstagramField = !collectMandatoryInstagram && !collectOptionalInstagram
     const collectMandatoryBusinessCategory = configs?.collect_mandatory_business_category
     const collectOptionalBusinessCategory = configs?.collect_optional_business_category
     const hideBusinessCategoryField =
       !collectMandatoryBusinessCategory && !collectOptionalBusinessCategory
 
-    const [
-      pendingVerificationMessage,
-      setPendingVerificationMessage,
-    ] = useState()
+    const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
 
     // Get prevProps
     const prevData = useRef(data)
@@ -414,7 +389,7 @@ export const BillingInfoContainer = React.memo(
         try {
           const res = await getCountries()
           setCustomHeader(res)
-          setCountries(_get(res, 'data.data'))
+          setCountries(res.data)
           setIsCountriesLoading(false)
           onGetCountriesSuccess(res.data)
         } catch (e) {
@@ -433,12 +408,10 @@ export const BillingInfoContainer = React.memo(
         setCardLoading(true)
         const res = await getCart()
         setCustomHeader(res)
-        const cartInfo = _get(res, 'data.data.attributes')
+        const cartInfo = res.data.attributes
         setCartInfo(cartInfo)
         const { cart = [] } = cartInfo
-        setTicketsQuantity(
-          new Array(getQuantity(cart)).fill(null).map(() => nanoid())
-        )
+        setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(() => nanoid()))
         onGetCartSuccess(res.data)
       } catch (e) {
         if (axios.isAxiosError(e)) {
@@ -451,19 +424,16 @@ export const BillingInfoContainer = React.memo(
     // fetch user data
     const fetchUserData = async (token: string) => {
       try {
-        if ((isWindowDefined && token) || isLoggedIn) {
+        if ((isBrowser && token) || isLoggedIn) {
           const userDataResponse = await getProfileData(token)
-          const profileSpecifiedData = _get(userDataResponse, 'data.data')
+          const profileSpecifiedData = _get(userDataResponse, 'data')
           const profileDataObj = setLoggedUserData(profileSpecifiedData)
           setUserValues({
             ...profileDataObj,
             firstName: profileDataObj.first_name,
             lastName: profileDataObj.last_name,
           })
-          window.localStorage.setItem(
-            'user_data',
-            JSON.stringify(profileDataObj)
-          )
+          window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
           onGetProfileDataSuccess(userDataResponse.data)
         }
       } catch (e) {
@@ -493,17 +463,17 @@ export const BillingInfoContainer = React.memo(
           )
 
           try {
-            if (isWindowDefined) {
+            if (isBrowser) {
               addAddOnsInAttributes(checkoutBody)
             }
 
-            const res = await postOnCheckout(
+            const checkoutResponse = await postOnCheckout(
               checkoutBody,
               access_token,
               flagFreeTicket
             )
             removeReferralKey()
-            onSkipBillingPage(_get(res, 'data.data.attributes'))
+            onSkipBillingPage(checkoutResponse.data.attributes)
             setLoading(false)
           } catch (e) {
             onSubmitError(e)
@@ -539,9 +509,7 @@ export const BillingInfoContainer = React.memo(
           {
             emailLogged: emailLogged || profileData.email,
             firstNameLogged:
-              firstNameLogged ||
-              profileData.first_name ||
-              profileData.firstName,
+              firstNameLogged || profileData.first_name || profileData.firstName,
             lastNameLogged:
               lastNameLogged || profileData.last_name || profileData.lastName,
           },
@@ -556,10 +524,7 @@ export const BillingInfoContainer = React.memo(
       localStorage.removeItem('referral_key')
     }
 
-    if (
-      loading ||
-      (enableTimer && !expirationTime && typeof window !== 'undefined')
-    ) {
+    if (loading || (enableTimer && !expirationTime && isBrowser)) {
       if (expirationTime === 0) {
         // Redirect to homepage (countdown finished and browser reloaded case)
         window.location.href = '/'
@@ -568,8 +533,7 @@ export const BillingInfoContainer = React.memo(
 
     const selectedCountry =
       _find(countries, item => item.code.toLowerCase() === defaultCountry) || {}
-    const initialCountry =
-      selectedCountry.id || _get(userData, 'country', '') || '1'
+    const initialCountry = selectedCountry.id || _get(userData, 'countryId', '') || '1'
 
     const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
     usePixel(eventId || '', { page: 'billing', pageUrl })
@@ -598,14 +562,14 @@ export const BillingInfoContainer = React.memo(
               dataWithUniqueIds,
               {
                 country: initialCountry,
-                state: _get(userData, 'state', '') || '1',
+                state: _get(userData, 'stateId', '') || '1',
                 brand_opt_in: optedInFieldValue,
                 ttf_opt_in: ttfOptIn,
                 data_capture: {
-                  'instagram': _get(extraData, 'data_capture.instagram', ''),
-                  'company': _get(extraData, 'data_capture.company', ''),
-                  'businessCategory': _get(extraData, 'data_capture.businessCategory', ''),
-                  'jobTitle': _get(extraData, 'data_capture.jobTitle', ''),
+                  instagram: _get(extraData, 'data_capture.instagram', ''),
+                  company: _get(extraData, 'data_capture.company', ''),
+                  businessCategory: _get(extraData, 'data_capture.businessCategory', ''),
+                  jobTitle: _get(extraData, 'data_capture.jobTitle', ''),
                 },
                 ...initialValues,
               },
@@ -614,39 +578,41 @@ export const BillingInfoContainer = React.memo(
             enableReinitialize={false}
             onSubmit={async (values, formikHelpers) => {
               try {
-                if (isWindowDefined) {
-                  window.localStorage.setItem('extraData', JSON.stringify({
-                    data_capture: {
-                      'instagram': _get(values, 'data_capture.instagram', ''),
-                      'company': _get(values, 'data_capture.company', ''),
-                      'businessCategory': _get(values, 'data_capture.businessCategory', ''),
-                      'jobTitle': _get(values, 'data_capture.jobTitle', ''),
-                    }
-                  }))
+                if (isBrowser) {
+                  window.localStorage.setItem(
+                    'extraData',
+                    JSON.stringify({
+                      data_capture: {
+                        instagram: _get(values, 'data_capture.instagram', ''),
+                        company: _get(values, 'data_capture.company', ''),
+                        businessCategory: _get(
+                          values,
+                          'data_capture.businessCategory',
+                          ''
+                        ),
+                        jobTitle: _get(values, 'data_capture.jobTitle', ''),
+                      },
+                    })
+                  )
                 }
                 if (isLoggedIn) {
                   const checkoutBody = collectCheckoutBody(values, userData)
 
-                  if (isWindowDefined) {
+                  if (isBrowser) {
                     addAddOnsInAttributes(checkoutBody)
                   }
 
-                  const res = await postOnCheckout(
+                  const checkoutResponse = await postOnCheckout(
                     checkoutBody,
                     access_token,
                     flagFreeTicket
                   )
                   removeReferralKey()
                   // After checkout is successful recover updated profile and store it on local storage if needed
-                  if (isWindowDefined) {
+                  if (isBrowser) {
                     const updatedUserData = await getProfileData(access_token)
-                    const profileSpecifiedData = _get(
-                      updatedUserData,
-                      'data.data'
-                    )
-                    const profileDataObj = setLoggedUserData(
-                      profileSpecifiedData
-                    )
+                    const profileSpecifiedData = _get(updatedUserData, 'data')
+                    const profileDataObj = setLoggedUserData(profileSpecifiedData)
                     window.localStorage.setItem(
                       'user_data',
                       JSON.stringify(profileDataObj)
@@ -657,7 +623,7 @@ export const BillingInfoContainer = React.memo(
                     values,
                     formikHelpers as FormikHelpers<any>,
                     eventId,
-                    res
+                    checkoutResponse
                   )
                   return
                 }
@@ -676,18 +642,9 @@ export const BillingInfoContainer = React.memo(
                   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'
-                  )
+                  const accessToken = _get(resRegister, 'data.attributes.access_token')
+                  const refreshToken = _get(resRegister, 'data.attributes.refresh_token')
+                  const userProfile = _get(resRegister, 'data.attributes.user_profile')
 
                   setIsNewUser(true)
                   onRegisterSuccess({
@@ -708,10 +665,7 @@ export const BillingInfoContainer = React.memo(
                     }
                     if (error?.password) {
                       formikHelpers.setFieldError('password', error.password)
-                      formikHelpers.setFieldError(
-                        'confirmPassword',
-                        error.password
-                      )
+                      formikHelpers.setFieldError('confirmPassword', error.password)
                     }
                     if (error?.email && !onLogin) {
                       // False will stand for outside controll
@@ -731,22 +685,19 @@ export const BillingInfoContainer = React.memo(
                   return
                 }
                 const profileData = await getProfileData()
-                const profileSpecifiedData = _get(profileData, 'data.data')
+                const profileSpecifiedData = _get(profileData, 'data')
                 const profileDataObj = setLoggedUserData(profileSpecifiedData)
-                if (isWindowDefined) {
-                  window.localStorage.setItem(
-                    'user_data',
-                    JSON.stringify(profileDataObj)
-                  )
+                if (isBrowser) {
+                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
                 }
 
                 const checkoutBody = collectCheckoutBody(values, profileDataObj)
 
-                if (isWindowDefined) {
+                if (isBrowser) {
                   addAddOnsInAttributes(checkoutBody)
                 }
 
-                const res = await postOnCheckout(
+                const checkoutResponse = await postOnCheckout(
                   checkoutBody,
                   undefined,
                   flagFreeTicket
@@ -756,7 +707,7 @@ export const BillingInfoContainer = React.memo(
                   values,
                   formikHelpers as FormikHelpers<any>,
                   eventId,
-                  res
+                  checkoutResponse
                 )
               } catch (e) {
                 setLoading(false)
@@ -767,7 +718,7 @@ export const BillingInfoContainer = React.memo(
                     e.response?.status === 401 ||
                     e.response?.data?.error === 'invalid_token'
                   ) {
-                    if (isWindowDefined) {
+                    if (isBrowser) {
                       window.localStorage.removeItem('user_data')
                       window.localStorage.removeItem('access_token')
                       setUserExpired(true)
@@ -866,10 +817,7 @@ export const BillingInfoContainer = React.memo(
                                       if (el.name === 'holderAge' && !showDOB) {
                                         return false
                                       }
-                                      if (
-                                        el.name === 'ttf_opt_in' &&
-                                        hideTtfOptIn
-                                      ) {
+                                      if (el.name === 'ttf_opt_in' && hideTtfOptIn) {
                                         return false
                                       }
                                       if (el.name === 'phone') {
@@ -879,38 +827,27 @@ export const BillingInfoContainer = React.memo(
                                           return false
                                         }
                                       }
-                                      if (
-                                        el.name ===
-                                        'data_capture[wallet_address]'
-                                      ) {
+                                      if (el.name === 'data_capture[wallet_address]') {
                                         if (collectMandatoryWalletAddress) {
                                           el.required = true
                                         }
                                       }
-                                      if (
-                                        el.name === 'data_capture[jobTitle]'
-                                      ) {
+                                      if (el.name === 'data_capture[jobTitle]') {
                                         if (collectMandatoryJobTitle) {
                                           el.required = true
                                         }
                                       }
-                                      if (
-                                        el.name === 'data_capture[businessCategory]'
-                                      ) {
+                                      if (el.name === 'data_capture[businessCategory]') {
                                         if (collectMandatoryBusinessCategory) {
                                           el.required = true
                                         }
                                       }
-                                      if (
-                                        el.name === 'data_capture[company]'
-                                      ) {
+                                      if (el.name === 'data_capture[company]') {
                                         if (collectMandatoryCompany) {
                                           el.required = true
                                         }
                                       }
-                                      if (
-                                        el.name === 'data_capture[instagram]'
-                                      ) {
+                                      if (el.name === 'data_capture[instagram]') {
                                         if (collectMandatoryInstagram) {
                                           el.required = true
                                         }
@@ -930,28 +867,33 @@ export const BillingInfoContainer = React.memo(
                                       }
                                       if (
                                         hideWalletAddressField &&
-                                        (el.name === 'wallet-address-info' || el.name === 'data_capture[wallet_address]')
+                                        (el.name === 'wallet-address-info' ||
+                                          el.name === 'data_capture[wallet_address]')
                                       ) {
                                         return false
                                       }
                                       if (
-                                        hideJobTitleField && el.name === 'data_capture[jobTitle]'
+                                        hideJobTitleField &&
+                                        el.name === 'data_capture[jobTitle]'
                                       ) {
                                         return false
                                       }
                                       if (
-                                        hideBusinessCategoryField && el.name === 'data_capture[businessCategory]'
+                                        hideBusinessCategoryField &&
+                                        el.name === 'data_capture[businessCategory]'
                                       ) {
                                         return false
                                       }
                                       if (
-                                        hideCompanyField && el.name === 'data_capture[company]'
+                                        hideCompanyField &&
+                                        el.name === 'data_capture[company]'
                                       ) {
                                         return false
                                       }
                                       if (
                                         hideInstagramField &&
-                                        (el.name === 'data_capture[instagram]' || el.name === 'instagram-info')
+                                        (el.name === 'data_capture[instagram]' ||
+                                          el.name === 'instagram-info')
                                       ) {
                                         return false
                                       }
@@ -962,14 +904,12 @@ export const BillingInfoContainer = React.memo(
                                         'password',
                                         'confirmPassword',
                                         'password-info',
-                                      ].includes(element.name) &&
-                                      isLoggedIn ? null : (
+                                      ].includes(element.name) && isLoggedIn ? null : (
                                         <React.Fragment key={element.uniqueId}>
                                           <div
-                                            className={`${
-                                              element.className
-                                            } ${props?.errors[element.name] ||
-                                              ''}`}
+                                            className={`${element.className} ${
+                                              props?.errors[element.name] || ''
+                                            }`}
                                           >
                                             {element.component ? (
                                               element.component
@@ -993,48 +933,47 @@ export const BillingInfoContainer = React.memo(
                                                   props.values,
                                                   props.errors
                                                 )}
-                                                setFieldValue={
-                                                  props.setFieldValue
-                                                }
+                                                setFieldValue={props.setFieldValue}
                                                 onBlur={props.handleBlur}
-                                                component={getFieldComponent(
-                                                  element
-                                                )}
+                                                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>
-                                    )
-                                )}
-                              </div>
-                            </React.Fragment>
-                          )
-                        })}
-                      </React.Fragment>
-                    )
-                  })}
+                                                        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>
+                                      )
+                                  )}
+                                </div>
+                              </React.Fragment>
+                            )
+                          })}
+                        </React.Fragment>
+                      )
+                    })}
                   {!_isEmpty(ticketHoldersFields.fields) && (
                     <div className="ticket-holders-fields">
                       <h2>{ticketHoldersFields.label}</h2>
@@ -1080,20 +1019,15 @@ export const BillingInfoContainer = React.memo(
                                             element.onValidate
                                               ? element.onValidate
                                               : () =>
-                                                  props.errors[
-                                                    `${element.name}-${index}`
-                                                  ]
+                                                  props.errors[`${element.name}-${index}`]
                                           )}
                                           setPhoneValidationIsLoading={
                                             setPhoneValidationIsLoading
                                           }
                                           defaultCountry={
-                                            defaultCountry ||
-                                            element.defaultCountry
-                                          }
-                                          isCountryCodeEditable={
-                                            isCountryCodeEditable
+                                            defaultCountry || element.defaultCountry
                                           }
+                                          isCountryCodeEditable={isCountryCodeEditable}
                                         />
                                       </div>
                                     )
@@ -1113,11 +1047,7 @@ export const BillingInfoContainer = React.memo(
                       className="login-register-button"
                       disabled={props.isSubmitting || phoneValidationIsLoading}
                     >
-                      {props.isSubmitting ? (
-                        <CircularProgress size={26} />
-                      ) : (
-                        buttonName
-                      )}
+                      {props.isSubmitting ? <CircularProgress size={26} /> : buttonName}
                     </Button>
                   </div>
                 </div>