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

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,176 @@
+/**
+ * `<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,
+  type CheckoutImagePicker,
+} 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 ImagePickerCtx = createContext<CheckoutImagePicker | undefined>(undefined)
+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 {
+  /** Host-owned OS photo picker. Return raw base64; the shared field validates it. */
+  pickImage?: CheckoutImagePicker
+  /** 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
+}
+
+export interface CheckoutThemeProviderProps {
+  theme?: CheckoutTheme
+  children: ReactNode
+}
+
+/** Retheme standalone SDK screens without binding checkout or query state. */
+export const CheckoutThemeProvider: FC<CheckoutThemeProviderProps> = ({ theme, children }) => {
+  const resolved = useMemo(() => resolveTheme(theme), [theme])
+  return <ThemeCtx.Provider value={resolved}>{children}</ThemeCtx.Provider>
+}
+
+/** The context boundary — given a resolved checkout instance + theme. */
+const CheckoutRoot: FC<{
+  checkout: UseCheckout
+  pickImage?: CheckoutImagePicker
+  theme?: CheckoutTheme
+  children: ReactNode
+}> = ({ checkout, theme, pickImage, children }) => {
+  const inheritedPicker = useContext(ImagePickerCtx)
+  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}>
+        <ImagePickerCtx.Provider value={pickImage ?? inheritedPicker}>
+          <ValidationCtx.Provider value={validation}>{children}</ValidationCtx.Provider>
+        </ImagePickerCtx.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)
+export const useCheckoutImagePicker = () => useContext(ImagePickerCtx)
+
+/** 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,212 @@
+/**
+ * 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 { Image, View } from 'react-native'
+
+import type {
+  CustomFieldValues,
+  EventCustomField,
+  EventCustomFieldGroup,
+} from 'tf-checkout-shared'
+import { hooks, ticketFieldsFor } from 'tf-checkout-shared'
+
+import { Checkbox, Field, Input } from './Field'
+import { Button, ErrorText, MutedText } from './primitives'
+import { useCheckoutImagePicker } from './CheckoutProvider'
+import { useFrozen } from './Frozen'
+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
+}
+
+const ImageField: FC<CustomFieldInputProps> = ({ field, value, onChange, error }) => {
+  const pick = useCheckoutImagePicker()
+  const frozen = useFrozen()
+  const image = hooks.useCheckoutImageField({
+    value: asString(value),
+    onChange,
+    pick,
+    identity: String(field.id),
+    disabled: frozen,
+  })
+  return (
+    <Field label={field.label} required={field.required} error={image.error ?? error}>
+      {field.description ? <MutedText>{field.description}</MutedText> : null}
+      {image.preview ? (
+        <Image
+          source={{ uri: image.preview }}
+          accessibilityLabel={`${field.label} selected image`}
+          style={{ width: 160, height: 120, resizeMode: 'contain' }}
+        />
+      ) : null}
+      {image.hasImage && !image.preview ? (
+        <MutedText>Image already provided.</MutedText>
+      ) : null}
+      <Button onPress={() => void image.select()} loading={image.busy} disabled={!pick}>
+        {image.hasImage ? 'Replace image' : 'Choose image'}
+      </Button>
+      {!pick ? (
+        <ErrorText>
+          Photo selection is unavailable. Please contact the checkout host.
+        </ErrorText>
+      ) : null}
+      {image.hasImage ? (
+        <Button variant="ghost" onPress={image.remove}>
+          Remove image
+        </Button>
+      ) : null}
+      <MutedText>JPEG, PNG, GIF or WebP. Up to 2 MiB and 4096 pixels per side.</MutedText>
+    </Field>
+  )
+}
+
+/** 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':
+      return <ImageField field={field} value={value} onChange={onChange} error={error} />
+    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; conditional requiredness remains server-authoritative. */
+export { customFieldsComplete } from 'tf-checkout-shared'