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

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "1.0.47",
+  "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": "./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": "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": "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 — 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

@@ -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 },
+})