tf-checkout-react 1.3.11 → 1.3.12-beta.2

package/src/components/preRegistration/index.tsx

@@ -0,0 +1,219 @@
+import { Button, CircularProgress } from '@mui/material'
+import axios from 'axios'
+import { Form, Formik, FormikValues } from 'formik'
+import _get from 'lodash/get'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import React, { FC, useEffect, useState } from 'react'
+
+import { confirmPreRegistration, getCountries, register } from '../../api'
+import { useCookieListener } from '../../hooks/useCookieListener'
+import { getCookieByName } from '../../utils'
+import SnackbarAlert from '../common/SnackbarAlert'
+import {
+  ForgotPasswordModal,
+  IForgotPasswordProps,
+} from '../forgotPasswordModal'
+import { ILoginModalProps, LoginModal } from '../loginModal'
+import { formFieldsLoggedIn, formFieldsNotLoggedIn } from './constants'
+import { FieldsSection } from './FieldsSection'
+import { getFormInitialValues, updateFormFieldsAttributes } from './utils'
+
+const X_TF_ECOMMERCE = 'X-TF-ECOMMERCE'
+
+interface IPreRegistrationProps extends ILoginModalProps, IForgotPasswordProps {
+  eventId: string | number;
+  formFields?: IFormFieldsSection[];
+  additionalFieldAttribute?: IFieldAttribute;
+}
+
+export const PreRegistration: FC<IPreRegistrationProps> = ({
+  eventId,
+  formFields: pFormFields,
+  additionalFieldAttribute,
+
+  logo,
+  showForgotPasswordButton,
+  onLoginSuccess = _identity,
+  onForgotPasswordSuccess = _identity,
+  onForgotPasswordError = _identity,
+}) => {
+  const [error, setError] = useState('')
+  const [showModalLogin, setShowModalLogin] = useState(false)
+  const [showModalForgotPassword, setShowModalForgotPassword] = useState(false)
+  const [countries, setCountries] = useState<
+    { [key: string]: string | number }[]
+  >([])
+  const [isLoggedIn, setIsLoggedIn] = useState(
+    Boolean(getCookieByName(X_TF_ECOMMERCE))
+  )
+  useCookieListener(X_TF_ECOMMERCE, value => setIsLoggedIn(Boolean(value)))
+
+  const formFields = updateFormFieldsAttributes(
+    pFormFields || isLoggedIn ? formFieldsLoggedIn : formFieldsNotLoggedIn,
+    additionalFieldAttribute
+  )
+
+  useEffect(() => {
+    // fetch countries data
+    const fetchCountries = async () => {
+      try {
+        const res = await getCountries()
+        setCountries(
+          _map(_get(res, 'data.data'), (item, key) => ({
+            label: item,
+            value: key,
+          }))
+        )
+        // onGetCountriesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          const error = e?.response?.data?.message || 'Error'
+          setError(error)
+          // onGetCountriesError(e)
+        }
+      }
+    }
+    fetchCountries()
+  }, [])
+
+  return (
+    <div className="pre-registration-container">
+      <SnackbarAlert
+        type="error"
+        isOpen={!!error}
+        message={error || ''}
+        onClose={() => {
+          setError('')
+        }}
+      />
+      {!isLoggedIn && (
+        <div className="account-actions-block">
+          <div className="action-item">
+            <div>
+              Got a <strong>MANA Common</strong> account?
+            </div>
+            <div>Login & skip ahead:</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)
+          }}
+        />
+      )}
+      {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) {
+              const updatedValues = { ...values }
+              const holderAgeDate = new Date(values.holderAge)
+              updatedValues.dobDay = holderAgeDate.getDate()
+              updatedValues.dobMonth = holderAgeDate.getMonth() + 1
+              updatedValues.dobYear = holderAgeDate.getFullYear()
+              // remove date picker string value
+              delete updatedValues.holderAge
+
+              await confirmPreRegistration(
+                eventId,
+                updatedValues as IConfirmPreRegistrationRequestData
+              )
+            } 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('register_for', 'prereg')
+
+              await register(bodyFormData)
+            }
+          } catch (e) {
+            if (axios.isAxiosError(e)) {
+              const error = e?.response?.data?.message || 'Error'
+              setError(error)
+            } else if (e instanceof Error) {
+              setError(e?.message || 'Error')
+            }
+          }
+        }}
+      >
+        {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>
+  )
+}

package/src/components/preRegistration/utils.ts

@@ -0,0 +1,95 @@
+import { FormikValues } from 'formik'
+import _forEach from 'lodash/forEach'
+import _get from 'lodash/get'
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+
+import { combineValidators, requiredValidator } from '../../validators'
+
+export const getValidateFunctions = ({
+  element,
+  values,
+}: {
+  element: IFormField;
+  values: FormikValues;
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const validationFunctions: any[] = []
+  if (element.required) {
+    validationFunctions.push(requiredValidator)
+  }
+
+  if (element.onValidate) {
+    validationFunctions.push(element.onValidate)
+  }
+
+  if (element.name === 'confirmEmail') {
+    const isSameEmail = (confirmEmail?: string) =>
+      values.email !== confirmEmail
+        ? 'Please confirm your email address correctly'
+        : null
+    validationFunctions.push(isSameEmail)
+  }
+
+  if (element.name === 'confirmPassword') {
+    const isSame = (confirmPassword?: string) =>
+      values.password !== confirmPassword
+        ? 'Password confirmation does not match'
+        : null
+    validationFunctions.push(isSame)
+  }
+
+  return combineValidators(...validationFunctions)
+}
+
+export const getFormInitialValues = (fieldsSections: IFormFieldsSection[]) => {
+  const initialValues: { [key: string]: string | number | boolean } = {}
+  const isWindowDefined = typeof window !== 'undefined'
+  const userData = JSON.parse(
+    isWindowDefined ? window.localStorage.getItem('user_data') || '{}' : '{}'
+  ) as IProfileData
+
+  _forEach(fieldsSections, item => {
+    _forEach(item.fields, fieldItem => {
+      switch (fieldItem.name) {
+        case 'country':
+        case 'numTickets':
+          initialValues[fieldItem.name] = 1
+          break
+        case 'brandOptIn':
+          initialValues[fieldItem.name] = true
+          break
+        default:
+          initialValues[fieldItem.name] = _get(userData, fieldItem.name) || ''
+          break
+      }
+    })
+  })
+
+  return initialValues
+}
+
+export const updateFormFieldsAttributes = (
+  formFields: IFormFieldsSection[],
+  attributes?: IFieldAttribute
+) => {
+  if (attributes && !_isEmpty(attributes)) {
+    const updatedFormFields = _map(formFields, fieldSection => {
+      const fieldSectionAttributes = attributes[fieldSection.name] || {}
+
+      const updatedFields = _map(fieldSection.fields, fieldItem => {
+        const fieldItemAttributes = attributes[fieldItem.name] || {}
+        return { ...fieldItem, ...fieldItemAttributes }
+      })
+
+      return {
+        ...fieldSection,
+        ...fieldSectionAttributes,
+        fields: updatedFields,
+      }
+    })
+
+    return updatedFormFields
+  }
+  return formFields
+}

package/src/hooks/useCookieListener.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from 'react'
+
+import { getCookieByName } from '../utils'
+
+export const useCookieListener = (
+  key: string,
+  handler: (value: string | null) => void
+) => {
+  const getCookie = () => getCookieByName(key)
+  const [intervalValue, setIntervalValue] = useState<NodeJS.Timeout>()
+  const cookieRef = useRef<string>(getCookie())
+
+  const handleCookieChange = () => {
+    const currentCookie = getCookie()
+    const prevCookie = cookieRef.current
+
+    if (currentCookie !== prevCookie) {
+      cookieRef.current = getCookie()
+      handler(cookieRef.current)
+    }
+  }
+
+  useEffect(() => {
+    const interval = setInterval(handleCookieChange, 500)
+    setIntervalValue(interval)
+
+    return () => {
+      intervalValue && clearInterval(intervalValue)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+}

package/src/hooks/useEventListener.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react'
+
+export const useEventListener = (
+  eventName: string,
+  handler: () => void,
+  element = window
+) => {
+  // Create a ref that stores handler
+  const savedHandler = useRef<{ current: () => void }>()
+  // Update ref.current value if handler changes.
+
+  useEffect(() => {
+    savedHandler.current = handler
+  }, [handler])
+
+  useEffect(
+    () => {
+      // Make sure element supports addEventListener
+      const isSupported = element && element.addEventListener
+      if (!isSupported) return
+      // Create event listener that calls handler function stored in ref
+      const eventListener = (event: Event) => savedHandler.current(event)
+      // Add event listener
+      element.addEventListener(eventName, eventListener)
+      // Remove event listener on cleanup
+      return () => {
+        element.removeEventListener(eventName, eventListener)
+      }
+    },
+    [eventName, element] // Re-run if eventName or element changes
+  )
+}

package/src/index.ts

@@ -15,4 +15,5 @@ export { RedirectModal } from './components/common/RedirectModal'
 export { RsvpContainer } from './components/rsvpContainer'
 export { ResetPasswordContainer } from './components/resetPasswordContainer'
 export { ForgotPasswordModal } from './components/forgotPasswordModal'
-export { AddonsContainter } from './components/addonsContainer'
+export { AddonsContainter } from './components/addonsContainer'
+export { PreRegistration } from './components/preRegistration'

package/src/types/api/auth.d.ts

@@ -0,0 +1,55 @@
+// autorize request body
+interface IAuthorizeRequestData {
+  email: string;
+  password: string;
+}
+
+// authorize, get user data
+interface IProfileData {
+  id: number | string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  phone: string;
+  streetAddress: string;
+  zipCode: number;
+  countryId: number;
+  company: string;
+  state: string | number;
+  stateId: number;
+  city: string;
+  username: string;
+  screenName: string | null;
+  bio: string;
+  shortBio: string | null;
+  region: string | null;
+  image: string;
+  recommendedEvents: Array<any>;
+  rnRoles: Array<string>;
+  hasDashboardAccess: boolean;
+  ticketHolders: Array<any>;
+}
+
+interface IProfileResponse extends IAxiosResponseData {
+  data: IProfileData;
+}
+
+// signup request body
+interface ISignupRequestData {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  passwordConfirmation: string;
+  checkCartExpiration: boolean;
+  confirmEmail?: string;
+}
+
+interface ISignupRequestDataExtended extends ISignupRequestData {
+  phone: string | number;
+  countryId: string | number;
+  city: string;
+  stateId: string | number;
+  streetAddress: string;
+  zip: string | number;
+}

package/src/types/api/preRegistration.d.ts

@@ -0,0 +1,11 @@
+interface IConfirmPreRegistrationRequestData {
+  brandOptIn: boolean;
+  confirmEmail: string;
+  dobDay: number;
+  dobMonth: number;
+  dobYear: number;
+  email: string;
+  numTickets: string | number;
+  password: string;
+  zip: string | number;
+}

package/src/types/formFields.d.ts

@@ -0,0 +1,30 @@
+interface IFormField {
+  name: string;
+  label: string;
+
+  uniqueId?: string;
+  component?: HTMLElement | JSX.Element;
+  type?: string;
+  required?: boolean;
+  className?: string;
+  options?: { [key: string]: string | number }[];
+  onValidate?: (() => void) | null;
+}
+
+interface IFormFieldsSection {
+  name: string;
+  fields: IFormField[];
+
+  groupLabel?: string | HTMLElement | JSX.Element;
+  groupLabelVars?: string[];
+  groupLabelClassName?: string;
+  groupClassName?: string;
+  id?: string | number;
+  uniqueId?: string;
+}
+
+interface IFieldAttribute {
+  [key: string]: {
+    [key: string]: string | number | boolean | Array<string | number>;
+  };
+}

package/src/utils/cookies.ts

@@ -1,29 +1,29 @@
 import { getDomain } from './getDomain'
 
-export function setCustomCookie(name: string, value: string, days: number = 5) {
+export function setCustomCookie(name: string, value: string, days = 5) {
   let expires = ''
   if (days) {
-    let date = new Date()
+    const date = new Date()
     date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
     expires = '; expires=' + date.toUTCString()
   }
   if (typeof window !== 'undefined') {
     const domain = getDomain(window.location.hostname)
     document.cookie =
-      name + '=' + (value || '') + expires + '; path=/' + `; domain=${domain}`
+      name + '=' + (value || '') + expires + `; path=/; domain=${domain}`
   }
 }
 
 export function getCookieByName(cname: string) {
   if (typeof window === 'undefined') return ''
-  let name = cname + '='
-  let ca = document.cookie.split(';')
+  const name = cname + '='
+  const ca = document.cookie.split(';')
   for (let i = 0; i < ca.length; i++) {
     let c = ca[i]
-    while (c.charAt(0) == ' ') {
+    while (c.charAt(0) === ' ') {
       c = c.substring(1)
     }
-    if (c.indexOf(name) == 0) {
+    if (c.indexOf(name) === 0) {
       return c.substring(name.length, c.length)
     }
   }

package/src/utils/index.ts

@@ -6,3 +6,4 @@ export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBod
 export { setCustomCookie, getCookieByName, deleteCookieByName } from './cookies'
 export { getDomain } from './getDomain'
 export { createMarkup } from './createMarkup'
+export { replaceVarInString } from './replaceVarInString'

package/src/utils/replaceVarInString.ts

@@ -0,0 +1,9 @@
+export const replaceVarInString = (message = '', varArray: Array<string>) => {
+  const re = new RegExp(/\{.*?\}/g)
+  let index = 0
+  return message.replace(re, _ => {
+    const value = varArray[index] || ''
+    index++
+    return value
+  })
+}