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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.7",
   "description": "TheTicketFairy ReactNative Checkout library",
   "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",

package/src/sections/AccountDeletion.tsx

@@ -0,0 +1,329 @@
+import React, { useMemo } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Linking,
+  Pressable,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { hooks, type AccountDeletionFlow } from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { resolveTheme, type CheckoutTheme } from '../ui/theme'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface AccountDeletionProps {
+  showHeader?: boolean
+  showExplanation?: boolean
+  onSignIn?: () => void
+  onDone?: () => void
+  onOpenTeam?: (url: string) => void | Promise<void>
+  locale?: string
+  translate?: (english: string, values?: Record<string, string | number>) => string
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+}
+
+export const AccountDeletion = (props: AccountDeletionProps) => {
+  const deletion = hooks.useAccountDeletion()
+  return <AccountDeletionView {...props} deletion={deletion} />
+}
+
+/** Native presentation only: the common flow owns proof, retries and deletion. */
+export const AccountDeletionView = ({
+  deletion: flow,
+  showHeader = true,
+  showExplanation = true,
+  onSignIn,
+  onDone,
+  onOpenTeam,
+  locale,
+  translate,
+  theme: override,
+  style,
+}: AccountDeletionProps & { deletion: AccountDeletionFlow }) => {
+  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 text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const action = (
+    label: string,
+    execute: () => void,
+    danger = false,
+    disabled = flow.busy
+  ) => (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ disabled, busy: flow.busy }}
+      disabled={disabled}
+      onPress={() => {
+        try {
+          assertOwner()
+          execute()
+        } catch {
+          /* A retained control belongs to its original account. */
+        }
+      }}
+      style={[
+        s.button,
+        { borderColor: danger ? theme.error : theme.accent },
+        disabled && s.disabled,
+      ]}
+    >
+      <Text style={[text, { color: danger ? theme.error : theme.accent }]}>
+        {t(label)}
+      </Text>
+    </Pressable>
+  )
+  const openTeam = async (url: string) => {
+    try {
+      assertOwner()
+      await (onOpenTeam ? onOpenTeam(url) : Linking.openURL(url))
+    } catch {
+      try {
+        assertOwner()
+        Alert.alert(
+          t('Team settings'),
+          t('Unable to open team settings. Please try again.')
+        )
+      } catch {
+        /* A retired link cannot display feedback for another account. */
+      }
+    }
+  }
+  if (flow.deleted)
+    return (
+      <View style={[s.container, style]}>
+        <Text style={[s.title, text]}>{t('Account deleted')}</Text>
+        <Text accessibilityLiveRegion="polite" style={[s.body, text]}>
+          {t('Your Ticket Fairy account has been closed. You are signed out.')}
+        </Text>
+        <Text style={[s.body, muted]}>
+          {t('Financial and transaction records are retained where required.')}
+        </Text>
+        {onDone && action('Continue browsing', onDone, false, false)}
+      </View>
+    )
+  if (flow.confirmingAccount)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.signedIn)
+    return (
+      <View style={[s.container, style]}>
+        {flow.error && (
+          <>
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+            {action('Try again', () => void flow.retry())}
+          </>
+        )}
+        <Text style={[s.body, text]}>
+          {t('Sign in to review and delete your Ticket Fairy account.')}
+        </Text>
+        {onSignIn && action('Sign in', onSignIn, false, false)}
+      </View>
+    )
+  if (flow.query.isPending)
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading account deletion options…')}
+        color={theme.accent}
+      />
+    )
+  if (!flow.status)
+    return (
+      <View style={[s.container, style]}>
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error || 'Account deletion options could not load.')}
+        </Text>
+        {action('Try again', () => void flow.retry(), false, false)}
+      </View>
+    )
+  const status = flow.status
+  const password = status.verification === 'password'
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && <Text style={[s.title, text]}>{t('Delete account')}</Text>}
+      {showExplanation && (
+        <>
+          <Text style={[s.body, text]}>
+            {t(
+              'This closes your Ticket Fairy account across the app, website and organiser dashboard.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is removed')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Your personal profile, sign-in access, friends, saved preferences and the content you posted are removed or anonymised.'
+            )}
+          </Text>
+          <Text style={[s.heading, text]}>{t('What is kept')}</Text>
+          <Text style={[s.body, muted]}>
+            {t(
+              'Financial and transaction records are retained where required. Deleting your account does not refund or cancel orders, and does not delete other ticket holders’ details.'
+            )}
+          </Text>
+        </>
+      )}
+      {status.appleLinked && (
+        <Text style={[s.body, muted]}>
+          {t(
+            'If Ticket Fairy still appears in your Apple Account after deletion, remove its access there too.'
+          )}
+        </Text>
+      )}
+      {status.blockers.length > 0 && (
+        <View style={[s.panel, { borderColor: theme.border }]}>
+          <Text style={[s.heading, text]}>{t('Before you delete your account')}</Text>
+          {status.blockers.map((blocker) => (
+            <View key={blocker.code} style={s.container}>
+              <Text style={[s.body, text]}>{t(blocker.message)}</Text>
+              {blocker.brands?.map((brand) =>
+                brand.teamUrl ? (
+                  <Pressable
+                    key={brand.id}
+                    accessibilityRole="link"
+                    disabled={flow.busy}
+                    onPress={() => {
+                      if (brand.teamUrl) void openTeam(brand.teamUrl)
+                    }}
+                    style={s.link}
+                  >
+                    <Text style={{ color: theme.accent, fontFamily: theme.fontFamily }}>
+                      {t('Open {{name}} team settings', { name: brand.name })}
+                    </Text>
+                  </Pressable>
+                ) : null
+              )}
+            </View>
+          ))}
+          {action('Check again', () => void flow.retry())}
+        </View>
+      )}
+      {!flow.isOpen && status.canDelete && action('Delete account', flow.open, true)}
+      {flow.isOpen && (
+        <View
+          accessibilityLabel={t('Confirm account deletion')}
+          style={[s.panel, { borderColor: theme.border }]}
+        >
+          <Text style={[s.heading, text]}>{t('Delete your account permanently?')}</Text>
+          <Text style={[s.body, text]}>
+            {t('This cannot be undone. Confirm that you want to close this account.')}
+          </Text>
+          {!password && (
+            <>
+              <Text style={[s.body, muted]}>
+                {t('We will email a deletion code to {{email}}.', {
+                  email: status.email,
+                })}
+              </Text>
+              {action(
+                flow.codeSent ? 'Send a new code' : 'Email deletion code',
+                () => void flow.sendCode(locale),
+                false,
+                flow.busy || flow.retryAfter > 0
+              )}
+              {flow.codeSent && (
+                <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+                  {t('A code was sent to {{email}}. It expires in {{minutes}} minutes.', {
+                    email: flow.codeSent.email,
+                    minutes: flow.codeSent.expiresInMinutes,
+                  })}
+                </Text>
+              )}
+            </>
+          )}
+          {flow.retryAfter > 0 && (
+            <Text accessibilityLiveRegion="polite" style={[s.body, muted]}>
+              {t('Try again in {{seconds}} seconds.', { seconds: flow.retryAfter })}
+            </Text>
+          )}
+          <Text style={[s.heading, text]}>
+            {t(password ? 'Current password' : 'Deletion code')}
+          </Text>
+          <TextInput
+            accessibilityLabel={t(password ? 'Current password' : 'Deletion code')}
+            value={flow.proof}
+            onChangeText={flow.setProof}
+            secureTextEntry={password}
+            textContentType={password ? 'password' : 'oneTimeCode'}
+            autoComplete={password ? 'current-password' : 'one-time-code'}
+            keyboardType={password ? 'default' : 'number-pad'}
+            maxLength={password ? undefined : 6}
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={!flow.busy}
+            style={[
+              s.input,
+              text,
+              { borderColor: theme.border, backgroundColor: theme.background },
+            ]}
+          />
+          {flow.error && (
+            <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+              {t(flow.error)}
+            </Text>
+          )}
+          {flow.busy && (
+            <ActivityIndicator
+              color={theme.accent}
+              accessibilityLabel={t('Please wait…')}
+            />
+          )}
+          {action('Keep account', flow.cancel)}
+          {action(
+            'Permanently delete account',
+            () => void flow.confirm(),
+            true,
+            !flow.canConfirm
+          )}
+        </View>
+      )}
+      {!flow.isOpen && flow.error && (
+        <Text accessibilityRole="alert" style={[s.body, { color: theme.error }]}>
+          {t(flow.error)}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+const s = StyleSheet.create({
+  container: { gap: 12 },
+  title: { fontSize: 22, fontWeight: '600', lineHeight: 28 },
+  heading: { fontSize: 16, fontWeight: '600', lineHeight: 23 },
+  body: { fontSize: 15, lineHeight: 22 },
+  panel: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    padding: 16,
+    gap: 12,
+  },
+  button: {
+    minHeight: 48,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: { minHeight: 48, borderWidth: 1, borderRadius: 10, padding: 12, fontSize: 16 },
+  link: { minHeight: 44, justifyContent: 'center' },
+  disabled: { opacity: 0.5 },
+})

package/src/sections/EventDiscussionView.tsx

@@ -35,6 +35,8 @@ export interface EventDiscussionViewProps {
   previewKey?: string
   locale?: string
   renderReplyIcon?: (color: string) => React.ReactNode
+  /** Optional host artwork; the SDK owns the accessible close button and behavior. */
+  renderImageCloseIcon?: (color: string) => React.ReactNode
   onModerationFilter?: (filter: 'pending' | 'reported' | undefined) => void
   renderReactionIcon?: (
     reaction: 'up' | 'down',
@@ -54,6 +56,7 @@ const EventDiscussionBody = ({
   previewKey,
   locale,
   renderReplyIcon,
+  renderImageCloseIcon,
   onModerationFilter,
   renderReactionIcon,
 }: EventDiscussionViewProps) => {
@@ -171,6 +174,7 @@ const EventDiscussionBody = ({
               previewKey={previewKey}
               locale={locale}
               onPreviewChange={setImageOpen}
+              renderCloseIcon={renderImageCloseIcon}
             />
             <Text selectable style={[text, s.body]}>
               {comment.status === 'deleted' ? 'Comment removed' : comment.body}

package/src/sections/Streaming.tsx

@@ -0,0 +1,278 @@
+import React, { useMemo, useRef, useState, type ReactNode } from 'react'
+import {
+  ActivityIndicator,
+  Alert,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { hooks, type AccountPreferences } 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.useAccountPreferences>
+export type StreamingProvider = keyof AccountPreferences['music']
+type SupportedProvider = Exclude<StreamingProvider, 'youtubeMusic'>
+export interface StreamingProps {
+  /** Open the first-party review browser, resolving when the person returns. */
+  onOpenMusic: (url: string, provider: SupportedProvider) => void | Promise<void>
+  onSignIn?: () => void
+  locale?: string
+  translate?: (english: string, vars?: Record<string, string | number>) => string
+  renderProviderIcon?: (provider: StreamingProvider) => ReactNode
+  showHeader?: boolean
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+}
+
+/** Standalone native presentation; account rules and state stay in the common hook. */
+export const Streaming = (props: StreamingProps) => {
+  const preferences = hooks.useAccountPreferences()
+  return <StreamingView {...props} preferences={preferences} />
+}
+
+/** Compose an existing shared flow, for example to refetch on native navigation focus. */
+export const StreamingView = ({
+  preferences: flow,
+  onOpenMusic,
+  onSignIn,
+  locale,
+  translate,
+  renderProviderIcon,
+  showHeader = true,
+  theme: override,
+  style,
+}: StreamingProps & { preferences: Flow }) => {
+  const defaultT = useAccountT(locale)
+  const t = translate ?? defaultT
+  const inherited = useTheme()
+  const theme = useMemo(
+    () => (override ? resolveTheme({ ...inherited, ...override }) : inherited),
+    [inherited, override]
+  )
+  const session = hooks.useAuthSession()
+  const assertOwner = hooks.useSessionAction()
+  const pendingBrowser = useRef({ scope: session.sessionScope, locked: false })
+  const [stored, setStored] = useState({
+    scope: session.sessionScope,
+    busy: false,
+    error: '',
+  })
+  const local =
+    stored.scope === session.sessionScope
+      ? stored
+      : { scope: session.sessionScope, busy: false, error: '' }
+  const busy = flow.busy || local.busy
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const muted = { color: theme.muted, fontFamily: theme.fontFamily }
+  const connect = async (provider: SupportedProvider) => {
+    try {
+      assertOwner()
+    } catch {
+      return
+    }
+    if (
+      pendingBrowser.current.scope === session.sessionScope &&
+      pendingBrowser.current.locked
+    )
+      return
+    pendingBrowser.current = { scope: session.sessionScope, locked: true }
+    setStored({ scope: session.sessionScope, busy: true, error: '' })
+    try {
+      const link = await (provider === 'spotify'
+        ? flow.connectSpotify()
+        : flow.connectAppleMusic())
+      assertOwner()
+      if (!link) return
+      await onOpenMusic(link.url, provider)
+      assertOwner()
+      await flow.query.refetch()
+      assertOwner()
+    } catch {
+      try {
+        assertOwner()
+        setStored({
+          scope: session.sessionScope,
+          busy: false,
+          error: 'Unable to open the connection page. Please try again.',
+        })
+      } catch {
+        /* A retired browser callback cannot publish into another buyer. */
+      }
+    } finally {
+      try {
+        assertOwner()
+        if (pendingBrowser.current.scope === session.sessionScope)
+          pendingBrowser.current.locked = false
+        setStored((state) => ({ ...state, scope: session.sessionScope, busy: false }))
+      } catch {
+        /* The new owner keeps its own presentation state. */
+      }
+    }
+  }
+  const disconnect = (provider: SupportedProvider) => {
+    try {
+      assertOwner()
+    } catch {
+      return
+    }
+    Alert.alert(
+      t(provider === 'spotify' ? 'Disconnect Spotify?' : 'Disconnect Apple Music?'),
+      t(
+        provider === 'spotify'
+          ? 'Your imported Spotify data and approved names will be removed. Your saved interests stay.'
+          : 'Your imported artists and genres will be removed. Your saved interests will stay.'
+      ),
+      [
+        { text: t('Cancel'), style: 'cancel' },
+        {
+          text: t('Disconnect'),
+          style: 'destructive',
+          onPress: () => {
+            try {
+              assertOwner()
+              void (provider === 'spotify'
+                ? flow.disconnectSpotify()
+                : flow.disconnectAppleMusic())
+            } catch {
+              /* Confirmation belongs to the buyer who opened it. */
+            }
+          },
+        },
+      ]
+    )
+  }
+  const action = (
+    label: string,
+    provider: string,
+    onPress: () => void,
+    disabled = busy
+  ) => (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={
+        provider ? t('{{action}} {{provider}}', { action: t(label), provider }) : t(label)
+      }
+      accessibilityState={{ disabled, busy }}
+      disabled={disabled}
+      onPress={onPress}
+      style={[s.button, { borderColor: theme.accent }, disabled && s.disabled]}
+    >
+      <Text style={[text, { color: theme.accent, fontSize: theme.fontSize }]}>
+        {t(label)}
+      </Text>
+    </Pressable>
+  )
+  const music = flow.query.data?.music
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && <Text style={[s.title, text]}>{t('Streaming')}</Text>}
+      <Text style={[s.intro, text]}>
+        {t('Choose which artist and genre names to use for event suggestions.')}
+      </Text>
+      {flow.query.isPending && (
+        <ActivityIndicator
+          accessibilityLabel={t('Loading streaming connections…')}
+          color={theme.accent}
+        />
+      )}
+      {music &&
+        (
+          [
+            { key: 'spotify', name: 'Spotify', connection: music.spotify },
+            { key: 'appleMusic', name: 'Apple Music', connection: music.appleMusic },
+            {
+              key: 'youtubeMusic',
+              name: 'YouTube Music',
+              connection: music.youtubeMusic,
+            },
+          ] as const
+        ).map(({ key, name, connection }) => (
+          <View key={key} style={[s.provider, { borderBottomColor: theme.border }]}>
+            <View style={s.identity}>
+              {renderProviderIcon?.(key)}
+              <View style={s.names}>
+                <Text style={[s.name, text]}>{name}</Text>
+                <Text style={[s.status, muted]}>
+                  {connection.connected
+                    ? t('Connected')
+                    : connection.available
+                      ? t('Not connected')
+                      : t(connection.reason || 'Not available yet')}
+                </Text>
+              </View>
+            </View>
+            {key !== 'youtubeMusic' && (
+              <View style={s.actions}>
+                {connection.available &&
+                  action(
+                    connection.connected ? 'Review choices' : 'Connect',
+                    name,
+                    () => void connect(key)
+                  )}
+                {connection.connected &&
+                  action('Disconnect', name, () => disconnect(key))}
+              </View>
+            )}
+            {connection.connected && (
+              <Text style={[s.approved, muted]}>
+                {connection.artists.length || connection.genres.length
+                  ? [...connection.artists, ...connection.genres].join(', ')
+                  : t('No artist or genre names approved yet.')}
+              </Text>
+            )}
+          </View>
+        ))}
+      {(local.error || flow.error || flow.query.error) && (
+        <Text accessibilityRole="alert" style={[s.note, { color: theme.error }]}>
+          {t(local.error || flow.error || flow.query.error?.message || '')}
+        </Text>
+      )}
+      {flow.message && (
+        <Text accessibilityLiveRegion="polite" style={[s.note, muted]}>
+          {t(flow.message)}
+        </Text>
+      )}
+      {action('Refresh connections', '', () => void flow.query.refetch())}
+      {!music && onSignIn && action('Sign in', '', onSignIn)}
+      <Text style={[s.note, muted]}>
+        {t(
+          'Only the artist and genre names you approve are used for these event suggestions.'
+        )}
+      </Text>
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  container: { width: '100%' },
+  title: { fontSize: 20, fontWeight: '500', marginBottom: 16 },
+  intro: { fontSize: 20, lineHeight: 28, marginVertical: 24 },
+  provider: { borderBottomWidth: StyleSheet.hairlineWidth, paddingVertical: 20, gap: 16 },
+  identity: { flexDirection: 'row', alignItems: 'center', gap: 16 },
+  names: { flex: 1 },
+  name: { fontSize: 16, lineHeight: 24 },
+  status: { fontSize: 14, lineHeight: 20, marginTop: 4 },
+  actions: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    gap: 10,
+  },
+  button: {
+    alignSelf: 'flex-end',
+    borderWidth: 1,
+    borderRadius: 24,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    minHeight: 44,
+    justifyContent: 'center',
+    marginTop: 4,
+  },
+  disabled: { opacity: 0.5 },
+  approved: { fontSize: 14, lineHeight: 20 },
+  note: { fontSize: 14, lineHeight: 20, marginTop: 24 },
+})