tf-checkout-react-native 1.0.47 → 2.0.0-beta.10

package/src/sections/IDVerification.tsx

@@ -0,0 +1,77 @@
+/**
+ * `<IDVerification/>` — shown after an order that needs identity verification
+ * (`order.needIdVerification`). Kicks off the engine's verify flow: mint the
+ * provider URL, open it, and poll to completion, reflecting each phase. The
+ * order is already paid — a stall here never means a failed payment. The RN
+ * analogue of the web `IDVerification`.
+ *
+ * If you place your order with `placeOrder(method, { autoRunIdVerification:true })`
+ * the engine runs this for you; this section is the manual, visible counterpart.
+ *
+ * Native adaptation vs web: the provider page opens via `Linking.openURL`
+ * (React Native) rather than `window.open(url, '_blank')`.
+ */
+import React, { useState, type FC } from 'react'
+import { Linking } from 'react-native'
+
+import { errorMessage, type IdVerificationPhase } from 'tf-checkout-shared'
+
+import { BodyText, Button, Card, ErrorText, SectionHeader } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+type UiPhase = IdVerificationPhase | 'starting'
+
+const MESSAGE: Record<UiPhase, string> = {
+  idle: 'To complete the purchase, please verify your identity.',
+  starting: 'Opening the verification page…',
+  polling: 'Waiting for verification to complete in the other tab…',
+  verified: 'Identity verified — your tickets are on their way.',
+  timeout: 'Still not confirmed. Finish in the other tab, then check again.',
+  error: 'We couldn’t reach the verification service. Try again.',
+}
+
+export const IDVerification: FC = () => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const order = checkout.order
+  const [phase, setPhase] = useState<UiPhase>('idle')
+  const [error, setError] = useState('')
+
+  if (!order?.needIdVerification) return null
+
+  const done = phase === 'verified'
+  const running = phase === 'starting' || phase === 'polling'
+
+  const run = () => {
+    setError('')
+    setPhase('starting')
+    checkout
+      .runIdVerification(order.orderHash, {
+        // Native: open the provider page with Linking (web uses window.open).
+        openUrl: (url) => {
+          if (url) Linking.openURL(url).catch(() => undefined)
+        },
+        onPhase: (p) => setPhase(p),
+      })
+      .then((status) => setPhase(status?.verified ? 'verified' : 'polling'))
+      .catch((e) => {
+        setPhase('error')
+        setError(errorMessage(e))
+      })
+  }
+
+  return (
+    <Card>
+      <SectionHeader title="Account Verification" />
+      <BodyText style={done ? { color: theme.success } : undefined}>
+        {MESSAGE[phase]}
+      </BodyText>
+      {!done ? (
+        <Button onPress={run} loading={running} disabled={running}>
+          {phase === 'idle' ? 'Verify' : running ? 'Verifying…' : 'Check again'}
+        </Button>
+      ) : null}
+      {error ? <ErrorText>{error}</ErrorText> : null}
+    </Card>
+  )
+}

package/src/sections/NotificationPreferences.tsx

@@ -0,0 +1,244 @@
+import React, { useEffect, useMemo, type ReactNode } from 'react'
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { hooks, type NotificationPreferencesFlow } from 'tf-checkout-shared'
+import { useTheme } from '../ui/CheckoutProvider'
+import { resolveTheme, type CheckoutTheme } from '../ui/theme'
+import { useAccountT } from '../ui/useAccountT'
+
+export interface NotificationPreferencesProps {
+  locale?: string
+  translate?: (english: string, values?: Record<string, string | number>) => string
+  showHeader?: boolean
+  onBack?: () => void
+  onSignIn?: () => void
+  onSaved?: () => void
+  theme?: CheckoutTheme
+  style?: StyleProp<ViewStyle>
+  renderSaveButton?: (label: string, onPress: () => void, disabled: boolean) => ReactNode
+}
+export const NotificationPreferences = (props: NotificationPreferencesProps) => {
+  const flow = hooks.useNotificationPreferences()
+  return <NotificationPreferencesView {...props} preferences={flow} />
+}
+export const NotificationPreferencesView = ({
+  preferences: flow,
+  locale,
+  translate,
+  showHeader = true,
+  onBack,
+  onSignIn,
+  onSaved,
+  theme: override,
+  style,
+  renderSaveButton,
+}: NotificationPreferencesProps & { preferences: NotificationPreferencesFlow }) => {
+  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 {
+      /* Retired account control. */
+    }
+  }
+  useEffect(() => {
+    if (flow.preferences?.available) flow.begin()
+  }, [flow.scopeKey, Boolean(flow.preferences), flow.preferences?.available])
+  const text = { color: theme.text, fontFamily: theme.fontFamily }
+  const button = (label: string, action: () => unknown, disabled = flow.busy) => (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={t(label)}
+      accessibilityState={{ disabled, busy: flow.busy }}
+      disabled={disabled}
+      onPress={() => act(action)}
+      style={[s.button, { borderColor: theme.border }, disabled && s.disabled]}
+    >
+      <Text style={[text, { color: theme.accent }]}>{t(label)}</Text>
+    </Pressable>
+  )
+  if (flow.confirmingAccount || (flow.signedIn && flow.query.isPending))
+    return (
+      <ActivityIndicator
+        accessibilityLabel={t('Loading notification preferences…')}
+        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.retry, false)}
+          </>
+        )}
+        <Text style={text}>{t('Sign in to choose your event updates.')}</Text>
+        {onSignIn && button('Sign in', onSignIn, false)}
+      </View>
+    )
+  if (!flow.preferences || !flow.preferences.available)
+    return (
+      <View style={[s.container, style]}>
+        <Text accessibilityRole="alert" style={{ color: theme.error }}>
+          {t(
+            flow.query.error?.message ??
+              flow.preferences?.reason ??
+              'Notification preferences are not available right now.'
+          )}
+        </Text>
+        {button('Try again', flow.retry, false)}
+      </View>
+    )
+  const save = async () => {
+    if (await flow.save()) act(onSaved)
+  }
+  const disabled = flow.busy || !flow.editor
+  const cancel = () => {
+    if (flow.cancel()) {
+      if (onBack) act(onBack)
+      else flow.begin()
+    }
+  }
+  return (
+    <View style={[s.container, style]}>
+      {showHeader && (
+        <Text accessibilityRole="header" style={[text, s.title]}>
+          {t('Notifications')}
+        </Text>
+      )}
+      <Text style={[text, s.description]}>
+        {t(
+          'Choose which optional event recommendations you receive. Ticket and account messages stay the same.'
+        )}
+      </Text>
+      <View
+        accessibilityRole="radiogroup"
+        accessibilityLabel={t('Event updates')}
+        style={{ gap: 12 }}
+      >
+        {(
+          [
+            [
+              'everything',
+              'Everything',
+              'Recommendations for any events that match your interests.',
+            ],
+            [
+              'my_events',
+              'My events only',
+              'Recommendations for events you have tickets for or have saved.',
+            ],
+          ] as const
+        ).map(([value, label, description]) => (
+          <Pressable
+            key={value}
+            accessibilityRole="radio"
+            accessibilityLabel={t(label)}
+            accessibilityState={{ checked: flow.editor?.audience === value, disabled }}
+            disabled={disabled}
+            onPress={() => flow.choose(value)}
+            style={[s.choice, { borderColor: theme.border }, disabled && s.disabled]}
+          >
+            <View style={[s.radio, { borderColor: theme.accent }]}>
+              {flow.editor?.audience === value && (
+                <View style={[s.dot, { backgroundColor: theme.accent }]} />
+              )}
+            </View>
+            <View style={{ flex: 1, gap: 6 }}>
+              <Text style={text}>{t(label)}</Text>
+              <Text
+                style={{
+                  color: theme.muted,
+                  fontFamily: theme.fontFamily,
+                  lineHeight: 21,
+                }}
+              >
+                {t(description)}
+              </Text>
+            </View>
+          </Pressable>
+        ))}
+      </View>
+      {flow.error && (
+        <>
+          <Text accessibilityRole="alert" style={{ color: theme.error }}>
+            {t(flow.error)}
+          </Text>
+          {button('Try again', flow.retry)}
+        </>
+      )}
+      {flow.saved && (
+        <Text accessibilityLiveRegion="polite" style={text}>
+          {t('Your notification preferences have been saved.')}
+        </Text>
+      )}
+      {renderSaveButton
+        ? renderSaveButton(
+            t('Save'),
+            () =>
+              act(() => {
+                void save()
+              }),
+            disabled
+          )
+        : button(
+            'Save',
+            () => {
+              void save()
+            },
+            disabled
+          )}
+      {button('Cancel', cancel)}
+    </View>
+  )
+}
+const s = StyleSheet.create({
+  container: { gap: 20, paddingVertical: 16 },
+  title: { fontSize: 24, fontWeight: '600' },
+  description: { lineHeight: 24 },
+  choice: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+    padding: 16,
+    minHeight: 72,
+    borderWidth: 1,
+    borderRadius: 16,
+  },
+  radio: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  dot: { width: 14, height: 14, borderRadius: 7 },
+  button: {
+    minHeight: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: 24,
+    padding: 12,
+  },
+  disabled: { opacity: 0.5 },
+})

package/src/sections/OrderSummary.tsx

@@ -0,0 +1,143 @@
+/**
+ * `<OrderSummary/>` — the priced cart lines + total, read off the shared
+ * engine's `breakdown` (authoritative totals) and `priceBreakdown` (server
+ * display-ready strings), with the event name from `useEvent`. The RN analogue
+ * of the web `OrderSummary`. Presentation only; returns null until the cart has
+ * tickets.
+ */
+import React, { type FC } from 'react'
+import { StyleSheet, View } from 'react-native'
+
+import {
+  hooks,
+  memberCreditRow,
+  createTranslator,
+  type LocaleCode,
+  type Messages,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { BodyText, Card, Divider, MutedText, SectionHeader } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+/** Fallback money formatter — server-priced strings (`priceBreakdown`) win when
+ *  present; this only formats the raw `breakdown` totals. Mirrors the web
+ *  `currencySymbol || \`${currencyCode} \`` rule. */
+const money = (symbol: string, code: string, amount: number): string =>
+  symbol ? `${symbol}${amount.toFixed(2)}` : `${code} ${amount.toFixed(2)}`
+
+export interface OrderSummaryProps {
+  /** Event whose name to show; omit to skip the event line. */
+  eventId?: string
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+/** Storefront-compatible order summary shown after the checkout controls. */
+export const OrderSummary: FC<OrderSummaryProps> = ({
+  eventId,
+  locale,
+  messages,
+  translate,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const event = hooks.useEvent(eventId)
+  const breakdown = checkout.breakdown
+  const detailed = checkout.priceBreakdown
+  const memberCredit = memberCreditRow(
+    detailed,
+    breakdown,
+    (translate ?? createTranslator({ locale, messages }))('summary.memberCredit')
+  )
+
+  if (!breakdown || breakdown.tickets.length === 0) return null
+
+  const total =
+    detailed?.total ??
+    money(breakdown.currencySymbol, breakdown.currencyCode, Number(breakdown.total))
+
+  return (
+    <Card>
+      <SectionHeader title="Order summary" />
+
+      {event.data?.name ? (
+        <View style={styles.group}>
+          <MutedText>Event</MutedText>
+          <BodyText>{event.data.name}</BodyText>
+        </View>
+      ) : null}
+
+      <View style={styles.group}>
+        <MutedText>Your Tickets</MutedText>
+        {breakdown.tickets.map((ticket, index) => {
+          const detail = detailed?.tickets[index]
+          const unit = detail?.unit_price ?? ticket.unit
+          // Show the fee-inclusive line total only when it differs from the unit
+          // price (matches web — a bare unit price would just repeat the line).
+          const withFees =
+            detail?.line_total && detail.line_total !== detail.unit_price
+              ? detail.line_total
+              : null
+          return (
+            <View key={`${ticket.ticketTypeId}-${index}`} style={styles.item}>
+              <BodyText style={styles.tabular}>
+                {ticket.quantity} x {ticket.name} - {unit} each
+              </BodyText>
+              {withFees ? (
+                <MutedText style={styles.tabular}>({withFees} with fees)</MutedText>
+              ) : null}
+            </View>
+          )
+        })}
+      </View>
+
+      {(detailed?.add_ons.length ?? 0) > 0 ? (
+        <View style={styles.group}>
+          <MutedText>{detailed?.add_ons_title || 'Add-ons'}</MutedText>
+          {detailed?.add_ons.map((addOn, index) => (
+            <View key={`${addOn.name}-${index}`} style={styles.item}>
+              <BodyText style={styles.tabular}>
+                {addOn.quantity} x {addOn.name}
+                {addOn.show_price ? ` - ${addOn.unit_price} each` : ''}
+              </BodyText>
+            </View>
+          ))}
+        </View>
+      ) : null}
+
+      {memberCredit ? (
+        <View style={styles.totalRow}>
+          <BodyText>{memberCredit.name}</BodyText>
+          <BodyText style={styles.tabular}>{memberCredit.amount}</BodyText>
+        </View>
+      ) : null}
+
+      <Divider />
+      <View style={styles.totalRow}>
+        <BodyText style={[styles.total, { fontSize: theme.fontSize + 1 }]}>
+          Total
+        </BodyText>
+        <BodyText
+          style={[styles.total, styles.tabular, { fontSize: theme.fontSize + 1 }]}
+        >
+          {total}
+        </BodyText>
+      </View>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  group: { gap: 4 },
+  item: { gap: 2 },
+  tabular: { fontVariant: ['tabular-nums'] },
+  totalRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 12,
+  },
+  total: { fontWeight: '700' },
+})

package/src/sections/Passes.tsx

@@ -0,0 +1,177 @@
+import React, { type FC } from 'react'
+import { View } from 'react-native'
+import { hooks, type PassesProps } from 'tf-checkout-shared'
+import {
+  BodyText,
+  Button,
+  Card,
+  ErrorText,
+  Loader,
+  SectionHeader,
+} from '../ui/primitives'
+import { Input } from '../ui/Field'
+import { useAccountT } from '../ui/useAccountT'
+
+export const Passes: FC<PassesProps> = ({ onTicketsChanged, locale }) => {
+  const t = useAccountT(locale)
+  const flow = hooks.useCustomerPasses(onTicketsChanged)
+  const { state } = flow
+  if (state.command)
+    return (
+      <Card>
+        <SectionHeader
+          title={t(
+            state.command.kind === 'redeem'
+              ? 'Use an event credit'
+              : 'Cancel this booking'
+          )}
+        />
+        <BodyText>
+          {state.command.kind === 'redeem'
+            ? t('Use one event credit for {{event}}?', {
+                event: state.command.event.name,
+              })
+            : t('Cancel {{event}} and return its credit to your pass?', {
+                event: state.command.booking.event_name || t('this event'),
+              })}
+        </BodyText>
+        {state.error && <ErrorText>{t(state.error)}</ErrorText>}
+        <Button
+          loading={state.busy}
+          disabled={state.busy}
+          onPress={() => void flow.submit()}
+        >
+          {t(state.submitted ? 'Check my booking' : 'Confirm')}
+        </Button>
+        {!state.submitted && (
+          <Button variant="ghost" onPress={flow.back}>
+            {t('Back')}
+          </Button>
+        )}
+      </Card>
+    )
+  if (!state.passId)
+    return (
+      <View style={{ gap: 12 }}>
+        <SectionHeader title={t('My passes')} />
+        {flow.passes.isLoading && <Loader />}
+        {flow.passes.error && (
+          <>
+            <ErrorText>{flow.passes.error.message}</ErrorText>
+            <Button onPress={() => void flow.passes.refetch()}>{t('Try again')}</Button>
+          </>
+        )}
+        {flow.passes.data?.passes.length === 0 && (
+          <BodyText>{t('You do not have any event passes yet.')}</BodyText>
+        )}
+        {flow.passes.data?.passes.map((pass) => (
+          <Card key={pass.id}>
+            <SectionHeader title={pass.name || t('Event pass')} />
+            <BodyText>
+              {t('{{remaining}} of {{total}} event credits remaining', {
+                remaining: pass.credits_remaining,
+                total: pass.credits_total,
+              })}
+            </BodyText>
+            <BodyText>{t(pass.status)}</BodyText>
+            <Button onPress={() => flow.open(pass.id)}>{t('View pass')}</Button>
+          </Card>
+        ))}
+        {state.page > 1 && (
+          <Button variant="ghost" onPress={() => flow.page(state.page - 1)}>
+            {t('Previous page')}
+          </Button>
+        )}
+        {flow.passes.data?.meta.has_more && (
+          <Button onPress={() => flow.page(state.page + 1)}>{t('Next page')}</Button>
+        )}
+      </View>
+    )
+  const pass = flow.pass.data
+  return (
+    <View style={{ gap: 12 }}>
+      <Button variant="ghost" onPress={() => flow.open()}>
+        {t('Back to passes')}
+      </Button>
+      {flow.pass.isLoading && <Loader />}
+      {[flow.pass.error, flow.events.error, flow.bookings.error]
+        .filter(Boolean)
+        .map((error, index) => (
+          <ErrorText key={index}>{error!.message}</ErrorText>
+        ))}
+      {pass && (
+        <Card>
+          <SectionHeader title={pass.name || t('Event pass')} />
+          <BodyText>{pass.description || ''}</BodyText>
+          <BodyText>
+            {t('{{remaining}} of {{total}} event credits remaining', {
+              remaining: pass.credits_remaining,
+              total: pass.credits_total,
+            })}
+          </BodyText>
+          {pass.valid_until && (
+            <BodyText>{t('Valid until {{date}}', { date: pass.valid_until })}</BodyText>
+          )}
+        </Card>
+      )}
+      {state.message && <BodyText>{t(state.message)}</BodyText>}
+      <SectionHeader title={t('Your bookings')} />
+      {flow.bookings.data?.redemptions.length === 0 && (
+        <BodyText>{t('You have not booked any events with this pass yet.')}</BodyText>
+      )}
+      {flow.bookings.data?.redemptions.map((booking) => (
+        <Card key={booking.id}>
+          <BodyText>{booking.event_name || t('Event')}</BodyText>
+          <BodyText>{t(booking.status)}</BodyText>
+          {booking.can_cancel && (
+            <Button variant="ghost" onPress={() => flow.cancel(booking)}>
+              {t('Cancel booking')}
+            </Button>
+          )}
+        </Card>
+      ))}
+      {state.after && (
+        <Button variant="ghost" onPress={() => flow.bookingPage()}>
+          {t('First bookings')}
+        </Button>
+      )}
+      {flow.bookings.data?.next_cursor && (
+        <Button onPress={() => flow.bookingPage(flow.bookings.data!.next_cursor!)}>
+          {t('More bookings')}
+        </Button>
+      )}
+      <SectionHeader title={t('Choose an event')} />
+      <Input
+        value={state.search}
+        onChangeText={flow.search}
+        placeholder={t('Search events')}
+      />
+      {flow.events.isFetching && <Loader />}
+      {flow.events.data?.events.length === 0 && (
+        <BodyText>{t('No eligible events found.')}</BodyText>
+      )}
+      {flow.events.data?.events.map((event) => (
+        <Card key={event.event_id}>
+          <SectionHeader title={event.name} />
+          <BodyText>{event.start_date || ''}</BodyText>
+          <BodyText>{event.ticket_type_name || ''}</BodyText>
+          {event.available && pass?.status === 'active' && pass.credits_remaining > 0 ? (
+            <Button onPress={() => flow.choose(event)}>{t('Use one credit')}</Button>
+          ) : (
+            <BodyText>{t('Not available')}</BodyText>
+          )}
+        </Card>
+      ))}
+      {state.eventPage > 1 && (
+        <Button variant="ghost" onPress={() => flow.eventPage(state.eventPage - 1)}>
+          {t('Previous events')}
+        </Button>
+      )}
+      {flow.events.data?.meta.has_more && (
+        <Button onPress={() => flow.eventPage(state.eventPage + 1)}>
+          {t('More events')}
+        </Button>
+      )}
+    </View>
+  )
+}