tf-checkout-react 1.4.20 → 1.4.21

package/src/components/registerForm/index.tsx

@@ -0,0 +1,192 @@
+import { Button, CircularProgress } from '@mui/material'
+import axios, { AxiosError } 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 { getCountries, getProfileData, getStates, register } from '../../api'
+import { CONFIGS, getFormInitialValues, getQueryVariable } from '../../utils'
+import { FieldsSection } from '../common/FieldSection'
+import { updateFormFieldsAttributes } from '../common/FieldSection/utils'
+import ConfirmModal from '../confirmModal'
+import { collectStates } from './adapters'
+import { formDefaultFields } from './constants'
+
+interface IRegistrationProps {
+  formFields?: Array<IFormFieldsSection>;
+  additionalFieldAttribute?: IFieldAttribute;
+  registrationType: string;
+  onGetCountriesSuccess?: (res: any) => void;
+  onGetCountriesError?: (e: AxiosError) => void;
+  onRegisterAccountSuccess?: (res: any) => void;
+  onRegisterAccountError?: (e: AxiosError) => void;
+  onGetStatesSuccess?: (res: any) => void;
+  onGetStatesError?: (e: AxiosError) => void;
+  customerEmail: string;
+}
+
+export const RegistrationForm: FC<IRegistrationProps> = ({
+  formFields,
+  additionalFieldAttribute,
+  registrationType,
+  customerEmail,
+  onGetCountriesSuccess = _identity,
+  onGetCountriesError = _identity,
+  onRegisterAccountSuccess = _identity,
+  onRegisterAccountError = _identity,
+  onGetStatesSuccess = _identity,
+  onGetStatesError = _identity,
+}) => {
+  const [errorMessage, setErrorMessage] = useState('')
+  const [countries, setCountries] = useState<{ [key: string]: string | number }[]>([])
+  const [states, setStates] = useState<{ [key: string]: string | number }[]>([])
+  const [phoneValidationIsLoading, setPhoneValidationIsLoading] = useState(false)
+  const [showErrorModal, setshowErrorModal] = useState(false)
+
+  const updatedFormFields = updateFormFieldsAttributes(
+    formFields || formDefaultFields,
+    additionalFieldAttribute
+  )
+
+  // Fetch countries data
+  const fetchCountries = async () => {
+    try {
+      const res = await getCountries()
+      setCountries(
+        _map(_get(res, 'data.data'), item => ({
+          label: item.name,
+          value: item.id,
+        }))
+      )
+      onGetCountriesSuccess(res.data)
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        const errorMessage = e?.response?.data?.message || 'Error'
+        setErrorMessage(errorMessage)
+        onGetCountriesError(e)
+      }
+    }
+  }
+
+  // Fetch states data
+  const fetchStates = async (countryId?: string | number) => {
+    try {
+      const fetchCountryId = countryId ? countryId : '1'
+      const res = await getStates(fetchCountryId)
+      const states = _get(res, 'data.data', [])
+      const mappedStates = collectStates(states)
+      setStates(mappedStates)
+      onGetStatesSuccess(res.data)
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        const errorMessage = e?.response?.data?.message || 'Error'
+        onGetStatesError(errorMessage)
+      }
+    }
+  }
+
+  const handleRegisterAccount = async (values: FormikValues) => {
+    const accessHash = getQueryVariable('hash') || ''
+
+    try {
+      const bodyFormData = new FormData()
+
+      bodyFormData.append('first_name', values.firstName)
+      bodyFormData.append('last_name', values.lastName)
+      bodyFormData.append('email', values.email)
+      bodyFormData.append('zip', values.zip)
+      bodyFormData.append('city', values.city)
+      bodyFormData.append('country', values.country)
+      bodyFormData.append('password', values.password)
+      bodyFormData.append('phone', values.phone || '')
+      bodyFormData.append('password_confirmation', values.confirmPassword)
+      bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+      bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
+      bodyFormData.append('register_for', registrationType)
+      bodyFormData.append('delegation_access_hash', accessHash)
+
+      await register(bodyFormData)
+      const profileRes = await getProfileData()
+
+      window.localStorage.setItem(
+        'user_data',
+        JSON.stringify(_get(profileRes, 'data.data'))
+      )
+      onRegisterAccountSuccess(profileRes)
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        console.log(e)
+        const errorMessage = e?.response?.data?.message || 'Error'
+        onRegisterAccountError(e)
+        setshowErrorModal(true)
+        setErrorMessage(errorMessage)
+      } else if (e instanceof Error) {
+        setErrorMessage(e?.message || 'Error')
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchCountries()
+    fetchStates()
+  }, [])
+
+  return (
+    <div className="register-form-container">
+      <h2>Create an account</h2>
+      <div className="register-sub-title">
+        To manage your tickets, please create an account:
+      </div>
+      {showErrorModal && (
+        <ConfirmModal
+          hideCancelBtn={true}
+          message={errorMessage}
+          onClose={() => (window.location.href = '/')}
+          onConfirm={() => (window.location.href = '/')}
+        />
+      )}
+      {errorMessage && <div className="register-error">{errorMessage}</div>}
+      <Formik
+        initialValues={{
+          ...getFormInitialValues(updatedFormFields),
+          email: customerEmail,
+        }}
+        enableReinitialize={true}
+        onSubmit={handleRegisterAccount}
+      >
+        {props => (
+          <Form>
+            <div className="register-body">
+              <FieldsSection
+                disableField={'email'}
+                containerClass="register"
+                formFields={updatedFormFields}
+                values={props.values}
+                setFieldValue={props.setFieldValue}
+                setPhoneValidationIsLoading={setPhoneValidationIsLoading}
+                countries={countries}
+                states={states}
+                onFieldChange={(name, value) => {
+                  if (name === 'country') {
+                    fetchStates(value)
+                  }
+                }}
+              />
+            </div>
+            <div className="button-container">
+              <Button
+                className="register-button"
+                type="submit"
+                disabled={props.isSubmitting || phoneValidationIsLoading}
+              >
+                {props.isSubmitting ? <CircularProgress size={26} /> : 'Create Account'}
+              </Button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  )
+}

package/src/index.ts

@@ -2,10 +2,7 @@ export { BillingInfoContainer } from './components/billing-info-container/index'
 export { PaymentContainer } from './components/paymentContainer/index'
 export { ConfirmationContainer } from './components/confirmationContainer/index'
 export { TicketsContainer } from './components/ticketsContainer/index'
-export {
-  currencyNormalizerCreator,
-  createFixedFloatNormalizer,
-} from './normalizers'
+export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
 export { LoginModal } from './components/loginModal'
 export { MyTicketsContainer } from './components/myTicketsContainer'
 export { OrderDetailsContainer } from './components/orderDetailsContainer'
@@ -16,7 +13,9 @@ export { RsvpContainer } from './components/rsvpContainer'
 export { ResetPasswordContainer } from './components/resetPasswordContainer'
 export { ForgotPasswordModal } from './components/forgotPasswordModal'
 export { AddonsContainter } from './components/addonsContainer'
+export { DelegationsContainer } from './components/delegationsContainer'
 export { PoweredBy } from './components/common/PoweredBy'
 export { SeatMapContainer } from './components/seatMapContainer'
 export { IDVerification } from './components/idVerificationContainer'
 export { VERIFICATION_STATUSES } from './components/idVerificationContainer/constants'
+export { useCookieListener } from './hooks/useCookieListener'

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/guestTicketDelegation.d.ts

@@ -0,0 +1,18 @@
+interface ICheckCustomerExistsData {
+  action: string;
+  alreadyApplied: boolean;
+  gropName: string | null;
+  id: string;
+  oneTimeAction: boolean;
+  phase: string;
+  point: string;
+  socialUrl: string | null;
+}
+
+interface ITicketIssueData {
+  ticketTypeId: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+  confirmEmail: string;
+}

package/src/types/formFields.d.ts

@@ -0,0 +1,29 @@
+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;
+  disableDropdown?: boolean;
+}
+
+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/form.ts

@@ -0,0 +1,34 @@
+import _forEach from 'lodash/forEach'
+import _get from 'lodash/get'
+
+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':
+        case 'state':
+          initialValues[fieldItem.name] = ''
+          break
+        case 'brandOptIn':
+          initialValues[fieldItem.name] = true
+          break
+        case 'confirmEmail':
+          initialValues[fieldItem.name] =
+            _get(userData, fieldItem.name) || _get(userData, 'email') || ''
+          break
+        default:
+          initialValues[fieldItem.name] = _get(userData, fieldItem.name) || ''
+          break
+      }
+    })
+  })
+
+  return initialValues
+}

package/src/utils/index.ts

@@ -6,7 +6,9 @@ export { createCheckoutDataBodyWithDefaultHolder } from './createCheckoutDataBod
 export { setCustomCookie, getCookieByName, deleteCookieByName } from './cookies'
 export { getDomain } from './getDomain'
 export { createMarkup } from './createMarkup'
+export { replaceVarInString } from './replaceVarInString'
+export { isBrowser } from './isBrowser'
+export { getFormInitialValues } from './form'
 export { setLoggedUserData } from './auth'
 export { createElementFromHTML } from './htmlNodeFromString'
-export { isBrowser } from './isBrowser'
 export { isJson } from './jsonUtils'

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
+  })
+}

package/src/validators/index.ts

@@ -11,9 +11,9 @@ export function isFalsy(item: any) {
   try {
     if (
       !item || // handles most, like false, 0, null, etc
-      (typeof item == 'object' &&
+      (typeof item === 'object' &&
       Object.keys(item).length === 0 && // for empty objects, like {}, []
-        !(typeof item.addEventListener == 'function')) // omit webpage elements
+        !(typeof item.addEventListener === 'function')) // omit webpage elements
     ) {
       return true
     }