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

package/src/sections/AddOns.tsx

@@ -0,0 +1,286 @@
+/**
+ * `<AddOns/>` — optional upsells for the primed cart. The RN analogue of the web
+ * `AddOns` section: lists the event's add-ons (filtered to the tickets in the
+ * cart), lets the buyer pick quantities, and captures any per-add-on custom
+ * fields. On continue it writes the selection (`setAddons`, which reprices) and
+ * the captured fields (`setAddonDataCapture`).
+ *
+ * Renders nothing when the event has no applicable add-ons (or they're all sold
+ * out), so it's safe to always place between `<Tickets/>` and `<BillingInfo/>`.
+ */
+import React, { Fragment, useMemo, type FC } from 'react'
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+
+import {
+  addOnMaxQuantity,
+  errorMessage,
+  hooks,
+  htmlToPlainText,
+  type EventAddon,
+} from 'tf-checkout-shared'
+
+import { FrozenFields } from '../ui/Frozen'
+import { Button, Card, ErrorText, Loader, MutedText } from '../ui/primitives'
+import { useCheckoutContext, useTheme } from '../ui/CheckoutProvider'
+// Created by a sibling agent; imported here per the port plan. Mirrors the web
+// `CustomFieldGroupFields` API: { group, values, onChange(name, value) }.
+import { CustomFieldGroupFields } from '../ui/CustomFields'
+import { QuantitySelect } from '../ui/QuantitySelect'
+import type { ResolvedTheme } from '../ui/theme'
+
+const money = (currency: string, n: number): string =>
+  `${currency} ${Number(n).toFixed(2)}`
+
+export interface AddOnsProps {
+  eventId: string
+  /** Fired once add-ons are saved to the cart — e.g. reveal `<BillingInfo/>`. */
+  onContinue?: () => void
+  /** Fired when the buyer skips add-ons. Hidden when a required add-on exists. */
+  onSkip?: () => void
+  /** CTA label. Old checkout uses "CONFIRM SELECTION". */
+  buttonLabel?: string
+  /** Eyebrow above the title. Old checkout uses "Get Your Tickets". */
+  eyebrow?: string
+  /** Section heading. Old checkout uses "UPGRADES & ADD-ONS". */
+  heading?: string
+}
+
+export const AddOns: FC<AddOnsProps> = ({
+  eventId,
+  onContinue,
+  onSkip,
+  buttonLabel = 'CONFIRM SELECTION',
+  eyebrow = 'Get Your Tickets',
+  heading = 'UPGRADES & ADD-ONS',
+}) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const s = useAddonStyles(theme)
+  const {
+    query: addonsQuery,
+    addons,
+    qty,
+    setQty,
+    capture,
+    setCapture,
+    error,
+    fieldGroups,
+    combined,
+    ticketQuantity,
+    hasRequired,
+    save,
+    skip,
+  } = hooks.useAddOnSelection(eventId, checkout, { onContinue, onSkip })
+  const head = (
+    <View style={s.head}>
+      {eyebrow ? <Text style={s.eyebrow}>{eyebrow}</Text> : null}
+      <Text style={s.heading}>{heading}</Text>
+      {onSkip && !hasRequired ? (
+        <Pressable accessibilityRole="button" onPress={skip} style={s.skipBtn}>
+          <Text style={s.skip}>Skip</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  )
+
+  if (addonsQuery.isLoading) {
+    return (
+      <Card>
+        {head}
+        <View style={s.sectionLoader}>
+          <Loader />
+        </View>
+      </Card>
+    )
+  }
+  if (addonsQuery.isError)
+    return (
+      <Card>
+        {head}
+        <ErrorText>{errorMessage(addonsQuery.error)}</ErrorText>
+        <Button onPress={() => void addonsQuery.refetch()}>Try again</Button>
+      </Card>
+    )
+  if (addons.length === 0) return null
+  // A catalog containing only unavailable rows is not a useful checkout step.
+  // Required sold-out add-ons are already exempted by the engine preflight.
+  if (addons.every((addon) => addon.stock === 0)) return null
+
+  // The hosted cap — ticket-quantity / per-ticket / max-quantity bounds. The
+  // server hard-rejects anything above it, so never offer a larger number.
+  const max = (a: EventAddon) => addOnMaxQuantity(a, ticketQuantity)
+  const soldOut = (a: EventAddon) => a.stock === 0
+
+  // Group add-ons under their groupName heading (nulls fall under no heading).
+  const groups: { heading: string | null; items: EventAddon[] }[] = []
+  for (const a of addons) {
+    const last = groups[groups.length - 1]
+    if (last && last.heading === (a.groupName ?? null)) last.items.push(a)
+    else groups.push({ heading: a.groupName ?? null, items: [a] })
+  }
+
+  const missing = checkout.missingRequiredAddonNames
+
+  const selectedCount = Object.values(qty).filter((n) => n > 0).length
+
+  return (
+    <FrozenFields frozen={checkout.orderFixed}>
+      <Card>
+        {head}
+        <Text style={s.subtitle}>PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW</Text>
+
+        {groups.map((g, gi) => (
+          <Fragment key={g.heading ?? `g${gi}`}>
+            {g.heading ? <Text style={s.group}>{g.heading}</Text> : null}
+            {g.items.map((a) => {
+              const n = qty[a.id] ?? 0
+              const group = fieldGroups[a.id]
+              const desc = a.description ? htmlToPlainText(a.description) : ''
+              return (
+                <View key={a.id} style={s.item}>
+                  <View style={s.row}>
+                    <View style={s.info}>
+                      <Text style={s.name}>
+                        {a.name}
+                        {a.required ? <Text style={s.req}> · required</Text> : null}
+                      </Text>
+                      <Text style={s.price}>
+                        {money(a.currency, a.price)}
+                        {a.feeIncluded ? (
+                          <Text style={s.priceNote}> incl. fees</Text>
+                        ) : null}
+                      </Text>
+                      {desc ? <Text style={s.desc}>{desc}</Text> : null}
+                    </View>
+                    {soldOut(a) ? (
+                      <Text style={s.soldOut}>Sold out</Text>
+                    ) : (
+                      <QuantitySelect
+                        value={n}
+                        min={0}
+                        max={max(a)}
+                        onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
+                      />
+                    )}
+                  </View>
+                  {n > 0 && group ? (
+                    <View style={s.fields}>
+                      <CustomFieldGroupFields
+                        group={group}
+                        values={capture[a.id] ?? {}}
+                        onChange={(name: string, val: string | string[]) =>
+                          setCapture((c) => ({
+                            ...c,
+                            [a.id]: { ...(c[a.id] ?? {}), [name]: val },
+                          }))
+                        }
+                      />
+                    </View>
+                  ) : null}
+                </View>
+              )
+            })}
+          </Fragment>
+        ))}
+
+        {!combined ? (
+          <Button
+            onPress={save}
+            loading={checkout.isBusy}
+            disabled={checkout.isBusy || selectedCount === 0}
+          >
+            {checkout.isBusy ? 'Updating…' : buttonLabel}
+          </Button>
+        ) : null}
+        {missing.length > 0 ? (
+          <MutedText>Required add-on: {missing.join(', ')}.</MutedText>
+        ) : null}
+        {error || checkout.error ? (
+          <ErrorText>{error || checkout.error}</ErrorText>
+        ) : null}
+      </Card>
+    </FrozenFields>
+  )
+}
+
+const useAddonStyles = (theme: ResolvedTheme) =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        head: { flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8 },
+        eyebrow: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 3,
+          fontWeight: '700',
+          letterSpacing: 0.5,
+          textTransform: 'uppercase',
+          fontFamily: theme.fontFamily,
+        },
+        heading: {
+          flex: 1,
+          color: theme.text,
+          fontSize: theme.fontSize + 2,
+          fontWeight: '700',
+          fontFamily: theme.fontFamily,
+        },
+        skipBtn: { paddingHorizontal: 4, paddingVertical: 2 },
+        skip: {
+          color: theme.accent,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        subtitle: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 3,
+          fontWeight: '600',
+          letterSpacing: 0.3,
+          textTransform: 'uppercase',
+          fontFamily: theme.fontFamily,
+        },
+        sectionLoader: { paddingVertical: 20, alignItems: 'center' },
+        group: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '700',
+          marginTop: 4,
+          fontFamily: theme.fontFamily,
+        },
+        item: { gap: 10 },
+        row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
+        info: { flex: 1, gap: 2 },
+        name: {
+          color: theme.text,
+          fontSize: theme.fontSize,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        req: { color: theme.muted, fontWeight: '400' },
+        price: {
+          color: theme.text,
+          fontSize: theme.fontSize - 1,
+          fontVariant: ['tabular-nums'],
+          fontFamily: theme.fontFamily,
+        },
+        priceNote: { color: theme.muted },
+        desc: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontFamily: theme.fontFamily,
+        },
+        soldOut: {
+          color: theme.muted,
+          fontSize: theme.fontSize - 1,
+          fontWeight: '600',
+          fontFamily: theme.fontFamily,
+        },
+        fields: {
+          gap: 10,
+          paddingTop: 4,
+          paddingLeft: 12,
+          borderLeftWidth: StyleSheet.hairlineWidth,
+          borderLeftColor: theme.border,
+        },
+      }),
+    [theme]
+  )