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

package/src/ui/Select.tsx

@@ -0,0 +1,151 @@
+/**
+ * Native `<Select/>` — the RN analogue of the web `Field` `Select`. There is no
+ * DOM `<select>` on native, so this is a themed pressable that opens a modal
+ * list of options. Generic over the option value so callers keep type-safety
+ * (country ids, gender codes, currency codes, ISO dates, …).
+ */
+import React, { useMemo, useState } from 'react'
+import { FlatList, Modal, Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+
+export interface SelectOption<T = string> {
+  label: string
+  value: T
+}
+
+export function Select<T = string>({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select…',
+  invalid = false,
+  disabled = false,
+}: {
+  value: T | null | undefined
+  onChange: (value: T) => void
+  options: SelectOption<T>[]
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+}) {
+  const theme = useTheme()
+  const s = useSelectStyles(theme)
+  const [open, setOpen] = useState(false)
+
+  const selected = options.find((o) => o.value === value)
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        style={[s.control, invalid && s.controlInvalid, disabled && s.controlDisabled]}
+      >
+        <Text style={[s.value, !selected && s.placeholder]} numberOfLines={1}>
+          {selected ? selected.label : placeholder}
+        </Text>
+        <Text style={s.chevron}>▾</Text>
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={s.backdrop} onPress={() => setOpen(false)}>
+          <Pressable style={s.sheet} onPress={() => {}}>
+            <FlatList
+              data={options}
+              keyExtractor={(item, i) => `${String(item.value)}:${i}`}
+              keyboardShouldPersistTaps="handled"
+              renderItem={({ item }) => {
+                const isSelected = item.value === value
+                return (
+                  <Pressable
+                    style={s.option}
+                    onPress={() => {
+                      onChange(item.value)
+                      setOpen(false)
+                    }}
+                  >
+                    <Text style={[s.optionLabel, isSelected && s.optionLabelSelected]}>
+                      {item.label}
+                    </Text>
+                    {isSelected ? <Text style={s.optionCheck}>✓</Text> : null}
+                  </Pressable>
+                )
+              }}
+              ItemSeparatorComponent={() => <View style={s.sep} />}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  )
+}
+
+const useSelectStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        control: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          paddingHorizontal: 12,
+          paddingVertical: 12,
+          backgroundColor: theme.surface,
+          gap: 8,
+        },
+        controlInvalid: { borderColor: theme.error },
+        controlDisabled: { backgroundColor: theme.surfaceMuted },
+        value: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        placeholder: { color: theme.muted },
+        chevron: { color: theme.muted, fontSize: theme.fontSize },
+        backdrop: {
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.4)',
+          justifyContent: 'flex-end',
+        },
+        sheet: {
+          backgroundColor: theme.surface,
+          borderTopLeftRadius: theme.radiusCard,
+          borderTopRightRadius: theme.radiusCard,
+          maxHeight: '70%',
+          paddingVertical: 8,
+        },
+        option: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: 20,
+          paddingVertical: 14,
+          gap: 12,
+        },
+        optionLabel: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        optionLabelSelected: { color: theme.accent, fontWeight: '700' },
+        optionCheck: { color: theme.accent, fontSize: theme.fontSize, fontWeight: '700' },
+        sep: {
+          height: StyleSheet.hairlineWidth,
+          backgroundColor: theme.border,
+          marginHorizontal: 20,
+        },
+      }),
+    [theme]
+  )

package/src/ui/Timer.tsx

@@ -0,0 +1,69 @@
+/**
+ * `<Timer>` — a reservation countdown label. RN analogue of the web `Timer`.
+ * Pass `checkout.secondsLeft`. Renders "h:mm:ss" (≥ 1h) or "m:ss", turning
+ * urgent (error color) at/under `urgentAt` seconds.
+ */
+import React, { useMemo, type FC, type ReactNode } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+
+const clock = (s: number): string => {
+  const v = Math.max(0, Math.floor(s))
+  return v >= 3600
+    ? `${Math.floor(v / 3600)}:${String(Math.floor((v % 3600) / 60)).padStart(
+        2,
+        '0'
+      )}:${String(v % 60).padStart(2, '0')}`
+    : `${Math.floor(v / 60)}:${String(v % 60).padStart(2, '0')}`
+}
+
+export interface TimerProps {
+  seconds: number
+  /** Below this many seconds it turns urgent (default 60). */
+  urgentAt?: number
+  /** Text before the clock, e.g. "Reserved for". */
+  label?: ReactNode
+}
+
+export const Timer: FC<TimerProps> = ({ seconds, urgentAt = 60, label }) => {
+  const theme = useTheme()
+  const s = useTimerStyles(theme)
+  const urgent = seconds <= urgentAt
+  return (
+    <View style={s.row}>
+      {/* A string label must be wrapped in <Text> on native; a node renders as-is. */}
+      {label != null ? (
+        typeof label === 'string' ? (
+          <Text style={s.label}>{label}</Text>
+        ) : (
+          label
+        )
+      ) : null}
+      <Text style={[s.clock, urgent && s.clockUrgent]}>{clock(seconds)}</Text>
+    </View>
+  )
+}
+
+const useTimerStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        row: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+        label: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        clock: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        clockUrgent: { color: theme.error },
+      }),
+    [theme]
+  )

package/src/ui/TimerBanner.tsx

@@ -0,0 +1,95 @@
+/**
+ * `<TimerBanner>` — the dismissible reservation-countdown banner the old
+ * checkout showed atop the add-ons / billing / payment steps. RN analogue of the
+ * web `TimerBanner`: feed it `checkout.secondsLeft` and it renders the message +
+ * "mm:ss" with an × to dismiss. Renders nothing when there's no live reservation
+ * (`seconds` undefined / ≤ 0) or once dismissed.
+ */
+import React, { useMemo, useState, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+
+const clock = (s: number): string => {
+  const m = String(Math.floor(s / 60)).padStart(2, '0')
+  const ss = String(s % 60).padStart(2, '0')
+  return `${m}:${ss}`
+}
+
+export interface TimerBannerProps {
+  seconds?: number
+  /** Show urgent styling at/under this many seconds. Default 60. */
+  urgentAt?: number
+  message?: string
+}
+
+export const TimerBanner: FC<TimerBannerProps> = ({
+  seconds,
+  urgentAt = 60,
+  message = 'Please complete your purchase before the timer reaches zero.',
+}) => {
+  const theme = useTheme()
+  const s = useBannerStyles(theme)
+  const [dismissed, setDismissed] = useState(false)
+  if (seconds === undefined || seconds <= 0 || dismissed) return null
+  const urgent = seconds <= urgentAt
+  return (
+    // `accessibilityLiveRegion="polite"` is the RN analogue of the web
+    // `role="status"` — announce the countdown without stealing focus.
+    <View accessibilityLiveRegion="polite" style={[s.banner, urgent && s.bannerUrgent]}>
+      <Text style={[s.msg, urgent && s.textUrgent]}>{message}</Text>
+      <Text style={[s.clock, urgent && s.textUrgent]}>{clock(seconds)}</Text>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Dismiss"
+        hitSlop={8}
+        onPress={() => setDismissed(true)}
+        style={s.close}
+      >
+        <Text style={[s.closeGlyph, urgent && s.textUrgent]}>×</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const useBannerStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        banner: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          paddingVertical: 10,
+          paddingHorizontal: 12,
+          borderRadius: theme.radiusControl,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          backgroundColor: theme.surfaceMuted,
+        },
+        bannerUrgent: { borderColor: theme.error },
+        msg: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        clock: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        textUrgent: { color: theme.error },
+        close: { paddingHorizontal: 2 },
+        closeGlyph: {
+          color: theme.muted,
+          fontSize: 18,
+          lineHeight: 18,
+          fontWeight: '600',
+        },
+      }),
+    [theme]
+  )

package/src/ui/index.ts

@@ -0,0 +1,17 @@
+/** The native checkout UI kit — themeable provider + primitives. */
+export * from './theme'
+export {
+  CheckoutProvider,
+  useCheckoutContext,
+  useCheckoutValidation,
+  useTheme,
+  type CheckoutProviderProps,
+} from './CheckoutProvider'
+export * from './primitives'
+export * from './Field'
+export * from './Select'
+export * from './QuantitySelect'
+export * from './Timer'
+export * from './TimerBanner'
+export * from './PaymentMethods'
+export * from './InstallmentPicker'

package/src/ui/primitives.tsx

@@ -0,0 +1,191 @@
+/**
+ * Native UI primitives — the RN analogues of the web `ui/` presentation
+ * components (`Button`, `Card`, `SectionHeader`, `Loader`, …). All theme-aware
+ * via `useTheme()`; no CSS, just `StyleSheet` built from the resolved tokens.
+ */
+import React, { useMemo, type FC, type ReactNode } from 'react'
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+
+/** Small spinner. */
+export const Loader: FC<{ size?: 'small' | 'large'; color?: string }> = ({
+  size = 'small',
+  color,
+}) => {
+  const theme = useTheme()
+  return <ActivityIndicator size={size} color={color ?? theme.accent} />
+}
+
+/** A titled surface — the RN `Card` + `SectionHeader`. */
+export const Card: FC<{ children: ReactNode; style?: StyleProp<ViewStyle> }> = ({
+  children,
+  style,
+}) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return <View style={[s.card, style]}>{children}</View>
+}
+
+export const SectionHeader: FC<{ title: string; subtitle?: string }> = ({
+  title,
+  subtitle,
+}) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return (
+    <View style={s.sectionHeader}>
+      <Text style={s.sectionTitle}>{title}</Text>
+      {subtitle ? <Text style={s.sectionSubtitle}>{subtitle}</Text> : null}
+    </View>
+  )
+}
+
+export const Divider: FC = () => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return <View style={s.divider} />
+}
+
+/** Body / muted / title text helpers so sections don't re-derive colors. */
+export const BodyText: FC<{ children: ReactNode; style?: StyleProp<TextStyle> }> = ({
+  children,
+  style,
+}) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return <Text style={[s.body, style]}>{children}</Text>
+}
+
+export const MutedText: FC<{ children: ReactNode; style?: StyleProp<TextStyle> }> = ({
+  children,
+  style,
+}) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return <Text style={[s.muted, style]}>{children}</Text>
+}
+
+export const ErrorText: FC<{ children: ReactNode }> = ({ children }) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return <Text style={s.errorText}>{children}</Text>
+}
+
+export interface ButtonProps {
+  onPress: () => void
+  children: ReactNode
+  loading?: boolean
+  disabled?: boolean
+  variant?: 'primary' | 'ghost'
+}
+
+export const Button: FC<ButtonProps> = ({
+  onPress,
+  children,
+  loading = false,
+  disabled = false,
+  variant = 'primary',
+}) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  const isDisabled = disabled || loading
+  const ghost = variant === 'ghost'
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled: isDisabled, busy: loading }}
+      disabled={isDisabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        s.button,
+        ghost && s.buttonGhost,
+        isDisabled && s.buttonDisabled,
+        pressed && !isDisabled && s.buttonPressed,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={ghost ? theme.accent : theme.accentContrast}
+        />
+      ) : (
+        <Text style={[s.buttonLabel, ghost && s.buttonLabelGhost]}>{children}</Text>
+      )}
+    </Pressable>
+  )
+}
+
+/** Build the primitive stylesheet from the resolved theme (memoized per theme). */
+export const useStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        card: {
+          backgroundColor: theme.surface,
+          borderColor: theme.border,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderRadius: theme.radiusCard,
+          padding: 16,
+          gap: 12,
+        },
+        sectionHeader: { gap: 2 },
+        sectionTitle: {
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        sectionSubtitle: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontFamily: theme.fontFamily,
+        },
+        divider: { height: StyleSheet.hairlineWidth, backgroundColor: theme.border },
+        body: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        errorText: { color: theme.error, fontSize: theme.fontSize - 2 },
+        button: {
+          backgroundColor: theme.accent,
+          borderRadius: theme.radiusControl,
+          paddingVertical: 14,
+          paddingHorizontal: 20,
+          alignItems: 'center',
+          justifyContent: 'center',
+          minHeight: 48,
+        },
+        buttonGhost: {
+          backgroundColor: 'transparent',
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+        },
+        buttonDisabled: { opacity: 0.5 },
+        buttonPressed: { opacity: 0.85 },
+        buttonLabel: {
+          color: theme.accentContrast,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        buttonLabelGhost: { color: theme.text },
+      }),
+    [theme]
+  )

package/src/ui/theme.ts

@@ -0,0 +1,89 @@
+/**
+ * The native checkout theme — the RN analogue of the web `theme.ts`. Web maps
+ * tokens to `--tf-checkout-*` CSS variables; RN has no CSS variables, so a theme
+ * is a plain JS token object resolved (partial-over-default) at the provider and
+ * read through `useTheme()`. Pass any subset to `<CheckoutProvider theme={…}>`.
+ */
+
+export interface CheckoutTheme {
+  /** Force a palette. Omit to follow the base light palette. */
+  colorScheme?: 'light' | 'dark'
+  /** Primary color — buttons, selected states, focus. */
+  accent?: string
+  /** Text/icon color on top of `accent`. */
+  accentContrast?: string
+  /** Card background. */
+  surface?: string
+  /** Subtle fill (summary rows, muted pills). */
+  surfaceMuted?: string
+  /** Screen background behind the cards. */
+  background?: string
+  /** Primary text. */
+  text?: string
+  /** Secondary text (labels, hints, "incl. fees"). */
+  muted?: string
+  /** Borders + dividers. */
+  border?: string
+  /** Error text + invalid field borders. */
+  error?: string
+  /** Success (confirmation check). */
+  success?: string
+  /** Corner radius for cards. */
+  radiusCard?: number
+  /** Corner radius for inputs / buttons. */
+  radiusControl?: number
+  /** Base font size. */
+  fontSize?: number
+  /** Font family for the whole component tree (optional). */
+  fontFamily?: string
+}
+
+/** A theme with every token resolved to a concrete value — what components read. */
+export type ResolvedTheme = Required<
+  Omit<CheckoutTheme, 'colorScheme' | 'fontFamily'>
+> & {
+  colorScheme: 'light' | 'dark'
+  fontFamily?: string
+}
+
+const LIGHT: ResolvedTheme = {
+  colorScheme: 'light',
+  accent: '#111827',
+  accentContrast: '#ffffff',
+  surface: '#ffffff',
+  surfaceMuted: '#f5f5fa',
+  background: '#ffffff',
+  text: '#111827',
+  muted: '#6b7280',
+  border: '#e5e7eb',
+  error: '#d9534f',
+  success: '#139679',
+  radiusCard: 12,
+  radiusControl: 10,
+  fontSize: 15,
+}
+
+const DARK: ResolvedTheme = {
+  ...LIGHT,
+  colorScheme: 'dark',
+  accent: '#818cf8',
+  accentContrast: '#111827',
+  surface: '#1b1b2b',
+  surfaceMuted: '#23233a',
+  background: '#101018',
+  text: '#f5f5fa',
+  muted: '#9ca3af',
+  border: '#33334d',
+}
+
+/** Merge a partial theme over the light/dark base into a concrete token set. */
+export const resolveTheme = (theme?: CheckoutTheme): ResolvedTheme => {
+  const base = theme?.colorScheme === 'dark' ? DARK : LIGHT
+  if (!theme) return base
+  const out: ResolvedTheme = { ...base }
+  for (const key of Object.keys(theme) as (keyof CheckoutTheme)[]) {
+    const value = theme[key]
+    if (value !== undefined) (out as Record<string, unknown>)[key] = value
+  }
+  return out
+}

package/src/useCheckout.ts

@@ -0,0 +1,35 @@
+/**
+ * Native `useCheckout` — a thin injector: the SDK's `useCheckout` with the RN
+ * platform ports pre-wired (stripe-react-native confirmer + native rails). ALL
+ * the DX (countdown, isBusy, promo/referrer/waiting-list, auto ID verification,
+ * the flat snapshot) lives in the SDK's hook, so web and native share it — this
+ * file only supplies what's platform-specific.
+ *
+ *   configureCheckout({ env: 'PROD', clientId, clientSecret })  // once, at app start
+ *   const checkout = useCheckout()
+ *   await checkout.setTickets(eventId, selections)
+ *   checkout.setBilling(b)
+ *   await checkout.placeOrder('card')                           // <CardInput/> rendered
+ */
+import {
+  useCheckout as useSharedCheckout,
+  type CheckoutOptions,
+  type CheckoutPorts,
+  type UseCheckout,
+} from 'tf-checkout-shared'
+
+import { rnConfirmer, rnPorts } from './instance'
+
+export interface UseCheckoutOptions {
+  /** Extra platform ports merged over the native defaults (e.g. an injected
+   *  WebView `providerPage`, or an MSI `onInstallmentOffers` picker). */
+  ports?: Omit<CheckoutPorts, 'confirmer'>
+  /** Wallet/redirect engine options (merchant identity, deep-link scheme). */
+  options?: CheckoutOptions
+}
+
+export const useCheckout = (opts: UseCheckoutOptions = {}): UseCheckout =>
+  useSharedCheckout({
+    ports: { confirmer: rnConfirmer, ...rnPorts, ...opts.ports },
+    options: opts.options,
+  })