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

package/src/auth/EmailCodeForm.tsx

@@ -0,0 +1,91 @@
+import React, { useState, type FC } from 'react'
+import { View } from 'react-native'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+export interface EmailCodeFormProps {
+  initialEmail: string
+  sent: boolean
+  target: string
+  retryAfter: number
+  loading: boolean
+  error: string
+  successMessage: string
+  onRequest: (email: string) => Promise<boolean>
+  onVerify: (code: string) => Promise<unknown>
+  onBack: () => void
+}
+export const EmailCodeForm: FC<EmailCodeFormProps> = ({
+  initialEmail,
+  sent,
+  target,
+  retryAfter,
+  loading,
+  error,
+  successMessage,
+  onRequest,
+  onVerify,
+  onBack,
+}) => {
+  const [email, setEmail] = useState(initialEmail)
+  const [code, setCode] = useState('')
+  return (
+    <View style={{ gap: 14 }}>
+      <MutedText>
+        {sent
+          ? `Enter the sign-in code sent to ${target}.`
+          : 'Receive a one-time sign-in code by email.'}
+      </MutedText>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {successMessage ? <MutedText>{successMessage}</MutedText> : null}
+      <Field label="Email" required>
+        <Input
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!sent && !loading}
+          accessibilityLabel="Email"
+        />
+      </Field>
+      {sent ? (
+        <>
+          <Field label="Sign-in code" required>
+            <Input
+              value={code}
+              onChangeText={(value) => setCode(value.replace(/\D/g, '').slice(0, 6))}
+              accessibilityLabel="Sign-in code"
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              autoComplete="one-time-code"
+              maxLength={6}
+              autoFocus
+              editable={!loading}
+            />
+          </Field>
+          <Button
+            loading={loading}
+            disabled={!/^\d{6}$/.test(code)}
+            onPress={() => void onVerify(code)}
+          >
+            Verify code
+          </Button>
+        </>
+      ) : null}
+      <Button
+        loading={!sent && loading}
+        variant={sent ? 'ghost' : 'primary'}
+        disabled={loading || retryAfter > 0 || !email.trim()}
+        onPress={() => void onRequest(email)}
+      >
+        {retryAfter > 0
+          ? `Send another code in ${retryAfter}s`
+          : sent
+            ? 'Resend code'
+            : 'Send sign-in code'}
+      </Button>
+      <Button variant="ghost" disabled={loading} onPress={onBack}>
+        Use password instead
+      </Button>
+    </View>
+  )
+}

package/src/auth/RegisterForm.tsx

@@ -7,29 +7,38 @@
  *     `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 { Linking, Pressable, StyleSheet, View } from 'react-native'
 
 import {
   hooks,
+  createTranslator,
+  type LocaleCode,
   type AuthFieldErrors,
   type AuthFieldName,
   type AuthRegistrationInput,
 } from 'tf-checkout-shared'
 
-import { Button, ErrorText } from '../ui/primitives'
+import { Button, ErrorText, MutedText } 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
+  locale?: LocaleCode
   errors?: AuthFieldErrors
   error?: string
   loading?: boolean
   requireAddress?: boolean
+  requireTerms?: boolean
+  completionRefresh?: {
+    retryAfter: number
+    onRequest: () => Promise<boolean>
+    onVerify: (code: string) => Promise<unknown>
+  }
   onSubmit: (
     input: AuthRegistrationInput,
-    options: { requireState: boolean }
+    options: { requireState: boolean; termsAccepted?: boolean }
   ) => void | Promise<unknown>
   onFieldChange?: (field: AuthFieldName) => void
 }
@@ -50,16 +59,23 @@ const emptyRegistration = (email: string): AuthRegistrationInput => ({
 
 export const RegisterForm: FC<RegisterFormProps> = ({
   initialEmail = '',
+  locale,
   errors = {},
   error,
   loading = false,
   requireAddress = true,
+  requireTerms = false,
+  completionRefresh,
   onSubmit,
   onFieldChange,
 }) => {
+  const t = useMemo(() => createTranslator({ locale }), [locale])
   const [values, setValues] = useState<AuthRegistrationInput>(() =>
     emptyRegistration(initialEmail)
   )
+  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [refreshingProof, setRefreshingProof] = useState(false)
+  const [refreshCode, setRefreshCode] = useState('')
   const countriesQuery = hooks.useCountries()
   const countries = useMemo(() => countriesQuery.data ?? [], [countriesQuery.data])
   const statesQuery = hooks.useStates(values.countryId, {
@@ -103,7 +119,8 @@ export const RegisterForm: FC<RegisterFormProps> = ({
     [states]
   )
 
-  const submit = () => void onSubmit(values, { requireState: states.length > 0 })
+  const submit = () =>
+    void onSubmit(values, { requireState: states.length > 0, termsAccepted })
 
   return (
     <View style={styles.form}>
@@ -137,6 +154,7 @@ export const RegisterForm: FC<RegisterFormProps> = ({
       <Field label="Email" required error={errors.email}>
         <Input
           value={values.email}
+          editable={!requireTerms}
           onChangeText={(text) => setField('email', text)}
           placeholder="Email"
           keyboardType="email-address"
@@ -233,7 +251,75 @@ export const RegisterForm: FC<RegisterFormProps> = ({
         />
       </Field>
 
-      <Button onPress={submit} loading={loading}>
+      {completionRefresh ? (
+        <View style={{ gap: 12 }}>
+          <Button
+            disabled={loading || completionRefresh.retryAfter > 0}
+            onPress={() => {
+              setRefreshingProof(true)
+              void completionRefresh.onRequest()
+            }}
+          >
+            {t('auth.completionVerifyAgain')}
+            {completionRefresh.retryAfter > 0
+              ? ` (${completionRefresh.retryAfter}s)`
+              : ''}
+          </Button>
+          {refreshingProof ? (
+            <>
+              <Field label={t('auth.completionNewCode')}>
+                <Input
+                  value={refreshCode}
+                  keyboardType="number-pad"
+                  textContentType="oneTimeCode"
+                  maxLength={6}
+                  onChangeText={(value) =>
+                    setRefreshCode(value.replace(/\D/g, '').slice(0, 6))
+                  }
+                />
+              </Field>
+              <Button
+                disabled={loading || !/^\d{6}$/.test(refreshCode)}
+                onPress={() => void completionRefresh.onVerify(refreshCode)}
+              >
+                {t('auth.completionVerifyCode')}
+              </Button>
+            </>
+          ) : null}
+        </View>
+      ) : null}
+      {requireTerms ? (
+        <View style={{ gap: 8 }}>
+          <Pressable
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: termsAccepted }}
+            onPress={() => setTermsAccepted((current) => !current)}
+          >
+            <MutedText>
+              {termsAccepted ? '☑' : '☐'} {t('auth.completionAgree')}
+            </MutedText>
+          </Pressable>
+          <Pressable
+            accessibilityRole="link"
+            onPress={() =>
+              void Linking.openURL('https://www.ticketfairy.com/terms-of-service')
+            }
+          >
+            <MutedText>{t('auth.completionTerms')}</MutedText>
+          </Pressable>
+          <Pressable
+            accessibilityRole="link"
+            onPress={() => void Linking.openURL('https://www.ticketfairy.com/privacy')}
+          >
+            <MutedText>{t('auth.completionPrivacy')}</MutedText>
+          </Pressable>
+        </View>
+      ) : null}
+      <Button
+        onPress={submit}
+        loading={loading}
+        disabled={requireTerms && !termsAccepted}
+      >
         Create Account
       </Button>
     </View>

package/src/auth/TwoFactorForm.tsx

@@ -0,0 +1,74 @@
+import React, { useState, type FC } from 'react'
+import { View } from 'react-native'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+
+export interface TwoFactorFormProps {
+  loading: boolean
+  error: string
+  successMessage: string
+  smsAvailable: boolean
+  smsRetryAfter: number
+  onSubmit: (code: string) => Promise<unknown>
+  onSendSms: () => Promise<boolean>
+  onCancel: () => Promise<void>
+}
+
+/** Presentation only; the shared headless flow owns the pending identity. */
+export const TwoFactorForm: FC<TwoFactorFormProps> = ({
+  loading,
+  error,
+  successMessage,
+  smsAvailable,
+  smsRetryAfter,
+  onSubmit,
+  onSendSms,
+  onCancel,
+}) => {
+  const [code, setCode] = useState('')
+  return (
+    <View style={{ gap: 14 }}>
+      <MutedText>
+        Enter the six-digit code from your authenticator app or registered phone to
+        complete sign-in.
+      </MutedText>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {successMessage ? <MutedText>{successMessage}</MutedText> : null}
+      <Field label="Verification code" required>
+        <Input
+          accessibilityLabel="Verification code"
+          value={code}
+          onChangeText={(value) => setCode(value.replace(/\D/g, '').slice(0, 6))}
+          keyboardType="number-pad"
+          textContentType="oneTimeCode"
+          autoComplete="one-time-code"
+          maxLength={6}
+          autoFocus
+          editable={!loading}
+          onSubmitEditing={() => void onSubmit(code)}
+        />
+      </Field>
+      <Button
+        loading={loading}
+        disabled={!/^\d{6}$/.test(code)}
+        onPress={() => void onSubmit(code)}
+      >
+        Verify code
+      </Button>
+      {smsAvailable ? (
+        <Button
+          variant="ghost"
+          disabled={loading || smsRetryAfter > 0}
+          onPress={() => void onSendSms()}
+        >
+          {smsRetryAfter > 0
+            ? `Send another code in ${smsRetryAfter}s`
+            : 'Send a code by SMS'}
+        </Button>
+      ) : null}
+      <Button variant="ghost" disabled={loading} onPress={() => void onCancel()}>
+        Use password again
+      </Button>
+    </View>
+  )
+}

package/src/auth/index.ts

@@ -5,3 +5,7 @@ export { RegisterForm } from './RegisterForm'
 export { ForgotPasswordForm } from './ForgotPasswordForm'
 export { ResetPasswordForm } from './ResetPasswordForm'
 export { PasswordInput } from './PasswordInput'
+
+export { TwoFactorForm, type TwoFactorFormProps } from './TwoFactorForm'
+
+export { EmailCodeForm, type EmailCodeFormProps } from './EmailCodeForm'

package/src/configure.ts

@@ -23,4 +23,11 @@ import { createMmkvStorage } from './storage'
 export const mmkvStorageAdapter = createMmkvStorage()
 
 export const configureCheckout = (config: TtfConfig): void =>
-  configure({ storage: mmkvStorageAdapter, cookieAuth: true, ...config })
+  configure({
+    storage: mmkvStorageAdapter,
+    cookieAuth: true,
+    ...config,
+    // NSURLSession/RCTNetworking would otherwise accept Set-Cookie outside
+    // the SDK epoch guard. Only the SDK's header-backed jar owns native auth.
+    withCredentials: false,
+  })

package/src/confirmer.ts

@@ -10,11 +10,8 @@
  * 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.
+ * CheckoutProvider owns provider-page windows for PayPal, Razorpay, Xendit and
+ * Stripe redirect rails. Imperative hosts supply their own providerPage port.
  */
 import { Linking } from 'react-native'
 import {
@@ -29,10 +26,14 @@ import {
   type BillingDetails,
 } from '@stripe/stripe-react-native'
 
-import type {
-  CheckoutBilling,
-  CheckoutPorts,
-  PaymentConfirmer,
+import {
+  nativeStripeErrorOutcome,
+  confirmedStripeIntentStatus,
+  paymentProviderError,
+  type CheckoutBilling,
+  type CheckoutPorts,
+  type NativeStripeErrorLike,
+  type PaymentConfirmer,
 } from 'tf-checkout-shared'
 
 /** `CheckoutBilling` → the native SDK's `BillingDetails`. Mirrors the web
@@ -55,6 +56,18 @@ const toBillingDetails = (billing: CheckoutBilling): BillingDetails => ({
 const failed = (message: string | undefined, fallback: string): Error =>
   new Error(message || fallback)
 
+/** A stripe-react-native error as the error the engine classifies: only an
+ *  explicit decline or cancel lets the checkout reset
+ *  (`nativeStripeErrorOutcome`). */
+const stripeFailure = (
+  error: NativeStripeErrorLike & { message?: string },
+  fallback: string
+): Error =>
+  paymentProviderError(error.message || fallback, nativeStripeErrorOutcome(error), {
+    type: error.type,
+    code: error.stripeErrorCode ?? error.code,
+  })
+
 /**
  * The confirmer every `useCheckout`/`<CardInput/>` binds to. `init()` is
  * idempotent per key so an event on a connected Stripe account re-initializes
@@ -62,6 +75,8 @@ const failed = (message: string | undefined, fallback: string): Error =>
  */
 export const createRnStripeConfirmer = (): PaymentConfirmer => {
   let initKey: string | null = null
+  let accountKey: string | null = null
+  const listeners = new Set<() => void>()
 
   return {
     init: async ({ publishableKey, accountId, merchantIdentifier, urlScheme }) => {
@@ -74,6 +89,18 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
         ...(urlScheme ? { urlScheme } : {}),
       })
       initKey = key
+      accountKey = `${publishableKey}:${accountId ?? ''}`
+      listeners.forEach((listener) => listener())
+    },
+
+    // `publishableKey:accountId`, the shape `bundleConfirmerKey` expects.
+    currentKey: () => accountKey,
+
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => {
+        listeners.delete(listener)
+      }
     },
 
     // Native statuses are already the port's PascalCase vocabulary — no normalize.
@@ -87,8 +114,8 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
         paymentMethodType: 'Card',
         paymentMethodData: { billingDetails: toBillingDetails(billing) },
       })
-      if (error) throw failed(error.message, 'Payment failed.')
-      return paymentIntent?.status
+      if (error) throw stripeFailure(error, 'Payment failed.')
+      return confirmedStripeIntentStatus(paymentIntent)
     },
 
     confirmApplePay: async (clientSecret, total, currencyCode, merchant) => {
@@ -105,8 +132,8 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
           ],
         },
       })
-      if (error) throw failed(error.message, 'Apple Pay failed.')
-      return paymentIntent?.status
+      if (error) throw stripeFailure(error, 'Apple Pay failed.')
+      return confirmedStripeIntentStatus(paymentIntent)
     },
 
     confirmGooglePay: async (clientSecret, total, currencyCode, merchant) => {
@@ -118,8 +145,8 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
           merchantName: merchant.merchantName ?? 'Order',
         },
       })
-      if (error) throw failed(error.message, 'Google Pay failed.')
-      return paymentIntent?.status
+      if (error) throw stripeFailure(error, 'Google Pay failed.')
+      return confirmedStripeIntentStatus(paymentIntent)
     },
   }
 }
@@ -130,9 +157,9 @@ export const createRnStripeConfirmer = (): PaymentConfirmer => {
  * `Linking`. WebView rails are intentionally absent (see file header).
  */
 export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
-  openUrl: (url: string) => {
-    void Linking.openURL(url)
-  },
+  // The promise is handed back: a URL the device cannot open rejects, and the
+  // caller shows its failure (for example "We could not open the payment page").
+  openUrl: (url: string) => Linking.openURL(url).then(() => undefined),
 
   createCardPaymentMethod: async (billing) => {
     const { paymentMethod, error } = await createPaymentMethod({
@@ -143,9 +170,74 @@ export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
     return paymentMethod.id
   },
 
+  createRedirectPaymentMethod: async (methodType, billing) => {
+    const details = toBillingDetails(billing)
+    const result = await (() => {
+      switch (methodType) {
+        case 'klarna':
+          return createPaymentMethod({
+            paymentMethodType: 'Klarna',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'afterpay_clearpay':
+          return createPaymentMethod({
+            paymentMethodType: 'AfterpayClearpay',
+            paymentMethodData: { billingDetails: details, shippingDetails: details },
+          })
+        case 'affirm':
+          return createPaymentMethod({
+            paymentMethodType: 'Affirm',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'ideal':
+          return createPaymentMethod({
+            paymentMethodType: 'Ideal',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'bancontact':
+          return createPaymentMethod({
+            paymentMethodType: 'Bancontact',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'eps':
+          return createPaymentMethod({
+            paymentMethodType: 'Eps',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'p24':
+          return createPaymentMethod({
+            paymentMethodType: 'P24',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'alipay':
+          return createPaymentMethod({ paymentMethodType: 'Alipay' })
+        case 'grabpay':
+          return createPaymentMethod({
+            paymentMethodType: 'GrabPay',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'cashapp':
+          return createPaymentMethod({
+            paymentMethodType: 'CashApp',
+            paymentMethodData: { billingDetails: details },
+          })
+        case 'paypal':
+          return createPaymentMethod({
+            paymentMethodType: 'PayPal',
+            paymentMethodData: { billingDetails: details },
+          })
+        default:
+          throw new Error('This payment method is not available on this device.')
+      }
+    })()
+    if (result.error || !result.paymentMethod?.id)
+      throw failed(result.error?.message, 'Unable to start this payment method.')
+    return result.paymentMethod.id
+  },
+
   handleNextAction: async (clientSecret) => {
     const { error } = await handleNextAction(clientSecret)
-    if (error) throw failed(error.message, 'Payment failed')
+    if (error) throw stripeFailure(error, 'Payment failed')
   },
 
   confirmOxxo: async (clientSecret, billing) => {
@@ -175,6 +267,6 @@ export const createRnPorts = (): Omit<CheckoutPorts, 'confirmer'> => ({
       paymentMethodType: 'Card',
       paymentMethodData: { paymentMethodId },
     })
-    if (error) throw failed(error.message, 'Payment failed')
+    if (error) throw stripeFailure(error, 'Payment failed')
   },
 })