tf-checkout-react 1.6.6 → 1.7.2

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,8 +16,9 @@ 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 { PreRegistrationComplete } from './PreRegistrationComplete'
 import { getFormInitialValues, updateFormFieldsAttributes } from './utils'
 
 const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
@@ -30,6 +34,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 +55,7 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   onGetCountriesError = _identity,
   onConfirmationSuccess = _identity,
   onConfirmationError = _identity,
+  themeOptions,
 }) => {
   const [error, setError] = useState('')
   const [showModalLogin, setShowModalLogin] = useState(false)
@@ -55,8 +65,24 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
   const [isLoggedIn, setIsLoggedIn] = useState(Boolean(getCookieByName(X_TF_ECOMMERCE)))
   const [confirmModalState, setConfirmModalState] = useState({ show: false, message: '' })
   const [, setUserData] = useState({} as IProfileData)
+  const [isPreRegistrationComplete, setIsPreRegistrationComplete] = useState(false)
   useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
 
+  // Check if user already has a pre-registration when logged in
+  useEffect(() => {
+    if (!isLoggedIn || !isWindowDefined) return
+
+    const savedHash = window.localStorage.getItem('pre-registration-hash')
+    if (savedHash) {
+      setIsPreRegistrationComplete(true)
+    }
+  }, [isLoggedIn])
+
+  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 +102,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)
         }
@@ -85,192 +111,220 @@ export const PreRegistration: FC<IPreRegistrationProps> = ({
     fetchCountries()
   }, [])
 
-  const hash = getQueryVariable('hash') || ''
+  const localStorageHash = isWindowDefined
+    ? window.localStorage.getItem('pre-registration-hash') || ''
+    : ''
+  const hash = getQueryVariable('hash') || localStorageHash
   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}
-          onClose={() => {
-            setShowModalLogin(false)
-          }}
-          onLogin={res => {
-            setShowModalLogin(false)
-            onLoginSuccess(res)
-          }}
-          showForgotPasswordButton={showForgotPasswordButton}
-          onForgotPassword={() => {
-            setShowModalLogin(false)
-            setShowModalForgotPassword(true)
-          }}
-          alreadyHasUser={alreadyHasUser}
-        />
-      )}
-      {showModalForgotPassword && (
-        <ForgotPasswordModal
+    <ThemeProvider theme={themeMui}>
+      <div className="pre-registration-container">
+        <SnackbarAlert
+          type="error"
+          isOpen={!!error}
+          message={error || ''}
           onClose={() => {
-            setShowModalForgotPassword(false)
+            setError('')
           }}
-          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
+          />
+        )}
+        {isPreRegistrationComplete ? (
+          <PreRegistrationComplete
+            eventId={eventId}
+            logo={logo}
+            themeOptions={themeOptions}
+            onLoginSuccess={onLoginSuccess}
+            data={{} as IShareOptionsData}
+            classNamePrefix=""
+            onLinkCopied={_identity}
+            updateShareActionData={_identity}
+            hash={hash}
+            shareActionData={{} as ISubmitShareActionAttributes}
+            skipInitialValidation={true}
+          />
+        ) : (
+          <>
+            <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')
-                  )
-                }
+                      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')
+                      setIsPreRegistrationComplete(true)
+                      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 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'))
-              }
-            }
-          } catch (e) {
-            let errorMessage = e?.message || 'Error'
-            const emailErrors = e?.response?.data?.message?.email
+                    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'))
+                    }
+                  }
+                } 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')
 
-            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)
-              }
-            } else {
-              setError(errorMessage)
-            }
+                  if (typeof errorDataMessage === 'string') {
+                    errorMessage = errorDataMessage
+                  }
+                  if (emailErrors?.length > 0) {
+                    if (emailErrors[0] === 'The email is already used') {
+                      setShowModalLogin(true)
+                      setAlreadyHasUser(true)
+                    }
+                  } 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>
+                  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>
+          </>
         )}
-      </Formik>
-    </div>
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/preRegistration/style.css

@@ -0,0 +1,3 @@
+.preregistration_confirmation_header {
+    margin-bottom: 2rem;
+}

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)