tf-checkout-react 1.4.20 → 1.4.21

package/dist/utils/form.d.ts

@@ -0,0 +1,3 @@
+export declare const getFormInitialValues: (fieldsSections: IFormFieldsSection[]) => {
+    [key: string]: string | number | boolean;
+};

package/dist/utils/index.d.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/dist/utils/replaceVarInString.d.ts

@@ -0,0 +1 @@
+export declare const replaceVarInString: (message: string | undefined, varArray: Array<string>) => string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.20",
+  "version": "1.4.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/guestTicketDelegation.ts

@@ -0,0 +1,79 @@
+import { AxiosRequestConfig, AxiosResponse } from 'axios'
+
+import { publicRequest } from '../utils/setConfigs'
+
+export const getCustomerExistsData = async (
+  accessHash: string
+): Promise<ICheckCustomerExistsData> => {
+  const response: AxiosResponse<ICheckCustomerExistsData, AxiosRequestConfig> =
+    await publicRequest.get(`/v1/delegation-access/${accessHash}/customer-exists`)
+  return response.data
+}
+
+interface IDelegationTicketType {
+  delegationMaxQuantity: number | string;
+}
+
+interface IIssueTicketResponseData {
+  delegationName: string;
+  eventImage: string;
+  eventName: string;
+  ticketTypes: {
+    [key: number]: IDelegationTicketType;
+  };
+}
+
+interface IIssueTicketResponse {
+  data: {
+    attributes: IIssueTicketResponseData;
+    relationships: Array<any>;
+    type: string;
+    message: string;
+  };
+}
+
+export interface IDelegationsTicketType {
+  [key: number]: {
+    delegationMaxQuantity: string | number;
+    delegationQuantityIssued: string | number;
+    matrixRecordId: string | number;
+    optionValue: string | number;
+  };
+}
+export interface IDelegationsData {
+  delegationName: string;
+  eventImage: string;
+  eventName: string;
+  ticketTypes: IDelegationsTicketType;
+  tickets: Array<any>;
+}
+
+interface IDelegationsResponse {
+  data: {
+    data: {
+      attributes: IDelegationsData;
+      relationships: Array<any>;
+      type: string;
+    };
+  };
+}
+
+export const getDelegationTickets = (
+  accessHash: string
+): Promise<IDelegationsResponse> => {
+  const res = publicRequest.get(`v1/delegation-access/${accessHash}/consumer-page-info`)
+  return res
+}
+
+export const issueTicket = async (
+  accessHash: string,
+  data: ITicketIssueData
+): Promise<IIssueTicketResponse> => {
+  const response: AxiosResponse<IIssueTicketResponse, AxiosRequestConfig> =
+    await publicRequest.post(`v1/delegation-access/${accessHash}/issue-ticket`, {
+      data: {
+        attributes: data,
+      },
+    })
+  return response.data
+}

package/src/api/index.ts

@@ -128,6 +128,8 @@ publicRequest.setBaseUrl = (baseUrl: string) =>
 publicRequest.setAccessToken = token =>
   (publicRequest.defaults.headers.common.Authorization = token)
 
+export { issueTicket, getDelegationTickets } from './guestTicketDelegation'
+
 export const setCustomHeader = (response: any) => {
   const guestHeaderResponseValue = _get(response, 'headers.authorization-guest')
   const guestHeaderExistingValue = _get(response, 'config.headers[Authorization-Guest]')
@@ -232,7 +234,6 @@ export const postOnCheckout = (data: any, accessToken?: string, freeTicket = fal
     delete data.attributes.city
     delete data.attributes.country
     delete data.attributes.state
-    delete data.attributes.zip
     delete data.attributes.street_address
   }
   const res = publicRequest.post(
@@ -338,7 +339,7 @@ export const getCountries = () => publicRequest.get('/countries/list')
 export const getConfirmationData = (orderHash: string) =>
   publicRequest.get(`v1/order/${orderHash}/payment/complete`)
 
-export const getStates = (countryId: string) =>
+export const getStates = (countryId: string | number) =>
   publicRequest.get(`/countries/${countryId}/states/`)
 
 export const getOrders = (page: number, limit: number, eventSlug: string) =>

package/src/components/billing-info-container/utils.ts

@@ -84,7 +84,7 @@ export const createRegisterFormData = (
     if (
       !(
         flagFreeTicket &&
-        ['country', 'state', 'city', 'street_address', 'zip'].includes(key)
+        ['country', 'state', 'city', 'street_address'].includes(key)
       )
     ) {
       bodyFormData.append(key, item)

package/src/components/common/CustomField.tsx

@@ -47,6 +47,7 @@ export const CustomField = ({
   multiline = false,
   minRows,
   maxRows,
+  disabled,
 }: ICustomField & IOtherProps) => {
   const [isShrinked, setIsShrinked] = useState(Boolean(field.value))
   const _ref = useRef<HTMLInputElement>(null)
@@ -70,6 +71,7 @@ export const CustomField = ({
 
   return (
     <TextField
+      disabled={disabled}
       placeholder=""
       id={field.name}
       label={label}

package/src/components/common/FieldSection/index.tsx

@@ -0,0 +1,141 @@
+import { Field, FormikValues } from 'formik'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import React, { FC } from 'react'
+
+import { replaceVarInString } from '../../../utils'
+import {
+  CheckboxField,
+  CustomField,
+  DatePickerField,
+  PhoneNumberField,
+  SelectField,
+} from '../index'
+import { getFieldClassNames, getValidateFunctions, insertHTML } from './utils'
+
+export interface IFieldsSectionProps {
+  formFields?: IFormFieldsSection[];
+  values: FormikValues;
+  setFieldValue: (
+    field: string,
+    value: FormikValues | string | number,
+    shouldValidate?: boolean | undefined
+  ) => void;
+  disableField?: string;
+  countries?: { [key: string]: string | number }[];
+  states?: { [key: string]: string | number }[];
+  theme?: 'dark' | 'light';
+  containerClass?: string;
+  setPhoneValidationIsLoading?: (isLoading: boolean) => void;
+  onFieldChange?: (name: string, value: string | number) => void;
+}
+
+const SectionContainer: FC<{ className: string }> = ({
+  children,
+  className,
+}) => <div className={className}>{children}</div>
+
+export const FieldsSection = ({
+  formFields = [],
+  countries = [],
+  states = [],
+  values,
+  setFieldValue,
+  theme,
+  containerClass = '',
+  setPhoneValidationIsLoading = _identity,
+  onFieldChange = _identity,
+  disableField,
+}: IFieldsSectionProps) => (
+  <>
+    {_map(formFields, (item, index) => {
+      const {
+        name,
+        groupLabel,
+        groupLabelVars = [],
+        groupLabelClassName,
+        groupClassName = '',
+        fields,
+      } = item
+      return (
+        <SectionContainer key={name} className={groupClassName}>
+          <span id={`group_label_${index}`} className={groupLabelClassName}>
+            {typeof groupLabel === 'string'
+              ? insertHTML(
+                  `group_label_${index}`,
+                  replaceVarInString(groupLabel, groupLabelVars)
+                )
+              : groupLabel}
+          </span>
+          <div className={`fields-container ${groupClassName}`}>
+            {_map(fields, (fieldData, fieldIndex) => {
+              const {
+                name,
+                label,
+                className = 'full-width',
+                type,
+                component,
+                options = [],
+                required,
+              } = fieldData
+              const id = `${name}-${fieldIndex}`
+              const classNames = `${containerClass}-container__field ${className}`
+              return (
+                component || (
+                  <div
+                    key={name}
+                    id={id}
+                    className={getFieldClassNames(id, classNames)}
+                  >
+                    <Field
+                      disabled={name === disableField || name === 'state' && !states.length}
+                      name={name}
+                      label={`${label}${required ? '' : ' (optional)'}`}
+                      type={type}
+                      validate={name === 'state' && !states.length ? false : getValidateFunctions({
+                        element: fieldData,
+                        values,
+                      })}
+                      setFieldValue={setFieldValue}
+                      component={
+                        type === 'checkbox'
+                          ? CheckboxField
+                          : type === 'select'
+                          ? SelectField
+                          : type === 'phone'
+                          ? PhoneNumberField
+                          : type === 'date'
+                          ? DatePickerField
+                          : CustomField
+                      }
+                      options={
+                        name === 'country'
+                          ? countries
+                          : name === 'state'
+                          ? states
+                          : options
+                      }
+                      theme={theme}
+                      setPhoneValidationIsLoading={
+                        type === 'phone'
+                          ? setPhoneValidationIsLoading
+                          : undefined
+                      }
+                      onChange={(e: React.FormEvent<EventTarget>) => {
+                        const element = e.target as HTMLInputElement
+                        const { value } = element
+                        setFieldValue(name, value)
+                        onFieldChange(name, value)
+                      }}
+                      disableDropdown={fieldData.disableDropdown}
+                    />
+                  </div>
+                )
+              )
+            })}
+          </div>
+        </SectionContainer>
+      )
+    })}
+  </>
+)

package/src/components/common/FieldSection/utils/index.tsx

@@ -0,0 +1,92 @@
+import { FormikValues } from 'formik'
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+
+import { isBrowser } from '../../../../utils'
+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 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
+}
+
+export const getFieldClassNames = (id: string, existingClassNames: string) => {
+  if (isBrowser) {
+    const elem = document && document.getElementById(id)
+
+    if ((elem?.parentElement?.clientWidth || 0) < 375) {
+      return existingClassNames + ' full-width'
+    }
+  }
+
+  return existingClassNames
+}
+
+export const insertHTML = (elementId: string, text = '') => {
+  if (isBrowser) {
+    const elem = document && document.getElementById(elementId)
+
+    if (!elem?.childNodes.length) {
+      elem?.insertAdjacentHTML('afterbegin', text)
+    }
+  }
+
+  return null
+}

package/src/components/common/SelectField/index.tsx

@@ -86,7 +86,7 @@ function SelectField({
           }}
           sx={{ textAlign: 'start' }}
         >
-          {options.map((option: ISelectOption) => (
+          {options?.map((option: ISelectOption) => (
             <MenuItem key={option.label} value={option.value}>
               {isMultiple && (
                 <Checkbox checked={value.indexOf(option.value) > -1} />

package/src/components/common/index.tsx

@@ -3,7 +3,7 @@ export { CustomField } from './CustomField'
 export { FormikPhoneNumberField } from './FormikPhoneNumberField'
 export { PhoneNumberField } from './PhoneNumberField'
 export { Loader } from './Loader'
-export { NativeSelectField } from './NativeSelectFeild'
-export { RadioGroupField } from './RadioGroupField'
 export { SelectField } from './SelectField'
 export { DatePickerField } from './DatePickerField'
+export { NativeSelectField } from './NativeSelectFeild'
+export { RadioGroupField } from './RadioGroupField'

package/src/components/confirmModal/index.tsx

@@ -9,8 +9,8 @@ interface Props {
   message: string;
   loading?: boolean;
   hideCancelBtn?: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
+  onClose?: () => void;
+  onConfirm?: () => void;
 }
 
 const style: React.CSSProperties = {

package/src/components/delegationsContainer/IssueComponent.tsx

@@ -0,0 +1,155 @@
+import axios, { AxiosError } from 'axios'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import React, { useEffect, useState } from 'react'
+
+import { IDelegationsData, IDelegationsTicketType } from '../../api/guestTicketDelegation'
+import { getDelegationTickets, issueTicket } from '../../api/index'
+import { CONFIGS, getQueryVariable } from '../../utils'
+import { Loader } from '../common'
+import ConfirmModal from '../confirmModal'
+import { DELEGATION_ACCESS_ERROR } from '../idVerificationContainer/constants'
+import IssueTicketForm from './IssueTicketForm'
+import TicketsAssignedTable from './TicketsAssignedTable'
+import TicketsAvailableTable from './TicketsAvailableTable'
+
+export interface IssueTicketData {
+  headTitle?: string;
+  classNamePrefix?: string;
+  onGetIssuePageDataSuccess?: () => void;
+  onGetIssuePageDataError?: (e: AxiosError) => void;
+}
+
+const IssueComponent = ({
+  classNamePrefix = 'delegations',
+  headTitle = 'Manage Your Guest Tickets',
+  onGetIssuePageDataSuccess = _identity,
+  onGetIssuePageDataError = _identity,
+}: IssueTicketData) => {
+  const [loading, setLoading] = useState(true)
+  const [showMaxQtyModal, setShowMaxQtyModal] = useState(false)
+  const [showSuccessModal, setShowSuccessModal] = useState(false)
+  const [error, setError] = useState('')
+  const accessHash = getQueryVariable('hash') || ''
+  const [issuePageData, setIssuePageData] = useState<IDelegationsData>(
+    {} as IDelegationsData
+  )
+
+  useEffect(() => {
+    const fetchDelegationTickets = async () => {
+      try {
+        const res = await getDelegationTickets(accessHash)
+        setLoading(false)
+        setIssuePageData(res?.data?.data?.attributes || {})
+        onGetIssuePageDataSuccess()
+      } catch (e) {
+        setLoading(false)
+        if (axios.isAxiosError(e)) {
+          onGetIssuePageDataError(e)
+        }
+      }
+    }
+    fetchDelegationTickets()
+  }, [showSuccessModal])
+  const selectTicketTypeOptions = _map(
+    issuePageData.ticketTypes || ({} as IDelegationsTicketType),
+    (val, key) => ({
+      value: key,
+      label: val.optionValue,
+    })
+  )
+  return (
+    <div className={`${classNamePrefix}-container`}>
+      {loading ? (
+        <Loader />
+      ) : (
+        <>
+          {showMaxQtyModal && (
+            <ConfirmModal
+              hideCancelBtn={true}
+              message={error}
+              onClose={() =>
+                error === DELEGATION_ACCESS_ERROR
+                  ? (window.location.href = '/')
+                  : setShowMaxQtyModal(false)
+              }
+              onConfirm={() =>
+                error === DELEGATION_ACCESS_ERROR
+                  ? (window.location.href = '/')
+                  : setShowMaxQtyModal(false)
+              }
+            />
+          )}
+          {showSuccessModal && (
+            <ConfirmModal
+              hideCancelBtn={true}
+              message="Your ticket successfully issued."
+              onClose={() => setShowSuccessModal(false)}
+              onConfirm={() => setShowSuccessModal(false)}
+            />
+          )}
+          <div className={`${classNamePrefix}-head-title`}>{headTitle}</div>
+          <div className={`${classNamePrefix}-inner-blocks`}>
+            <div className={`${classNamePrefix}-image-block`}>
+              <img
+                src={`${CONFIGS.BASE_URL}${issuePageData?.eventImage}`}
+                alt="main_event_img"
+                title=""
+              />
+            </div>
+            <div className={`${classNamePrefix}-tables`}>
+              <TicketsAvailableTable
+                tableTitle="Tickets available"
+                issuePageData={issuePageData}
+                classNamePrefix="delegations"
+              />
+              <TicketsAssignedTable
+                tableTitle="Tickets assigned"
+                issuePageData={issuePageData}
+                classNamePrefix="delegations"
+              />
+              <div className={`${classNamePrefix}-issue-block`}>
+                <div className={`${classNamePrefix}-issue-title`}>Issue New Tickets</div>
+                <div className={`${classNamePrefix}-issue-subtitle`}>
+                  Please select the type of tickets and enter recipient details:
+                </div>
+              </div>
+              <IssueTicketForm
+                classNamePrefix={'delegations'}
+                handleSubmit={async (values: any, { resetForm, setSubmitting }) => {
+                  try {
+                    await issueTicket(accessHash, values)
+                    setShowSuccessModal(true)
+                    resetForm()
+                  } catch (e) {
+                    if (axios.isAxiosError(e)) {
+                      const error = e?.response?.data?.message || 'Error'
+                      setError(error)
+                    } else if (e instanceof Error) {
+                      setError(e?.message || 'Error')
+                    }
+                    setShowMaxQtyModal(true)
+                  } finally {
+                    setLoading(false)
+                    setSubmitting(false)
+                  }
+                }}
+                selectTicketTypeOptions={selectTicketTypeOptions}
+                initialValues={{
+                  ticketTypeId: '',
+                  firstName: '',
+                  lastName: '',
+                  email: '',
+                  confirmEmail: '',
+                  confirm: false,
+                }}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default IssueComponent

package/src/components/delegationsContainer/IssueTicketForm.tsx

@@ -0,0 +1,109 @@
+import { CircularProgress } from '@mui/material'
+import { Field, Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
+import React from 'react'
+
+import { requiredValidator } from '../../validators'
+import { CheckboxField, SelectField } from '../common'
+import { CustomField } from '../common/CustomField'
+import { getValidateFunctions } from '../common/FieldSection/utils'
+
+export interface IIssueTicketForm {
+  classNamePrefix?: string;
+  handleSubmit: (values: any, resetForm: any) => void;
+  selectTicketTypeOptions: Array<any>;
+  initialValues?: any;
+}
+
+const IssueTicketForm = ({
+  classNamePrefix = 'delegations',
+  handleSubmit = _identity,
+  selectTicketTypeOptions,
+  initialValues,
+}: IIssueTicketForm) => (
+  <div className={`${classNamePrefix}-issue-form`}>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values, { resetForm, setSubmitting }) => {
+        delete values.confirm
+        handleSubmit(values, { resetForm, setSubmitting })
+      }}
+    >
+      {({ isValid, values, isSubmitting }) => (
+        <Form>
+          <div className="body">
+            <div className="field-item">
+              <div className="field_label">Ticket Type</div>
+              <Field
+                name="ticketTypeId"
+                label="Ticket Type"
+                component={SelectField}
+                validate={requiredValidator}
+                options={selectTicketTypeOptions}
+              />
+            </div>
+            <div className="field-item">
+              <div className="field_label">Name</div>
+              <Field
+                name="firstName"
+                label="Name"
+                component={CustomField}
+                validate={requiredValidator}
+              />
+            </div>
+            <div className="field-item">
+              <div className="field_label">Last Name</div>
+              <Field
+                name="lastName"
+                label="Last Name"
+                component={CustomField}
+                validate={requiredValidator}
+              />
+            </div>
+            <div className="field-item">
+              <div className="field_label">Email</div>
+              <Field
+                name="email"
+                label="Email"
+                component={CustomField}
+                validate={requiredValidator}
+              />
+            </div>
+            <div className="field-item">
+              <div className="field_label">Confirm Email</div>
+              <Field
+                name="confirmEmail"
+                label="Confirm Email"
+                component={CustomField}
+                validate={getValidateFunctions({
+                  element: {
+                    name: 'confirmEmail',
+                    label: 'Confirm Email',
+                    required: true,
+                  },
+                  values,
+                })}
+              />
+            </div>
+          </div>
+          <div className="field-item checkbox_item">
+            <Field
+              name="confirm"
+              label="I agree to ManaCommon's privacy policy"
+              type="checkbox"
+              validate={requiredValidator}
+              component={CheckboxField}
+            />
+          </div>
+          <div className="action-button">
+            <button type="submit" disabled={!isValid}>
+              {isSubmitting ? <CircularProgress size="22px" /> : 'Issue Ticket'}
+            </button>
+          </div>
+        </Form>
+      )}
+    </Formik>
+  </div>
+)
+
+export default IssueTicketForm