tf-checkout-react 1.6.6 → 1.7.1

package/src/components/preRegistration/index.tsx

@@ -1,4 +1,7 @@
-import { Button, CircularProgress } from '@mui/material'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Button, CircularProgress, ThemeOptions } from '@mui/material'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
+import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import { Form, Formik, FormikValues } from 'formik'
 import _get from 'lodash/get'
@@ -13,7 +16,7 @@ import SnackbarAlert from '../common/SnackbarAlert'
 import ConfirmModal from '../confirmModal'
 import { ForgotPasswordModal, IForgotPasswordProps } from '../forgotPasswordModal'
 import { LoginModal, Props } from '../loginModal'
-import { formFieldsLoggedIn, formFieldsNotLoggedIn } from './constants'
+import { getFormFieldsLoggedIn, getFormFieldsNotLoggedIn } from './constants'
 import { FieldsSection } from './FieldsSection'
 import { getFormInitialValues, updateFormFieldsAttributes } from './utils'
 
@@ -30,6 +33,11 @@ interface IPreRegistrationProps extends Props, IForgotPasswordProps {
   onConfirmationSuccess?: (res: any) => void;
   onConfirmationError?: (e: AxiosError) => void;
   onLoginSuccess?: (res: any) => void;
+
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
 }
 
 export const PreRegistration: FC<IPreRegistrationProps> = ({
@@ -46,6 +54,7 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   onGetCountriesError = _identity,
   onConfirmationSuccess = _identity,
   onConfirmationError = _identity,
+  themeOptions,
 }) => {
   const [error, setError] = useState('')
   const [showModalLogin, setShowModalLogin] = useState(false)
@@ -57,6 +66,11 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   const [, setUserData] = useState({} as IProfileData)
   useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
 
+  const themeMui = createTheme(themeOptions)
+
+  const formFieldsLoggedIn = getFormFieldsLoggedIn(CONFIGS.CLIENT_NAME)
+  const formFieldsNotLoggedIn = getFormFieldsNotLoggedIn(CONFIGS.CLIENT_NAME)
+
   const formFields = updateFormFieldsAttributes(
     pFormFields || isLoggedIn ? formFieldsLoggedIn : formFieldsNotLoggedIn,
     additionalFieldAttribute
@@ -76,7 +90,7 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
         onGetCountriesSuccess(res.data)
       } catch (e) {
         if (axios.isAxiosError(e)) {
-          const error = e?.response?.data?.message || 'Error'
+          const error = 'Error'
           setError(error)
           onGetCountriesError(e)
         }
@@ -88,189 +102,195 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   const hash = getQueryVariable('hash') || ''
   const referrerId = getQueryVariable('referrer_id') || ''
   return (
-    <div className="pre-registration-container">
-      <SnackbarAlert
-        type="error"
-        isOpen={!!error}
-        message={error || ''}
-        onClose={() => {
-          setError('')
-        }}
-      />
-      {confirmModalState.show && (
-        <ConfirmModal
-          hideCancelBtn
-          onConfirm={() => setConfirmModalState({ show: false, message: '' })}
-          message={confirmModalState.message}
-        />
-      )}
-      {!isLoggedIn && (
-        <div className="account-actions-block">
-          <div className="action-item">
-            <div>
-              <span>
-                Create (or log in to) your account, then click on Confirm Registration.
-              </span>
-              <span> If you have a</span>
-              <b> Mana Common </b>
-              <span>account and password already</span>
-            </div>
-          </div>
-          <div className="action-item login-block">
-            <button
-              className="login-register-button"
-              type="button"
-              onClick={() => {
-                setShowModalLogin(true)
-              }}
-            >
-              Login
-            </button>
-          </div>
-        </div>
-      )}
-      {showModalLogin && (
-        <LoginModal
-          logo={logo}
+    <ThemeProvider theme={themeMui}>
+      <div className="pre-registration-container">
+        <SnackbarAlert
+          type="error"
+          isOpen={!!error}
+          message={error || ''}
           onClose={() => {
-            setShowModalLogin(false)
-          }}
-          onLogin={res => {
-            setShowModalLogin(false)
-            onLoginSuccess(res)
-          }}
-          showForgotPasswordButton={showForgotPasswordButton}
-          onForgotPassword={() => {
-            setShowModalLogin(false)
-            setShowModalForgotPassword(true)
+            setError('')
           }}
-          alreadyHasUser={alreadyHasUser}
         />
-      )}
-      {showModalForgotPassword && (
-        <ForgotPasswordModal
-          onClose={() => {
-            setShowModalForgotPassword(false)
-          }}
-          onLoginButtonClick={() => {
-            setShowModalForgotPassword(false)
-            setShowModalLogin(true)
-          }}
-          onForgotPasswordSuccess={onForgotPasswordSuccess}
-          onForgotPasswordError={onForgotPasswordError}
-        />
-      )}
-      <h2>Pre-Registration</h2>
-      <Formik
-        initialValues={getFormInitialValues(formFields)}
-        enableReinitialize={true}
-        onSubmit={async (values: FormikValues) => {
-          try {
-            if (isLoggedIn) {
-              if (isPreregistrationStarted) {
-                const updatedValues = { ...values }
-                const holderAgeDate = new Date(values.holderAge)
-                updatedValues.dobDay = holderAgeDate.getDate()
-                updatedValues.dobMonth = holderAgeDate.getMonth() + 1
-                updatedValues.dobYear = holderAgeDate.getFullYear()
-                updatedValues.referrerId = referrerId
-                updatedValues.shareHash = hash
-                // remove date picker string value
-                delete updatedValues.holderAge
+        {confirmModalState.show && (
+          <ConfirmModal
+            hideCancelBtn
+            onConfirm={() => setConfirmModalState({ show: false, message: '' })}
+            message={confirmModalState.message}
+          />
+        )}
+        {!isLoggedIn && (
+          <div className="account-actions-block">
+            <div className="action-item">
+              <div>
+                <span>
+                  Create (or log in to) your account, then click on Confirm Registration.
+                </span>
+                <span> If you have a</span>
+                <b> {CONFIGS.CLIENT_NAME || 'Mana Common'} </b>
+                <span>account and password already</span>
+              </div>
+            </div>
+            <div className="action-item login-block">
+              <button
+                className="login-register-button"
+                type="button"
+                onClick={() => {
+                  setShowModalLogin(true)
+                }}
+              >
+                Login
+              </button>
+            </div>
+          </div>
+        )}
+        {showModalLogin && (
+          <LoginModal
+            logo={logo}
+            onClose={() => {
+              setShowModalLogin(false)
+            }}
+            onLogin={res => {
+              setShowModalLogin(false)
+              onLoginSuccess(res)
+            }}
+            showForgotPasswordButton={showForgotPasswordButton}
+            onForgotPassword={() => {
+              setShowModalLogin(false)
+              setShowModalForgotPassword(true)
+            }}
+            alreadyHasUser={alreadyHasUser}
+          />
+        )}
+        {showModalForgotPassword && (
+          <ForgotPasswordModal
+            onClose={() => {
+              setShowModalForgotPassword(false)
+            }}
+            onLoginButtonClick={() => {
+              setShowModalForgotPassword(false)
+              setShowModalLogin(true)
+            }}
+            onForgotPasswordSuccess={onForgotPasswordSuccess}
+            onForgotPasswordError={onForgotPasswordError}
+            displaySuccessMessage
+          />
+        )}
+        <h2>Pre-Registration</h2>
+        <Formik
+          initialValues={getFormInitialValues(formFields)}
+          enableReinitialize={true}
+          onSubmit={async (values: FormikValues) => {
+            try {
+              if (isLoggedIn) {
+                if (isPreregistrationStarted) {
+                  const updatedValues = { ...values }
+                  const holderAgeDate = new Date(values.holderAge)
+                  updatedValues.dobDay = holderAgeDate.getDate()
+                  updatedValues.dobMonth = holderAgeDate.getMonth() + 1
+                  updatedValues.dobYear = holderAgeDate.getFullYear()
+                  updatedValues.referrerId = referrerId
+                  updatedValues.shareHash = hash
+                  // remove date picker string value
+                  delete updatedValues.holderAge
+
+                  const confirmationData = await confirmPreRegistration(
+                    eventId,
+                    updatedValues as IConfirmPreRegistrationRequestData
+                  )
+                  if (isWindowDefined) {
+                    window.localStorage.setItem(
+                      'pre-registration-hash',
+                      _get(confirmationData, 'attributes.hash')
+                    )
+                  }
+
+                  onConfirmationSuccess(confirmationData)
+                } else {
+                  setConfirmModalState({
+                    show: true,
+                    message: 'The preregistration has not started',
+                  })
+                }
+              } else {
+                const bodyFormData = new FormData()
+                bodyFormData.append('first_name', values.firstName)
+                bodyFormData.append('last_name', values.lastName)
+                bodyFormData.append('email', values.email)
+                bodyFormData.append('confirm_email', values.confirmEmail)
+                bodyFormData.append('zip', values.zip)
+                bodyFormData.append('country', values.country)
+                bodyFormData.append('password', values.password)
+                bodyFormData.append('password_confirmation', values.confirmPassword)
+                bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+                bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
+                bodyFormData.append('register_for', 'prereg')
 
-                const confirmationData = await confirmPreRegistration(
-                  eventId,
-                  updatedValues as IConfirmPreRegistrationRequestData
-                )
+                const res = await register(bodyFormData)
+                const profileRes = await getProfileData()
+                onLoginSuccess(res.data)
                 if (isWindowDefined) {
                   window.localStorage.setItem(
-                    'pre-registration-hash',
-                    _get(confirmationData, 'attributes.hash')
+                    'user_data',
+                    JSON.stringify(_get(profileRes, 'data'))
                   )
+                  setUserData(_get(profileRes, 'data'))
                 }
-
-                onConfirmationSuccess(confirmationData)
-              } else {
-                setConfirmModalState({
-                  show: true,
-                  message: 'The preregistration has not started',
-                })
               }
-            } else {
-              const bodyFormData = new FormData()
-              bodyFormData.append('first_name', values.firstName)
-              bodyFormData.append('last_name', values.lastName)
-              bodyFormData.append('email', values.email)
-              bodyFormData.append('confirm_email', values.confirmEmail)
-              bodyFormData.append('zip', values.zip)
-              bodyFormData.append('country', values.country)
-              bodyFormData.append('password', values.password)
-              bodyFormData.append('password_confirmation', values.confirmPassword)
-              bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
-              bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
-              bodyFormData.append('register_for', 'prereg')
+            } catch (e) {
+              const error = e as AxiosError
+              let errorMessage = error?.message || 'Error'
+              const emailErrors = _get(error, 'response.data.message.email') || ''
+              const errorDataMessage = _get(error, 'response.data.message')
 
-              const res = await register(bodyFormData)
-              const profileRes = await getProfileData()
-              onLoginSuccess(res.data)
-              if (isWindowDefined) {
-                window.localStorage.setItem(
-                  'user_data',
-                  JSON.stringify(_get(profileRes, 'data'))
-                )
-                setUserData(_get(profileRes, 'data'))
+              if (typeof errorDataMessage === 'string') {
+                errorMessage = errorDataMessage
               }
-            }
-          } catch (e) {
-            let errorMessage = e?.message || 'Error'
-            const emailErrors = e?.response?.data?.message?.email
-
-            if (typeof e?.response?.data?.message === 'string') {
-              errorMessage = e?.response?.data?.message
-            }
-            if (emailErrors?.length > 0) {
-              if (emailErrors[0] === 'The email is already used') {
-                setShowModalLogin(true)
-                setAlreadyHasUser(true)
+              if (emailErrors?.length > 0) {
+                if (emailErrors[0] === 'The email is already used') {
+                  setShowModalLogin(true)
+                  setAlreadyHasUser(true)
+                }
+              } else {
+                setError(errorMessage)
               }
-            } else {
-              setError(errorMessage)
-            }
 
-            onConfirmationError(e)
-          }
-        }}
-      >
-        {props => (
-          <Form>
-            <div className="login-modal-body">
-              <FieldsSection
-                formFields={formFields}
-                values={props.values}
-                setFieldValue={props.setFieldValue}
-                containerClass="pre-registration"
-                countries={countries}
-              />
-            </div>
-            <div className="button-container">
-              <Button
-                type="submit"
-                variant="contained"
-                className="login-register-button"
-                disabled={props.isSubmitting}
-              >
-                {props.isSubmitting ? (
-                  <CircularProgress size={26} />
-                ) : isLoggedIn ? (
-                  'Confirm Pre-Registration'
-                ) : (
-                  'Create Account'
-                )}
-              </Button>
-            </div>
-          </Form>
-        )}
-      </Formik>
-    </div>
+              onConfirmationError(error)
+            }
+          }}
+        >
+          {props => (
+            <Form>
+              <div className="login-modal-body">
+                <FieldsSection
+                  formFields={formFields}
+                  values={props.values}
+                  setFieldValue={props.setFieldValue}
+                  containerClass="pre-registration"
+                  countries={countries}
+                  themeOptions={themeOptions}
+                />
+              </div>
+              <div className="button-container">
+                <Button
+                  type="submit"
+                  variant="contained"
+                  className="login-register-button"
+                  disabled={props.isSubmitting}
+                >
+                  {props.isSubmitting ? (
+                    <CircularProgress size={26} />
+                  ) : isLoggedIn ? (
+                    'Confirm Pre-Registration'
+                  ) : (
+                    'Create Account'
+                  )}
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/registerForm/constants.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { CONFIGS } from '../../utils'
+
 export const formDefaultFields: IFormFieldsSection[] = [
   {
     name: 'basic-info',
@@ -68,7 +70,7 @@ export const formDefaultFields: IFormFieldsSection[] = [
     groupLabel: (
       <div className="email-info-block">
         <span>Choose a password for your new</span>
-        <b> Mana Common </b>
+        <b> {CONFIGS.CLIENT_NAME || 'Mana Common'} </b>
         <span>account</span>
       </div>
     ),

package/src/components/registerForm/index.tsx

@@ -63,7 +63,7 @@ export const RegistrationForm: FC<IRegistrationProps> = ({
       onGetCountriesSuccess(res.data)
     } catch (e) {
       if (axios.isAxiosError(e)) {
-        const errorMessage = e?.response?.data?.message || 'Error'
+        const errorMessage = _get(e, 'response.data.message') || 'Error'
         setErrorMessage(errorMessage)
         onGetCountriesError(e)
       }
@@ -81,7 +81,7 @@ export const RegistrationForm: FC<IRegistrationProps> = ({
       onGetStatesSuccess(res.data)
     } catch (e) {
       if (axios.isAxiosError(e)) {
-        const errorMessage = e?.response?.data?.message || 'Error'
+        const errorMessage = _get(e, 'response.data.message', {}) as AxiosError
         onGetStatesError(errorMessage)
       }
     }
@@ -115,7 +115,7 @@ export const RegistrationForm: FC<IRegistrationProps> = ({
     } catch (e) {
       if (axios.isAxiosError(e)) {
         console.log(e)
-        const errorMessage = e?.response?.data?.message || 'Error'
+        const errorMessage = _get(e, 'response.data.message') || 'Error'
         onRegisterAccountError(e)
         setshowErrorModal(true)
         setErrorMessage(errorMessage)

package/src/components/registerModal/index.tsx

@@ -1,14 +1,15 @@
 import './style.css'
 
-import { TextField } from '@mui/material'
 import { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import React, { FC } from 'react'
 
 import { getProfileData, register } from '../../api'
 import { CONFIGS } from '../../utils'
 import { requiredValidator } from '../../validators'
+import { CustomField } from '../common/CustomField'
 import { PoweredBy } from '../common/PoweredBy'
 
 interface Props {
@@ -21,8 +22,8 @@ interface Props {
 
 export const RegisterModal: FC<Props> = ({
   onClose,
-  onGetProfileDataSuccess = () => {},
-  onGetProfileDataError = () => {},
+  onGetProfileDataSuccess = _identity,
+  onGetProfileDataError = _identity,
   showPoweredByImage = false,
 }) => (
   <div
@@ -54,14 +55,8 @@ export const RegisterModal: FC<Props> = ({
         bodyFormData.append('email', email)
         bodyFormData.append('password', password)
         bodyFormData.append('password_confirmation', confirmPassword)
-        bodyFormData.append(
-          'client_id',
-          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-        )
-        bodyFormData.append(
-          'client_secret',
-          CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-        )
+        bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+        bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
         await register(bodyFormData)
         let profileResponse = null
 
@@ -69,7 +64,7 @@ export const RegisterModal: FC<Props> = ({
           profileResponse = await getProfileData()
           onGetProfileDataSuccess(profileResponse.data)
         } catch (e) {
-          onGetProfileDataError(e.response)
+          onGetProfileDataError(e as AxiosError)
           return
         }
 
@@ -95,78 +90,58 @@ export const RegisterModal: FC<Props> = ({
             </button>
             <div className="register-container__twoFields">
               <div className="is-half">
-                <Field name={'firstName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'First Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="firstName"
+                  label="First Name"
+                  type="text"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
               <div className="is-half">
-                <Field name={'lastName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Last Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="lastName"
+                  label="Last Name"
+                  type="text"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
             </div>
             <div className="register-container__singleField">
               <div className="">
-                <Field name={'email'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Email'}
-                      type={'email'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="email"
+                  label="Email"
+                  type="email"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
             </div>
             <div className="register-container__twoFields">
               <div className="is-half">
-                <Field name={'password'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Password'}
-                      type={'password'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="password"
+                  label="Password"
+                  type="password"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
               <div className="is-half">
-                <Field name={'confirmPassword'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Confirm Passwod'}
-                      type={'password'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="confirmPassword"
+                  label="Confirm Password"
+                  type="password"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
             </div>
           </div>