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

package/src/ui/Field.tsx

@@ -0,0 +1,189 @@
+/**
+ * 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,
+  type TextInputProps,
+} from 'react-native'
+
+import { useTheme } from './CheckoutProvider'
+import type { ResolvedTheme } from './theme'
+import { useFrozen } from './Frozen'
+
+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
+  extends Pick<
+    TextInputProps,
+    | 'textContentType'
+    | 'autoComplete'
+    | 'autoFocus'
+    | 'maxLength'
+    | 'onSubmitEditing'
+    | 'accessibilityLabel'
+    | 'multiline'
+  > {
+  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: editableProp = true,
+  invalid = false,
+  onBlur,
+  ...nativeProps
+}) => {
+  const frozen = useFrozen()
+  const editable = editableProp && !frozen
+  const theme = useTheme()
+  const s = useFieldStyles(theme)
+  const [focused, setFocused] = useState(false)
+  return (
+    <TextInput
+      {...nativeProps}
+      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)
+  const frozen = useFrozen()
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled: frozen }}
+      disabled={frozen}
+      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/Frozen.tsx

@@ -0,0 +1,22 @@
+/**
+ * `FrozenFields` — the native form of a disabled `<fieldset>`: every Input,
+ * Checkbox, Select, QuantitySelect and Button inside it stops taking input
+ * while `frozen`. A section wraps its form in it while the order is placed
+ * or charged (`orderFixed`), when the engine ignores a commit.
+ */
+import React, { createContext, useContext, type FC, type ReactNode } from 'react'
+
+const FrozenContext = createContext(false)
+
+/** True inside a frozen `FrozenFields`. */
+export const useFrozen = (): boolean => useContext(FrozenContext)
+
+export const FrozenFields: FC<{ frozen?: boolean; children: ReactNode }> = ({
+  frozen = false,
+  children,
+}) => {
+  const outer = useFrozen()
+  return (
+    <FrozenContext.Provider value={outer || frozen}>{children}</FrozenContext.Provider>
+  )
+}

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]
+  )