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

package/src/sections/PhoneAuthentication.tsx

@@ -0,0 +1,371 @@
+import React from 'react'
+import {
+  Linking,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getConfig, hooks, phoneCallingCodeForInput, phoneCountryLabel, type PhoneAuthenticationFlow } from 'tf-checkout-shared'
+import { LoginForm } from '../auth/LoginForm'
+import { EmailCodeForm } from '../auth/EmailCodeForm'
+import { ForgotPasswordForm } from '../auth/ForgotPasswordForm'
+import { RegisterForm } from '../auth/RegisterForm'
+import { TwoFactorForm } from '../auth/TwoFactorForm'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Checkbox, Field, Input } from '../ui/Field'
+import { Select, type SelectOption } from '../ui/Select'
+import { FrozenFields } from '../ui/Frozen'
+import { useTheme } from '../ui/CheckoutProvider'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface PhoneAuthenticationProps {
+  flow: PhoneAuthenticationFlow
+  locale?: string
+  showHeader?: boolean
+  allowCreation?: boolean
+  allowPasswordReset?: boolean
+  countryOptions?: SelectOption<string>[]
+  onOpenTerms?: () => void
+  onOpenPrivacy?: () => void
+  style?: StyleProp<ViewStyle>
+}
+
+/** Native presentation over one common owner; no OTP, admission or linking policy here. */
+export function PhoneAuthentication({
+  flow,
+  locale,
+  showHeader = true,
+  allowCreation = true,
+  allowPasswordReset = true,
+  countryOptions,
+  onOpenTerms,
+  onOpenPrivacy,
+  style,
+}: PhoneAuthenticationProps) {
+  const t = useAccountT(locale)
+  const theme = useTheme()
+  const { state, emailAuth: auth } = flow
+  const countries = hooks.useCountries({
+    enabled: !countryOptions && state.phase === 'phone',
+  })
+  const choices =
+    countryOptions ??
+    (countries.data ?? []).flatMap((country) =>
+      typeof country.code === 'string' && /^[a-z]{2}$/i.test(country.code)
+        ? [{ value: country.code.toUpperCase(), label: phoneCountryLabel(country.name, country.code) }]
+        : []
+    )
+  const busy = state.busy || auth.isSubmitting
+  const callingCode = phoneCallingCodeForInput(state.phone)
+  const hasSelectedCountry = choices.some((choice) => choice.value === state.country)
+  const secondFactor = auth.view === 'two-factor' && Boolean(auth.twoFactorChallenge)
+  const heading = (label: string) =>
+    showHeader ? (
+      <Text style={[s.heading, { color: theme.text, fontFamily: theme.fontFamily }]}>
+        {t(label)}
+      </Text>
+    ) : null
+  const button = (label: string, onPress: () => void, disabled = busy) => (
+    <Button variant="ghost" onPress={onPress} disabled={disabled}>
+      {t(label)}
+    </Button>
+  )
+  const emailView = () => {
+    const completion = auth.accountCompletion
+    if (auth.view === 'two-factor' && auth.twoFactorChallenge)
+      return (
+        <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}
+        />
+      )
+    if (auth.view === 'email-code')
+      return (
+        <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)}
+        />
+      )
+    if (auth.view === 'forgot-password')
+      return (
+        <ForgotPasswordForm
+          initialEmail={auth.suggestedEmail}
+          errors={auth.fieldErrors}
+          error={auth.error}
+          successMessage={auth.successMessage}
+          loading={auth.isSubmitting}
+          onSubmit={auth.submitPasswordReset}
+          onBackToLogin={auth.showLogin}
+          onFieldChange={auth.clearFeedback}
+        />
+      )
+    if (auth.view === 'register' && allowCreation)
+      return (
+        <RegisterForm
+          initialEmail={auth.suggestedEmail}
+          errors={auth.fieldErrors}
+          error={auth.error}
+          loading={auth.isSubmitting}
+          requireAddress={auth.requireRegistrationAddress}
+          requireTerms={Boolean(auth.accountCompletion)}
+          completionRefresh={
+            completion
+              ? {
+                  retryAfter: auth.emailRetryAfter,
+                  onRequest: () => auth.requestEmailCode(completion.email),
+                  onVerify: auth.submitEmailCode,
+                }
+              : undefined
+          }
+          onSubmit={auth.submitRegistration}
+          onFieldChange={auth.clearFieldError}
+        />
+      )
+    return (
+      <View style={s.panel}>
+        <LoginForm
+          initialEmail={auth.suggestedEmail}
+          errors={auth.fieldErrors}
+          error={auth.error}
+          loading={auth.isSubmitting}
+          allowPasswordReset={allowPasswordReset}
+          onSubmit={auth.submitLogin}
+          onForgotPassword={auth.showForgotPassword}
+          onFieldChange={auth.clearFieldError}
+        />
+        {auth.emailCodeAvailable
+          ? button('Sign in with an email code', () =>
+              auth.showEmailCode(auth.suggestedEmail)
+            )
+          : null}
+        {allowCreation
+          ? button('Create an account with email', flow.chooseEmailRegistration)
+          : null}
+        {auth.browserSignInAvailable
+          ? (['google', 'apple', 'facebook', 'passkey'] as const).map((provider) => (
+              <Button
+                key={provider}
+                variant="ghost"
+                disabled={busy}
+                onPress={() => void auth.submitBrowserSignIn(provider)}
+              >
+                {t(
+                  provider === 'passkey'
+                    ? 'Sign in with a passkey'
+                    : provider === 'google'
+                      ? 'Sign in with Google'
+                      : provider === 'apple'
+                        ? 'Sign in with Apple'
+                        : 'Sign in with Facebook'
+                )}
+              </Button>
+            ))
+          : null}
+      </View>
+    )
+  }
+  return (
+    <View style={[s.panel, style]}>
+      {state.error ? <ErrorText>{t(state.error)}</ErrorText> : null}
+      {state.successMessage ? <MutedText>{t(state.successMessage)}</MutedText> : null}
+      {!secondFactor && state.phase === 'phone' ? (
+        <View style={s.panel}>
+          {heading('Sign in or sign up')}
+          <MutedText>
+            {t(
+              'We’ll send a one-time SMS code. You can still use email to access your existing account.'
+            )}
+          </MutedText>
+          <Field label={t('Country')}>
+            <Select
+              value={state.country}
+              options={choices}
+              disabled={busy}
+              onChange={flow.setCountry}
+              placeholder={!hasSelectedCountry && callingCode ? `+${callingCode}` : t('Country')}
+            />
+          </Field>
+          {countries.isError && !countryOptions ? (
+            <View>
+              <ErrorText>{t('Unable to load countries. Please try again.')}</ErrorText>
+              {button('Try again', () => void countries.refetch())}
+            </View>
+          ) : null}
+          <Field label={t('Phone number')} required>
+            <Input
+              value={state.phone}
+              onChangeText={flow.setPhone}
+              accessibilityLabel={t('Phone number')}
+              placeholder="+1 202 555 0123"
+              keyboardType="phone-pad"
+              textContentType="telephoneNumber"
+              autoComplete="tel"
+              editable={!busy}
+              onSubmitEditing={() => void flow.requestCode()}
+            />
+          </Field>
+          <Button
+            disabled={busy || !state.phone.trim()}
+            loading={state.busy}
+            onPress={() => void flow.requestCode()}
+          >
+            {t('Send code')}
+          </Button>
+          {button('Continue with Email', flow.chooseEmail)}
+        </View>
+      ) : null}
+      {!secondFactor && state.phase === 'code' ? (
+        <View style={s.panel}>
+          {heading('Verify your phone')}
+          <MutedText>
+            {t('Enter the six-digit code sent to {{phone}}.', { phone: state.phone })}
+          </MutedText>
+          <Field label={t('Verification code')} required>
+            <Input
+              value={state.code}
+              onChangeText={flow.setCode}
+              accessibilityLabel={t('Verification code')}
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              autoComplete="one-time-code"
+              maxLength={6}
+              editable={!busy}
+              onSubmitEditing={() => void flow.verifyCode()}
+            />
+          </Field>
+          <Button
+            loading={state.busy}
+            disabled={busy || !/^\d{6}$/.test(state.code)}
+            onPress={() => void flow.verifyCode()}
+          >
+            {t('Verify code')}
+          </Button>
+          {button(
+            state.retryAfter > 0
+              ? t('Resend in {{seconds}}s', { seconds: state.retryAfter })
+              : 'Resend code',
+            () => void flow.requestCode(),
+            busy || state.retryAfter > 0
+          )}
+          {button('Change phone number', flow.back)}
+          {button('Continue with Email', flow.chooseEmail)}
+        </View>
+      ) : null}
+      {!secondFactor && state.phase === 'choose_account' ? (
+        <View style={s.panel}>
+          {heading('Your number is verified')}
+          <MutedText>
+            {t(
+              'Already have a Ticket Fairy account? Sign in with email to keep your tickets and account together.'
+            )}
+          </MutedText>
+          <Button disabled={busy} onPress={flow.chooseEmail}>
+            {t('Sign in to my existing account')}
+          </Button>
+          {allowCreation ? (
+            <>
+              <MutedText>
+                {t(
+                  'New to Ticket Fairy? Create an account with this verified number. You can add email later.'
+                )}
+              </MutedText>
+              <FrozenFields frozen={busy}>
+                <Checkbox
+                  checked={state.termsAccepted}
+                  onChange={flow.setTermsAccepted}
+                  label={t(
+                    'By creating an account, I accept the Terms of Service and Privacy Policy.'
+                  )}
+                />
+              </FrozenFields>
+              <View style={s.links}>
+                {button('Terms of Service', () =>
+                  onOpenTerms
+                    ? onOpenTerms()
+                    : void Linking.openURL(getConfig().host + '/terms-of-service')
+                )}
+                {button('Privacy Policy', () =>
+                  onOpenPrivacy
+                    ? onOpenPrivacy()
+                    : void Linking.openURL(getConfig().host + '/privacy')
+                )}
+              </View>
+              <Button
+                disabled={busy || !state.termsAccepted}
+                loading={state.busy}
+                onPress={() => void flow.createAccount()}
+              >
+                {t('Create a new account')}
+              </Button>
+            </>
+          ) : null}
+        </View>
+      ) : null}
+      {secondFactor || state.phase === 'email' ? (
+        <View style={s.panel}>
+          {heading(
+            secondFactor
+              ? 'Verify your sign in'
+              : auth.view === 'forgot-password'
+                ? 'Password reset'
+                : auth.view === 'register'
+                  ? 'Create an account with email'
+                  : 'Sign in to your existing account'
+          )}
+          {emailView()}
+          {!secondFactor ? button('Continue with phone', flow.back) : null}
+        </View>
+      ) : null}
+      {!secondFactor && state.phase === 'confirm_link' ? (
+        <View style={s.panel}>
+          {heading('Link your phone number')}
+          <MutedText>
+            {state.linkAvailable === false
+              ? t('You are signed in. Verify your phone again to link this number.')
+              : t(
+                  'Link {{phone}} to {{account}} so you can sign in to the same account with your phone.',
+                  { phone: state.phone, account: state.linkAccountLabel ?? '' }
+                )}
+          </MutedText>
+          {state.linkAvailable !== false ? (
+            <Button
+              disabled={busy}
+              loading={state.busy}
+              onPress={() => void flow.confirmLink()}
+            >
+              {t('Link this number')}
+            </Button>
+          ) : (
+            button('Verify your phone again', flow.back)
+          )}
+          {button('Not now', flow.skipLink)}
+        </View>
+      ) : null}
+      {!secondFactor && state.phase === 'signed_in' ? (
+        <MutedText>{t('You are signed in.')}</MutedText>
+      ) : null}
+      {state.phase !== 'signed_in' ? button('Cancel', flow.cancel) : null}
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  panel: { gap: 16 },
+  heading: { fontSize: 26, fontWeight: '500' },
+  links: { flexDirection: 'row', flexWrap: 'wrap', gap: 12 },
+})

package/src/sections/PostReaction.tsx

@@ -0,0 +1,122 @@
+import React, { type ReactNode } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import { hooks, type WordPostReactionFlow } from 'tf-checkout-shared'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface PostReactionControlsProps {
+  flow: WordPostReactionFlow
+  onSignIn?: () => void
+  renderIcon?: (choice: 'up' | 'down') => ReactNode
+  translate?: (english: string) => string
+  showFeedback?: boolean
+}
+
+/** Native hosts may supply their own icon assets without introducing a native dependency. */
+export const PostReactionControls = ({
+  flow,
+  onSignIn,
+  renderIcon,
+  translate,
+  showFeedback = true,
+}: PostReactionControlsProps) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  const unavailable = flow.signedIn && !flow.query.data
+  return (
+    <View style={styles.root}>
+      <View style={styles.buttons} accessibilityLabel={t('Article reaction')}>
+        {(['up', 'down'] as const).map((choice) => (
+          <Pressable
+            key={choice}
+            accessibilityRole="button"
+            accessibilityLabel={t(choice === 'up' ? 'Like article' : 'Dislike article')}
+            accessibilityState={{
+              selected: flow.reaction === choice,
+              disabled: flow.busy || unavailable,
+            }}
+            disabled={flow.busy || unavailable}
+            style={[
+              styles.button,
+              flow.reaction === choice && styles.selected,
+              (flow.busy || unavailable) && styles.disabled,
+            ]}
+            onPress={() =>
+              flow.signedIn ? void flow.toggleReaction(choice) : onSignIn?.()
+            }
+          >
+            {renderIcon ? (
+              renderIcon(choice)
+            ) : (
+              <Text style={styles.icon}>{choice === 'up' ? '👍' : '👎'}</Text>
+            )}
+          </Pressable>
+        ))}
+      </View>
+      {showFeedback && <PostReactionFeedback flow={flow} translate={translate} />}
+    </View>
+  )
+}
+
+export const PostReactionFeedback = ({
+  flow,
+  translate,
+}: Pick<PostReactionControlsProps, 'flow' | 'translate'>) => {
+  const accountT = useAccountT()
+  const t = translate ?? accountT
+  return (
+    <>
+      {flow.busy && (
+        <Text style={styles.message} accessibilityLiveRegion="polite">
+          {t('Saving reaction…')}
+        </Text>
+      )}
+      {(flow.error || flow.query.error) && (
+        <View style={styles.error}>
+          <Text style={styles.message} accessibilityRole="alert">
+            {t(
+              flow.error ||
+                flow.query.error?.message ||
+                'Your reaction could not be saved. Please try again.'
+            )}
+          </Text>
+          <Pressable
+            accessibilityRole="button"
+            disabled={flow.busy}
+            onPress={() => void flow.retry()}
+          >
+            <Text style={styles.retry}>{t('Try again')}</Text>
+          </Pressable>
+        </View>
+      )}
+    </>
+  )
+}
+
+export const PostReaction = ({
+  postId,
+  ...props
+}: Omit<PostReactionControlsProps, 'flow'> & { postId: string | number }) => {
+  const flow = hooks.useWordPostReaction(postId)
+  return <PostReactionControls {...props} flow={flow} />
+}
+
+const styles = StyleSheet.create({
+  root: { gap: 8 },
+  buttons: { flexDirection: 'row', gap: 8 },
+  button: {
+    width: 42,
+    height: 42,
+    borderRadius: 999,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(11,10,21,.6)',
+    borderWidth: 1,
+    borderColor: 'rgba(196,181,255,.12)',
+  },
+  selected: { backgroundColor: '#6040B8', borderColor: '#C4B5FF' },
+  disabled: { opacity: 0.5 },
+  icon: { fontSize: 18 },
+  message: { color: '#BBBFF4', fontSize: 13 },
+  error: { gap: 6, maxWidth: 260 },
+  retry: { color: '#C4B5FF', textDecorationLine: 'underline' },
+})