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

package/src/auth/RegisterForm.tsx

@@ -0,0 +1,333 @@
+/**
+ * `<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 { 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, 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; termsAccepted?: 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 = '',
+  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, {
+    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, termsAccepted })
+
+  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}
+          editable={!requireTerms}
+          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>
+
+      {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>
+  )
+}
+
+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/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

@@ -0,0 +1,11 @@
+/** 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'
+
+export { TwoFactorForm, type TwoFactorFormProps } from './TwoFactorForm'
+
+export { EmailCodeForm, type EmailCodeFormProps } from './EmailCodeForm'

package/src/configure.ts

@@ -0,0 +1,33 @@
+/**
+ * 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,
+    // NSURLSession/RCTNetworking would otherwise accept Set-Cookie outside
+    // the SDK epoch guard. Only the SDK's header-backed jar owns native auth.
+    withCredentials: false,
+  })