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

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

@@ -8,6 +8,7 @@ export {
   type CheckoutProviderProps,
 } 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,
   })