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

package/src/sections/SeatsIoMap.tsx

@@ -0,0 +1,110 @@
+import React, { useMemo, type FC } from 'react'
+import { View } from 'react-native'
+import { WebView } from 'react-native-webview'
+import {
+  hooks,
+  seatsIoChartDocument,
+  seatsIoLineNotes,
+  seatsIoRendererNavigation,
+  type SeatsIoMapData,
+} from 'tf-checkout-shared'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { FrozenFields } from '../ui/Frozen'
+import { Select } from '../ui/Select'
+import {
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  MutedText,
+  SectionHeader,
+} from '../ui/primitives'
+
+export const SeatsIoMap: FC<{
+  eventId: string
+  initial: SeatsIoMapData
+  onContinue?: () => void
+}> = ({ eventId, initial, onContinue }) => {
+  const checkout = useCheckoutContext()
+  const flow = hooks.useSeatsIoSelection(eventId, checkout, initial, onContinue)
+  const bundleStarting = hooks.useBundleStarting(checkout.store)
+  const html = useMemo(
+    () => (flow.data.chart ? seatsIoChartDocument(flow.data.chart, flow.nonce) : ''),
+    [flow.data.chart, flow.nonce]
+  )
+  return (
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Card>
+        <SectionHeader title="Select your seats" />
+        {flow.data.maps.length > 1 || !flow.data.chart ? (
+          <Select
+            value={flow.data.chart?.mapId ?? ''}
+            placeholder="Choose a date or seating chart"
+            disabled={flow.loading || flow.adding || checkout.isBusy || bundleStarting}
+            options={flow.data.maps.map((map) => ({
+              value: map.id,
+              label: `${map.name}${map.eventStartsAt ? ` · ${map.eventStartsAt}` : ''}`,
+            }))}
+            onChange={(value) => void flow.selectMap(value)}
+          />
+        ) : null}
+        {flow.data.nextCursor && (
+          <Button
+            variant="ghost"
+            disabled={flow.loading}
+            onPress={() =>
+              void flow.selectMap(flow.data.chart?.mapId ?? '', flow.data.nextCursor!)
+            }
+          >
+            Show more dates
+          </Button>
+        )}
+        {flow.loading && <Loader />}
+        {flow.data.chart && (
+          <View style={{ height: 440 }}>
+            <WebView
+              key={flow.nonce}
+              source={{ html }}
+              javaScriptEnabled
+              incognito
+              originWhitelist={['about:*', 'https://*.seatsio.net']}
+              scrollEnabled={false}
+              onShouldStartLoadWithRequest={({ url }) => seatsIoRendererNavigation(url)}
+              onMessage={({ nativeEvent }) => flow.onMessage(nativeEvent.data)}
+              onError={() =>
+                flow.onMessage(JSON.stringify({ type: 'error', nonce: flow.nonce }))
+              }
+            />
+          </View>
+        )}
+        {flow.preview.map((line) => (
+          <MutedText key={line.ticketTypeId}>
+            {line.labels.length} × {line.name} · {flow.data.chart?.currency} {line.price}{' '}
+            each · {line.labels.join(', ')} {seatsIoLineNotes(line).join(' ')}
+          </MutedText>
+        ))}
+        {flow.secondsLeft != null && (
+          <MutedText>
+            Seats held for {Math.floor(flow.secondsLeft / 60)}:
+            {String(flow.secondsLeft % 60).padStart(2, '0')}
+          </MutedText>
+        )}
+        {flow.error && (
+          <>
+            <ErrorText>{flow.error}</ErrorText>
+            <Button variant="ghost" onPress={flow.restart}>
+              Start again
+            </Button>
+          </>
+        )}
+        <Button
+          onPress={flow.getTickets}
+          loading={flow.adding}
+          disabled={!flow.canContinue || bundleStarting}
+        >
+          Get tickets
+        </Button>
+      </Card>
+    </FrozenFields>
+  )
+}

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