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

package/src/sections/ProfileSettings.tsx

@@ -0,0 +1,446 @@
+import React, { useEffect, useMemo, type ReactNode } from 'react'
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import {
+  hooks,
+  PROFILE_LINK_LIMIT,
+  type ProfileLink,
+  type ProfileVisibility,
+} from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { resolveTheme, type CheckoutTheme } from '../ui/theme'
+import { useAccountT } from '../ui/useAccountT'
+
+type Flow = ReturnType<typeof hooks.useProfileSettings>
+export interface ProfileSettingsProps {
+  mode: 'links' | 'visibility'
+  showHeader?: boolean
+  onBack?: () => void
+  onSignIn?: () => void
+  locale?: string
+  translate?: (english: string, values?: Record<string, string | number>) => string
+  renderLinkIcon?: (type: ProfileLink['type']) => ReactNode
+  renderSaveButton?: (label: string, onPress: () => void, disabled: boolean) => ReactNode
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+}
+export const ProfileSettings = (props: ProfileSettingsProps) => {
+  const settings = hooks.useProfileSettings()
+  return <ProfileSettingsView {...props} settings={settings} />
+}
+/** The same common editor owns drafts, retries and visibility on both platforms. */
+export const ProfileSettingsView = ({
+  mode,
+  settings: flow,
+  showHeader = true,
+  onBack,
+  onSignIn,
+  locale,
+  translate,
+  renderLinkIcon,
+  renderSaveButton,
+  theme: override,
+  style,
+}: ProfileSettingsProps & { settings: Flow }) => {
+  const defaultT = useAccountT(locale)
+  const t = translate ?? defaultT
+  const inherited = useTheme()
+  const theme = useMemo(
+    () => (override ? resolveTheme({ ...inherited, ...override }) : inherited),
+    [inherited, override]
+  )
+  const assertOwner = hooks.useSessionAction()
+  const act = (action: () => unknown) => {
+    try {
+      assertOwner()
+      action()
+    } catch {
+      /* A retired control cannot act for another buyer. */
+    }
+  }
+  useEffect(() => {
+    if (flow.settings) flow.open(mode)
+  }, [mode, flow.scopeKey, Boolean(flow.settings)])
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const title = mode === 'links' ? 'Links' : 'Profile visibility'
+  const button = (label: string, action: () => unknown, disabled = flow.busy) => (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      accessibilityState={{ disabled, busy: flow.busy }}
+      onPress={() => act(action)}
+      style={[s.button, { borderColor: theme.border }, disabled && s.disabled]}
+    >
+      <Text style={[text, { color: theme.accent }]}>{t(label)}</Text>
+    </Pressable>
+  )
+  const saveButton = (action: () => void, disabled: boolean) =>
+    renderSaveButton
+      ? renderSaveButton(t('Save'), () => act(action), disabled)
+      : button('Save', action, disabled)
+  if (flow.confirmingAccount || (flow.signedIn && flow.query.isPending))
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading profile…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.signedIn)
+    return (
+      <View style={[s.container, style]}>
+        {flow.admission.error && (
+          <>
+            <Text accessibilityRole="alert" style={{ color: theme.error }}>
+              {t(flow.admission.error.message)}
+            </Text>
+            {button('Try again', () => flow.admission.refetch(), false)}
+          </>
+        )}
+        <Text style={text}>{t('Sign in to edit your profile.')}</Text>
+        {onSignIn && button('Sign in', onSignIn, false)}
+      </View>
+    )
+  if (!flow.settings)
+    return (
+      <View style={[s.container, style]}>
+        <Text accessibilityRole="alert" style={{ color: theme.error }}>
+          {t(flow.query.error?.message ?? 'Your profile settings could not load.')}
+        </Text>
+        {button('Try again', () => flow.query.refetch(), false)}
+      </View>
+    )
+  const editor = flow.editor
+  const cancel = () => {
+    if (flow.cancel()) {
+      if (onBack) onBack()
+      else flow.open(mode)
+    }
+  }
+  const types: [ProfileLink['type'], string][] = [
+    ['instagram', 'Add Instagram account'],
+    ['facebook', 'Add Facebook account'],
+    ['x', 'Add X account'],
+    ['external', 'Add external link'],
+  ]
+  const choices: [ProfileVisibility, string][] = [
+    ['everybody', 'Everybody'],
+    ['contacts', 'My contacts'],
+    ['nobody', 'Nobody'],
+  ]
+  const linkType = editor?.link?.value.type
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && <Text style={[s.title, text]}>{t(title)}</Text>}
+      {mode === 'links' ? (
+        <>
+          <Text style={[s.caption, muted]}>{t('Links').toLocaleUpperCase(locale)}</Text>
+          {editor?.links.map((link, index) => (
+            <View key={index} style={[s.linkRow, { borderBottomColor: theme.border }]}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={t('Edit {{title}}', { title: link.title })}
+                disabled={flow.busy}
+                onPress={() => flow.startLink(link.type, index)}
+                style={[s.rowAction, s.grow]}
+              >
+                {renderLinkIcon?.(link.type)}
+                <View style={s.grow}>
+                  <Text style={[s.label, text]}>{link.title}</Text>
+                  <Text style={[s.url, muted]} numberOfLines={1}>
+                    {link.url}
+                  </Text>
+                </View>
+              </Pressable>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={t('Remove {{title}}', { title: link.title })}
+                disabled={flow.busy}
+                onPress={() => flow.removeLink(index)}
+                style={s.remove}
+              >
+                <Text style={{ color: theme.muted, fontSize: 24 }}>×</Text>
+              </Pressable>
+            </View>
+          ))}
+          {types.map(([type, label]) => (
+            <Pressable
+              key={type}
+              accessibilityRole="button"
+              disabled={flow.busy || (editor?.links.length ?? 0) >= PROFILE_LINK_LIMIT}
+              onPress={() => flow.startLink(type)}
+              style={[
+                s.linkRow,
+                { borderBottomColor: type === 'external' ? 'transparent' : theme.border },
+              ]}
+            >
+              {renderLinkIcon?.(type) ?? (
+                <Text style={[muted, s.fallbackIcon]}>
+                  {type === 'external' ? '+' : type === 'x' ? 'X' : '@'}
+                </Text>
+              )}
+              <Text
+                style={[s.label, text, type === 'external' && { color: theme.accent }]}
+              >
+                {t(label)}
+              </Text>
+            </Pressable>
+          ))}
+        </>
+      ) : (
+        <>
+          <Text style={[s.heading, text]}>{t('Who can view your profile?')}</Text>
+          {choices.map(([value, label]) => (
+            <Pressable
+              key={value}
+              accessibilityRole="radio"
+              accessibilityState={{
+                checked: editor?.visibility === value,
+                disabled: flow.busy,
+              }}
+              disabled={flow.busy}
+              onPress={() => flow.setVisibility(value)}
+              style={[s.choice, { borderBottomColor: theme.border }]}
+            >
+              <Text style={[s.label, text]}>{t(label)}</Text>
+              <View
+                style={[
+                  s.radio,
+                  {
+                    borderColor:
+                      editor?.visibility === value ? theme.accent : theme.muted,
+                  },
+                ]}
+              >
+                {editor?.visibility === value && (
+                  <View style={[s.radioDot, { backgroundColor: theme.accent }]} />
+                )}
+              </View>
+            </Pressable>
+          ))}
+          <Text style={[s.help, muted]}>
+            {t(
+              editor?.visibility === 'everybody'
+                ? 'All signed-in Ticket Fairy members can view your profile.'
+                : editor?.visibility === 'contacts'
+                  ? 'Only your accepted friends can view your profile.'
+                  : 'Only you can view your profile.'
+            )}
+          </Text>
+        </>
+      )}
+      {flow.error && (
+        <Text accessibilityRole="alert" style={[s.help, { color: theme.error }]}>
+          {t(flow.error)}
+        </Text>
+      )}
+      {flow.saved && (
+        <Text accessibilityLiveRegion="polite" style={[s.help, text]}>
+          {t('Profile settings saved.')}
+        </Text>
+      )}
+      <View style={s.footer}>
+        {button('Cancel', cancel)}
+        {saveButton(
+          () => {
+            void flow.save()
+          },
+          flow.busy || !editor || Boolean(editor.link)
+        )}
+      </View>
+      <Modal
+        transparent
+        visible={Boolean(editor?.link)}
+        animationType="slide"
+        onRequestClose={() => {
+          flow.cancelLink()
+        }}
+      >
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          style={s.backdrop}
+        >
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel={t('Cancel')}
+            onPress={() => flow.cancelLink()}
+            style={s.scrim}
+            disabled={flow.busy}
+          />
+          <View style={[s.sheet, { backgroundColor: theme.surface }]}>
+            <View style={[s.handle, { backgroundColor: theme.muted }]} />
+            <ScrollView
+              keyboardShouldPersistTaps="handled"
+              contentContainerStyle={s.form}
+            >
+              <Text style={[s.heading, text]}>
+                {t(
+                  linkType === 'external'
+                    ? 'Add external link'
+                    : 'Enter your {{provider}} username',
+                  {
+                    provider:
+                      linkType === 'instagram'
+                        ? 'Instagram'
+                        : linkType === 'facebook'
+                          ? 'Facebook'
+                          : 'X',
+                  }
+                )}
+              </Text>
+              {linkType !== 'external' && (
+                <Text style={[s.help, muted]}>
+                  {t(
+                    'Share your username so others can easily find and connect with you.'
+                  )}
+                </Text>
+              )}
+              {linkType === 'external' && (
+                <>
+                  <Text style={muted}>{t('Link title')}</Text>
+                  <TextInput
+                    accessibilityLabel={t('Link title')}
+                    value={editor?.link?.value.title ?? ''}
+                    onChangeText={(title) => flow.changeLink({ title })}
+                    editable={!flow.busy}
+                    maxLength={80}
+                    style={[
+                      s.input,
+                      text,
+                      { borderColor: theme.border, backgroundColor: theme.background },
+                    ]}
+                  />
+                </>
+              )}
+              <Text style={muted}>
+                {t(linkType === 'external' ? 'Profile URL' : 'Username')}
+              </Text>
+              <TextInput
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType={linkType === 'external' ? 'url' : 'default'}
+                accessibilityLabel={t(
+                  linkType === 'external' ? 'Profile URL' : 'Username'
+                )}
+                placeholder={linkType === 'external' ? 'https://' : '@username'}
+                placeholderTextColor={theme.muted}
+                value={editor?.link?.value.url ?? ''}
+                onChangeText={(url) => flow.changeLink({ url })}
+                editable={!flow.busy}
+                maxLength={512}
+                style={[
+                  s.input,
+                  text,
+                  { borderColor: theme.border, backgroundColor: theme.background },
+                ]}
+              />
+              {flow.error && (
+                <Text accessibilityRole="alert" style={{ color: theme.error }}>
+                  {t(flow.error)}
+                </Text>
+              )}
+              <View style={s.footer}>
+                {button('Cancel', () => flow.cancelLink())}
+                {saveButton(() => {
+                  void flow.saveLinkChanges()
+                }, flow.busy)}
+              </View>
+            </ScrollView>
+          </View>
+        </KeyboardAvoidingView>
+      </Modal>
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  container: { gap: 16 },
+  title: { fontSize: 20, fontWeight: '500' },
+  caption: { fontSize: 12, marginTop: 12 },
+  heading: { fontSize: 20, fontWeight: '500', lineHeight: 28 },
+  label: { fontSize: 16, lineHeight: 24 },
+  url: { fontSize: 12, lineHeight: 18 },
+  grow: { flex: 1 },
+  linkRow: {
+    minHeight: 52,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  rowAction: { minHeight: 52, flexDirection: 'row', alignItems: 'center', gap: 12 },
+  remove: { minWidth: 44, minHeight: 44, alignItems: 'center', justifyContent: 'center' },
+  fallbackIcon: { width: 20, textAlign: 'center', fontSize: 18 },
+  choice: {
+    minHeight: 56,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  radio: {
+    width: 24,
+    height: 24,
+    borderWidth: 1.5,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioDot: { width: 12, height: 12, borderRadius: 6 },
+  help: { fontSize: 14, lineHeight: 21 },
+  footer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 16,
+    marginTop: 20,
+  },
+  button: {
+    minHeight: 44,
+    minWidth: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: 24,
+    paddingHorizontal: 18,
+  },
+  disabled: { opacity: 0.5 },
+  backdrop: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.7)' },
+  scrim: { flex: 1 },
+  sheet: {
+    width: '100%',
+    maxWidth: 580,
+    alignSelf: 'center',
+    borderTopStartRadius: 24,
+    borderTopEndRadius: 24,
+    padding: 24,
+    maxHeight: '85%',
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2,
+    alignSelf: 'center',
+    marginBottom: 24,
+  },
+  form: { gap: 16, paddingBottom: 16 },
+  input: {
+    borderWidth: 1,
+    borderRadius: 28,
+    minHeight: 52,
+    paddingHorizontal: 20,
+    fontSize: 16,
+  },
+})