tf-checkout-react-native 1.0.45 → 2.0.0-beta.0

package/src/sections/BillingInfo.tsx

@@ -0,0 +1,770 @@
+/**
+ * `<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. The RN analogue of the web `BillingInfo`, at full field
+ * parity — same fields, labels, validation rules, and copy.
+ *
+ * Native adaptations (see inline comments): the web `PhoneInput` lib becomes an
+ * `Input` with `keyboardType="phone-pad"`; the web date input becomes a text
+ * `Input` accepting `YYYY-MM-DD`; every `<select>` becomes the `../ui/Select`
+ * sheet; the privacy-policy link opens via `Linking` instead of an `<a>`.
+ */
+import React, {
+  Fragment,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react'
+import { Linking, Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  hooks,
+  mapProfileToBilling,
+  missingCheckoutDetails,
+  isEmail,
+  ticketFieldsFor,
+  type CheckoutBilling,
+  type CheckoutHolder,
+  type CustomFieldValues,
+  type EventCustomFieldGroup,
+} from 'tf-checkout-shared'
+
+import {
+  useCheckoutContext,
+  useCheckoutValidation,
+  useTheme,
+} from '../ui/CheckoutProvider'
+import { CustomFieldInput } from '../ui/CustomFields'
+import { Checkbox, Field, Input } from '../ui/Field'
+import { Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
+import type { ResolvedTheme } from '../ui/theme'
+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. */
+  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). The
+   *  native `SectionHeader` has no badge slot, so this is accepted for API parity
+   *  but not rendered. */
+  step?: ReactNode
+}
+
+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,
+}) => {
+  const checkout = useCheckoutContext()
+  const validation = useCheckoutValidation()
+  const theme = useTheme()
+  const s = useStyles(theme)
+  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))
+
+  // The engine setters are stable references (the shared hook holds the engine in
+  // a ref). Alias them so the live-commit effect below can depend on the SETTERS
+  // — never the whole `checkout` object (a fresh snapshot every render → effect
+  // re-fires each render → setBilling → re-render → infinite loop).
+  const {
+    setBilling: commitBilling,
+    setHolders: commitHolders,
+    setConsent: commitConsent,
+  } = checkout
+
+  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, sel) => n + sel.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((slot, 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: slot.ticketTypeId,
+        ticketName: slot.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.
+  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) => (value: string) =>
+    setBilling((b) => ({ ...b, [k]: 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 commit = () => {
+    commitBilling(committedBilling)
+    commitHolders(committedHolders)
+    if (ttfOptInLabel || brandOptInLabel) commitConsent(consent)
+  }
+
+  // Combined mode: keep the engine in sync as the form is filled, so <Payment/>
+  // is always chargeable without a separate "continue" click. Depend on the
+  // stable engine setters + the local source state — NOT the freshly-rebuilt
+  // `committed*` objects (new refs each render → infinite loop).
+  useEffect(() => {
+    if (combined) commit()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    combined,
+    commitBilling,
+    commitHolders,
+    commitConsent,
+    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
+
+  const privacyInvalid = (showPrivacyError || showValidation) && !consent.ttfOptIn
+
+  return (
+    <>
+      <Card>
+        <SectionHeader title={heading} />
+
+        {onLogin && !checkout.isLoggedIn ? (
+          <View style={s.loginRow}>
+            <Text style={s.note}>Login &amp; skip ahead:</Text>
+            <Pressable onPress={() => onLogin()}>
+              <Text style={s.link}>Login</Text>
+            </Pressable>
+          </View>
+        ) : null}
+
+        <View style={s.row}>
+          <View style={s.col}>
+            <Field error={fieldError('First name', 'First name is required.')}>
+              <Input
+                placeholder="First name *"
+                value={billing.firstName}
+                onChangeText={setB('firstName')}
+                autoCapitalize="words"
+                invalid={Boolean(fieldError('First name'))}
+              />
+            </Field>
+          </View>
+          <View style={s.col}>
+            <Field error={fieldError('Last name', 'Last name is required.')}>
+              <Input
+                placeholder="Last name *"
+                value={billing.lastName}
+                onChangeText={setB('lastName')}
+                autoCapitalize="words"
+                invalid={Boolean(fieldError('Last name'))}
+              />
+            </Field>
+          </View>
+        </View>
+
+        <View style={s.row}>
+          <View style={s.col}>
+            <Field
+              error={fieldError('Valid email address', 'Enter a valid email address.')}
+            >
+              <Input
+                placeholder="Email *"
+                value={billing.email}
+                onChangeText={setB('email')}
+                keyboardType="email-address"
+                autoCapitalize="none"
+                invalid={Boolean(fieldError('Valid email address'))}
+              />
+            </Field>
+          </View>
+          {requireEmailConfirmation && !checkout.isLoggedIn ? (
+            <View style={s.col}>
+              <Field
+                error={fieldError(
+                  'Matching email confirmation',
+                  'Email addresses must match.'
+                )}
+              >
+                <Input
+                  placeholder="Confirm email *"
+                  value={billing.confirmEmail ?? ''}
+                  onChangeText={setB('confirmEmail')}
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  invalid={Boolean(fieldError('Matching email confirmation'))}
+                />
+              </Field>
+            </View>
+          ) : null}
+        </View>
+        {!showValidation &&
+        requireEmailConfirmation &&
+        billing.confirmEmail &&
+        billing.confirmEmail.trim().toLowerCase() !==
+          billing.email.trim().toLowerCase() ? (
+          <ErrorText>The email addresses do not match.</ErrorText>
+        ) : null}
+        {emailTaken ? (
+          <Text style={s.note}>
+            This email is already registered.{' '}
+            {onLogin ? (
+              <Text style={s.link} onPress={() => onLogin(billing.email)}>
+                Log in to autofill your details
+              </Text>
+            ) : (
+              'Log in to autofill your details.'
+            )}
+          </Text>
+        ) : null}
+
+        {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"
+            required={gates.phoneRequired}
+            error={fieldError('Valid phone number', 'Enter a valid phone number.')}
+          >
+            {/* Native: web PhoneInput lib → plain phone-pad Input. */}
+            <Input
+              placeholder="Phone number"
+              value={billing.phone ?? ''}
+              onChangeText={(v) => setBilling((current) => ({ ...current, phone: v }))}
+              keyboardType="phone-pad"
+              invalid={Boolean(fieldError('Valid phone number'))}
+            />
+          </Field>
+        ) : null}
+
+        {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
+            }
+          >
+            {/* Native: web date input → text Input, ISO YYYY-MM-DD. */}
+            <Input
+              placeholder="YYYY-MM-DD"
+              value={dob}
+              onChangeText={setDob}
+              keyboardType="numbers-and-punctuation"
+              invalid={Boolean(dobError)}
+            />
+          </Field>
+        ) : null}
+
+        {gates.showAddress ? (
+          <BillingAddressFields
+            billing={billing}
+            countries={countries}
+            states={states}
+            fieldError={fieldError}
+            setBilling={setBilling}
+          />
+        ) : null}
+
+        {/* Order-level custom fields */}
+        {orderGroups.map((g) => (
+          <Fragment key={g.id}>
+            {g.label ? <Text style={s.sectionLabel}>{g.label}</Text> : null}
+            {renderGroupFields(g, dataCapture, (name, v) =>
+              setDataCapture((d) => ({ ...d, [name]: v }))
+            )}
+          </Fragment>
+        ))}
+
+        {/* Marketing opt-ins (optional) */}
+        {brandOptInLabel ? (
+          <Checkbox
+            checked={consent.brandOptIn}
+            onChange={(brandOptIn) => setConsent((c) => ({ ...c, brandOptIn }))}
+            label={brandOptInLabel}
+          />
+        ) : null}
+        {privacyPolicy ? (
+          <View style={s.consent}>
+            <Checkbox
+              checked={consent.ttfOptIn}
+              onChange={(ttfOptIn) => setConsent((c) => ({ ...c, ttfOptIn }))}
+              invalid={privacyInvalid}
+              label={
+                <Text style={s.consentLabel}>
+                  I have read and agree to {privacyPolicy.brandName}{' '}
+                  <Text
+                    style={s.link}
+                    onPress={() =>
+                      Linking.openURL(privacyPolicy.url).catch(() => undefined)
+                    }
+                  >
+                    {privacyPolicy.linkLabel || 'Privacy Policy.'}
+                  </Text>
+                  {' *'}
+                </Text>
+              }
+            />
+            {privacyInvalid ? <ErrorText>Required</ErrorText> : null}
+          </View>
+        ) : ttfOptInLabel ? (
+          <Checkbox
+            checked={consent.ttfOptIn}
+            onChange={(ttfOptIn) => setConsent((c) => ({ ...c, ttfOptIn }))}
+            label={ttfOptInLabel}
+          />
+        ) : null}
+
+        {!combined ? (
+          <Button
+            onPress={() => {
+              if (!complete) {
+                validation.requestValidation()
+                return
+              }
+              commit()
+              onContinue?.()
+            }}
+          >
+            {buttonLabel}
+          </Button>
+        ) : null}
+      </Card>
+
+      {showHolders ? (
+        <TicketHoldersCard
+          holders={holders}
+          holderNamesRequired={holderNamesRequired}
+          collectHolderContact={collectHolderContact}
+          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
+              )
+            )
+          }
+        />
+      ) : null}
+    </>
+  )
+}
+
+const useStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loginRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+        note: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        link: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        sectionLabel: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        consent: { gap: 6 },
+        consentLabel: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        row: { flexDirection: 'row', gap: 10 },
+        col: { flex: 1 },
+      }),
+    [theme]
+  )