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

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,10 +24,11 @@ import React, {
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-import type { UseCheckout } from 'tf-checkout-shared'
+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)
@@ -50,6 +51,8 @@ const getQueryClient = (): QueryClient => {
 }
 
 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
@@ -93,11 +96,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 +114,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 => {

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 }

package/src/ui/ProviderPages.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react'
+import {
+  ActivityIndicator,
+  Linking,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  View,
+} from 'react-native'
+import { WebView } from 'react-native-webview'
+import {
+  createProviderPages,
+  providerPageMatchesReturn,
+  providerPageOutcomeFromMessage,
+  type PendingProviderPage,
+} from 'tf-checkout-shared'
+import { Button, ErrorText } from './primitives'
+import { useTheme } from './CheckoutProvider'
+
+/** Native window plumbing over the same return/message contract as web. */
+export const useProviderPages = () => {
+  const [pending, setPending] = useState<PendingProviderPage | null>(null)
+  const [pages] = useState(() => createProviderPages(setPending))
+  useEffect(() => () => pages.cancel(), [pages])
+  useEffect(() => {
+    if (!pending) return
+    const subscription = Linking.addEventListener('url', ({ url }) => {
+      if (providerPageMatchesReturn(url, pending.request.returnUrlPrefix))
+        pages.settle(pending.id, { event: 'success', returnUrl: url })
+    })
+    return () => subscription.remove()
+  }, [pending, pages])
+  return {
+    providerPage: pages.open,
+    page: pending ? (
+      <ProviderPage key={pending.id} pending={pending} settle={pages.settle} />
+    ) : null,
+  }
+}
+
+const ProviderPage = ({
+  pending,
+  settle,
+}: {
+  pending: PendingProviderPage
+  settle: ReturnType<typeof createProviderPages>['settle']
+}) => {
+  const theme = useTheme()
+  const [error, setError] = useState('')
+  const [reload, setReload] = useState(0)
+  const close = () => settle(pending.id, { event: 'dismiss' })
+  const source = pending.request.uri
+    ? { uri: pending.request.uri }
+    : { html: pending.request.html ?? '', baseUrl: pending.request.baseUrl }
+  return (
+    <Modal
+      visible
+      animationType="slide"
+      presentationStyle="fullScreen"
+      onRequestClose={close}
+    >
+      <SafeAreaView style={[styles.root, { backgroundColor: theme.background }]}>
+        <View style={styles.toolbar}>
+          <Button variant="ghost" onPress={close}>
+            Close payment page
+          </Button>
+        </View>
+        {error ? (
+          <View style={styles.failure}>
+            <ErrorText>{error}</ErrorText>
+            <Button
+              onPress={() => {
+                setError('')
+                setReload((value) => value + 1)
+              }}
+            >
+              Try again
+            </Button>
+          </View>
+        ) : (
+          <WebView
+            key={reload}
+            source={source}
+            style={styles.webview}
+            javaScriptEnabled
+            domStorageEnabled
+            incognito
+            sharedCookiesEnabled={false}
+            thirdPartyCookiesEnabled={false}
+            setSupportMultipleWindows={false}
+            originWhitelist={['*']}
+            startInLoadingState
+            renderLoading={() => (
+              <ActivityIndicator style={styles.loading} color={theme.accent} />
+            )}
+            onShouldStartLoadWithRequest={({ url }) => {
+              if (providerPageMatchesReturn(url, pending.request.returnUrlPrefix)) {
+                settle(pending.id, { event: 'success', returnUrl: url })
+                return false
+              }
+              if (/^(https:|about:)/i.test(url)) return true
+              if (/^(http:|javascript:|data:|file:)/i.test(url)) {
+                setError('This payment page could not be opened securely.')
+                return false
+              }
+              Linking.openURL(url).catch(() =>
+                setError(
+                  'Unable to open this payment app. Please choose another payment method.'
+                )
+              )
+              return false
+            }}
+            onMessage={({ nativeEvent }) => {
+              const outcome = providerPageOutcomeFromMessage(nativeEvent.data)
+              if (outcome) settle(pending.id, outcome)
+            }}
+            onError={() =>
+              setError(
+                'The payment page could not load. Check your connection and try again.'
+              )
+            }
+          />
+        )}
+      </SafeAreaView>
+    </Modal>
+  )
+}
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  toolbar: { padding: 12 },
+  webview: { flex: 1 },
+  failure: { padding: 24, gap: 16 },
+  loading: { ...StyleSheet.absoluteFillObject },
+})

package/src/ui/QuantitySelect.tsx

@@ -10,6 +10,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native'
 
 import { useTheme } from './CheckoutProvider'
 import type { ResolvedTheme } from './theme'
+import { useFrozen } from './Frozen'
 
 export interface QuantitySelectProps {
   value: number
@@ -20,6 +21,12 @@ export interface QuantitySelectProps {
   /** Step between quantities (the old checkout's `multiplier`). */
   step?: number
   disabled?: boolean
+  /**
+   * Accessible name, for example "Quantity of Weekend bundle". With a label
+   * the stepper is one adjustable control: a screen reader names it, reads
+   * the value and swipes up or down to change it.
+   */
+  label?: string
 }
 
 export const QuantitySelect: FC<QuantitySelectProps> = ({
@@ -28,8 +35,11 @@ export const QuantitySelect: FC<QuantitySelectProps> = ({
   min = 0,
   max = 10,
   step = 1,
-  disabled = false,
+  disabled: disabledProp = false,
+  label,
 }) => {
+  const frozen = useFrozen()
+  const disabled = disabledProp || frozen
   const theme = useTheme()
   const s = useQuantityStyles(theme)
   // 0 (buy none) is always offered; the first non-zero step honors the type's
@@ -50,7 +60,21 @@ export const QuantitySelect: FC<QuantitySelectProps> = ({
   }
 
   return (
-    <View style={s.stepper}>
+    <View
+      style={s.stepper}
+      accessible={Boolean(label)}
+      accessibilityRole={label ? 'adjustable' : undefined}
+      accessibilityLabel={label}
+      accessibilityValue={label ? { now: value, min: 0, max: cap } : undefined}
+      accessibilityState={label ? { disabled } : undefined}
+      accessibilityActions={
+        label ? [{ name: 'increment' }, { name: 'decrement' }] : undefined
+      }
+      onAccessibilityAction={(e) => {
+        if (e.nativeEvent.actionName === 'increment' && !atCap) inc()
+        if (e.nativeEvent.actionName === 'decrement' && !atZero) dec()
+      }}
+    >
       <Pressable
         accessibilityRole="button"
         accessibilityLabel="Remove one"

package/src/ui/Select.tsx

@@ -9,6 +9,7 @@ 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
@@ -21,7 +22,7 @@ export function Select<T = string>({
   options,
   placeholder = 'Select…',
   invalid = false,
-  disabled = false,
+  disabled: disabledProp = false,
 }: {
   value: T | null | undefined
   onChange: (value: T) => void
@@ -30,6 +31,8 @@ export function Select<T = string>({
   invalid?: boolean
   disabled?: boolean
 }) {
+  const frozen = useFrozen()
+  const disabled = disabledProp || frozen
   const theme = useTheme()
   const s = useSelectStyles(theme)
   const [open, setOpen] = useState(false)