tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/sections/BillingInfo.tsx

@@ -0,0 +1,743 @@
+/**
+ * `<BillingInfo/>` — the buyer + attendee details step. Collects: the buyer's
+ * name/email + event-gated buyer fields (Instagram/nationality/gender), any
+ * ORDER-level custom fields, PER-HOLDER name + ticket-level custom fields (when
+ * the event requires holder names or has ticket-scoped fields), and marketing
+ * opt-ins. Writes it all into the engine (`setBilling` with `dataCapture`,
+ * `setHolders` with `ticketDataCapture`, `setConsent`) so `<Payment/>`'s
+ * pre-flight passes. Use it alongside `<Payment/>`, or set those yourself.
+ */
+import React, {
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FC,
+  type ReactNode,
+} from 'react'
+
+import {
+  hooks,
+  mapProfileToBilling,
+  missingCheckoutDetails,
+  isEmail,
+  ticketFieldsFor,
+  type CheckoutBilling,
+  type CheckoutHolder,
+  type CustomFieldValues,
+  type EventCustomFieldGroup,
+} from 'tf-checkout-shared'
+import { PhoneInput, type CountryIso2 } from 'react-international-phone'
+
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { useCheckoutContext, useCheckoutValidation } from '../ui/CheckoutProvider'
+import { CustomFieldInput } from '../ui/CustomFields'
+import { Checkbox, Field, FieldRow, Input } from '../ui/Field'
+import { BillingAddressFields } from './billing/BillingAddressFields'
+import { BuyerField } from './billing/BuyerField'
+import { TicketHoldersCard } from './billing/TicketHoldersCard'
+import type { BillingDraft, HolderDraft } from './billing/types'
+
+export interface BillingInfoProps {
+  /** Event context is used to default the country and phone dial code. */
+  eventId?: string
+  /** Fired once billing is saved to the engine — e.g. reveal `<Payment/>`. */
+  onContinue?: () => void
+  /** Section heading. Old checkout uses "Billing Information". */
+  heading?: string
+  /** CTA label. */
+  buttonLabel?: string
+  /** When provided and the buyer isn't signed in, shows a "Login & skip ahead"
+   *  row. The current email is passed when login follows an account match. */
+  onLogin?: (email?: string) => void
+  /** Hide this card only after a signed-in profile satisfies every ordinary
+   *  billing requirement and the event needs no extra buyer/holder answers. */
+  skipWhenProfileComplete?: boolean
+  /** Ask guests to repeat their email and require an exact match. */
+  requireEmailConfirmation?: boolean
+  /** Always collect one named holder per selected ticket. EmbeddedCheckout uses
+   *  this to match tf-sports; standalone sections default to backend gates. */
+  collectTicketHolders?: boolean
+  /** When holder details are enabled, also collect each holder's email and phone. */
+  collectHolderContact?: boolean
+  /** Marketing opt-in labels. Render a checkbox for each provided (unchecked). */
+  ttfOptInLabel?: string
+  brandOptInLabel?: string
+  /** Required host privacy acknowledgement. The URL is supplied by the consumer. */
+  privacyPolicy?: CheckoutPrivacyPolicy
+  /** Show the legacy inline "Required" error after a failed payment attempt. */
+  showPrivacyError?: boolean
+  /** Optional numbered badge (old checkout shows none — omitted by default). */
+  step?: ReactNode
+  className?: string
+}
+
+export interface CheckoutPrivacyPolicy {
+  url: string
+  brandName: string
+  linkLabel?: string
+}
+
+export const BillingInfo: FC<BillingInfoProps> = ({
+  eventId,
+  onContinue,
+  heading = 'Billing Information',
+  buttonLabel = 'Continue to payment',
+  onLogin,
+  skipWhenProfileComplete = false,
+  requireEmailConfirmation = false,
+  collectTicketHolders = false,
+  collectHolderContact = false,
+  ttfOptInLabel = 'Keep me updated about future events from The Ticket Fairy',
+  brandOptInLabel,
+  privacyPolicy,
+  showPrivacyError = false,
+  step,
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  const validation = useCheckoutValidation()
+  const profile = hooks.useProfile({ retry: false })
+  const event = hooks.useEvent(eventId)
+  // No onContinue ⇒ this is one combined form (inside <EmbeddedCheckout/>): mirror the
+  // fields into the engine live and drop the "continue" button, so the buyer
+  // fills billing + pays with ONE button — the way the old checkout flowed.
+  const combined = !onContinue
+
+  const [billing, setBilling] = useState<BillingDraft>({
+    firstName: checkout.billing?.firstName ?? '',
+    lastName: checkout.billing?.lastName ?? '',
+    email: checkout.billing?.email ?? '',
+    confirmEmail: checkout.billing?.confirmEmail ?? '',
+    phone: checkout.billing?.phone,
+    streetAddress: checkout.billing?.streetAddress,
+    city: checkout.billing?.city,
+    zip: checkout.billing?.zip,
+    countryId: checkout.billing?.countryId,
+    stateId: checkout.billing?.stateId,
+    countryCode: checkout.billing?.countryCode,
+    stateCode: checkout.billing?.stateCode,
+    nationality: checkout.billing?.nationality,
+    gender: checkout.billing?.gender,
+    instagramHandle: checkout.billing?.instagramHandle,
+  })
+  const [dataCapture, setDataCapture] = useState<CustomFieldValues>(
+    checkout.billing?.dataCapture ?? {}
+  )
+  const [holders, setHolders] = useState<HolderDraft[]>(() =>
+    checkout.holders.map((holder) => ({
+      firstName: holder.firstName,
+      lastName: holder.lastName,
+      email: holder.email,
+      phone: holder.phone ?? '',
+      ticketTypeId: holder.ticketTypeId,
+      ticketDataCapture: holder.ticketDataCapture ?? {},
+    }))
+  )
+  const [consent, setConsent] = useState({ ttfOptIn: false, brandOptIn: false })
+  const [dob, setDob] = useState(() => {
+    const b = checkout.billing
+    if (!b?.dobDay || !b.dobMonth || !b.dobYear) return ''
+    return `${b.dobYear}-${String(b.dobMonth).padStart(2, '0')}-${String(
+      b.dobDay
+    ).padStart(2, '0')}`
+  }) // ISO yyyy-mm-dd
+  const restoredHolders = useRef(checkout.holders)
+  const profileSeeded = useRef(false)
+  const countryDefaultApplied = useRef(Boolean(checkout.billing?.countryId))
+
+  const gates = checkout.fieldGates
+
+  // Custom-field groups by scope.
+  const orderGroups = useMemo(
+    () => checkout.customFields.filter((g) => g.scope === 'order'),
+    [checkout.customFields]
+  )
+  const ticketGroups = useMemo(
+    () => checkout.customFields.filter((g) => g.scope === 'ticket'),
+    [checkout.customFields]
+  )
+  const ticketFields = useMemo(
+    () => ticketGroups.flatMap((g) => g.fields),
+    [ticketGroups]
+  )
+  const holderNamesRequired = checkout.holderNamesRequired || collectTicketHolders
+  const showHolders = holderNamesRequired || ticketFields.length > 0
+
+  // One holder slot per ticket, tagged with its ticket type (drives ticket-field
+  // scoping + the engine's per-holder validation).
+  const slots = useMemo(() => {
+    const out: { ticketTypeId?: string; ticketName?: string }[] = []
+    const lines = checkout.breakdown?.tickets ?? []
+    for (const line of lines)
+      for (let i = 0; i < line.quantity; i++)
+        out.push({ ticketTypeId: line.ticketTypeId, ticketName: line.name })
+    if (!out.length) {
+      const total = checkout.selections.reduce((n, s) => n + s.quantity, 0)
+      for (let i = 0; i < total; i++) out.push({})
+    }
+    return out
+  }, [checkout.breakdown, checkout.selections])
+
+  // The initial state above restores anything already on the engine. A profile
+  // that arrives later may fill blanks ONCE, but must never be consulted again
+  // while the buyer edits — otherwise clearing the final character restores the
+  // previous engine value on the next live commit.
+  useEffect(() => {
+    const p = profile.data
+    if (!p || profileSeeded.current) return
+    profileSeeded.current = true
+    const profileBilling = mapProfileToBilling(p)
+    setBilling((prev) => {
+      const next = {
+        ...prev,
+        firstName: prev.firstName || profileBilling.firstName || '',
+        lastName: prev.lastName || profileBilling.lastName || '',
+        email: prev.email || profileBilling.email || '',
+        confirmEmail:
+          prev.confirmEmail || (checkout.isLoggedIn ? profileBilling.email : '') || '',
+        phone: prev.phone || profileBilling.phone,
+        streetAddress: prev.streetAddress || profileBilling.streetAddress,
+        city: prev.city || profileBilling.city,
+        zip: prev.zip || profileBilling.zip,
+        countryId: prev.countryId || profileBilling.countryId,
+        stateId: prev.stateId || profileBilling.stateId,
+      }
+      const keys = Object.keys(next) as (keyof BillingDraft)[]
+      return keys.every((k) => next[k] === prev[k]) ? prev : next
+    })
+  }, [profile.data, checkout.isLoggedIn])
+
+  // Resize holders to the slot count, preserving typed values; tag ticket type.
+  useEffect(() => {
+    setHolders((prev) =>
+      slots.map((s, i) => ({
+        firstName: prev[i]?.firstName ?? restoredHolders.current[i]?.firstName ?? '',
+        lastName: prev[i]?.lastName ?? restoredHolders.current[i]?.lastName ?? '',
+        email: prev[i]?.email ?? restoredHolders.current[i]?.email ?? '',
+        phone: prev[i]?.phone ?? restoredHolders.current[i]?.phone ?? '',
+        ticketDataCapture:
+          prev[i]?.ticketDataCapture ??
+          restoredHolders.current[i]?.ticketDataCapture ??
+          {},
+        ticketTypeId: s.ticketTypeId,
+        ticketName: s.ticketName,
+      }))
+    )
+  }, [slots])
+
+  // Match the storefront: ticket 1 silently starts as the buyer. The legacy
+  // checkout has no extra "use buyer details" control.
+  useEffect(() => {
+    if (!showHolders) return
+    setHolders((prev) =>
+      prev.map((holder, index) =>
+        index === 0
+          ? {
+              ...holder,
+              firstName: billing.firstName,
+              lastName: billing.lastName,
+              email: billing.email,
+              phone: billing.phone ?? '',
+            }
+          : holder
+      )
+    )
+  }, [showHolders, billing.firstName, billing.lastName, billing.email, billing.phone])
+
+  // Debounced "this email already has an account" check → nudges the buyer to
+  // sign in (autofill + avoid duplicate accounts). Skips signed-in buyers.
+  useEffect(() => {
+    const email = billing.email.trim()
+    if (checkout.isLoggedIn || !isEmail(email)) return
+    const t = setTimeout(
+      () => checkout.checkBuyerEmail(email).catch(() => undefined),
+      600
+    )
+    return () => clearTimeout(t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [billing.email, checkout.isLoggedIn])
+  const emailTaken =
+    !checkout.isLoggedIn && checkout.existingAccountEmail === billing.email.trim()
+
+  const needsNationality = checkout.buyerFields.some((f) => f.kind === 'nationality')
+  const countriesQuery = hooks.useCountries({
+    enabled: needsNationality || gates.showAddress,
+  })
+  const countries = useMemo(() => countriesQuery.data ?? [], [countriesQuery.data])
+  const statesQuery = hooks.useStates(billing.countryId, {
+    enabled: Boolean(billing.countryId),
+  })
+  const states = useMemo(() => statesQuery.data ?? [], [statesQuery.data])
+
+  // Event country → signed-in profile → US, matching the hosted checkout's
+  // country preference order. Also retain the ISO code for Stripe + phone UI.
+  useEffect(() => {
+    if (
+      countryDefaultApplied.current ||
+      billing.countryId ||
+      countries.length === 0 ||
+      profile.isLoading ||
+      (eventId && event.isLoading)
+    ) {
+      return
+    }
+    const eventCode = event.data?.countryCode?.toLowerCase()
+    const preferred =
+      countries.find((country) => country.code?.toLowerCase() === eventCode) ??
+      countries.find(
+        (country) =>
+          profile.data?.countryId !== null &&
+          profile.data?.countryId !== undefined &&
+          String(country.id) === String(profile.data.countryId)
+      ) ??
+      countries.find((country) => country.code?.toLowerCase() === 'us')
+    if (!preferred) return
+    countryDefaultApplied.current = true
+    setBilling((current) => ({
+      ...current,
+      countryId: String(preferred.id),
+      countryCode: preferred.code?.toUpperCase(),
+      stateId: undefined,
+      stateCode: undefined,
+    }))
+  }, [
+    billing.countryId,
+    countries,
+    profile.isLoading,
+    profile.data?.countryId,
+    eventId,
+    event.isLoading,
+    event.data?.countryCode,
+  ])
+
+  useEffect(() => {
+    if (!billing.countryId) return
+    const country = countries.find(
+      (candidate) => String(candidate.id) === String(billing.countryId)
+    )
+    const countryCode = country?.code?.toUpperCase()
+    if (countryCode && countryCode !== billing.countryCode) {
+      setBilling((current) => ({ ...current, countryCode }))
+    }
+  }, [billing.countryId, billing.countryCode, countries])
+
+  useEffect(() => {
+    if (!billing.stateId) return
+    const state = states.find(
+      (candidate) => String(candidate.id) === String(billing.stateId)
+    )
+    const stateCode = state?.code
+    if (stateCode && stateCode !== billing.stateCode) {
+      setBilling((current) => ({ ...current, stateCode }))
+    }
+  }, [billing.stateId, billing.stateCode, states])
+
+  const setB = (k: keyof BillingDraft) => (e: ChangeEvent<HTMLInputElement>) =>
+    setBilling((b) => ({ ...b, [k]: e.target.value }))
+
+  const patchHolder = (i: number, patch: Partial<HolderDraft>) =>
+    setHolders((hs) => hs.map((h, j) => (j === i ? { ...h, ...patch } : h)))
+
+  const [dobYear, dobMonth, dobDay] = dob ? dob.split('-').map(Number) : []
+  const committedBilling: CheckoutBilling = {
+    ...checkout.billing,
+    ...billing,
+    stateRequired: gates.showAddress && Boolean(billing.countryId) && states.length > 0,
+    dataCapture,
+    dobDay,
+    dobMonth,
+    dobYear,
+  }
+  const committedHolders: CheckoutHolder[] = holders.map((holder) => ({
+    firstName: holderNamesRequired
+      ? holder.firstName
+      : holder.firstName || billing.firstName,
+    lastName: holderNamesRequired ? holder.lastName : holder.lastName || billing.lastName,
+    email:
+      showHolders && collectHolderContact ? holder.email : holder.email || billing.email,
+    phone:
+      showHolders && collectHolderContact ? holder.phone : holder.phone || billing.phone,
+    ticketTypeId: holder.ticketTypeId,
+    ticketDataCapture: holder.ticketDataCapture,
+  }))
+  const missingDetails = missingCheckoutDetails(
+    {
+      billing: committedBilling,
+      holders: committedHolders,
+      selections: checkout.selections,
+      breakdown: checkout.breakdown,
+      holderNamesRequired: checkout.holderNamesRequired,
+      fieldGates: checkout.fieldGates,
+      customFields: checkout.customFields,
+    },
+    {
+      requireEmailConfirmation,
+      collectTicketHolders,
+      requireHolderContact: collectHolderContact,
+    }
+  )
+  const complete = missingDetails.length === 0
+  const showValidation = validation.attempt > 0
+  const missingSet = new Set(missingDetails)
+  const fieldError = (key: string, message = 'This field is required.') =>
+    showValidation && missingSet.has(key) ? message : undefined
+  const dobError = showValidation
+    ? missingDetails.find(
+        (detail) => detail === 'Date of birth' || detail.startsWith('Age ')
+      )
+    : undefined
+  const phoneCountry = (
+    billing.countryCode ??
+    event.data?.countryCode ??
+    'US'
+  )?.toLowerCase() as CountryIso2
+
+  const commit = () => {
+    checkout.setBilling(committedBilling)
+    checkout.setHolders(committedHolders)
+    if (ttfOptInLabel || brandOptInLabel) checkout.setConsent(consent)
+  }
+
+  // Combined mode: keep the engine in sync as the form is filled, so <Payment/>
+  // is always chargeable without a separate "continue" click.
+  useEffect(() => {
+    if (combined) commit()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [combined, billing, holders, consent, dob, dataCapture])
+
+  const renderGroupFields = (
+    group: EventCustomFieldGroup,
+    values: CustomFieldValues,
+    onChange: (name: string, v: string | string[]) => void,
+    ticketTypeId?: string,
+    ticketIndex?: number
+  ) =>
+    ticketFieldsFor(group.fields, ticketTypeId).map((f) => {
+      const label = f.label || f.name
+      const missingKey =
+        ticketIndex === undefined ? label : `${label} (ticket ${ticketIndex + 1})`
+      return (
+        <CustomFieldInput
+          key={f.id}
+          field={f}
+          value={values[f.name]}
+          error={fieldError(missingKey)}
+          onChange={(v) => onChange(f.name, v)}
+        />
+      )
+    })
+
+  const hasEventSpecificDetails =
+    checkout.buyerFields.length > 0 ||
+    checkout.customFields.some((group) => group.fields.length > 0) ||
+    showHolders ||
+    gates.showDob
+  const skipBilling =
+    skipWhenProfileComplete &&
+    checkout.isLoggedIn &&
+    profile.isSuccess &&
+    complete &&
+    !hasEventSpecificDetails
+
+  // This is the safe EmbeddedCheckout interpretation of legacy
+  // `skip_billing_page`: payment remains visible; only a fully satisfied,
+  // ordinary billing card disappears.
+  if (skipBilling) return null
+
+  return (
+    <>
+      <Card className={className}>
+        <SectionHeader step={step} title={heading} />
+
+        {onLogin && !checkout.isLoggedIn && (
+          <div className="tf-checkout-billing__login">
+            <span>Login &amp; skip ahead:</span>
+            <button
+              type="button"
+              className="tf-checkout-billing__login-btn"
+              onClick={() => onLogin()}
+            >
+              Login
+            </button>
+          </div>
+        )}
+
+        <FieldRow>
+          <Field
+            error={fieldError('First name', 'First name is required.')}
+            invalid={Boolean(fieldError('First name'))}
+          >
+            <Input
+              placeholder="First name *"
+              value={billing.firstName}
+              required
+              invalid={Boolean(fieldError('First name'))}
+              aria-invalid={Boolean(fieldError('First name'))}
+              onChange={setB('firstName')}
+            />
+          </Field>
+          <Field
+            error={fieldError('Last name', 'Last name is required.')}
+            invalid={Boolean(fieldError('Last name'))}
+          >
+            <Input
+              placeholder="Last name *"
+              value={billing.lastName}
+              required
+              invalid={Boolean(fieldError('Last name'))}
+              aria-invalid={Boolean(fieldError('Last name'))}
+              onChange={setB('lastName')}
+            />
+          </Field>
+        </FieldRow>
+        <FieldRow>
+          <Field
+            error={fieldError('Valid email address', 'Enter a valid email address.')}
+            invalid={Boolean(fieldError('Valid email address'))}
+          >
+            <Input
+              type="email"
+              autoComplete="email"
+              placeholder="Email *"
+              value={billing.email}
+              required
+              invalid={Boolean(fieldError('Valid email address'))}
+              aria-invalid={Boolean(fieldError('Valid email address'))}
+              onChange={setB('email')}
+            />
+          </Field>
+          {requireEmailConfirmation && !checkout.isLoggedIn && (
+            <Field
+              error={fieldError(
+                'Matching email confirmation',
+                'Email addresses must match.'
+              )}
+              invalid={Boolean(fieldError('Matching email confirmation'))}
+            >
+              <Input
+                type="email"
+                autoComplete="email"
+                placeholder="Confirm email *"
+                value={billing.confirmEmail ?? ''}
+                required
+                invalid={Boolean(fieldError('Matching email confirmation'))}
+                aria-invalid={Boolean(fieldError('Matching email confirmation'))}
+                onChange={setB('confirmEmail')}
+              />
+            </Field>
+          )}
+        </FieldRow>
+        {!showValidation &&
+          requireEmailConfirmation &&
+          billing.confirmEmail &&
+          billing.confirmEmail.trim().toLowerCase() !==
+            billing.email.trim().toLowerCase() && (
+            <p className="tf-checkout-error-text">The email addresses do not match.</p>
+          )}
+        {emailTaken && (
+          <p className="tf-checkout-note tf-checkout-billing__email-taken">
+            This email is already registered.{' '}
+            {onLogin ? (
+              <button
+                type="button"
+                className="tf-checkout-billing__login-link"
+                onClick={() => onLogin(billing.email)}
+              >
+                Log in to autofill your details
+              </button>
+            ) : (
+              'Log in to autofill your details.'
+            )}
+          </p>
+        )}
+
+        {checkout.buyerFields.map((f) => (
+          <BuyerField
+            key={f.key}
+            field={f}
+            value={String(billing[f.key] ?? '')}
+            onChange={(v) => setBilling((b) => ({ ...b, [f.key]: v }))}
+            countries={countries}
+            error={fieldError(
+              f.kind === 'nationality'
+                ? 'Nationality'
+                : f.kind === 'gender'
+                  ? 'Gender'
+                  : 'Instagram handle'
+            )}
+          />
+        ))}
+
+        {gates.showPhone && (
+          <Field
+            label={`Phone${gates.phoneRequired ? ' *' : ''}`}
+            error={fieldError('Valid phone number', 'Enter a valid phone number.')}
+            invalid={Boolean(fieldError('Valid phone number'))}
+          >
+            <PhoneInput
+              className="tf-checkout-phone"
+              inputClassName={`tf-checkout-input tf-checkout-phone__input${
+                fieldError('Valid phone number') ? ' tf-checkout-input--invalid' : ''
+              }`}
+              defaultCountry={phoneCountry}
+              disableDialCodePrefill
+              value={billing.phone ?? ''}
+              required={gates.phoneRequired}
+              placeholder="Phone number"
+              inputProps={{
+                autoComplete: 'tel',
+                'aria-label': 'Phone',
+                'aria-invalid': Boolean(fieldError('Valid phone number')),
+              }}
+              onChange={(phone) => setBilling((current) => ({ ...current, phone }))}
+            />
+          </Field>
+        )}
+
+        {gates.showDob && (
+          <Field
+            label={`Date of birth *${
+              gates.minimumAge ? ` (must be ${gates.minimumAge}+)` : ''
+            }`}
+            error={
+              dobError === 'Date of birth'
+                ? 'Date of birth is required.'
+                : dobError
+                  ? `You must be ${gates.minimumAge} or older.`
+                  : undefined
+            }
+            invalid={Boolean(dobError)}
+          >
+            <Input
+              type="date"
+              value={dob}
+              required
+              invalid={Boolean(dobError)}
+              aria-invalid={Boolean(dobError)}
+              onChange={(e) => setDob(e.target.value)}
+            />
+          </Field>
+        )}
+
+        {gates.showAddress && (
+          <BillingAddressFields
+            billing={billing}
+            countries={countries}
+            states={states}
+            fieldError={fieldError}
+            setBilling={setBilling}
+          />
+        )}
+
+        {/* Order-level custom fields */}
+        {orderGroups.map((g) => (
+          <Fragment key={g.id}>
+            {g.label && (
+              <div className="tf-checkout-billing__section-label">{g.label}</div>
+            )}
+            {renderGroupFields(g, dataCapture, (name, v) =>
+              setDataCapture((d) => ({ ...d, [name]: v }))
+            )}
+          </Fragment>
+        ))}
+
+        {/* Marketing opt-ins (optional) */}
+        {brandOptInLabel && (
+          <Checkbox
+            checked={consent.brandOptIn}
+            onChange={(e) => setConsent((c) => ({ ...c, brandOptIn: e.target.checked }))}
+            className="tf-checkout-checkbox--consent"
+            label={brandOptInLabel}
+          />
+        )}
+        {privacyPolicy ? (
+          <div
+            className={
+              (showPrivacyError || showValidation) && !consent.ttfOptIn
+                ? 'tf-checkout-consent--error'
+                : ''
+            }
+            data-checkout-invalid={
+              ((showPrivacyError || showValidation) && !consent.ttfOptIn) || undefined
+            }
+          >
+            <Checkbox
+              required
+              checked={consent.ttfOptIn}
+              aria-invalid={(showPrivacyError || showValidation) && !consent.ttfOptIn}
+              onChange={(e) => setConsent((c) => ({ ...c, ttfOptIn: e.target.checked }))}
+              className="tf-checkout-checkbox--consent"
+              label={
+                <>
+                  I have read and agree to {privacyPolicy.brandName}{' '}
+                  <a href={privacyPolicy.url} target="_blank" rel="noreferrer">
+                    {privacyPolicy.linkLabel || 'Privacy Policy.'}
+                  </a>
+                  {' *'}
+                </>
+              }
+            />
+            {(showPrivacyError || showValidation) && !consent.ttfOptIn && (
+              <div className="tf-checkout-consent__error">Required</div>
+            )}
+          </div>
+        ) : ttfOptInLabel ? (
+          <Checkbox
+            checked={consent.ttfOptIn}
+            onChange={(e) => setConsent((c) => ({ ...c, ttfOptIn: e.target.checked }))}
+            className="tf-checkout-checkbox--consent"
+            label={ttfOptInLabel}
+          />
+        ) : null}
+        {!combined && (
+          <>
+            <Button
+              block
+              onClick={() => {
+                if (!complete) {
+                  validation.requestValidation()
+                  return
+                }
+                commit()
+                onContinue?.()
+              }}
+            >
+              {buttonLabel}
+            </Button>
+          </>
+        )}
+      </Card>
+      {showHolders && (
+        <TicketHoldersCard
+          holders={holders}
+          holderNamesRequired={holderNamesRequired}
+          collectHolderContact={collectHolderContact}
+          phoneCountry={phoneCountry}
+          fieldError={fieldError}
+          patchHolder={patchHolder}
+          renderCustomFields={(holder, index) =>
+            ticketGroups.map((group) =>
+              renderGroupFields(
+                group,
+                holder.ticketDataCapture,
+                (name, value) =>
+                  patchHolder(index, {
+                    ticketDataCapture: {
+                      ...holder.ticketDataCapture,
+                      [name]: value,
+                    },
+                  }),
+                holder.ticketTypeId,
+                index
+              )
+            )
+          }
+        />
+      )}
+    </>
+  )
+}