@tribe-nest/forge 3.54.0 → 3.58.0

package/src/ui/headless/checkout/useCheckout.ts

@@ -22,6 +22,16 @@ import { bundleCouponSummary, bundleReturnUrl } from "./bundleCoupon";
 import { holdExpiredMessage, isHoldExpiredError } from "./inventoryHold";
 import { takeResumedCoupon } from "./resumedCoupon";
 import { useInventoryHold } from "./useInventoryHold";
+import {
+  cartHasSeatedLines,
+  findSeatConflict,
+  seatsTakenConflict,
+  seatsTakenIdsOf,
+  type SeatsConflict,
+} from "./seatConflict";
+import { useForge } from "../../../provider/ForgeProvider";
+import { internalPath } from "../../../runtime/pages";
+import type { PublicEventSeating } from "../../../data/queries/useEvents";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
 import { computeBookingFeeAmount } from "../../format/bookingFee";
@@ -116,7 +126,8 @@ function messageOf(e: unknown): string | undefined {
 export function useCheckout(opts: UseCheckoutOptions = {}) {
   const finalisePath = opts.finalisePath ?? "/checkout/finalise";
   const { user } = usePublicAuth();
-  const { cartItems, ticketItems, isReady: isCartReady } = useCart();
+  const { cartItems, ticketItems, removeTicketSeats, isReady: isCartReady } = useCart();
+  const { client, profileId } = useForge();
   /**
    * Any cart holding tickets settles through the checkout (bundle) engine,
    * even with NO products beside them. Tickets have no single-surface order
@@ -144,11 +155,7 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
         cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0) +
           ticketItems.reduce(
             (sum, t) =>
-              sum +
-              Object.entries(t.tickets).reduce(
-                (acc, [id, qty]) => acc + (t.ticketMeta[id]?.price ?? 0) * qty,
-                0,
-              ),
+              sum + Object.entries(t.tickets).reduce((acc, [id, qty]) => acc + (t.ticketMeta[id]?.price ?? 0) * qty, 0),
             0,
           ),
       ),
@@ -222,7 +229,43 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
    */
   const [settledCheckoutId, setSettledCheckoutId] = useState<string | null>(null);
   const [startError, setStartError] = useState("");
+  /**
+   * Seats in the cart that another buyer took (seating wave 2, docs §12).
+   *
+   * Set by the re-read of `GET /public/events/:id/seating` that runs right
+   * before the bundle is created, or by the 409 `SEATS_TAKEN` the create
+   * answers when the read and the write disagree. While set, no bundle exists
+   * and no payment starts: the surface shows the seats by name and offers
+   * `chooseOtherSeats`, which prunes them from the cart and sends the buyer
+   * back to that event's picker. Never a substitute seat.
+   */
+  const [seatsConflict, setSeatsConflict] = useState<SeatsConflict | null>(null);
   const startedRef = useRef(false);
+  /** The cart's ticket lines as the create effect last saw them, for the seat check. */
+  const ticketItemsRef = useRef(ticketItems);
+  ticketItemsRef.current = ticketItems;
+
+  /**
+   * Re-read every seated event's availability and report the first conflict.
+   *
+   * A read that fails (network, an older API) is not a conflict: the create
+   * call is the authority and its 409 is handled the same way below. A
+   * cart with no seated line makes no request at all.
+   */
+  const checkSeats = useCallback(async (): Promise<SeatsConflict | null> => {
+    const items = ticketItemsRef.current;
+    if (!cartHasSeatedLines(items)) return null;
+    for (const item of items) {
+      try {
+        const res = await client.get(`/public/events/${item.eventId}/seating`, { params: { profileId } });
+        const conflict = findSeatConflict(item, (res.data ?? null) as PublicEventSeating | null);
+        if (conflict) return conflict;
+      } catch {
+        // Not ours to decide from a failed read; the create call decides.
+      }
+    }
+    return null;
+  }, [client, profileId]);
 
   const isPaidCheckout = subTotal - discountAmount + shippingCost > 0;
 
@@ -253,51 +296,79 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     // cart keeps the flow it has always had, below.
     if (usesCheckoutEngine) {
       const enteredCode = couponCode.trim() || undefined;
-      createCheckout
-        .mutateAsync({
-          firstName: guestUserData?.firstName || user?.firstName || "",
-          lastName: guestUserData?.lastName || user?.lastName || "",
-          email: guestUserData?.email || user?.email || "",
-          accountId: user?.id,
-          shippingAddress: shippingData,
-          selectedShippingRates: selectedShippingRates.length ? selectedShippingRates : undefined,
-          attributionRefId: readAttributionRef() ?? undefined,
-          ...(readLanding() ?? {}),
-          // A code typed BEFORE this call still travels with it — that is the
-          // cheapest path and the only one available to a guest, whose bundle
-          // does not exist yet. A code typed AFTERWARDS goes through
-          // `/public/checkouts/apply-coupon`, which is what stops the field
-          // freezing for a signed-in buyer whose digital-only cart enters the
-          // payment stage on mount.
-          couponCode: enteredCode,
-          lines: cartToCheckoutLines(cartItems, ticketItems),
-        })
-        .then((r) => {
-          setCheckoutId(r.checkoutId);
-          // Minor → major. The bundle is the only endpoint answering in minor units.
-          const off = (r.discountCents ?? 0) / 100;
-          setDiscountAmount(off);
-          // `appliedCoupons` names what came off, so an AUTOMATIC discount the
-          // buyer never typed is labelled rather than being an unexplained
-          // amount. The typed code is the fallback for an older API.
-          const named = r.appliedCoupons?.[0];
-          setAppliedCoupon(
-            off > 0
-              ? {
-                  code: named?.code ?? enteredCode ?? "Discount applied",
-                  discountType: null,
-                  discountValue: null,
-                  discountAmount: off,
-                }
-              : null,
-          );
-        })
-        .catch((e) => {
-          // A refused code fails the whole bundle, so with one entered the
-          // reason belongs at the field the buyer used — verbatim from the API.
-          if (enteredCode) setCouponError(messageOf(e) || "This code could not be applied.");
-          else setStartError(messageOf(e) || "An error occurred");
-        });
+      const create = () =>
+        createCheckout
+          .mutateAsync({
+            firstName: guestUserData?.firstName || user?.firstName || "",
+            lastName: guestUserData?.lastName || user?.lastName || "",
+            email: guestUserData?.email || user?.email || "",
+            accountId: user?.id,
+            shippingAddress: shippingData,
+            selectedShippingRates: selectedShippingRates.length ? selectedShippingRates : undefined,
+            attributionRefId: readAttributionRef() ?? undefined,
+            ...(readLanding() ?? {}),
+            // A code typed BEFORE this call still travels with it — that is the
+            // cheapest path and the only one available to a guest, whose bundle
+            // does not exist yet. A code typed AFTERWARDS goes through
+            // `/public/checkouts/apply-coupon`, which is what stops the field
+            // freezing for a signed-in buyer whose digital-only cart enters the
+            // payment stage on mount.
+            couponCode: enteredCode,
+            lines: cartToCheckoutLines(cartItems, ticketItems),
+          })
+          .then((r) => {
+            setCheckoutId(r.checkoutId);
+            // Minor → major. The bundle is the only endpoint answering in minor units.
+            const off = (r.discountCents ?? 0) / 100;
+            setDiscountAmount(off);
+            // `appliedCoupons` names what came off, so an AUTOMATIC discount the
+            // buyer never typed is labelled rather than being an unexplained
+            // amount. The typed code is the fallback for an older API.
+            const named = r.appliedCoupons?.[0];
+            setAppliedCoupon(
+              off > 0
+                ? {
+                    code: named?.code ?? enteredCode ?? "Discount applied",
+                    discountType: null,
+                    discountValue: null,
+                    discountAmount: off,
+                  }
+                : null,
+            );
+          })
+          .catch(async (e) => {
+            // Seats another buyer took between the cart and this call (409
+            // `SEATS_TAKEN`). The server's word is final: the named seats become
+            // the conflict, labelled from the cart line. A 409 that names no
+            // seat is re-read from seating so the alert can still name them.
+            const takenIds = seatsTakenIdsOf(e);
+            if (takenIds) {
+              const conflict =
+                (takenIds.length > 0 ? seatsTakenConflict(ticketItemsRef.current, takenIds) : null) ??
+                (await checkSeats());
+              if (conflict) {
+                startedRef.current = false;
+                setSeatsConflict(conflict);
+                return;
+              }
+            }
+            // A refused code fails the whole bundle, so with one entered the
+            // reason belongs at the field the buyer used — verbatim from the API.
+            if (enteredCode) setCouponError(messageOf(e) || "This code could not be applied.");
+            else setStartError(messageOf(e) || "An error occurred");
+          });
+      // The seats are re-checked BEFORE the bundle exists, so a seat that went
+      // while the buyer was filling in an address is caught without minting a
+      // bundle that would only be refused, and named from a read the buyer
+      // can act on. The create call's own 409 covers the race after this.
+      void checkSeats().then((conflict) => {
+        if (conflict) {
+          startedRef.current = false;
+          setSeatsConflict(conflict);
+          return;
+        }
+        return create();
+      });
       return;
     }
 
@@ -423,7 +494,8 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
 
   // Surface the charged total (for the summary) as soon as a payment resolves.
   useEffect(() => {
-    if (effectivePayment) setChargedTotal({ amount: effectivePayment.chargedAmount, currency: effectivePayment.chargedCurrency });
+    if (effectivePayment)
+      setChargedTotal({ amount: effectivePayment.chargedAmount, currency: effectivePayment.chargedCurrency });
   }, [effectivePayment]);
 
   // The tax quote for the summary: the coupon re-quote wins over the initial
@@ -571,7 +643,16 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     } finally {
       setIsApplyingCoupon(false);
     }
-  }, [couponCode, orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, usesCheckoutEngine]);
+  }, [
+    couponCode,
+    orderId,
+    checkoutId,
+    finalisePath,
+    applyCouponMutation,
+    applyCheckoutCouponMutation,
+    absorbBundleCoupon,
+    usesCheckoutEngine,
+  ]);
 
   const removeCoupon = useCallback(async () => {
     if (usesCheckoutEngine) {
@@ -629,7 +710,15 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     } finally {
       setIsApplyingCoupon(false);
     }
-  }, [orderId, checkoutId, finalisePath, applyCouponMutation, applyCheckoutCouponMutation, absorbBundleCoupon, usesCheckoutEngine]);
+  }, [
+    orderId,
+    checkoutId,
+    finalisePath,
+    applyCouponMutation,
+    applyCheckoutCouponMutation,
+    absorbBundleCoupon,
+    usesCheckoutEngine,
+  ]);
 
   // ── Free checkout (nothing to charge) ───────────────────────────────────────
   /** Create the (free) order and return its id so the caller can navigate to the
@@ -657,7 +746,17 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     } finally {
       setIsFreeCheckoutLoading(false);
     }
-  }, [subTotal, guestUserData, user, cartItems, shippingData, selectedShippingRates, appliedCoupon, joinEmailList, createOrder]);
+  }, [
+    subTotal,
+    guestUserData,
+    user,
+    cartItems,
+    shippingData,
+    selectedShippingRates,
+    appliedCoupon,
+    joinEmailList,
+    createOrder,
+  ]);
 
   const provider = flow.provider;
 
@@ -691,6 +790,20 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     [paystackSession],
   );
 
+  /**
+   * The buyer's answer to a seat conflict: the taken seats leave the cart
+   * line (a tier or event left empty leaves with them, add-ons included) and
+   * the buyer goes back to that event's picker, which restores whatever of
+   * the selection is left. Returns the path to navigate to, or `null` when
+   * there is no conflict to act on.
+   */
+  const chooseOtherSeats = useCallback((): string | null => {
+    if (!seatsConflict) return null;
+    removeTicketSeats(seatsConflict.eventId, seatsConflict.seatIds);
+    setSeatsConflict(null);
+    return internalPath("events/$slug", { slug: seatsConflict.eventSlug || seatsConflict.eventId });
+  }, [seatsConflict, removeTicketSeats]);
+
   return {
     // ── Cart + totals ────────────────────────────────────────────────────────
     cartItems,
@@ -740,6 +853,16 @@ export function useCheckout(opts: UseCheckoutOptions = {}) {
     ticketItems,
     isCreatingOrder: createOrder.isPending || flow.isStarting,
     startError,
+    // ── Reserved seats ─────────────────────────────────────────────────────────
+    /**
+     * Seats in the cart that are no longer available, by name, for ONE event.
+     * Content the buyer must act on, so a surface renders it as a visible
+     * alert (never behind a help hint) with `chooseOtherSeats` as the action.
+     * `null` when every seat in the cart still reads available.
+     */
+    seatsConflict,
+    /** Prune the taken seats and get the event page path to send the buyer to. */
+    chooseOtherSeats,
     // ── Inventory hold ─────────────────────────────────────────────────────────
     /**
      * The live reservation: `isHeld` + `label` while it runs, `hasLapsed` once

package/src/ui/headless/event/_tests/seatingFixture.ts

@@ -0,0 +1,111 @@
+import { createSection, createTable, flattenSeats, type SeatMapDocument } from "@tribe-nest/seating-core";
+import type { PublicEventSeat, PublicEventSeating } from "../../../../data/queries/useEvents";
+
+/**
+ * A small venue for the seating specs: a 2x4 section priced by one tier, a
+ * round table of four priced by another, a general admission area, a stage
+ * and a caption. Built with seating-core's own generators, so the labels and
+ * coordinates are what the admin editor would have produced.
+ *
+ * Seat ids are random (`newId`), so nothing here hard-codes one: look seats up
+ * by their place with `seatAt`.
+ */
+
+export const STALLS_TIER = "t-stalls";
+export const TABLE_TIER = "t-table";
+export const GA_TIER = "t-ga";
+
+export const seatingEvent = {
+  id: "ev-seated",
+  slug: "seated-show",
+  title: "Seated show",
+  dateTime: "2026-12-01T19:00:00.000Z",
+  type: "in_person",
+  status: "on_sale",
+  hasSeatMap: true,
+  tickets: [
+    { id: STALLS_TIER, title: "Stalls", description: "", price: 40, quantity: 8, order: 0, sold: 0, maxPerPerson: 3 },
+    { id: TABLE_TIER, title: "Table seat", description: "", price: 60, quantity: 4, order: 1, sold: 0, maxPerPerson: 4 },
+    { id: GA_TIER, title: "Standing", description: "", price: 20, quantity: 100, order: 2, sold: 0, maxPerPerson: 6 },
+  ],
+  media: [],
+  questionnaire: [],
+  bookingFee: null,
+};
+
+export const buildLayout = (): SeatMapDocument => {
+  const stalls = createSection({
+    name: "Stalls",
+    rows: 2,
+    seatsPerRow: 4,
+    seatSpacing: 20,
+    rowSpacing: 20,
+    origin: { x: 100, y: 200 },
+    categoryKey: "cat_stalls",
+  });
+  const table = createTable({
+    name: "Table 1",
+    center: { x: 400, y: 240 },
+    tableShape: "round",
+    radius: 30,
+    seatCount: 4,
+    categoryKey: "cat_table",
+  });
+  return {
+    version: 1,
+    canvas: { width: 800, height: 500 },
+    categories: [
+      { key: "cat_stalls", name: "Stalls", color: "#ff0000" },
+      { key: "cat_table", name: "Tables", color: "#00ff00" },
+      { key: "cat_ga", name: "GA", color: "#0000ff" },
+    ],
+    objects: [
+      {
+        id: "shape_stage",
+        type: "shape",
+        kind: "stage",
+        label: "Stage",
+        shape: { kind: "rect", x: 100, y: 40, width: 400, height: 60 },
+      },
+      { id: "text_caption", type: "text", text: "Main hall", position: { x: 100, y: 130 }, fontSize: 16 },
+      stalls,
+      table,
+      {
+        id: "ga_floor",
+        type: "ga",
+        name: "Standing floor",
+        capacity: 100,
+        categoryKey: "cat_ga",
+        shape: { kind: "rect", x: 100, y: 320, width: 400, height: 120 },
+      },
+    ],
+  };
+};
+
+export const TIER_MAPPING: Record<string, string> = { cat_stalls: STALLS_TIER, cat_table: TABLE_TIER, cat_ga: GA_TIER };
+
+/**
+ * The public seating read for `layout`, every seat available unless named in
+ * `unavailable` as "Section/Row/Seat" (row empty for a table seat).
+ */
+export const buildSeating = (layout: SeatMapDocument, unavailable: string[] = []): PublicEventSeating => {
+  const seats: PublicEventSeat[] = flattenSeats(layout).map((flat, index) => ({
+    id: `es-${index + 1}`,
+    sourceSeatId: flat.seatId,
+    eventTicketId: TIER_MAPPING[flat.categoryKey ?? ""]!,
+    status: unavailable.includes(`${flat.sectionName}/${flat.rowLabel}/${flat.seatLabel}`) ? "unavailable" : "available",
+    attributes: flat.attributes,
+  }));
+  return { layout, tierMapping: TIER_MAPPING, seats };
+};
+
+/** The EVENT seat id at a place, from a seating read. */
+export const seatAt = (seating: PublicEventSeating, section: string, row: string, seat: string): string => {
+  const flat = flattenSeats(seating.layout).find(
+    (f) => f.sectionName === section && f.rowLabel === row && f.seatLabel === seat,
+  );
+  if (!flat) throw new Error(`no seat at ${section}/${row}/${seat}`);
+  const found = seating.seats.find((s) => s.sourceSeatId === flat.seatId);
+  if (!found) throw new Error(`seat ${flat.seatId} not in seating read`);
+  return found.id;
+};