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

package/package.json

@@ -1,24 +1,24 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "1.0.45",
+  "version": "2.0.0-beta.0",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-checkout-react-native",
   "author": "The Ticket Fairy",
   "license": "MIT",
-  "main": "./lib/index.js",
-  "module": "./lib/index.mjs",
-  "types": "./lib/typescript/src/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./lib/typescript/src/index.d.ts",
-      "import": "./lib/index.mjs",
-      "require": "./lib/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "files": [
     "src",
-    "lib",
+    "dist",
     "android",
     "ios",
     "cpp",
@@ -36,12 +36,12 @@
     "!**/.*"
   ],
   "scripts": {
-    "test": "jest",
-    "typecheck": "tsc",
+    "test": "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": "bob build --target typescript && tsup",
+    "build": "tsup",
     "prepare": "npm run build",
     "release": "release-it",
     "release:current": "release-it --no-increment",
@@ -69,8 +69,11 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.36.0",
     "@evilmartians/lefthook": "^1.12.3",
+    "@react-native-clipboard/clipboard": "^1.14.0",
     "@react-native/babel-preset": "0.81.1",
     "@release-it/conventional-changelog": "^10.0.1",
+    "@stripe/stripe-react-native": "^0.64.0",
+    "@tanstack/react-query": "^5.89.0",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.20",
     "@types/react": "^19.1.12",
@@ -90,7 +93,7 @@
     "prettier": "3.6.2",
     "react": "19.1.0",
     "react-native": "0.81.4",
-    "react-native-builder-bob": "^0.40.13",
+    "react-native-mmkv": "^3.3.1",
     "release-it": "^19.0.4",
     "tf-checkout-shared": "workspace:*",
     "tsup": "^8.5.1",
@@ -101,20 +104,23 @@
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/dist/"
     ]
   },
   "release-it": {
     "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
+      "commitMessage": "chore: release tf-checkout-react-native@${version}",
+      "tagName": "tf-checkout-react-native@${version}",
+      "push": true,
+      "requireCleanWorkingDir": true
     },
     "npm": {
       "publish": true
     },
     "github": {
       "release": true,
-      "releaseName": "v${version}"
+      "releaseName": "tf-checkout-react-native@${version}",
+      "releaseNotes": "node ../../scripts/release-notes.mjs tf-checkout-react-native ${version}"
     },
     "plugins": {
       "@release-it/conventional-changelog": {
@@ -125,54 +131,22 @@
       }
     }
   },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
     "version": "0.54.3"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^2.0.0",
-    "@react-native-clipboard/clipboard": "^1.14.0",
-    "@react-native-community/datetimepicker": "^8.0.0",
-    "@sesamsolutions/phone-input": "jorgtz/react-native-phone-input",
-    "@stripe/stripe-react-native": "^0.54.0",
-    "@tanstack/react-query": "^5.89.0",
-    "axios": "^1.7.9",
-    "axios-retry": "^4.5.0",
-    "deprecated-react-native-prop-types": "^5.0.0",
-    "formik": "^2.4.5",
-    "jwt-decode": "^4.0.0",
-    "lodash": "4.17.21",
-    "react-native-background-timer": "2.4.1",
-    "react-native-device-country": "1.1.1",
-    "react-native-fs": "2.18.0",
-    "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "react-native-mmkv": "^3.3.1",
-    "react-native-modal-datetime-picker": "^18.0.0",
-    "react-native-safe-area-context": "^5.6.1",
-    "yup": "^1.4.0"
+    "axios": "^1.7.9"
   },
+  "//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": {
-    "@stripe/stripe-react-native": "^0.54.0",
+    "@react-native-clipboard/clipboard": ">=1.14.0",
+    "@stripe/stripe-react-native": ">=0.45.0",
+    "@tanstack/react-query": ">=5",
     "react": "*",
-    "react-native": "*"
-  }
+    "react-native": "*",
+    "react-native-mmkv": ">=3"
+  },
+  "//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."
 }

package/src/CardInput.tsx

@@ -0,0 +1,49 @@
+/**
+ * `<CardInput/>` — the native card field. The RN analogue of the web
+ * `CardInput`, but simpler: `@stripe/stripe-react-native`'s `<CardField/>` feeds
+ * card data straight into `confirmPayment` natively, so there is no element to
+ * register with the confirmer — just mount this inside the payment step and
+ * report completeness up so the pay button can gate on it.
+ *
+ * The native SDK must be initialized first; the engine does that during prime
+ * (`confirmer.init` → `initStripe`), which always runs before the payment step
+ * is reached.
+ */
+import React, { type FC } from 'react'
+import { StyleSheet } from 'react-native'
+import { CardField } from '@stripe/stripe-react-native'
+
+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
+}
+
+export const CardInput: FC<CardInputProps> = ({ onComplete }) => {
+  const theme = useTheme()
+  return (
+    <CardField
+      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
+      // instruction to type it. Matches the web field's "Card number". Demo
+      // copy belongs behind `<Payment showTestCardHint />`, not in the field.
+      placeholders={{ number: 'Card number' }}
+      cardStyle={{
+        backgroundColor: theme.surface,
+        textColor: theme.text,
+        placeholderColor: theme.muted,
+        borderColor: theme.border,
+        borderWidth: 1,
+        borderRadius: theme.radiusControl,
+      }}
+      style={styles.field}
+      onCardChange={(details) => onComplete?.(details.complete)}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  field: { height: 50, marginVertical: 4 },
+})

package/src/EmbeddedCheckout.tsx

@@ -0,0 +1,323 @@
+/**
+ * `<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 seat-map view is a placeholder until the native seat picker
+ * (WebView + seats.io) lands.
+ */
+import React, { useEffect, useRef, useState, type FC } from 'react'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+import type {
+  CheckoutBilling,
+  CheckoutConsent,
+  CheckoutHolder,
+  EventCondition,
+  PlaceOrderResult,
+  TfProfile,
+} from 'tf-checkout-shared'
+
+import { AuthModal } from './auth/AuthModal'
+import { AddOns } from './sections/AddOns'
+import { BillingInfo, type CheckoutPrivacyPolicy } from './sections/BillingInfo'
+import { Confirmation } from './sections/Confirmation'
+import { IDVerification } from './sections/IDVerification'
+import { Payment } from './sections/Payment'
+import { Tickets } from './sections/Tickets'
+import { CheckoutProvider, useCheckoutContext, useTheme } from './ui/CheckoutProvider'
+import { Card, BodyText, MutedText, 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 {
+  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'
+  /** 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',
+  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.
+  const checkoutBelongsToEvent = checkout.eventId === eventId
+  const checkoutAvailable = checkoutBelongsToEvent && checkout.status !== 'expired'
+  const visibleView: CheckoutView =
+    view === 'checkout' && !checkoutAvailable ? 'tickets' : view
+
+  useEffect(() => {
+    if (view === 'checkout' && !checkoutAvailable) {
+      setView('tickets')
+      setSelectionView('tickets')
+    }
+  }, [checkoutAvailable, view])
+
+  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)
+  }
+
+  // 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 />
+      </ScrollView>
+    )
+  }
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.content}
+      keyboardShouldPersistTaps="handled"
+    >
+      {visibleView === 'tickets' && (
+        <Tickets
+          eventId={eventId}
+          onContinue={() => enterCheckout('tickets')}
+          onSelectSeats={() => setView('seats')}
+          initialPromoCode={initialPromoCode}
+          referrer={referrer}
+          readAttributionFromUrl={readAttributionFromUrl}
+        />
+      )}
+
+      {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>
+          {/* 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>
+        </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} accessibilityRole="button">
+              <Text style={[styles.editText, { color: theme.accent }]}>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}
+          />
+          <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
+          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)}
+        />
+      )}
+    </ScrollView>
+  )
+}
+
+export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({ theme, ...flow }) => (
+  <CheckoutProvider theme={theme}>
+    <Flow key={flow.eventId} {...flow} />
+  </CheckoutProvider>
+)
+
+const styles = StyleSheet.create({
+  content: { padding: 16, gap: 12 },
+  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' },
+})