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

package/src/auth/AuthModal.tsx

@@ -0,0 +1,305 @@
+/**
+ * `<AuthModal/>` — sign-in / create-account / password-reset sheet over the
+ * shared headless `hooks.useAuthFlow`. The RN analogue of the web `AuthModal`:
+ * same flow contract (validation, mutations, errors, view transitions,
+ * suggested-email carry-over), re-skinned as a native bottom-sheet `Modal`.
+ *
+ * Native adaptations vs. the web modal:
+ *   - No DOM focus-trap, `Tab` cycling, or `body` scroll-lock — the native
+ *     `Modal` already traps focus and blocks background interaction. Backdrop
+ *     press and the hardware back button close it (unless a submit is running).
+ *   - The web logo is an SVG `<img>`; RN can't render an SVG URL without an
+ *     extra library, so the logo is an optional `<Image>` shown only when a
+ *     (raster) `logoUrl` is supplied — no built-in SVG default.
+ *
+ * Render inside `<CheckoutProvider>` so it inherits the theme + query client.
+ */
+import React, { useCallback, type FC } from 'react'
+import { Image, Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+import { hooks, type TfProfile } from 'tf-checkout-shared'
+
+import { MutedText } from '../ui/primitives'
+import { useTheme } from '../ui/CheckoutProvider'
+import { ForgotPasswordForm } from './ForgotPasswordForm'
+import { LoginForm } from './LoginForm'
+import { RegisterForm } from './RegisterForm'
+import { TwoFactorForm } from './TwoFactorForm'
+import { EmailCodeForm } from './EmailCodeForm'
+
+export interface AuthModalProps {
+  checkoutEventId?: string
+  onCheckoutAuthenticated?: (
+    profile: import('tf-checkout-shared').CheckoutBuyerProfile
+  ) => void
+  open: boolean
+  onClose: () => void
+  allowRegistration?: boolean
+  allowPasswordReset?: boolean
+  requireRegistrationAddress?: boolean
+  /** Optional raster logo shown above the form. */
+  logoUrl?: string
+  onAuthenticated?: (profile: TfProfile) => void
+  initialEmail?: string
+  /** Optional context shown above the active form. */
+  message?: string
+}
+
+/** A single Login / Sign Up tab. */
+const Tab: FC<{ label: string; active: boolean; onPress: () => void }> = ({
+  label,
+  active,
+  onPress,
+}) => {
+  const theme = useTheme()
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      onPress={onPress}
+      style={[styles.tab, { borderBottomColor: active ? theme.accent : 'transparent' }]}
+    >
+      <Text style={[styles.tabText, { color: active ? theme.text : theme.muted }]}>
+        {label}
+      </Text>
+    </Pressable>
+  )
+}
+
+export const AuthModal: FC<AuthModalProps> = ({
+  open,
+  onClose,
+  allowRegistration = true,
+  allowPasswordReset = true,
+  requireRegistrationAddress = true,
+  logoUrl,
+  onAuthenticated,
+  checkoutEventId,
+  onCheckoutAuthenticated,
+  initialEmail,
+  message,
+}) => {
+  const theme = useTheme()
+  const closeAfterAuth = useCallback(
+    (profile: TfProfile) => {
+      onAuthenticated?.(profile)
+      onClose()
+    },
+    [onAuthenticated, onClose]
+  )
+  const auth = hooks.useAuthFlow({
+    checkoutEventId,
+    onCheckoutAuthenticated: (profile) => {
+      onCheckoutAuthenticated?.(profile)
+      onClose()
+    },
+    initialEmail,
+    requireRegistrationAddress,
+    onAuthenticated: closeAfterAuth,
+  })
+
+  const isPasswordReset = auth.view === 'forgot-password'
+  const showTabs =
+    allowRegistration &&
+    !isPasswordReset &&
+    auth.view !== 'two-factor' &&
+    auth.view !== 'email-code'
+  // Don't let a backdrop / back-button dismiss interrupt an in-flight submit.
+  const requestClose = async () => {
+    if (auth.isSubmitting) return
+    if (auth.twoFactorChallenge) await auth.cancelTwoFactor()
+    onClose()
+  }
+
+  return (
+    <Modal visible={open} animationType="slide" transparent onRequestClose={requestClose}>
+      <Pressable style={styles.backdrop} onPress={requestClose}>
+        {/* Inner press swallows taps so they don't bubble to the backdrop. */}
+        <Pressable
+          style={[styles.sheet, { backgroundColor: theme.surface }]}
+          onPress={() => {}}
+        >
+          <View style={styles.header}>
+            <Text style={[styles.title, { color: theme.text }]}>
+              {isPasswordReset
+                ? 'Password reset'
+                : auth.view === 'two-factor'
+                  ? 'Verify your sign in'
+                  : 'Ticket Fairy account'}
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              disabled={auth.isSubmitting}
+              onPress={() => void requestClose()}
+              hitSlop={12}
+            >
+              <Text style={[styles.close, { color: theme.muted }]}>✕</Text>
+            </Pressable>
+          </View>
+
+          <ScrollView
+            contentContainerStyle={styles.body}
+            keyboardShouldPersistTaps="handled"
+          >
+            {logoUrl ? (
+              <Image
+                accessibilityLabel="The Ticket Fairy"
+                source={{ uri: logoUrl }}
+                style={styles.logo}
+                resizeMode="contain"
+              />
+            ) : null}
+
+            {showTabs ? (
+              <View style={[styles.tabs, { borderBottomColor: theme.border }]}>
+                <Tab
+                  label="Login"
+                  active={auth.view === 'login'}
+                  onPress={() => auth.showLogin(auth.suggestedEmail)}
+                />
+                <Tab
+                  label="Sign Up"
+                  active={auth.view === 'register'}
+                  onPress={() => auth.showRegister(auth.suggestedEmail)}
+                />
+              </View>
+            ) : null}
+
+            {message && !isPasswordReset ? <MutedText>{message}</MutedText> : null}
+
+            {auth.view === 'email-code' ? (
+              <EmailCodeForm
+                initialEmail={auth.suggestedEmail}
+                sent={auth.emailCodeSent}
+                target={auth.emailCodeTarget}
+                retryAfter={auth.emailRetryAfter}
+                loading={auth.isSubmitting}
+                error={auth.error}
+                successMessage={auth.successMessage}
+                onRequest={auth.requestEmailCode}
+                onVerify={auth.submitEmailCode}
+                onBack={() => auth.showLogin(auth.suggestedEmail)}
+              />
+            ) : null}
+            {auth.view === 'two-factor' && auth.twoFactorChallenge ? (
+              <TwoFactorForm
+                loading={auth.isSubmitting}
+                error={auth.error}
+                successMessage={auth.successMessage}
+                smsAvailable={auth.twoFactorChallenge.smsAvailable}
+                smsRetryAfter={auth.smsRetryAfter}
+                onSubmit={auth.submitTwoFactor}
+                onSendSms={auth.sendTwoFactorSms}
+                onCancel={auth.cancelTwoFactor}
+              />
+            ) : null}
+
+            {auth.view === 'login' ? (
+              <LoginForm
+                initialEmail={auth.suggestedEmail}
+                errors={auth.fieldErrors}
+                error={auth.error}
+                loading={auth.isSubmitting}
+                allowPasswordReset={allowPasswordReset}
+                onSubmit={auth.submitLogin}
+                onForgotPassword={auth.showForgotPassword}
+                onFieldChange={auth.clearFieldError}
+              />
+            ) : null}
+
+            {auth.view === 'login' && auth.browserSignInAvailable ? (
+              <View style={{ gap: 12 }}>
+                {(['google', 'apple', 'facebook', 'passkey'] as const).map((provider) => (
+                  <Pressable
+                    key={provider}
+                    accessibilityRole="button"
+                    disabled={auth.isSubmitting}
+                    onPress={() => void auth.submitBrowserSignIn(provider)}
+                  >
+                    <Text style={{ color: theme.accent }}>
+                      {provider === 'passkey'
+                        ? 'Sign in with a passkey'
+                        : `Sign in with ${provider === 'google' ? 'Google' : provider === 'apple' ? 'Apple' : 'Facebook'}`}
+                    </Text>
+                  </Pressable>
+                ))}
+              </View>
+            ) : null}
+            {auth.view === 'login' && auth.emailCodeAvailable ? (
+              <Pressable onPress={() => auth.showEmailCode(auth.suggestedEmail)}>
+                <Text style={{ color: theme.accent }}>Sign in with an email code</Text>
+              </Pressable>
+            ) : null}
+            {auth.view === 'register' && allowRegistration ? (
+              <RegisterForm
+                initialEmail={auth.suggestedEmail}
+                errors={auth.fieldErrors}
+                error={auth.error}
+                loading={auth.isSubmitting}
+                requireAddress={auth.requireRegistrationAddress}
+                requireTerms={Boolean(auth.accountCompletion)}
+                completionRefresh={
+                  auth.accountCompletion
+                    ? {
+                        retryAfter: auth.emailRetryAfter,
+                        onRequest: () =>
+                          auth.requestEmailCode(auth.accountCompletion!.email),
+                        onVerify: auth.submitEmailCode,
+                      }
+                    : undefined
+                }
+                onSubmit={auth.submitRegistration}
+                onFieldChange={auth.clearFieldError}
+              />
+            ) : null}
+
+            {isPasswordReset ? (
+              <ForgotPasswordForm
+                initialEmail={auth.suggestedEmail}
+                errors={auth.fieldErrors}
+                error={auth.error}
+                successMessage={auth.successMessage}
+                loading={auth.isSubmitting}
+                onSubmit={auth.submitPasswordReset}
+                onBackToLogin={auth.showLogin}
+                onFieldChange={() => auth.clearFieldError('email')}
+              />
+            ) : null}
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  backdrop: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.4)' },
+  sheet: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    maxHeight: '90%',
+    paddingBottom: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 20,
+  },
+  title: { fontSize: 18, fontWeight: '700' },
+  close: { fontSize: 18 },
+  body: { paddingHorizontal: 20, paddingBottom: 8, gap: 16 },
+  logo: { width: '100%', height: 44, alignSelf: 'center' },
+  tabs: {
+    flexDirection: 'row',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  tab: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 12,
+    borderBottomWidth: 2,
+  },
+  tabText: { fontSize: 15, fontWeight: '600' },
+})

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/ForgotPasswordForm.tsx

@@ -0,0 +1,98 @@
+/**
+ * `<ForgotPasswordForm/>` — native password-recovery presentation over the
+ * shared auth-flow controller. Mirrors the web form: an email prompt that, once
+ * the reset request succeeds, swaps to a success state with a "Back to log in"
+ * action.
+ */
+import React, { useEffect, useState, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import type { AuthFieldErrors } from 'tf-checkout-shared'
+
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+import { useTheme } from '../ui/CheckoutProvider'
+
+export interface ForgotPasswordFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  successMessage?: string
+  loading?: boolean
+  onSubmit: (email: string) => void | Promise<unknown>
+  onBackToLogin: (email: string) => void
+  onFieldChange?: () => void
+}
+
+export const ForgotPasswordForm: FC<ForgotPasswordFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  successMessage,
+  loading = false,
+  onSubmit,
+  onBackToLogin,
+  onFieldChange,
+}) => {
+  const theme = useTheme()
+  const [email, setEmail] = useState(initialEmail)
+
+  useEffect(() => {
+    if (initialEmail && !email) setEmail(initialEmail)
+  }, [email, initialEmail])
+
+  const submit = () => void onSubmit(email)
+
+  if (successMessage) {
+    return (
+      <View style={styles.form}>
+        <Text style={[styles.success, { color: theme.success }]}>{successMessage}</Text>
+        <Button onPress={() => onBackToLogin(email)}>Back to log in</Button>
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.form}>
+      <MutedText>
+        Enter your email and we’ll send you instructions to reset your password.
+      </MutedText>
+
+      {error ? <ErrorText>{error}</ErrorText> : null}
+
+      <Field label="Email" required error={errors.email}>
+        <Input
+          value={email}
+          onChangeText={(text) => {
+            setEmail(text)
+            onFieldChange?.()
+          }}
+          placeholder="Email"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          invalid={Boolean(errors.email)}
+        />
+      </Field>
+
+      <Button onPress={submit} loading={loading}>
+        Send reset instructions
+      </Button>
+
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => onBackToLogin(email)}
+        hitSlop={8}
+        style={styles.link}
+      >
+        <Text style={[styles.linkText, { color: theme.accent }]}>Back to log in</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  form: { gap: 14 },
+  success: { fontSize: 15, fontWeight: '600' },
+  link: { alignItems: 'center', paddingVertical: 4 },
+  linkText: { fontSize: 14, fontWeight: '600' },
+})

package/src/auth/LoginForm.tsx

@@ -0,0 +1,99 @@
+/**
+ * `<LoginForm/>` — native email + password form. Pure presentation: it holds
+ * only local field state and delegates every auth concern (validation,
+ * mutation, errors) to its caller, exactly like the web `LoginForm`.
+ */
+import React, { useEffect, useState, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import type { AuthFieldErrors, AuthLoginInput } from 'tf-checkout-shared'
+
+import { Button, ErrorText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+import { useTheme } from '../ui/CheckoutProvider'
+import { PasswordInput } from './PasswordInput'
+
+export interface LoginFormProps {
+  initialEmail?: string
+  errors?: AuthFieldErrors
+  error?: string
+  loading?: boolean
+  allowPasswordReset?: boolean
+  onSubmit: (input: AuthLoginInput) => void | Promise<unknown>
+  onForgotPassword?: (email: string) => void
+  onFieldChange?: (field: keyof AuthLoginInput) => void
+}
+
+export const LoginForm: FC<LoginFormProps> = ({
+  initialEmail = '',
+  errors = {},
+  error,
+  loading = false,
+  allowPasswordReset = true,
+  onSubmit,
+  onForgotPassword,
+  onFieldChange,
+}) => {
+  const theme = useTheme()
+  const [email, setEmail] = useState(initialEmail)
+  const [password, setPassword] = useState('')
+
+  useEffect(() => {
+    if (initialEmail && !email) setEmail(initialEmail)
+  }, [email, initialEmail])
+
+  const submit = () => void onSubmit({ email, password })
+
+  return (
+    <View style={styles.form}>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+
+      <Field label="Email" required error={errors.email}>
+        <Input
+          value={email}
+          onChangeText={(text) => {
+            setEmail(text)
+            onFieldChange?.('email')
+          }}
+          placeholder="Email"
+          keyboardType="email-address"
+          autoCapitalize="none"
+          invalid={Boolean(errors.email)}
+        />
+      </Field>
+
+      <Field label="Password" required error={errors.password}>
+        <PasswordInput
+          value={password}
+          onChangeText={(text) => {
+            setPassword(text)
+            onFieldChange?.('password')
+          }}
+          placeholder="Password"
+          invalid={Boolean(errors.password)}
+        />
+      </Field>
+
+      <Button onPress={submit} loading={loading}>
+        Login
+      </Button>
+
+      {allowPasswordReset && onForgotPassword ? (
+        <Pressable
+          accessibilityRole="button"
+          onPress={() => onForgotPassword(email)}
+          hitSlop={8}
+          style={styles.link}
+        >
+          <Text style={[styles.linkText, { color: theme.accent }]}>Forgot password?</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  form: { gap: 14 },
+  link: { alignItems: 'center', paddingVertical: 4 },
+  linkText: { fontSize: 14, fontWeight: '600' },
+})

package/src/auth/PasswordInput.tsx

@@ -0,0 +1,45 @@
+/**
+ * `<PasswordInput/>` — the RN analogue of the web password field's reveal
+ * affordance. Wraps the shared `Input` in `secureTextEntry` mode and overlays a
+ * tap-to-toggle eye. Native has no SVG by default, so the icon is a plain emoji
+ * `Text` toggle (👁 / 🙈) rather than the web's inline `<svg>`. `forwardRef` is
+ * not needed here — nothing in the native flow reaches for the input node.
+ */
+import React, { useState, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import { Input, type InputProps } from '../ui/Field'
+
+export type PasswordInputProps = Omit<InputProps, 'secureTextEntry'>
+
+export const PasswordInput: FC<PasswordInputProps> = (props) => {
+  const [visible, setVisible] = useState(false)
+  return (
+    <View style={styles.wrap}>
+      {/* Keep `secureTextEntry` after the spread so it always reflects `visible`. */}
+      <Input {...props} autoCapitalize="none" secureTextEntry={!visible} />
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={visible ? 'Hide password' : 'Show password'}
+        accessibilityState={{ selected: visible }}
+        onPress={() => setVisible((current) => !current)}
+        hitSlop={10}
+        style={styles.toggle}
+      >
+        <Text style={styles.icon}>{visible ? '🙈' : '👁'}</Text>
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  wrap: { position: 'relative', justifyContent: 'center' },
+  toggle: {
+    position: 'absolute',
+    right: 10,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  icon: { fontSize: 18 },
+})