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

package/src/EmbeddedCheckout.tsx

@@ -0,0 +1,400 @@
+/**
+ * `<EmbeddedCheckout eventId="…" />` — the batteries-included checkout. It
+ * follows the legacy storefront UX: ticket selection and checkout are separate
+ * views, with a compact selection summary + Edit action once the cart is
+ * reserved. Want a different layout? Compose the sections yourself — they all
+ * read the same `useCheckout()` from the provider.
+ */
+import React, { useCallback, useEffect, useRef, useState, type FC } from 'react'
+
+import type {
+  CheckoutBilling,
+  CheckoutConsent,
+  CheckoutHolder,
+  EventCondition,
+  LocaleCode,
+  Messages,
+  PlaceOrderResult,
+  TfProfile,
+} from 'tf-checkout-shared'
+
+import { AuthModal } from './auth/AuthModal'
+import { AddOns } from './sections/AddOns'
+import { BillingInfo } from './sections/BillingInfo'
+import type { CheckoutPrivacyPolicy } from './sections/BillingInfo'
+import { Confirmation } from './sections/Confirmation'
+import { IDVerification } from './sections/IDVerification'
+import { Payment } from './sections/Payment'
+import { SeatMap } from './sections/SeatMap'
+import { Tickets } from './sections/Tickets'
+import { CheckoutProvider, useCheckoutContext } from './ui/CheckoutProvider'
+import { TimerBanner } from './ui/TimerBanner'
+import type { CheckoutTheme } from './ui/theme'
+
+export interface EmbeddedCheckoutProps {
+  /** The event whose tickets to sell. */
+  eventId: string
+  /** Called with the placed order once payment settles. */
+  onComplete?: (order: PlaceOrderResult) => void
+  /**
+   * `inline` renders verification/confirmation inside the checkout. `redirect`
+   * leaves completion routing to `onComplete` and shows a short transition
+   * state while the host navigates. Defaults to `inline`.
+   */
+  confirmationMode?: 'inline' | 'redirect'
+  /** Initial checkout screen. Useful for preserving an existing `/seat-map` route. */
+  initialView?: 'tickets' | 'seats'
+  /** Reports the visible flow view so host storefronts can coordinate mobile UI. */
+  onViewChange?: (view: CheckoutView) => void
+  /** Smooth-scroll to buyer details after tickets/seats are reserved. Default true. */
+  autoScroll?: boolean
+  /** Require guests to repeat their email. Defaults to storefront-compatible true. */
+  requireEmailConfirmation?: boolean
+  /** Collect one named holder per ticket. Defaults true to match tf-sports. */
+  collectTicketHolders?: boolean
+  /** Collect email/phone when ticket-holder details are required. Defaults true. */
+  collectHolderContact?: boolean
+  /** Open the host application's login UI instead of the built-in modal. The
+   *  current buyer email is passed when an existing account was detected. */
+  onLogin?: (email?: string) => void
+  /** Configure the built-in login/create-account/password-reset modal, or set
+   *  false to remove auth UI. Ignored when `onLogin` is provided. */
+  auth?: false | EmbeddedCheckoutAuthOptions
+  /** Legacy skip-billing equivalent for complete signed-in profiles. Payment is
+   *  never skipped. Defaults false; incompatible holder/custom fields prevent it. */
+  skipBillingWhenProfileComplete?: boolean
+  /** Optional marketing copy controlled by the embedding brand. */
+  ttfOptInLabel?: string
+  brandOptInLabel?: string
+  /** Consumer-owned privacy policy link and brand name. Required when provided. */
+  privacyPolicy?: CheckoutPrivacyPolicy
+  /** Host-owned required/optional acknowledgements, e.g. a privacy policy. */
+  additionalConditions?: EventCondition[]
+  /** Apply/attribute hosted links without requiring a custom Tickets section. */
+  initialPromoCode?: string
+  referrer?: string | number
+  readAttributionFromUrl?: boolean
+  /** Opt into sandbox card copy in demos. Defaults false. */
+  showTestCardHint?: boolean
+  /** Recolor via design tokens. */
+  theme?: CheckoutTheme
+  /**
+   * Language for the checkout's own copy. Defaults to `en-GB`, so existing
+   * consumers that never set it render exactly as before.
+   */
+  locale?: LocaleCode
+  /** Per-key copy overrides, merged over the locale. */
+  messages?: Partial<Messages>
+  className?: string
+}
+
+export interface EmbeddedCheckoutAuthOptions {
+  allowRegistration?: boolean
+  allowPasswordReset?: boolean
+  requireRegistrationAddress?: boolean
+  logoUrl?: string
+  onAuthenticated?: (profile: TfProfile) => void
+}
+
+type SelectionView = 'tickets' | 'seats'
+export type CheckoutView = SelectionView | 'checkout'
+type FlowView = CheckoutView
+interface PreservedDetails {
+  billing?: CheckoutBilling
+  holders: CheckoutHolder[]
+  consent: CheckoutConsent
+}
+
+const Flow: FC<{
+  eventId: string
+  onComplete?: (o: PlaceOrderResult) => void
+  confirmationMode: 'inline' | 'redirect'
+  initialView: SelectionView
+  onViewChange?: (view: CheckoutView) => void
+  autoScroll: boolean
+  requireEmailConfirmation: boolean
+  collectTicketHolders: boolean
+  collectHolderContact: boolean
+  onLogin?: (email?: string) => void
+  auth?: false | EmbeddedCheckoutAuthOptions
+  skipBillingWhenProfileComplete: boolean
+  ttfOptInLabel?: string
+  brandOptInLabel?: string
+  privacyPolicy?: CheckoutPrivacyPolicy
+  additionalConditions: EventCondition[]
+  initialPromoCode?: string
+  referrer?: string | number
+  readAttributionFromUrl: boolean
+  showTestCardHint: boolean
+}> = ({
+  eventId,
+  onComplete,
+  confirmationMode,
+  initialView,
+  onViewChange,
+  autoScroll,
+  requireEmailConfirmation,
+  collectTicketHolders,
+  collectHolderContact,
+  onLogin,
+  auth,
+  skipBillingWhenProfileComplete,
+  ttfOptInLabel,
+  brandOptInLabel,
+  privacyPolicy,
+  additionalConditions,
+  initialPromoCode,
+  referrer,
+  readAttributionFromUrl,
+  showTestCardHint,
+}) => {
+  const checkout = useCheckoutContext()
+  const [view, setView] = useState<FlowView>(initialView)
+  const [selectionView, setSelectionView] = useState<SelectionView>(initialView)
+  const checkoutViewRef = useRef<HTMLDivElement | null>(null)
+  const editedDetailsRef = useRef<PreservedDetails | null>(null)
+  const [authRequest, setAuthRequest] = useState<{
+    email?: string
+    key: number
+  } | null>(null)
+  const [privacyAttempted, setPrivacyAttempted] = useState(false)
+
+  const openBuiltInAuth = useCallback((email?: string) => {
+    setAuthRequest((current) => ({
+      email,
+      key: (current?.key ?? 0) + 1,
+    }))
+  }, [])
+  const requestLogin = onLogin ?? (auth !== false ? openBuiltInAuth : undefined)
+
+  // The engine store is intentionally shared across SDK consumers.
+  // Never let state from another event/run select this component's UI view.
+  const checkoutBelongsToEvent = checkout.eventId === eventId
+  const checkoutViewAvailable = checkoutBelongsToEvent && checkout.status !== 'expired'
+  const visibleView: FlowView =
+    view === 'checkout' && !checkoutViewAvailable ? 'tickets' : view
+
+  useEffect(() => {
+    if (
+      view === 'checkout' &&
+      (!checkoutBelongsToEvent || checkout.status === 'expired')
+    ) {
+      setView('tickets')
+      setSelectionView('tickets')
+    }
+  }, [checkout.status, checkoutBelongsToEvent, view])
+
+  useEffect(() => {
+    if (!autoScroll || visibleView !== 'checkout') return
+    const timeout = window.setTimeout(() => {
+      const behavior = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+        ? 'auto'
+        : 'smooth'
+      checkoutViewRef.current?.scrollIntoView({ behavior, block: 'start' })
+    }, 0)
+    return () => window.clearTimeout(timeout)
+  }, [autoScroll, visibleView])
+
+  useEffect(() => {
+    onViewChange?.(visibleView)
+  }, [onViewChange, visibleView])
+
+  const enterCheckout = (from: SelectionView) => {
+    const preserved = editedDetailsRef.current
+    if (preserved) {
+      if (preserved.billing) checkout.setBilling(preserved.billing)
+      checkout.setHolders(preserved.holders)
+      checkout.setConsent(preserved.consent)
+      editedDetailsRef.current = null
+    }
+    setSelectionView(from)
+    setView('checkout')
+  }
+
+  const editSelection = () => {
+    editedDetailsRef.current = {
+      billing: checkout.billing,
+      holders: checkout.holders,
+      consent: checkout.consent,
+    }
+    setView(selectionView)
+  }
+
+  const breakdown = checkout.breakdown
+  const selectedCount =
+    breakdown?.tickets.reduce((total, ticket) => total + ticket.quantity, 0) ??
+    checkout.selections.reduce((total, ticket) => total + ticket.quantity, 0)
+  // Match the storefront summary: show the reserved tickets' amount, not a
+  // moving order total that changes while the buyer picks add-ons.
+  const selectedTicketsTotal = breakdown?.tickets.reduce(
+    (total, ticket) => total + Number(ticket.total),
+    0
+  )
+  const formattedTotal = breakdown
+    ? breakdown.currencySymbol
+      ? `${breakdown.currencySymbol}${Number(selectedTicketsTotal).toFixed(2)}`
+      : `${breakdown.currencyCode} ${Number(selectedTicketsTotal).toFixed(2)}`
+    : null
+
+  // Inline mode renders the receipt in place. Redirect mode intentionally does
+  // NOT swap the UI on success — it keeps the checkout mounted (the pay button
+  // stays busy) while the host navigates to its own confirmation page, so the
+  // checkout never flashes an empty card during the handoff.
+  if (
+    visibleView === 'checkout' &&
+    checkout.status === 'succeeded' &&
+    checkout.order &&
+    confirmationMode === 'inline'
+  ) {
+    return (
+      <>
+        <IDVerification />
+        <Confirmation />
+      </>
+    )
+  }
+
+  return (
+    <>
+      {/* Keep Tickets mounted while hidden so Edit restores the buyer's exact
+          quantities, promo state, date, and currency instead of starting over. */}
+      <div hidden={visibleView !== 'tickets'}>
+        <Tickets
+          eventId={eventId}
+          onContinue={() => enterCheckout('tickets')}
+          onSelectSeats={() => setView('seats')}
+          initialPromoCode={initialPromoCode}
+          referrer={referrer}
+          readAttributionFromUrl={readAttributionFromUrl}
+        />
+      </div>
+
+      {visibleView === 'seats' && (
+        <div className="tf-checkout-flow__seat-view">
+          <button
+            type="button"
+            className="tf-checkout-flow__back"
+            onClick={() => setView('tickets')}
+          >
+            ← Back to tickets
+          </button>
+          <SeatMap eventId={eventId} onContinue={() => enterCheckout('seats')} />
+        </div>
+      )}
+
+      {visibleView === 'checkout' && (
+        <div ref={checkoutViewRef} className="tf-checkout-flow__checkout">
+          <TimerBanner seconds={checkout.secondsLeft} />
+          <div className="tf-checkout-flow__selection">
+            <span className="tf-checkout-flow__selection-text">
+              {selectedCount} {selectedCount === 1 ? 'ticket' : 'tickets'} selected
+              {formattedTotal ? ` · ${formattedTotal}` : ''}
+            </span>
+            <button
+              type="button"
+              className="tf-checkout-flow__edit"
+              onClick={editSelection}
+            >
+              Edit
+            </button>
+          </div>
+          <AddOns eventId={eventId} />
+          <BillingInfo
+            eventId={eventId}
+            onLogin={requestLogin}
+            skipWhenProfileComplete={skipBillingWhenProfileComplete}
+            requireEmailConfirmation={requireEmailConfirmation}
+            collectTicketHolders={collectTicketHolders}
+            collectHolderContact={collectHolderContact}
+            ttfOptInLabel={ttfOptInLabel}
+            brandOptInLabel={brandOptInLabel}
+            privacyPolicy={privacyPolicy}
+            showPrivacyError={privacyAttempted}
+          />
+          <Payment
+            onComplete={onComplete}
+            eventId={eventId}
+            requireEmailConfirmation={requireEmailConfirmation}
+            collectTicketHolders={collectTicketHolders}
+            requireHolderContact={collectHolderContact}
+            additionalConditions={additionalConditions}
+            requirePrivacyPolicy={Boolean(privacyPolicy)}
+            onPrivacyRequired={() => setPrivacyAttempted(true)}
+            showTestCardHint={showTestCardHint}
+          />
+        </div>
+      )}
+      {authRequest && auth !== false && !onLogin && (
+        <AuthModal
+          key={authRequest.key}
+          open
+          initialEmail={authRequest.email}
+          message={
+            authRequest.email
+              ? 'This email already has an account. Log in to autofill your checkout details.'
+              : undefined
+          }
+          allowRegistration={auth?.allowRegistration}
+          allowPasswordReset={auth?.allowPasswordReset}
+          requireRegistrationAddress={auth?.requireRegistrationAddress}
+          logoUrl={auth?.logoUrl}
+          onAuthenticated={auth?.onAuthenticated}
+          onClose={() => setAuthRequest(null)}
+        />
+      )}
+    </>
+  )
+}
+
+export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({
+  eventId,
+  onComplete,
+  confirmationMode = 'inline',
+  initialView = 'tickets',
+  onViewChange,
+  autoScroll = true,
+  requireEmailConfirmation = true,
+  collectTicketHolders = true,
+  collectHolderContact = true,
+  onLogin,
+  auth,
+  skipBillingWhenProfileComplete = false,
+  ttfOptInLabel,
+  brandOptInLabel,
+  privacyPolicy,
+  additionalConditions = [],
+  initialPromoCode,
+  referrer,
+  readAttributionFromUrl = true,
+  showTestCardHint = false,
+  theme,
+  locale,
+  messages,
+  className,
+}) => (
+  <CheckoutProvider theme={theme} locale={locale} messages={messages} className={className}>
+    <Flow
+      key={eventId}
+      eventId={eventId}
+      onComplete={onComplete}
+      confirmationMode={confirmationMode}
+      initialView={initialView}
+      onViewChange={onViewChange}
+      autoScroll={autoScroll}
+      requireEmailConfirmation={requireEmailConfirmation}
+      collectTicketHolders={collectTicketHolders}
+      collectHolderContact={collectHolderContact}
+      onLogin={onLogin}
+      auth={auth}
+      skipBillingWhenProfileComplete={skipBillingWhenProfileComplete}
+      ttfOptInLabel={ttfOptInLabel}
+      brandOptInLabel={brandOptInLabel}
+      privacyPolicy={privacyPolicy}
+      additionalConditions={additionalConditions}
+      initialPromoCode={initialPromoCode}
+      referrer={referrer}
+      readAttributionFromUrl={readAttributionFromUrl}
+      showTestCardHint={showTestCardHint}
+    />
+  </CheckoutProvider>
+)

package/src/ResumedCheckout.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef, useState, type FC } from 'react'
+
+import {
+  errorMessage,
+  type EventCondition,
+  type PlaceOrderResult,
+} from 'tf-checkout-shared'
+
+import { AuthModal } from './auth/AuthModal'
+import { BillingInfo, type CheckoutPrivacyPolicy } from './sections/BillingInfo'
+import { Confirmation } from './sections/Confirmation'
+import { IDVerification } from './sections/IDVerification'
+import { Payment } from './sections/Payment'
+import { CheckoutProvider, useCheckoutContext } from './ui/CheckoutProvider'
+import { Loader } from './ui/Loader'
+import { TimerBanner } from './ui/TimerBanner'
+import type { CheckoutTheme } from './ui/theme'
+
+export interface ResumedCheckoutProps {
+  eventId: string
+  isFromResale?: boolean
+  onComplete?: (order: PlaceOrderResult) => void
+  confirmationMode?: 'inline' | 'redirect'
+  requireEmailConfirmation?: boolean
+  collectTicketHolders?: boolean
+  collectHolderContact?: boolean
+  privacyPolicy?: CheckoutPrivacyPolicy
+  brandOptInLabel?: string
+  additionalConditions?: EventCondition[]
+  theme?: CheckoutTheme
+  className?: string
+}
+
+const ResumedFlow: FC<Omit<ResumedCheckoutProps, 'theme' | 'className'>> = ({
+  eventId,
+  isFromResale = false,
+  onComplete,
+  confirmationMode = 'redirect',
+  requireEmailConfirmation = true,
+  collectTicketHolders = true,
+  collectHolderContact = true,
+  privacyPolicy,
+  brandOptInLabel,
+  additionalConditions = [],
+}) => {
+  const checkout = useCheckoutContext()
+  const started = useRef(false)
+  const [failure, setFailure] = useState('')
+  const [authRequest, setAuthRequest] = useState<{ email?: string; key: number } | null>(
+    null
+  )
+  const [privacyAttempted, setPrivacyAttempted] = useState(false)
+
+  useEffect(() => {
+    if (started.current) return
+    started.current = true
+    checkout.resumeCart(eventId, { isFromResale }).catch((error) => {
+      setFailure(errorMessage(error))
+    })
+  }, [checkout, eventId, isFromResale])
+
+  if (failure) return <p className="tf-checkout-error-text">{failure}</p>
+  if (checkout.status === 'idle' || checkout.status === 'priming') {
+    return (
+      <div className="tf-checkout-flow__redirecting">
+        <Loader className="tf-checkout-loader--page" />
+      </div>
+    )
+  }
+  if (checkout.status === 'succeeded' && checkout.order) {
+    if (confirmationMode === 'redirect') {
+      return (
+        <div className="tf-checkout-flow__redirecting">
+          <Loader className="tf-checkout-loader--page" />
+        </div>
+      )
+    }
+    return (
+      <>
+        <IDVerification />
+        <Confirmation />
+      </>
+    )
+  }
+
+  return (
+    <div className="tf-checkout-flow__checkout">
+      <TimerBanner seconds={checkout.secondsLeft} />
+      <BillingInfo
+        eventId={eventId}
+        onLogin={(email) =>
+          setAuthRequest((current) => ({ email, key: (current?.key ?? 0) + 1 }))
+        }
+        requireEmailConfirmation={requireEmailConfirmation}
+        collectTicketHolders={collectTicketHolders}
+        collectHolderContact={collectHolderContact}
+        privacyPolicy={privacyPolicy}
+        brandOptInLabel={brandOptInLabel}
+        showPrivacyError={privacyAttempted}
+      />
+      <Payment
+        eventId={eventId}
+        onComplete={onComplete}
+        requireEmailConfirmation={requireEmailConfirmation}
+        collectTicketHolders={collectTicketHolders}
+        requireHolderContact={collectHolderContact}
+        additionalConditions={additionalConditions}
+        requirePrivacyPolicy={Boolean(privacyPolicy)}
+        onPrivacyRequired={() => setPrivacyAttempted(true)}
+      />
+      {authRequest && (
+        <AuthModal
+          key={authRequest.key}
+          open
+          initialEmail={authRequest.email}
+          onClose={() => setAuthRequest(null)}
+        />
+      )}
+    </div>
+  )
+}
+
+/** Checkout UI for a cart created by a preceding server flow, such as resale. */
+export const ResumedCheckout: FC<ResumedCheckoutProps> = ({
+  theme,
+  className,
+  ...props
+}) => (
+  <CheckoutProvider theme={theme} className={className}>
+    <ResumedFlow {...props} />
+  </CheckoutProvider>
+)