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

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

package/src/sections/Confirmation.tsx

@@ -0,0 +1,143 @@
+/**
+ * `<Confirmation/>` — the order-placed receipt + a referral/share growth block,
+ * read off `checkout.order`; returns null until an order exists. The RN analogue
+ * of the web `Confirmation`.
+ *
+ * Native adaptations vs web:
+ *   - There is no `window.location.href`, so the share URL comes only from the
+ *     `shareUrl` prop (no implicit "current page" fallback).
+ *   - The web version renders three per-network links (Facebook / X / WhatsApp).
+ *     On native those collapse into ONE `Share.share()` call — the OS share sheet
+ *     already offers every installed app, so per-network buttons are redundant.
+ *   - Voucher / "View my tickets" links open via `Linking.openURL` instead of
+ *     anchor tags.
+ */
+import React, { useState, type FC, type ReactNode } from 'react'
+import { Linking, Share, StyleSheet, Text, View } from 'react-native'
+
+// `@react-native-clipboard/clipboard` is a dependency of this package.
+import Clipboard from '@react-native-clipboard/clipboard'
+
+import { BodyText, Button, Card, MutedText, SectionHeader } from '../ui/primitives'
+import { Input } from '../ui/Field'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+
+export interface ConfirmationProps {
+  /** URL friends land on (referral/event page). No implicit current-page
+   *  fallback on native — omit to hide the share block. */
+  shareUrl?: string
+  /** Message prefilled into the native share sheet. */
+  shareMessage?: string
+  /** Link to the buyer's tickets/order — renders a "View my tickets" button. */
+  viewOrderUrl?: string
+  /** Override the body copy (otherwise it varies on the order state). */
+  message?: string
+  /** Extra content (e.g. your own referral-reward ladder from the order payload). */
+  children?: ReactNode
+}
+
+export const Confirmation: FC<ConfirmationProps> = ({
+  shareUrl,
+  shareMessage = 'I just got my tickets — grab yours!',
+  viewOrderUrl,
+  message,
+  children,
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const order = checkout.order
+  const [copied, setCopied] = useState(false)
+
+  if (!order) return null
+  const pending = order.pending
+
+  // No `window.location` on native — the share URL is the prop or nothing.
+  const url = shareUrl ?? ''
+
+  const title = pending
+    ? 'Payment pending'
+    : order.free
+      ? 'Registration complete'
+      : 'Your Tickets are Confirmed!'
+
+  const note = pending
+    ? 'We’ll email your tickets as soon as the payment settles.'
+    : order.alreadyPaid
+      ? 'This order was already paid — nothing was charged again.'
+      : order.free
+        ? 'You’re registered — check your email for your confirmation.'
+        : 'Your tickets are available in the My Tickets section — please bring them with you to the event.'
+
+  const openUrl = (target: string) => {
+    Linking.openURL(target).catch(() => undefined)
+  }
+
+  const copy = () => {
+    if (!url) return
+    Clipboard.setString(url)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  const share = () => {
+    if (!url) return
+    // Facebook / X / WhatsApp collapse into the single native share sheet.
+    Share.share({ message: `${shareMessage} ${url}`, url }).catch(() => undefined)
+  }
+
+  return (
+    <Card>
+      <View style={styles.glyphWrap}>
+        <Text style={[styles.glyph, { color: pending ? theme.muted : theme.success }]}>
+          {pending ? '⏳' : '✓'}
+        </Text>
+      </View>
+
+      <SectionHeader title={title} />
+      <BodyText>{message ?? note}</BodyText>
+
+      {order.orderHash ? <MutedText>Reference: {order.orderHash}</MutedText> : null}
+
+      {pending && order.pendingVoucherUrl ? (
+        <Button
+          variant="ghost"
+          onPress={() => openUrl(order.pendingVoucherUrl as string)}
+        >
+          View payment voucher
+        </Button>
+      ) : null}
+
+      {viewOrderUrl ? (
+        <Button variant="ghost" onPress={() => openUrl(viewOrderUrl)}>
+          View my tickets
+        </Button>
+      ) : null}
+
+      {children}
+
+      {/* Referral / share — invite friends for cheaper (or free) tickets. */}
+      {!pending && url ? (
+        <View style={styles.share}>
+          <BodyText style={styles.shareHeading}>
+            Your tickets can be cheaper — or even FREE!
+          </BodyText>
+          <MutedText>
+            Invite friends with your link. When they buy, you get rewarded.
+          </MutedText>
+          <Input value={url} onChangeText={() => undefined} editable={false} />
+          <Button variant="ghost" onPress={copy}>
+            {copied ? 'Copied!' : 'Copy link'}
+          </Button>
+          <Button onPress={share}>Share</Button>
+        </View>
+      ) : null}
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  glyphWrap: { alignItems: 'center', paddingVertical: 4 },
+  glyph: { fontSize: 44, fontWeight: '800' },
+  share: { gap: 10 },
+  shareHeading: { fontWeight: '700' },
+})