tf-checkout-react-native 1.0.47 → 2.0.0-beta.5

package/src/EmbeddedCheckout.tsx

@@ -0,0 +1,416 @@
+/**
+ * `<EmbeddedCheckout eventId="…" />` — the batteries-included native checkout.
+ * The RN analogue of the web `EmbeddedCheckout`: it wraps `<CheckoutProvider>`
+ * and follows the same storefront UX — ticket selection and the checkout body
+ * are separate views, with a compact selection summary + Edit once the cart is
+ * reserved. In the checkout view the sections render as one combined form
+ * (add-ons → buyer details → payment), all reading the one shared engine store.
+ *
+ * Compose the sections yourself for a custom layout — they all read the same
+ * `useCheckout()` from the provider.
+ *
+ * Native adaptations vs web (commented at each site): no smooth `scrollIntoView`
+ * (RN `ScrollView`); no URL attribution (`readAttributionFromUrl` accepted for
+ * parity); the shared seat-selection controller drives the native chart WebView.
+ */
+import React, { useEffect, useRef, useState, type FC, type ReactNode } from 'react'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+import {
+  canLeavePayment,
+  createTranslator,
+  embeddedCheckoutEvent,
+  embeddedCheckoutProps,
+  embeddedCheckoutView,
+  heldOrderNotice,
+  hooks,
+  type CheckoutBilling,
+  type CheckoutConsent,
+  type CheckoutHolder,
+  type EventCondition,
+  type PlaceOrderResult,
+  type TfProfile,
+} from 'tf-checkout-shared'
+
+import { AuthModal } from './auth/AuthModal'
+import { AddOns } from './sections/AddOns'
+import { BillingInfo, type CheckoutPrivacyPolicy } from './sections/BillingInfo'
+import { Bundles } from './sections/Bundles'
+import { Confirmation } from './sections/Confirmation'
+import { IDVerification } from './sections/IDVerification'
+import { Payment } from './sections/Payment'
+import { Tickets } from './sections/Tickets'
+import { SeatMap } from './sections/SeatMap'
+import { WaiverSigning } from './sections/WaiverSigning'
+import { CheckoutProvider, useCheckoutContext, useTheme } from './ui/CheckoutProvider'
+import { Button } from './ui/primitives'
+import { TimerBanner } from './ui/TimerBanner'
+import type { CheckoutTheme } from './ui/theme'
+
+type SelectionView = 'tickets' | 'seats'
+export type CheckoutView = SelectionView | 'checkout'
+
+export interface EmbeddedCheckoutAuthOptions {
+  onCheckoutAuthenticated?: (profile: import('tf-checkout-shared').CheckoutBuyerProfile) => void
+  allowRegistration?: boolean
+  allowPasswordReset?: boolean
+  requireRegistrationAddress?: boolean
+  logoUrl?: string
+  onAuthenticated?: (profile: TfProfile) => void
+}
+
+export interface EmbeddedCheckoutProps {
+  /** The event whose tickets to sell. */
+  eventId: string
+  /** Called with the placed order once payment settles. */
+  onComplete?: (order: PlaceOrderResult) => void
+  /**
+   * `inline` (default) renders verification + receipt in place. `redirect`
+   * leaves completion routing to `onComplete` and keeps the checkout mounted.
+   */
+  confirmationMode?: 'inline' | 'redirect'
+  /** Rendered inside the receipt, below the order details — the seam for the
+   *  `<Rewards/>` block or a host's own post-purchase content. */
+  confirmationChildren?: ReactNode
+  /** Initial screen. `seats` preserves an existing seat-map entry point. */
+  initialView?: SelectionView
+  /** Reports the visible flow view so hosts can coordinate their own UI. */
+  onViewChange?: (view: CheckoutView) => void
+  /** 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. */
+  onLogin?: (email?: string) => void
+  /** Configure the built-in login/create-account/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. */
+  skipBillingWhenProfileComplete?: boolean
+  /** Optional marketing copy controlled by the embedding brand. */
+  ttfOptInLabel?: string
+  brandOptInLabel?: string
+  /** Consumer-owned privacy policy link + brand name. Required when provided. */
+  privacyPolicy?: CheckoutPrivacyPolicy
+  /** Host-owned required/optional acknowledgements, e.g. a privacy policy. */
+  additionalConditions?: EventCondition[]
+  /** Apply/attribute hosted links without a custom Tickets section. */
+  initialPromoCode?: string
+  referrer?: string | number
+  /** Accepted for web parity; native has no `window.location`, so it's a no-op. */
+  readAttributionFromUrl?: boolean
+  /** Opt into sandbox card copy in demos. Defaults false. */
+  showTestCardHint?: boolean
+  /** Recolor via design tokens. */
+  theme?: CheckoutTheme
+}
+
+interface PreservedDetails {
+  billing?: CheckoutBilling
+  holders: CheckoutHolder[]
+  consent: CheckoutConsent
+}
+
+const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
+  eventId,
+  onComplete,
+  confirmationMode = 'inline',
+  confirmationChildren,
+  initialView = 'tickets',
+  onViewChange,
+  requireEmailConfirmation = true,
+  collectTicketHolders = true,
+  collectHolderContact = true,
+  onLogin,
+  auth,
+  skipBillingWhenProfileComplete = false,
+  ttfOptInLabel,
+  brandOptInLabel,
+  privacyPolicy,
+  additionalConditions = [],
+  initialPromoCode,
+  referrer,
+  readAttributionFromUrl = true,
+  showTestCardHint = false,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const [view, setView] = useState<CheckoutView>(initialView)
+  const [selectionView, setSelectionView] = useState<SelectionView>(initialView)
+  const editedDetailsRef = useRef<PreservedDetails | null>(null)
+  const [authRequest, setAuthRequest] = useState<{ email?: string; key: number } | null>(
+    null
+  )
+  const [privacyAttempted, setPrivacyAttempted] = useState(false)
+
+  const openBuiltInAuth = (email?: string) =>
+    setAuthRequest((current) => ({ email, key: (current?.key ?? 0) + 1 }))
+  const requestLogin = onLogin ?? (auth !== false ? openBuiltInAuth : undefined)
+
+  // Never let state from another event/run select this component's UI view.
+  // While the order is placed or charged, Payment stays on screen: it holds
+  // the only retry that finalizes a charged order (`embeddedCheckoutView`).
+  const checkoutBelongsToEvent = checkout.eventId === eventId
+  const visibleView: CheckoutView = embeddedCheckoutView(view, {
+    belongsToEvent: checkoutBelongsToEvent,
+    status: checkout.status,
+    orderFixed: checkout.orderFixed,
+  })
+  const leaveAllowed = canLeavePayment(checkout)
+
+  useEffect(() => {
+    if (visibleView === view) return
+    if (visibleView === 'checkout') setView('checkout')
+    else {
+      setView('tickets')
+      setSelectionView('tickets')
+    }
+  }, [view, 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 = () => {
+    if (!canLeavePayment(checkout)) return
+    editedDetailsRef.current = {
+      billing: checkout.billing,
+      holders: checkout.holders,
+      consent: checkout.consent,
+    }
+    setView(selectionView)
+  }
+
+  // Match the storefront summary: show the reserved tickets' amount, not a moving
+  // order total that changes while the buyer picks add-ons.
+  const breakdown = checkout.breakdown
+  const selectedCount =
+    breakdown?.tickets.reduce((total, t) => total + t.quantity, 0) ??
+    checkout.selections.reduce((total, t) => total + t.quantity, 0)
+  const selectedTicketsTotal = breakdown?.tickets.reduce(
+    (total, t) => total + Number(t.total),
+    0
+  )
+  const formattedTotal = breakdown
+    ? breakdown.currencySymbol
+      ? `${breakdown.currencySymbol}${Number(selectedTicketsTotal).toFixed(2)}`
+      : `${breakdown.currencyCode} ${Number(selectedTicketsTotal).toFixed(2)}`
+    : null
+
+  // Inline mode replaces the checkout with verification + receipt. Redirect mode
+  // keeps the checkout mounted (onComplete already fired) so nothing flashes.
+  const succeeded = checkout.status === 'succeeded' && Boolean(checkout.order)
+  if (visibleView === 'checkout' && succeeded && confirmationMode === 'inline') {
+    return (
+      <ScrollView contentContainerStyle={styles.content}>
+        <IDVerification />
+        <Confirmation>{confirmationChildren}</Confirmation>
+      </ScrollView>
+    )
+  }
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.content}
+      keyboardShouldPersistTaps="handled"
+    >
+      {/* Bundles stay mounted while hidden, as on web, so a purchase in
+          progress keeps its order and key when the buyer goes to checkout. */}
+      <View style={visibleView === 'tickets' ? styles.stack : styles.hidden}>
+        <Bundles
+          eventId={eventId}
+          visible={visibleView === 'tickets'}
+          onComplete={onComplete}
+          confirmationMode={confirmationMode}
+        />
+      </View>
+      {visibleView === 'tickets' && (
+        <View style={styles.stack}>
+          <Tickets
+            eventId={eventId}
+            onContinue={() => enterCheckout('tickets')}
+            onSelectSeats={() => setView('seats')}
+            initialPromoCode={initialPromoCode}
+            referrer={referrer}
+            readAttributionFromUrl={readAttributionFromUrl}
+          />
+        </View>
+      )}
+
+      {visibleView === 'seats' && (
+        <View style={styles.stack}>
+          <Pressable onPress={() => setView('tickets')} style={styles.back}>
+            <Text style={[styles.backText, { color: theme.accent }]}>
+              ← Back to tickets
+            </Text>
+          </Pressable>
+          <SeatMap eventId={eventId} onContinue={() => enterCheckout('seats')} />
+        </View>
+      )}
+
+      {visibleView === 'checkout' && (
+        <View style={styles.stack}>
+          <TimerBanner seconds={checkout.secondsLeft} />
+          <View style={[styles.selection, { borderColor: theme.border }]}>
+            <Text style={[styles.selectionText, { color: theme.text }]}>
+              {selectedCount} {selectedCount === 1 ? 'ticket' : 'tickets'} selected
+              {formattedTotal ? ` · ${formattedTotal}` : ''}
+            </Text>
+            <Pressable
+              onPress={editSelection}
+              disabled={!leaveAllowed}
+              accessibilityRole="button"
+              accessibilityState={{ disabled: !leaveAllowed }}
+            >
+              <Text
+                style={[
+                  styles.editText,
+                  { color: theme.accent },
+                  !leaveAllowed && styles.editTextDisabled,
+                ]}
+              >
+                Edit
+              </Text>
+            </Pressable>
+          </View>
+
+          <AddOns eventId={eventId} />
+          <BillingInfo
+            eventId={eventId}
+            onLogin={requestLogin}
+            skipWhenProfileComplete={skipBillingWhenProfileComplete}
+            requireEmailConfirmation={requireEmailConfirmation}
+            collectTicketHolders={collectTicketHolders}
+            collectHolderContact={collectHolderContact}
+            ttfOptInLabel={ttfOptInLabel}
+            brandOptInLabel={brandOptInLabel}
+            privacyPolicy={privacyPolicy}
+            showPrivacyError={privacyAttempted}
+          />
+          <WaiverSigning eventId={eventId} />
+          <Payment
+            onComplete={onComplete}
+            eventId={eventId}
+            requireEmailConfirmation={requireEmailConfirmation}
+            collectTicketHolders={collectTicketHolders}
+            requireHolderContact={collectHolderContact}
+            additionalConditions={additionalConditions}
+            requirePrivacyPolicy={Boolean(privacyPolicy)}
+            onPrivacyRequired={() => setPrivacyAttempted(true)}
+            showTestCardHint={showTestCardHint}
+          />
+        </View>
+      )}
+
+      {authRequest && auth !== false && !onLogin && (
+        <AuthModal
+          checkoutEventId={eventId}
+          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}
+          onCheckoutAuthenticated={auth?.onCheckoutAuthenticated}
+          onClose={() => setAuthRequest(null)}
+        />
+      )}
+    </ScrollView>
+  )
+}
+
+type FlowProps = Omit<EmbeddedCheckoutProps, 'theme'>
+
+// The native flow's own copy is English, as the rest of this screen.
+const translate = createTranslator()
+
+/**
+ * Keeps the checkout on the event whose order is being paid, is charged, or
+ * is kept after a payment step that may have moved money, while the host
+ * asks for another event: that event's Payment is the only way to finish
+ * the order, and the engine starts no other cart until it settles or resets
+ * (`embeddedCheckoutEvent`). It keeps the props it had for that event, even
+ * across a remount, so nothing the new event adds blocks the retry
+ * (`embeddedCheckoutProps`). The
+ * buyer reads why.
+ */
+const EventFlow: FC<FlowProps> = (flow) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const shown = embeddedCheckoutEvent(flow.eventId, checkout)
+  // A held order keeps the props it was shown with, kept with the store.
+  const flowProps = embeddedCheckoutProps(checkout.store, flow)
+  const heldEvent = hooks.useEvent(shown.waitingFor ? shown.eventId : undefined).data
+  const notice = shown.waitingFor ? heldOrderNotice(heldEvent?.name) : null
+  return (
+    <>
+      {notice && (
+        <View
+          accessibilityLiveRegion="polite"
+          style={[styles.notice, { borderColor: theme.accent }]}
+        >
+          <Text style={[styles.noticeText, { color: theme.text }]}>
+            {translate(notice.key, notice.params)}
+          </Text>
+        </View>
+      )}
+      <Flow key={flowProps.eventId} {...flowProps} />
+    </>
+  )
+}
+
+export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({ theme, ...flow }) => (
+  <CheckoutProvider theme={theme}>
+    <EventFlow {...flow} />
+  </CheckoutProvider>
+)
+
+const styles = StyleSheet.create({
+  content: { padding: 16, gap: 12 },
+  hidden: { display: 'none' },
+  stack: { gap: 12 },
+  back: { paddingVertical: 4 },
+  backText: { fontSize: 15, fontWeight: '600' },
+  selection: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+  },
+  selectionText: { fontSize: 14, flex: 1 },
+  editText: { fontSize: 14, fontWeight: '600' },
+  editTextDisabled: { opacity: 0.4 },
+  notice: {
+    marginHorizontal: 16,
+    marginTop: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+  },
+  noticeText: { fontSize: 14, lineHeight: 20 },
+})