@seatlayer/js 0.8.0 → 0.9.0

package/dist/index.d.cts

@@ -271,6 +271,40 @@ declare class EmbeddedDesigner {
  * so plain host CSS can restyle too.
  */
 
+/**
+ * Stable checkout-handoff contract (P4). Passed as the THIRD argument to
+ * `onCheckout(hold, seats, handoff)` — additive, so the legacy `(hold, seats)`
+ * shape used by DesiPass web-v2 (SDK 0.7.3+) is untouched. This is the object to
+ * build your order against: it is self-contained (holdId, expiry, currency, and
+ * per-line tier + price) and never changes shape across minor releases.
+ */
+interface CheckoutLineItem {
+    /** Seat label (or GA synthetic-unit label). */
+    label: string;
+    /** Chart object id (row/booth/GA area) the unit belongs to. */
+    objectId: string;
+    objectType: 'seat' | 'booth' | 'ga';
+    categoryKey: string;
+    /** Chosen ticket tier id (Adult/Child/…), or null when the category has no tiers. */
+    tierId: string | null;
+    /** Unit price in MAJOR currency units (e.g. 45 = 45.00). Server-authoritative. */
+    unitPrice: number;
+    /** ISO-4217, resolved server-side (per-event override → org → USD). */
+    currency: string;
+    quantity: number;
+}
+interface CheckoutHandoff {
+    /** Server hold id — pass this to YOUR book call. */
+    holdId: string;
+    /** Epoch ms the hold expires (after any extensions). */
+    expiresAt: number;
+    /** ISO-4217 currency for the whole order. */
+    currency: string;
+    /** Priced line items (tier + unit price + currency), server-authoritative. */
+    lineItems: CheckoutLineItem[];
+    /** Convenience total in major units (Σ unitPrice × quantity). */
+    total: number;
+}
 /** Host theme overrides — any subset; unset keys fall back to the org's chart theme, then defaults. */
 interface SeatPickerTheme {
     /** Brand accent (CTA, active chips, hold pill). */
@@ -332,9 +366,18 @@ interface SeatPickerOptions {
     seatView?: boolean;
     /**
      * Buyer pressed the CTA and the hold succeeded — hand off to YOUR checkout.
-     * The hold carries holdId, expiresAt, seat labels and priced line items.
+     * `hold` and `seats` are the legacy args (unchanged since 0.6). `handoff` (P4)
+     * is the stable, self-contained {@link CheckoutHandoff} to build your order
+     * against — holdId, expiry, currency and priced line items. Prefer it.
      */
-    onCheckout?: (hold: HoldResult, seats: PickerSeat[]) => void;
+    onCheckout?: (hold: HoldResult, seats: PickerSeat[], handoff: CheckoutHandoff) => void;
+    /**
+     * The held seats were BOOKED (P4) — your server completed payment and the
+     * booking landed over the realtime channel while the widget was still open.
+     * The widget shows a success state; use this to advance your own UI (receipt,
+     * redirect). Fires once per hold.
+     */
+    onBooked?: (handoff: CheckoutHandoff) => void;
     /** Selection changed (tap or best-available). */
     onSelectionChange?: (seats: PickerSeat[]) => void;
     /** The open hold expired server-side (widget already reset itself). */
@@ -356,6 +399,14 @@ declare class SeatPicker {
     private toastTimer;
     private currency;
     private hold;
+    /** Latest server expiry for the open hold (moves on extend). */
+    private holdExpiresAt;
+    /** True once we handed off to checkout — arms booked-confirmation detection. */
+    private handedOff;
+    /** Guards single onBooked + single success overlay per hold. */
+    private bookedShown;
+    private extendEl;
+    private bookedEl;
     private gaQty;
     private tipEl;
     private tipPos;
@@ -386,6 +437,10 @@ declare class SeatPicker {
     static open(options: Omit<SeatPickerOptions, 'container'>): Promise<SeatPicker>;
     constructor(options: SeatPickerOptions);
     render(): Promise<this>;
+    /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
+    private buildExtendPrompt;
+    /** Success overlay + onBooked fire when the held seats settle to booked. */
+    private buildBookedOverlay;
     /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
     private buildArenaChrome;
     /** Reflect the engine's current LOD rung onto the pill group. */
@@ -418,6 +473,21 @@ declare class SeatPicker {
     private handleCta;
     private startHoldTimer;
     private stopHoldTimer;
+    /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
+    private setExtendPrompt;
+    private handleExtend;
+    /**
+     * Fire the booked-confirmation state once the buyer's held seats settle to
+     * booked. The controller clears its own hold the moment every held label reads
+     * 'booked' over the realtime channel (clearBookedHoldIfSettled), and this runs
+     * on the same onStatusChange — so `currentHold() === null` while we still hold
+     * a checkout handoff means "sold", not expired (expiry clears via onHoldExpired
+     * on a different path, which nulls this.hold first).
+     */
+    private detectBooked;
+    private showBooked;
+    /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
+    private buildHandoff;
     private toast;
     private placeTooltip;
     private updateTooltip;
@@ -427,4 +497,4 @@ declare class SeatPicker {
     destroy(): void;
 }
 
-export { ApiError, type BestAvailableResult, EmbeddedDesigner, type EmbeddedDesignerEventType, type EmbeddedDesignerMessage, type EmbeddedDesignerOptions, type GAAreaAvailability, type HoldConflict, type HoldLineItem, type HoldResult, SeatPicker, type SeatPickerOptions, type SeatPickerTheme, SeatingChart, type SeatingChartOptions, type SelectedSeat };
+export { ApiError, type BestAvailableResult, type CheckoutHandoff, type CheckoutLineItem, EmbeddedDesigner, type EmbeddedDesignerEventType, type EmbeddedDesignerMessage, type EmbeddedDesignerOptions, type GAAreaAvailability, type HoldConflict, type HoldLineItem, type HoldResult, SeatPicker, type SeatPickerOptions, type SeatPickerTheme, SeatingChart, type SeatingChartOptions, type SelectedSeat };

package/dist/index.d.ts

@@ -271,6 +271,40 @@ declare class EmbeddedDesigner {
  * so plain host CSS can restyle too.
  */
 
+/**
+ * Stable checkout-handoff contract (P4). Passed as the THIRD argument to
+ * `onCheckout(hold, seats, handoff)` — additive, so the legacy `(hold, seats)`
+ * shape used by DesiPass web-v2 (SDK 0.7.3+) is untouched. This is the object to
+ * build your order against: it is self-contained (holdId, expiry, currency, and
+ * per-line tier + price) and never changes shape across minor releases.
+ */
+interface CheckoutLineItem {
+    /** Seat label (or GA synthetic-unit label). */
+    label: string;
+    /** Chart object id (row/booth/GA area) the unit belongs to. */
+    objectId: string;
+    objectType: 'seat' | 'booth' | 'ga';
+    categoryKey: string;
+    /** Chosen ticket tier id (Adult/Child/…), or null when the category has no tiers. */
+    tierId: string | null;
+    /** Unit price in MAJOR currency units (e.g. 45 = 45.00). Server-authoritative. */
+    unitPrice: number;
+    /** ISO-4217, resolved server-side (per-event override → org → USD). */
+    currency: string;
+    quantity: number;
+}
+interface CheckoutHandoff {
+    /** Server hold id — pass this to YOUR book call. */
+    holdId: string;
+    /** Epoch ms the hold expires (after any extensions). */
+    expiresAt: number;
+    /** ISO-4217 currency for the whole order. */
+    currency: string;
+    /** Priced line items (tier + unit price + currency), server-authoritative. */
+    lineItems: CheckoutLineItem[];
+    /** Convenience total in major units (Σ unitPrice × quantity). */
+    total: number;
+}
 /** Host theme overrides — any subset; unset keys fall back to the org's chart theme, then defaults. */
 interface SeatPickerTheme {
     /** Brand accent (CTA, active chips, hold pill). */
@@ -332,9 +366,18 @@ interface SeatPickerOptions {
     seatView?: boolean;
     /**
      * Buyer pressed the CTA and the hold succeeded — hand off to YOUR checkout.
-     * The hold carries holdId, expiresAt, seat labels and priced line items.
+     * `hold` and `seats` are the legacy args (unchanged since 0.6). `handoff` (P4)
+     * is the stable, self-contained {@link CheckoutHandoff} to build your order
+     * against — holdId, expiry, currency and priced line items. Prefer it.
      */
-    onCheckout?: (hold: HoldResult, seats: PickerSeat[]) => void;
+    onCheckout?: (hold: HoldResult, seats: PickerSeat[], handoff: CheckoutHandoff) => void;
+    /**
+     * The held seats were BOOKED (P4) — your server completed payment and the
+     * booking landed over the realtime channel while the widget was still open.
+     * The widget shows a success state; use this to advance your own UI (receipt,
+     * redirect). Fires once per hold.
+     */
+    onBooked?: (handoff: CheckoutHandoff) => void;
     /** Selection changed (tap or best-available). */
     onSelectionChange?: (seats: PickerSeat[]) => void;
     /** The open hold expired server-side (widget already reset itself). */
@@ -356,6 +399,14 @@ declare class SeatPicker {
     private toastTimer;
     private currency;
     private hold;
+    /** Latest server expiry for the open hold (moves on extend). */
+    private holdExpiresAt;
+    /** True once we handed off to checkout — arms booked-confirmation detection. */
+    private handedOff;
+    /** Guards single onBooked + single success overlay per hold. */
+    private bookedShown;
+    private extendEl;
+    private bookedEl;
     private gaQty;
     private tipEl;
     private tipPos;
@@ -386,6 +437,10 @@ declare class SeatPicker {
     static open(options: Omit<SeatPickerOptions, 'container'>): Promise<SeatPicker>;
     constructor(options: SeatPickerOptions);
     render(): Promise<this>;
+    /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
+    private buildExtendPrompt;
+    /** Success overlay + onBooked fire when the held seats settle to booked. */
+    private buildBookedOverlay;
     /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
     private buildArenaChrome;
     /** Reflect the engine's current LOD rung onto the pill group. */
@@ -418,6 +473,21 @@ declare class SeatPicker {
     private handleCta;
     private startHoldTimer;
     private stopHoldTimer;
+    /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
+    private setExtendPrompt;
+    private handleExtend;
+    /**
+     * Fire the booked-confirmation state once the buyer's held seats settle to
+     * booked. The controller clears its own hold the moment every held label reads
+     * 'booked' over the realtime channel (clearBookedHoldIfSettled), and this runs
+     * on the same onStatusChange — so `currentHold() === null` while we still hold
+     * a checkout handoff means "sold", not expired (expiry clears via onHoldExpired
+     * on a different path, which nulls this.hold first).
+     */
+    private detectBooked;
+    private showBooked;
+    /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
+    private buildHandoff;
     private toast;
     private placeTooltip;
     private updateTooltip;
@@ -427,4 +497,4 @@ declare class SeatPicker {
     destroy(): void;
 }
 
-export { ApiError, type BestAvailableResult, EmbeddedDesigner, type EmbeddedDesignerEventType, type EmbeddedDesignerMessage, type EmbeddedDesignerOptions, type GAAreaAvailability, type HoldConflict, type HoldLineItem, type HoldResult, SeatPicker, type SeatPickerOptions, type SeatPickerTheme, SeatingChart, type SeatingChartOptions, type SelectedSeat };
+export { ApiError, type BestAvailableResult, type CheckoutHandoff, type CheckoutLineItem, EmbeddedDesigner, type EmbeddedDesignerEventType, type EmbeddedDesignerMessage, type EmbeddedDesignerOptions, type GAAreaAvailability, type HoldConflict, type HoldLineItem, type HoldResult, SeatPicker, type SeatPickerOptions, type SeatPickerTheme, SeatingChart, type SeatingChartOptions, type SelectedSeat };

package/dist/index.js

@@ -57,6 +57,14 @@ var PubApi = class {
       body: { labels, holdId }
     });
   }
+  /** P4 "need more time?": push an active hold's expiry out. Throws ApiError 409
+   *  (reason: expired | extend_limit | not_found | not_active) if it can't. */
+  extend(key, holdId, ttlMs) {
+    return request(this.base, `/pub/events/${encodeURIComponent(key)}/extend`, {
+      method: "POST",
+      body: { holdId, ...ttlMs ? { ttlMs } : {} }
+    });
+  }
   socketUrl(key) {
     const wsBase = this.base.replace(/^http/, "ws");
     return `${wsBase}/pub/events/${encodeURIComponent(key)}/subscribe`;
@@ -386,6 +394,7 @@ import {
 } from "@seatlayer/core";
 var DEFAULT_API_BASE2 = "https://api.seatlayer.io";
 var DEFAULT_MAX_SELECTION2 = 10;
+var EXTEND_PROMPT_MS = 6e4;
 function resolveContainer3(container) {
   if (typeof container === "string") {
     const el = document.querySelector(container);
@@ -499,6 +508,30 @@ var CSS = `
 .sl-boot-retry{margin-top:4px;padding:9px 20px;border-radius:var(--sl-r-sm);background:var(--sl-accent);
   color:var(--sl-accent-ink);font-weight:700;font-size:13px}
 
+/* "Need more time?" extend prompt (bottom-center over the map, above the toast) */
+.sl-extend{position:absolute;left:50%;bottom:16px;transform:translateX(-50%) translateY(6px);z-index:9;
+  display:none;align-items:center;gap:12px;max-width:92%;background:var(--sl-surface);border:1px solid var(--sl-line);
+  color:var(--sl-text);border-radius:14px;padding:10px 12px 10px 16px;box-shadow:0 18px 50px -18px rgba(0,0,0,.6);
+  opacity:0;transition:opacity .2s,transform .2s}
+.sl-extend.on{display:flex;opacity:1;transform:translateX(-50%) translateY(0)}
+.sl-extend-txt{font-size:12.5px;font-weight:600;line-height:1.35}
+.sl-extend-txt b{font-variant-numeric:tabular-nums}
+.sl-extend-btn{flex:none;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;
+  background:var(--sl-accent);color:var(--sl-accent-ink);transition:filter .15s,opacity .15s}
+.sl-extend-btn:hover{filter:brightness(1.08)}
+.sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
+
+/* booked confirmation overlay (covers the widget once the held seats are sold) */
+.sl-booked{position:absolute;inset:0;z-index:11;display:none;flex-direction:column;align-items:center;
+  justify-content:center;gap:12px;text-align:center;padding:28px;background:var(--sl-bg)}
+.sl-booked.on{display:flex}
+.sl-booked-badge{width:60px;height:60px;border-radius:999px;display:flex;align-items:center;justify-content:center;
+  background:var(--sl-accent);color:var(--sl-accent-ink)}
+.sl-booked-badge svg{width:30px;height:30px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-booked-title{font-weight:800;font-size:19px;color:var(--sl-text)}
+.sl-booked-sub{font-size:13px;color:var(--sl-muted);line-height:1.5;max-width:320px}
+.sl-booked-seats{font-weight:700;color:var(--sl-text)}
+
 /* a11y filter chips (over the map, top-left) */
 .sl-chips{position:absolute;top:12px;left:12px;z-index:5;display:flex;gap:6px;flex-wrap:wrap;max-width:70%}
 .sl-chip-f{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:700;
@@ -646,6 +679,14 @@ var SeatPicker = class _SeatPicker {
     // state
     this.currency = "USD";
     this.hold = null;
+    /** Latest server expiry for the open hold (moves on extend). */
+    this.holdExpiresAt = 0;
+    /** True once we handed off to checkout — arms booked-confirmation detection. */
+    this.handedOff = false;
+    /** Guards single onBooked + single success overlay per hold. */
+    this.bookedShown = false;
+    this.extendEl = null;
+    this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
     this.tipEl = null;
     this.tipPos = { x: 0, y: 0 };
@@ -684,9 +725,12 @@ var SeatPicker = class _SeatPicker {
       onStatusChange: () => {
         this.syncPrices();
         this.evictTakenSelections();
+        this.detectBooked();
       },
       onHoldExpired: () => {
         this.hold = null;
+        this.handedOff = false;
+        this.bookedShown = false;
         this.stopHoldTimer();
         this.gaQty.clear();
         this.toast(t2("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.");
@@ -895,10 +939,36 @@ var SeatPicker = class _SeatPicker {
     this.srEl.setAttribute("aria-live", "polite");
     root.appendChild(this.srEl);
     this.buildArenaChrome();
+    this.buildExtendPrompt();
+    this.buildBookedOverlay();
     this.syncPrices();
     this.syncTray();
     return this;
   }
+  /** The "Need more time?" prompt shown in the hold's final EXTEND_PROMPT_MS. */
+  buildExtendPrompt() {
+    const el = document.createElement("div");
+    el.className = "sl-extend";
+    el.setAttribute("role", "status");
+    el.innerHTML = `<span class="sl-extend-txt" data-ref="extendTxt"></span><button type="button" class="sl-extend-btn" data-ref="extendBtn"></button>`;
+    this.els.map.appendChild(el);
+    this.extendEl = el;
+    this.els.extendTxt = el.querySelector('[data-ref="extendTxt"]');
+    this.els.extendBtn = el.querySelector('[data-ref="extendBtn"]');
+    this.els.extendBtn.textContent = "Add time";
+    this.els.extendBtn.addEventListener("click", () => void this.handleExtend());
+  }
+  /** Success overlay + onBooked fire when the held seats settle to booked. */
+  buildBookedOverlay() {
+    const el = document.createElement("div");
+    el.className = "sl-booked";
+    el.setAttribute("role", "status");
+    el.setAttribute("aria-live", "polite");
+    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
+    this.root.appendChild(el);
+    this.bookedEl = el;
+    this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
+  }
   // ---- arena / multi-floor chrome -------------------------------------------
   /** Build the rung pills (charts with sections) and floor switcher (>1 floor). */
   buildArenaChrome() {
@@ -1277,7 +1347,9 @@ var SeatPicker = class _SeatPicker {
   async handleCta() {
     const cta = this.els.cta;
     if (this.hold && !this.controller.getSelection().some((s) => !(this.hold.items ?? []).some((i) => i.label === s.label))) {
-      this.opts.onCheckout?.(this.hold, this.hold.seats ?? this.controller.getSelection());
+      const seats = this.hold.seats ?? this.controller.getSelection();
+      this.handedOff = true;
+      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
       return;
     }
     cta.disabled = true;
@@ -1300,8 +1372,9 @@ var SeatPicker = class _SeatPicker {
         return;
       }
       this.hold = hold;
+      this.handedOff = true;
       this.startHoldTimer(hold.expiresAt);
-      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? []);
+      this.opts.onCheckout?.(hold, chosenSeats.length ? chosenSeats : hold.seats ?? [], this.buildHandoff(hold));
     } catch (err) {
       this.opts.onError?.(err);
       this.toast("One or more seats were just taken. Please pick again.");
@@ -1311,13 +1384,15 @@ var SeatPicker = class _SeatPicker {
   }
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
+    this.holdExpiresAt = expiresAt;
     const pill = this.els.hold;
     const tick = () => {
-      const ms = Math.max(0, expiresAt - Date.now());
+      const ms = Math.max(0, this.holdExpiresAt - Date.now());
       const m = Math.floor(ms / 6e4);
       const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
       pill.textContent = `Held ${m}:${s}`;
       pill.classList.add("on");
+      this.setExtendPrompt(ms > 0 && ms <= EXTEND_PROMPT_MS, ms);
       if (ms <= 0) this.stopHoldTimer();
     };
     tick();
@@ -1327,6 +1402,83 @@ var SeatPicker = class _SeatPicker {
     if (this.holdTimer) clearInterval(this.holdTimer);
     this.holdTimer = null;
     this.els.hold?.classList.remove("on");
+    this.setExtendPrompt(false, 0);
+  }
+  /** Show/refresh (or hide) the "Need more time?" prompt with the live seconds left. */
+  setExtendPrompt(show, ms) {
+    if (!this.extendEl) return;
+    if (show && this.controller.currentHold() && !this.bookedShown) {
+      const secs = Math.ceil(ms / 1e3);
+      this.els.extendTxt.innerHTML = `Your seats are held for <b>0:${String(secs).padStart(2, "0")}</b>. Need more time?`;
+      this.extendEl.classList.add("on");
+    } else {
+      this.extendEl.classList.remove("on");
+    }
+  }
+  async handleExtend() {
+    const btn = this.els.extendBtn;
+    btn.disabled = true;
+    const prev = btn.textContent;
+    btn.textContent = "Adding\u2026";
+    try {
+      const h = await this.controller.extendHold(this.opts.holdTtlMs);
+      if (h) {
+        this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.holdExpiresAt = h.expiresAt;
+        this.extendEl?.classList.remove("on");
+        this.toast("More time added \u2014 your seats are still held.");
+      } else {
+        this.toast("Couldn't add more time \u2014 please head to checkout now.");
+      }
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Couldn't add more time \u2014 please head to checkout now.");
+    } finally {
+      btn.disabled = false;
+      btn.textContent = prev;
+    }
+  }
+  /**
+   * Fire the booked-confirmation state once the buyer's held seats settle to
+   * booked. The controller clears its own hold the moment every held label reads
+   * 'booked' over the realtime channel (clearBookedHoldIfSettled), and this runs
+   * on the same onStatusChange — so `currentHold() === null` while we still hold
+   * a checkout handoff means "sold", not expired (expiry clears via onHoldExpired
+   * on a different path, which nulls this.hold first).
+   */
+  detectBooked() {
+    if (this.bookedShown || !this.handedOff || !this.hold) return;
+    if (this.controller.currentHold() !== null) return;
+    this.showBooked();
+  }
+  showBooked() {
+    if (this.bookedShown || !this.hold) return;
+    this.bookedShown = true;
+    const handoff = this.buildHandoff(this.hold);
+    this.stopHoldTimer();
+    const n = handoff.lineItems.reduce((sum, i) => sum + i.quantity, 0);
+    if (this.els.bookedSub) {
+      this.els.bookedSub.innerHTML = `<span class="sl-booked-seats">${n} ${n === 1 ? "ticket" : "tickets"}</span> confirmed. A confirmation is on its way.`;
+    }
+    this.bookedEl?.classList.add("on");
+    this.opts.onBooked?.(handoff);
+  }
+  /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
+  buildHandoff(hold) {
+    const items = hold.items ?? [];
+    const lineItems = items.map((it) => ({
+      label: it.label,
+      objectId: it.objectId,
+      objectType: it.objectType,
+      categoryKey: it.categoryKey,
+      tierId: it.tierId,
+      unitPrice: it.unitPrice,
+      currency: it.currency ?? this.currency,
+      quantity: it.quantity ?? 1
+    }));
+    const currency = lineItems[0]?.currency ?? this.currency;
+    const total = lineItems.reduce((sum, i) => sum + i.unitPrice * i.quantity, 0);
+    return { holdId: hold.holdId, expiresAt: hold.expiresAt, currency, lineItems, total };
   }
   toast(msg) {
     const el = this.els.toast;
@@ -1368,6 +1520,8 @@ var SeatPicker = class _SeatPicker {
       const h = await this.controller.bestAvailable(qty, categoryKey);
       if (h) {
         this.hold = { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items };
+        this.handedOff = false;
+        this.bookedShown = false;
         this.startHoldTimer(h.expiresAt);
         this.syncTray();
         return this.hold;
@@ -1381,6 +1535,8 @@ var SeatPicker = class _SeatPicker {
   async release() {
     await this.controller.release();
     this.hold = null;
+    this.handedOff = false;
+    this.bookedShown = false;
     this.stopHoldTimer();
     this.gaQty.clear();
     this.syncTray();