tf-checkout-react 1.5.9 → 1.6.1

package/dist/types/billing-info-data.d.ts

@@ -15,12 +15,12 @@ export interface IFieldData {
     groupClassname?: string;
     groupLabel?: string | JSX.Element | HTMLElement;
     groupLabelClassName?: string;
-    id: number;
+    id?: number;
     uniqueId?: string;
 }
 export interface IBillingInfoData {
-    id: number | string;
     fields: IFieldData[];
+    id?: number | string;
     label?: string | JSX.Element;
     labelClassName?: string;
     uniqueId?: string;

package/dist/types/verification.d.ts

@@ -1,5 +1,6 @@
 export interface GetNetverifyUrlResponseData {
-    netverifyUrl: string;
+    netverifyUrl: string | null;
+    provider: string | null;
 }
 export interface VerificationStatusResponseData {
     attributes: {

package/dist/utils/createCheckoutDataBodyWithDefaultHolder.d.ts

@@ -3,6 +3,9 @@ interface ICheckoutBody {
     attributes: {
         [key: string]: Type1 | Record<string | number, Type1> | Array<Type1 | IticketHolder>;
     };
+    data_capture?: {
+        [key: string]: any;
+    };
 }
 interface IticketHolder {
     first_name?: string;

package/dist/utils/customFields.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { IBillingInfoData } from '../types';
+export declare const getDataWithCustomFields: (initialData: IBillingInfoData[], ticketHoldersFields: IBillingInfoData, customFields: any) => {
+    dataWithCustomFields: {
+        fields: import("../types").IFieldData[];
+        id?: string | number | undefined;
+        label?: string | JSX.Element | undefined;
+        labelClassName?: string | undefined;
+        uniqueId?: string | undefined;
+    }[];
+    ticketHoldersWithCustomFields: {
+        fields: (import("../types").IFieldData | {
+            id: number;
+            customFields: boolean;
+            groupClassname: string;
+            groupItems: any[];
+        })[];
+        id?: string | number | undefined;
+        label?: string | JSX.Element | undefined;
+        labelClassName?: string | undefined;
+        uniqueId?: string | undefined;
+    };
+};
+export declare const getFieldsKeys: (customFields: any) => any[];

package/dist/utils/index.d.ts

@@ -10,5 +10,6 @@ export { replaceVarInString } from './replaceVarInString';
 export { isBrowser } from './isBrowser';
 export { getFormInitialValues } from './form';
 export { setLoggedUserData } from './auth';
+export { getDataWithCustomFields, getFieldsKeys } from './customFields';
 export { createElementFromHTML } from './htmlNodeFromString';
 export { isJson } from './jsonUtils';

package/package.json

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

package/src/adapters/customFields.ts

@@ -0,0 +1,79 @@
+import _forEach from 'lodash/forEach'
+import _get from 'lodash/get'
+import _map from 'lodash/map'
+
+import { IGroupItem } from '../types'
+
+export const optionsAdapter = (options: any) => {
+  const adaptedOptions = _map(options, option => ({
+    id: option.id,
+    label: option.name,
+    value: option.value,
+  }))
+  return adaptedOptions
+}
+
+export const fieldDataAdapter = (field: IGroupItem) => {
+  const {
+    name,
+    label,
+    required,
+    description,
+    type,
+    options,
+    ...restValues
+  } = field
+
+  const adaptedField: IGroupItem = {
+    name,
+    label,
+    required,
+    description,
+    type,
+    className: _get(restValues, 'settings.className', ''),
+    value: _get(restValues, 'defaultValue'),
+  }
+
+  switch (type) {
+    case 'textarea':
+      adaptedField.type = 'text'
+      adaptedField.multiline = true
+      break
+    case 'radio':
+      adaptedField.radios = optionsAdapter(options)
+      break
+    case 'select_multi':
+      adaptedField.isMultiple = true
+      adaptedField.options = optionsAdapter(options)
+      break
+    case 'select':
+      adaptedField.type = 'select_multi'
+      adaptedField.isMultiple = false
+      adaptedField.options = optionsAdapter(options)
+      break
+    default:
+      break
+  }
+
+  return adaptedField
+}
+
+export const customFieldsDataAdapter = (data: any) => {
+  const adaptedTicketFields: Array<IGroupItem> = []
+  const adaptedOrderFields: Array<IGroupItem> = []
+
+  _forEach(data, field => {
+    const ticketFields = _get(field, 'ticket.group.fields')
+    const orderFields = _get(field, 'order.group.fields')
+
+    _forEach(ticketFields, ticketField => {
+      adaptedTicketFields.push(fieldDataAdapter(ticketField))
+    })
+
+    _forEach(orderFields, orderField => {
+      adaptedOrderFields.push(fieldDataAdapter(orderField))
+    })
+  })
+
+  return { ticketsFields: adaptedTicketFields, orderFields: adaptedOrderFields }
+}

package/src/adapters/index.ts

@@ -0,0 +1 @@
+export { customFieldsDataAdapter } from './customFields'

package/src/api/index.ts

@@ -3,6 +3,7 @@ import './interceptors'
 import { AxiosRequestConfig, AxiosResponse } from 'axios'
 import _get from 'lodash/get'
 
+import { customFieldsDataAdapter } from '../adapters'
 import {
   GetNetverifyUrlResponseData,
   UpdateVerificationStatusResponseData,
@@ -152,6 +153,48 @@ export const getCheckoutPageConfigs = async (): Promise<ResponseConfigs> => {
   return response.data
 }
 
+
+export const getCustomFields = async (eventId: string) => {
+  const response = await publicRequest.get(`/v1/event/${eventId}/custom_fields`)
+  const customFields = _get(response, 'data.data.attributes', [])
+  const adaptedResponse = customFieldsDataAdapter(customFields)
+  return adaptedResponse
+}
+
+export const updateOrderCustomFields = async (
+  eventId: string,
+  orderId: string,
+  customFieldsData: Record<string, any>
+) => {
+  const response = await publicRequest.put(`v1/event/${eventId}/order-data-capture`, {
+    data: {
+      attributes: {
+        order_id: orderId,
+        data_capture: customFieldsData,
+      },
+    },
+  })
+  return response
+}
+
+export const updateTicketHoldersCustomFields = async (
+  eventId: string,
+  customFieldsData: Record<string, any>,
+  ticketHash: string
+) => {
+  const response = await publicRequest.put(`v1/event/${eventId}/ticket-data-capture`, {
+    data: {
+      attributes: {
+        ticket_hash: ticketHash,
+        ticket_data_capture: {
+          [ticketHash]: customFieldsData,
+        },
+      },
+    },
+  })
+  return response
+}
+
 export const confirmPreRegistration = async (
   eventId: string | number,
   data: IConfirmPreRegistrationRequestData

package/src/assets/images/edit.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_996_11495)">
+<path d="M6.162 12.6667L5 13.6667L2 14.0001V11.1714L8.6 4.57139L11.428 7.40072L6.16133 12.6667H6.162ZM9.542 3.62939L10.9567 2.21472C11.0817 2.08974 11.2512 2.01953 11.428 2.01953C11.6048 2.01953 11.7743 2.08974 11.8993 2.21472L13.7853 4.10072C13.9103 4.22574 13.9805 4.39528 13.9805 4.57206C13.9805 4.74883 13.9103 4.91837 13.7853 5.04339L12.3707 6.45739L9.54267 3.62939H9.542Z" fill="#03053D"/>
+</g>
+<defs>
+<clipPath id="clip0_996_11495">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/billing-info-container/index.tsx

@@ -8,6 +8,7 @@ import { CSSProperties } from '@mui/styles'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik, FormikHelpers, FormikProps, FormikValues } from 'formik'
 import _find from 'lodash/find'
+import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _includes from 'lodash/includes'
@@ -28,6 +29,7 @@ import {
   register,
   setCustomHeader,
 } from '../../api'
+import { withCustomFields } from '../../hoc'
 import { usePixel } from '../../hooks/usePixel'
 import { IBillingInfoData } from '../../types'
 import {
@@ -38,7 +40,6 @@ import {
   setLoggedUserData,
 } from '../../utils'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
-import { combineValidators, requiredValidator } from '../../validators'
 import SnackbarAlert from '../common/SnackbarAlert'
 import { ForgotPasswordModal } from '../forgotPasswordModal'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
@@ -53,6 +54,7 @@ import {
   getFieldLabel,
   getInitialValues,
   getValidateFunctions,
+  ICheckoutBody,
 } from './utils'
 
 export interface IBillingInfoPage {
@@ -105,7 +107,8 @@ export interface IBillingInfoPage {
   brandOptIn?: boolean;
   showPoweredByImage?: boolean;
   isCountryCodeEditable?: boolean;
-
+  customFieldsOrderKeys?: string[];
+  customFieldsTicketHolderKeys?: string[];
   onPendingVerification?: () => void;
 }
 
@@ -197,7 +200,7 @@ const LogicRunner: FC<{
   return null
 }
 
-export const BillingInfoContainer = React.memo(
+const BillingInfoContainer = React.memo(
   ({
     data = [],
     ticketHoldersFields = {
@@ -240,6 +243,8 @@ export const BillingInfoContainer = React.memo(
     showSignUpButton = false,
     brandOptIn = false,
     showPoweredByImage = false,
+    customFieldsOrderKeys,
+    customFieldsTicketHolderKeys,
     isCountryCodeEditable = true,
     onPendingVerification = _identity,
     onGetCheckoutConfigsSuccess = _identity,
@@ -381,6 +386,7 @@ export const BillingInfoContainer = React.memo(
         setIsLoggedIn(!!(pIsLoggedIn || xtfCookie))
       }
     }, [pIsLoggedIn, isLoggedIn, xtfCookie])
+
     //just once
     useEffect(() => {
       // fetch countries data
@@ -400,6 +406,10 @@ export const BillingInfoContainer = React.memo(
       }
       shouldFetchCountries && fetchCountries()
       fetchCart()
+
+      return () => {
+        isBrowser && localStorage.removeItem('selectedTicketsQuantity')
+      }
     }, [])
 
     // fetch cart data
@@ -421,6 +431,7 @@ export const BillingInfoContainer = React.memo(
         setCardLoading(false)
       }
     }
+
     // fetch user data
     const fetchUserData = async () => {
       try {
@@ -468,10 +479,7 @@ export const BillingInfoContainer = React.memo(
               addAddOnsInAttributes(checkoutBody)
             }
 
-            const checkoutResponse = await postOnCheckout(
-              checkoutBody,
-              flagFreeTicket
-            )
+            const checkoutResponse = await postOnCheckout(checkoutBody, flagFreeTicket)
             removeReferralKey()
             onSkipBillingPage(checkoutResponse.data.attributes)
             setLoading(false)
@@ -492,7 +500,7 @@ export const BillingInfoContainer = React.memo(
       values: Record<string, any>,
       profileData?: any
     ): Record<string, any> => {
-      let checkoutBody = {}
+      let checkoutBody = {} as ICheckoutBody
 
       // Auto collect ticket holders name when it was skipped optionally
       if (showDOB && !showTicketHolders && canSkipHolderNames) {
@@ -517,7 +525,56 @@ export const BillingInfoContainer = React.memo(
         )
       }
 
-      return checkoutBody
+      // Collect data_capture for Order Custom Fields
+      const data_capture: Record<string, any> = {}
+      _forEach(customFieldsOrderKeys, (key: string) => {
+        data_capture[key] = values[key]
+
+        // Delete from values list
+        delete checkoutBody.attributes[key]
+      })
+
+      // Temp solution for hardcoded data capture values, to be deleted in the future
+      const captureKeys = [
+        'businessCategory',
+        'company',
+        'instagram',
+        'jobTitle',
+        'wallet_address',
+      ]
+
+      captureKeys.forEach(key => {
+        const path = `data_capture.${key}`
+        const value = _get(values, path, '')
+
+        if (value !== '') {
+          data_capture[key] = value
+        }
+
+        const attributeKey = `data_capture[${key}]`
+        delete checkoutBody.attributes?.[attributeKey]
+      })
+
+      // Collect data_capture for Ticket Holders Fields
+      _forEach(checkoutBody.attributes.ticket_holders, (holder, holderIndex) => {
+        const holderDataCapture: Record<string, any> = {}
+
+        _forEach(customFieldsTicketHolderKeys, customFieldKey => {
+          const customFieldHolderName = `${customFieldKey}-${holderIndex}`
+          const customFieldHolderKey = values[customFieldHolderName] || ''
+          holderDataCapture[customFieldKey] = customFieldHolderKey
+
+          // Delete holder specific value from values list
+          delete checkoutBody.attributes[customFieldHolderName]
+        })
+
+        // Assign Ticket Holder data_capture final value
+        if (!_isEmpty(holderDataCapture)) {
+          holder.ticket_data_capture = holderDataCapture
+        }
+      })
+
+      return { attributes: { ...checkoutBody.attributes, data_capture } }
     }
 
     const removeReferralKey = () => {
@@ -573,7 +630,9 @@ export const BillingInfoContainer = React.memo(
                 },
                 ...initialValues,
               },
-              userValues
+              userValues,
+              ticketHoldersFields,
+              ticketsQuantity
             )}
             enableReinitialize={false}
             onSubmit={async (values, formikHelpers) => {
@@ -912,7 +971,8 @@ export const BillingInfoContainer = React.memo(
                                               <Field
                                                 {...element}
                                                 type={
-                                                  element.type === 'radio'
+                                                  element.type === 'radio' ||
+                                                  element.type === 'checkbox'
                                                     ? undefined
                                                     : element.type
                                                 }
@@ -976,57 +1036,39 @@ export const BillingInfoContainer = React.memo(
                         <div key={_item}>
                           <h5>Ticket {index + 1}</h5>
                           {_map(ticketHoldersFields.fields, group => {
-                            const { groupClassname, groupItems } = group
+                            const { id, groupClassname, groupItems } = group
                             return (
-                              <div key={group.id}>
+                              <div key={id}>
                                 <div className={groupClassname}>
-                                  {_map(groupItems, element => {
-                                    if (
-                                      _includes(
-                                        ['holderFirstName', 'holderLastName'],
-                                        element.name
-                                      )
-                                    ) {
-                                      element.required = showTicketHolders
-                                    }
-                                    return (
-                                      <div
-                                        className={element.className}
-                                        key={element.name}
-                                      >
-                                        <Field
-                                          {...element}
-                                          type={
-                                            element.type === 'radio'
-                                              ? undefined
-                                              : element.type
-                                          }
-                                          name={`${element.name}-${index}`}
-                                          label={getFieldLabel(element, configs)}
-                                          component={getFieldComponent(element)}
-                                          validate={combineValidators(
-                                            element.required
-                                              ? requiredValidator
-                                              : () =>
-                                                  props.errors[
-                                                    `${element.name}-${index}`
-                                                  ],
-                                            element.onValidate
-                                              ? element.onValidate
-                                              : () =>
-                                                  props.errors[`${element.name}-${index}`]
-                                          )}
-                                          setPhoneValidationIsLoading={
-                                            setPhoneValidationIsLoading
-                                          }
-                                          defaultCountry={
-                                            defaultCountry || element.defaultCountry
-                                          }
-                                          isCountryCodeEditable={isCountryCodeEditable}
-                                        />
-                                      </div>
-                                    )
-                                  })}
+                                  {_map(groupItems, element => (
+                                    <div className={element.className} key={element.name}>
+                                      <Field
+                                        {...element}
+                                        type={
+                                          element.type === 'radio' ||
+                                          element.type === 'checkbox'
+                                            ? undefined
+                                            : element.type
+                                        }
+                                        name={`${element.name}-${index}`}
+                                        label={getFieldLabel(element, configs)}
+                                        component={getFieldComponent(element)}
+                                        validate={getValidateFunctions(
+                                          element,
+                                          states,
+                                          props.values,
+                                          props.errors
+                                        )}
+                                        setPhoneValidationIsLoading={
+                                          setPhoneValidationIsLoading
+                                        }
+                                        defaultCountry={
+                                          defaultCountry || element.defaultCountry
+                                        }
+                                        isCountryCodeEditable={isCountryCodeEditable}
+                                      />
+                                    </div>
+                                  ))}
                                 </div>
                               </div>
                             )
@@ -1119,3 +1161,7 @@ export const BillingInfoContainer = React.memo(
     )
   }
 )
+
+const WithCustomFieldsBillingInfoContainer = withCustomFields(BillingInfoContainer)
+
+export { WithCustomFieldsBillingInfoContainer as BillingInfoContainer }

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

@@ -3,6 +3,7 @@ import _flatMapDeep from 'lodash/flatMapDeep'
 import _forEach from 'lodash/forEach'
 import _get from 'lodash/get'
 import _isArray from 'lodash/isArray'
+import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import { nanoid } from 'nanoid'
 import React from 'react'
@@ -33,7 +34,9 @@ export interface IValues {
 export const getInitialValues = (
   data: any = [],
   propsInitialValues: IValues = {},
-  userValues: any = {}
+  userValues: any = {},
+  ticketHoldersFields: any = {},
+  ticketsQuantity: any = []
 ): IValues => {
   const results = _flatMapDeep(data, ({ fields }) =>
     _map(fields, ({ groupItems }) =>
@@ -41,6 +44,24 @@ export const getInitialValues = (
     )
   )
 
+  // Add Ticket Holder default values for custom fields
+  const ticketHoldersCustomFields =
+    ticketHoldersFields?.fields?.find((groupItem: any) => groupItem.customFields)
+      ?.groupItems || []
+  const ticketHoldersCustomFieldsInitValues = {} as IValues
+  const selectedTicketsCount =
+    ticketsQuantity.length || localStorage.getItem('selectedTicketsQuantity') || 0
+
+  if (!_isEmpty(ticketHoldersCustomFields)) {
+    for (const customField of ticketHoldersCustomFields) {
+      for (let i = 0; i < selectedTicketsCount; i++) {
+        const fieldName = `${customField.name}-${i}`
+        const fieldValue = customField.value
+        ticketHoldersCustomFieldsInitValues[fieldName] = fieldValue
+      }
+    }
+  }
+
   const initialValues: IValues = {}
   _forEach(results, groupItem => {
     const { name, value } = groupItem
@@ -54,7 +75,7 @@ export const getInitialValues = (
     propsInitialValues.lastName || userValues.lastName || ''
   initialValues['holderEmail-0'] = propsInitialValues.email || userValues.email || ''
 
-  return initialValues
+  return { ...initialValues, ...ticketHoldersCustomFieldsInitValues }
 }
 
 export const createRegisterFormData = (
@@ -89,10 +110,13 @@ export const createRegisterFormData = (
   return bodyFormData
 }
 
-interface ICheckoutBody {
+export interface ICheckoutBody {
   attributes: {
     [key: string]: any;
   };
+  data_capture?: {
+    [key: string]: any;
+  };
 }
 
 interface IticketHolder {
@@ -219,7 +243,7 @@ export const assingUniqueIds = (data: any): any => {
 
 export const isRequiredField = (
   element: IGroupItem,
-  configs: null | AttributesConfig
+  configs?: null | AttributesConfig
 ) => {
   const { name, required } = element
   const flagRequirePhone = _get(configs, 'phone_required', false)
@@ -240,7 +264,7 @@ export const isRequiredField = (
   return false
 }
 
-export const getFieldLabel = (element: IGroupItem, configs: null | AttributesConfig) => {
+export const getFieldLabel = (element: IGroupItem, configs?: null | AttributesConfig) => {
   if (isRequiredField(element, configs) || React.isValidElement(element.label)) {
     return element.label
   }

package/src/components/common/{CheckboxField.tsx → Checkbox.tsx}

@@ -1,5 +1,5 @@
 import { FormControl, FormHelperText } from '@mui/material'
-import Checkbox from '@mui/material/Checkbox'
+import CheckboxMaterial from '@mui/material/Checkbox'
 import FormControlLabel from '@mui/material/FormControlLabel'
 import FormGroup from '@mui/material/FormGroup'
 import { useTheme } from '@mui/styles'
@@ -15,7 +15,7 @@ interface IOtherProps {
   [key: string]: any;
 }
 
-export const CheckboxField = ({
+export const Checkbox = ({
   label,
   field,
   selectOptions,
@@ -36,7 +36,7 @@ export const CheckboxField = ({
     <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ''])}>
       <FormGroup>
         <FormControlLabel
-          control={<Checkbox {...field} {...rest} />}
+          control={<CheckboxMaterial {...field} {...rest} />}
           label={label}
           componentsProps={{
             typography: customTheme?.checkbox,

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

@@ -0,0 +1,41 @@
+import { FormControl, FormHelperText } from '@mui/material'
+import Checkbox from '@mui/material/Checkbox'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import FormGroup from '@mui/material/FormGroup'
+import { useTheme } from '@mui/styles'
+import { FieldInputProps, FormikProps } from 'formik'
+import _get from 'lodash/get'
+import React from 'react'
+
+interface ICheckboxField {
+  label: string | number | JSX.Element;
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+}
+
+export const CheckboxField = ({
+  label,
+  field,
+  form: { touched, errors },
+}: ICheckboxField) => {
+  const isTouched = Boolean(_get(touched, field.name, false))
+  const errorText = _get(errors, field.name)
+  const hasError = isTouched && Boolean(errorText)
+  const customTheme: any = useTheme()
+
+  return (
+    <FormControl
+      className={`checkbox-field ${hasError ? 'required-checkbox-field' : ''}`}
+      error={hasError}
+    >
+      <FormGroup>
+        <FormControlLabel
+          control={<Checkbox {...field} checked={field.value} />}
+          label={label}
+          componentsProps={{ typography: customTheme?.checkbox }}
+        />
+      </FormGroup>
+      {hasError && <FormHelperText>Required</FormHelperText>}
+    </FormControl>
+  )
+}

package/src/components/common/CustomField.tsx

@@ -47,7 +47,7 @@ export const CustomField = ({
   inputRef,
   onChange,
   multiline = false,
-  minRows,
+  minRows = 3,
   maxRows,
   disabled,
 }: ICustomField & IOtherProps) => {

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

@@ -28,7 +28,7 @@ export interface IRadioGroupField {
 export const RadioGroupField = ({
   label,
   field,
-  radios,
+  radios = [],
   disabled,
   form: { touched, errors, setFieldValue },
   onChange = _identity,