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

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

@@ -8,7 +8,14 @@
 import React, { type FC } from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { hooks } from 'tf-checkout-shared'
+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'
@@ -22,15 +29,28 @@ const money = (symbol: string, code: string, amount: number): string =>
 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 }) => {
+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
 
@@ -87,6 +107,13 @@ export const OrderSummary: FC<OrderSummaryProps> = ({ eventId }) => {
         </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 }]}>

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