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

package/src/auth/AuthModal.tsx

@@ -0,0 +1,221 @@
+/**
+ * `<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'
+
+export interface AuthModalProps {
+  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,
+  initialEmail,
+  message,
+}) => {
+  const theme = useTheme()
+  const closeAfterAuth = useCallback(
+    (profile: TfProfile) => {
+      onAuthenticated?.(profile)
+      onClose()
+    },
+    [onAuthenticated, onClose]
+  )
+  const auth = hooks.useAuthFlow({
+    initialEmail,
+    requireRegistrationAddress,
+    onAuthenticated: closeAfterAuth,
+  })
+
+  const isPasswordReset = auth.view === 'forgot-password'
+  const showTabs = allowRegistration && !isPasswordReset
+  // Don't let a backdrop / back-button dismiss interrupt an in-flight submit.
+  const requestClose = () => {
+    if (!auth.isSubmitting) 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' : 'Ticket Fairy account'}
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              disabled={auth.isSubmitting}
+              onPress={onClose}
+              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 === '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 === 'register' && allowRegistration ? (
+              <RegisterForm
+                initialEmail={auth.suggestedEmail}
+                errors={auth.fieldErrors}
+                error={auth.error}
+                loading={auth.isSubmitting}
+                requireAddress={requireRegistrationAddress}
+                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/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 },
+})