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

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

@@ -0,0 +1,116 @@
+/**
+ * `<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 } 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
+}
+
+/** Storefront-compatible order summary shown after the checkout controls. */
+export const OrderSummary: FC<OrderSummaryProps> = ({ eventId }) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const event = hooks.useEvent(eventId)
+  const breakdown = checkout.breakdown
+  const detailed = checkout.priceBreakdown
+
+  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}
+
+      <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>
+  )
+}