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

package/src/sections/rewards/RewardsTree.tsx

@@ -0,0 +1,117 @@
+/**
+ * The referral tree, drawn with positioned `View`s.
+ *
+ * Deliberately no SVG: adding `react-native-svg` would be a new native peer for
+ * every consumer app, and a dot-and-line picture does not need one. Each dot is
+ * an absolutely-positioned circle and each link a thin, rotated view — the
+ * positions themselves are the same shared radial layout the web SVG uses, so
+ * both platforms draw the identical picture.
+ */
+import React, { useMemo, type FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import {
+  computeRadialTreeLayout,
+  isTreeRoot,
+  radialTreeEdges,
+  treeNodeId,
+  treeRootId,
+  type RewardsReferralTree,
+} from 'tf-checkout-shared'
+
+import { useTheme } from '../../ui/CheckoutProvider'
+
+export interface RewardsTreeProps {
+  tree: RewardsReferralTree
+  /** Edge length of the square the tree is drawn in. */
+  size?: number
+}
+
+/** Above this the dots overlap into a smudge on a phone screen. */
+const MAX_NODES = 120
+const DOT = 10
+const ROOT_DOT = 16
+
+export const RewardsTree: FC<RewardsTreeProps> = ({ tree, size = 260 }) => {
+  const theme = useTheme()
+  const nodes = useMemo(() => (tree?.nodes ?? []).slice(0, MAX_NODES), [tree])
+
+  const { layout, edges, rootId } = useMemo(() => {
+    // The buyer is not a node of their own tree — they are the parent the people
+    // they referred name. Looking for a parentless node finds nobody and draws a
+    // friend in the buyer's place.
+    const root = treeRootId(nodes)
+    const computed = computeRadialTreeLayout(nodes, root)
+    return { layout: computed, edges: radialTreeEdges(nodes, computed), rootId: root }
+  }, [nodes])
+
+  if (nodes.length === 0) return null
+
+  // Inset by the largest dot's radius so the outermost ring stays on canvas.
+  const inset = ROOT_DOT / 2
+  const span = size - ROOT_DOT
+  const at = (value: number) => inset + value * span
+
+  return (
+    <View style={[styles.canvas, { width: size, height: size }]}>
+      {edges.map((edge) => {
+        const x1 = at(edge.from.x)
+        const y1 = at(edge.from.y)
+        const x2 = at(edge.to.x)
+        const y2 = at(edge.to.y)
+        const length = Math.hypot(x2 - x1, y2 - y1)
+        const angle = Math.atan2(y2 - y1, x2 - x1)
+        return (
+          <View
+            key={`${edge.fromId}-${edge.toId}`}
+            style={[
+              styles.link,
+              {
+                backgroundColor: theme.border,
+                width: length,
+                left: x1,
+                top: y1,
+                // Rotate about the start point so the line runs to the child.
+                transform: [
+                  { translateX: length / 2 },
+                  { rotate: `${angle}rad` },
+                  { translateX: -length / 2 },
+                ],
+              },
+            ]}
+          />
+        )
+      })}
+      {nodes.map((node) => {
+        const point = layout[treeNodeId(node)]
+        if (!point) return null
+        const isRoot = isTreeRoot(node, rootId)
+        const diameter = isRoot ? ROOT_DOT : DOT
+        return (
+          <View
+            key={treeNodeId(node)}
+            accessibilityLabel={node.public_name}
+            style={[
+              styles.dot,
+              {
+                width: diameter,
+                height: diameter,
+                borderRadius: diameter / 2,
+                backgroundColor: isRoot ? theme.text : theme.accent,
+                opacity: isRoot ? 1 : 0.75,
+                left: at(point.x) - diameter / 2,
+                top: at(point.y) - diameter / 2,
+              },
+            ]}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  canvas: { alignSelf: 'center' },
+  link: { position: 'absolute', height: 1 },
+  dot: { position: 'absolute' },
+})

package/src/storage.ts

@@ -0,0 +1,26 @@
+/**
+ * React Native storage adapter for the SDK's persisted session credentials.
+ *
+ * The shared transport uses a SYNCHRONOUS `StorageAdapter` (see shared
+ * `client/storage.ts`). MMKV 3 provides persisted get/set/delete operations,
+ * keeping the SDK's session credentials available across app restarts.
+ *
+ * Default native cookie auth stores its ecommerce ticket here and sends it in
+ * request headers; the ambient OS cookie jar stays disabled. Other configured
+ * SDK token credentials use this same adapter. Hosts may inject another
+ * synchronous adapter when configuring checkout.
+ */
+import { MMKV } from 'react-native-mmkv'
+
+import type { StorageAdapter } from 'tf-checkout-shared'
+
+/** Build a `StorageAdapter` backed by an MMKV instance (its own `id` namespace
+ *  so it never collides with the host app's MMKV data). */
+export const createMmkvStorage = (id = 'tf-checkout'): StorageAdapter => {
+  const mmkv = new MMKV({ id })
+  return {
+    getItem: (key) => mmkv.getString(key) ?? null,
+    setItem: (key, value) => mmkv.set(key, value),
+    removeItem: (key) => mmkv.delete(key),
+  }
+}

package/src/ui/CheckoutProvider.tsx

@@ -0,0 +1,152 @@
+/**
+ * `<CheckoutProvider>` — wrap your checkout UI once. The RN analogue of the web
+ * provider. It:
+ *   - provides the checkout to every section via context (so `<Tickets/>`,
+ *     `<Payment/>`, … just read it). By default it runs `useCheckout()` (the
+ *     native-wired engine: stripe-react-native + shared store); pass your own
+ *     instance as `value` to bring your own.
+ *   - resolves the `theme` token set and exposes it via `useTheme()`.
+ *   - coordinates submit-attempt validation across separately composed sections.
+ *   - bundles a `QueryClientProvider` (the shared react-query hooks need one).
+ *
+ * Unlike web there are no CSS variables and no DOM scroll-to-invalid — sections
+ * read `attempt` to reveal their own errors on a failed submit.
+ */
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import { hooks, type UseCheckout, type CheckoutOptions } from 'tf-checkout-shared'
+
+import { useCheckout } from '../useCheckout'
+import { useInstallmentPicker } from './InstallmentPicker'
+import { useProviderPages } from './ProviderPages'
+import { resolveTheme, type CheckoutTheme, type ResolvedTheme } from './theme'
+
+const CheckoutCtx = createContext<UseCheckout | null>(null)
+const ThemeCtx = createContext<ResolvedTheme>(resolveTheme())
+const ValidationCtx = createContext<{
+  attempt: number
+  requestValidation: () => void
+} | null>(null)
+
+/** One shared react-query client for the whole checkout — created lazily so it
+ *  survives across mounts (matching the app-wide engine store singleton). */
+let sharedQueryClient: QueryClient | null = null
+const getQueryClient = (): QueryClient => {
+  if (!sharedQueryClient) {
+    sharedQueryClient = new QueryClient({
+      defaultOptions: { queries: { retry: 1, staleTime: 60_000 } },
+    })
+  }
+  return sharedQueryClient
+}
+
+export interface CheckoutProviderProps {
+  /** Wallet/redirect settings for the provider-owned native engine. */
+  options?: CheckoutOptions
+  /**
+   * Bring your own checkout instance (from a top-level `useCheckout()`). Omit
+   * and the provider runs `useCheckout()` itself. Either way the sections read
+   * the same shared cart (the engine store is a module singleton).
+   */
+  value?: UseCheckout
+  /** Retheme via design tokens. */
+  theme?: CheckoutTheme
+  /** Provide your own react-query client instead of the bundled shared one. */
+  queryClient?: QueryClient
+  children: ReactNode
+}
+
+/** The context boundary — given a resolved checkout instance + theme. */
+const CheckoutRoot: FC<{
+  checkout: UseCheckout
+  theme?: CheckoutTheme
+  children: ReactNode
+}> = ({ checkout, theme, children }) => {
+  const [attempt, setAttempt] = useState(0)
+  const requestValidation = useCallback(() => setAttempt((n) => n + 1), [])
+  const validation = useMemo(
+    () => ({ attempt, requestValidation }),
+    [attempt, requestValidation]
+  )
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+
+  return (
+    <CheckoutCtx.Provider value={checkout}>
+      <ThemeCtx.Provider value={resolved}>
+        <ValidationCtx.Provider value={validation}>{children}</ValidationCtx.Provider>
+      </ThemeCtx.Provider>
+    </CheckoutCtx.Provider>
+  )
+}
+
+/** Default path: the provider owns the `useCheckout()` call. */
+const SelfProvidedCheckout: FC<Omit<CheckoutProviderProps, 'value' | 'queryClient'>> = ({
+  children,
+  ...rest
+}) => {
+  // Bridge the engine's mid-payment MSI (installments) callback to a native modal.
+  const { onInstallmentOffers, picker } = useInstallmentPicker()
+  const { providerPage, page } = useProviderPages()
+  const checkout = useCheckout({
+    ports: { onInstallmentOffers, providerPage },
+    options: rest.options,
+  })
+  return (
+    <CheckoutRoot checkout={checkout} {...rest}>
+      {children}
+      {picker}
+      {page}
+    </CheckoutRoot>
+  )
+}
+
+export const CheckoutProvider: FC<CheckoutProviderProps> = ({
+  value,
+  queryClient,
+  ...rest
+}) => {
+  const session = hooks.useAppCheckoutSession()
+  const sessionKey = hooks.ticketHolderFor(value?.store ?? session.store).id
+  return (
+    // `value` present ⇒ don't call `useCheckout()` (no second binding); absent ⇒
+    // the self-providing branch owns it. The choice is static per mount.
+    <QueryClientProvider client={queryClient ?? getQueryClient()}>
+      {value ? (
+        <CheckoutRoot key={sessionKey} checkout={value} {...rest} />
+      ) : (
+        <SelfProvidedCheckout key={sessionKey} {...rest} />
+      )}
+    </QueryClientProvider>
+  )
+}
+
+/** Read the shared checkout inside any component under `<CheckoutProvider>`. */
+export const useCheckoutContext = (): UseCheckout => {
+  const ctx = useContext(CheckoutCtx)
+  if (!ctx) {
+    throw new Error('useCheckoutContext must be used within <CheckoutProvider>.')
+  }
+  return ctx
+}
+
+/** Read the resolved theme tokens. */
+export const useTheme = (): ResolvedTheme => useContext(ThemeCtx)
+
+/** Coordinate submit-attempt validation across separately composed sections. */
+export const useCheckoutValidation = () => {
+  const ctx = useContext(ValidationCtx)
+  if (!ctx) {
+    throw new Error('useCheckoutValidation must be used within <CheckoutProvider>.')
+  }
+  return ctx
+}

package/src/ui/CustomFields.tsx

@@ -0,0 +1,176 @@
+/**
+ * Data-driven custom fields — the RN analogue of the web `ui/CustomFields`. The
+ * event describes what to collect (`EventCustomField[]`, order- / ticket- /
+ * add-on-scoped); these render it and report values back. No per-brand form code:
+ * pass the group, hold the values.
+ *
+ * Native adaptations vs web:
+ *   - `<select>` and `radio` (single choice) both render as the native `Select`
+ *     sheet — there is no native radio primitive.
+ *   - `select_multi` renders a column of native `Checkbox` rows.
+ *   - there is no multiline `Textarea` primitive, so `textarea` falls back to a
+ *     single-line `Input` (value parity preserved).
+ */
+import React, { type FC } from 'react'
+import { View } from 'react-native'
+
+import type {
+  CustomFieldValues,
+  EventCustomField,
+  EventCustomFieldGroup,
+} from 'tf-checkout-shared'
+import { ticketFieldsFor } from 'tf-checkout-shared'
+
+import { Checkbox, Field, Input } from './Field'
+import { ErrorText, MutedText } from './primitives'
+import { Select, type SelectOption } from './Select'
+
+type FieldValue = string | string[]
+
+const asString = (v: FieldValue | undefined): string =>
+  Array.isArray(v) ? (v[0] ?? '') : (v ?? '')
+const asArray = (v: FieldValue | undefined): string[] =>
+  Array.isArray(v) ? v : v ? [v] : []
+
+export interface CustomFieldInputProps {
+  field: EventCustomField
+  value: FieldValue | undefined
+  onChange: (value: FieldValue) => void
+  error?: string
+}
+
+/** Render one custom field by its declared `type`. */
+export const CustomFieldInput: FC<CustomFieldInputProps> = ({
+  field,
+  value,
+  onChange,
+  error,
+}) => {
+  const invalid = error !== undefined && error !== null
+  const desc = field.description ? <MutedText>{field.description}</MutedText> : null
+
+  switch (field.type) {
+    case 'textarea':
+      // Native adaptation: no multiline Textarea primitive — single-line Input.
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Input value={asString(value)} onChangeText={onChange} invalid={invalid} />
+        </Field>
+      )
+    case 'select':
+    case 'radio': {
+      // Native adaptation: web renders radio inline; both single-choice types use
+      // the `Select` sheet here (no native radio primitive).
+      const options: SelectOption[] = field.options.map((o) => ({
+        label: o.name,
+        value: o.value,
+      }))
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Select
+            value={asString(value) || undefined}
+            onChange={onChange}
+            options={options}
+            placeholder="— select —"
+            invalid={invalid}
+          />
+        </Field>
+      )
+    }
+    case 'select_multi': {
+      const picked = asArray(value)
+      const toggle = (v: string, on: boolean) =>
+        onChange(on ? [...picked, v] : picked.filter((x) => x !== v))
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <View style={{ gap: 8 }}>
+            {field.options.map((o) => (
+              <Checkbox
+                key={o.id}
+                checked={picked.includes(o.value)}
+                onChange={(on) => toggle(o.value, on)}
+                label={o.name}
+              />
+            ))}
+          </View>
+        </Field>
+      )
+    }
+    case 'checkbox':
+      return (
+        <View style={{ gap: 6 }}>
+          <Checkbox
+            checked={asString(value) === '1'}
+            onChange={(on) => onChange(on ? '1' : '')}
+            label={`${field.label}${field.required ? ' *' : ''}`}
+            invalid={invalid}
+          />
+          {error !== undefined && error !== null ? <ErrorText>{error}</ErrorText> : null}
+        </View>
+      )
+    case 'image':
+      // File capture needs an upload rail the SDK doesn't own yet — surface it
+      // rather than silently dropping a required field.
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <MutedText>Image upload isn’t supported in this build.</MutedText>
+        </Field>
+      )
+    default:
+      // text / phone / email
+      return (
+        <Field label={field.label} required={field.required} error={error}>
+          {desc}
+          <Input
+            value={asString(value)}
+            onChangeText={onChange}
+            keyboardType={
+              field.type === 'email'
+                ? 'email-address'
+                : field.type === 'phone'
+                  ? 'phone-pad'
+                  : 'default'
+            }
+            autoCapitalize={field.type === 'email' ? 'none' : 'sentences'}
+            invalid={invalid}
+          />
+        </Field>
+      )
+  }
+}
+
+export interface CustomFieldGroupFieldsProps {
+  group: EventCustomFieldGroup
+  values: CustomFieldValues
+  onChange: (name: string, value: FieldValue) => void
+  /** Restrict to fields scoped to this holder's ticket type (ticket groups). */
+  ticketTypeId?: string
+}
+
+/** Render every field in a group, wired to a values map. */
+export const CustomFieldGroupFields: FC<CustomFieldGroupFieldsProps> = ({
+  group,
+  values,
+  onChange,
+  ticketTypeId,
+}) => (
+  <>
+    {ticketFieldsFor(group.fields, ticketTypeId).map((f) => (
+      <CustomFieldInput
+        key={f.id}
+        field={f}
+        value={values[f.name]}
+        onChange={(v) => onChange(f.name, v)}
+      />
+    ))}
+  </>
+)
+
+/** True when every required field in the group has a non-empty value.
+ *  Re-exported from the SDK so web, native and the engine preflight all apply
+ *  one rule (including its "image uploads are server-authoritative" carve-out). */
+export { customFieldsComplete } from 'tf-checkout-shared'

package/src/ui/Field.tsx

@@ -0,0 +1,189 @@
+/**
+ * Native form controls — the RN analogues of the web `Field` / `Input` /
+ * `Checkbox`. Theme-aware; `Field` renders a label + the control + an inline
+ * error, and marks itself invalid so submit-attempt validation can reveal it.
+ */
+import React, { useMemo, useState, type FC, type ReactNode } from 'react'
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type KeyboardTypeOptions,
+  type TextInputProps,
+} from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+import { useFrozen } from './Frozen'
+
+export const Field: FC<{
+  label?: string
+  error?: string
+  required?: boolean
+  children: ReactNode
+}> = ({ label, error, required, children }) => {
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  return (
+    <View style={s.field}>
+      {label ? (
+        <Text style={s.label}>
+          {label}
+          {required ? <Text style={s.required}> *</Text> : null}
+        </Text>
+      ) : null}
+      {children}
+      {error ? <Text style={s.error}>{error}</Text> : null}
+    </View>
+  )
+}
+
+export interface InputProps
+  extends Pick<
+    TextInputProps,
+    | 'textContentType'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'maxLength'
+    | 'onSubmitEditing'
+    | 'accessibilityLabel'
+    | 'multiline'
+  > {
+  value: string
+  onChangeText: (text: string) => void
+  placeholder?: string
+  keyboardType?: KeyboardTypeOptions
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+  secureTextEntry?: boolean
+  editable?: boolean
+  invalid?: boolean
+  onBlur?: () => void
+}
+
+export const Input: FC<InputProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  keyboardType,
+  autoCapitalize = 'sentences',
+  secureTextEntry,
+  editable: editableProp = true,
+  invalid = false,
+  onBlur,
+  ...nativeProps
+}) => {
+  const frozen = useFrozen()
+  const editable = editableProp && !frozen
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  const [focused, setFocused] = useState(false)
+  return (
+    <TextInput
+      {...nativeProps}
+      style={[
+        s.input,
+        focused && s.inputFocused,
+        invalid && s.inputInvalid,
+        !editable && s.inputDisabled,
+      ]}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      placeholderTextColor={theme.muted}
+      keyboardType={keyboardType}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={false}
+      secureTextEntry={secureTextEntry}
+      editable={editable}
+      onFocus={() => setFocused(true)}
+      onBlur={() => {
+        setFocused(false)
+        onBlur?.()
+      }}
+    />
+  )
+}
+
+export const Checkbox: FC<{
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: ReactNode
+  invalid?: boolean
+}> = ({ checked, onChange, label, invalid = false }) => {
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  const frozen = useFrozen()
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled: frozen }}
+      disabled={frozen}
+      onPress={() => onChange(!checked)}
+      style={s.checkboxRow}
+    >
+      <View
+        style={[
+          s.checkboxBox,
+          checked && s.checkboxBoxChecked,
+          invalid && !checked && s.checkboxBoxInvalid,
+        ]}
+      >
+        {checked ? <Text style={s.checkboxMark}>✓</Text> : null}
+      </View>
+      {typeof label === 'string' ? <Text style={s.checkboxLabel}>{label}</Text> : label}
+    </Pressable>
+  )
+}
+
+const useFieldStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        field: { gap: 6 },
+        label: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        required: { color: theme.error },
+        error: { color: theme.error, fontSize: theme.fontSize - 3 },
+        input: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          paddingHorizontal: 12,
+          paddingVertical: 12,
+          color: theme.text,
+          fontSize: theme.fontSize,
+          backgroundColor: theme.surface,
+          fontFamily: theme.fontFamily,
+        },
+        inputFocused: { borderColor: theme.accent },
+        inputInvalid: { borderColor: theme.error },
+        inputDisabled: { backgroundColor: theme.surfaceMuted, color: theme.muted },
+        checkboxRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
+        checkboxBox: {
+          width: 22,
+          height: 22,
+          borderRadius: 6,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.surface,
+        },
+        checkboxBoxChecked: { backgroundColor: theme.accent, borderColor: theme.accent },
+        checkboxBoxInvalid: { borderColor: theme.error },
+        checkboxMark: { color: theme.accentContrast, fontSize: 14, fontWeight: '700' },
+        checkboxLabel: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )

package/src/ui/Frozen.tsx

@@ -0,0 +1,22 @@
+/**
+ * `FrozenFields` — the native form of a disabled `<fieldset>`: every Input,
+ * Checkbox, Select, QuantitySelect and Button inside it stops taking input
+ * while `frozen`. A section wraps its form in it while the order is placed
+ * or charged (`orderFixed`), when the engine ignores a commit.
+ */
+import React, { createContext, useContext, type FC, type ReactNode } from 'react'
+
+const FrozenContext = createContext(false)
+
+/** True inside a frozen `FrozenFields`. */
+export const useFrozen = (): boolean => useContext(FrozenContext)
+
+export const FrozenFields: FC<{ frozen?: boolean; children: ReactNode }> = ({
+  frozen = false,
+  children,
+}) => {
+  const outer = useFrozen()
+  return (
+    <FrozenContext.Provider value={outer || frozen}>{children}</FrozenContext.Provider>
+  )
+}