tf-checkout-react 1.7.31 → 2.0.0-beta.1

package/src/sections/billing/BillingAddressFields.tsx

@@ -0,0 +1,138 @@
+import React, { type Dispatch, type FC, type SetStateAction } from 'react'
+
+import { Field, FieldRow, Input, Select } from '../../ui/Field'
+import type { BillingDraft, BillingFieldError, LocationOption } from './types'
+
+interface BillingAddressFieldsProps {
+  billing: BillingDraft
+  countries: LocationOption[]
+  states: LocationOption[]
+  fieldError: BillingFieldError
+  setBilling: Dispatch<SetStateAction<BillingDraft>>
+}
+
+/** Address fields shared by the embedded and stepped billing experiences. */
+export const BillingAddressFields: FC<BillingAddressFieldsProps> = ({
+  billing,
+  countries,
+  states,
+  fieldError,
+  setBilling,
+}) => {
+  const setValue =
+    (key: keyof BillingDraft) => (event: React.ChangeEvent<HTMLInputElement>) =>
+      setBilling((current) => ({ ...current, [key]: event.target.value }))
+
+  return (
+    <>
+      <div className="tf-checkout-billing__section-label">Billing address *</div>
+      <Field
+        error={fieldError('Street address', 'Street address is required.')}
+        invalid={Boolean(fieldError('Street address'))}
+      >
+        <Input
+          placeholder="Street address *"
+          autoComplete="street-address"
+          value={billing.streetAddress ?? ''}
+          required
+          invalid={Boolean(fieldError('Street address'))}
+          aria-invalid={Boolean(fieldError('Street address'))}
+          onChange={setValue('streetAddress')}
+        />
+      </Field>
+      <FieldRow>
+        <Field
+          error={fieldError('City', 'City is required.')}
+          invalid={Boolean(fieldError('City'))}
+        >
+          <Input
+            placeholder="City *"
+            autoComplete="address-level2"
+            value={billing.city ?? ''}
+            required
+            invalid={Boolean(fieldError('City'))}
+            aria-invalid={Boolean(fieldError('City'))}
+            onChange={setValue('city')}
+          />
+        </Field>
+        <Field
+          error={fieldError('ZIP / postcode', 'ZIP / postcode is required.')}
+          invalid={Boolean(fieldError('ZIP / postcode'))}
+        >
+          <Input
+            placeholder="ZIP / Postcode *"
+            autoComplete="postal-code"
+            value={billing.zip ?? ''}
+            required
+            invalid={Boolean(fieldError('ZIP / postcode'))}
+            aria-invalid={Boolean(fieldError('ZIP / postcode'))}
+            onChange={setValue('zip')}
+          />
+        </Field>
+      </FieldRow>
+      <FieldRow>
+        <Field
+          error={fieldError('Country', 'Country is required.')}
+          invalid={Boolean(fieldError('Country'))}
+        >
+          <Select
+            value={billing.countryId ?? ''}
+            aria-label="Country"
+            required
+            invalid={Boolean(fieldError('Country'))}
+            aria-invalid={Boolean(fieldError('Country'))}
+            onChange={(event) => {
+              const country = countries.find(
+                (candidate) => String(candidate.id) === event.target.value
+              )
+              setBilling((current) => ({
+                ...current,
+                countryId: event.target.value,
+                countryCode: country?.code?.toUpperCase(),
+                stateId: undefined,
+                stateCode: undefined,
+              }))
+            }}
+          >
+            <option value="">— country * —</option>
+            {countries.map((country) => (
+              <option key={country.id} value={country.id}>
+                {country.name}
+              </option>
+            ))}
+          </Select>
+        </Field>
+        <Field
+          error={fieldError('State / county', 'State / county is required.')}
+          invalid={Boolean(fieldError('State / county'))}
+        >
+          <Select
+            value={billing.stateId ?? ''}
+            disabled={!billing.countryId || states.length === 0}
+            aria-label="State / region"
+            required={states.length > 0}
+            invalid={Boolean(fieldError('State / county'))}
+            aria-invalid={Boolean(fieldError('State / county'))}
+            onChange={(event) => {
+              const state = states.find(
+                (candidate) => String(candidate.id) === event.target.value
+              )
+              setBilling((current) => ({
+                ...current,
+                stateId: event.target.value,
+                stateCode: state?.code,
+              }))
+            }}
+          >
+            <option value="">— state / county{states.length > 0 ? ' *' : ''} —</option>
+            {states.map((state) => (
+              <option key={state.id} value={state.id}>
+                {state.name}
+              </option>
+            ))}
+          </Select>
+        </Field>
+      </FieldRow>
+    </>
+  )
+}

package/src/sections/billing/BuyerField.tsx

@@ -0,0 +1,75 @@
+import React, { type FC, type ReactNode } from 'react'
+
+import type { BuyerFieldSpec } from 'tf-checkout-shared'
+
+import { Field, Input, Select } from '../../ui/Field'
+import type { LocationOption } from './types'
+
+interface BuyerFieldProps {
+  field: BuyerFieldSpec
+  value: string
+  countries: LocationOption[]
+  error?: ReactNode
+  onChange: (value: string) => void
+}
+
+/** Renders one backend-configured buyer field without owning form state. */
+export const BuyerField: FC<BuyerFieldProps> = ({
+  field,
+  value,
+  countries,
+  error,
+  onChange,
+}) => {
+  const label = `${field.label}${field.required ? ' *' : ''}`
+  const invalid = error !== undefined && error !== null
+
+  if (field.kind === 'gender') {
+    return (
+      <Field label={label} error={error} invalid={invalid}>
+        <Select
+          value={value}
+          invalid={invalid}
+          aria-invalid={invalid}
+          onChange={(event) => onChange(event.target.value)}
+        >
+          <option value="">— select —</option>
+          <option value="M">Male</option>
+          <option value="F">Female</option>
+        </Select>
+      </Field>
+    )
+  }
+
+  if (field.kind === 'nationality') {
+    return (
+      <Field label={label} error={error} invalid={invalid}>
+        <Select
+          value={value}
+          invalid={invalid}
+          aria-invalid={invalid}
+          onChange={(event) => onChange(event.target.value)}
+        >
+          <option value="">— select —</option>
+          {countries.map((country) => (
+            <option key={country.id} value={country.id}>
+              {country.name}
+            </option>
+          ))}
+        </Select>
+      </Field>
+    )
+  }
+
+  return (
+    <Field label={label} error={error} invalid={invalid}>
+      <Input
+        placeholder="@handle or profile URL"
+        value={value}
+        invalid={invalid}
+        aria-invalid={invalid}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </Field>
+  )
+}

package/src/sections/billing/TicketHoldersCard.tsx

@@ -0,0 +1,124 @@
+import React, { type FC, type ReactNode } from 'react'
+import { PhoneInput, type CountryIso2 } from 'react-international-phone'
+
+import { Card, SectionHeader } from '../../ui/Card'
+import { Field, FieldRow, Input } from '../../ui/Field'
+import type { BillingFieldError, HolderDraft } from './types'
+
+interface TicketHoldersCardProps {
+  holders: HolderDraft[]
+  holderNamesRequired: boolean
+  collectHolderContact: boolean
+  phoneCountry: CountryIso2
+  fieldError: BillingFieldError
+  renderCustomFields: (holder: HolderDraft, index: number) => ReactNode
+  patchHolder: (index: number, patch: Partial<HolderDraft>) => void
+}
+
+/** Ticket-holder card kept separate from buyer billing for parity and reuse. */
+export const TicketHoldersCard: FC<TicketHoldersCardProps> = ({
+  holders,
+  holderNamesRequired,
+  collectHolderContact,
+  phoneCountry,
+  fieldError,
+  renderCustomFields,
+  patchHolder,
+}) => (
+  <Card className="tf-checkout-billing__holders-card">
+    <SectionHeader title="Ticket Holders" />
+    {holders.map((holder, index) => {
+      const firstNameKey = `Ticket ${index + 1} holder first name`
+      const lastNameKey = `Ticket ${index + 1} holder last name`
+      const emailKey = `Ticket ${index + 1} holder email`
+      const phoneKey = `Ticket ${index + 1} holder phone`
+
+      return (
+        <div key={index} className="tf-checkout-billing__holder">
+          <div className="tf-checkout-billing__holder-title">Ticket {index + 1}</div>
+          {holderNamesRequired && (
+            <FieldRow>
+              <Field
+                label="First Name *"
+                error={fieldError(firstNameKey, 'First name is required.')}
+                invalid={Boolean(fieldError(firstNameKey))}
+              >
+                <Input
+                  value={holder.firstName}
+                  required
+                  invalid={Boolean(fieldError(firstNameKey))}
+                  aria-invalid={Boolean(fieldError(firstNameKey))}
+                  onChange={(event) =>
+                    patchHolder(index, { firstName: event.target.value })
+                  }
+                />
+              </Field>
+              <Field
+                label="Last Name *"
+                error={fieldError(lastNameKey, 'Last name is required.')}
+                invalid={Boolean(fieldError(lastNameKey))}
+              >
+                <Input
+                  value={holder.lastName}
+                  required
+                  invalid={Boolean(fieldError(lastNameKey))}
+                  aria-invalid={Boolean(fieldError(lastNameKey))}
+                  onChange={(event) =>
+                    patchHolder(index, { lastName: event.target.value })
+                  }
+                />
+              </Field>
+            </FieldRow>
+          )}
+          {collectHolderContact && (
+            <FieldRow>
+              <Field
+                label="Email Address *"
+                error={fieldError(emailKey, 'Enter a valid email address.')}
+                invalid={Boolean(fieldError(emailKey))}
+              >
+                <Input
+                  type="email"
+                  autoComplete="email"
+                  value={holder.email}
+                  required
+                  invalid={Boolean(fieldError(emailKey))}
+                  aria-invalid={Boolean(fieldError(emailKey))}
+                  onChange={(event) => patchHolder(index, { email: event.target.value })}
+                />
+              </Field>
+              <Field
+                label="Phone *"
+                error={fieldError(phoneKey, 'Enter a valid phone number.')}
+                invalid={Boolean(fieldError(phoneKey))}
+              >
+                <PhoneInput
+                  className="tf-checkout-phone"
+                  inputClassName={`tf-checkout-input tf-checkout-phone__input${
+                    fieldError(phoneKey) ? ' tf-checkout-input--invalid' : ''
+                  }`}
+                  defaultCountry={phoneCountry}
+                  // Matches the buyer phone field in ../BillingInfo.tsx — see
+                  // the note there on why the dial code must stay out of the
+                  // input.
+                  disableDialCodeAndPrefix
+                  showDisabledDialCodeAndPrefix
+                  disableDialCodePrefill
+                  value={holder.phone}
+                  required
+                  inputProps={{
+                    autoComplete: 'tel',
+                    'aria-label': phoneKey,
+                    'aria-invalid': Boolean(fieldError(phoneKey)),
+                  }}
+                  onChange={(phone) => patchHolder(index, { phone })}
+                />
+              </Field>
+            </FieldRow>
+          )}
+          {renderCustomFields(holder, index)}
+        </div>
+      )
+    })}
+  </Card>
+)

package/src/sections/billing/fieldRules.ts

@@ -0,0 +1,43 @@
+/**
+ * Small value rules shared by the billing form's inputs. They live here rather
+ * than in `../BillingInfo.tsx` so that file stays inside the checkout
+ * architecture budget, and because each one encodes a non-obvious constraint
+ * worth stating once.
+ */
+
+/**
+ * The phone control keeps the dial code outside the input, so it reports a bare
+ * `"+52"` the moment it mounts — before the buyer has typed anything. A string
+ * that short is a country prefix, not a number, so treat it as blank: it must
+ * not out-rank a saved profile number, and it must never reach the API as a
+ * phone in its own right.
+ */
+export const isBlankPhone = (phone?: string) =>
+  !phone || /^\+?\d{0,4}$/.test(phone.trim())
+
+/** Earliest date of birth the form accepts. Nobody alive predates it. */
+export const DOB_MIN = '1900-01-01'
+
+/**
+ * Today as `yyyy-mm-dd` in the buyer's own timezone. Built from the local
+ * calendar parts rather than `toISOString()`, which would roll over to
+ * tomorrow's date for anyone east of Greenwich late in the day.
+ */
+export const todayISO = () => {
+  const now = new Date()
+  return [
+    now.getFullYear(),
+    String(now.getMonth() + 1).padStart(2, '0'),
+    String(now.getDate()).padStart(2, '0'),
+  ].join('-')
+}
+
+/** `dobDay/dobMonth/dobYear` → the `yyyy-mm-dd` a date input expects. */
+export const toDateInputValue = (
+  year?: number,
+  month?: number,
+  day?: number
+): string | undefined =>
+  year && month && day
+    ? `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
+    : undefined

package/src/sections/billing/types.ts

@@ -0,0 +1,10 @@
+/**
+ * The billing form shapes now live in the SDK so web and native share one
+ * model. Re-exported here to keep `./billing/types` imports working.
+ */
+export type {
+  BillingDraft,
+  HolderDraft,
+  LocationOption,
+  BillingFieldError,
+} from 'tf-checkout-shared'

package/src/sections/index.ts

@@ -0,0 +1,15 @@
+/** Checkout section components — composable, context-driven, themed. */
+export { Tickets, type TicketsProps } from './Tickets'
+export { SeatMap, type SeatMapProps } from './SeatMap'
+export { AddOns, type AddOnsProps } from './AddOns'
+export {
+  BillingInfo,
+  type BillingInfoProps,
+  type CheckoutPrivacyPolicy,
+} from './BillingInfo'
+export { Payment, type PaymentProps } from './Payment'
+export { OrderSummary, type OrderSummaryProps } from './OrderSummary'
+export { IDVerification, type IDVerificationProps } from './IDVerification'
+export { Confirmation, type ConfirmationProps } from './Confirmation'
+export { OrderConfirmation, type OrderConfirmationProps } from './OrderConfirmation'
+export { OrderIDVerification, type OrderIDVerificationProps } from './OrderIDVerification'

package/src/sections/seatMap.utils.ts

@@ -0,0 +1,105 @@
+/**
+ * Seat-wire helpers — a faithful port of the legacy `seatMapContainer/utils.ts`
+ * (the real seat-map logic), rewritten in dependency-free TS. These translate
+ * the `seat-map-data` + `seats/status` responses into the shapes `<SeatMap/>`
+ * and the `tf-seat-map-view` widget need.
+ */
+
+/** `{ [tierId]: { [ticketTypeId]: Relation } }` — from `seat-map-data`. */
+export interface SeatRelation {
+  ticket_type_id: string
+  ticket_type_option: string
+  ticket_type_price: number
+  ticket_type_name: string
+  ticket_type_min_number_of_guests?: string | number | null
+  ticket_type_max_number_of_guests?: string | number | null
+  ticket_type_deposit?: string
+  guest_price?: string
+  fee_included?: boolean
+  description?: string | null
+}
+export type TierRelations = Record<string, Record<string, SeatRelation>>
+
+/** `{ [groupRowId]: { [seatIndex]: statusCode } }` — from `seats/status`. */
+export type SeatStatuses = Record<string, Record<string, string>>
+
+/** `seat-map-data`'s `eventSeats` — used only to resolve seatId → tierId. */
+export interface EventSeatLike {
+  tier_id: number | string
+  seats: Record<string, number>
+}
+
+/** A seat the buyer holds: its id + resolved tier. */
+export interface ReservedSeat {
+  seatId: string
+  tierId: string
+}
+
+/** Statuses the widget won't let the buyer act on (blocked / reserved-by-others). */
+export const UNSELECTABLE_STATUSES = new Set(['B', 'R', 'BLOCKED', 'RE'])
+
+/** Max seats a single order may hold (legacy cap). */
+export const MAX_SEATS = 10
+
+/**
+ * `seatId` (`"rowId:seatIndex"`) → its tier id, by finding the `eventSeats`
+ * group whose `seats[rowId]` covers `seatIndex`. Port of legacy
+ * `getTierIdBasedOnSeatId`.
+ */
+export const getTierIdBasedOnSeatId = (
+  seatId: string,
+  eventSeats: EventSeatLike[]
+): string => {
+  const [rowId, seatIndex] = seatId.split(':')
+  for (const group of eventSeats ?? []) {
+    for (const [row, count] of Object.entries(group.seats ?? {})) {
+      if (row === rowId && Number(seatIndex) <= Number(count)) {
+        return String(group.tier_id)
+      }
+    }
+  }
+  return ''
+}
+
+/**
+ * Statuses → the seat ids the buyer currently OWNS (status `'OR'`). Also rewrites
+ * `'H'` (held by someone else) to `'BLOCKED'` so the widget greys it out — the
+ * mutation the legacy container did in place. Pass a status object you own
+ * (freshly fetched), not shared React state.
+ */
+export const getOwnReservationsBasedOnStatuses = (statuses: SeatStatuses): string[] => {
+  const own: string[] = []
+  for (const groupRowId of Object.keys(statuses ?? {})) {
+    const row = statuses[groupRowId]
+    for (const seatIndex of Object.keys(row ?? {})) {
+      if (row[seatIndex] === 'OR') own.push(`${groupRowId}:${seatIndex}`)
+      else if (row[seatIndex] === 'H') row[seatIndex] = 'BLOCKED'
+    }
+  }
+  return own
+}
+
+/**
+ * Tier→type relations → the flat relation array the `tf-seat-map-view` widget
+ * wants (its prop is the legacy-typo'd `ticketTypeTireRelationsArray`). Port of
+ * legacy `getTierRelationsArray`.
+ */
+export const getTierRelationsArray = (relations: TierRelations): SeatRelation[] => {
+  const out: SeatRelation[] = []
+  for (const tier of Object.values(relations ?? {})) out.push(...Object.values(tier))
+  return out
+}
+
+/** The ticket types a tier offers (dropdown options for its seats). */
+export const ticketTypesForTier = (
+  relations: TierRelations,
+  tierId: string
+): SeatRelation[] => (relations[tierId] ? Object.values(relations[tierId]) : [])
+
+/** Whether a relation is guest-capable (a table / group ticket): it declares a
+ *  real min AND max guest count. Only then does a SeatLine carry `guests`. */
+export const isGuestCapable = (rel: SeatRelation | undefined): boolean => {
+  const min = Number(rel?.ticket_type_min_number_of_guests)
+  const max = Number(rel?.ticket_type_max_number_of_guests)
+  return Boolean(min && max)
+}

package/src/styles/addons.css

@@ -0,0 +1,75 @@
+/* ============================ Add-ons section ============================ */
+.tf-checkout-addons__head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--tf-checkout-space-3);
+  margin-bottom: 2px;
+}
+.tf-checkout-addons__eyebrow {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-addons__heading {
+  font-size: 17px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  flex: 1;
+}
+.tf-checkout-addons__skip {
+  border: 0;
+  background: transparent;
+  color: var(--tf-checkout-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 6px;
+}
+.tf-checkout-addons__subtitle {
+  font-size: 13px;
+  color: var(--tf-checkout-muted);
+  margin-bottom: var(--tf-checkout-space-3);
+}
+.tf-checkout-addons__group {
+  margin: var(--tf-checkout-space-3) 0 var(--tf-checkout-space-2);
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-addons__item {
+  padding: var(--tf-checkout-space-3) 0;
+  border-bottom: 1px solid var(--tf-checkout-border);
+}
+.tf-checkout-addons__row {
+  display: flex;
+  align-items: center;
+  gap: var(--tf-checkout-space-3);
+}
+.tf-checkout-addons__info {
+  flex: 1;
+  min-width: 0;
+}
+.tf-checkout-addons__name {
+  font-weight: 600;
+  font-size: 15px;
+}
+.tf-checkout-addons__req {
+  font-weight: 600;
+  font-size: 12px;
+  color: var(--tf-checkout-accent);
+}
+.tf-checkout-addons__meta {
+  margin-top: 2px;
+}
+.tf-checkout-addons__desc {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--tf-checkout-muted);
+}
+.tf-checkout-addons__fields {
+  margin-top: var(--tf-checkout-space-3);
+  padding-left: var(--tf-checkout-space-3);
+  border-left: 2px solid var(--tf-checkout-border);
+}