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

package/src/ui/ProviderPages.tsx

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react'
+import {
+  ActivityIndicator,
+  Linking,
+  Modal,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  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'
+import { resolveTheme } from './theme'
+
+const hasUnsafeNativeUriCharacters = (uri: string): boolean => {
+  for (const character of uri) {
+    const code = character.charCodeAt(0)
+    if (code <= 0x20 || code === 0x7f || character === '\\') return true
+  }
+  return false
+}
+
+/** Reject unsupported initial URI sources before WebView's native load path.
+ * Hostless sources can reach WKWebView.loadFileURL before navigation policy runs. */
+const secureInitialUri = (uri: string): boolean => {
+  // URL parsers normalize scheme-only/slash variants that NSURL can treat as
+  // hostless file sources. Require the original string's HTTPS authority.
+  if (hasUnsafeNativeUriCharacters(uri)) return false
+  if (!/^https:\/\/[^/?#\s\\]+(?:[/?#][^\s\\]*)?$/i.test(uri)) return false
+  try {
+    const url = new URL(uri)
+    return (
+      url.protocol === 'https:' && Boolean(url.hostname) && !url.username && !url.password
+    )
+  } catch {
+    return false
+  }
+}
+
+/** Preserve provider app links without handing their hostless URL to WKWebView. */
+const externalInitialUri = (uri: string): boolean => {
+  if (hasUnsafeNativeUriCharacters(uri)) return false
+  const match = /^([a-z][a-z\d+.-]*):.+$/i.exec(uri)
+  return Boolean(
+    match &&
+      !['http', 'https', 'about', 'file', 'javascript', 'data', 'blob'].includes(
+        match[1].toLowerCase()
+      )
+  )
+}
+
+/** 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 backdrop = resolveTheme({ colorScheme: theme.colorScheme }).background
+  const externalUri =
+    pending.request.uri && externalInitialUri(pending.request.uri)
+      ? pending.request.uri
+      : null
+  const sourceError =
+    pending.request.uri && !secureInitialUri(pending.request.uri) && !externalUri
+      ? 'This payment page could not be opened securely.'
+      : ''
+  const [error, setError] = useState('')
+  const displayedError = sourceError || error
+  const [reload, setReload] = useState(0)
+  useEffect(() => {
+    if (!externalUri) return
+    let active = true
+    void Linking.openURL(externalUri).catch(() => {
+      if (active)
+        setError(
+          'Unable to open this payment app. Close this page to return to checkout and check the payment status.'
+        )
+    })
+    return () => {
+      active = false
+    }
+  }, [externalUri, reload])
+  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}
+    >
+      <View style={[styles.root, { backgroundColor: backdrop }]}>
+        <SafeAreaView style={[styles.root, { backgroundColor: theme.background }]}>
+          <View style={styles.toolbar}>
+            <Button variant="ghost" onPress={close}>
+              Close payment page
+            </Button>
+          </View>
+          {displayedError ? (
+            <View style={styles.failure}>
+              <ErrorText>{displayedError}</ErrorText>
+              {!sourceError ? (
+                <Button
+                  onPress={() => {
+                    setError('')
+                    setReload((value) => value + 1)
+                  }}
+                >
+                  Try again
+                </Button>
+              ) : null}
+            </View>
+          ) : externalUri ? (
+            <View style={styles.external}>
+              <ActivityIndicator color={theme.accent} />
+              <Text style={{ color: theme.text, textAlign: 'center' }}>
+                Complete payment in your payment app, then return here.
+              </Text>
+            </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. Close this page to return to checkout and check the payment status.'
+                  )
+                )
+                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>
+      </View>
+    </Modal>
+  )
+}
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  toolbar: { padding: 12 },
+  webview: { flex: 1 },
+  external: {
+    flex: 1,
+    padding: 24,
+    gap: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  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,15 +35,19 @@ 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
   // minimum, then steps up to the cap — mirroring the web dropdown's option grid
   // (0, lo, lo + step, …) so a min-2 type goes 0 → 2 → 3, never 0 → 1.
   const lo = Math.max(1, min)
-  const cap = Math.min(max, 50)
+  const limit = Math.min(max, 50)
+  const cap = limit < lo ? 0 : lo + Math.floor((limit - lo) / step) * step
   const atZero = value <= 0
   const atCap = value >= cap
 
@@ -50,7 +61,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)

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/index.ts

@@ -2,12 +2,15 @@
 export * from './theme'
 export {
   CheckoutProvider,
+  CheckoutThemeProvider,
   useCheckoutContext,
   useCheckoutValidation,
   useTheme,
   type CheckoutProviderProps,
+  type CheckoutThemeProviderProps,
 } from './CheckoutProvider'
 export * from './primitives'
+export * from './Frozen'
 export * from './Field'
 export * from './Select'
 export * from './QuantitySelect'

package/src/ui/primitives.tsx

@@ -17,6 +17,7 @@ import {
 
 import { useTheme } from './CheckoutProvider'
 import type { ResolvedTheme } from './theme'
+import { useFrozen } from './Frozen'
 
 /** Small spinner. */
 export const Loader: FC<{ size?: 'small' | 'large'; color?: string }> = ({
@@ -79,7 +80,16 @@ export const MutedText: FC<{ children: ReactNode; style?: StyleProp<TextStyle> }
 export const ErrorText: FC<{ children: ReactNode }> = ({ children }) => {
   const theme = useTheme()
   const s = useStyles(theme)
-  return <Text style={s.errorText}>{children}</Text>
+  // Announced when it appears, like role="alert" on web.
+  return (
+    <Text
+      style={s.errorText}
+      accessibilityRole="alert"
+      accessibilityLiveRegion="assertive"
+    >
+      {children}
+    </Text>
+  )
 }
 
 export interface ButtonProps {
@@ -99,7 +109,8 @@ export const Button: FC<ButtonProps> = ({
 }) => {
   const theme = useTheme()
   const s = useStyles(theme)
-  const isDisabled = disabled || loading
+  const frozen = useFrozen()
+  const isDisabled = disabled || loading || frozen
   const ghost = variant === 'ghost'
   return (
     <Pressable

package/src/ui/useAccountT.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react'
+import {
+  createTranslator,
+  resolveLocale,
+  translateAccountMessage,
+  type TranslateVars,
+} from 'tf-checkout-shared'
+
+export const useAccountT = (locale?: string) => {
+  const translate = useMemo(
+    () => createTranslator({ locale: resolveLocale(locale) }),
+    [locale]
+  )
+  return (english: string, vars?: TranslateVars) =>
+    translateAccountMessage(translate, english, vars)
+}

package/src/useCheckout.ts

@@ -18,6 +18,7 @@ import {
   type UseCheckout,
 } from 'tf-checkout-shared'
 
+import { claimDefaultCardField } from './CardInput'
 import { rnConfirmer, rnPorts } from './instance'
 
 export interface UseCheckoutOptions {
@@ -30,6 +31,7 @@ export interface UseCheckoutOptions {
 
 export const useCheckout = (opts: UseCheckoutOptions = {}): UseCheckout =>
   useSharedCheckout({
-    ports: { confirmer: rnConfirmer, ...rnPorts, ...opts.ports },
+    // A Pay without its own claim uses the default ticket field (`checkout`).
+    ports: { confirmer: rnConfirmer, ...rnPorts, claimDefaultCardField, ...opts.ports },
     options: opts.options,
   })