@tribe-nest/forge 3.54.0 → 3.58.0

package/src/ui/headless/event/useEventCheckout.ts

@@ -1,10 +1,12 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
 import { useCart } from "../../../contexts/CartContext";
 import { useCreateEventOrder } from "../../../data/queries/useEvents";
 import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
 import { useCouponField } from "../coupon/useCouponField";
 import { usePresaleCode } from "./usePresaleCode";
+import { bestAvailableSeats, useEventSeating, type EventSeat } from "./useEventSeating";
+import { maxAddableTickets } from "../../format/ticketAvailability";
 import { useEventWaitlistClaim } from "../../../data/queries/useEventWaitlist";
 import {
   buildAttendeeSlots,
@@ -16,6 +18,7 @@ import {
   type AttendeeNames,
 } from "../../format/attendees";
 import { holdExpiredMessage, isHoldExpiredError } from "../checkout/inventoryHold";
+import { cartHasSeatedLines } from "../checkout/seatConflict";
 import { useInventoryHold } from "../checkout/useInventoryHold";
 import { computeBookingFeeAmount } from "../../format/bookingFee";
 import { checkoutAmounts, isPayWhatYouWant, resolveUnitPrice, ticketSubtotals } from "../../format/pwyw";
@@ -43,8 +46,29 @@ export interface UseEventCheckoutOptions {
    * the finalise page it lands on reads the order's status and renders
    * "request received". */
   onComplete?: (info: { slug: string; orderId: string }) => void;
+  /**
+   * Whether the seat picker is on screen (seating wave 2). The seating read
+   * polls every five seconds while this is true and is not requested at all
+   * while it is false, so a surface that mounts the hook for a closed modal
+   * passes its open state here. Default true. Irrelevant on an event with no
+   * seat map, which never requests the read.
+   */
+  seatingActive?: boolean;
 }
 
+/** The result of a seat tap, so a surface can say WHY a tap did nothing. */
+export type ToggleSeatResult =
+  | { ok: true; selected: boolean }
+  | { ok: false; reason: "unavailable" | "max" | "mix" | "unknown" };
+
+/** A 409 `seats_taken`: the seats another buyer took between the read and the order. */
+const seatsTakenIds = (e: unknown): string[] | null => {
+  const res = (e as { response?: { status?: number; data?: { details?: { eventSeatIds?: unknown } } } })?.response;
+  const ids = res?.data?.details?.eventSeatIds;
+  if (res?.status !== 409 || !Array.isArray(ids)) return null;
+  return ids.filter((id): id is string => typeof id === "string");
+};
+
 const errMessage = (e: unknown) =>
   (e as { response?: { data?: { message?: string } } })?.response?.data?.message || "Something went wrong.";
 
@@ -56,7 +80,7 @@ const errMessage = (e: unknown) =>
  */
 export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions = {}) {
   const { user } = usePublicAuth();
-  const { setTickets, hasTicketsFor } = useCart();
+  const { setTickets, hasTicketsFor, ticketItems } = useCart();
   // The detail is resolved by slug; the order is created against the real event
   // id (the orders endpoint looks the event up by id, not slug).
   // Read THROUGH the presale field rather than calling `useEvent` directly: it
@@ -96,7 +120,63 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
   const flow = usePaymentFlow({ path: `/public/events/${eventId}/start-payment`, autoStart: false });
 
   const [step, setStep] = useState<EventCheckoutStep>("tickets");
-  const [selectedTickets, setSelectedTickets] = useState<Record<string, number>>({});
+  /**
+   * Quantities the buyer chose with the stepper, for GENERAL ADMISSION tiers.
+   *
+   * Not the whole cart: on a reserved-seating tier the quantity is not a number
+   * the buyer types, it is the size of the seat selection below, and
+   * `selectedTickets` derives it from there. Keeping a second count for a seated
+   * tier would be the one way the two could disagree.
+   */
+  const [gaQuantities, setGaQuantities] = useState<Record<string, number>>({});
+  /**
+   * ticketId -> the EVENT seat ids the buyer picked (seating wave 2), in the
+   * order they were picked, so "-" drops the most recent one.
+   */
+  const [selectedSeats, setSelectedSeats] = useState<Record<string, string[]>>({});
+  /**
+   * Seats the buyer had chosen that are no longer theirs to choose: taken by
+   * another buyer between the read and the order (a 409), or read
+   * `unavailable` by a poll while still selected. Named, because "some seats
+   * changed" sends the buyer back to the map to work out which.
+   */
+  const [seatsTaken, setSeatsTaken] = useState<{ labels: string[] } | null>(null);
+  /**
+   * Seats THIS buyer's own order holds. After `createOrder` succeeds the hold
+   * makes them read `unavailable` to everyone, this buyer included; without
+   * this a fan pressing Back would watch their own seats get "taken".
+   */
+  const ownHeldSeatIds = useRef<Set<string>>(new Set());
+
+  /**
+   * The seat map and live availability (seating wave 2). Requested only on an
+   * event that has a map and only while the picker is on screen; polled while
+   * the buyer is on the tickets step, where a seat somebody else takes has to
+   * show within seconds, and left alone on the later steps, where the hold is
+   * what protects the selection.
+   */
+  const seating = useEventSeating(eventId, {
+    enabled: !!event?.hasSeatMap && (opts.seatingActive ?? true),
+    pollMs: step === "tickets" ? 5000 : false,
+  });
+  const isSeatedTier = (ticketId: string) => seating.seatedTierIds.has(ticketId);
+
+  /**
+   * The cart. GA tiers from the stepper, seated tiers from the seat selection.
+   * Only positive quantities: a ticket dropped to 0 is removed entirely, so
+   * `items` never carries a 0-quantity entry (the orders endpoint rejects those
+   * with "quantity must be positive").
+   */
+  const selectedTickets = useMemo<Record<string, number>>(() => {
+    const out: Record<string, number> = {};
+    for (const [ticketId, qty] of Object.entries(gaQuantities)) {
+      if (qty > 0 && !seating.seatedTierIds.has(ticketId)) out[ticketId] = qty;
+    }
+    for (const [ticketId, ids] of Object.entries(selectedSeats)) {
+      if (ids.length > 0) out[ticketId] = ids.length;
+    }
+    return out;
+  }, [gaQuantities, selectedSeats, seating.seatedTierIds]);
   /**
    * ticketId → the amount the buyer chose, per unit, on a pay-what-you-want
    * tier. Absent means "hasn't touched the box", which resolves to the tier's
@@ -183,9 +263,25 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
 
   const totalAmount = subtotals.paid;
 
-  const ticketCount = useMemo(
-    () => Object.values(selectedTickets).reduce((a, b) => a + b, 0),
-    [selectedTickets],
+  const ticketCount = useMemo(() => Object.values(selectedTickets).reduce((a, b) => a + b, 0), [selectedTickets]);
+
+  /** At least one reserved seat is in the selection. */
+  const hasSeatedSelection = useMemo(() => Object.values(selectedSeats).some((ids) => ids.length > 0), [selectedSeats]);
+
+  /**
+   * What the buyer chose, per seated tier, with the labels a surface prints:
+   * the chips under the tier row and the lines in the order summary.
+   */
+  const seatSummary = useMemo(
+    () =>
+      (event?.tickets ?? [])
+        .filter((t) => (selectedSeats[t.id]?.length ?? 0) > 0)
+        .map((t) => ({
+          ticketId: t.id,
+          title: t.title,
+          seats: (selectedSeats[t.id] ?? []).map((id) => ({ id, label: seating.byId.get(id)?.label ?? id })),
+        })),
+    [event, selectedSeats, seating.byId],
   );
 
   /**
@@ -234,26 +330,202 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
   // it that way, so a fan choosing to pay ten times the minimum must not see
   // (or be quoted) ten times the fee. On a cart with no PWYW tier the two
   // subtotals are the same number and this is byte-for-byte the old behaviour.
-  const bookingFeeAmount =
-    serverFeeAmount ?? computeBookingFeeAmount({ subtotal: subtotals.floor, fee: bookingFee });
-
-  // Keep only positive quantities in state — a ticket dropped to 0 is removed
-  // entirely, so `items` never carries a 0-quantity entry (the orders endpoint
-  // rejects those with "quantity must be positive").
-  const setTicketQty = (ticketId: string, qty: number) =>
-    setSelectedTickets((prev) => {
-      // A request and a purchase cannot share an order. The picker disables
-      // the control, and this refuses the write too, so a host that drives the
-      // hook from its own UI cannot build the cart the server will refuse.
-      if (qty > 0 && (prev[ticketId] ?? 0) === 0 && event) {
-        const ticket = event.tickets.find((t) => t.id === ticketId);
-        if (ticket && tierBlockedByApprovalMix(ticket, event.tickets, prev)) return prev;
+  const bookingFeeAmount = serverFeeAmount ?? computeBookingFeeAmount({ subtotal: subtotals.floor, fee: bookingFee });
+
+  /**
+   * A request and a purchase cannot share an order. The picker disables the
+   * control, and every write here refuses too, so a host that drives the hook
+   * from its own UI cannot build the cart the server will refuse.
+   */
+  const mixBlocked = (ticketId: string) => {
+    if (!event || (selectedTickets[ticketId] ?? 0) > 0) return false;
+    const ticket = event.tickets.find((t) => t.id === ticketId);
+    return !!ticket && tierBlockedByApprovalMix(ticket, event.tickets, selectedTickets);
+  };
+
+  /**
+   * The most seats a buyer may hold on one tier, right now: the same
+   * `maxPerPerson` / remaining-seats arithmetic the GA stepper is clamped by,
+   * so a seat map cannot be used to walk past a per-person cap.
+   */
+  const seatCap = (ticketId: string) => {
+    const ticket = event?.tickets.find((t) => t.id === ticketId);
+    if (!ticket) return 0;
+    return maxAddableTickets(ticket, new Date(), reservedForYou[ticketId] ?? 0);
+  };
+
+  const selectedSeatEntries = (ticketId: string): EventSeat[] =>
+    (selectedSeats[ticketId] ?? []).map((id) => seating.byId.get(id)).filter((s): s is EventSeat => !!s);
+
+  /** Add the best `count` available seats to a tier's selection. Returns how many were added. */
+  const addBestAvailable = (ticketId: string, count: number): number => {
+    const current = selectedSeats[ticketId] ?? [];
+    const room = Math.max(0, seatCap(ticketId) - current.length);
+    const wanted = Math.min(count, room);
+    if (wanted <= 0) return 0;
+    const picked = bestAvailableSeats(seating.seats, ticketId, wanted, new Set(current), selectedSeatEntries(ticketId));
+    if (picked.length === 0) return 0;
+    setSelectedSeats((prev) => ({ ...prev, [ticketId]: [...(prev[ticketId] ?? []), ...picked.map((s) => s.id)] }));
+    return picked.length;
+  };
+
+  /**
+   * Set a tier's quantity.
+   *
+   * On a GA tier this writes the number. On a SEATED tier the number is the
+   * selection size, so going up picks that many best-available seats and going
+   * down drops the most recently picked ones: the +/- stepper keeps working on
+   * a seated tier for a buyer who does not care where they sit.
+   */
+  const setTicketQty = (ticketId: string, qty: number) => {
+    if (qty > 0 && mixBlocked(ticketId)) return;
+    if (isSeatedTier(ticketId)) {
+      const current = selectedSeats[ticketId] ?? [];
+      const target = Math.max(0, Math.min(qty, seatCap(ticketId)));
+      if (target > current.length) {
+        addBestAvailable(ticketId, target - current.length);
+      } else if (target < current.length) {
+        setSelectedSeats((prev) => {
+          const next = { ...prev };
+          const kept = (prev[ticketId] ?? []).slice(0, target);
+          if (kept.length > 0) next[ticketId] = kept;
+          else delete next[ticketId];
+          return next;
+        });
       }
+      return;
+    }
+    setGaQuantities((prev) => {
       const next = { ...prev };
       if (qty > 0) next[ticketId] = qty;
       else delete next[ticketId];
       return next;
     });
+  };
+
+  /**
+   * Select or deselect ONE seat (a tap on the map).
+   *
+   * Refuses, and says why, rather than silently doing nothing: a tap that
+   * fails because the tier is at its per-person cap and a tap that fails
+   * because the seat just went are different sentences on screen.
+   */
+  const toggleSeat = (ticketId: string, seatId: string): ToggleSeatResult => {
+    const current = selectedSeats[ticketId] ?? [];
+    if (current.includes(seatId)) {
+      setSelectedSeats((prev) => {
+        const next = { ...prev };
+        const kept = (prev[ticketId] ?? []).filter((id) => id !== seatId);
+        if (kept.length > 0) next[ticketId] = kept;
+        else delete next[ticketId];
+        return next;
+      });
+      return { ok: true, selected: false };
+    }
+    const seat = seating.byId.get(seatId);
+    if (!seat || seat.eventTicketId !== ticketId) return { ok: false, reason: "unknown" };
+    if (seat.status !== "available") return { ok: false, reason: "unavailable" };
+    if (mixBlocked(ticketId)) return { ok: false, reason: "mix" };
+    if (current.length >= seatCap(ticketId)) return { ok: false, reason: "max" };
+    setSelectedSeats((prev) => ({ ...prev, [ticketId]: [...(prev[ticketId] ?? []), seatId] }));
+    return { ok: true, selected: true };
+  };
+
+  const clearSeats = (ticketId: string) =>
+    setSelectedSeats((prev) => {
+      if (!(ticketId in prev)) return prev;
+      const next = { ...prev };
+      delete next[ticketId];
+      return next;
+    });
+
+  /**
+   * Replace a tier's selection with the best `count` available seats: the
+   * lowest contiguous run when one exists, else the lowest seats. Bounded by
+   * the same cap as every other write. Returns how many were picked, so the
+   * surface can say "only 2 seats left together" when it is fewer than asked.
+   */
+  const pickBestAvailable = (ticketId: string, count: number): number => {
+    if (count > 0 && mixBlocked(ticketId)) return 0;
+    const wanted = Math.max(0, Math.min(count, seatCap(ticketId)));
+    const picked = bestAvailableSeats(seating.seats, ticketId, wanted);
+    setSelectedSeats((prev) => {
+      const next = { ...prev };
+      if (picked.length > 0) next[ticketId] = picked.map((s) => s.id);
+      else delete next[ticketId];
+      return next;
+    });
+    return picked.length;
+  };
+
+  /**
+   * Restore a seated selection the cart already holds for this event.
+   *
+   * The bundle checkout sends a buyer whose seats were taken back here with
+   * the rest of their selection still in the cart, and making them re-pick
+   * the seats they had would be a second refusal waiting to happen. So the
+   * first time the seating read lands, a cart line carrying seats becomes the
+   * selection: the seats per tier, the general admission quantities and the
+   * pay-what-you-want amounts beside them, so re-adding the event replaces
+   * the line with the whole of it and loses nothing. Only a line carrying
+   * seats does this; a plain ticket line keeps today's fresh start. A restored
+   * seat that no longer reads available is dropped and named by the poll
+   * effect below, the same as a seat taken mid-selection.
+   */
+  const restoredFromCartRef = useRef(false);
+  useEffect(() => {
+    if (restoredFromCartRef.current || !event || !seating.isFetched || !seating.seating) return;
+    restoredFromCartRef.current = true;
+    const line = ticketItems.find((t) => t.eventId === event.id);
+    if (!line || !cartHasSeatedLines([line])) return;
+    const seats: Record<string, string[]> = {};
+    const ga: Record<string, number> = {};
+    const amounts: Record<string, number> = {};
+    for (const [ticketId, qty] of Object.entries(line.tickets)) {
+      if (qty <= 0) continue;
+      const meta = line.ticketMeta[ticketId];
+      if (seating.seatedTierIds.has(ticketId)) {
+        const ids = (meta?.seatIds ?? []).filter((id) => seating.byId.has(id));
+        if (ids.length > 0) seats[ticketId] = ids;
+      } else {
+        ga[ticketId] = qty;
+      }
+      if (meta?.pwywAmount != null) amounts[ticketId] = meta.pwywAmount;
+    }
+    setSelectedSeats(seats);
+    setGaQuantities(ga);
+    if (Object.keys(amounts).length > 0) setPwywAmounts((prev) => ({ ...prev, ...amounts }));
+  }, [event, seating.isFetched, seating.seating, seating.byId, seating.seatedTierIds, ticketItems]);
+
+  /**
+   * A seat that stopped being available while selected is dropped, and named.
+   *
+   * Runs on every poll. Skips seats this buyer's own hold covers (they read
+   * `unavailable` to everyone once the order exists) and never fires before
+   * the first read has landed, so a slow network cannot empty a selection.
+   */
+  useEffect(() => {
+    if (!seating.isFetched || !seating.seating) return;
+    const gone: EventSeat[] = [];
+    for (const ids of Object.values(selectedSeats)) {
+      for (const id of ids) {
+        if (ownHeldSeatIds.current.has(id)) continue;
+        const seat = seating.byId.get(id);
+        if (seat && seat.status !== "available") gone.push(seat);
+      }
+    }
+    if (gone.length === 0) return;
+    const goneIds = new Set(gone.map((s) => s.id));
+    setSelectedSeats((prev) => {
+      const next: Record<string, string[]> = {};
+      for (const [ticketId, ids] of Object.entries(prev)) {
+        const kept = ids.filter((id) => !goneIds.has(id));
+        if (kept.length > 0) next[ticketId] = kept;
+      }
+      return next;
+    });
+    setSeatsTaken((prev) => ({ labels: [...(prev?.labels ?? []), ...gone.map((s) => s.label)] }));
+  }, [seating.byId, seating.isFetched, seating.seating, selectedSeats]);
 
   /**
    * The buyer's chosen amount for one PWYW tier, PER UNIT.
@@ -317,12 +589,22 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
           // picked on the way to an add-on and back. `pwywAmount` travels
           // beside it because the bundle path sends the two separately: one is
           // display, one is charged.
+          // A seated tier's line carries its seats (seating wave 2, docs §12):
+          // the ids the bundle checkout sends on the line, and the labels the
+          // cart prints. The quantity of such a line IS the seat count, so
+          // the cart offers no stepper for it; changing seats happens here.
           .map((t) => [
             t.id,
             {
               title: t.title,
               price: resolveUnitPrice(t, effectiveAmounts[t.id]),
               ...(isPayWhatYouWant(t) ? { pwywAmount: effectiveAmounts[t.id] } : {}),
+              ...(isSeatedTier(t.id) && (selectedSeats[t.id]?.length ?? 0) > 0
+                ? {
+                    seatIds: [...selectedSeats[t.id]!],
+                    seats: selectedSeats[t.id]!.map((id) => ({ id, label: seating.byId.get(id)?.label ?? id })),
+                  }
+                : {}),
             },
           ]),
       ),
@@ -370,8 +652,20 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
         : null;
 
     try {
+      /**
+       * The chosen seats, per seated tier (seating wave 2). Omitted entirely on
+       * an event with no seat map, so an ordinary purchase posts the body it
+       * always did. Sent only for tiers in the cart, and the server requires
+       * the count to equal the tier's quantity, which it does by construction.
+       */
+      const seatsPayload = Object.fromEntries(
+        Object.entries(selectedSeats).filter(
+          ([ticketId, ids]) => ids.length > 0 && (selectedTickets[ticketId] ?? 0) > 0,
+        ),
+      );
       const data = await createOrder.mutateAsync({
         items: selectedTickets,
+        ...(Object.keys(seatsPayload).length > 0 ? { seats: seatsPayload } : {}),
         // Omitted entirely when nothing in the cart is PWYW, so an ordinary
         // purchase posts the same body it always did.
         ...(Object.keys(effectiveAmounts).length > 0 ? { amounts: effectiveAmounts } : {}),
@@ -418,6 +712,8 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       // fee on a comp.
       setServerFeeAmount(data.feeAmount ?? 0);
       setRequestExpiresAt(data.requestExpiresAt ?? null);
+      // From here the seats read `unavailable` to everyone, this buyer included.
+      ownHeldSeatIds.current = new Set(Object.values(seatsPayload).flat());
       const origin = typeof window !== "undefined" ? window.location.origin : "";
       const ru = `${origin}${finalisePath(slug, data.orderId)}`;
       setReturnUrl(ru);
@@ -434,6 +730,31 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
       if (result.provider && result.provider !== "stripe") return; // Paystack redirected
       setStep("payment");
     } catch (e) {
+      /**
+       * Seats another buyer took between the read and the order (409
+       * `seats_taken`). Checked first: it is the one refusal where the buyer's
+       * details, code and card are all fine and the only fix is on the map.
+       * The taken seats leave the selection, the read is refreshed so the map
+       * shows them grey, and the buyer is put back on the tickets step with
+       * the seats NAMED, because "some seats were taken" sends them hunting.
+       */
+      const takenIds = seatsTakenIds(e);
+      if (takenIds) {
+        const taken = new Set(takenIds);
+        const labels = takenIds.map((id) => seating.byId.get(id)?.label ?? id);
+        setSelectedSeats((prev) => {
+          const next: Record<string, string[]> = {};
+          for (const [ticketId, ids] of Object.entries(prev)) {
+            const kept = ids.filter((id) => !taken.has(id));
+            if (kept.length > 0) next[ticketId] = kept;
+          }
+          return next;
+        });
+        setSeatsTaken({ labels });
+        setStep("tickets");
+        void seating.refetch();
+        return;
+      }
       /**
        * A members-only tier the buyer cannot have. Checked BEFORE the coupon
        * branch: a buyer who happened to type a discount code would otherwise be
@@ -533,6 +854,26 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     setStep,
     selectedTickets,
     setTicketQty,
+    /**
+     * Reserved seating (seating wave 2). `seating` is the joined read (`null`
+     * seating on an event with no map); `isSeatedTier(id)` says whether a tier
+     * sells seats, in which case its quantity IS `selectedSeats[id].length`
+     * and the stepper picks or drops best-available seats. `toggleSeat` is a
+     * tap on the map; `pickBestAvailable` replaces a tier's selection with the
+     * lowest contiguous run. `seatsTaken` names seats that left the selection
+     * because somebody else got them (a 409, or a poll), and is state the
+     * buyer must act on, so a surface renders it as a visible alert.
+     */
+    seating,
+    isSeatedTier,
+    selectedSeats,
+    toggleSeat,
+    clearSeats,
+    pickBestAvailable,
+    seatsTaken,
+    dismissSeatsTaken: () => setSeatsTaken(null),
+    hasSeatedSelection,
+    seatSummary,
     /**
      * Raw buyer input per PWYW tier — only the tiers whose box has been touched.
      * Bind an input to this; read `effectiveAmounts` to know what will be sent.
@@ -571,8 +912,7 @@ export function useEventCheckout(slug?: string, opts: UseEventCheckoutOptions =
     // always been raised by it. The local sum did not, which is what made the
     // pre-payment "Total" a number the buyer would not be charged; the estimated
     // fee is added so the figure on screen means what it says.
-    totalAmount:
-      flow.result?.totalAmount ?? coupon.quote?.totalAmount ?? totalAmount + bookingFeeAmount,
+    totalAmount: flow.result?.totalAmount ?? coupon.quote?.totalAmount ?? totalAmount + bookingFeeAmount,
     /** GROSS ticket total, before any discount OR booking fee. */
     subTotal: coupon.quote?.subTotal ?? totalAmount,
     /**