@seatlayer/js 0.37.0 → 0.38.0

package/dist/index.js

@@ -1,11 +1,9 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk-HMLY7DHA.js";
 
 // src/SeatingChart.ts
 import {
@@ -120,6 +118,41 @@ var PubApi = class {
       body: { holdId, ...ttlMs ? { ttlMs } : {} }
     });
   }
+  /**
+   * Which gateways this event can actually take money through — the question
+   * `checkout: 'hosted'` has to answer BEFORE it shows a buyer a Pay button, so
+   * the answer is never discovered by failing a payment.
+   *
+   * Anonymous, and it discloses no account, key, mode or currency for a gateway
+   * that did not match.
+   */
+  paymentOptions(key) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/payment-options`);
+  }
+  /**
+   * Turn a live hold into an order and start a payment.
+   *
+   * The amount is NOT sent: the server recomputes it from the hold's own items,
+   * which is the only reason a browser cannot alter what it pays. Nor is the
+   * PROVIDER — the event row decides which gateway charges, and a `provider` in
+   * the body is checked rather than obeyed (409 `provider_mismatch`). Omitting
+   * it is the shape that cannot disagree.
+   */
+  startCheckout(key, input) {
+    return this.request(`/pub/events/${encodeURIComponent(key)}/checkout`, {
+      method: "POST",
+      body: input
+    });
+  }
+  /**
+   * Poll an order while its gateway webhook lands. The order id is an
+   * unguessable token the buyer already holds, so it acts as the capability —
+   * which is also why a buyer returning from a gateway page can be told what
+   * happened with nothing but the id in the return URL.
+   */
+  orderStatus(orderId) {
+    return this.request(`/pub/orders/${encodeURIComponent(orderId)}/status`);
+  }
   /**
    * Mint a one-use subscribe ticket for the next socket attempt (protocol doc
    * §3). The bearer travels here, over ordinary HTTPS where CORS and Origin
@@ -1673,7 +1706,8 @@ var EmbeddedDesigner = class {
   }
   buildSkeleton(overlay) {
     const style = document.createElement("style");
-    style.textContent = `
+    style.textContent = /* @sl-css */
+    `
 @media (prefers-reduced-motion: no-preference) {
   @keyframes seatlayer-designer-shimmer {
     0% { background-position: -320px 0; }
@@ -1799,7 +1833,6 @@ import {
   PickerController as PickerController2,
   ACCESSIBILITY_TYPES,
   expandChart,
-  generateSeatPanorama,
   generateSeatThumb,
   loadLocale as loadLocale2,
   setStringOverrides as setStringOverrides2,
@@ -1862,20 +1895,45 @@ function hasWebGL2() {
   }
   return _webgl2Cache;
 }
+function cdnChunkUrl(fileName) {
+  const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
+  if (!base) throw new Error(`seatlayer: cannot resolve the ${fileName} chunk URL`);
+  return new URL(`./${fileName}`, base).href;
+}
 async function loadVenue3d() {
   if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
-    const base = SEATLAYER_MODULE_URL ?? (typeof location !== "undefined" ? location.href : void 0);
-    if (!base) throw new Error("seatlayer: cannot resolve the 3D view chunk URL");
-    const url = new URL("./seatlayer-view3d.mjs", base).href;
     return import(
       /* @vite-ignore */
-      url
+      cdnChunkUrl("seatlayer-view3d.mjs")
     );
   }
   return import("@seatlayer/core/view3d");
 }
+async function loadPanorama() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-panorama.mjs")
+    );
+  }
+  return import("@seatlayer/core");
+}
+async function loadHostedCheckout() {
+  if (typeof __SEATLAYER_CDN__ !== "undefined" && __SEATLAYER_CDN__) {
+    return import(
+      /* @vite-ignore */
+      cdnChunkUrl("seatlayer-checkout.mjs")
+    );
+  }
+  return import("./hostedCheckout-PLHKPT6W.js");
+}
+function paymentsOffReason(reason) {
+  return reason === "unavailable_for_event" || reason === "payments_off_for_event" ? reason : "not_configured";
+}
 var STYLE_ID = "seatlayer-picker-style";
-var CSS = `
+var CSS = (
+  /* @sl-css */
+  `
 .sl-picker{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:420px;overflow:hidden;
   background:var(--sl-bg);color:var(--sl-text);font-family:var(--sl-font);border-radius:var(--sl-radius);
   --sl-r-sm:calc(var(--sl-radius) * .55);
@@ -2612,7 +2670,8 @@ var CSS = `
 .sl-modal-scrim{position:fixed;inset:0;z-index:2147483000;background:rgba(5,7,12,.66);display:flex;align-items:center;justify-content:center;padding:18px}
 .sl-modal-frame{width:min(1200px,100%);height:min(820px,100%);border-radius:16px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8)}
 @media(max-width:640px){.sl-modal-scrim{padding:0}.sl-modal-frame{width:100%;height:100%;border-radius:0}}
-`;
+`
+);
 function ensureStyle() {
   if (document.getElementById(STYLE_ID)) return;
   const el = document.createElement("style");
@@ -2677,6 +2736,14 @@ var SeatPicker = class _SeatPicker {
     this.handedOff = false;
     /** Guards single onBooked + single success overlay per hold. */
     this.bookedShown = false;
+    /**
+     * In-flight or settled `payment-options` for this event, started at render in
+     * hosted mode. One request, kicked off while the buyer is still choosing, so
+     * pressing Pay does not wait on a lookup whose answer never changes mid-session.
+     */
+    this.paymentOptions = null;
+    /** The mounted payment card, while one is up. */
+    this.checkoutPanel = null;
     this.extendEl = null;
     this.bookedEl = null;
     this.gaQty = /* @__PURE__ */ new Map();
@@ -2791,6 +2858,12 @@ var SeatPicker = class _SeatPicker {
       onObjectUnavailable: (event) => this.opts.onSelectedObjectUnavailable?.(event)
     });
     this.api = options.transport ?? this.pubApi;
+    if (options.checkout === "hosted" && !this.pubApi) {
+      console.warn(
+        'seatlayer: checkout: "hosted" needs the widget\'s own transport \u2014 a custom `transport` owns its backend, so the picker is staying on onCheckout for this mount.'
+      );
+    }
+    this.checkoutMode = options.checkout === "hosted" && this.pubApi ? "hosted" : "handoff";
     this.maxTickets = Math.max(1, Math.floor(options.maxSelection ?? DEFAULT_MAX_SELECTION2));
     this.cbSafe = readStoredColorblind() ?? !!options.colorblindSafe;
     this.controller = new PickerController2({
@@ -3154,6 +3227,7 @@ var SeatPicker = class _SeatPicker {
     ensureStyle();
     await loadLocale2(this.opts.locale);
     if (this.opts.messages) setStringOverrides2(this.opts.messages);
+    if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -3451,8 +3525,40 @@ var SeatPicker = class _SeatPicker {
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
+    this.resumeHostedOrder();
     return this;
   }
+  /**
+   * A hosted gateway returned this buyer to a page that runs the widget, with
+   * `?order=…&status=…` in the URL. Pick the order up and finish the story.
+   *
+   * Only `success` resumes. `cancelled` means the buyer backed out at the
+   * gateway and their seats are still held — the map they are looking at IS the
+   * right screen, and opening a card to say "you cancelled" would be noise.
+   *
+   * The two parameters are then stripped with `replaceState`, because they are a
+   * one-shot instruction: leaving them in place would re-open the confirmation
+   * on every later navigation, and would carry an order id into browser history
+   * and any Referer this page later sends. `status` is only ever removed
+   * alongside an `order` we actually consumed, so a host page that uses a
+   * `status` parameter of its own keeps it.
+   */
+  resumeHostedOrder() {
+    if (this.checkoutMode !== "hosted" || typeof location === "undefined") return;
+    const params = new URLSearchParams(location.search);
+    const orderId = params.get("order");
+    if (!orderId) return;
+    const status = params.get("status");
+    params.delete("order");
+    params.delete("status");
+    try {
+      const query = params.toString();
+      history.replaceState(history.state, "", `${location.pathname}${query ? `?${query}` : ""}${location.hash}`);
+    } catch {
+    }
+    if (status !== "success") return;
+    void this.openCheckoutPanel({ kind: "resume", orderId });
+  }
   /**
    * Move layout-dependent chrome between its wide dock (map regions / zoom
    * column) and its narrow dock (the sheet's consolidated Filters row), and
@@ -4432,7 +4538,7 @@ var SeatPicker = class _SeatPicker {
     this.els.map.appendChild(el);
     this.confirmEl = el;
     this.reanchorConfirm();
-    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => this.openSeatView(seat));
+    el.querySelector(".sl-confirm-view")?.addEventListener("click", () => void this.openSeatView(seat));
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         void this.view3dHandle?.flyToSeat(seat.id);
@@ -4503,10 +4609,13 @@ var SeatPicker = class _SeatPicker {
    * uploaded photo (seat.viewUrl) when present, else a panorama generated from
    * the chart geometry — the stage placed at this seat's true bearing + size.
    * Zero extra dependencies: an equirectangular image panned with `repeat-x`.
+   *
+   * Async only because the generator is a lazy chunk (see `loadPanorama`); an
+   * organizer photo needs no generator and never waits on it. The two callers
+   * are click handlers, so nothing observes the promise.
    */
-  openSeatView(seat) {
+  async openSeatView(seat) {
     if (!this.root || !this.seatViewEnabled()) return;
-    this.closeSeatView();
     const doc = this.controller.doc;
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc?.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc?.focalPoint ?? { x: 0, y: 0 };
@@ -4518,10 +4627,19 @@ var SeatPicker = class _SeatPicker {
       caption = t2("picker.panorama360");
       real = true;
     } else {
-      const pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      let pano2;
+      try {
+        const { generateSeatPanorama } = await loadPanorama();
+        pano2 = generateSeatPanorama(seat, focal, this.allSeats());
+      } catch (err) {
+        this.opts.onError?.(err);
+        return;
+      }
+      if (!this.root || !this.seatViewEnabled()) return;
       panoUrl = pano2.url;
       caption = t2("picker.illustrationCaption", { m: pano2.distanceM });
     }
+    this.closeSeatView();
     const el = document.createElement("div");
     el.className = "sl-view";
     el.setAttribute("role", "dialog");
@@ -4887,7 +5005,7 @@ var SeatPicker = class _SeatPicker {
     this.els.tray.querySelectorAll(".sl-chip .view[data-view-label]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const seat = this.controller.seatByLabel(btn.dataset.viewLabel);
-        if (seat) this.openSeatView(seat);
+        if (seat) void this.openSeatView(seat);
       });
     });
     this.els.tray.querySelectorAll(".sl-chip[data-locate]").forEach((chip) => {
@@ -5030,7 +5148,7 @@ var SeatPicker = class _SeatPicker {
       const seats = this.hold.seats ?? committed;
       this.handedOff = true;
       this.setCtaPhase("checkout");
-      this.opts.onCheckout?.(this.hold, seats, this.buildHandoff(this.hold));
+      this.checkoutHandoff(this.hold, seats);
       return;
     }
     this.holdingLabels = new Set(committed.map((seat) => seat.label));
@@ -5059,7 +5177,7 @@ var SeatPicker = class _SeatPicker {
       this.flashHeldSeats(hold);
       this.setCtaPhase("checkout");
       this.emitHoldChange();
-      this.opts.onCheckout?.(hold, hold.seats ?? chosenSeats, this.buildHandoff(hold));
+      this.checkoutHandoff(hold, hold.seats ?? chosenSeats);
     } catch (err) {
       this.opts.onError?.(err);
       const problem = err;
@@ -5164,6 +5282,109 @@ var SeatPicker = class _SeatPicker {
     this.bookedEl?.classList.add("on");
     this.opts.onBooked?.(handoff);
   }
+  /**
+   * The seats are held. Send the buyer wherever this picker's `checkout` option
+   * says they go.
+   *
+   * The default branch is the literal call that stood here before hosted
+   * checkout existed, unchanged, so nothing about an existing integration moves.
+   */
+  checkoutHandoff(hold, seats) {
+    if (this.checkoutMode === "hosted") {
+      void this.startHostedCheckout(hold, seats);
+      return;
+    }
+    this.opts.onCheckout?.(hold, seats, this.buildHandoff(hold));
+  }
+  /**
+   * Take the money ourselves, through the organizer's own gateway.
+   *
+   * Order of operations matters: ASK FIRST, load second. `payment-options` is
+   * already in flight from render, and its answer decides whether any payment
+   * code is fetched at all — an event that cannot charge never downloads the
+   * card that would have charged it.
+   *
+   * An empty list is not a failure and never dead-ends the buyer. It routes them
+   * to whatever the host has: `onCheckoutUnavailable` (with the server's reason,
+   * so the host can say the right one of three very different sentences), then
+   * `onCheckout` with the ordinary handoff. A host that supplied neither gets
+   * the widget's own honest card instead of a press that did nothing.
+   */
+  async startHostedCheckout(hold, seats) {
+    const handoff = this.buildHandoff(hold);
+    let options = null;
+    try {
+      options = await (this.paymentOptions ??= this.pubApi.paymentOptions(this.opts.event));
+    } catch (err) {
+      this.opts.onError?.(err);
+    }
+    if (this.destroyed) return;
+    const provider = options?.providers?.[0];
+    if (!provider) {
+      const reason = paymentsOffReason(options?.reason);
+      const handled = !!this.opts.onCheckoutUnavailable || !!this.opts.onCheckout;
+      this.opts.onCheckoutUnavailable?.({ reason, handoff });
+      this.opts.onCheckout?.(hold, seats, handoff);
+      if (!handled) {
+        void this.openCheckoutPanel({
+          kind: "unavailable",
+          reason,
+          seatCount: handoff.lineItems.reduce((sum, item) => sum + item.quantity, 0)
+        });
+      }
+      return;
+    }
+    await this.openCheckoutPanel({
+      kind: "pay",
+      provider,
+      order: {
+        holdId: handoff.holdId,
+        expiresAt: handoff.expiresAt,
+        currency: handoff.currency,
+        total: handoff.total,
+        labels: handoff.lineItems.map((item) => item.displayLabel ?? item.label)
+      }
+    });
+  }
+  /**
+   * Fetch the checkout chunk and put its card over the map.
+   *
+   * Every failure here lands the buyer back on a map with their seats still
+   * held, which is a place they can act from — a blocked chunk request must not
+   * leave them staring at a CTA that no longer does anything.
+   */
+  async openCheckoutPanel(state) {
+    let mountCheckout;
+    try {
+      ({ mountCheckout } = await loadHostedCheckout());
+    } catch (err) {
+      this.opts.onError?.(err);
+      this.toast("Checkout could not be opened. Your seats are still held \u2014 please try again.", "error");
+      this.setCtaPhase("idle");
+      return;
+    }
+    if (this.destroyed || !this.root) return;
+    this.closeCheckoutPanel();
+    this.checkoutPanel = mountCheckout({
+      root: this.root,
+      state,
+      startSession: (input) => this.pubApi.startCheckout(this.opts.event, input),
+      orderStatus: (orderId) => this.pubApi.orderStatus(orderId),
+      onCancel: () => {
+        this.checkoutPanel = null;
+        if (!this.hold) this.setCtaPhase("idle");
+      },
+      onConfirmed: (order) => {
+        this.opts.onOrderConfirmed?.(order);
+        void this.controller.refresh();
+      },
+      onError: (err) => this.opts.onError?.(err)
+    });
+  }
+  closeCheckoutPanel() {
+    this.checkoutPanel?.destroy();
+    this.checkoutPanel = null;
+  }
   /** Assemble the stable {@link CheckoutHandoff} from a hold's server line items. */
   buildHandoff(hold) {
     const items = hold.items ?? [];
@@ -5398,7 +5619,7 @@ var SeatPicker = class _SeatPicker {
   }
   /** Build the view-from-seat panorama the cinematic dissolves into — reuses the
    *  exact input path as the 2D `openSeatView` (organizer photo, else generated). */
-  seatViewFor3d(seatId) {
+  async seatViewFor3d(seatId) {
     const seat = this.allSeats().find((s) => s.id === seatId);
     if (!seat) return null;
     if (seat.viewUrl) return { url: seat.viewUrl };
@@ -5407,6 +5628,7 @@ var SeatPicker = class _SeatPicker {
     const activeId = this.controller.getActiveFloorId();
     const focal = seat.focalPoint ?? doc.floors?.find((f) => f.id === activeId)?.focalPoint ?? doc.focalPoint ?? { x: 0, y: 0 };
     try {
+      const { generateSeatPanorama } = await loadPanorama();
       return { url: generateSeatPanorama(seat, focal, this.allSeats()).url };
     } catch {
       return null;
@@ -5546,9 +5768,10 @@ var SeatPicker = class _SeatPicker {
         // in orbit instead of dissolving into an empty overlay.
         getSeatView: (id) => new Promise((resolve, reject) => {
           const run = () => {
-            const view = this.seatViewFor3d(id);
-            if (view) resolve(view);
-            else reject(new Error("seat_view_unavailable"));
+            void this.seatViewFor3d(id).then((view) => {
+              if (view) resolve(view);
+              else reject(new Error("seat_view_unavailable"));
+            });
           };
           const ric = globalThis.requestIdleCallback;
           if (typeof ric === "function") ric(run, { timeout: 1500 });
@@ -5826,6 +6049,7 @@ var SeatPicker = class _SeatPicker {
     this.closeConfirm();
     this.dismissTableDialog(false);
     this.closeSeatView();
+    this.closeCheckoutPanel();
     this.exit3d();
     this.stopHoldTimer();
     if (this.toastTimer) clearTimeout(this.toastTimer);
@@ -6552,7 +6776,9 @@ var PREVIEW_ELIGIBLE_STROKE = "#b9c0ff";
 var PREVIEW_UNAVAILABLE_FILL = "#303846";
 var PREVIEW_UNAVAILABLE_STROKE = "#4b5669";
 var ALLOCATION_STROKE = "#101723";
-var CHANNELS_CSS = `
+var CHANNELS_CSS = (
+  /* @sl-css */
+  `
 .slm{--slm-mo-instant:80ms;--slm-mo-quick:140ms;--slm-mo-base:200ms;--slm-mo-slow:320ms;--slm-mo-ambient:2000ms;
   --slm-mo-out:cubic-bezier(.2,.8,.2,1);--slm-mo-in-out:cubic-bezier(.4,0,.2,1);--slm-mo-exit:cubic-bezier(.4,0,1,1);
   --slm-mo-spring:cubic-bezier(.34,1.3,.64,1)}
@@ -6741,7 +6967,8 @@ var CHANNELS_CSS = `
   .slm-ch-staged.shake{outline:2px solid #e5484d;outline-offset:2px}
   .slm-ch-staged.done{outline:2px solid #5bd39b;outline-offset:2px}
 }
-`;
+`
+);
 function bucketRowsHtml(rows) {
   return rows.map((row, index) => `
     <div class="slm-ch-bucket" style="animation-delay:${Math.min(index, 4) * 30}ms">
@@ -8639,7 +8866,9 @@ var LEGEND = [
   { key: "booked", label: "Booked", color: "#22a06b" },
   { key: "blocked", label: "Blocked", color: "#8b94ac" }
 ];
-var MANAGER_CSS = `
+var MANAGER_CSS = (
+  /* @sl-css */
+  `
 .slm{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:480px;overflow:hidden;
   background:var(--slm-bg);color:var(--slm-text);font-family:var(--slm-font);border-radius:var(--slm-radius);
   /* Motion tokens (motion-system \xA72), declared by the cockpit ROOT rather than
@@ -8881,7 +9110,8 @@ var MANAGER_CSS = `
     transition:none!important;
     scroll-behavior:auto!important}
 }
-${CHANNELS_CSS}`;
+${CHANNELS_CSS}`
+);
 function injectStyle() {
   if (typeof document === "undefined" || document.getElementById(STYLE_ID2)) return;
   const el = document.createElement("style");