tf-checkout-react 1.7.31 → 2.0.0-beta.1

package/src/sections/SeatMap.tsx

@@ -0,0 +1,512 @@
+/**
+ * `<SeatMap/>` — the venue seat picker for seated events, rebuilt to match the
+ * legacy `seatMapContainer` exactly (the REAL seat wire, not the earlier
+ * inferred mapping):
+ *
+ *  1. Fetch the chart (`seat-map-data`) → `seatData`, `ticketTypeTierRelations`,
+ *     `eventSeats`, `seatReservationTime`, `seatMapType`, `tierPrices`,
+ *     `predefinedSeats`. Poll `seats/status` every 3s and derive the seats this
+ *     buyer owns (status `'OR'`).
+ *  2. Clicking a seat reserves it (`ttf.seatmap.reserve`, one seat per call);
+ *     clicking a held seat releases it (`ttf.seatmap.removeReserved`). Blocked /
+ *     reserved-by-others seats and the 10-seat cap are enforced like legacy.
+ *  3. Each held seat gets a ticket-type dropdown (auto-selected when its tier
+ *     offers only one) and, for table/group types, a guest-count dropdown.
+ *  4. "Get tickets" turns the held seats into `SeatLine`s and calls
+ *     `checkout.setSeats(eventId, lines)` → the seat-aware add-to-cart + price.
+ *
+ * Boundaries (documented, not hidden):
+ *  - `tf-seat-map-view` is an OPTIONAL peer dependency. Install it and import its
+ *    CSS (`import 'tf-seat-map-view/dist/index.css'`) to use this section; it is
+ *    lazy-loaded + externalized, so it never weighs on the base SDK.
+ *  - Guest-count → cart shape follows the spec's model: a `SeatLine` carries
+ *    `guests` ONLY for guest-capable (table) types, so plain seated events post
+ *    aggregated per-type quantities and table events post one indexed line per
+ *    seat with `quantity = guests`. Validate against a real table-map event.
+ */
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentType,
+  type FC,
+  type ReactNode,
+} from 'react'
+
+import { errorMessage, ttf, type SeatLine } from 'tf-checkout-shared'
+
+import { Button } from '../ui/Button'
+import { Card, SectionHeader } from '../ui/Card'
+import { useCheckoutContext } from '../ui/CheckoutProvider'
+import { Field, Select } from '../ui/Field'
+import { Loader } from '../ui/Loader'
+import { Timer } from '../ui/Timer'
+import {
+  getOwnReservationsBasedOnStatuses,
+  getTierIdBasedOnSeatId,
+  getTierRelationsArray,
+  isGuestCapable,
+  MAX_SEATS,
+  ticketTypesForTier,
+  UNSELECTABLE_STATUSES,
+  type EventSeatLike,
+  type ReservedSeat,
+  type SeatRelation,
+  type SeatStatuses,
+  type TierRelations,
+} from './seatMap.utils'
+
+// tf-seat-map-view ships no types (see src/.d.ts ambient module) — treat the
+// default export as an opaque component rendered with the legacy prop contract.
+type SeatMapWidget = ComponentType<Record<string, unknown>>
+
+/** The seat click payload the widget emits: `{ seat: { tierId, seatId, status } }`. */
+interface SeatClick {
+  seat: { tierId: string; seatId: string; status: string }
+}
+
+interface Chart {
+  seatData: unknown
+  ticketTypeTierRelations: TierRelations
+  eventSeats: EventSeatLike[]
+  seatReservationTime: number
+  seatMapType: string | null
+  tierPrices: unknown
+  predefinedSeats: unknown
+}
+
+type Load<T> =
+  | { state: 'loading' }
+  | { state: 'ready'; data: T }
+  | { state: 'empty' }
+  | { state: 'error' }
+
+export interface SeatMapProps {
+  eventId: string
+  /** Fired once seats are added to the cart + priced — e.g. reveal billing. */
+  onContinue?: () => void
+  /** Badge content. Defaults to a seat glyph. */
+  step?: ReactNode
+  className?: string
+}
+
+export const SeatMap: FC<SeatMapProps> = ({
+  eventId,
+  onContinue,
+  step = '💺',
+  className,
+}) => {
+  const checkout = useCheckoutContext()
+  const [chart, setChart] = useState<Load<Chart>>({ state: 'loading' })
+  const [Widget, setWidget] = useState<SeatMapWidget | null>(null)
+  const [widgetMissing, setWidgetMissing] = useState(false)
+
+  const [statuses, setStatuses] = useState<SeatStatuses>({})
+  const [reserved, setReserved] = useState<ReservedSeat[]>([])
+  const [selectedTypes, setSelectedTypes] = useState<Record<string, string>>({})
+  const [guestCounts, setGuestCounts] = useState<Record<string, number>>({})
+  const [reserving, setReserving] = useState(false)
+  const [adding, setAdding] = useState(false)
+  const [error, setError] = useState('')
+  const [deadline, setDeadline] = useState<number | null>(null)
+  const [nowTick, setNowTick] = useState(0)
+
+  // The poll's setInterval closure reads these without re-subscribing.
+  const eventSeatsRef = useRef<EventSeatLike[]>([])
+  const relationsRef = useRef<TierRelations>({})
+  const reservationTimeRef = useRef(0)
+  const canvasRef = useRef<HTMLDivElement | null>(null)
+
+  // Lazy-load the optional widget; a consumer who never installed it just gets
+  // the "unavailable" note instead of a hard module-resolution crash.
+  useEffect(() => {
+    let active = true
+    import('tf-seat-map-view')
+      .then((m) => active && setWidget(() => (m.default ?? m) as SeatMapWidget))
+      .catch(() => active && setWidgetMissing(true))
+    return () => {
+      active = false
+    }
+  }, [])
+
+  // Fetch the chart. `get()` returns the JSON:API envelope, so read
+  // `.data.attributes`; `seatData` is a JSON string the widget wants parsed.
+  useEffect(() => {
+    let active = true
+    setChart({ state: 'loading' })
+    console.log('[SeatMap] Fetching chart for eventId:', eventId)
+    ttf.seatmap
+      .data(eventId)
+      .then((resp) => {
+        if (!active) return
+        console.log('[SeatMap] Raw response from ttf.seatmap.data:', resp)
+        console.log('[SeatMap] typeof resp:', typeof resp)
+        console.log('[SeatMap] resp?.data:', (resp as any)?.data)
+        console.log('[SeatMap] resp?.data?.attributes:', (resp as any)?.data?.attributes)
+        const attrs = (resp as { data?: { attributes?: Record<string, unknown> } })?.data
+          ?.attributes
+        console.log('[SeatMap] Parsed attrs:', attrs)
+        console.log('[SeatMap] attrs?.seatData:', attrs?.seatData)
+        console.log('[SeatMap] attrs?.seatData == null:', attrs?.seatData == null)
+        if (!attrs || attrs.seatData == null) {
+          console.warn(
+            '[SeatMap] Setting chart to EMPTY because:',
+            !attrs ? 'attrs is falsy' : 'seatData is null/undefined'
+          )
+          setChart({ state: 'empty' })
+          return
+        }
+        const rawSeatData = attrs.seatData
+        let seatData: unknown = rawSeatData
+        if (typeof rawSeatData === 'string') {
+          try {
+            seatData = JSON.parse(rawSeatData)
+          } catch {
+            seatData = rawSeatData
+          }
+        }
+        const relations = (attrs.ticketTypeTierRelations ?? {}) as TierRelations
+        const eventSeats = (attrs.eventSeats ?? []) as EventSeatLike[]
+        eventSeatsRef.current = eventSeats
+        relationsRef.current = relations
+        reservationTimeRef.current = Number(attrs.seatReservationTime) || 0
+        // The widget reads tier prices off a global (legacy "temp solution").
+        if (typeof window !== 'undefined') {
+          ;(window as unknown as { tierPrices?: unknown }).tierPrices = attrs.tierPrices
+        }
+        console.log('[SeatMap] Setting chart to READY', {
+          seatMapType: attrs.seatMapType,
+          seatReservationTime: reservationTimeRef.current,
+          eventSeatsCount: eventSeats.length,
+          relationsKeys: Object.keys(relations),
+          seatDataType: typeof seatData,
+        })
+        setChart({
+          state: 'ready',
+          data: {
+            seatData,
+            ticketTypeTierRelations: relations,
+            eventSeats,
+            seatReservationTime: reservationTimeRef.current,
+            seatMapType: (attrs.seatMapType ?? null) as string | null,
+            tierPrices: attrs.tierPrices,
+            predefinedSeats: attrs.predefinedSeats,
+          },
+        })
+      })
+      .catch((err) => {
+        console.error('[SeatMap] Fetch FAILED — setting chart to ERROR', err)
+        if (active) setChart({ state: 'error' })
+      })
+    return () => {
+      active = false
+    }
+  }, [eventId])
+
+  // Poll live statuses every 3s (like legacy) once the chart is ready: derive the
+  // seats this buyer owns, auto-select single-type tiers, prune released seats.
+  const refreshStatuses = useCallback(async () => {
+    try {
+      const resp = await ttf.seatmap.statuses(eventId)
+      const attrs = ((resp as { data?: { attributes?: SeatStatuses } })?.data
+        ?.attributes ?? {}) as SeatStatuses
+      const own = getOwnReservationsBasedOnStatuses(attrs) // mutates 'H' → 'BLOCKED'
+      const nextReserved: ReservedSeat[] = own.map((seatId) => ({
+        seatId,
+        tierId: getTierIdBasedOnSeatId(seatId, eventSeatsRef.current),
+      }))
+      setStatuses(attrs)
+      setReserved(nextReserved)
+      const ownSet = new Set(own)
+      setSelectedTypes((prev) => {
+        const next: Record<string, string> = {}
+        for (const r of nextReserved) {
+          if (prev[r.seatId] != null) {
+            next[r.seatId] = prev[r.seatId]
+          } else {
+            const types = ticketTypesForTier(relationsRef.current, r.tierId)
+            next[r.seatId] = types.length === 1 ? types[0].ticket_type_id : ''
+          }
+        }
+        return next
+      })
+      setGuestCounts((prev) => {
+        const next: Record<string, number> = {}
+        for (const seatId of Object.keys(prev))
+          if (ownSet.has(seatId)) next[seatId] = prev[seatId]
+        return next
+      })
+    } catch {
+      // A transient status poll failure is non-fatal — keep the last snapshot.
+    }
+  }, [eventId])
+
+  useEffect(() => {
+    if (chart.state !== 'ready') return
+    refreshStatuses()
+    const id = setInterval(refreshStatuses, 3000)
+    return () => clearInterval(id)
+  }, [chart.state, refreshStatuses])
+
+  // Reservation countdown: arm it when the first seat is held; clear when none
+  // remain. The server is the source of truth — expiry drops seats via the poll.
+  useEffect(() => {
+    if (reserved.length && deadline == null && reservationTimeRef.current) {
+      setDeadline(Date.now() + reservationTimeRef.current * 60000)
+    } else if (!reserved.length && deadline != null) {
+      setDeadline(null)
+    }
+  }, [reserved.length, deadline])
+  useEffect(() => {
+    if (deadline == null) return
+    const id = setInterval(() => setNowTick((n) => n + 1), 1000)
+    return () => clearInterval(id)
+  }, [deadline])
+  const secondsLeft =
+    deadline != null ? Math.max(0, Math.round((deadline - Date.now()) / 1000)) : undefined
+  // referenced so the 1s tick re-renders the timer
+  void nowTick
+
+  const reserve = async (tierId: string, seatId: string) => {
+    setError('')
+    setReserving(true)
+    try {
+      await ttf.seatmap.reserve(eventId, { tierId, seatId, ttl: 10 })
+      await refreshStatuses()
+      // Auto-select the tier's type if it's the only one (legacy behaviour).
+      const types = ticketTypesForTier(relationsRef.current, tierId)
+      if (types.length === 1) {
+        setSelectedTypes((s) => ({ ...s, [seatId]: types[0].ticket_type_id }))
+      }
+    } catch (e) {
+      setError(errorMessage(e))
+    } finally {
+      setReserving(false)
+    }
+  }
+
+  const cancel = async (tierId: string, seatId: string) => {
+    setError('')
+    setReserving(true)
+    try {
+      await ttf.seatmap.removeReserved(eventId, tierId, [seatId])
+      await refreshStatuses()
+    } catch (e) {
+      setError(errorMessage(e))
+    } finally {
+      setReserving(false)
+    }
+  }
+
+  const onSeatClick = (info: SeatClick) => {
+    const { tierId, seatId, status } = info.seat
+    if (UNSELECTABLE_STATUSES.has(status)) return
+    if (reserved.some((r) => r.seatId === seatId)) {
+      cancel(tierId, seatId)
+    } else if (reserved.length >= MAX_SEATS) {
+      setError(`You can hold at most ${MAX_SEATS} seats.`)
+    } else {
+      reserve(tierId, seatId)
+    }
+  }
+
+  const relationFor = (seatId: string): SeatRelation | undefined => {
+    const seat = reserved.find((r) => r.seatId === seatId)
+    const typeId = selectedTypes[seatId]
+    if (!seat || !typeId) return undefined
+    return ticketTypesForTier(relationsRef.current, seat.tierId).find(
+      (t) => t.ticket_type_id === typeId
+    )
+  }
+
+  // "Get tickets" is enabled only once every held seat has a type chosen.
+  const allChosen =
+    reserved.length > 0 && reserved.every((r) => Boolean(selectedTypes[r.seatId]))
+
+  const getTickets = () => {
+    setError('')
+    const lines: SeatLine[] = []
+    for (const r of reserved) {
+      const rel = relationFor(r.seatId)
+      if (!rel) continue
+      const guestCapable = isGuestCapable(rel)
+      const min = Number(rel.ticket_type_min_number_of_guests) || 0
+      lines.push({
+        seatId: r.seatId,
+        tierId: r.tierId,
+        ticketTypeId: rel.ticket_type_id,
+        optionName: rel.ticket_type_option,
+        price: Number(rel.ticket_type_price),
+        ...(guestCapable ? { guests: guestCounts[r.seatId] ?? min } : {}),
+      })
+    }
+    if (!lines.length) {
+      setError('Please choose a ticket type for each seat.')
+      return
+    }
+    setAdding(true)
+    checkout
+      .setSeats(eventId, lines)
+      .then(() => onContinue?.())
+      .catch((e) => setError(errorMessage(e)))
+      .finally(() => setAdding(false))
+  }
+
+  const symbol = checkout.breakdown?.currencySymbol ?? ''
+
+  return (
+    <Card className={className}>
+      <SectionHeader
+        step={step}
+        title="Select your seats"
+        pills={secondsLeft != null ? <Timer seconds={secondsLeft} /> : undefined}
+      />
+
+      {chart.state === 'loading' && (
+        <div className="tf-checkout-seatmap__loading">
+          <Loader />
+        </div>
+      )}
+
+      {chart.state === 'empty' && (
+        <p className="tf-checkout-note">
+          This event has no seating chart — choose tickets above instead.
+        </p>
+      )}
+
+      {chart.state === 'error' && (
+        <p className="tf-checkout-note">
+          This seat map is currently unavailable in the checkout widget. If this event
+          uses Seats.io, please return to the main event page to pick your seats.
+        </p>
+      )}
+
+      {chart.state === 'ready' && widgetMissing && (
+        <p className="tf-checkout-note">
+          Seat map unavailable — install <code>tf-seat-map-view</code> and import its CSS
+          to enable the picker.
+        </p>
+      )}
+
+      {chart.state === 'ready' && !widgetMissing && (
+        <>
+          <div className="tf-checkout-seatmap__canvas" ref={canvasRef}>
+            {Widget ? (
+              <Widget
+                seatData={chart.data.seatData}
+                statuses={statuses}
+                isSelectionOn={false}
+                disabled={reserving}
+                loading={reserving}
+                events={{ onSeatClick }}
+                ticketTypeTireRelationsArray={getTierRelationsArray(
+                  chart.data.ticketTypeTierRelations
+                )}
+                width={Math.min(canvasRef.current?.clientWidth || 800, 800)}
+                height={Math.min(canvasRef.current?.clientWidth || 800, 800)}
+                isBlockMap={chart.data.seatMapType === 'block'}
+                isTableMap={chart.data.seatMapType === 'table'}
+                predefinedSeats={chart.data.predefinedSeats}
+              />
+            ) : (
+              <Loader />
+            )}
+          </div>
+
+          {reserved.length > 0 && (
+            <div className="tf-checkout-seatmap__seats">
+              {reserved.map((r) => {
+                const types = ticketTypesForTier(relationsRef.current, r.tierId)
+                const rel = relationFor(r.seatId)
+                const guestCapable = isGuestCapable(rel)
+                const min = Number(rel?.ticket_type_min_number_of_guests) || 0
+                const max = Number(rel?.ticket_type_max_number_of_guests) || 0
+                const guests = guestCounts[r.seatId] ?? min
+                const unitPrice = Number(rel?.ticket_type_price ?? 0)
+                const guestPrice = guestCapable
+                  ? (guests - min) * Number(rel?.guest_price ?? 0)
+                  : 0
+                const total = (unitPrice + guestPrice).toFixed(2)
+                return (
+                  <div key={r.seatId} className="tf-checkout-seatmap__seat">
+                    <Field label={`Seat ${r.seatId}`}>
+                      <Select
+                        value={selectedTypes[r.seatId] || ''}
+                        onChange={(e) =>
+                          setSelectedTypes((s) => ({ ...s, [r.seatId]: e.target.value }))
+                        }
+                      >
+                        <option value="">Please select a ticket type</option>
+                        {types.map((t) => (
+                          <option key={t.ticket_type_id} value={t.ticket_type_id}>
+                            {t.ticket_type_name}
+                          </option>
+                        ))}
+                      </Select>
+                    </Field>
+
+                    {guestCapable && (
+                      <Field label="Guests">
+                        <Select
+                          value={guests}
+                          onChange={(e) =>
+                            setGuestCounts((g) => ({
+                              ...g,
+                              [r.seatId]: Number(e.target.value),
+                            }))
+                          }
+                        >
+                          {Array.from(
+                            { length: Math.max(0, max - min + 1) },
+                            (_, i) => min + i
+                          ).map((n) => (
+                            <option key={n} value={n}>
+                              {n}
+                            </option>
+                          ))}
+                        </Select>
+                      </Field>
+                    )}
+
+                    <div className="tf-checkout-seatmap__seat-foot">
+                      {rel && (
+                        <span className="tf-checkout-seatmap__seat-price">
+                          {symbol}
+                          {total}
+                          <span className="tf-checkout-note">
+                            {rel.fee_included ? ' incl. fees' : ' excl. fees'}
+                          </span>
+                        </span>
+                      )}
+                      <button
+                        type="button"
+                        className="tf-checkout-seatmap__seat-remove"
+                        onClick={() => cancel(r.tierId, r.seatId)}
+                        disabled={reserving}
+                      >
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                )
+              })}
+
+              <Button
+                block
+                onClick={getTickets}
+                loading={adding}
+                disabled={adding || reserving || !allChosen}
+              >
+                {adding
+                  ? 'Reserving…'
+                  : `Get ${reserved.length} seat${reserved.length > 1 ? 's' : ''}`}
+              </Button>
+            </div>
+          )}
+          {error && <p className="tf-checkout-error-text">{error}</p>}
+        </>
+      )}
+    </Card>
+  )
+}