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

package/src/auth/RegisterForm.tsx

@@ -0,0 +1,247 @@
+/**
+ * `<RegisterForm/>` — native create-account form. Same field contract as the
+ * web `RegisterForm` (all validation delegated to the shared controller), with
+ * two native adaptations:
+ *   - the web `<select>`s become the native `<Select/>` bottom-sheet picker;
+ *   - there's no `react-international-phone` on native, so Phone is a plain
+ *     `phone-pad` input (the US default still seeds it with "+1").
+ */
+import React, { useEffect, useMemo, useState, type FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import {
+  hooks,
+  type AuthFieldErrors,
+  type AuthFieldName,
+  type AuthRegistrationInput,
+} from 'tf-checkout-shared'
+
+import { Button, ErrorText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+import { Select, type SelectOption } from '../ui/Select'
+import { PasswordInput } from './PasswordInput'
+
+export interface RegisterFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  loading?: boolean
+  requireAddress?: boolean
+  onSubmit: (
+    input: AuthRegistrationInput,
+    options: { requireState: boolean }
+  ) => void | Promise<unknown>
+  onFieldChange?: (field: AuthFieldName) => void
+}
+
+const emptyRegistration = (email: string): AuthRegistrationInput => ({
+  firstName: '',
+  lastName: '',
+  email,
+  password: '',
+  passwordConfirmation: '',
+  phone: '',
+  streetAddress: '',
+  city: '',
+  zip: '',
+  countryId: '',
+  stateId: '',
+})
+
+export const RegisterForm: FC<RegisterFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  loading = false,
+  requireAddress = true,
+  onSubmit,
+  onFieldChange,
+}) => {
+  const [values, setValues] = useState<AuthRegistrationInput>(() =>
+    emptyRegistration(initialEmail)
+  )
+  const countriesQuery = hooks.useCountries()
+  const countries = useMemo(() => countriesQuery.data ?? [], [countriesQuery.data])
+  const statesQuery = hooks.useStates(values.countryId, {
+    enabled: requireAddress && Boolean(values.countryId),
+  })
+  const states = useMemo(() => statesQuery.data ?? [], [statesQuery.data])
+
+  useEffect(() => {
+    if (initialEmail && !values.email)
+      setValues((current) => ({ ...current, email: initialEmail }))
+  }, [initialEmail, values.email])
+
+  // Default to the US, resolved by ISO code rather than a hard-coded id so it
+  // stays backend/environment safe (same approach as the web form).
+  useEffect(() => {
+    if (!requireAddress || values.countryId || countries.length === 0) return
+    const preferred =
+      countries.find((country) => country.code?.toLowerCase() === 'us') ?? countries[0]
+    setValues((current) => ({
+      ...current,
+      countryId: String(preferred.id),
+      phone:
+        current.phone || (preferred.code?.toLowerCase() === 'us' ? '+1' : current.phone),
+    }))
+  }, [countries, requireAddress, values.countryId])
+
+  const patch = (next: Partial<AuthRegistrationInput>) =>
+    setValues((current) => ({ ...current, ...next }))
+  const setField = (field: AuthFieldName, value: string) => {
+    setValues((current) => ({ ...current, [field]: value }))
+    onFieldChange?.(field)
+  }
+
+  const countryOptions: SelectOption[] = useMemo(
+    () =>
+      countries.map((country) => ({ label: country.name, value: String(country.id) })),
+    [countries]
+  )
+  const stateOptions: SelectOption[] = useMemo(
+    () => states.map((state) => ({ label: state.name, value: String(state.id) })),
+    [states]
+  )
+
+  const submit = () => void onSubmit(values, { requireState: states.length > 0 })
+
+  return (
+    <View style={styles.form}>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+
+      <View style={styles.row}>
+        <View style={styles.flex}>
+          <Field label="First name" required error={errors.firstName}>
+            <Input
+              value={values.firstName}
+              onChangeText={(text) => setField('firstName', text)}
+              placeholder="First Name"
+              autoCapitalize="words"
+              invalid={Boolean(errors.firstName)}
+            />
+          </Field>
+        </View>
+        <View style={styles.flex}>
+          <Field label="Last name" required error={errors.lastName}>
+            <Input
+              value={values.lastName}
+              onChangeText={(text) => setField('lastName', text)}
+              placeholder="Last Name"
+              autoCapitalize="words"
+              invalid={Boolean(errors.lastName)}
+            />
+          </Field>
+        </View>
+      </View>
+
+      <Field label="Email" required error={errors.email}>
+        <Input
+          value={values.email}
+          onChangeText={(text) => setField('email', text)}
+          placeholder="Email"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          invalid={Boolean(errors.email)}
+        />
+      </Field>
+
+      {requireAddress ? (
+        <>
+          <Field label="Street address" required error={errors.streetAddress}>
+            <Input
+              value={values.streetAddress ?? ''}
+              onChangeText={(text) => setField('streetAddress', text)}
+              placeholder="Street Address"
+              invalid={Boolean(errors.streetAddress)}
+            />
+          </Field>
+
+          <Field label="ZIP / postcode" required error={errors.zip}>
+            <Input
+              value={values.zip ?? ''}
+              onChangeText={(text) => setField('zip', text)}
+              placeholder="Zip / Postal Code"
+              invalid={Boolean(errors.zip)}
+            />
+          </Field>
+
+          <Field label="Country" required error={errors.countryId}>
+            <Select
+              value={values.countryId ?? ''}
+              options={countryOptions}
+              placeholder="Select country"
+              invalid={Boolean(errors.countryId)}
+              onChange={(next) => {
+                patch({ countryId: next, stateId: '' })
+                onFieldChange?.('countryId')
+                onFieldChange?.('stateId')
+              }}
+            />
+          </Field>
+
+          <Field
+            label="State / Province"
+            required={states.length > 0}
+            error={errors.stateId}
+          >
+            <Select
+              value={values.stateId ?? ''}
+              options={stateOptions}
+              placeholder={states.length > 0 ? 'Select state / region' : 'Not required'}
+              disabled={!values.countryId || states.length === 0}
+              invalid={Boolean(errors.stateId)}
+              onChange={(next) => setField('stateId', next)}
+            />
+          </Field>
+
+          <Field label="City" required error={errors.city}>
+            <Input
+              value={values.city ?? ''}
+              onChangeText={(text) => setField('city', text)}
+              placeholder="City"
+              invalid={Boolean(errors.city)}
+            />
+          </Field>
+        </>
+      ) : null}
+
+      <Field label="Phone">
+        <Input
+          value={values.phone ?? ''}
+          onChangeText={(text) => setField('phone', text)}
+          placeholder="Phone"
+          keyboardType="phone-pad"
+          autoCapitalize="none"
+        />
+      </Field>
+
+      <Field label="Password" required error={errors.password}>
+        <PasswordInput
+          value={values.password}
+          onChangeText={(text) => setField('password', text)}
+          placeholder="Password"
+          invalid={Boolean(errors.password)}
+        />
+      </Field>
+
+      <Field label="Confirm password" required error={errors.passwordConfirmation}>
+        <PasswordInput
+          value={values.passwordConfirmation}
+          onChangeText={(text) => setField('passwordConfirmation', text)}
+          placeholder="Confirm Password"
+          invalid={Boolean(errors.passwordConfirmation)}
+        />
+      </Field>
+
+      <Button onPress={submit} loading={loading}>
+        Create Account
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  form: { gap: 14 },
+  row: { flexDirection: 'row', gap: 10 },
+  flex: { flex: 1 },
+})

package/src/auth/ResetPasswordForm.tsx

@@ -0,0 +1,112 @@
+/**
+ * `<ResetPasswordForm/>` — completes the reset started by
+ * `<ForgotPasswordForm/>`, given the `token` from the reset email. Owns its own
+ * client-side validation (min length, a required special character, and a
+ * confirmation match) and drives `hooks.useResetPassword`, mirroring the web
+ * form. On success it swaps to a confirmation with an optional "Log in" action.
+ */
+import React, { useMemo, useState, type FC } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import { errorMessage, hooks } from 'tf-checkout-shared'
+
+import { Button, ErrorText } from '../ui/primitives'
+import { Field } from '../ui/Field'
+import { useTheme } from '../ui/CheckoutProvider'
+import { PasswordInput } from './PasswordInput'
+
+export interface ResetPasswordFormProps {
+  /** Token from the password-reset email. */
+  token: string
+  onSuccess?: () => void
+  onBackToLogin?: () => void
+}
+
+export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
+  token,
+  onSuccess,
+  onBackToLogin,
+}) => {
+  const theme = useTheme()
+  const [password, setPassword] = useState('')
+  const [confirmation, setConfirmation] = useState('')
+  const [submitted, setSubmitted] = useState(false)
+  const [success, setSuccess] = useState(false)
+
+  const validation = useMemo(() => {
+    if (!submitted)
+      return {} as { token?: string; password?: string; confirmation?: string }
+    return {
+      token: token ? '' : 'This password-reset link is missing its token.',
+      password:
+        password.length < 8
+          ? 'Password must have at least 8 characters.'
+          : !/[@$!%*#?&]/.test(password)
+            ? 'Password must contain at least one special character.'
+            : '',
+      confirmation: password !== confirmation ? 'Passwords must match.' : '',
+    }
+  }, [confirmation, password, submitted, token])
+
+  const reset = hooks.useResetPassword({
+    onSuccess: () => {
+      setSuccess(true)
+      onSuccess?.()
+    },
+  })
+
+  const submit = () => {
+    setSubmitted(true)
+    const passwordValid = password.length >= 8 && /[@$!%*#?&]/.test(password)
+    if (!token || !passwordValid || password !== confirmation) return
+    reset.mutate({ token, password, passwordConfirmation: confirmation })
+  }
+
+  if (success) {
+    return (
+      <View style={styles.form}>
+        <Text style={[styles.success, { color: theme.success }]}>
+          Your password has been changed. You can now log in.
+        </Text>
+        {onBackToLogin ? <Button onPress={onBackToLogin}>Log in</Button> : null}
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.form}>
+      <Text style={[styles.title, { color: theme.text }]}>Change Password</Text>
+
+      {validation.token ? <ErrorText>{validation.token}</ErrorText> : null}
+      {reset.error ? <ErrorText>{errorMessage(reset.error)}</ErrorText> : null}
+
+      <Field label="New Password" required error={validation.password}>
+        <PasswordInput
+          value={password}
+          onChangeText={setPassword}
+          placeholder="New Password"
+          invalid={Boolean(validation.password)}
+        />
+      </Field>
+
+      <Field label="Confirm Password" required error={validation.confirmation}>
+        <PasswordInput
+          value={confirmation}
+          onChangeText={setConfirmation}
+          placeholder="Confirm Password"
+          invalid={Boolean(validation.confirmation)}
+        />
+      </Field>
+
+      <Button onPress={submit} loading={reset.isPending} disabled={!token}>
+        Submit
+      </Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  form: { gap: 14 },
+  title: { fontSize: 18, fontWeight: '700' },
+  success: { fontSize: 15, fontWeight: '600' },
+})

package/src/auth/index.ts

@@ -0,0 +1,7 @@
+/** The native auth UI — the RN analogue of the web `auth/`. */
+export { AuthModal, type AuthModalProps } from './AuthModal'
+export { LoginForm } from './LoginForm'
+export { RegisterForm } from './RegisterForm'
+export { ForgotPasswordForm } from './ForgotPasswordForm'
+export { ResetPasswordForm } from './ResetPasswordForm'
+export { PasswordInput } from './PasswordInput'

package/src/configure.ts

@@ -0,0 +1,26 @@
+/**
+ * One-time SDK setup for React Native. Wraps the shared `configure()` and
+ * defaults the token store to a persisted MMKV adapter. Call once at app
+ * start, before any `useCheckout`/`ttf` call:
+ *
+ *   configureCheckout({ env: 'PROD', clientId, clientSecret })
+ *
+ * `cookieAuth` defaults ON: native sign-in must ride the legacy cookie-session
+ * flow (`POST /auth`), NOT the OAuth bearer chain. The cart lives in the
+ * backend session, and a bearer request without a guest header is moved onto a
+ * synthetic empty session — so a buyer who reserves tickets and then logs in
+ * mid-checkout would lose the cart ("The cart is expired"). On the cookie flow
+ * no bearer is ever minted, the session that holds the cart stays put, and the
+ * X-TF-ECOMMERCE ticket is persisted to MMKV (the shared cookie shim falls
+ * back to the storage adapter off-browser) so sign-in survives a relaunch.
+ * Pass `cookieAuth: false` to opt back into the bearer chain.
+ */
+import { configure, type TtfConfig } from 'tf-checkout-shared'
+
+import { createMmkvStorage } from './storage'
+
+/** Persisted MMKV-backed token store, shared by every configure call. */
+export const mmkvStorageAdapter = createMmkvStorage()
+
+export const configureCheckout = (config: TtfConfig): void =>
+  configure({ storage: mmkvStorageAdapter, cookieAuth: true, ...config })

package/src/confirmer.ts

@@ -0,0 +1,180 @@
+/**
+ * React Native adapter of the SDK's `PaymentConfirmer` + `CheckoutPorts` — the
+ * native mirror of the web `confirmer.ts`. It binds `@stripe/stripe-react-native`
+ * so the engine in `tf-checkout-shared` runs the exact same
+ * cart → order → charge → finalize sequence the web runs, with the same
+ * retry-safety invariants and duplicate-charge guards.
+ *
+ * Uses the IMPERATIVE stripe-react-native functions (not the `useConfirmPayment`
+ * hook) because the confirmer is a module singleton, not a component. Card data
+ * flows from the mounted `<CardInput/>` (`<CardField/>`) into `confirmPayment`
+ * natively — there is no element to register the way web does.
+ *
+ * Deferred (optional ports, left unimplemented — the engine falls back to a
+ * typed "unsupported gateway" for them): WebView-based rails — Razorpay / PayPal
+ * / Stripe redirect methods (`providerPage`, `createRedirectPaymentMethod`) and
+ * Xendit tokenization (`tokenizeXenditCard`). They need `react-native-webview`,
+ * which this package injects rather than depends on; wiring them is a follow-up.
+ */
+import { Linking } from 'react-native'
+import {
+  confirmPayment,
+  confirmPlatformPayPayment,
+  confirmSetupIntent,
+  createPaymentMethod,
+  handleNextAction,
+  initStripe,
+  PlatformPay,
+  retrievePaymentIntent,
+  type BillingDetails,
+} from '@stripe/stripe-react-native'
+
+import type {
+  CheckoutBilling,
+  CheckoutPorts,
+  PaymentConfirmer,
+} from 'tf-checkout-shared'
+
+/** `CheckoutBilling` → the native SDK's `BillingDetails`. Mirrors the web
+ *  `stripeBillingDetails`; the SDK collects card data from `<CardField/>`. */
+const toBillingDetails = (billing: CheckoutBilling): BillingDetails => ({
+  email: billing.email,
+  name: `${billing.firstName} ${billing.lastName}`.trim(),
+  phone: billing.phone || undefined,
+  address: {
+    line1: billing.streetAddress || undefined,
+    city: billing.city || undefined,
+    postalCode: billing.zip || undefined,
+    // Stripe wants ISO-2; CheckoutBilling carries it when the consumer resolved
+    // it (backend ids are numeric). Left undefined otherwise.
+    country: billing.countryCode || undefined,
+    state: billing.stateCode || undefined,
+  },
+})
+
+const failed = (message: string | undefined, fallback: string): Error =>
+  new Error(message || fallback)
+
+/**
+ * The confirmer every `useCheckout`/`<CardInput/>` binds to. `init()` is
+ * idempotent per key so an event on a connected Stripe account re-initializes
+ * only when the key/account actually changes.
+ */
+export const createRnStripeConfirmer = (): PaymentConfirmer => {
+  let initKey: string | null = null
+
+  return {
+    init: async ({ publishableKey, accountId, merchantIdentifier, urlScheme }) => {
+      const key = `${publishableKey}:${accountId ?? ''}:${merchantIdentifier ?? ''}`
+      if (initKey === key) return
+      await initStripe({
+        publishableKey,
+        ...(accountId ? { stripeAccountId: accountId } : {}),
+        ...(merchantIdentifier ? { merchantIdentifier } : {}),
+        ...(urlScheme ? { urlScheme } : {}),
+      })
+      initKey = key
+    },
+
+    // Native statuses are already the port's PascalCase vocabulary — no normalize.
+    getIntentStatus: async (clientSecret) => {
+      const { paymentIntent } = await retrievePaymentIntent(clientSecret)
+      return paymentIntent?.status
+    },
+
+    confirmCard: async (clientSecret, billing) => {
+      const { error, paymentIntent } = await confirmPayment(clientSecret, {
+        paymentMethodType: 'Card',
+        paymentMethodData: { billingDetails: toBillingDetails(billing) },
+      })
+      if (error) throw failed(error.message, 'Payment failed.')
+      return paymentIntent?.status
+    },
+
+    confirmApplePay: async (clientSecret, total, currencyCode, merchant) => {
+      const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
+        applePay: {
+          merchantCountryCode: merchant.merchantCountryCode ?? 'US',
+          currencyCode,
+          cartItems: [
+            {
+              label: merchant.merchantName ?? 'Order',
+              amount: total,
+              paymentType: PlatformPay.PaymentType.Immediate,
+            },
+          ],
+        },
+      })
+      if (error) throw failed(error.message, 'Apple Pay failed.')
+      return paymentIntent?.status
+    },
+
+    confirmGooglePay: async (clientSecret, total, currencyCode, merchant) => {
+      const { error, paymentIntent } = await confirmPlatformPayPayment(clientSecret, {
+        googlePay: {
+          testEnv: merchant.testEnv === true,
+          merchantCountryCode: merchant.merchantCountryCode ?? 'US',
+          currencyCode,
+          merchantName: merchant.merchantName ?? 'Order',
+        },
+      })
+      if (error) throw failed(error.message, 'Google Pay failed.')
+      return paymentIntent?.status
+    },
+  }
+}
+
+/**
+ * The native ports the alternative Stripe rails run on. OXXO / MSI / payment-plan
+ * legs bind the same imperative stripe-react-native functions; `openUrl` uses
+ * `Linking`. WebView rails are intentionally absent (see file header).
+ */
+export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
+  openUrl: (url: string) => {
+    void Linking.openURL(url)
+  },
+
+  createCardPaymentMethod: async (billing) => {
+    const { paymentMethod, error } = await createPaymentMethod({
+      paymentMethodType: 'Card',
+      paymentMethodData: { billingDetails: toBillingDetails(billing) },
+    })
+    if (error || !paymentMethod?.id) throw failed(error?.message, 'Payment failed')
+    return paymentMethod.id
+  },
+
+  handleNextAction: async (clientSecret) => {
+    const { error } = await handleNextAction(clientSecret)
+    if (error) throw failed(error.message, 'Payment failed')
+  },
+
+  confirmOxxo: async (clientSecret, billing) => {
+    const { error, paymentIntent } = await confirmPayment(clientSecret, {
+      paymentMethodType: 'Oxxo',
+      paymentMethodData: { billingDetails: toBillingDetails(billing) },
+    })
+    return { error: error?.message, nextAction: paymentIntent?.nextAction as unknown }
+  },
+
+  // Payment plan (new card): confirm the SetupIntent to SAVE the card (nothing
+  // charged) and return its PaymentMethod id for the server-side plan.
+  confirmPaymentPlanSetup: async (clientSecret, billing) => {
+    const { setupIntent, error } = await confirmSetupIntent(clientSecret, {
+      paymentMethodType: 'Card',
+      paymentMethodData: { billingDetails: toBillingDetails(billing) },
+    })
+    const paymentMethodId = setupIntent?.paymentMethod?.id
+    if (error || !paymentMethodId) throw failed(error?.message, 'Card setup failed')
+    return paymentMethodId
+  },
+
+  // Payment plan (saved-card 3DS): confirm the pending charge against the
+  // existing PaymentMethod when the plan comes back requires_action.
+  confirmSavedCardPayment: async (clientSecret, paymentMethodId) => {
+    const { error } = await confirmPayment(clientSecret, {
+      paymentMethodType: 'Card',
+      paymentMethodData: { paymentMethodId },
+    })
+    if (error) throw failed(error.message, 'Payment failed')
+  },
+})