tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/sections/AddOns.tsx

@@ -0,0 +1,241 @@
+/**
+ * `<AddOns/>` — optional upsells for the primed cart. 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, so it's safe to
+ * always place between `<Tickets/>` and `<BillingInfo/>`.
+ */
+import React, { Fragment, useEffect, useMemo, useState, type FC } from 'react'
+
+import {
+  addOnMaxQuantity,
+  errorMessage,
+  hooks,
+  ttf,
+  type CustomFieldValues,
+  type EventAddon,
+} from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Card } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { CustomFieldGroupFields } from '../ui/CustomFields'
+import { Loader } from '../ui/Loader'
+import { PriceLine } from '../ui/PriceLine'
+import { QuantitySelect } from '../ui/QuantitySelect'
+
+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
+  className?: string
+}
+
+export const AddOns: FC<AddOnsProps> = ({
+  eventId,
+  onContinue,
+  onSkip,
+  buttonLabel = 'CONFIRM SELECTION',
+  eyebrow = 'Get Your Tickets',
+  heading = 'UPGRADES & ADD-ONS',
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  // No onContinue ⇒ combined form (inside <EmbeddedCheckout/>): apply the selection live
+  // (no "confirm" click) — the old checkout applied add-ons at checkout too.
+  const combined = !onContinue
+  const addonsQuery = hooks.useEventAddons(eventId)
+  const all = addonsQuery.data ?? []
+  const addons = ttf.events.filterAddonsForTickets(all, checkout.ticketTypeIds)
+  // Tickets reserved in the cart — the bound for ticket-scoped add-on caps
+  // (the hosted partial's `selectedTotalQty()`).
+  const ticketQuantity = (checkout.breakdown?.tickets ?? []).reduce(
+    (total, line) => total + (line.quantity || 0),
+    0
+  )
+
+  const [qty, setQty] = useState<Record<string, number>>(checkout.addOns ?? {})
+  const [capture, setCapture] = useState<Record<string, CustomFieldValues>>(
+    checkout.addOnDataCapture ?? {}
+  )
+  const [error, setError] = useState('')
+
+  // Custom-field groups keyed by add-on id (scope 'add-on', group id = add-on id).
+  const fieldGroups = useMemo(() => {
+    const map: Record<string, (typeof checkout.customFields)[number]> = {}
+    for (const g of checkout.customFields) if (g.scope === 'add-on') map[g.id] = g
+    return map
+  }, [checkout.customFields])
+
+  // Combined mode: debounce-apply the selection to the cart (which reprices)
+  // as it changes, instead of gating behind a "confirm" button.
+  useEffect(() => {
+    if (!combined) return
+    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
+    if (JSON.stringify(selection) === JSON.stringify(checkout.addOns ?? {})) return
+    const captureForSelected = Object.fromEntries(
+      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
+    )
+    const t = setTimeout(() => {
+      checkout.setAddonDataCapture(captureForSelected)
+      checkout.setAddons(selection).catch((e) => setError(errorMessage(e)))
+    }, 500)
+    return () => clearTimeout(t)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [combined, qty, capture])
+
+  const hasRequired = (checkout.requiredAddOns ?? []).some((a) => a.required)
+  const head = (
+    <div className="tf-checkout-addons__head">
+      {eyebrow && <span className="tf-checkout-addons__eyebrow">{eyebrow}</span>}
+      <span className="tf-checkout-addons__heading">{heading}</span>
+      {onSkip && !hasRequired && (
+        <button type="button" className="tf-checkout-addons__skip" onClick={onSkip}>
+          Skip
+        </button>
+      )}
+    </div>
+  )
+
+  if (addonsQuery.isLoading) {
+    return (
+      <Card className={className}>
+        {head}
+        <div className="tf-checkout-section-loader">
+          <Loader />
+        </div>
+      </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 save = () => {
+    setError('')
+    const selection = Object.fromEntries(Object.entries(qty).filter(([, n]) => n > 0))
+    // Only keep captured fields for add-ons that are actually selected.
+    const captureForSelected = Object.fromEntries(
+      Object.entries(capture).filter(([id]) => (selection[id] ?? 0) > 0)
+    )
+    checkout.setAddonDataCapture(captureForSelected)
+    checkout
+      .setAddons(selection)
+      .then(() => onContinue?.())
+      .catch((e) => setError(errorMessage(e)))
+  }
+
+  const selectedCount = Object.values(qty).filter((n) => n > 0).length
+
+  return (
+    <Card className={className}>
+      {head}
+      <p className="tf-checkout-addons__subtitle">
+        PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+      </p>
+
+      {groups.map((g, gi) => (
+        <Fragment key={g.heading ?? `g${gi}`}>
+          {g.heading && <div className="tf-checkout-addons__group">{g.heading}</div>}
+          {g.items.map((a) => {
+            const n = qty[a.id] ?? 0
+            const group = fieldGroups[a.id]
+            return (
+              <div key={a.id} className="tf-checkout-addons__item">
+                <div className="tf-checkout-addons__row">
+                  <div className="tf-checkout-addons__info">
+                    <div className="tf-checkout-addons__name">
+                      {a.name}
+                      {a.required && (
+                        <span className="tf-checkout-addons__req"> · required</span>
+                      )}
+                    </div>
+                    <div className="tf-checkout-addons__meta">
+                      <PriceLine
+                        currency={a.currency}
+                        amount={a.price}
+                        note={a.feeIncluded ? 'incl. fees' : undefined}
+                      />
+                    </div>
+                    {a.description && (
+                      <div
+                        className="tf-checkout-addons__desc"
+                        dangerouslySetInnerHTML={{ __html: a.description }}
+                      />
+                    )}
+                  </div>
+                  {soldOut(a) ? (
+                    <span className="tf-checkout-tickets__soldout">Sold out</span>
+                  ) : (
+                    <QuantitySelect
+                      value={n}
+                      min={0}
+                      max={max(a)}
+                      onChange={(v) => setQty((q) => ({ ...q, [a.id]: v }))}
+                    />
+                  )}
+                </div>
+                {n > 0 && group && (
+                  <div className="tf-checkout-addons__fields">
+                    <CustomFieldGroupFields
+                      group={group}
+                      values={capture[a.id] ?? {}}
+                      onChange={(name, val) =>
+                        setCapture((c) => ({
+                          ...c,
+                          [a.id]: { ...(c[a.id] ?? {}), [name]: val },
+                        }))
+                      }
+                    />
+                  </div>
+                )}
+              </div>
+            )
+          })}
+        </Fragment>
+      ))}
+
+      {!combined && (
+        <Button
+          block
+          onClick={save}
+          loading={checkout.isBusy}
+          disabled={checkout.isBusy || selectedCount === 0}
+        >
+          {checkout.isBusy ? 'Updating…' : buttonLabel}
+        </Button>
+      )}
+      {missing.length > 0 && (
+        <p className="tf-checkout-note">Required add-on: {missing.join(', ')}.</p>
+      )}
+      {(error || checkout.error) && (
+        <p className="tf-checkout-error-text">{error || checkout.error}</p>
+      )}
+    </Card>
+  )
+}