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

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

@@ -0,0 +1,128 @@
+/**
+ * `<QuantitySelect>` — a compact ± stepper for choosing a quantity. The RN
+ * analogue of the web `QuantitySelect` (a 0…max dropdown); native has no DOM
+ * `<select>`, so this reuses the stepper look the native ticket screen used
+ * (minus / value / plus). Same API as the web control:
+ * `{ value, onChange, min, max, step, disabled }`.
+ */
+import React, { useMemo, type FC } from 'react'
+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
+  onChange: (value: number) => void
+  /** Minimum purchasable quantity when buying (0 = none is always allowed). */
+  min?: number
+  max?: number
+  /** 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> = ({
+  value,
+  onChange,
+  min = 0,
+  max = 10,
+  step = 1,
+  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 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
+
+  const dec = () => {
+    if (disabled) return
+    onChange(value <= lo ? 0 : Math.max(lo, value - step))
+  }
+  const inc = () => {
+    if (disabled) return
+    onChange(value === 0 ? Math.min(cap, lo) : Math.min(cap, value + step))
+  }
+
+  return (
+    <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"
+        disabled={disabled || atZero}
+        onPress={dec}
+        style={[s.btn, (disabled || atZero) && s.btnDisabled]}
+      >
+        <Text style={s.glyph}>−</Text>
+      </Pressable>
+      <Text style={s.value}>{value}</Text>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Add one"
+        disabled={disabled || atCap}
+        onPress={inc}
+        style={[s.btn, (disabled || atCap) && s.btnDisabled]}
+      >
+        <Text style={s.glyph}>+</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const useQuantityStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        stepper: { flexDirection: 'row', alignItems: 'center', gap: 14 },
+        btn: {
+          width: 36,
+          height: 36,
+          borderRadius: 18,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        btnDisabled: { opacity: 0.4 },
+        glyph: { color: theme.text, fontSize: 20, fontWeight: '600', lineHeight: 22 },
+        value: {
+          minWidth: 24,
+          textAlign: 'center',
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )

package/src/ui/Select.tsx

@@ -0,0 +1,154 @@
+/**
+ * Native `<Select/>` — the RN analogue of the web `Field` `Select`. There is no
+ * DOM `<select>` on native, so this is a themed pressable that opens a modal
+ * list of options. Generic over the option value so callers keep type-safety
+ * (country ids, gender codes, currency codes, ISO dates, …).
+ */
+import React, { useMemo, useState } from 'react'
+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
+  value: T
+}
+
+export function Select<T = string>({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select…',
+  invalid = false,
+  disabled: disabledProp = false,
+}: {
+  value: T | null | undefined
+  onChange: (value: T) => void
+  options: SelectOption<T>[]
+  placeholder?: string
+  invalid?: boolean
+  disabled?: boolean
+}) {
+  const frozen = useFrozen()
+  const disabled = disabledProp || frozen
+  const theme = useTheme()
+  const s = useSelectStyles(theme)
+  const [open, setOpen] = useState(false)
+
+  const selected = options.find((o) => o.value === value)
+
+  return (
+    <>
+      <Pressable
+        accessibilityRole="button"
+        disabled={disabled}
+        onPress={() => setOpen(true)}
+        style={[s.control, invalid && s.controlInvalid, disabled && s.controlDisabled]}
+      >
+        <Text style={[s.value, !selected && s.placeholder]} numberOfLines={1}>
+          {selected ? selected.label : placeholder}
+        </Text>
+        <Text style={s.chevron}>▾</Text>
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setOpen(false)}
+      >
+        <Pressable style={s.backdrop} onPress={() => setOpen(false)}>
+          <Pressable style={s.sheet} onPress={() => {}}>
+            <FlatList
+              data={options}
+              keyExtractor={(item, i) => `${String(item.value)}:${i}`}
+              keyboardShouldPersistTaps="handled"
+              renderItem={({ item }) => {
+                const isSelected = item.value === value
+                return (
+                  <Pressable
+                    style={s.option}
+                    onPress={() => {
+                      onChange(item.value)
+                      setOpen(false)
+                    }}
+                  >
+                    <Text style={[s.optionLabel, isSelected && s.optionLabelSelected]}>
+                      {item.label}
+                    </Text>
+                    {isSelected ? <Text style={s.optionCheck}>✓</Text> : null}
+                  </Pressable>
+                )
+              }}
+              ItemSeparatorComponent={() => <View style={s.sep} />}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </>
+  )
+}
+
+const useSelectStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        control: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          paddingHorizontal: 12,
+          paddingVertical: 12,
+          backgroundColor: theme.surface,
+          gap: 8,
+        },
+        controlInvalid: { borderColor: theme.error },
+        controlDisabled: { backgroundColor: theme.surfaceMuted },
+        value: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        placeholder: { color: theme.muted },
+        chevron: { color: theme.muted, fontSize: theme.fontSize },
+        backdrop: {
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.4)',
+          justifyContent: 'flex-end',
+        },
+        sheet: {
+          backgroundColor: theme.surface,
+          borderTopLeftRadius: theme.radiusCard,
+          borderTopRightRadius: theme.radiusCard,
+          maxHeight: '70%',
+          paddingVertical: 8,
+        },
+        option: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          paddingHorizontal: 20,
+          paddingVertical: 14,
+          gap: 12,
+        },
+        optionLabel: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        optionLabelSelected: { color: theme.accent, fontWeight: '700' },
+        optionCheck: { color: theme.accent, fontSize: theme.fontSize, fontWeight: '700' },
+        sep: {
+          height: StyleSheet.hairlineWidth,
+          backgroundColor: theme.border,
+          marginHorizontal: 20,
+        },
+      }),
+    [theme]
+  )