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

package/package.json

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

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 },
+})

package/src/sections/discussion/CommentImages.tsx

@@ -59,6 +59,16 @@ const LoadedImage = ({
   return (
     <Image
       source={{ uri: image.data }}
+      accessible={full}
+      accessibilityLabel={
+        full
+          ? t('Image {{number}} of {{total}}', {
+              number: index + 1,
+              total: comment.images.length,
+            })
+          : undefined
+      }
+      accessibilityLiveRegion={full ? 'polite' : undefined}
       style={s.image}
       resizeMode={full ? 'contain' : 'cover'}
     />
@@ -72,12 +82,14 @@ export const CommentImages = ({
   previewKey,
   onPreviewChange,
   locale,
+  renderCloseIcon,
 }: {
   eventId: string
   comment: EventComment
   previewKey?: string
   onPreviewChange: (open: boolean) => void
   locale?: string
+  renderCloseIcon?: (color: string) => React.ReactNode
 }) => {
   const t = useAccountT(locale)
   const theme = useTheme()
@@ -140,19 +152,23 @@ export const CommentImages = ({
         >
           <View style={s.preview}>
             <View style={s.toolbar}>
-              <Text accessibilityLiveRegion="polite" style={white}>
-                {t('Image {{number}} of {{total}}', {
-                  number: position + 1,
-                  total: images.length,
-                })}
-              </Text>
               <Pressable
                 accessibilityRole="button"
                 accessibilityLabel={t('Close image')}
-                style={s.navButton}
+                style={s.closeButton}
                 onPress={() => setSelected(null)}
               >
-                <Text style={white}>{t('Close')}</Text>
+                <View
+                  pointerEvents="none"
+                  accessible={false}
+                  importantForAccessibility="no-hide-descendants"
+                >
+                  {renderCloseIcon ? (
+                    renderCloseIcon('#9F9CB0')
+                  ) : (
+                    <Text style={[white, s.closeGlyph]}>×</Text>
+                  )}
+                </View>
               </Pressable>
             </View>
             <View style={s.full}>
@@ -306,11 +322,19 @@ const s = StyleSheet.create({
   preview: {
     flex: 1,
     backgroundColor: 'rgba(11,10,21,0.96)',
-    paddingTop: 60,
+    paddingTop: 53,
     paddingBottom: 40,
     paddingHorizontal: 16,
   },
-  toolbar: { flexDirection: 'row', justifyContent: 'space-between', padding: 12 },
+  toolbar: { flexDirection: 'row', justifyContent: 'flex-end' },
+  closeButton: {
+    width: 44,
+    height: 44,
+    marginRight: -10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeGlyph: { fontSize: 28, lineHeight: 28, color: '#9F9CB0', textAlign: 'center' },
   full: { flex: 1, width: '100%' },
   white: { color: '#EBEBEE', fontSize: 16 },
   navButton: {

package/src/sections/index.ts

@@ -26,3 +26,9 @@ export * from './TicketGift'
 
 export { AccountRewardsSection } from './AccountRewards'
 export * from './PostReaction'
+export {
+  Streaming,
+  StreamingView,
+  type StreamingProps,
+  type StreamingProvider,
+} from './Streaming'