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

package/src/ui/SignaturePad.tsx

@@ -0,0 +1,218 @@
+/**
+ * `<SignaturePad/>` — the native drawing area for a drawn signature. Built
+ * from React Native's own `PanResponder` and `View`s, so it adds no native
+ * module to the consumer app (`react-native-svg` is not one of the SDK's
+ * peers). Each segment of a stroke renders as a thin, rotated `View`; when a
+ * stroke ends the pad reports a PNG data URL made by the shared core and the
+ * ink drawn so far (`signatureStrokeReport`). '' and 0 once cleared. A stroke
+ * the system interrupts (the app going to the background, an OS gesture)
+ * ends the same way as a released one, so what is saved is what is shown.
+ *
+ * Drawing stays smooth on long signatures: points live in a ref, a point
+ * closer than `MIN_STEP` to the last one is not kept, the pad re-renders at
+ * most once a frame, and a finished stroke never re-renders (`StrokeView`).
+ *
+ * The pad keeps the gesture inside a `ScrollView` (it refuses to hand the
+ * responder over), so drawing does not scroll the page.
+ */
+import React, { memo, useEffect, useMemo, useRef, useState, type FC } from 'react'
+import { PanResponder, Pressable, StyleSheet, Text, View } from 'react-native'
+import {
+  SIGNATURE_INK,
+  SIGNATURE_PAPER,
+  signatureStrokeReport,
+  type SignatureStroke,
+} from 'tf-checkout-shared'
+
+import { useTheme } from './CheckoutProvider'
+
+export interface SignaturePadProps {
+  onChange: (pngDataUrl: string, inkLength: number) => void
+  /** Accessible name of the drawing area. */
+  label: string
+  clearLabel: string
+  disabled?: boolean
+}
+
+const LINE_WIDTH = 2.5
+const PAD_HEIGHT = 160
+/** Pad points between kept points: finer moves add views, not detail. */
+const MIN_STEP = 1.5
+
+/** One stroke's segments. `points` changes only while the stroke is drawn. */
+const StrokeView = memo<{ stroke: SignatureStroke; points: number }>(({ stroke }) =>
+  stroke.length === 1 ? (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.dot,
+        { left: stroke[0].x - LINE_WIDTH / 2, top: stroke[0].y - LINE_WIDTH / 2 },
+      ]}
+    />
+  ) : (
+    <>
+      {stroke.slice(1).map((p, i) => {
+        const a = stroke[i]
+        const length = Math.hypot(p.x - a.x, p.y - a.y)
+        const angle = Math.atan2(p.y - a.y, p.x - a.x)
+        return (
+          <View
+            key={i}
+            pointerEvents="none"
+            style={[
+              styles.segment,
+              {
+                width: length + LINE_WIDTH,
+                left: (a.x + p.x) / 2 - (length + LINE_WIDTH) / 2,
+                top: (a.y + p.y) / 2 - LINE_WIDTH / 2,
+                transform: [{ rotate: `${angle}rad` }],
+              },
+            ]}
+          />
+        )
+      })}
+    </>
+  )
+)
+StrokeView.displayName = 'StrokeView'
+
+export const SignaturePad: FC<SignaturePadProps> = ({
+  onChange,
+  label,
+  clearLabel,
+  disabled,
+}) => {
+  const theme = useTheme()
+  const strokesRef = useRef<SignatureStroke[]>([])
+  // Bumped to re-render; the strokes themselves stay in the ref.
+  const [, setFrame] = useState(0)
+  const frameRequest = useRef<number | null>(null)
+  const size = useRef({ width: 0, height: PAD_HEIGHT })
+  const report = useRef(onChange)
+  report.current = onChange
+  const disabledRef = useRef(disabled)
+  disabledRef.current = disabled
+
+  const render = () => {
+    if (frameRequest.current !== null) cancelAnimationFrame(frameRequest.current)
+    frameRequest.current = null
+    setFrame((n) => n + 1)
+  }
+  const renderNextFrame = () => {
+    if (frameRequest.current !== null) return
+    frameRequest.current = requestAnimationFrame(render)
+  }
+  useEffect(
+    () => () => {
+      if (frameRequest.current !== null) cancelAnimationFrame(frameRequest.current)
+    },
+    []
+  )
+
+  // Paints every kept point first, so the report and the pad show the same.
+  const endStroke = () => {
+    render()
+    const ended = signatureStrokeReport(strokesRef.current, {
+      padWidth: size.current.width,
+      padHeight: size.current.height,
+      lineWidth: LINE_WIDTH,
+    })
+    if (ended) report.current(ended.pngDataUrl, ended.inkLength)
+  }
+
+  const responder = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabledRef.current,
+        onMoveShouldSetPanResponder: () => !disabledRef.current,
+        onPanResponderTerminationRequest: () => false,
+        onPanResponderGrant: (e) => {
+          const { locationX: x, locationY: y } = e.nativeEvent
+          strokesRef.current = [...strokesRef.current, [{ x, y }]]
+          render()
+        },
+        onPanResponderMove: (e) => {
+          const { locationX: x, locationY: y } = e.nativeEvent
+          const last = strokesRef.current[strokesRef.current.length - 1]
+          if (!last) return
+          const previous = last[last.length - 1]
+          if (Math.hypot(x - previous.x, y - previous.y) < MIN_STEP) return
+          last.push({ x, y })
+          renderNextFrame()
+        },
+        onPanResponderRelease: endStroke,
+        onPanResponderTerminate: endStroke,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  )
+
+  const clear = () => {
+    strokesRef.current = []
+    render()
+    report.current('', 0)
+  }
+
+  return (
+    <View style={styles.wrap}>
+      <View
+        accessible
+        accessibilityRole="image"
+        accessibilityLabel={label}
+        onLayout={(e) => {
+          size.current = {
+            width: e.nativeEvent.layout.width,
+            height: e.nativeEvent.layout.height,
+          }
+        }}
+        style={[
+          styles.pad,
+          {
+            borderColor: theme.border,
+            borderRadius: theme.radiusControl,
+            // The stored image is black on white, so the pad shows the same.
+            backgroundColor: SIGNATURE_PAPER,
+          },
+        ]}
+        {...responder.panHandlers}
+      >
+        {strokesRef.current.map((stroke, si) => (
+          <StrokeView key={si} stroke={stroke} points={stroke.length} />
+        ))}
+      </View>
+      <Pressable
+        accessibilityRole="button"
+        onPress={clear}
+        disabled={disabled}
+        style={styles.clear}
+      >
+        <Text style={{ color: theme.accent, fontFamily: theme.fontFamily }}>
+          {clearLabel}
+        </Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrap: { gap: 6 },
+  pad: {
+    height: PAD_HEIGHT,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  segment: {
+    position: 'absolute',
+    height: LINE_WIDTH,
+    borderRadius: LINE_WIDTH / 2,
+    backgroundColor: SIGNATURE_INK,
+  },
+  dot: {
+    position: 'absolute',
+    width: LINE_WIDTH,
+    height: LINE_WIDTH,
+    borderRadius: LINE_WIDTH / 2,
+    backgroundColor: SIGNATURE_INK,
+  },
+  clear: { alignSelf: 'flex-start', paddingVertical: 4 },
+})

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,20 @@
+/** The native checkout UI kit — themeable provider + primitives. */
+export * from './theme'
+export {
+  CheckoutProvider,
+  CheckoutThemeProvider,
+  useCheckoutContext,
+  useCheckoutValidation,
+  useTheme,
+  type CheckoutProviderProps,
+  type CheckoutThemeProviderProps,
+} from './CheckoutProvider'
+export * from './primitives'
+export * from './Frozen'
+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,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
+}