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

package/src/sections/Tickets.tsx

@@ -0,0 +1,573 @@
+/**
+ * `<Tickets/>` — ticket selection. Lists the event's ticket types with a
+ * quantity dropdown, applies promo / access codes (re-pricing + unlocking
+ * tickets), offers a waiting-list sign-up on sold-out types, and primes the
+ * cart. Matches the old checkout: no running total, a `GET TICKETS` CTA.
+ */
+import React, {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  type FC,
+  type ReactNode,
+} from 'react'
+
+import {
+  errorMessage,
+  hooks,
+  ticketQuantityRange,
+  type TicketType,
+  type WaitingListEntry,
+} from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { cx } from '../ui/cx'
+import { Field, FieldRow, Input } from '../ui/Field'
+import { Loader } from '../ui/Loader'
+import { QuantitySelect } from '../ui/QuantitySelect'
+
+/** Inline waiting-list sign-up for a sold-out type. */
+const WaitingListForm: FC<{
+  ticket: TicketType
+  onJoin: (entry: WaitingListEntry) => Promise<void>
+}> = ({ ticket, onJoin }) => {
+  const [form, setForm] = useState({ firstName: '', lastName: '', email: '' })
+  const [state, setState] = useState<'idle' | 'busy' | 'done' | 'error'>('idle')
+  const [error, setError] = useState('')
+  const ok = form.firstName.trim() && form.lastName.trim() && form.email.trim()
+
+  if (state === 'done')
+    return (
+      <p className="tf-checkout-note tf-checkout-tickets__wl-done">
+        You’re on the waiting list — we’ll email you if a spot opens.
+      </p>
+    )
+
+  return (
+    <div className="tf-checkout-tickets__wl">
+      <FieldRow>
+        <Field>
+          <Input
+            placeholder="First name"
+            value={form.firstName}
+            onChange={(e) => setForm((f) => ({ ...f, firstName: e.target.value }))}
+          />
+        </Field>
+        <Field>
+          <Input
+            placeholder="Last name"
+            value={form.lastName}
+            onChange={(e) => setForm((f) => ({ ...f, lastName: e.target.value }))}
+          />
+        </Field>
+      </FieldRow>
+      <Field>
+        <Input
+          placeholder="Email"
+          value={form.email}
+          onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+        />
+      </Field>
+      <Button
+        onClick={() => {
+          setState('busy')
+          setError('')
+          onJoin({ ...form, ticketTypeId: ticket.id })
+            .then(() => setState('done'))
+            .catch((e) => {
+              setState('error')
+              setError(errorMessage(e))
+            })
+        }}
+        loading={state === 'busy'}
+        disabled={!ok || state === 'busy'}
+        variant="secondary"
+      >
+        Join the waiting list
+      </Button>
+      {error && <p className="tf-checkout-error-text">{error}</p>}
+    </div>
+  )
+}
+
+export interface TicketsProps {
+  eventId: string
+  /** Optional heading above the catalog. The legacy storefront does not show
+   *  one, so the default is intentionally hidden. */
+  title?: ReactNode | false
+  /** Fired once the cart is primed (tickets added) — e.g. reveal `<AddOns/>`. */
+  onContinue?: () => void
+  /** CTA label. Old storefront uses "Get tickets". */
+  buttonLabel?: string
+  /** Force time-slot mode + supply the selectable session dates (ISO yyyy-mm-dd).
+   *  Omit to auto-detect from the event (`isTimeSlotEvent` / `availableDates`). */
+  timeSlotDates?: string[]
+  /** Optional numbered badge (old checkout shows none — omitted by default). */
+  step?: ReactNode
+  /** SEATED events: fired when the buyer clicks "Select seats". Wire this to
+   *  reveal `<SeatMap/>`. Without it the seat CTA is hidden (the seat-map ticket
+   *  types then have no way to be bought — provide it for seated events). */
+  onSelectSeats?: () => void
+  /** Apply this code once when the ticket catalog mounts. */
+  initialPromoCode?: string
+  /** Attribute this visit once. URL values use `ttf_r` / `referrer_id`. */
+  referrer?: string | number
+  /** Also read promo/referral values from the current URL. Defaults true. */
+  readAttributionFromUrl?: boolean
+  className?: string
+}
+
+export const Tickets: FC<TicketsProps> = ({
+  eventId,
+  title = false,
+  onContinue,
+  buttonLabel = 'Get tickets',
+  timeSlotDates,
+  step,
+  onSelectSeats,
+  initialPromoCode,
+  referrer,
+  readAttributionFromUrl = true,
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  const ticketsQuery = hooks.useTicketsWithMeta(eventId)
+  const promoMeta = ticketsQuery.data?.promo
+  const showWaitingList = ticketsQuery.data?.showWaitingList ?? false
+
+  const [qty, setQty] = useState<Record<string, number>>({})
+  const [slotDate, setSlotDate] = useState('')
+
+  // Time-slot / calendar events: pick a date, then buy from that session's slots.
+  const eventInfo = hooks.useEvent(eventId).data
+  const isTimeSlot = Boolean(timeSlotDates?.length || eventInfo?.isTimeSlotEvent)
+  const dates = timeSlotDates ?? eventInfo?.availableDates ?? []
+  useEffect(() => {
+    if (isTimeSlot && !slotDate && dates.length) setSlotDate(dates[0])
+  }, [isTimeSlot, slotDate, dates])
+  const slotQuery = hooks.useTimeSlotTickets(eventId, isTimeSlot ? slotDate : undefined)
+
+  const tickets = isTimeSlot ? (slotQuery.data ?? []) : (ticketsQuery.data?.tickets ?? [])
+  const [error, setError] = useState('')
+  const [code, setCode] = useState('')
+  const [codeState, setCodeState] = useState<'idle' | 'busy'>('idle')
+  const [promoOpen, setPromoOpen] = useState(false)
+  const [wlOpen, setWlOpen] = useState<Record<string, boolean>>({})
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+  const attributionEvent = useRef<string | null>(null)
+
+  // Match hosted links: attribute referral visits and apply a carried promo
+  // once per event. Explicit props win; URL support can be disabled by hosts
+  // that manage routing/attribution themselves.
+  useEffect(() => {
+    if (attributionEvent.current === eventId) return
+    attributionEvent.current = eventId
+
+    let promo = initialPromoCode?.trim() ?? ''
+    let referral: string | number | undefined = referrer
+    if (readAttributionFromUrl && typeof window !== 'undefined') {
+      const params = new URLSearchParams(window.location.search)
+      promo ||= params.get('promo')?.trim() || params.get('promo_code')?.trim() || ''
+      referral ??= params.get('ttf_r') || params.get('referrer_id') || undefined
+    }
+
+    if (referral !== undefined && String(referral).trim()) {
+      checkout.attributeReferrer(eventId, referral).catch(() => undefined)
+    }
+    if (promo) {
+      setCode(promo)
+      setPromoOpen(true)
+      setCodeState('busy')
+      checkout
+        .applyPromoCode(eventId, promo)
+        .catch(() => undefined)
+        .finally(() => {
+          ticketsQuery.refetch().finally(() => setCodeState('idle'))
+        })
+    }
+    // Checkout actions and query functions are stable; this effect is scoped to
+    // one attribution pass per event rather than every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId, initialPromoCode, referrer, readAttributionFromUrl])
+
+  // Seed the currency state once so a multi-currency event can offer a switcher
+  // on the ticket screen (before the cart is primed). No-op for single-currency.
+  useEffect(() => {
+    checkout.syncCurrency(eventId, undefined, { seed: true }).catch(() => undefined)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [eventId])
+
+  const changeCurrency = (code: string) => {
+    checkout
+      .syncCurrency(eventId, code)
+      .then((res) => {
+        if (res.requiresCatalogRefresh) {
+          setQty({})
+          ticketsQuery.refetch()
+        }
+      })
+      .catch(() => undefined)
+  }
+
+  // Remember each type's first-seen (pre-promo) price so a discount can strike it.
+  const originals = useRef<Record<string, number>>({})
+  useEffect(() => {
+    for (const t of tickets)
+      if (originals.current[t.id] == null) originals.current[t.id] = t.price
+  }, [tickets])
+
+  const selected = tickets.filter((t) => (qty[t.id] ?? 0) > 0)
+  // The current selection's kind — drives the CTA label and the mutual-exclusion
+  // rule below (a table order and a ticket order can't be combined).
+  const selectionIsTable = selected.some((t) => t.isTable)
+  const allowMultiple = eventInfo?.allowMultipleTicketTypePurchases === true
+
+  // Ported from the old checkout's `handleTicketSelect`: unless the event opts
+  // into multiple types (`allowMultipleTicketTypePurchases`), a new selection
+  // REPLACES the previous one — one ticket type per order. Even when multiple
+  // are allowed, switching between a table and a regular ticket clears the rest.
+  const selectQty = (t: TicketType, value: number) =>
+    setQty((prev) => {
+      const activeIds = Object.keys(prev).filter((k) => (prev[k] ?? 0) > 0)
+      const prevIsTable = activeIds.length
+        ? Boolean(tickets.find((x) => x.id === activeIds[0])?.isTable)
+        : t.isTable
+      const switchingKind = activeIds.length > 0 && prevIsTable !== t.isTable
+
+      if (!allowMultiple) return value > 0 ? { [t.id]: value } : {}
+      if (switchingKind && value > 0) return { [t.id]: value }
+      const next = { ...prev }
+      if (value > 0) next[t.id] = value
+      else delete next[t.id]
+      return next
+    })
+
+  const money = (sym: string, n: number) => `${sym} ${Number(n).toFixed(2)}`
+
+  // Seated events: the buyer picks on a seat map, so seat-map ticket types show
+  // read-only (no quantity dropdown) and the CTA becomes "Select seats". A type
+  // with `allowDirectPurchase` opts out and keeps its dropdown.
+  const isSeated = eventInfo?.isSeatedEvent ?? false
+  const seatMapRow = (t: TicketType) => isSeated && !t.allowDirectPurchase
+  const hasSeatMapTickets = tickets.some(seatMapRow)
+  // Types that can still be bought with a quantity dropdown (all of them for a
+  // non-seated event). When empty on a seated event, only "Select seats" shows.
+  const directPurchasable = tickets.filter((t) => !seatMapRow(t))
+  const seatCtaLabel = eventInfo?.tableMapEnabled ? 'Select on map' : 'Select seats'
+
+  // A "Tables" divider before the first table type — only when regular tickets
+  // actually precede it (a tables-first list gets no stray divider).
+  const firstTableIndex = tickets.findIndex((t) => t.isTable)
+  const firstTableId =
+    firstTableIndex > 0 && tickets.slice(0, firstTableIndex).some((t) => !t.isTable)
+      ? tickets[firstTableIndex].id
+      : undefined
+
+  const prime = () => {
+    setError('')
+    checkout
+      .setTickets(
+        eventId,
+        selected.map((t) => ({ ...t, quantity: qty[t.id] }))
+      )
+      .then(() => onContinue?.())
+      .catch((e) => setError(errorMessage(e)))
+  }
+
+  const applyCode = () => {
+    if (!code.trim()) return
+    setCodeState('busy')
+    checkout
+      .applyPromoCode(eventId, code.trim())
+      .catch(() => undefined)
+      .finally(() => {
+        ticketsQuery.refetch().finally(() => setCodeState('idle'))
+      })
+  }
+
+  const isAccess = promoMeta?.isAccessCodeEnabled
+  const showCodeInput = promoMeta?.isPromotionsEnabled || isAccess
+  const listQuery = isTimeSlot ? slotQuery : ticketsQuery
+
+  const renderRow = (t: TicketType) => {
+    const notStarted = !t.salesStarted
+    const unavailable = t.soldOut || t.salesEnded || notStarted
+    const original = originals.current[t.id]
+    const discounted = original != null && original > t.price
+    const canWaitlist =
+      t.soldOut && (t.waitingListEnabled || showWaitingList) && !t.salesEnded
+    const isFree = Number(t.price) === 0
+    const sym = t.priceSymbol || t.currency
+    const range = ticketQuantityRange(t)
+    const ticketIndex = tickets.findIndex((candidate) => candidate.id === t.id)
+    const previousTicket = ticketIndex > 0 ? tickets[ticketIndex - 1] : undefined
+    const startsNamedGroup =
+      Boolean(t.groupName) && t.groupName !== previousTicket?.groupName
+    return (
+      <Fragment key={t.id}>
+        {startsNamedGroup ? (
+          <div className="tf-checkout-tickets__group">{t.groupName}</div>
+        ) : (
+          t.id === firstTableId && (
+            <div className="tf-checkout-tickets__group">Reserve tables</div>
+          )
+        )}
+        <div className="tf-checkout-tickets__row-wrap">
+          <div className="tf-checkout-tickets__row">
+            <div className="tf-checkout-tickets__info">
+              <div className="tf-checkout-tickets__name">
+                <span>{t.name}</span>
+                {t.descriptionRich && (
+                  <button
+                    type="button"
+                    className="tf-checkout-tickets__description-toggle"
+                    aria-expanded={visibleDescription === t.id}
+                    aria-controls={`ticket-description-${t.id}`}
+                    onClick={() =>
+                      setVisibleDescription((current) => (current === t.id ? null : t.id))
+                    }
+                  >
+                    {visibleDescription === t.id ? 'Hide info' : 'View info'}
+                  </button>
+                )}
+              </div>
+              <div className="tf-checkout-tickets__price">
+                {discounted && (
+                  <span className="tf-checkout-tickets__old">
+                    {money(sym, original!)}
+                  </span>
+                )}
+                <span
+                  className={cx(
+                    'tf-checkout-tickets__amount',
+                    isFree && 'tf-checkout-tickets__amount--free'
+                  )}
+                >
+                  {isFree ? 'FREE' : money(sym, t.price)}
+                </span>
+                {/* Fees sub-line (the "(… with fees)" the old checkout shows) —
+                  omitted for free/sold-out types. */}
+                {!isFree && !t.soldOut && (
+                  <span className="tf-checkout-tickets__fees">
+                    ({money(sym, t.priceWithFees)} with fees)
+                  </span>
+                )}
+                {t.depositPercent != null && (
+                  <span className="tf-checkout-tickets__deposit">
+                    {t.depositPercent.toFixed(2)}% DEPOSIT
+                  </span>
+                )}
+              </div>
+            </div>
+            {/* Seat-map types are read-only here — no quantity control; the buyer
+                picks them on the map via "Select seats". */}
+            {seatMapRow(t) ? null : unavailable ? (
+              <span className="tf-checkout-tickets__soldout">
+                {t.soldOut
+                  ? 'Sold out'
+                  : notStarted
+                    ? 'Sales not started'
+                    : 'Sales Ended'}
+              </span>
+            ) : (
+              <div className="tf-checkout-tickets__qty">
+                {/* Tables pick a number of GUESTS (bounded by minGuests/maxGuests),
+                  not a count of tickets — the label makes that explicit, matching
+                  the old checkout's "GUESTS" affordance. */}
+                {t.isTable && <span className="tf-checkout-tickets__guests">Guests</span>}
+                <QuantitySelect
+                  value={qty[t.id] ?? 0}
+                  min={range.min}
+                  max={range.max}
+                  step={range.step}
+                  onChange={(v) => selectQty(t, v)}
+                />
+              </div>
+            )}
+          </div>
+          {t.descriptionRich && visibleDescription === t.id && (
+            <div
+              id={`ticket-description-${t.id}`}
+              className="tf-checkout-tickets__description"
+              dangerouslySetInnerHTML={{ __html: t.descriptionRich }}
+            />
+          )}
+          {canWaitlist &&
+            (wlOpen[t.id] ? (
+              <WaitingListForm
+                ticket={t}
+                onJoin={(entry) => checkout.joinWaitingList(eventId, entry)}
+              />
+            ) : (
+              <button
+                type="button"
+                className="tf-checkout-tickets__wl-toggle"
+                onClick={() => setWlOpen((w) => ({ ...w, [t.id]: true }))}
+              >
+                Join the waiting list
+              </button>
+            ))}
+        </div>
+      </Fragment>
+    )
+  }
+
+  // Time-slot layout groups the date's tickets under their time heading.
+  const timeGroups: { time: string; items: TicketType[] }[] = []
+  if (isTimeSlot)
+    for (const t of tickets) {
+      const time = t.timeSlot?.time ?? ''
+      const g = timeGroups.find((x) => x.time === time)
+      if (g) g.items.push(t)
+      else timeGroups.push({ time, items: [t] })
+    }
+
+  return (
+    <Card className={cx('tf-checkout-tickets', className)}>
+      {(title !== false || step != null) && (
+        <SectionHeader
+          step={step}
+          title={title || ''}
+          pills={listQuery.isFetching && !listQuery.isLoading ? <Loader /> : undefined}
+        />
+      )}
+
+      {listQuery.isLoading && (
+        <div className="tf-checkout-tickets__loading">
+          <Loader className="tf-checkout-tickets__loading-spinner" />
+        </div>
+      )}
+
+      {listQuery.error && (
+        <p className="tf-checkout-error-text">{(listQuery.error as Error).message}</p>
+      )}
+
+      {isTimeSlot && dates.length > 0 && (
+        <div className="tf-checkout-tickets__currency">
+          <span className="tf-checkout-tickets__currency-label">Date</span>
+          <select
+            className="tf-checkout-select"
+            value={slotDate}
+            onChange={(e) => {
+              setSlotDate(e.target.value)
+              setQty({})
+            }}
+          >
+            {dates.map((d) => (
+              <option key={d} value={d}>
+                {d}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {checkout.currency && checkout.currency.available.length > 1 && (
+        <div className="tf-checkout-tickets__currency">
+          <span className="tf-checkout-tickets__currency-label">Currency</span>
+          <select
+            className="tf-checkout-select"
+            value={checkout.currency.currency}
+            onChange={(e) => changeCurrency(e.target.value)}
+          >
+            {checkout.currency.available.map((c) => (
+              <option key={c.code} value={c.code}>
+                {c.name} ({c.code})
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {isTimeSlot && !slotQuery.isLoading && tickets.length === 0 && slotDate && (
+        <p className="tf-checkout-note">No sessions available on this date.</p>
+      )}
+
+      {isTimeSlot
+        ? timeGroups.map((g) => (
+            <Fragment key={g.time}>
+              {g.time && <div className="tf-checkout-tickets__slot-time">{g.time}</div>}
+              {g.items.map(renderRow)}
+            </Fragment>
+          ))
+        : tickets.map(renderRow)}
+
+      {/* Promo / access code */}
+      {showCodeInput && (
+        <div className="tf-checkout-tickets__promo">
+          {!isAccess && !promoOpen ? (
+            <button
+              type="button"
+              className="tf-checkout-tickets__promo-toggle"
+              onClick={() => setPromoOpen(true)}
+            >
+              Got a promo code? Click here
+            </button>
+          ) : (
+            <>
+              <FieldRow>
+                <Field>
+                  <Input
+                    placeholder={isAccess ? 'Access code' : 'Promo code'}
+                    value={code}
+                    onChange={(e) => setCode(e.target.value)}
+                    onKeyDown={(e) => e.key === 'Enter' && applyCode()}
+                  />
+                </Field>
+                <Button
+                  variant="secondary"
+                  onClick={applyCode}
+                  loading={codeState === 'busy'}
+                  disabled={codeState === 'busy' || !code.trim()}
+                >
+                  {isAccess ? 'ENTER' : 'APPLY'}
+                </Button>
+              </FieldRow>
+              {promoMeta?.promoCodeMessage && (
+                <p
+                  className={cx(
+                    'tf-checkout-note',
+                    promoMeta.promoCodeValid === false && 'tf-checkout-error-text'
+                  )}
+                >
+                  {promoMeta.promoCodeMessage}
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Direct-purchase CTA — hidden on a fully-seated event (nothing to buy by
+          quantity; the seat map is the only path). */}
+      {directPurchasable.length > 0 && (
+        <Button
+          block
+          onClick={prime}
+          loading={checkout.isBusy}
+          disabled={checkout.isBusy || selected.length === 0}
+        >
+          {checkout.isBusy
+            ? 'Reserving…'
+            : selectionIsTable
+              ? 'Reserve tables'
+              : buttonLabel}
+        </Button>
+      )}
+
+      {/* Seated events: hand off to the seat map instead of quantity selection. */}
+      {hasSeatMapTickets && (
+        <Button block onClick={() => onSelectSeats?.()}>
+          {seatCtaLabel}
+        </Button>
+      )}
+
+      {(error || checkout.error) && (
+        <p className="tf-checkout-error-text">{error || checkout.error}</p>
+      )}
+    </Card>
+  )
+}