tf-checkout-react 1.3.31 → 1.3.34

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

@@ -14,6 +14,7 @@ import {
   FormikProps,
   FormikValues,
 } from 'formik'
+import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
@@ -46,6 +47,7 @@ import {
   CheckboxField,
   CustomField,
   PhoneNumberField,
+  RadioGroupField,
   SelectField,
 } from '../common/index'
 import SnackbarAlert from '../common/SnackbarAlert'
@@ -253,6 +255,9 @@ export const BillingInfoContainer = React.memo(
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
     const isWindowDefined = typeof window !== 'undefined'
+    const defaultCountry = isWindowDefined
+      ? window.localStorage.getItem('eventCountry')
+      : ''
     const userData =
       isWindowDefined && window.localStorage.getItem('user_data')
         ? JSON.parse(window.localStorage.getItem('user_data') || '')
@@ -293,6 +298,7 @@ export const BillingInfoContainer = React.memo(
       zip: '',
     })
     const [loading, setLoading] = useState(true)
+    const [isCountriesLoading, setIsCountriesLoading] = useState(true)
     const [error, setError] = useState(null)
     const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(
       false
@@ -362,16 +368,19 @@ export const BillingInfoContainer = React.memo(
           const res = await getCountries()
           setCustomHeader(res)
           setCountries(
-            _map(_get(res, 'data.data'), (item, key) => ({
-              label: item,
-              value: key,
+            _map(_get(res, 'data.data'), item => ({
+              label: item.name,
+              value: item.id,
+              code: item.code,
             }))
           )
+          setIsCountriesLoading(false)
           onGetCountriesSuccess(res.data)
         } catch (e) {
           if (axios.isAxiosError(e)) {
             onGetCountriesError(e)
           }
+          setIsCountriesLoading(false)
         }
       }
       shouldFetchCountries && fetchCountries()
@@ -512,7 +521,7 @@ export const BillingInfoContainer = React.memo(
 
     return (
       <ThemeProvider theme={themeMui}>
-        {loading && (
+        {(loading || isCountriesLoading) && (
           <Backdrop
             sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
             open={true}
@@ -526,482 +535,504 @@ export const BillingInfoContainer = React.memo(
             onCountdownFinish={onCountdownFinish}
           />
         )}
-        <Formik
-          initialValues={getInitialValues(
-            dataWithUniqueIds,
-            {
-              country: _get(userData, 'country', '') || '1',
-              state: _get(userData, 'state', '') || '1',
-              brand_opt_in: optedInFieldValue,
-              ttf_opt_in: ttfOptIn,
-              ...initialValues,
-            },
-            userValues
-          )}
-          enableReinitialize={false}
-          onSubmit={async (values, formikHelpers) => {
-            try {
-              if (isLoggedIn) {
-                const checkoutBody = collectCheckoutBody(values, userData)
+        {!isCountriesLoading && (
+          <Formik
+            initialValues={getInitialValues(
+              dataWithUniqueIds,
+              {
+                country:
+                  (
+                    _find(
+                      countries,
+                      item => item.code.toLowerCase() === defaultCountry
+                    ) || {}
+                  ).value ||
+                  _get(userData, 'country', '') ||
+                  '1',
+                state: _get(userData, 'state', '') || '1',
+                brand_opt_in: optedInFieldValue,
+                ttf_opt_in: ttfOptIn,
+                ...initialValues,
+              },
+              userValues
+            )}
+            enableReinitialize={false}
+            onSubmit={async (values, formikHelpers) => {
+              try {
+                if (isLoggedIn) {
+                  const checkoutBody = collectCheckoutBody(values, userData)
 
-                if (isWindowDefined) {
-                  addAddOnsInAttributes(checkoutBody)
-                }
+                  if (isWindowDefined) {
+                    addAddOnsInAttributes(checkoutBody)
+                  }
 
-                const res = await postOnCheckout(
-                  checkoutBody,
-                  access_token,
+                  const res = await postOnCheckout(
+                    checkoutBody,
+                    access_token,
+                    flagFreeTicket
+                  )
+                  removeReferralKey()
+                  // After checkout is successful recover updated profile and store it on local storage if needed
+                  if (isWindowDefined) {
+                    const updatedUserData = await getProfileData(access_token)
+                    const profileSpecifiedData = _get(
+                      updatedUserData,
+                      'data.data'
+                    )
+                    const profileDataObj = setLoggedUserData(
+                      profileSpecifiedData
+                    )
+                    window.localStorage.setItem(
+                      'user_data',
+                      JSON.stringify(profileDataObj)
+                    )
+                  }
+
+                  handleSubmit(
+                    values,
+                    formikHelpers as FormikHelpers<any>,
+                    eventId,
+                    res
+                  )
+                  return
+                }
+                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 (isWindowDefined) {
-                  const updatedUserData = await getProfileData(access_token)
-                  const profileSpecifiedData = _get(
-                    updatedUserData,
-                    'data.data'
+                try {
+                  setLoading(true)
+                  const resRegister = await register(bodyFormData)
+                  const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
+                  const accessToken = _get(
+                    resRegister,
+                    'data.data.attributes.access_token'
+                  )
+                  const refreshToken = _get(
+                    resRegister,
+                    'data.data.attributes.refresh_token'
+                  )
+                  const userProfile = _get(
+                    resRegister,
+                    'data.data.attributes.user_profile'
                   )
-                  const profileDataObj = setLoggedUserData(profileSpecifiedData)
+
+                  setIsNewUser(true)
+                  onRegisterSuccess({
+                    xtfCookie,
+                    accessToken,
+                    refreshToken,
+                    userProfile,
+                  })
+                } catch (e) {
+                  setLoading(false)
+                  if (axios.isAxiosError(e)) {
+                    const error = e?.response?.data?.message
+                    if (_includes(error, 'You must be aged')) {
+                      formikHelpers.setFieldError('holderAge', error)
+                    }
+                    if (error?.password) {
+                      formikHelpers.setFieldError('password', error.password)
+                      formikHelpers.setFieldError(
+                        'confirmPassword',
+                        error.password
+                      )
+                    }
+                    if (error?.email && !onLogin) {
+                      // False will stand for outside controll
+                      setAlreadyHasUser(true)
+                      setShowModalLogin(true)
+                    }
+
+                    if (
+                      _includes(error, 'The cart is expired') &&
+                      !hideErrorsAlertSection
+                    ) {
+                      setError(error)
+                    }
+
+                    onRegisterError(e, values.email)
+                  }
+                  return
+                }
+                const profileData = await getProfileData()
+                const profileSpecifiedData = _get(profileData, 'data.data')
+                const profileDataObj = setLoggedUserData(profileSpecifiedData)
+                if (isWindowDefined) {
                   window.localStorage.setItem(
                     'user_data',
                     JSON.stringify(profileDataObj)
                   )
                 }
 
+                const checkoutBody = collectCheckoutBody(values, profileDataObj)
+
+                if (isWindowDefined) {
+                  addAddOnsInAttributes(checkoutBody)
+                }
+
+                const res = await postOnCheckout(
+                  checkoutBody,
+                  undefined,
+                  flagFreeTicket
+                )
+                removeReferralKey()
                 handleSubmit(
                   values,
                   formikHelpers as FormikHelpers<any>,
                   eventId,
                   res
                 )
-                return
-              }
-              const checkoutBodyForRegistration = createCheckoutDataBody(
-                ticketsQuantity.length,
-                values,
-                { emailLogged, firstNameLogged, lastNameLogged },
-                showDOB
-              )
-              const bodyFormData = createRegisterFormData(
-                values,
-                checkoutBodyForRegistration,
-                flagFreeTicket
-              )
-              try {
-                setLoading(true)
-                const resRegister = await register(bodyFormData)
-                const xtfCookie = _get(resRegister, 'headers.x-tf-ecommerce')
-                const accessToken = _get(
-                  resRegister,
-                  'data.data.attributes.access_token'
-                )
-                const refreshToken = _get(
-                  resRegister,
-                  'data.data.attributes.refresh_token'
-                )
-                const userProfile = _get(
-                  resRegister,
-                  'data.data.attributes.user_profile'
-                )
-
-                setIsNewUser(true)
-                onRegisterSuccess({
-                  xtfCookie,
-                  accessToken,
-                  refreshToken,
-                  userProfile,
-                })
               } catch (e) {
                 setLoading(false)
                 if (axios.isAxiosError(e)) {
-                  const error = e?.response?.data?.message
-                  if (_includes(error, 'You must be aged')) {
-                    formikHelpers.setFieldError('holderAge', error)
-                  }
-                  if (error?.password) {
-                    formikHelpers.setFieldError('password', error.password)
-                    formikHelpers.setFieldError(
-                      'confirmPassword',
-                      error.password
-                    )
-                  }
-                  if (error?.email && !onLogin) {
-                    // False will stand for outside controll
-                    setAlreadyHasUser(true)
-                    setShowModalLogin(true)
-                  }
-
                   if (
-                    _includes(error, 'The cart is expired') &&
-                    !hideErrorsAlertSection
+                    e.response?.status === 401 ||
+                    e.response?.data?.error === 'invalid_token'
                   ) {
-                    setError(error)
+                    if (isWindowDefined) {
+                      window.localStorage.removeItem('user_data')
+                      window.localStorage.removeItem('access_token')
+                      setUserExpired(true)
+                      setShowModalLogin(true)
+                      setIsLoggedIn(false)
+                      setShowModalSignup(false)
+                      setShowModalForgotPassword(false)
+                      const event = new window.CustomEvent('tf-logout')
+                      deleteCookieByName('X-TF-ECOMMERCE')
+                      window.document.dispatchEvent(event)
+                    }
                   }
-
-                  onRegisterError(e, values.email)
-                }
-                return
-              }
-              const profileData = await getProfileData()
-              const profileSpecifiedData = _get(profileData, 'data.data')
-              const profileDataObj = setLoggedUserData(profileSpecifiedData)
-              if (isWindowDefined) {
-                window.localStorage.setItem(
-                  'user_data',
-                  JSON.stringify(profileDataObj)
-                )
-              }
-
-              const checkoutBody = collectCheckoutBody(values, profileDataObj)
-
-              if (isWindowDefined) {
-                addAddOnsInAttributes(checkoutBody)
-              }
-
-              const res = await postOnCheckout(
-                checkoutBody,
-                undefined,
-                flagFreeTicket
-              )
-              removeReferralKey()
-              handleSubmit(
-                values,
-                formikHelpers as FormikHelpers<any>,
-                eventId,
-                res
-              )
-            } catch (e) {
-              setLoading(false)
-              if (axios.isAxiosError(e)) {
-                if (
-                  e.response?.status === 401 ||
-                  e.response?.data?.error === 'invalid_token'
-                ) {
-                  if (isWindowDefined) {
-                    window.localStorage.removeItem('user_data')
-                    window.localStorage.removeItem('access_token')
-                    setUserExpired(true)
-                    setShowModalLogin(true)
-                    setIsLoggedIn(false)
-                    setShowModalSignup(false)
-                    setShowModalForgotPassword(false)
-                    const event = new window.CustomEvent('tf-logout')
-                    deleteCookieByName('X-TF-ECOMMERCE')
-                    window.document.dispatchEvent(event)
+                  if (e.response?.data.message && !hideErrorsAlertSection) {
+                    setError(_get(e, 'response.data.message'))
                   }
+                  onSubmitError(e)
                 }
-                if (e.response?.data.message && !hideErrorsAlertSection) {
-                  setError(_get(e, 'response.data.message'))
-                }
-                onSubmitError(e)
+              } finally {
+                setLoading(false)
               }
-            } finally {
-              setLoading(false)
-            }
-          }}
-        >
-          {(props: FormikProps<any>) => (
-            <Form onSubmit={props.handleSubmit}>
-              <ErrorFocus />
-              <LogicRunner
-                brandOptIn={brandOptIn}
-                values={props.values}
-                setStates={setStates}
-                setFieldValue={props.setFieldValue}
-                setValues={props.setValues}
-                setUserValues={setUserValues}
-                onGetStatesSuccess={onGetStatesSuccess}
-                onGetStatesError={onGetStatesError}
-                shouldFetchCountries={shouldFetchCountries}
-              />
-              <div className={`billing-info-container ${theme}`}>
-                <SnackbarAlert
-                  type="error"
-                  isOpen={!!error}
-                  message={error || ''}
-                  onClose={() => {
-                    setError(null)
-                    onErrorClose()
-                  }}
+            }}
+          >
+            {(props: FormikProps<any>) => (
+              <Form onSubmit={props.handleSubmit}>
+                <ErrorFocus />
+                <LogicRunner
+                  brandOptIn={brandOptIn}
+                  values={props.values}
+                  setStates={setStates}
+                  setFieldValue={props.setFieldValue}
+                  setValues={props.setValues}
+                  setUserValues={setUserValues}
+                  onGetStatesSuccess={onGetStatesSuccess}
+                  onGetStatesError={onGetStatesError}
+                  shouldFetchCountries={shouldFetchCountries}
                 />
-                {!isLoggedIn && (
-                  <div className="account-actions-block">
-                    <div className="action-item">
-                      <div>{accountInfoTitle}</div>
-                      <div>Login & skip ahead:</div>
-                    </div>
-                    <div className="action-item login-block">
-                      <button
-                        className="login-register-button"
-                        type="button"
-                        onClick={() => {
-                          // If outside login needed to skip package login functionallity
-                          if (onLogin) {
-                            onLogin()
-                          } else {
-                            setShowModalLogin(true)
-                          }
-                        }}
-                      >
-                        Login
-                      </button>
-                      {!hideLogo && (
-                        <div className="logo-image-container">
-                          <img
-                            src={
-                              theme === 'dark'
-                                ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
-                                : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
+                <div className={`billing-info-container ${theme}`}>
+                  <SnackbarAlert
+                    type="error"
+                    isOpen={!!error}
+                    message={error || ''}
+                    onClose={() => {
+                      setError(null)
+                      onErrorClose()
+                    }}
+                  />
+                  {!isLoggedIn && (
+                    <div className="account-actions-block">
+                      <div className="action-item">
+                        <div>{accountInfoTitle}</div>
+                        <div>Login & skip ahead:</div>
+                      </div>
+                      <div className="action-item login-block">
+                        <button
+                          className="login-register-button"
+                          type="button"
+                          onClick={() => {
+                            // If outside login needed to skip package login functionallity
+                            if (onLogin) {
+                              onLogin()
+                            } else {
+                              setShowModalLogin(true)
                             }
-                            alt="nodata"
-                          />
-                        </div>
-                      )}
+                          }}
+                        >
+                          Login
+                        </button>
+                        {!hideLogo && (
+                          <div className="logo-image-container">
+                            <img
+                              src={
+                                theme === 'dark'
+                                  ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
+                                  : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
+                              }
+                              alt="nodata"
+                            />
+                          </div>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                )}
-                {_map(dataWithUniqueIds, item => {
-                  const { label, labelClassName, fields } = item
-                  return (
-                    <React.Fragment key={item.uniqueId}>
-                      <p className={labelClassName}>{label}</p>
-                      {_map(fields, group => {
-                        const { groupClassname, groupItems } = group
-                        return (
-                          <React.Fragment key={group.uniqueId}>
-                            <div className={groupClassname}>
-                              {_map(
-                                groupItems.filter(el => {
-                                  if (el.name === 'holderAge' && !showDOB) {
-                                    return false
-                                  }
-                                  if (
-                                    el.name === 'ttf_opt_in' &&
-                                    hideTtfOptIn
-                                  ) {
-                                    return false
-                                  }
-                                  if (el.name === 'phone') {
-                                    if (!hidePhoneField) {
-                                      el.required = flagRequirePhone
-                                    } else {
+                  )}
+                  {_map(dataWithUniqueIds, item => {
+                    const { label, labelClassName, fields } = item
+                    return (
+                      <React.Fragment key={item.uniqueId}>
+                        <p className={labelClassName}>{label}</p>
+                        {_map(fields, group => {
+                          const { groupClassname, groupItems } = group
+                          return (
+                            <React.Fragment key={group.uniqueId}>
+                              <div className={groupClassname}>
+                                {_map(
+                                  groupItems.filter(el => {
+                                    if (el.name === 'holderAge' && !showDOB) {
                                       return false
                                     }
-                                  }
-                                  if (
-                                    el.name === 'data_capture[wallet_address]'
-                                  ) {
-                                    if (collectMandatoryWalletAddress) {
-                                      el.required = true
+                                    if (
+                                      el.name === 'ttf_opt_in' &&
+                                      hideTtfOptIn
+                                    ) {
+                                      return false
                                     }
-                                  }
-                                  if (
-                                    [
-                                      'street_address',
-                                      'country',
-                                      'state',
-                                      'city',
-                                      'zip',
-                                    ].includes(el.name)
-                                  ) {
-                                    if (flagFreeTicket) {
-                                      el.required = 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 (
+                                      [
+                                        'street_address',
+                                        'country',
+                                        'state',
+                                        'city',
+                                        'zip',
+                                      ].includes(el.name)
+                                    ) {
+                                      if (flagFreeTicket) {
+                                        el.required = false
+                                        return false
+                                      }
+                                    }
+                                    if (
+                                      hideWalletAddressField &&
+                                      el.name === 'wallet-address-info'
+                                    ) {
                                       return false
                                     }
-                                  }
-                                  if (
-                                    hideWalletAddressField &&
-                                    el.name === 'wallet-address-info'
-                                  ) {
-                                    return false
-                                  }
-                                  return true
-                                }),
-                                element =>
-                                  [
-                                    'password',
-                                    'confirmPassword',
-                                    'password-info',
-                                  ].includes(element.name) &&
-                                  isLoggedIn ? null : [
-                                      'data_capture[wallet_address]',
+                                    return true
+                                  }),
+                                  element =>
+                                    [
+                                      'password',
+                                      'confirmPassword',
+                                      'password-info',
                                     ].includes(element.name) &&
-                                    hideWalletAddressField ? null : (
-                                    <React.Fragment key={element.uniqueId}>
+                                    isLoggedIn ? null : [
+                                        'data_capture[wallet_address]',
+                                      ].includes(element.name) &&
+                                      hideWalletAddressField ? null : (
+                                      <React.Fragment key={element.uniqueId}>
+                                        <div
+                                          className={`${
+                                            element.className
+                                          } ${props?.errors[element.name] ||
+                                            ''}`}
+                                        >
+                                          {element.component ? (
+                                            element.component
+                                          ) : (
+                                            <Field
+                                              setPhoneValidationIsLoading={
+                                                element.type === 'phone'
+                                                  ? setPhoneValidationIsLoading
+                                                  : undefined
+                                              }
+                                              name={element.name}
+                                              label={
+                                                element.name === 'phone'
+                                                  ? `${element.label}${
+                                                      flagRequirePhone
+                                                        ? ''
+                                                        : ' (optional)'
+                                                    } `
+                                                  : element.name ===
+                                                    'data_capture[wallet_address]'
+                                                  ? `${element.label}${
+                                                      !collectMandatoryWalletAddress
+                                                        ? ' (optional)'
+                                                        : ''
+                                                    } `
+                                                  : element.label
+                                              }
+                                              type={element.type}
+                                              fill={element.fill}
+                                              validate={getValidateFunctions(
+                                                element,
+                                                states,
+                                                props.values,
+                                                props.errors
+                                              )}
+                                              setFieldValue={
+                                                props.setFieldValue
+                                              }
+                                              onBlur={props.handleBlur}
+                                              component={
+                                                element.type === 'checkbox'
+                                                  ? CheckboxField
+                                                  : element.type === 'select'
+                                                  ? SelectField
+                                                  : element.type === 'phone'
+                                                  ? PhoneNumberField
+                                                  : element.type === 'date'
+                                                  ? DatePickerField
+                                                  : element.type === 'radio'
+                                                  ? RadioGroupField
+                                                  : CustomField
+                                              }
+                                              selectOptions={
+                                                element.name === 'country'
+                                                  ? countries
+                                                  : element.name === 'state'
+                                                  ? states
+                                                  : []
+                                              }
+                                              radios={element.radios}
+                                              theme={theme}
+                                              disableDropdown={
+                                                element.disableDropdown
+                                              }
+                                              defaultCountry={
+                                                defaultCountry ||
+                                                element.defaultCountry
+                                              }
+                                              dateFormat={element.format}
+                                              datePlaceholder={
+                                                element.placeholder
+                                              }
+                                            />
+                                          )}
+                                        </div>
+                                      </React.Fragment>
+                                    )
+                                )}
+                              </div>
+                            </React.Fragment>
+                          )
+                        })}
+                      </React.Fragment>
+                    )
+                  })}
+                  {!_isEmpty(ticketHoldersFields.fields) && (
+                    <div className="ticket-holders-fields">
+                      <h2>{ticketHoldersFields.label}</h2>
+                      {_map(ticketsQuantity, (_item, index) => (
+                        <div key={_item}>
+                          <h5>Ticket {index + 1}</h5>
+                          {_map(ticketHoldersFields.fields, group => {
+                            const { groupClassname, groupItems } = group
+                            return (
+                              <div key={group.id}>
+                                <div className={groupClassname}>
+                                  {_map(groupItems, element => {
+                                    if (
+                                      _includes(
+                                        ['holderFirstName', 'holderLastName'],
+                                        element.name
+                                      )
+                                    ) {
+                                      element.required = showTicketHolders
+                                    }
+                                    return (
                                       <div
-                                        className={`${element.className} ${
-                                          props?.errors[element.name]
-                                        }`}
+                                        className={element.className}
+                                        key={element.name}
                                       >
-                                        {element.component ? (
-                                          element.component
-                                        ) : (
-                                          <Field
-                                            setPhoneValidationIsLoading={
-                                              element.type === 'phone'
-                                                ? setPhoneValidationIsLoading
-                                                : undefined
-                                            }
-                                            name={element.name}
-                                            label={
-                                              element.name === 'phone'
-                                                ? `${element.label}${
-                                                    flagRequirePhone
-                                                      ? ''
-                                                      : ' (optional)'
-                                                  } `
-                                                : element.name ===
-                                                  'data_capture[wallet_address]'
-                                                ? `${element.label}${
-                                                    !collectMandatoryWalletAddress
-                                                      ? ' (optional)'
-                                                      : ''
-                                                  } `
-                                                : element.label
-                                            }
-                                            type={element.type}
-                                            fill={element.fill}
-                                            validate={getValidateFunctions(
-                                              element,
-                                              states,
-                                              props.values,
-                                              props.errors
-                                            )}
-                                            setFieldValue={props.setFieldValue}
-                                            onBlur={props.handleBlur}
-                                            component={
-                                              element.type === 'checkbox'
-                                                ? CheckboxField
-                                                : element.type === 'select'
-                                                ? SelectField
-                                                : element.type === 'phone'
-                                                ? PhoneNumberField
-                                                : element.type === 'date'
-                                                ? DatePickerField
-                                                : CustomField
-                                            }
-                                            selectOptions={
-                                              element.name === 'country'
-                                                ? countries
-                                                : element.name === 'state'
-                                                ? states
-                                                : []
-                                            }
-                                            theme={theme}
-                                            disableDropdown={
-                                              element.disableDropdown
-                                            }
-                                            defaultCountry={
-                                              element.defaultCountry
-                                            }
-                                            dateFormat={
-                                              element.format
-                                            }
-                                            datePlaceholder={
-                                              element.placeholder
-                                            }
-                                          />
-                                        )}
+                                        <Field
+                                          name={`${element.name}-${index}`}
+                                          label={`${element.label}${
+                                            element.required
+                                              ? ''
+                                              : ' (optional)'
+                                          }`}
+                                          type={element.type}
+                                          component={
+                                            element.type === 'checkbox'
+                                              ? CheckboxField
+                                              : element.type === 'phone'
+                                              ? PhoneNumberField
+                                              : CustomField
+                                          }
+                                          validate={combineValidators(
+                                            element.required
+                                              ? requiredValidator
+                                              : () =>
+                                                  props.errors[
+                                                    `${element.name}-${index}`
+                                                  ],
+                                            element.onValidate
+                                              ? element.onValidate
+                                              : () =>
+                                                  props.errors[
+                                                    `${element.name}-${index}`
+                                                  ]
+                                          )}
+                                          disableDropdown={
+                                            element.disableDropdown
+                                          }
+                                          setPhoneValidationIsLoading={
+                                            setPhoneValidationIsLoading
+                                          }
+                                          defaultCountry={
+                                            defaultCountry ||
+                                            element.defaultCountry
+                                          }
+                                        />
                                       </div>
-                                    </React.Fragment>
-                                  )
-                              )}
-                            </div>
-                          </React.Fragment>
-                        )
-                      })}
-                    </React.Fragment>
-                  )
-                })}
-                {!_isEmpty(ticketHoldersFields.fields) && (
-                  <div className="ticket-holders-fields">
-                    <h2>{ticketHoldersFields.label}</h2>
-                    {_map(ticketsQuantity, (_item, index) => (
-                      <div key={_item}>
-                        <h5>Ticket {index + 1}</h5>
-                        {_map(ticketHoldersFields.fields, group => {
-                          const { groupClassname, groupItems } = group
-                          return (
-                            <div key={group.id}>
-                              <div className={groupClassname}>
-                                {_map(groupItems, element => {
-                                  if (
-                                    _includes(
-                                      ['holderFirstName', 'holderLastName'],
-                                      element.name
                                     )
-                                  ) {
-                                    element.required = showTicketHolders
-                                  }
-                                  return (
-                                    <div
-                                      className={element.className}
-                                      key={element.name}
-                                    >
-                                      <Field
-                                        name={`${element.name}-${index}`}
-                                        label={`${element.label}${
-                                          element.required ? '' : ' (optional)'
-                                        }`}
-                                        type={element.type}
-                                        component={
-                                          element.type === 'checkbox'
-                                            ? CheckboxField
-                                            : element.type === 'phone'
-                                            ? PhoneNumberField
-                                            : CustomField
-                                        }
-                                        validate={combineValidators(
-                                          element.required
-                                            ? requiredValidator
-                                            : () =>
-                                                props.errors[
-                                                  `${element.name}-${index}`
-                                                ],
-                                          element.onValidate
-                                            ? element.onValidate
-                                            : () =>
-                                                props.errors[
-                                                  `${element.name}-${index}`
-                                                ]
-                                        )}
-                                        disableDropdown={
-                                          element.disableDropdown
-                                        }
-                                        setPhoneValidationIsLoading={
-                                          setPhoneValidationIsLoading
-                                        }
-                                        defaultCountry={element.defaultCountry}
-                                      />
-                                    </div>
-                                  )
-                                })}
+                                  })}
+                                </div>
                               </div>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    ))}
+                            )
+                          })}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                  <div className="button-container">
+                    <Button
+                      type="submit"
+                      variant="contained"
+                      className="login-register-button"
+                      disabled={props.isSubmitting || phoneValidationIsLoading}
+                    >
+                      {props.isSubmitting ? (
+                        <CircularProgress size={26} />
+                      ) : (
+                        buttonName
+                      )}
+                    </Button>
                   </div>
-                )}
-                <div className="button-container">
-                  <Button
-                    type="submit"
-                    variant="contained"
-                    className="login-register-button"
-                    disabled={props.isSubmitting || phoneValidationIsLoading}
-                  >
-                    {props.isSubmitting ? (
-                      <CircularProgress size={26} />
-                    ) : (
-                      buttonName
-                    )}
-                  </Button>
                 </div>
-              </div>
-            </Form>
-          )}
-        </Formik>
+              </Form>
+            )}
+          </Formik>
+        )}
         {showModalLogin && (
           <LoginModal
             logo={logo}