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

package/src/ui/InstallmentPicker.tsx

@@ -0,0 +1,155 @@
+/**
+ * MSI (meses sin intereses) picker — the RN analogue of the web
+ * `useInstallmentPicker`. Mexican card payments can be split into interest-free
+ * installments: mid-payment the engine calls the `onInstallmentOffers` port with
+ * the available plans and waits for the buyer's choice. This hook bridges that
+ * callback to a native modal — returns the port + a `picker` element to render.
+ *
+ * Wiring: like web, the provider owns this. To turn MSI on, `SelfProvidedCheckout`
+ * in `ui/CheckoutProvider.tsx` should do the same two lines the web provider does:
+ *
+ *   const { onInstallmentOffers, picker } = useInstallmentPicker()
+ *   const checkout = useCheckout({ ports: { onInstallmentOffers } })
+ *   return <CheckoutRoot checkout={checkout}>{children}{picker}</CheckoutRoot>
+ *
+ * The native `useCheckout` already accepts `ports.onInstallmentOffers` (it's part
+ * of `Omit<CheckoutPorts,'confirmer'>`), so no engine change is needed — only the
+ * 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, { useEffect, useMemo, useState } from 'react'
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native'
+
+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<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
+
+  const choose = (offer: InstallmentOffer | null) => pending?.choose(offer)
+
+  const picker = (
+    <InstallmentModal
+      offers={pending?.offers ?? null}
+      onChoose={choose}
+      onClose={() => choose(null)}
+    />
+  )
+
+  return { onInstallmentOffers, picker }
+}
+
+const InstallmentModal: React.FC<{
+  offers: InstallmentOffer[] | null
+  onChoose: (offer: InstallmentOffer | null) => void
+  onClose: () => void
+}> = ({ offers, onChoose, onClose }) => {
+  const theme = useTheme()
+  const s = useStyles(theme)
+  return (
+    <Modal
+      visible={offers !== null}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable style={s.backdrop} onPress={onClose}>
+        <Pressable style={s.box} onPress={() => {}}>
+          <Text style={s.title} accessibilityRole="header">
+            Pay in installments?
+          </Text>
+          <View style={s.list}>
+            {(offers ?? []).map((offer, i) => (
+              <Pressable
+                key={i}
+                accessibilityRole="button"
+                style={({ pressed }) => [s.option, pressed && s.optionPressed]}
+                onPress={() => onChoose(offer)}
+              >
+                <Text style={s.optionMain}>
+                  {offer.count} ×{' '}
+                  {offer.per_installment_formatted ?? offer.per_installment}
+                </Text>
+                <Text style={s.optionMeta}>
+                  {offer.total_formatted ? `${offer.total_formatted} total` : ''}
+                  {offer.diff_from_original_formatted
+                    ? ` · ${offer.diff_from_original_formatted}`
+                    : ''}
+                </Text>
+              </Pressable>
+            ))}
+          </View>
+          <Button variant="ghost" onPress={() => onChoose(null)}>
+            Pay in full instead
+          </Button>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  )
+}
+
+const useStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        backdrop: {
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.4)',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 24,
+        },
+        box: {
+          width: '100%',
+          maxWidth: 420,
+          backgroundColor: theme.surface,
+          borderRadius: theme.radiusCard,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          padding: 16,
+          gap: 12,
+        },
+        title: {
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        list: { gap: 8 },
+        option: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          paddingVertical: 12,
+          paddingHorizontal: 14,
+          gap: 2,
+        },
+        optionPressed: { borderColor: theme.accent, opacity: 0.9 },
+        optionMain: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        optionMeta: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )

package/src/ui/PaymentMethods.tsx

@@ -0,0 +1,180 @@
+/**
+ * Native payment-method radio list — the RN analogue of the web
+ * `PaymentMethods`. Presentational only: it renders the selectable rows (icon +
+ * label), slots a card field under the selected card/plan row via
+ * `children`/`inputSlotFor`, and renders the selected method's extra input
+ * (Xendit e-wallet cashtag / phone). It does NOT own the Pay button or
+ * `placeOrder` — `<Payment/>` builds the options and maps a selection back to a
+ * `placeOrder` request via the option's `id`.
+ */
+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'
+
+// The method descriptor + row shape live in the SDK so both platforms render
+// the SAME option list. Imported for local use and re-exported for consumers
+// that already import them from here.
+import type {
+  PaymentMethodId,
+  PaymentMethodOption,
+} from 'tf-checkout-shared'
+
+export type { PaymentMethodId, PaymentMethodOption }
+
+export interface PaymentMethodsProps {
+  options: PaymentMethodOption[]
+  /** Selected `option.value` (controlled). */
+  selected: string
+  onSelect: (value: string) => void
+  /** Extra-field values keyed by `option.value`. */
+  extraValues?: Record<string, { cashtag?: string; phoneNumber?: string }>
+  onExtraChange?: (
+    value: string,
+    patch: { cashtag?: string; phoneNumber?: string }
+  ) => void
+  /** Reveal required extra-field errors after the buyer attempts payment. */
+  showValidation?: boolean
+  /** Rendered under the selected row whose value === `inputSlotFor`. */
+  inputSlotFor?: string
+  children?: ReactNode
+}
+
+const EXTRA_LABEL: Record<'cashtag' | 'phoneNumber', string> = {
+  cashtag: 'Jenius $cashtag',
+  phoneNumber: 'OVO phone number',
+}
+
+export const PaymentMethods: FC<PaymentMethodsProps> = ({
+  options,
+  selected,
+  onSelect,
+  extraValues = {},
+  onExtraChange,
+  showValidation = false,
+  inputSlotFor,
+  children,
+}) => {
+  const theme = useTheme()
+  const frozen = useFrozen()
+  const s = useStyles(theme)
+  return (
+    <View style={s.list} accessibilityRole="radiogroup">
+      {options.map((option) => {
+        const active = option.value === selected
+        const extraValue =
+          option.extra === 'phoneNumber'
+            ? extraValues[option.value]?.phoneNumber
+            : extraValues[option.value]?.cashtag
+        const extraInvalid =
+          Boolean(active && option.extra && showValidation) && !extraValue?.trim()
+        const showBody =
+          active && (option.value === inputSlotFor || Boolean(option.extra))
+        return (
+          <View key={option.value} style={[s.row, active && s.rowActive]}>
+            <Pressable
+              accessibilityRole="radio"
+              accessibilityState={{ selected: active, disabled: frozen }}
+              disabled={frozen}
+              onPress={() => { if (!frozen) onSelect(option.value) }}
+              style={s.rowHead}
+            >
+              <View style={[s.radio, active && s.radioActive]}>
+                {active ? <View style={s.radioDot} /> : null}
+              </View>
+              {option.iconUrl ? (
+                <Image
+                  source={{ uri: option.iconUrl }}
+                  style={s.icon}
+                  resizeMode="contain"
+                  accessibilityIgnoresInvertColors
+                />
+              ) : null}
+              <Text style={s.rowLabel}>{option.label}</Text>
+            </Pressable>
+
+            {showBody ? (
+              <View style={s.slot}>
+                {option.value === inputSlotFor ? children : null}
+                {option.extra ? (
+                  <Field
+                    label={`${EXTRA_LABEL[option.extra]} *`}
+                    error={extraInvalid ? 'This field is required.' : undefined}
+                  >
+                    <Input
+                      value={extraValue ?? ''}
+                      onChangeText={(text) =>
+                        !frozen && onExtraChange?.(
+                          option.value,
+                          option.extra === 'phoneNumber'
+                            ? { phoneNumber: text }
+                            : { cashtag: text }
+                        )
+                      }
+                      placeholder={
+                        option.extra === 'phoneNumber' ? 'e.g. 081234567890' : '$cashtag'
+                      }
+                      keyboardType={
+                        option.extra === 'phoneNumber' ? 'phone-pad' : 'default'
+                      }
+                      autoCapitalize="none"
+                      invalid={extraInvalid}
+                    />
+                  </Field>
+                ) : null}
+              </View>
+            ) : null}
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+const useStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        list: { gap: 8 },
+        row: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          overflow: 'hidden',
+        },
+        rowActive: { borderColor: theme.accent },
+        rowHead: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          padding: 14,
+        },
+        radio: {
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: theme.border,
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        radioActive: { borderColor: theme.accent },
+        radioDot: {
+          width: 10,
+          height: 10,
+          borderRadius: 5,
+          backgroundColor: theme.accent,
+        },
+        icon: { width: 24, height: 24 },
+        rowLabel: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontFamily: theme.fontFamily,
+        },
+        slot: { paddingHorizontal: 14, paddingBottom: 14, gap: 10 },
+      }),
+    [theme]
+  )

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

@@ -0,0 +1,127 @@
+/**
+ * `<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 cap = Math.min(max, 50)
+  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]
+  )