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

package/src/ui/Field.tsx

@@ -0,0 +1,171 @@
+/**
+ * Native form controls — the RN analogues of the web `Field` / `Input` /
+ * `Checkbox`. Theme-aware; `Field` renders a label + the control + an inline
+ * error, and marks itself invalid so submit-attempt validation can reveal it.
+ */
+import React, { useMemo, useState, type FC, type ReactNode } from 'react'
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type KeyboardTypeOptions,
+} from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+
+export const Field: FC<{
+  label?: string
+  error?: string
+  required?: boolean
+  children: ReactNode
+}> = ({ label, error, required, children }) => {
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  return (
+    <View style={s.field}>
+      {label ? (
+        <Text style={s.label}>
+          {label}
+          {required ? <Text style={s.required}> *</Text> : null}
+        </Text>
+      ) : null}
+      {children}
+      {error ? <Text style={s.error}>{error}</Text> : null}
+    </View>
+  )
+}
+
+export interface InputProps {
+  value: string
+  onChangeText: (text: string) => void
+  placeholder?: string
+  keyboardType?: KeyboardTypeOptions
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters'
+  secureTextEntry?: boolean
+  editable?: boolean
+  invalid?: boolean
+  onBlur?: () => void
+}
+
+export const Input: FC<InputProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  keyboardType,
+  autoCapitalize = 'sentences',
+  secureTextEntry,
+  editable = true,
+  invalid = false,
+  onBlur,
+}) => {
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  const [focused, setFocused] = useState(false)
+  return (
+    <TextInput
+      style={[
+        s.input,
+        focused && s.inputFocused,
+        invalid && s.inputInvalid,
+        !editable && s.inputDisabled,
+      ]}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      placeholderTextColor={theme.muted}
+      keyboardType={keyboardType}
+      autoCapitalize={autoCapitalize}
+      autoCorrect={false}
+      secureTextEntry={secureTextEntry}
+      editable={editable}
+      onFocus={() => setFocused(true)}
+      onBlur={() => {
+        setFocused(false)
+        onBlur?.()
+      }}
+    />
+  )
+}
+
+export const Checkbox: FC<{
+  checked: boolean
+  onChange: (checked: boolean) => void
+  label: ReactNode
+  invalid?: boolean
+}> = ({ checked, onChange, label, invalid = false }) => {
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked }}
+      onPress={() => onChange(!checked)}
+      style={s.checkboxRow}
+    >
+      <View
+        style={[
+          s.checkboxBox,
+          checked && s.checkboxBoxChecked,
+          invalid && !checked && s.checkboxBoxInvalid,
+        ]}
+      >
+        {checked ? <Text style={s.checkboxMark}>✓</Text> : null}
+      </View>
+      {typeof label === 'string' ? <Text style={s.checkboxLabel}>{label}</Text> : label}
+    </Pressable>
+  )
+}
+
+const useFieldStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        field: { gap: 6 },
+        label: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 2,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        required: { color: theme.error },
+        error: { color: theme.error, fontSize: theme.fontSize - 3 },
+        input: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          borderRadius: theme.radiusControl,
+          paddingHorizontal: 12,
+          paddingVertical: 12,
+          color: theme.text,
+          fontSize: theme.fontSize,
+          backgroundColor: theme.surface,
+          fontFamily: theme.fontFamily,
+        },
+        inputFocused: { borderColor: theme.accent },
+        inputInvalid: { borderColor: theme.error },
+        inputDisabled: { backgroundColor: theme.surfaceMuted, color: theme.muted },
+        checkboxRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
+        checkboxBox: {
+          width: 22,
+          height: 22,
+          borderRadius: 6,
+          borderWidth: StyleSheet.hairlineWidth,
+          borderColor: theme.border,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: theme.surface,
+        },
+        checkboxBoxChecked: { backgroundColor: theme.accent, borderColor: theme.accent },
+        checkboxBoxInvalid: { borderColor: theme.error },
+        checkboxMark: { color: theme.accentContrast, fontSize: 14, fontWeight: '700' },
+        checkboxLabel: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )

package/src/ui/InstallmentPicker.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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, { useCallback, useMemo, useState } from 'react'
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native'
+
+import type { InstallmentOffer } 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)
+
+  // 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 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,177 @@
+/**
+ * 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 { 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 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 }}
+              onPress={() => 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) =>
+                        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/QuantitySelect.tsx

@@ -0,0 +1,103 @@
+/**
+ * `<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'
+
+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
+}
+
+export const QuantitySelect: FC<QuantitySelectProps> = ({
+  value,
+  onChange,
+  min = 0,
+  max = 10,
+  step = 1,
+  disabled = false,
+}) => {
+  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}>
+      <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]
+  )