@seatlayer/js 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -86,6 +86,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`;
@@ -407,6 +415,7 @@ var EmbeddedDesigner = class {
 var import_core2 = require("@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);
@@ -520,6 +529,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;
@@ -667,6 +700,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 };
@@ -705,9 +746,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((0, import_core2.t)("picker.holdExpired", void 0) || "Your hold expired \u2014 seats released. Pick again.");
@@ -916,10 +960,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() {
@@ -1298,7 +1368,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;
@@ -1321,8 +1393,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.");
@@ -1332,13 +1405,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();
@@ -1348,6 +1423,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;
@@ -1389,6 +1541,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;
@@ -1402,6 +1556,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();