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

package/src/sections/Bundles.tsx

@@ -0,0 +1,467 @@
+/**
+ * `<Bundles/>` — the RN analogue of the web section: the event's bundles,
+ * bought on their own order. Choose bundles, enter your details (and, when
+ * offered, a name on each ticket), pay by card, see the confirmation.
+ * Everything the flow decides is in the shared core (`hooks.useBundleFlow`);
+ * this file only renders it.
+ *
+ * At most one native card field exists at a time: the bundle card field is
+ * mounted only while this section is visible.
+ *
+ * Renders nothing when the event sells no bundles. Translated through the
+ * shared translator; `locale`, `messages` or `translate` override it.
+ */
+import React, { useMemo, type FC } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+
+import {
+  bundleAvailabilityCopy,
+  bundleContentsLine,
+  htmlToPlainText,
+  bundleQuantityRange,
+  createTranslator,
+  hooks,
+  type LocaleCode,
+  type Messages,
+  type PlaceOrderResult,
+  type Translate,
+} from 'tf-checkout-shared'
+
+import { CardInput, claimCardField } from '../CardInput'
+import { rnConfirmer } from '../instance'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+import { Field, Input } from '../ui/Field'
+import { Button, Card, ErrorText, Loader } from '../ui/primitives'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import type { ResolvedTheme } from '../ui/theme'
+
+const money = (currency: string, amount: number) => `${currency} ${amount.toFixed(2)}`
+
+export interface BundlesProps {
+  eventId: string
+  /** Fired once when a bundle purchase is complete, with its order hash. */
+  onPurchased?: (orderHash: string) => void
+  /**
+   * Fired once when a bundle purchase is complete, in the same shape as a
+   * ticket order, so the host routes both the same way.
+   */
+  onComplete?: (order: PlaceOrderResult) => void
+  /** `redirect`: skip the inline receipt while the host navigates. */
+  confirmationMode?: 'inline' | 'redirect'
+  /** False while the section is hidden: no card field is mounted then. */
+  visible?: boolean
+  /** Section heading. Defaults to the translated "Bundles". */
+  heading?: string
+  locale?: LocaleCode
+  messages?: Partial<Messages>
+  translate?: Translate
+}
+
+export const Bundles: FC<BundlesProps> = ({
+  eventId,
+  onPurchased,
+  onComplete,
+  confirmationMode = 'inline',
+  visible = true,
+  heading,
+  locale,
+  messages,
+  translate,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const s = useBundleStyles(theme)
+  const t = translate ?? createTranslator({ locale, messages })
+  const flow = hooks.useBundleFlow(rnConfirmer, eventId, {
+    claimCard: claimCardField,
+    defaults: {
+      firstName: checkout.billing?.firstName ?? '',
+      lastName: checkout.billing?.lastName ?? '',
+      email: checkout.billing?.email ?? '',
+    },
+    store: checkout.store,
+    visible,
+    confirmationMode,
+    onComplete,
+    onPurchased,
+  })
+
+  if (flow.view === 'loading') {
+    return (
+      <Card>
+        <View style={s.loader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (flow.view === 'catalogError') {
+    return (
+      <Card>
+        <ErrorText>{t('bundles.error.catalog')}</ErrorText>
+        <Button
+          variant="ghost"
+          loading={flow.catalogRetrying}
+          disabled={flow.catalogRetrying}
+          onPress={flow.retryCatalog}
+        >
+          {t('bundles.retryCard')}
+        </Button>
+      </Card>
+    )
+  }
+  // No bundles to sell and no purchase to show.
+  if (flow.view === 'hidden') return null
+
+  const title = <Text style={s.heading}>{heading ?? t('bundles.heading')}</Text>
+
+  if (flow.view === 'redirecting') {
+    return (
+      <Card>
+        {title}
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t('bundles.redirecting')}
+        </Text>
+        <Loader />
+      </Card>
+    )
+  }
+  if (flow.view === 'receipt' && flow.result) {
+    const { result } = flow
+    return (
+      <Card>
+        {title}
+        <Text style={s.strong}>{t('bundles.done.title')}</Text>
+        <Text style={s.muted}>
+          {result.pending
+            ? t('bundles.done.pending')
+            : result.email
+              ? t('bundles.done.email', { email: result.email })
+              : t('bundles.done.emailUnknown')}
+        </Text>
+        <Text style={s.muted}>
+          {t('bundles.done.order', { orderHash: result.orderHash })}
+        </Text>
+        {flow.gatewayWait ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.gatewayWait)}
+          </Text>
+        ) : null}
+        <Button
+          variant="ghost"
+          disabled={flow.gatewayBlocked}
+          onPress={() => void flow.again()}
+        >
+          {t('bundles.done.again')}
+        </Button>
+      </Card>
+    )
+  }
+
+  const anySelected = Object.values(flow.qty).some((n) => n > 0)
+
+  if (flow.view === 'details') {
+    const amount = money(flow.payAmount.currency || flow.currency, flow.payAmount.amount)
+    return (
+      <Card>
+        {title}
+        {flow.notice ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.notice.key, flow.notice.values)}
+          </Text>
+        ) : null}
+        <Text style={s.strong}>{t('bundles.buyerHeading')}</Text>
+        <Field label={t('bundles.firstName')}>
+          <Input
+            value={flow.buyer.firstName}
+            autoCapitalize="words"
+            editable={!flow.busy}
+            onChangeText={(firstName) => flow.patchBuyer({ firstName })}
+          />
+        </Field>
+        <Field label={t('bundles.lastName')}>
+          <Input
+            value={flow.buyer.lastName}
+            autoCapitalize="words"
+            editable={!flow.busy}
+            onChangeText={(lastName) => flow.patchBuyer({ lastName })}
+          />
+        </Field>
+        <Field label={t('bundles.email')}>
+          <Input
+            value={flow.buyer.email}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            editable={!flow.busy}
+            onChangeText={(email) => flow.patchBuyer({ email })}
+          />
+        </Field>
+
+        {flow.slots.length > 0 ? (
+          <>
+            <Text style={s.strong}>{t('bundles.holdersHeading')}</Text>
+            {!flow.namesRequired ? (
+              <Text style={s.muted}>{t('bundles.holdersOptional')}</Text>
+            ) : null}
+            {flow.slots.map((slot) => {
+              const value = flow.holderValue(slot)
+              const label = t('bundles.holderLabel', {
+                ticket: slot.ticketName,
+                number: String(slot.ticketIndex + 1),
+              })
+              return (
+                <View key={`${slot.bundleId}-${slot.ticketIndex}`}>
+                  <Field label={`${label} · ${t('bundles.holderFirstName')}`}>
+                    <Input
+                      value={value?.firstName ?? ''}
+                      autoCapitalize="words"
+                      editable={!flow.busy}
+                      onChangeText={(firstName) => flow.setHolder(slot, { firstName })}
+                    />
+                  </Field>
+                  <Field label={`${label} · ${t('bundles.holderLastName')}`}>
+                    <Input
+                      value={value?.lastName ?? ''}
+                      autoCapitalize="words"
+                      editable={!flow.busy}
+                      onChangeText={(lastName) => flow.setHolder(slot, { lastName })}
+                    />
+                  </Field>
+                </View>
+              )
+            })}
+          </>
+        ) : null}
+        {flow.problems.map((key) => (
+          <ErrorText key={key}>{t(key)}</ErrorText>
+        ))}
+
+        {flow.awaitingCard ? (
+          <View style={s.card}>
+            <Text style={s.strong}>{t('bundles.cardHeading')}</Text>
+            {flow.cardElsewhere ? (
+              <>
+                <Text style={s.muted}>{t('bundles.payingElsewhere')}</Text>
+                <Button variant="ghost" onPress={flow.payHere}>
+                  {t('bundles.payHere')}
+                </Button>
+              </>
+            ) : flow.cardFailed ? (
+              <Button variant="ghost" onPress={flow.retryCard}>
+                {t('bundles.retryCard')}
+              </Button>
+            ) : flow.cardReady && visible ? (
+              <CardInput owner={flow.cardOwner} visible={visible} />
+            ) : (
+              <Loader />
+            )}
+          </View>
+        ) : null}
+
+        {flow.stillSaving ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('common.stillSaving')}
+          </Text>
+        ) : null}
+        {flow.checkingAttempt ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.checkingAttempt')}
+          </Text>
+        ) : null}
+        {flow.waitingForTickets ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.waitTickets')}
+          </Text>
+        ) : null}
+        {flow.waitingForBundle ? (
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t(flow.gatewayWait ?? 'bundles.waitOtherBundle')}
+          </Text>
+        ) : null}
+        <Button
+          onPress={() => void flow.submit()}
+          loading={flow.busy}
+          disabled={flow.submitDisabled}
+        >
+          {flow.paying
+            ? t('bundles.paying')
+            : flow.awaitingCard
+              ? t('bundles.pay', { amount })
+              : t('bundles.continue')}
+        </Button>
+        <Button
+          variant="ghost"
+          disabled={flow.busy || flow.gatewayBlocked}
+          onPress={() => void flow.back()}
+        >
+          {t('bundles.back')}
+        </Button>
+        {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+        {flow.orderInProgress ? (
+          <Button variant="ghost" onPress={flow.continueOrder}>
+            {t('bundles.continueOrder')}
+          </Button>
+        ) : null}
+        {flow.canStartOver ? (
+          <Button
+            variant="ghost"
+            disabled={flow.gatewayBlocked}
+            onPress={() => void flow.startOver()}
+          >
+            {t('bundles.startOver')}
+          </Button>
+        ) : null}
+      </Card>
+    )
+  }
+
+  const ticketsInCart = checkout.selections.length > 0
+  return (
+    <Card>
+      {title}
+      <Text style={s.muted}>{t('bundles.subtitle')}</Text>
+      {flow.notice ? (
+        <Text style={s.muted} accessibilityLiveRegion="polite">
+          {t(flow.notice.key, flow.notice.values)}
+        </Text>
+      ) : null}
+      {flow.view === 'heldOrder' ? (
+        <>
+          <Text style={s.muted} accessibilityLiveRegion="polite">
+            {t('bundles.heldOrder')}
+          </Text>
+          {flow.error ? <ErrorText>{t(flow.error)}</ErrorText> : null}
+          {flow.checkingAttempt ? (
+            <Text style={s.muted} accessibilityLiveRegion="polite">
+              {t('bundles.checkingAttempt')}
+            </Text>
+          ) : null}
+          {flow.gatewayWait ? (
+            <Text style={s.muted} accessibilityLiveRegion="polite">
+              {t(flow.gatewayWait)}
+            </Text>
+          ) : null}
+          <Button
+            disabled={flow.busy || flow.checkingAttempt}
+            onPress={flow.continueOrder}
+          >
+            {t('bundles.continueOrder')}
+          </Button>
+          <Button
+            variant="ghost"
+            disabled={flow.busy || flow.checkingAttempt || flow.gatewayBlocked}
+            onPress={() => void flow.startOver()}
+          >
+            {t('bundles.startOver')}
+          </Button>
+        </>
+      ) : null}
+
+      {flow.bundles.map((bundle) => {
+        const range = bundleQuantityRange(bundle)
+        const stock = bundleAvailabilityCopy(bundle)
+        const contents = bundleContentsLine(bundle)
+        const desc = htmlToPlainText(bundle.description ?? '')
+        return (
+          <View key={bundle.id} style={[s.item, { borderTopColor: theme.border }]}>
+            <View style={s.info}>
+              <Text style={s.name}>{bundle.name}</Text>
+              <Text style={s.price}>{money(bundle.currency, bundle.price)}</Text>
+              {contents ? (
+                <Text style={s.muted}>{t('bundles.includes', { contents })}</Text>
+              ) : null}
+              {bundle.bookingFee > 0 && (
+                <Text style={s.muted}>
+                  {t('bundles.bookingFee', {
+                    amount: money(bundle.currency, bundle.bookingFee),
+                  })}
+                </Text>
+              )}
+              {desc ? <Text style={s.muted}>{desc}</Text> : null}
+              {stock && stock.key !== 'bundles.soldOut' ? (
+                <Text style={[s.muted, s.stock]}>{t(stock.key, stock.values)}</Text>
+              ) : null}
+            </View>
+            {range.max === 0 ? (
+              <Text style={s.soldOut}>{t('bundles.soldOut')}</Text>
+            ) : (
+              <QuantitySelect
+                label={t('bundles.quantity', { name: bundle.name })}
+                value={flow.qty[bundle.id] ?? 0}
+                min={range.min}
+                max={range.max}
+                onChange={(v) => flow.setQuantity(bundle.id, v)}
+              />
+            )}
+          </View>
+        )
+      })}
+
+      {anySelected ? (
+        <Text style={s.strong}>
+          {t('bundles.total', { amount: money(flow.currency, flow.total) })}
+        </Text>
+      ) : null}
+      {anySelected && ticketsInCart ? (
+        <Text style={s.muted}>{t('bundles.boughtSeparately')}</Text>
+      ) : null}
+      <Button onPress={flow.continueToDetails} disabled={!anySelected}>
+        {t('bundles.continue')}
+      </Button>
+    </Card>
+  )
+}
+
+const useBundleStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        loader: { paddingVertical: 20, alignItems: 'center' },
+        heading: {
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        strong: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        muted: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        stock: { fontWeight: '600' },
+        card: { gap: 8 },
+        item: {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: 12,
+          paddingTop: 12,
+          borderTopWidth: StyleSheet.hairlineWidth,
+        },
+        info: { flex: 1, gap: 2 },
+        name: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        soldOut: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+      }),
+    [theme]
+  )