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

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/TicketChange.tsx

@@ -0,0 +1,379 @@
+/**
+ * `<TicketChange/>` — the RN analogue of the web section: a buyer changes or
+ * upgrades one ticket. It lists what the ticket can change to with the one
+ * price the server words, confirms, and makes the change; a paid change opens
+ * the hosted payment page. When no change is open it says why and offers
+ * "Sell it instead" or the upgrade waitlist. The flow lives in
+ * `hooks.useTicketChange`, shared with web.
+ *
+ * Pass `orderHash` (from the order email link) for a buyer with no account.
+ */
+import React, { useMemo, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  createTranslator,
+  hooks,
+  ticketChangeCharge,
+  ticketChangeDoneCopy,
+  ticketChangeView,
+  type LocaleCode,
+  type Messages,
+  type TicketChangeOption,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { rnPorts } from '../instance'
+import { useTheme } from '../ui/CheckoutProvider'
+import { Button, Card, ErrorText, Loader, SectionHeader } from '../ui/primitives'
+import type { ResolvedTheme } from '../ui/theme'
+
+export interface TicketChangeProps {
+  ticketHash: string
+  /** The order's own link hash, for a buyer who is not signed in. */
+  orderHash?: string
+  /** Fired by the Back button after a change that needed no payment is made.
+   *  Without it, Back returns to the start of the change flow. */
+  onChanged?: () => void
+  /** Opens server links (payment page, resale). Defaults to the system browser. */
+  openUrl?: (url: string) => void | Promise<void>
+  /** Opens the host's sign-in. When given, a credit change that needs an
+   *  account shows a Sign in button beside the prompt. A sign-in through the
+   *  SDK reads the options again by itself; a host with its own session
+   *  returns a promise that settles once the buyer is signed in. */
+  onLogin?: () => void | Promise<unknown>
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+export const TicketChange: FC<TicketChangeProps> = ({
+  ticketHash,
+  orderHash,
+  onChanged,
+  openUrl,
+  onLogin,
+  locale,
+  messages,
+  translate,
+}) => {
+  const theme = useTheme()
+  const s = useChangeStyles(theme)
+  const t = translate ?? createTranslator({ locale, messages })
+  const open = openUrl ?? rnPorts.openUrl
+  const flow = hooks.useTicketChange({ ticketHash, orderHash }, open)
+  const options = flow.query.data
+  // A credit change that needs an account: the prompt replaces Confirm, and
+  // the ticket stays as it is.
+  const signInLine = flow.signInRequired ? (
+    <View>
+      <Text style={s.muted} accessibilityLiveRegion="polite">
+        {t('ticketChange.signInRequired')}
+      </Text>
+      {onLogin ? (
+        <Button onPress={() => flow.signIn(onLogin)}>{t('ticketChange.signIn')}</Button>
+      ) : null}
+    </View>
+  ) : null
+  const label = (option: TicketChangeOption) =>
+    option.eventName
+      ? t('ticketChange.otherEvent', { name: option.name, event: option.eventName })
+      : option.name
+  // A change for this ticket from before the buyer left and came back is
+  // still running: the controls show busy, never dead.
+  const savingLine =
+    flow.saving && flow.step !== 'submitting' ? (
+      <Text style={s.muted} accessibilityLiveRegion="polite">
+        {t('common.stillSaving')}
+      </Text>
+    ) : null
+  // The options on screen may be old after a failed reread: say so, offer a
+  // retry, and keep every action disabled until it works.
+  const refreshLine = flow.refreshFailed ? (
+    <View>
+      <ErrorText>{t('ticketChange.refreshFailed')}</ErrorText>
+      <Button
+        variant="ghost"
+        disabled={!flow.can.retry}
+        onPress={() => void flow.retryRefresh()}
+      >
+        {t('ticketChange.retry')}
+      </Button>
+    </View>
+  ) : null
+  const header = (
+    <>
+      <SectionHeader title={t('ticketChange.heading')} />
+      {savingLine}
+      {refreshLine}
+    </>
+  )
+
+  // A payment for this ticket began in a flow that is gone: no new change
+  // until the buyer continues it, starts again, or it is over.
+  if (flow.paymentInProgress) {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t('ticketChange.paymentInProgress')}
+        </Text>
+        {flow.canContinuePayment ? (
+          <Button onPress={flow.continuePayment}>
+            {t('ticketChange.continuePayment')}
+          </Button>
+        ) : null}
+        {flow.notice ? <ErrorText>{t(flow.notice)}</ErrorText> : null}
+        <Button variant="ghost" onPress={flow.startAgain}>
+          {t('ticketChange.startAgain')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (flow.query.isLoading) {
+    return (
+      <Card>
+        {header}
+        <View style={s.loader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (!options) {
+    return (
+      <Card>
+        {header}
+        <ErrorText>
+          {flow.query.error
+            ? (flow.query.error as Error).message
+            : t('ticketChange.closed')}
+        </ErrorText>
+      </Card>
+    )
+  }
+
+  if (flow.step === 'done') {
+    // Only a made change is reported as one: a refund to wait for, or an
+    // answer that is not confirmed, leaves the ticket as it is.
+    const done = ticketChangeDoneCopy(flow.result)
+    const priceText =
+      flow.result && 'priceText' in flow.result ? flow.result.priceText : ''
+    return (
+      <Card>
+        {header}
+        <Text style={s.strong}>
+          {'text' in done ? done.text : t(done.key, done.values)}
+        </Text>
+        {priceText ? <Text style={s.strong}>{priceText}</Text> : null}
+        <Button
+          onPress={() => (done.changed && onChanged ? onChanged() : flow.restart())}
+        >
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (flow.step === 'payment' && flow.result?.status === 'payment_required') {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted}>{t('ticketChange.payment')}</Text>
+        <Button disabled={!flow.can.pay} onPress={flow.openPayment}>
+          {t('ticketChange.paymentOpen')}
+        </Button>
+        {flow.notice ? <ErrorText>{t(flow.notice)}</ErrorText> : null}
+        {/* Back rereads the options under the ticket's lock: wait for it. */}
+        <Button
+          variant="ghost"
+          loading={flow.busy}
+          disabled={!flow.can.back}
+          onPress={flow.back}
+        >
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if ((flow.step === 'confirm' || flow.step === 'submitting') && flow.selected) {
+    const option = flow.selected
+    const submitting = flow.step === 'submitting'
+    return (
+      <Card>
+        {header}
+        <Text style={s.strong}>
+          {t('ticketChange.confirmTitle', { name: label(option) })}
+        </Text>
+        <Text style={s.price}>{option.priceText}</Text>
+        {(() => {
+          // The server's price text is the difference; a change fee comes on top.
+          const charge = ticketChangeCharge(option)
+          if (!charge || option.fee <= 0) return null
+          return (
+            <Text style={s.muted}>
+              {t('ticketChange.fee', {
+                amount: `${option.currency} ${option.fee.toFixed(2)}`,
+              })}
+              {'\n'}
+              {t('ticketChange.total', {
+                amount: `${charge.currency} ${charge.amount.toFixed(2)}`,
+              })}
+            </Text>
+          )
+        })()}
+        {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+        {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+        {signInLine}
+        {flow.alternatives.length > 0 ? (
+          <View style={s.slots}>
+            <Text style={s.muted}>{t('ticketChange.slotFull')}</Text>
+            {flow.alternatives.map((slot) => (
+              <Button
+                key={slot.slotValue}
+                variant="ghost"
+                disabled={!flow.can.chooseAlternative}
+                onPress={() => void flow.chooseAlternative(slot)}
+              >
+                {slot.label}
+              </Button>
+            ))}
+          </View>
+        ) : null}
+        {/* No Confirm for a slot just refused: the buyer picks an open one. */}
+        {flow.canConfirm || submitting ? (
+          <Button
+            loading={submitting}
+            disabled={!flow.can.confirm}
+            onPress={() => void flow.confirm()}
+          >
+            {submitting
+              ? t('ticketChange.submitting')
+              : option.paymentRequired
+                ? t('ticketChange.confirmPay')
+                : t('ticketChange.confirm')}
+          </Button>
+        ) : null}
+        <Button variant="ghost" disabled={!flow.can.back} onPress={flow.back}>
+          {t('ticketChange.back')}
+        </Button>
+      </Card>
+    )
+  }
+
+  if (ticketChangeView(options) === 'choose') {
+    return (
+      <Card>
+        {header}
+        <Text style={s.muted}>{t('ticketChange.choose')}</Text>
+        {options.options.map((option) => (
+          <Pressable
+            key={option.ticketTypeId}
+            accessibilityRole="button"
+            accessibilityState={{ disabled: !flow.can.select }}
+            disabled={!flow.can.select}
+            onPress={() => flow.select(option)}
+            style={[
+              s.option,
+              { borderColor: theme.border },
+              !flow.can.select && s.optionDisabled,
+            ]}
+          >
+            <Text style={s.strong}>{label(option)}</Text>
+            <Text style={s.price}>{option.priceText}</Text>
+          </Pressable>
+        ))}
+        {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+        {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+        {signInLine}
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      {header}
+      <Text style={s.muted}>{options.message || t('ticketChange.closed')}</Text>
+      {options.sellInstead.available ? (
+        <>
+          <Text style={s.muted}>{t('ticketChange.sellInsteadNote')}</Text>
+          <Button disabled={!flow.can.sellInstead} onPress={flow.sellInstead}>
+            {t('ticketChange.sellInstead')}
+          </Button>
+        </>
+      ) : null}
+      {options.waitlistOptions.map((wait) => (
+        <View key={wait.ticketTypeId} style={s.waitlist}>
+          {wait.entry ? (
+            <>
+              <Text style={s.muted}>
+                {t(
+                  wait.entry.status === 'offered'
+                    ? 'ticketChange.waitlist.offered'
+                    : 'ticketChange.waitlist.waiting',
+                  { name: wait.name }
+                )}
+              </Text>
+              <Button
+                variant="ghost"
+                loading={flow.busyWaitlist}
+                disabled={!flow.can.waitlist}
+                onPress={() => wait.entry && void flow.leaveWaitlist(wait.entry.id)}
+              >
+                {t('ticketChange.waitlist.leave')}
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="ghost"
+              loading={flow.busyWaitlist}
+              disabled={!flow.can.waitlist}
+              onPress={() => void flow.joinWaitlist(wait.ticketTypeId)}
+            >
+              {t('ticketChange.waitlist.join', { name: wait.name })}
+            </Button>
+          )}
+        </View>
+      ))}
+      {flow.error ? <ErrorText>{flow.error}</ErrorText> : null}
+      {flow.notice ? <Text style={s.muted}>{t(flow.notice)}</Text> : null}
+    </Card>
+  )
+}
+
+const useChangeStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loader: { paddingVertical: 20, alignItems: 'center' },
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        strong: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        option: {
+          borderWidth: StyleSheet.hairlineWidth,
+          borderRadius: 8,
+          padding: 12,
+          gap: 4,
+        },
+        optionDisabled: { opacity: 0.4 },
+        slots: { gap: 8 },
+        waitlist: { gap: 6, paddingTop: 8 },
+      }),
+    [theme]
+  )