@seatlayer/js 0.50.0 → 0.50.2

package/dist/index.cjs

@@ -3979,6 +3979,8 @@ var SeatPicker = class _SeatPicker {
     this.fsEscHandler = null;
     /** Host-level event chrome owns the duplicate identity outside full screen. */
     this.eventDetailsHidden = false;
+    /** True while the hold note reads "N more selected" — the tick must not overwrite it. */
+    this.holdCopyPending = false;
     /** Wide-layout ticket panel collapsed (map owns the full width). */
     this.sideCollapsed = false;
     this.sideToggleEl = null;
@@ -4561,7 +4563,7 @@ var SeatPicker = class _SeatPicker {
           <div class="sl-foot" data-ref="foot">
             <div class="sl-hold-note" data-ref="holdNote" role="status" aria-live="polite">
               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
-              <span><b data-ref="holdTitle">Seats secured</b><span class="sl-hold-copy" data-ref="holdCopy">Checkout timer is running.</span></span>
+              <span><b data-ref="holdTitle">Seats secured</b><span class="sl-hold-copy" data-ref="holdCopy">You won\u2019t be charged yet.</span></span>
               <button type="button" class="sl-hold-change" data-ref="holdChange" aria-label="Release held tickets and choose different seats">Change</button>
             </div>
             <div class="sl-total"><span data-ref="count"></span><b data-ref="total"></b></div>
@@ -5168,7 +5170,7 @@ var SeatPicker = class _SeatPicker {
     }
     if (this.ctaPhase === "checkout") {
       cta.disabled = true;
-      cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Opening checkout\u2026';
+      cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Opening secure checkout\u2026';
       return;
     }
     cta.disabled = count === 0;
@@ -5177,11 +5179,13 @@ var SeatPicker = class _SeatPicker {
   setCtaPhase(phase) {
     this.ctaPhase = phase;
     this.syncCta();
+    this.renderPeek(this.lastTrayCount, this.lastTrayTotal, this.pendingSelectionCount());
     if (phase === "checkout") {
       this.scheduleMotion(() => {
         if (this.ctaPhase !== "checkout") return;
         this.ctaPhase = "idle";
         this.syncCta();
+        this.renderPeek(this.lastTrayCount, this.lastTrayTotal, this.pendingSelectionCount());
       }, 1100);
     }
   }
@@ -6589,7 +6593,8 @@ var SeatPicker = class _SeatPicker {
         this.els.holdTitle.textContent = `${securedCount} secured`;
       }
       if (this.els.holdCopy) {
-        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected` : "Checkout timer running";
+        this.holdCopyPending = pendingCount > 0;
+        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected` : this.holdReassuranceText();
       }
       const change = this.els.holdChange;
       if (change) {
@@ -6603,21 +6608,39 @@ var SeatPicker = class _SeatPicker {
       this.animateOnce(this.els.cta, "sl-ready", 520);
       if (this.sideCollapsed && this.root?.dataset.layout !== "narrow") this.setPanelCollapsed(false);
     }
-    if (this.els.peek) {
-      if (count) {
-        const holding = !!this.hold && !pendingCount;
-        this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
-      } else if (this.salesClosed) {
-        this.els.peek.innerHTML = `<span>${this.tf("picker.salesClosedPill", "Sales are closed")}</span>`;
-      } else {
-        const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
-        this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
-      }
-    }
+    this.renderPeek(count, total, pendingCount);
     this.lastTrayCount = count;
     this.lastTrayTotal = total;
     this.opts.onSelectionChange?.(seats);
   }
+  /**
+   * The bottom-sheet's collapsed one-liner. Called from syncTray on every
+   * repaint AND from setCtaPhase: while the widget is securing seats or
+   * opening checkout, the peek is the phone buyer's ONLY line of sight, and a
+   * pill still reading "Continue" at the moment money is about to move is the
+   * emotional trapdoor the audit flagged. The phase lines restate what is
+   * secured and promise no charge yet.
+   */
+  renderPeek(count, total, pendingCount) {
+    if (!this.els.peek) return;
+    if (count && this.ctaPhase === "holding") {
+      this.els.peek.innerHTML = `<span>Securing your seats\u2026</span>`;
+      return;
+    }
+    if (count && this.ctaPhase === "checkout") {
+      this.els.peek.innerHTML = `<span>\u2713 ${count} ${count === 1 ? "ticket" : "tickets"} secured \xB7 ${this.money(total)} \u2014 you won\u2019t be charged yet</span>`;
+      return;
+    }
+    if (count) {
+      const holding = !!this.hold && !pendingCount;
+      this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
+    } else if (this.salesClosed) {
+      this.els.peek.innerHTML = `<span>${this.tf("picker.salesClosedPill", "Sales are closed")}</span>`;
+    } else {
+      const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
+      this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
+    }
+  }
   async removeHeldLabel(label, chip) {
     if (!label || this.releasingLabels.has(label)) return false;
     this.releasingLabels.add(label);
@@ -6726,6 +6749,13 @@ var SeatPicker = class _SeatPicker {
       this.syncTray();
     }
   }
+  /** "Yours for m:ss — you won't be charged yet." — the hold note's promise. */
+  holdReassuranceText() {
+    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");
+    return `Yours for ${m}:${s} \u2014 you won\u2019t be charged yet.`;
+  }
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
     this.holdExpiresAt = expiresAt;
@@ -6739,6 +6769,9 @@ var SeatPicker = class _SeatPicker {
       const m = Math.floor(ms / 6e4);
       const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
       if (time) time.textContent = `${m}:${s}`;
+      if (!this.holdCopyPending && this.els.holdCopy) {
+        this.els.holdCopy.textContent = this.holdReassuranceText();
+      }
       pill.classList.add("on");
       pill.classList.toggle("is-expiring", ms > 0 && ms <= EXTEND_PROMPT_MS);
       this.setExtendPrompt(ms > 0 && ms <= EXTEND_PROMPT_MS, ms);
@@ -6758,8 +6791,10 @@ var SeatPicker = class _SeatPicker {
   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?`;
+      const totalSecs = Math.ceil(ms / 1e3);
+      const m = Math.floor(totalSecs / 60);
+      const s = String(totalSecs % 60).padStart(2, "0");
+      this.els.extendTxt.innerHTML = `Your seats are held for <b>${m}:${s}</b>. Need more time?`;
       this.extendEl.classList.add("on");
     } else {
       this.extendEl.classList.remove("on");