tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.11

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

@@ -1,15 +1,14 @@
 /**
- * React Native storage adapter for the SDK's token/session store.
+ * React Native storage adapter for the SDK's persisted session credentials.
  *
- * The shared transport reads/writes tokens through a SYNCHRONOUS `StorageAdapter`
- * (see tf-checkout-shared `client/storage.ts`). Web hands it a `localStorage`
- * adapter; the native side needs a synchronous, persisted store so the buyer's
- * bearer session survives an app restart. `react-native-mmkv` is exactly that —
- * synchronous get/set/delete backed by native MMKV — so we wrap it here.
+ * 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.
  *
- * Unlike web, native has no session cookie: the bearer token IS the session, so
- * `configureCheckout` defaults to this persisted adapter (never in-memory) so a
- * signed-in buyer stays signed in between launches.
+ * 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'
 

package/src/ui/CheckoutProvider.tsx

@@ -24,14 +24,21 @@ import React, {
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import type { UseCheckout } from 'tf-checkout-shared'
+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
@@ -50,6 +57,10 @@ const getQueryClient = (): QueryClient => {
 }
 
 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
@@ -63,12 +74,25 @@ export interface CheckoutProviderProps {
   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, children }) => {
+}> = ({ checkout, theme, pickImage, children }) => {
+  const inheritedPicker = useContext(ImagePickerCtx)
   const [attempt, setAttempt] = useState(0)
   const requestValidation = useCallback(() => setAttempt((n) => n + 1), [])
   const validation = useMemo(
@@ -80,7 +104,9 @@ const CheckoutRoot: FC<{
   return (
     <CheckoutCtx.Provider value={checkout}>
       <ThemeCtx.Provider value={resolved}>
-        <ValidationCtx.Provider value={validation}>{children}</ValidationCtx.Provider>
+        <ImagePickerCtx.Provider value={pickImage ?? inheritedPicker}>
+          <ValidationCtx.Provider value={validation}>{children}</ValidationCtx.Provider>
+        </ImagePickerCtx.Provider>
       </ThemeCtx.Provider>
     </CheckoutCtx.Provider>
   )
@@ -93,11 +119,16 @@ const SelfProvidedCheckout: FC<Omit<CheckoutProviderProps, 'value' | 'queryClien
 }) => {
   // Bridge the engine's mid-payment MSI (installments) callback to a native modal.
   const { onInstallmentOffers, picker } = useInstallmentPicker()
-  const checkout = useCheckout({ ports: { onInstallmentOffers } })
+  const { providerPage, page } = useProviderPages()
+  const checkout = useCheckout({
+    ports: { onInstallmentOffers, providerPage },
+    options: rest.options,
+  })
   return (
     <CheckoutRoot checkout={checkout} {...rest}>
       {children}
       {picker}
+      {page}
     </CheckoutRoot>
   )
 }
@@ -106,17 +137,21 @@ export const CheckoutProvider: FC<CheckoutProviderProps> = ({
   value,
   queryClient,
   ...rest
-}) => (
-  // `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 checkout={value} {...rest} />
-    ) : (
-      <SelfProvidedCheckout {...rest} />
-    )}
-  </QueryClientProvider>
-)
+}) => {
+  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 => {
@@ -129,6 +164,7 @@ export const useCheckoutContext = (): UseCheckout => {
 
 /** 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 = () => {

package/src/ui/CustomFields.tsx

@@ -12,17 +12,19 @@
  *     single-line `Input` (value parity preserved).
  */
 import React, { type FC } from 'react'
-import { View } from 'react-native'
+import { Image, View } from 'react-native'
 
 import type {
   CustomFieldValues,
   EventCustomField,
   EventCustomFieldGroup,
 } from 'tf-checkout-shared'
-import { ticketFieldsFor } from 'tf-checkout-shared'
+import { hooks, ticketFieldsFor } from 'tf-checkout-shared'
 
 import { Checkbox, Field, Input } from './Field'
-import { ErrorText, MutedText } from './primitives'
+import { Button, ErrorText, MutedText } from './primitives'
+import { useCheckoutImagePicker } from './CheckoutProvider'
+import { useFrozen } from './Frozen'
 import { Select, type SelectOption } from './Select'
 
 type FieldValue = string | string[]
@@ -39,6 +41,47 @@ export interface CustomFieldInputProps {
   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,
@@ -112,14 +155,7 @@ export const CustomFieldInput: FC<CustomFieldInputProps> = ({
         </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>
-      )
+      return <ImageField field={field} value={value} onChange={onChange} error={error} />
     default:
       // text / phone / email
       return (
@@ -172,5 +208,5 @@ export const CustomFieldGroupFields: FC<CustomFieldGroupFieldsProps> = ({
 
 /** 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). */
+ *  one rule; conditional requiredness remains server-authoritative. */
 export { customFieldsComplete } from 'tf-checkout-shared'

package/src/ui/Field.tsx

@@ -11,10 +11,12 @@ import {
   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
@@ -38,7 +40,17 @@ export const Field: FC<{
   )
 }
 
-export interface InputProps {
+export interface InputProps
+  extends Pick<
+    TextInputProps,
+    | 'textContentType'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'maxLength'
+    | 'onSubmitEditing'
+    | 'accessibilityLabel'
+    | 'multiline'
+  > {
   value: string
   onChangeText: (text: string) => void
   placeholder?: string
@@ -57,15 +69,19 @@ export const Input: FC<InputProps> = ({
   keyboardType,
   autoCapitalize = 'sentences',
   secureTextEntry,
-  editable = true,
+  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,
@@ -98,10 +114,12 @@ export const Checkbox: FC<{
 }> = ({ checked, onChange, label, invalid = false }) => {
   const theme = useTheme()
   const s = useFieldStyles(theme)
+  const frozen = useFrozen()
   return (
     <Pressable
       accessibilityRole="checkbox"
-      accessibilityState={{ checked }}
+      accessibilityState={{ checked, disabled: frozen }}
+      disabled={frozen}
       onPress={() => onChange(!checked)}
       style={s.checkboxRow}
     >

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>
+  )
+}

package/src/ui/InstallmentPicker.tsx

@@ -17,33 +17,30 @@
  * provider hook-up. Left as a provider follow-up so this slice stays scoped to
  * the payment section + this self-contained hook/modal.
  */
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import { Modal, Pressable, StyleSheet, Text, View } from 'react-native'
 
-import type { InstallmentOffer } from 'tf-checkout-shared'
+import {
+  createInstallmentChoices,
+  type InstallmentOffer,
+  type PendingInstallmentChoice,
+} from 'tf-checkout-shared'
 
 import { useTheme } from './CheckoutProvider'
 import { Button } from './primitives'
 import type { ResolvedTheme } from './theme'
 
 export const useInstallmentPicker = () => {
-  const [pending, setPending] = useState<{
-    offers: InstallmentOffer[]
-    resolve: (offer: InstallmentOffer | null) => void
-  } | null>(null)
+  const [pending, setPending] = useState<PendingInstallmentChoice | null>(null)
+  // Created once, so the port is stable (useCheckout reads ports once). It
+  // resolves when the buyer picks a plan (or declines) below.
+  const [choices] = useState(() => createInstallmentChoices(setPending))
+  // A picker that unmounts while open ends the choice, so the payment stops
+  // instead of waiting for an answer that cannot come.
+  useEffect(() => () => choices.cancel(), [choices])
+  const onInstallmentOffers = choices.ask
 
-  // Stable across renders (useCheckout reads ports once) — resolves when the
-  // buyer picks a plan (or declines) below.
-  const onInstallmentOffers = useCallback(
-    (offers: InstallmentOffer[]) =>
-      new Promise<InstallmentOffer | null>((resolve) => setPending({ offers, resolve })),
-    []
-  )
-
-  const choose = (offer: InstallmentOffer | null) => {
-    pending?.resolve(offer)
-    setPending(null)
-  }
+  const choose = (offer: InstallmentOffer | null) => pending?.choose(offer)
 
   const picker = (
     <InstallmentModal

package/src/ui/PaymentMethods.tsx

@@ -11,6 +11,7 @@ import React, { useMemo, type FC, type ReactNode } from 'react'
 import { Image, Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { useTheme } from './CheckoutProvider'
+import { useFrozen } from './Frozen'
 import { Field, Input } from './Field'
 import type { ResolvedTheme } from './theme'
 
@@ -58,6 +59,7 @@ export const PaymentMethods: FC<PaymentMethodsProps> = ({
   children,
 }) => {
   const theme = useTheme()
+  const frozen = useFrozen()
   const s = useStyles(theme)
   return (
     <View style={s.list} accessibilityRole="radiogroup">
@@ -75,8 +77,9 @@ export const PaymentMethods: FC<PaymentMethodsProps> = ({
           <View key={option.value} style={[s.row, active && s.rowActive]}>
             <Pressable
               accessibilityRole="radio"
-              accessibilityState={{ selected: active }}
-              onPress={() => onSelect(option.value)}
+              accessibilityState={{ selected: active, disabled: frozen }}
+              disabled={frozen}
+              onPress={() => { if (!frozen) onSelect(option.value) }}
               style={s.rowHead}
             >
               <View style={[s.radio, active && s.radioActive]}>
@@ -104,7 +107,7 @@ export const PaymentMethods: FC<PaymentMethodsProps> = ({
                     <Input
                       value={extraValue ?? ''}
                       onChangeText={(text) =>
-                        onExtraChange?.(
+                        !frozen && onExtraChange?.(
                           option.value,
                           option.extra === 'phoneNumber'
                             ? { phoneNumber: text }