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

package/src/ui/primitives.tsx

@@ -0,0 +1,202 @@
+/**
+ * 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'
+import { useFrozen } from './Frozen'
+
+/** 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)
+  // Announced when it appears, like role="alert" on web.
+  return (
+    <Text
+      style={s.errorText}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="assertive"
+    >
+      {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 frozen = useFrozen()
+  const isDisabled = disabled || loading || frozen
+  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/ui/useAccountT.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import {
+  createTranslator,
+  resolveLocale,
+  translateAccountMessage,
+  type TranslateVars,
+} from 'tf-checkout-shared'
+
+export const useAccountT = (locale?: string) => {
+  const translate = useMemo(
+    () => createTranslator({ locale: resolveLocale(locale) }),
+    [locale]
+  )
+  return (english: string, vars?: TranslateVars) =>
+    translateAccountMessage(translate, english, vars)
+}

package/src/useCheckout.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 { claimDefaultCardField } from './CardInput'
+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({
+    // A Pay without its own claim uses the default ticket field (`checkout`).
+    ports: { confirmer: rnConfirmer, ...rnPorts, claimDefaultCardField, ...opts.ports },
+    options: opts.options,
+  })