tf-checkout-react 1.7.31 → 2.0.0-beta.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.7.31",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -11,109 +11,124 @@
     "node": ">=10"
   },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build",
+    "start": "tsup --watch",
+    "build": "pnpm check:architecture && tsup",
+    "check:architecture": "node scripts/check-checkout-architecture.mjs",
+    "test": "echo \"No tests specified\" && exit 0",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "prepare": "tsup",
     "size": "size-limit",
     "analyze": "size-limit --why",
-    "release:beta": "npm version prerelease --preid beta",
-    "release:patch": "npm version patch",
-    "release:minor": "npm version minor",
-    "publish:current": "export $(cat .env | xargs) && npm publish && git push && git push --tags",
-    "publish:patch": "export $(cat .env | xargs) && npm version patch && npm publish && git push && git push --tags",
-    "publish:minor": "export $(cat .env | xargs) && npm version minor && npm publish && git push && git push --tags",
-    "publish:beta": "export $(cat .env | xargs) && npm version prerelease --preid beta && npm publish --tag beta && git push && git push --tags",
-    "start-example": "PORT=3002 parcel example/index.html --dist-dir example-dist --no-cache"
+    "release": "release-it",
+    "release:current": "release-it --no-increment",
+    "release:patch": "release-it patch",
+    "release:minor": "release-it minor",
+    "release:major": "release-it major",
+    "release:beta": "release-it --preRelease=beta",
+    "start-example": "vite",
+    "build-example": "vite build"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "@tanstack/react-query": ">=5",
+    "react": ">=16",
+    "react-dom": ">=16"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "tsdx lint"
+  "peerDependenciesMeta": {
+    "@tanstack/react-query": {
+      "optional": true
     }
   },
-  "prettier": {
-    "printWidth": 90,
-    "semi": false,
-    "singleQuote": true,
-    "trailingComma": "es5"
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release tf-checkout-react@${version}",
+      "tagName": "tf-checkout-react@${version}",
+      "push": true,
+      "requireCleanWorkingDir": true
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true,
+      "releaseName": "tf-checkout-react@${version}",
+      "releaseNotes": "node ../../scripts/release-notes.mjs tf-checkout-react ${version}"
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    }
   },
   "name": "tf-checkout-react",
   "author": "ft-worker",
-  "module": "dist/tf-checkout-react.esm.js",
+  "packageManager": "pnpm@10.28.1",
+  "module": "dist/index.esm.js",
   "size-limit": [
     {
-      "path": "dist/tf-checkout-react.cjs.production.min.js",
+      "path": "dist/index.js",
       "limit": "10 KB"
     },
     {
-      "path": "dist/tf-checkout-react.esm.js",
+      "path": "dist/index.esm.js",
       "limit": "10 KB"
     }
   ],
   "devDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/js": "^9.36.0",
+    "@evilmartians/lefthook": "^1.12.3",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@size-limit/preset-small-lib": "^6.0.4",
+    "@tanstack/react-query": "^5.90.20",
     "@types/lodash": "^4.14.176",
-    "@types/react": "^17.0.34",
-    "@types/react-dom": "^17.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.48.1",
-    "@typescript-eslint/parser": "^5.52.0",
-    "eslint": "^8.34.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "eslint-webpack-plugin": "^3.2.0",
-    "husky": "^7.0.4",
-    "parcel": "^2.8.3",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.36.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^16.4.0",
+    "moment": "^2.30.1",
     "prettier": "^2.8.4",
     "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rollup-plugin-postcss": "^4.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "release-it": "^19.0.4",
+    "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-static-files": "^0.2.0",
     "size-limit": "^6.0.4",
-    "tsdx": "^0.14.1",
-    "tslib": "^2.3.1",
-    "typescript": "^4.9.5"
+    "tf-checkout-shared": "workspace:*",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.3.1"
   },
   "dependencies": {
-    "@emotion/react": "^11.7.0",
-    "@emotion/styled": "^11.6.0",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@mui/icons-material": "^5.18.0",
-    "@mui/material": "^5.2.2",
-    "@mui/private-theming": "^5.11.1",
-    "@mui/styles": "^5.2.2",
-    "@mui/x-date-pickers": "^5.0.1",
-    "@stripe/react-stripe-js": "^5.2.0",
     "@stripe/stripe-js": "^8.1.0",
-    "axios": "^1.9.0",
-    "clsx": "^1.1.1",
-    "formik": "^2.2.9",
-    "jwt-decode": "^3.1.2",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "material-ui-phone-number": "^3.0.0",
-    "moment-timezone": "^0.5.34",
-    "nanoid": "^3.1.30",
-    "prop-types": "^15.7.2",
-    "react-app-polyfill": "^1.0.0",
-    "react-bootstrap": "^2.0.2",
-    "react-countdown": "^2.3.2",
-    "react-inlinesvg": "^2.3.0",
-    "react-router-dom": "^6.0.2",
-    "react-share": "^5.2.2",
-    "react-tooltip": "^5.28.0",
-    "rollup-plugin-svg": "^2.0.0",
-    "tf-seat-map-view": "9.4.7-beta.33",
-    "yup": "^0.32.11"
-  }
+    "axios": "^1.7.9",
+    "react-international-phone": "^4.7.0",
+    "tf-seat-map-view": "9.4.7-beta.33"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js"
+    },
+    "./checkout.css": "./dist/checkout.css",
+    "./*": "./*"
+  },
+  "types": "dist/index.d.ts",
+  "//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/.d.ts

@@ -1,4 +1,4 @@
 declare module '*.css'
 declare module '*.png'
-declare module '*.svg';
+declare module '*.svg'
 declare module 'tf-seat-map-view'

package/src/CardInput.tsx

@@ -0,0 +1,374 @@
+/**
+ * The card fields. `<CardInput/>` mounts a Stripe Element as soon as the engine
+ * has initialized Stripe (via the confirmer's `whenReady()` — no races, renders
+ * before or after init) and registers it with the confirmer. `<XenditCardInput/>`
+ * is the inline, formatted equivalent for Xendit events.
+ */
+import React, { useEffect, useRef, useState, type CSSProperties, type FC } from 'react'
+import type {
+  StripeCardElementOptions,
+  StripeElements,
+  StripeElementsOptionsMode,
+  StripePaymentElementOptions,
+} from '@stripe/stripe-js'
+
+import { webConfirmer, webXenditTokenizer } from './instance'
+import { preloadXendit, xenditCardChecks } from './xendit'
+
+type Field = 'number' | 'expiry' | 'cvc'
+
+/**
+ * The Stripe card field. Mounts against the engine's Stripe instance and
+ * registers itself with the confirmer; unregisters on unmount.
+ *
+ * Stripe Elements live in a cross-origin iframe and DON'T inherit page CSS, so
+ * by default they render black text — invisible on a dark surface. We read the
+ * host element's computed color/font and feed them to the Element so it matches
+ * whatever theme the consumer uses, no config needed. Pass `style` to override.
+ */
+export const CardInput: FC<{
+  className?: string
+  /** Stripe base-style overrides, merged onto the inherited color/font. */
+  style?: StripeCardElementOptions['style']
+}> = ({ className, style }) => {
+  const hostRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    let element: { mount: (el: HTMLElement) => void; unmount: () => void } | null = null
+    let cancelled = false
+    webConfirmer.whenReady().then((stripe) => {
+      if (cancelled || !hostRef.current) return
+      const cs = getComputedStyle(hostRef.current)
+      const color = cs.color || '#ffffff'
+      const fontSize = cs.fontSize && parseFloat(cs.fontSize) > 0 ? cs.fontSize : '16px'
+      // Stripe's Element style parser only accepts hex / rgb / rgba / hsl / named
+      // colors — NOT color-mix() or CSS vars (it silently drops the whole style,
+      // leaving a blank, dead field). Derive a muted placeholder as a plain rgba
+      // of the inherited text color.
+      const rgb = color.match(/\d+(?:\.\d+)?/g)
+      const placeholder =
+        rgb && rgb.length >= 3 ? `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.5)` : color
+      const card = stripe.elements().create('card', {
+        style: {
+          ...style,
+          base: {
+            color,
+            fontFamily: cs.fontFamily,
+            fontSize,
+            iconColor: color,
+            '::placeholder': { color: placeholder },
+            ...style?.base,
+          },
+        },
+      })
+      card.mount(hostRef.current)
+      webConfirmer.registerCardElement(card)
+      element = card
+    })
+    return () => {
+      cancelled = true
+      if (element) {
+        webConfirmer.registerCardElement(null)
+        element.unmount()
+      }
+    }
+  }, [])
+
+  return <div ref={hostRef} className={className} />
+}
+
+/**
+ * Build a Stripe Appearance from the live `--tf-checkout-*` tokens on the host
+ * element. This is what keeps the Payment Element CONSISTENT with the rest of the
+ * checkout: it inherits the same surface / text / accent / border / radius / font
+ * a consumer set — via the provider `theme`, their own CSS, or the default
+ * light/dark — so retheming the checkout (flat, branded, whatever) reflows the
+ * Stripe widget too, instead of it being a generic Stripe `night`/`stripe` box.
+ */
+const checkoutAppearance = (host: HTMLElement) => {
+  const cs = getComputedStyle(host)
+  const v = (name: string) => cs.getPropertyValue(name).trim() || undefined
+  const surface = v('--tf-checkout-surface')
+  const text = v('--tf-checkout-text')
+  const muted = v('--tf-checkout-muted')
+  const border = v('--tf-checkout-border')
+  const accent = v('--tf-checkout-accent')
+  const danger = v('--tf-checkout-error')
+  const font = v('--tf-checkout-font')
+  const radius = v('--tf-checkout-radius-control')
+
+  // Pick the closest Stripe base theme from the surface luminance, then override
+  // its palette with our tokens so it matches exactly.
+  const bgRgb = ((surface ?? cs.backgroundColor).match(/\d+(?:\.\d+)?/g) ?? []).map(
+    Number
+  )
+  const isDark =
+    bgRgb.length >= 3 &&
+    (0.299 * bgRgb[0] + 0.587 * bgRgb[1] + 0.114 * bgRgb[2]) / 255 < 0.5
+
+  const variables: Record<string, string> = {}
+  const set = (k: string, val?: string) => {
+    if (val) variables[k] = val
+  }
+  set('colorPrimary', accent)
+  set('colorBackground', surface)
+  set('colorText', text)
+  set('colorTextSecondary', muted)
+  set('colorTextPlaceholder', muted)
+  set('colorDanger', danger)
+  set('fontFamily', font)
+  set('borderRadius', radius)
+
+  const rules: Record<string, Record<string, string>> = {}
+  if (border) {
+    rules['.Input'] = { border: `1px solid ${border}` }
+    rules['.Input:focus'] = {
+      border: `1px solid ${accent ?? border}`,
+      boxShadow: 'none',
+    }
+    rules['.Tab'] = { border: `1px solid ${border}` }
+    rules['.Block'] = { border: `1px solid ${border}` }
+  }
+
+  return {
+    theme: isDark ? 'night' : 'stripe',
+    ...(Object.keys(variables).length ? { variables } : {}),
+    ...(Object.keys(rules).length ? { rules } : {}),
+  }
+}
+
+/**
+ * The wallet-capable card widget — a Stripe **Payment Element** in DEFERRED mode,
+ * exactly how the OLD checkout rendered payment. It shows the card fields AND,
+ * when the event's `stripe_wallets` gate is on, the Apple Pay / Google Pay
+ * buttons that the buyer picks *inside* the widget. There is no separate "Apple
+ * Pay" method row — wallets are a property of the card widget, as in old.
+ *
+ * Confirmation rides the same `placeOrder({ method: 'card' })` rail: this mounts
+ * the Elements group and registers it with the confirmer, whose `confirmCard`
+ * then runs `elements.submit()` + `stripe.confirmPayment` (old
+ * `useStripePayment.processPayment`). Mount this instead of `<CardInput/>` for a
+ * Stripe event with wallets available — see `<Payment/>`. It needs the server's
+ * deferred Elements config (`checkout.stripeElementsConfig`: mode/amount/currency).
+ */
+export const StripePaymentElement: FC<{
+  className?: string
+  /** Server deferred Elements config from `checkout.stripeElementsConfig`. */
+  elementsConfig?: Record<string, unknown>
+  /** Wallet gate from `checkout.walletAvailability`. */
+  wallets?: { applePay?: boolean; googlePay?: boolean }
+  /** Extra Payment Element options, merged over the wallet gate. */
+  options?: StripePaymentElementOptions
+}> = ({ className, elementsConfig, wallets, options }) => {
+  const hostRef = useRef<HTMLDivElement | null>(null)
+
+  // Re-mount when the deferred amount/currency or the wallet gate changes.
+  const configKey = JSON.stringify(elementsConfig ?? null)
+  const applePay = Boolean(wallets?.applePay)
+  const googlePay = Boolean(wallets?.googlePay)
+
+  useEffect(() => {
+    let group: StripeElements | null = null
+    let element: { unmount: () => void } | null = null
+    let cancelled = false
+
+    webConfirmer.whenReady().then((stripe) => {
+      if (cancelled || !hostRef.current) return
+      // Deferred mode — the same `{ mode, amount, currency }` shape the old
+      // `<Elements options={elements_config}>` used.
+      const mode = (elementsConfig ?? {
+        mode: 'payment',
+        amount: 0,
+        currency: 'usd',
+      }) as unknown as StripeElementsOptionsMode
+      // Theme the widget from the checkout's own tokens (read live off the host)
+      // so it matches whatever the consumer set — not a generic Stripe preset.
+      // (The server sends `theme:'automatic'`, which isn't a real Stripe theme and
+      // just defaults to light — hence the white box on a dark checkout.)
+      group = stripe.elements({
+        ...mode,
+        appearance: checkoutAppearance(hostRef.current),
+      } as unknown as StripeElementsOptionsMode)
+      const pe = group.create('payment', {
+        ...options,
+        wallets: {
+          applePay: applePay ? 'auto' : 'never',
+          googlePay: googlePay ? 'auto' : 'never',
+          ...(options?.wallets ?? {}),
+        },
+      })
+      pe.mount(hostRef.current)
+      webConfirmer.registerPaymentElement(group)
+      element = pe
+    })
+
+    return () => {
+      cancelled = true
+      if (element) {
+        webConfirmer.registerPaymentElement(null)
+        element.unmount()
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [configKey, applePay, googlePay])
+
+  return <div ref={hostRef} className={className} />
+}
+
+const onlyDigits = (v: string) => v.replace(/\D/g, '')
+/** "1234567812345678" → "1234 5678 1234 5678" (max 19 digits). */
+const formatCardNumber = (v: string) =>
+  onlyDigits(v)
+    .slice(0, 19)
+    .replace(/(\d{4})(?=\d)/g, '$1 ')
+/**
+ * Digits → "MM/YY" (max 4 digits), inserting the slash after the month.
+ * A leading digit above 1 can only be a single-digit month, so it's expanded
+ * ("4" → "04/"); a two-digit month is clamped to 12. Without this the field
+ * happily accepted "44/44" and only Xendit ever objected.
+ */
+const formatExpiry = (v: string) => {
+  let d = onlyDigits(v).slice(0, 4)
+  if (d.length === 1 && Number(d) > 1) d = `0${d}`
+  if (d.length >= 2) {
+    const mm = Math.min(Math.max(Number(d.slice(0, 2)), 1), 12)
+    d = String(mm).padStart(2, '0') + d.slice(2)
+  }
+  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d
+}
+const formatCvc = (v: string) => onlyDigits(v).slice(0, 4)
+
+/**
+ * Inline card field for a Xendit event — the formatted, no-popup equivalent of
+ * `<CardInput/>`. Render it when the gateway is Xendit and the buyer picks card,
+ * then `placeOrder({ method: 'xenditCard' })`: the engine tokenizes these fields
+ * with xendit.js (3DS inline) and charges server-side.
+ */
+export const XenditCardInput: FC<{
+  className?: string
+  inputClassName?: string
+  /**
+   * Reports the current field-level problem (or null when the fields are fine).
+   * The message is deliberately NOT rendered here: this component is mounted
+   * inside the consumer's bordered card box, and an error printed in there sits
+   * inside the border instead of beneath it. The consumer places it — see
+   * `<Payment/>`, which renders it under the box like every other field error.
+   */
+  onValidationChange?: (message: string | null) => void
+}> = ({ className, inputClassName, onValidationChange }) => {
+  const [number, setNumber] = useState('')
+  const [expiry, setExpiry] = useState('')
+  const [cvc, setCvc] = useState('')
+  // Per-field messages, revealed on blur so the buyer isn't scolded mid-typing.
+  const [touched, setTouched] = useState<Record<Field, boolean>>({
+    number: false,
+    expiry: false,
+    cvc: false,
+  })
+
+  const [mm = '', yy = ''] = expiry.split('/')
+  const errors: Record<Field, string | null> = {
+    number: number && !xenditCardChecks.number(number) ? 'Card number is invalid' : null,
+    expiry:
+      expiry.length >= 5 && !xenditCardChecks.expiry(mm, yy)
+        ? 'Expiry date is invalid'
+        : null,
+    cvc: cvc && !xenditCardChecks.cvn(cvc) ? 'Security code is invalid' : null,
+  }
+  const show = (f: Field) => (touched[f] ? errors[f] : null)
+  const markTouched = (f: Field) => setTouched((t) => ({ ...t, [f]: true }))
+
+  // The tokenizer reads the live values at pay time via this ref (registered
+  // once) — no stale closure over state.
+  const latest = useRef({ number, expiry, cvc })
+  latest.current = { number, expiry, cvc }
+
+  useEffect(() => {
+    // Warm xendit.js so the checks above use Xendit's own rules from the first
+    // blur, not just the local fallback.
+    preloadXendit()
+    webXenditTokenizer.registerFields(() => {
+      const [m = '', y = ''] = latest.current.expiry.split('/')
+      return {
+        number: latest.current.number,
+        expMonth: m.trim(),
+        expYear: y.trim(),
+        cvn: latest.current.cvc,
+      }
+    })
+    return () => webXenditTokenizer.registerFields(null)
+  }, [])
+
+  // Borderless inner inputs (unless the consumer styles them) so the three
+  // fields read as one card field inside `className`.
+  const blend: CSSProperties = inputClassName
+    ? {}
+    : {
+        border: 0,
+        background: 'transparent',
+        outline: 'none',
+        padding: 0,
+        color: 'inherit',
+        font: 'inherit',
+      }
+
+  // First message wins. Reported upward (never rendered here) so the consumer
+  // can place it below its card box.
+  const message = show('number') || show('expiry') || show('cvc')
+
+  const reportRef = useRef(onValidationChange)
+  reportRef.current = onValidationChange
+  useEffect(() => {
+    // Re-report on every EDIT, not just when the message text changes. A field
+    // that was never blurred has no message of its own, so if the consumer is
+    // showing a pay-time failure ("Card number is invalid" from the submit
+    // attempt) a message-only dependency would never fire again and that error
+    // would sit there while the buyer types a perfectly good number.
+    //
+    // The callback identity is deliberately NOT a dependency — a consumer's
+    // inline arrow changes every render and would loop.
+    reportRef.current?.(message)
+  }, [message, number, expiry, cvc])
+
+  return (
+    <div
+      className={className}
+      style={{ display: 'flex', alignItems: 'center', gap: 10 }}
+      data-checkout-invalid={message ? 'true' : undefined}
+    >
+      <input
+        className={inputClassName}
+        style={{ ...blend, flex: 1, minWidth: 0 }}
+        inputMode="numeric"
+        autoComplete="cc-number"
+        placeholder="Card number"
+        aria-invalid={Boolean(show('number'))}
+        value={number}
+        onChange={(e) => setNumber(formatCardNumber(e.target.value))}
+        onBlur={() => markTouched('number')}
+      />
+      <input
+        className={inputClassName}
+        style={{ ...blend, width: 64, textAlign: 'center' }}
+        inputMode="numeric"
+        autoComplete="cc-exp"
+        placeholder="MM / YY"
+        aria-invalid={Boolean(show('expiry'))}
+        value={expiry}
+        onChange={(e) => setExpiry(formatExpiry(e.target.value))}
+        onBlur={() => markTouched('expiry')}
+      />
+      <input
+        className={inputClassName}
+        style={{ ...blend, width: 44, textAlign: 'center' }}
+        inputMode="numeric"
+        autoComplete="cc-csc"
+        placeholder="CVC"
+        aria-invalid={Boolean(show('cvc'))}
+        value={cvc}
+        onChange={(e) => setCvc(formatCvc(e.target.value))}
+        onBlur={() => markTouched('cvc')}
+      />
+    </div>
+  )
+}