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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.10",
   "description": "TheTicketFairy ReactNative Checkout library",
-  "homepage": "https://github.com/theticketfairy/tf-checkout-react-native",
+  "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -18,6 +18,7 @@
   },
   "files": [
     "src",
+    "scripts",
     "dist",
     "android",
     "ios",
@@ -36,12 +37,12 @@
     "!**/.*"
   ],
   "scripts": {
-    "test": "jest --passWithNoTests",
+    "test": "node scripts/verify-discussion-support.cjs && jest --passWithNoTests",
     "typecheck": "tsc -p tsconfig.build.json",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "clean": "del-cli lib",
-    "build": "tsup",
+    "build": "pnpm --filter tf-checkout-shared build && node scripts/build-seat-map.mjs && tsup",
     "prepare": "npm run build",
     "release": "release-it",
     "release:current": "release-it --no-increment",
@@ -57,10 +58,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/theticketfairy/tf-checkout-react-native.git"
+    "url": "git+https://github.com/theticketfairy/tf-shared-libraries.git",
+    "directory": "packages/tf-checkout-react-native"
   },
   "bugs": {
-    "url": "https://github.com/theticketfairy/tf-checkout-react-native/issues"
+    "url": "https://github.com/theticketfairy/tf-shared-libraries/issues"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -82,6 +84,7 @@
     "@types/react-test-renderer": "^19.1.0",
     "commitlint": "^19.8.1",
     "del-cli": "^6.0.0",
+    "esbuild": "0.27.2",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -92,10 +95,13 @@
     "jiti": "^2.6.0",
     "prettier": "3.6.2",
     "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-mmkv": "^3.3.1",
+    "react-native-webview": "13.15.0",
     "release-it": "^19.0.4",
     "tf-checkout-shared": "workspace:*",
+    "tf-seat-map-view": "9.4.7-beta.33",
     "tsup": "^8.5.1",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.45.0"
@@ -137,16 +143,22 @@
     "version": "0.54.3"
   },
   "dependencies": {
-    "axios": "^1.7.9"
+    "axios": "^1.7.9",
+    "entities": "^7.0.1",
+    "htmlparser2": "10.1.0"
   },
   "//peerDependencies": "Anything that MUST exist exactly once in the app: React contexts (react-query) and native modules (Stripe, MMKV, Clipboard). Shipping these as regular dependencies gives the consumer a second copy, which means a second React context (their <QueryClientProvider> becomes invisible to our hooks) or a duplicate native pod. As peers there is one copy, the consumer can use react-query in their own app alongside our hooks, and no Metro/bundler aliasing is ever needed. npm 7+/pnpm install peers automatically.",
   "peerDependencies": {
     "@react-native-clipboard/clipboard": ">=1.14.0",
     "@stripe/stripe-react-native": ">=0.45.0",
     "@tanstack/react-query": ">=5",
-    "react": "*",
-    "react-native": "*",
-    "react-native-mmkv": ">=3"
+    "react": ">=19.1",
+    "react-native": ">=0.81",
+    "react-native-mmkv": "^3.0.0",
+    "react-native-webview": ">=13.15.0"
   },
-  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too — axios must stay declared here or tsup bundles it (dragging Node's stream into a browser build) / the consumer never installs it."
+  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too — axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",
+  "engines": {
+    "node": ">=20.19.4"
+  }
 }

package/scripts/build-seat-map.mjs

@@ -0,0 +1,31 @@
+import { build } from 'esbuild'
+import { readFile, mkdir, writeFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const require = createRequire(path.join(root, 'package.json'))
+const result = await build({
+  entryPoints: [path.join(root, 'scripts/seat-map-entry.jsx')],
+  bundle: true,
+  minify: true,
+  write: false,
+  format: 'iife',
+  platform: 'browser',
+  target: 'es2020',
+  define: { 'process.env.NODE_ENV': '"production"' },
+  alias: {
+    react: path.dirname(require.resolve('react/package.json')),
+    'react-dom': path.dirname(require.resolve('react-dom/package.json')),
+  },
+})
+const css = await readFile(require.resolve('tf-seat-map-view/dist/index.css'), 'utf8')
+await mkdir(path.join(root, 'src/generated'), { recursive: true })
+await writeFile(
+  path.join(root, 'src/generated/seatMapWidget.ts'),
+  '// Generated by scripts/build-seat-map.mjs from pinned package sources.\n' +
+    `export const SEAT_MAP_SCRIPT = ${JSON.stringify(result.outputFiles[0].text)}\n` +
+    `export const SEAT_MAP_CSS = ${JSON.stringify(css)}\n`
+)
+console.log(`Built native seat renderer: ${result.outputFiles[0].text.length} bytes`)

package/scripts/seat-map-entry.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import SeatMap from 'tf-seat-map-view'
+
+const root = createRoot(document.getElementById('seat-map'))
+window.__tfSeatMapUpdate = (properties) => {
+  window.tierPrices = properties.tierPrices
+  const size = window.innerWidth
+  root.render(
+    <SeatMap
+      {...properties}
+      width={size}
+      height={size}
+      events={{
+        onSeatClick: (event) =>
+          window.ReactNativeWebView?.postMessage(
+            JSON.stringify({ type: 'seatClick', seat: event.seat })
+          ),
+      }}
+    />
+  )
+}

package/scripts/verify-discussion-support.cjs

@@ -0,0 +1,131 @@
+/* Executes the real native support Pressable; no native OS/mail account required. */
+/* eslint-disable @typescript-eslint/no-require-imports -- Node CommonJS verifier, matching the package's script entry. */
+const assert = require('node:assert/strict')
+const fs = require('node:fs')
+const path = require('node:path')
+const vm = require('node:vm')
+const ts = require('typescript')
+const React = require('react')
+const opened = []
+let rejectOpen = false
+const source = fs.readFileSync(
+  path.join(__dirname, '../src/sections/EventDiscussionView.tsx'),
+  'utf8'
+)
+const compiled = ts.transpileModule(source, {
+  compilerOptions: {
+    module: ts.ModuleKind.CommonJS,
+    target: ts.ScriptTarget.ES2022,
+    jsx: ts.JsxEmit.React,
+    esModuleInterop: true,
+  },
+}).outputText
+const moduleExports = {}
+vm.runInNewContext(compiled, {
+  exports: moduleExports,
+  require: (name) => {
+    if (name === 'react')
+      return {
+        ...React,
+        useRef: (value) => ({ current: value }),
+        useState: (value) => [value, () => {}],
+      }
+    if (name === 'react-native')
+      return {
+        ...Object.fromEntries(
+          [
+            'ActivityIndicator',
+            'FlatList',
+            'Image',
+            'KeyboardAvoidingView',
+            'Modal',
+            'Pressable',
+            'Text',
+            'TextInput',
+            'View',
+          ].map((name) => [name, name])
+        ),
+        Platform: { OS: 'ios' },
+        StyleSheet: { create: (styles) => styles },
+        Linking: {
+          openURL: (url) => {
+            opened.push(url)
+            return rejectOpen
+              ? Promise.reject(Error('No mail client'))
+              : Promise.resolve()
+          },
+        },
+      }
+    if (name === 'tf-checkout-shared') return { EVENT_COMMENT_IMAGE_MAX_COUNT: 5 }
+    if (name === '../ui/CheckoutProvider') return { useTheme: () => ({}) }
+    if (name === '../ui/useAccountT') return { useAccountT: () => (value) => value }
+    if (name === './discussion/CommentImages')
+      return { CommentImages: 'CommentImages', CommentImageDrafts: 'CommentImageDrafts' }
+    if (name === './discussion/SwipeReply') return { SwipeReply: 'SwipeReply' }
+    throw Error('Unexpected dependency: ' + name)
+  },
+})
+const links = (node) =>
+  !node || typeof node !== 'object'
+    ? []
+    : [
+        ...(node.type === 'Pressable' && node.props.accessibilityRole === 'link'
+          ? [node]
+          : []),
+        ...React.Children.toArray(node.props?.children).flatMap(links),
+      ]
+const render = (url) => {
+  const element = moduleExports.EventDiscussionView({
+    eventId: '42',
+    discussion: {
+      scopeKey: 'synthetic-actor-7',
+      comments: [],
+      blockedAuthors: [],
+      imagesBase64: [],
+      body: '',
+      canPost: false,
+      supportUrl: url,
+    },
+  })
+  const tree = element.type(element.props)
+  const support = links(tree)
+  assert.equal(support.length, 1)
+  return support[0]
+}
+;(async () => {
+  // This exact URI comes from EventDiscussionService::page, including its subject.
+  const canonical = 'mailto:support@theticketfairy.com?subject=Event%20comment%20report'
+  for (const url of [canonical, 'https://www.ticketfairy.com/support']) {
+    opened.length = 0
+    const support = render(url)
+    assert.deepEqual(opened, [], 'rendering must never open or send anything')
+    support.props.onPress()
+    await new Promise((resolve) => setImmediate(resolve))
+    assert.deepEqual(opened, [url], 'the user press must reach the native Linking port')
+  }
+  for (const url of [
+    'javascript:alert(1)',
+    'file:///private',
+    'http://example.invalid',
+    'tel:123',
+  ]) {
+    opened.length = 0
+    render(url).props.onPress()
+    assert.deepEqual(opened, [], 'unsupported schemes must not reach the OS')
+  }
+  rejectOpen = true
+  opened.length = 0
+  render(canonical).props.onPress()
+  await new Promise((resolve) => setImmediate(resolve))
+  assert.deepEqual(
+    opened,
+    [canonical],
+    'an unavailable mail client must be handled quietly'
+  )
+  process.stdout.write(
+    'Native discussion support PASS: user press, canonical mailto, HTTPS, unsafe schemes and unavailable client.\n'
+  )
+})().catch((error) => {
+  console.error(error)
+  process.exitCode = 1
+})

package/src/CardInput.tsx

@@ -9,21 +9,82 @@
  * (`confirmer.init` → `initStripe`), which always runs before the payment step
  * is reached.
  */
-import React, { type FC } from 'react'
-import { StyleSheet } from 'react-native'
+import React, { useEffect, useRef, useState, type FC } from 'react'
+import { Platform, StyleSheet } from 'react-native'
 import { CardField } from '@stripe/stripe-react-native'
+import {
+  cardClaimStep,
+  createCardFieldRegistry,
+  type CardClaimStep,
+  type CardFieldClaim,
+  type CardFieldHandle,
+} from 'tf-checkout-shared'
 
 import { useTheme } from './ui/CheckoutProvider'
 
 export interface CardInputProps {
   /** Fires with the field's completeness so the payment CTA can enable/disable. */
   onComplete?: (complete: boolean) => void
+  /** The flow this field pays for (`claimCardField(owner)`). Default `checkout`. */
+  owner?: string
+  /** False while the flow is hidden: the field is then never used. */
+  visible?: boolean
 }
 
-export const CardInput: FC<CardInputProps> = ({ onComplete }) => {
+// The native SDK holds one card field. Android clears it when any field is
+// dropped; iOS only when the newest one goes. The field left is remounted so
+// the SDK attaches it again; the buyer re-enters the card there.
+// Each field has an owner (its flow) and a visibility; a hidden field is never
+// used. Attaching a field again remounts it, so the card is entered again.
+const cardFields = createCardFieldRegistry(
+  Platform.OS === 'android' ? 'any-removed' : 'active-removed',
+  false
+)
+
+/**
+ * Call before a flow confirms a card payment: attaches the flow's own visible
+ * field. `reattached` means the field was remounted empty: ask for the card
+ * again. `unavailable` when the flow has no visible field.
+ */
+export const claimCardField = (owner: string): CardFieldClaim => cardFields.claim(owner)
+
+/**
+ * The claim `placeOrder` uses when its caller passes no `claimCard` (a host's
+ * own Pay): the default ticket field, owner `checkout`. A confirm then never
+ * uses a bundle's field, and with no ticket field it refuses.
+ */
+export const claimDefaultCardField: CardClaimStep = cardClaimStep('nativeCard', () =>
+  claimCardField('checkout')
+)
+
+export const CardInput: FC<CardInputProps> = ({
+  onComplete,
+  owner = 'checkout',
+  visible = true,
+}) => {
   const theme = useTheme()
+  const [attachment, setAttachment] = useState(0)
+  const handleRef = useRef<CardFieldHandle | null>(null)
+  const visibleRef = useRef(visible)
+  visibleRef.current = visible
+  useEffect(() => {
+    const handle = cardFields.mount(
+      owner,
+      () => setAttachment((n) => n + 1),
+      visibleRef.current
+    )
+    handleRef.current = handle
+    return () => {
+      handle.unmount()
+      handleRef.current = null
+    }
+  }, [owner])
+  useEffect(() => {
+    handleRef.current?.setVisible(visible)
+  }, [visible])
   return (
     <CardField
+      key={attachment}
       postalCodeEnabled={false}
       // Set explicitly and neutrally: stripe-react-native's own default number
       // placeholder is a Stripe TEST PAN, which reads to a real buyer as an

package/src/EmbeddedCheckout.tsx

@@ -11,30 +11,40 @@
  *
  * Native adaptations vs web (commented at each site): no smooth `scrollIntoView`
  * (RN `ScrollView`); no URL attribution (`readAttributionFromUrl` accepted for
- * parity); the seat-map view is a placeholder until the native seat picker
- * (WebView + seats.io) lands.
+ * parity); the shared seat-selection controller drives the native chart WebView.
  */
-import React, { useEffect, useRef, useState, type FC } from 'react'
+import React, { useEffect, useRef, useState, type FC, type ReactNode } from 'react'
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
 
-import type {
-  CheckoutBilling,
-  CheckoutConsent,
-  CheckoutHolder,
-  EventCondition,
-  PlaceOrderResult,
-  TfProfile,
+import {
+  canLeavePayment,
+  createTranslator,
+  embeddedCheckoutEvent,
+  embeddedCheckoutProps,
+  embeddedCheckoutView,
+  heldOrderNotice,
+  hooks,
+  type CheckoutBilling,
+  type CheckoutConsent,
+  type CheckoutHolder,
+  type CheckoutImagePicker,
+  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 { Card, BodyText, MutedText, Button } from './ui/primitives'
+import { Button } from './ui/primitives'
 import { TimerBanner } from './ui/TimerBanner'
 import type { CheckoutTheme } from './ui/theme'
 
@@ -42,6 +52,9 @@ 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
@@ -50,6 +63,8 @@ export interface EmbeddedCheckoutAuthOptions {
 }
 
 export interface EmbeddedCheckoutProps {
+  /** OS picker used for order-, holder- and add-on image questions. */
+  pickImage?: CheckoutImagePicker
   /** The event whose tickets to sell. */
   eventId: string
   /** Called with the placed order once payment settles. */
@@ -59,6 +74,9 @@ export interface EmbeddedCheckoutProps {
    * 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. */
@@ -104,6 +122,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   eventId,
   onComplete,
   confirmationMode = 'inline',
+  confirmationChildren,
   initialView = 'tickets',
   onViewChange,
   requireEmailConfirmation = true,
@@ -136,17 +155,24 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   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 checkoutAvailable = checkoutBelongsToEvent && checkout.status !== 'expired'
-  const visibleView: CheckoutView =
-    view === 'checkout' && !checkoutAvailable ? 'tickets' : view
+  const visibleView: CheckoutView = embeddedCheckoutView(view, {
+    belongsToEvent: checkoutBelongsToEvent,
+    status: checkout.status,
+    orderFixed: checkout.orderFixed,
+  })
+  const leaveAllowed = canLeavePayment(checkout)
 
   useEffect(() => {
-    if (view === 'checkout' && !checkoutAvailable) {
+    if (visibleView === view) return
+    if (visibleView === 'checkout') setView('checkout')
+    else {
       setView('tickets')
       setSelectionView('tickets')
     }
-  }, [checkoutAvailable, view])
+  }, [view, visibleView])
 
   useEffect(() => {
     onViewChange?.(visibleView)
@@ -165,6 +191,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   }
 
   const editSelection = () => {
+    if (!canLeavePayment(checkout)) return
     editedDetailsRef.current = {
       billing: checkout.billing,
       holders: checkout.holders,
@@ -196,7 +223,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
     return (
       <ScrollView contentContainerStyle={styles.content}>
         <IDVerification />
-        <Confirmation />
+        <Confirmation>{confirmationChildren}</Confirmation>
       </ScrollView>
     )
   }
@@ -206,15 +233,27 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
       contentContainerStyle={styles.content}
       keyboardShouldPersistTaps="handled"
     >
-      {visibleView === 'tickets' && (
-        <Tickets
+      {/* 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}
-          onContinue={() => enterCheckout('tickets')}
-          onSelectSeats={() => setView('seats')}
-          initialPromoCode={initialPromoCode}
-          referrer={referrer}
-          readAttributionFromUrl={readAttributionFromUrl}
+          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' && (
@@ -224,15 +263,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
               ← Back to tickets
             </Text>
           </Pressable>
-          {/* Native seat picker (WebView + seats.io) is a follow-up; the web
-              `<SeatMap/>` has no RN analogue yet. */}
-          <Card>
-            <BodyText>Seat selection isn’t available in the app yet.</BodyText>
-            <MutedText>
-              Please pick general-admission tickets, or use the web checkout to choose
-              seats.
-            </MutedText>
-          </Card>
+          <SeatMap eventId={eventId} onContinue={() => enterCheckout('seats')} />
         </View>
       )}
 
@@ -244,8 +275,21 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
               {selectedCount} {selectedCount === 1 ? 'ticket' : 'tickets'} selected
               {formattedTotal ? ` · ${formattedTotal}` : ''}
             </Text>
-            <Pressable onPress={editSelection} accessibilityRole="button">
-              <Text style={[styles.editText, { color: theme.accent }]}>Edit</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>
 
@@ -262,6 +306,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
             privacyPolicy={privacyPolicy}
             showPrivacyError={privacyAttempted}
           />
+          <WaiverSigning eventId={eventId} />
           <Payment
             onComplete={onComplete}
             eventId={eventId}
@@ -278,6 +323,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
 
       {authRequest && auth !== false && !onLogin && (
         <AuthModal
+          checkoutEventId={eventId}
           key={authRequest.key}
           open
           initialEmail={authRequest.email}
@@ -291,6 +337,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
           requireRegistrationAddress={auth?.requireRegistrationAddress}
           logoUrl={auth?.logoUrl}
           onAuthenticated={auth?.onAuthenticated}
+          onCheckoutAuthenticated={auth?.onCheckoutAuthenticated}
           onClose={() => setAuthRequest(null)}
         />
       )}
@@ -298,14 +345,59 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   )
 }
 
-export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({ theme, ...flow }) => (
-  <CheckoutProvider theme={theme}>
-    <Flow key={flow.eventId} {...flow} />
+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,
+  pickImage,
+  ...flow
+}) => (
+  <CheckoutProvider theme={theme} pickImage={pickImage}>
+    <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' },
@@ -320,4 +412,14 @@ const styles = StyleSheet.create({
   },
   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 },
 })