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

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "1.0.47",
+  "version": "2.0.0-beta.5",
   "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": "./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",
+    "scripts",
+    "dist",
     "android",
     "ios",
     "cpp",
@@ -36,12 +37,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": "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/"
@@ -69,8 +71,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",
@@ -79,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",
@@ -89,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-builder-bob": "^0.40.13",
+    "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"
@@ -101,20 +110,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 +137,28 @@
       }
     }
   },
-  "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"
+    "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": {
-    "@stripe/stripe-react-native": "^0.54.0",
-    "react": "*",
-    "react-native": "*"
+    "@react-native-clipboard/clipboard": ">=1.14.0",
+    "@stripe/stripe-react-native": ">=0.45.0",
+    "@tanstack/react-query": ">=5",
+    "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 \u2014 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/src/CardInput.tsx

@@ -0,0 +1,110 @@
+/**
+ * `<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, { 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
+}
+
+// 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
+      // 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 },
+})