tf-checkout-react 1.7.31 → 1.7.32-beta.2

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

@@ -8,6 +8,8 @@ export interface IGroupItem {
     component?: ReactNode | JSX.Element | HTMLElement;
     onValidate?: (value: any) => void;
     uniqueId?: string;
+    /** Ticket custom fields only: ticket types this field is scoped to. */
+    ticketTypeIds?: string[] | null;
     [key: string]: any;
 }
 export interface IFieldData {
@@ -17,6 +19,8 @@ export interface IFieldData {
     groupLabelClassName?: string;
     id?: number;
     uniqueId?: string;
+    /** Set on the ticket-holder group built from event custom fields. */
+    customFields?: boolean;
 }
 export interface IBillingInfoData {
     fields: IFieldData[];

package/dist/utils/customFields.d.ts

@@ -33,3 +33,23 @@ export declare const getAddOnDataWithCustomFields: (customFields: any) => {
     };
 };
 export declare const getFieldsKeys: (customFields: any) => any[];
+/**
+ * Ticket type of each holder slot, in holder order, expanded from the checkout
+ * breakdown (`tickets_price_breakdown`: one line per ticket type with a quantity).
+ * Returns [] when the breakdown doesn't line up with the holder count — callers
+ * then treat every holder's ticket type as unknown and show all fields.
+ */
+interface ITicketsPriceBreakdownLine {
+    ticket_type_id?: string | number | null;
+    quantity?: string | number;
+}
+export declare const getHolderTicketTypeIds: (ticketsPriceBreakdown: ITicketsPriceBreakdownLine[] | undefined, holdersCount: number) => string[];
+/**
+ * Whether a ticket-holder custom field applies to a ticket of `ticketTypeId`.
+ * Unscoped fields apply to every ticket; an unknown ticket type fails open so a
+ * required field is never silently dropped.
+ */
+export declare const customFieldAppliesToTicketType: (field: {
+    ticketTypeIds?: string[] | null;
+}, ticketTypeId?: string | undefined) => boolean;
+export {};

package/dist/utils/index.d.ts

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.31",
+  "version": "1.7.32-beta.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/adapters/customFields.test.ts

@@ -0,0 +1,69 @@
+import { customFieldsDataAdapter } from './customFields'
+
+// `data.attributes` of GET v1/event/:id/custom_fields for an event whose only
+// ticket field is scoped to two ticket types.
+const scopedTicketFieldPayload = [
+  {
+    ticket: {
+      group: {
+        id: '2242',
+        label: null,
+        image: '',
+        type: 'ticket',
+        order: '0',
+        fields: [
+          {
+            id: '6766',
+            image: '',
+            type: 'select',
+            name: 'shoe_size',
+            order: '1',
+            label: 'Cycling Shoe Size',
+            defaultValue: '',
+            required: true,
+            description: null,
+            settings: {
+              showOnMyTickets: true,
+              showOnPdf: false,
+              showOnScan: false,
+              allowUpdate: false,
+              ticketTypes: [225685, 225687],
+            },
+            options: [
+              { id: '9650', name: '34', value: '34' },
+              { id: '9651', name: '36', value: '36' },
+            ],
+          },
+        ],
+      },
+    },
+  },
+]
+
+describe('customFieldsDataAdapter', () => {
+  it('keeps the ticket types a ticket field is scoped to', () => {
+    const { ticketsFields } = customFieldsDataAdapter(scopedTicketFieldPayload)
+
+    expect(ticketsFields).toHaveLength(1)
+    expect(ticketsFields[0]).toMatchObject({
+      name: 'shoe_size',
+      required: true,
+      ticketTypeIds: ['225685', '225687'],
+    })
+  })
+
+  it('leaves unscoped fields without ticketTypeIds', () => {
+    const payload = [
+      {
+        ticket: {
+          group: {
+            fields: [{ name: 'nickname', type: 'text', settings: { ticketTypes: [] } }],
+          },
+        },
+      },
+    ]
+    const { ticketsFields } = customFieldsDataAdapter(payload)
+
+    expect(ticketsFields[0]).not.toHaveProperty('ticketTypeIds')
+  })
+})

package/src/adapters/customFields.ts

@@ -13,6 +13,11 @@ export const optionsAdapter = (options: any) => {
   return adaptedOptions
 }
 
+// `settings.ticketTypes` scopes a ticket field to those ticket types; absent or
+// empty means it applies to every ticket. Ids arrive as numbers, compare as strings.
+export const ticketTypeIdsAdapter = (ticketTypes: unknown): string[] | null =>
+  Array.isArray(ticketTypes) && ticketTypes.length ? ticketTypes.map(String) : null
+
 export const fieldDataAdapter = (field: IGroupItem) => {
   const {
     name,
@@ -34,6 +39,11 @@ export const fieldDataAdapter = (field: IGroupItem) => {
     value: _get(restValues, 'defaultValue'),
   }
 
+  const ticketTypeIds = ticketTypeIdsAdapter(_get(restValues, 'settings.ticketTypes'))
+  if (ticketTypeIds) {
+    adaptedField.ticketTypeIds = ticketTypeIds
+  }
+
   switch (type) {
     case 'textarea':
       adaptedField.type = 'text'

package/src/components/billing-info-container/hooks/useStripePayment.ts

@@ -1,8 +1,16 @@
 import { FormikHelpers } from 'formik'
+import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 
 import { handlePaymentMiddleWare } from '../../paymentContainer/handlePayment'
 
+const SUCCESSFUL_INTENT_STATUSES = ['succeeded', 'processing', 'requires_capture']
+const PAYMENT_FAILED_MESSAGE =
+  'Your payment was not completed. Please try again or use another payment method.'
+const PAYMENT_RECEIVED_MESSAGE =
+  'Your payment was received and we are confirming your order. ' +
+  'Please check your email for your tickets before trying again.'
+
 interface PaymentData {
   attributes: any
   isFreeTickets: boolean
@@ -74,43 +82,70 @@ export const useStripePayment = ({
           billing_details: { phone: e164Phone },
         }
       }
-      const { error: confirmError } = await stripeRef.current.confirmPayment({
-        clientSecret:
-          paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
-        elements: elementsRef.current,
-        confirmParams,
-        redirect: 'if_required',
-      })
+      let confirmResult
+      try {
+        confirmResult = await stripeRef.current.confirmPayment({
+          clientSecret:
+            paymentDataResponse.data.attributes.payment_method.stripe_client_secret,
+          elements: elementsRef.current,
+          confirmParams,
+          redirect: 'if_required',
+        })
+      } catch (e) {
+        // Stripe.js throws (instead of returning { error }) on integration errors
+        setError(_get(e, 'message') || PAYMENT_FAILED_MESSAGE)
+        return null
+      }
 
+      const { error: confirmError, paymentIntent } = confirmResult
       if (confirmError) {
         setError('' + confirmError?.message)
         return null
       }
+
+      // Asynchronous failures (e.g. MB WAY declined, expired or number not registered)
+      // resolve without `error`, so the PaymentIntent status must be checked
+      if (paymentIntent && !SUCCESSFUL_INTENT_STATUSES.includes(paymentIntent.status)) {
+        setError(
+          _get(paymentIntent, 'last_payment_error.message') || PAYMENT_FAILED_MESSAGE
+        )
+        return null
+      }
     }
 
     // Handle payment middleware for non-redirect payments
     let paymentResponse = null
-    await handlePaymentMiddleWare(
-      null,
-      {},
-      {
-        reviewData: attributes,
-        isFreeTickets,
-        paymentPlanIsAvailable: false,
-        showPaymentPlanSection: false,
-        handlePayment: (data: any) => {
-          paymentResponse = data
-        },
-        setPaymentIsLoading: _identity,
-        setError: _identity,
-        orderData: updatedOrderData,
-        eventId,
-        isBrowser,
-        onPaymentError: (error: any) => {
-          throw error
-        },
-      }
-    )
+    try {
+      await handlePaymentMiddleWare(
+        null,
+        {},
+        {
+          reviewData: attributes,
+          isFreeTickets,
+          paymentPlanIsAvailable: false,
+          showPaymentPlanSection: false,
+          handlePayment: (data: any) => {
+            paymentResponse = data
+          },
+          setPaymentIsLoading: _identity,
+          setError: (message: string | null) => {
+            if (message && isFreeTickets) setError(message)
+          },
+          orderData: updatedOrderData,
+          eventId,
+          isBrowser,
+          onPaymentError: (error: any) => {
+            throw error
+          },
+        }
+      )
+    } catch (e) {
+      if (isFreeTickets) throw e
+      // Stripe has already taken the payment and the webhook will still settle the order,
+      // so never invite a retry (double charge) whatever the backend error looks like
+      setError(PAYMENT_RECEIVED_MESSAGE)
+      return null
+    }
 
     return paymentResponse
   }

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

@@ -16,8 +16,9 @@ import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _isEqual from 'lodash/isEqual'
 import _map from 'lodash/map'
+import _omit from 'lodash/omit'
 import { nanoid } from 'nanoid'
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import {
   AttributesConfig,
@@ -34,12 +35,14 @@ import {
 import { updateCheckout } from '../../api/checkout'
 import { withCustomFields } from '../../hoc'
 import { usePixel } from '../../hooks/usePixel'
-import { IBillingInfoData } from '../../types'
+import { IBillingInfoData, IGroupItem } from '../../types'
 import { ICheckoutResponseData } from '../../types/api/checkout'
 import {
   createCheckoutDataBodyWithDefaultHolder,
+  customFieldAppliesToTicketType,
   deleteCookieByName,
   getCookieByName,
+  getHolderTicketTypeIds,
   isBrowser,
   setLoggedUserData,
 } from '../../utils'
@@ -124,6 +127,8 @@ export interface IBillingInfoPage {
   isCountryCodeEditable?: boolean;
   customFieldsOrderKeys?: string[];
   customFieldsTicketHolderKeys?: string[];
+  /** Event to load custom fields for. Defaults to `?event_id`, then the cart's event. */
+  customFieldsEventId?: string | number;
   onPendingVerification?: () => void;
   includeAddons?: boolean;
   addonsProps?: IAddonContainterProps;
@@ -506,6 +511,17 @@ const BillingInfoContainer = React.memo(
       useState<ICheckoutResponseData | null>(null)
     const prevData = useRef(data)
 
+    // Ticket type of each holder slot — scopes ticket custom fields that list
+    // `ticketTypes` in their settings to the holders of those ticket types.
+    const holderTicketTypeIds = useMemo(
+      () =>
+        getHolderTicketTypeIds(
+          _get(checkoutUpdateData, 'cart_price_breakdown.tickets_price_breakdown'),
+          ticketsQuantity.length
+        ),
+      [checkoutUpdateData, ticketsQuantity.length]
+    )
+
     const addAddOnsInAttributes = useCallback((checkoutBody: any) => {
       const selectedAddOns = window.localStorage.getItem('add_ons') || '{}'
       const addOnDataCapture = window.localStorage.getItem('add_on_data_capture') || '{}'
@@ -756,13 +772,21 @@ const BillingInfoContainer = React.memo(
         })
 
         // Collect data_capture for Ticket Holders Fields
+        const ticketCustomGroup = _find(ticketHoldersFields.fields, 'customFields')
+        const ticketCustomFields: any[] = ticketCustomGroup?.groupItems || []
         _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
+            const field = _find(ticketCustomFields, ({ name }) => name === customFieldKey)
+            // Fields scoped to other ticket types were never shown to this holder.
+            if (
+              !field ||
+              customFieldAppliesToTicketType(field, holderTicketTypeIds[+holderIndex])
+            ) {
+              holderDataCapture[customFieldKey] = values[customFieldHolderName] || ''
+            }
 
             // Delete holder specific value from values list
             delete checkoutBody.attributes[customFieldHolderName]
@@ -833,6 +857,8 @@ const BillingInfoContainer = React.memo(
         lastNameLogged,
         phoneLogged,
         customFieldsTicketHolderKeys,
+        ticketHoldersFields,
+        holderTicketTypeIds,
       ]
     )
 
@@ -1512,40 +1538,58 @@ const BillingInfoContainer = React.memo(
                         <div key={_item}>
                           <h5>Ticket {index + 1}</h5>
                           {_map(ticketHoldersFields.fields, group => {
-                            const { id, groupClassname, groupItems } = group
+                            const { id, groupClassname } = group
+                            const groupItems = group.customFields
+                              ? group.groupItems.filter(item =>
+                                  customFieldAppliesToTicketType(
+                                    item,
+                                    holderTicketTypeIds[index]
+                                  )
+                                )
+                              : group.groupItems
+                            if (_isEmpty(groupItems)) return null
                             return (
                               <div key={id}>
                                 <div className={groupClassname}>
-                                  {_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
-                                        }
-                                        fill={element.type === 'phone' ? true : undefined}
-                                        defaultCountry={
-                                          defaultCountry || element.defaultCountry
-                                        }
-                                        isCountryCodeEditable={isCountryCodeEditable}
-                                      />
-                                    </div>
-                                  ))}
+                                  {_map(groupItems, item => {
+                                    // Scoping metadata, not a Field prop.
+                                    const element = _omit(item, 'ticketTypeIds') as IGroupItem
+                                    return (
+                                      <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
+                                          }
+                                          fill={
+                                            element.type === 'phone' ? true : undefined
+                                          }
+                                          defaultCountry={
+                                            defaultCountry || element.defaultCountry
+                                          }
+                                          isCountryCodeEditable={isCountryCodeEditable}
+                                        />
+                                      </div>
+                                    )
+                                  })}
                                 </div>
                               </div>
                             )

package/src/hoc/CustomFields/index.tsx

@@ -3,7 +3,7 @@ import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import React, { useEffect, useState } from 'react'
 
-import { getCustomFields } from '../../api'
+import { getCheckoutPageConfigs, getCustomFields } from '../../api'
 import {
   getDataWithCustomFields,
   getFieldsKeys,
@@ -19,6 +19,7 @@ const withCustomFields = (Children: any) => (props: any) => {
       fields: [],
     },
     skipCustomFields = true,
+    customFieldsEventId: eventIdProp,
     onGetCustomFieldsError = _identity,
     onGetCustomFieldsSuccess = _identity,
     ...args
@@ -30,9 +31,23 @@ const withCustomFields = (Children: any) => (props: any) => {
   const [customFieldsTicketHolderKeys, setCustomFieldsTicketHolderKeys] = useState([] as any)
   const [customFieldsAddOnKeys, setCustomFieldsAddOnKeys] = useState([] as any)
 
+  // The billing page URL often carries no event id (path routes, single-page
+  // checkouts), so fall back to the event the cart session belongs to. Without
+  // any id, the request would hit `/v1/event//custom_fields` and fail.
+  const resolveEventId = async (): Promise<string> => {
+    const fromUrl = getQueryVariable('event_id') || getQueryVariable('eventId')
+    if (eventIdProp || fromUrl) return String(eventIdProp || fromUrl)
+
+    const configs = await getCheckoutPageConfigs()
+    const fromCart = _get(configs, 'data.attributes.event_id')
+    return fromCart ? String(fromCart) : ''
+  }
+
   const getFields = async () => {
     try {
-      const eventId = getQueryVariable('event_id') || getQueryVariable("eventId") || ''
+      const eventId = await resolveEventId()
+      if (!eventId) return
+
       const customFields = await getCustomFields(eventId)
 
       const orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []))

package/src/types/billing-info-data.ts

@@ -11,6 +11,8 @@ export interface IGroupItem {
   component?: ReactNode | JSX.Element | HTMLElement;
   onValidate?: (value: any) => void;
   uniqueId?: string;
+  /** Ticket custom fields only: ticket types this field is scoped to. */
+  ticketTypeIds?: string[] | null;
 
   // aditional props
   [key: string]: any;
@@ -25,6 +27,8 @@ export interface IFieldData {
   groupLabelClassName?: string;
   id?: number;
   uniqueId?: string;
+  /** Set on the ticket-holder group built from event custom fields. */
+  customFields?: boolean;
 }
 export interface IBillingInfoData {
   fields: IFieldData[];

package/src/utils/customFields.test.ts

@@ -0,0 +1,41 @@
+import { customFieldAppliesToTicketType, getHolderTicketTypeIds } from './customFields'
+
+describe('getHolderTicketTypeIds', () => {
+  it('expands the breakdown into one ticket type per holder, in order', () => {
+    const breakdown = [
+      { ticket_type_id: 225685, quantity: 2 },
+      { ticket_type_id: 225690, quantity: 1 },
+    ]
+
+    expect(getHolderTicketTypeIds(breakdown, 3)).toEqual(['225685', '225685', '225690'])
+  })
+
+  it('returns [] when the breakdown does not match the holder count', () => {
+    expect(getHolderTicketTypeIds([{ ticket_type_id: 1, quantity: 2 }], 3)).toEqual([])
+  })
+
+  it('returns [] without a breakdown', () => {
+    expect(getHolderTicketTypeIds(undefined, 2)).toEqual([])
+  })
+})
+
+describe('customFieldAppliesToTicketType', () => {
+  const shoeSize = { ticketTypeIds: ['225685', '225687'] }
+
+  it('shows a scoped field to holders of a listed ticket type', () => {
+    expect(customFieldAppliesToTicketType(shoeSize, '225687')).toBe(true)
+  })
+
+  it('hides a scoped field from holders of other ticket types', () => {
+    expect(customFieldAppliesToTicketType(shoeSize, '225690')).toBe(false)
+  })
+
+  it('shows unscoped fields to every holder', () => {
+    expect(customFieldAppliesToTicketType({}, '225690')).toBe(true)
+    expect(customFieldAppliesToTicketType({ ticketTypeIds: null }, '225690')).toBe(true)
+  })
+
+  it('fails open when the holder ticket type is unknown', () => {
+    expect(customFieldAppliesToTicketType(shoeSize, undefined)).toBe(true)
+  })
+})

package/src/utils/customFields.ts

@@ -1,3 +1,4 @@
+import _forEach from 'lodash/forEach'
 import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 
@@ -78,3 +79,41 @@ export const getAddOnDataWithCustomFields = (customFields: any) => {
 
 export const getFieldsKeys = (customFields: any) =>
   _map(customFields, field => field.name)
+
+/**
+ * Ticket type of each holder slot, in holder order, expanded from the checkout
+ * breakdown (`tickets_price_breakdown`: one line per ticket type with a quantity).
+ * Returns [] when the breakdown doesn't line up with the holder count — callers
+ * then treat every holder's ticket type as unknown and show all fields.
+ */
+interface ITicketsPriceBreakdownLine {
+  ticket_type_id?: string | number | null;
+  quantity?: string | number;
+}
+
+export const getHolderTicketTypeIds = (
+  ticketsPriceBreakdown: ITicketsPriceBreakdownLine[] | undefined,
+  holdersCount: number
+): string[] => {
+  if (!Array.isArray(ticketsPriceBreakdown)) return []
+  const slots: string[] = []
+  _forEach(ticketsPriceBreakdown, line => {
+    for (let i = 0; i < Number(line?.quantity || 0); i++) {
+      slots.push(String(line?.ticket_type_id ?? ''))
+    }
+  })
+  return slots.length === holdersCount ? slots : []
+}
+
+/**
+ * Whether a ticket-holder custom field applies to a ticket of `ticketTypeId`.
+ * Unscoped fields apply to every ticket; an unknown ticket type fails open so a
+ * required field is never silently dropped.
+ */
+export const customFieldAppliesToTicketType = (
+  field: { ticketTypeIds?: string[] | null },
+  ticketTypeId?: string
+) =>
+  !ticketTypeId ||
+  _isEmpty(field.ticketTypeIds) ||
+  (field.ticketTypeIds || []).includes(String(ticketTypeId))

package/src/utils/index.ts

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