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

package/src/ui/Select.tsx

@@ -0,0 +1,154 @@
+/**
+ * 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'
+import { useFrozen } from './Frozen'
+
+export interface SelectOption<T = string> {
+  label: string
+  value: T
+}
+
+export function Select<T = string>({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select…',
+  invalid = false,
+  disabled: disabledProp = false,
+}: {
+  value: T | null | undefined
+  onChange: (value: T) => void
+  options: SelectOption<T>[]
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+}) {
+  const frozen = useFrozen()
+  const disabled = disabledProp || frozen
+  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/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,18 @@
+/** 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 './Frozen'
+export * from './Field'
+export * from './Select'
+export * from './QuantitySelect'
+export * from './Timer'
+export * from './TimerBanner'
+export * from './PaymentMethods'
+export * from './InstallmentPicker'