@coras-io/embed 0.1.2 → 0.3.0

package/dist/components/payment-fiat-method/payment-fiat-method.styles.js

@@ -15,24 +15,40 @@ export default css `
     padding: 0.5rem;
     border: 1px solid var(--coras-color-neutral-400);
     border-radius: var(--coras-radius-xs);
-    background-color: var(--coras-color-surface);
+    /* A selection chip, so it fills from the field colour rather than the card
+       colour, which is reserved for cards. */
+    background-color: var(--coras-color-field);
     transition: all 0.2s ease;
 
     &.checked {
-      border-color: var(--coras-color-primary-500);
-      background-color: var(--coras-color-primary-100);
+      border-color: var(--coras-color-primary);
+      background-color: var(--coras-color-primary-tint);
       box-shadow: var(--coras-shadow-md);
     }
   }
 
+  /* Height of the mark's visible plate, which is what the eye lines up on.
+     The official Apple and Google marks have different plate aspect ratios,
+     so they are matched on plate height rather than overall image size. */
   .icon {
+    --payment-mark-plate-height: 22px;
+
     display: flex;
     align-items: center;
     justify-content: center;
 
+    /* The Google mark and our matching card mark share a 1094x742 canvas
+       whose plate is 400 tall, hence the 742/400 correction. The .card class
+       is the base class on every chip, so it cannot select the card type. */
     img {
-      height: 21px;
+      height: calc(var(--payment-mark-plate-height) * 742 / 400);
       object-fit: contain;
     }
   }
+
+  /* The Apple mark's plate fills its whole canvas, so image height is plate
+     height directly. */
+  .apple-pay .icon img {
+    height: var(--payment-mark-plate-height);
+  }
 `;

package/dist/components/payment-option/payment-option.styles.js

@@ -13,23 +13,22 @@ export default css `
     --payment-option-button-border-radius: 24px;
     --payment-option-padding: 1rem;
     --payment-option-border-width: 2px;
-    --payment-option-border-color: var(--coras-color-primary-200);
-    --payment-option-checked-border-color: var(--coras-palette-pink-500);
-    --payment-option-background: var(--coras-color-surface);
+    --payment-option-border-color: var(--coras-color-card-border);
+    --payment-option-checked-border-color: var(--coras-color-secondary);
+    --payment-option-background: var(--coras-color-card);
     --payment-option-title-color: var(--coras-color-text);
     --payment-option-price-color: var(--coras-color-text);
     --payment-option-button-color: var(--coras-color-neutral-50);
-    --payment-option-button-background: var(--coras-color-info-900);
+    --payment-option-button-background: var(--coras-color-info);
     --payment-option-radio-size: 1.25rem;
     --payment-option-radio-border-width: 2px;
     --payment-option-radio-border-color: var(--coras-color-neutral-400);
-    --payment-option-radio-checked-border-color: var(--coras-palette-pink-500);
+    --payment-option-radio-checked-border-color: var(--coras-color-secondary);
     --payment-option-radio-checked-inner-size: 12px;
     --payment-option-icon-size: 1.25rem;
-    --payment-option-icon-background: var(--coras-color-info-900);
-    --payment-option-icon-color: var(--coras-color-info-500);
+    --payment-option-icon-background: var(--coras-color-info);
+    --payment-option-icon-color: var(--coras-color-info);
 
-    /* Disabled tokens */
     --payment-option-disabled-border-color: var(--coras-color-neutral-300);
     --payment-option-disabled-title-color: var(--coras-color-neutral-500);
     --payment-option-disabled-price-color: var(--coras-color-neutral-600);
@@ -62,15 +61,15 @@ export default css `
       border-color: var(--payment-option-checked-border-color);
       background: linear-gradient(
         to bottom,
-        color-mix(in srgb, var(--coras-palette-pink-500), white 96%),
-        color-mix(in srgb, var(--coras-palette-pink-500), white 92%)
+        var(--coras-color-secondary-tint),
+        var(--coras-color-secondary-tint)
       );
     }
 
     &.disabled {
       pointer-events: none;
       border-color: var(--coras-color-neutral-300);
-      background: var(--coras-color-surface);
+      background: var(--coras-color-card);
     }
   }
 
@@ -108,7 +107,6 @@ export default css `
     background-color: var(--payment-option-radio-checked-border-color);
   }
 
-  /* Disabled look */
   .disabled .title,
   :host([disabled]) .title {
     color: var(--coras-color-neutral-500);

package/dist/components/performance-time/performance-time.styles.js

@@ -11,12 +11,12 @@ export default css `
     --performance-time-padding-block: 36px;
 
     --performance-time-font-size: var(--coras-font-size-base);
-    --performance-time-background-color: var(--coras-color-surface);
+    --performance-time-background-color: var(--coras-color-field);
     --performance-time-color: var(--coras-color-text);
     --performance-time-border-color: var(--coras-color-neutral-600);
     --performance-time-border-radius: var(--coras-radius-md);
     --performance-time-font-weight: var(--coras-font-weight-normal);
-    --performance-time-background-color-hover: var(--coras-color-surface-hover);
+    --performance-time-background-color-hover: var(--coras-color-field-hover);
   }
 
   button {

package/dist/components/phone-country-code/phone-country-code.styles.js

@@ -18,7 +18,7 @@ export default css `
       padding: 12px 16px;
 
       &:hover {
-        background-color: var(--coras-color-surface-hover);
+        background-color: var(--coras-color-menu-hover);
       }
 
       > div {

package/dist/components/points/points.styles.js

@@ -4,7 +4,7 @@ export default css `
   ${component}
 
   :host {
-    --points-background-color: var(--coras-color-success-50);
+    --points-background-color: var(--coras-color-success-background);
     --points-font-size: var(--coras-font-size-base);
     --points-font-weight: var(--coras-font-weight-semibold);
     --points-font-color: var(--coras-color-text);

package/dist/components/search-button/search-button.styles.js

@@ -6,15 +6,23 @@ export default css `
   :host {
     --search-button-font-size: var(--coras-font-size-base);
     --search-button-font-weight: var(--coras-font-weight-normal);
-    --search-button-background-color: var(--coras-color-surface);
-    --search-button-color: var(--coras-color-text-secondary);
-    --search-button-border-color: var(--coras-color-neutral-300);
-    --search-button-border-radius: var(--coras-radius-lg);
-    --search-button-background-color-hover: var(--coras-color-primary-200);
-    --search-button-background-color-active: var(--coras-color-primary-100);
+    --search-button-background-color: var(--coras-color-field);
+    --search-button-color: var(--coras-color-text-muted);
+    --search-button-border-color: var(--coras-color-field-border);
+    --search-button-border-radius: var(--coras-radius-search);
+    --search-button-background-color-hover: color-mix(
+      in srgb,
+      var(--coras-color-field),
+      var(--coras-state-overlay) var(--coras-state-hover)
+    );
+    --search-button-background-color-active: color-mix(
+      in srgb,
+      var(--coras-color-field),
+      var(--coras-state-overlay) var(--coras-state-active)
+    );
     --search-button-border-color-disabled: var(--coras-color-neutral-400);
     --search-button-color-disabled: var(--coras-color-neutral-400);
-    --search-button-icon-color: var(--coras-color-text-secondary);
+    --search-button-icon-color: var(--coras-color-text-muted);
   }
 
   button {

package/dist/components/seated-selector/seated-selector.component.d.ts

@@ -14,11 +14,13 @@ export declare class CorasSeatedSelector extends LitElement {
     workspaceKey: string;
     dateLabel: string;
     region: string;
-    ticketCount: number;
+    maxSeats: number;
+    reserving: boolean;
     private selectedSeats;
     private selectionValid;
     private violations;
     private reserved;
+    private sheetExpanded;
     private fallbackFired;
     private seatsTask;
     private chartDataCache;
@@ -30,6 +32,7 @@ export declare class CorasSeatedSelector extends LitElement {
     private seatLabelFor;
     private handleObjectSelected;
     private handleObjectDeselected;
+    private toggleSheet;
     reservationCreated(): void;
     private handleSelectionValid;
     private handleSelectionInvalid;

package/dist/components/seated-selector/seated-selector.component.js

@@ -34,9 +34,14 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         // Formatted performance date shown in the heading, e.g. "Sat 16 Mar 2023".
         this.dateLabel = "";
         this.region = "eu";
-        // Total seats the user must pick (sum of chosen ticket-type counts). Caps the
-        // chart selection and gates the confirm button.
-        this.ticketCount = 0;
+        // Upper bound on how many seats can be picked (the venue's per-order max). 0
+        // means no cap. It only limits the map; it does not require an exact count,
+        // so the shopper is free to pick fewer or more than the upfront selection.
+        this.maxSeats = 0;
+        // Set by the host while the reservation request is in flight, so the confirm
+        // button shows a spinner instead of looking inert for the few seconds the
+        // basket call takes.
+        this.reserving = false;
         this.selectedSeats = [];
         this.selectionValid = true;
         this.violations = [];
@@ -44,6 +49,10 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         // it stops covering the basket that opens on top of it - until the shopper
         // changes their selection, which reopens the bar for another go.
         this.reserved = false;
+        // On small screens the summary bar acts as a bottom sheet: collapsed to a
+        // seat-count-and-total handle, expanded to the full breakdown on tap. Ignored
+        // on wider screens, where the breakdown always shows.
+        this.sheetExpanded = false;
         this.fallbackFired = false;
         this.seatsTask = new Task(this, {
             task: async ([client, attractionId, instanceId, locale, distributorID, currency,]) => {
@@ -86,8 +95,14 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
             fireInternalEvent(this, "seats-unavailable", {});
         };
         this.handleObjectSelected = (event) => {
-            this.reserved = false;
             const { label } = event.detail;
+            // Ignore any seat the current availability data doesn't know about (e.g. one
+            // a stale seats.io session restored after it was already booked), otherwise
+            // it enters the selection priced at 0 and the reservation fails.
+            if (this.chartData && !(label in this.chartData.availableSeats)) {
+                return;
+            }
+            this.reserved = false;
             if (!this.selectedSeats.some((seat) => seat.id === label)) {
                 this.selectedSeats = [
                     ...this.selectedSeats,
@@ -100,6 +115,9 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
             const { label } = event.detail;
             this.selectedSeats = this.selectedSeats.filter((seat) => seat.id !== label);
         };
+        this.toggleSheet = () => {
+            this.sheetExpanded = !this.sheetExpanded;
+        };
         this.handleSelectionValid = () => {
             this.selectionValid = true;
             this.violations = [];
@@ -143,7 +161,7 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
     // Drop seats chosen for the previous one before the next chart renders so they
     // never carry into the new chart or reservation.
     willUpdate(changed) {
-        if (changed.has("instanceId") || changed.has("ticketCount")) {
+        if (changed.has("instanceId") || changed.has("maxSeats")) {
             this.selectedSeats = [];
             this.selectionValid = true;
             this.violations = [];
@@ -171,13 +189,11 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
     reservationCreated() {
         this.reserved = true;
     }
+    // Any valid, non-empty selection can be booked. The seat count is no longer
+    // tied to the upfront ticket count - the map's own cap (maxSeats) and orphan
+    // validator are the only constraints.
     get isComplete() {
-        if (this.selectedSeats.length === 0 || !this.selectionValid) {
-            return false;
-        }
-        return this.ticketCount
-            ? this.selectedSeats.length === this.ticketCount
-            : true;
+        return this.selectedSeats.length > 0 && this.selectionValid;
     }
     formatPrice(value) {
         return convertToLocaleCurrency({
@@ -204,30 +220,62 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         if (!data || this.selectedSeats.length === 0 || this.reserved) {
             return nothing;
         }
-        const { groups, total } = buildSelectionSummary(this.selectedSeats, data.availableSeats, data.flatPriceBands, data.categories);
+        const { groups, fees, total } = buildSelectionSummary(this.selectedSeats, data.availableSeats, data.flatPriceBands, data.categories);
+        const seatCount = this.selectedSeats.length;
         return html `
-      <div class="drawer" part="drawer">
-        <div class="drawer-summary">
-          <p class="drawer-total">${msg("Total")} ${this.formatPrice(total)}</p>
-          ${map(groups, (group) => html `
-              <p class="drawer-group">
-                <span
-                  class="drawer-dot"
-                  style="background:${group.color}"
-                ></span>
-                ${msg(str `${group.count} ${group.label} Tickets : ${group.seatLabels.join(", ")} (${this.formatPrice(group.unitPrice)} each)`)}
-              </p>
-            `)}
-        </div>
+      <div class="drawer" part="drawer" data-expanded=${this.sheetExpanded}>
+        <div class="drawer-inner">
+          <button
+            type="button"
+            class="sheet-handle"
+            aria-expanded=${this.sheetExpanded}
+            aria-controls="drawer-summary"
+            @click=${this.toggleSheet}
+          >
+            <span class="sheet-handle-label">
+              ${msg(str `${seatCount} seats selected`)}
+            </span>
+            <span class="sheet-handle-total">${this.formatPrice(total)}</span>
+            <span class="sheet-chevron" aria-hidden="true"></span>
+          </button>
+
+          <div class="drawer-summary" id="drawer-summary">
+            ${map(groups, (group) => {
+            const ticketLabel = `${group.count} ${group.label}`;
+            const seatList = group.seatLabels.join(", ");
+            const unitPrice = this.formatPrice(group.unitPrice);
+            return html `
+                <p class="drawer-group">
+                  <span
+                    class="drawer-dot"
+                    style="background:${group.color}"
+                  ></span>
+                  ${msg(str `${ticketLabel} Tickets : ${seatList} (${unitPrice} each)`)}
+                </p>
+              `;
+        })}
+            ${fees > 0
+            ? html `
+                  <p class="drawer-fee">
+                    ${msg(str `Booking fee ${this.formatPrice(fees)}`)}
+                  </p>
+                `
+            : nothing}
+            <p class="drawer-total">
+              ${msg("Total")} ${this.formatPrice(total)}
+            </p>
+          </div>
 
-        <coras-button
-          variant="primary"
-          height="sm"
-          ?disabled=${!this.isComplete}
-          @click=${this.handleConfirm}
-        >
-          ${msg("Add to basket")}
-        </coras-button>
+          <coras-button
+            variant="primary"
+            height="sm"
+            ?loading=${this.reserving}
+            ?disabled=${!this.isComplete || this.reserving}
+            @click=${this.handleConfirm}
+          >
+            ${msg("Add to basket")}
+          </coras-button>
+        </div>
       </div>
     `;
     }
@@ -254,7 +302,7 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
             language=${this.locale.split("-")[0] || "en"}
             currency=${this.currency}
             currency-locale=${this.locale}
-            max-selected-objects=${this.ticketCount}
+            max-selected-objects=${this.maxSeats}
             .chartData=${chartData}
             .selectedObjects=${this.selectedLabels}
             @seats-io-object-selected=${this.handleObjectSelected}
@@ -301,8 +349,11 @@ __decorate([
     property({ type: String })
 ], CorasSeatedSelector.prototype, "region", void 0);
 __decorate([
-    property({ type: Number, attribute: "ticket-count" })
-], CorasSeatedSelector.prototype, "ticketCount", void 0);
+    property({ type: Number, attribute: "max-seats" })
+], CorasSeatedSelector.prototype, "maxSeats", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasSeatedSelector.prototype, "reserving", void 0);
 __decorate([
     state()
 ], CorasSeatedSelector.prototype, "selectedSeats", void 0);
@@ -315,6 +366,9 @@ __decorate([
 __decorate([
     state()
 ], CorasSeatedSelector.prototype, "reserved", void 0);
+__decorate([
+    state()
+], CorasSeatedSelector.prototype, "sheetExpanded", void 0);
 CorasSeatedSelector = __decorate([
     localized()
 ], CorasSeatedSelector);

package/dist/components/seated-selector/seated-selector.styles.js

@@ -4,9 +4,12 @@ export default css `
   ${component}
 
   :host {
+    --coras-seated-max-width: 720px;
+
     display: flex;
     flex-direction: column;
-    gap: var(--coras-spacing-md, 16px);
+    gap: 1rem;
+    max-width: var(--coras-seated-max-width);
   }
 
   .heading {
@@ -32,15 +35,22 @@ export default css `
     inset-inline: 0;
     bottom: 0;
     z-index: 20;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 24px clamp(16px, 4vw, 48px);
+    background: var(--coras-color-background);
+    border-top: 1px solid var(--coras-color-divider);
+    box-shadow: var(--coras-shadow-top);
+  }
+
+  .drawer-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
-    box-sizing: border-box;
-    padding: 24px clamp(24px, 6vw, 96px);
-    background: var(--coras-color-background, #fcfcff);
-    border-top: 1px solid var(--coras-color-neutral-200, #e6e6e6);
-    box-shadow: 1px -4px 8px 4px rgba(0, 0, 0, 0.03);
+    width: 100%;
+    max-width: var(--coras-seated-max-width);
   }
 
   .drawer-summary {
@@ -50,13 +60,6 @@ export default css `
     min-width: 0;
   }
 
-  .drawer-total {
-    margin: 0;
-    color: var(--coras-color-text);
-    font-size: var(--coras-font-size-base);
-    font-weight: var(--coras-font-weight-medium);
-  }
-
   .drawer-group {
     display: flex;
     align-items: center;
@@ -73,12 +76,84 @@ export default css `
     border-radius: 50%;
   }
 
+  .drawer-fee {
+    margin: 0;
+    color: var(--coras-color-text-muted);
+    font-size: var(--coras-font-size-sm);
+  }
+
+  .drawer-total {
+    margin: 4px 0 0;
+    padding-top: 8px;
+    border-top: 1px solid var(--coras-color-divider);
+    color: var(--coras-color-text);
+    font-size: var(--coras-font-size-base);
+    font-weight: var(--coras-font-weight-medium);
+  }
+
+  .sheet-handle {
+    display: none;
+  }
+
   @media (max-width: 600px) {
     .drawer {
+      padding: 16px;
+    }
+
+    .drawer-inner {
       flex-direction: column;
       align-items: stretch;
       gap: 12px;
-      padding: 16px;
+    }
+
+    .sheet-handle {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      width: 100%;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--coras-color-text);
+      font: inherit;
+      text-align: start;
+    }
+
+    .sheet-handle-label {
+      font-size: var(--coras-font-size-sm);
+    }
+
+    .sheet-handle-total {
+      margin-inline-start: auto;
+      font-size: var(--coras-font-size-base);
+      font-weight: var(--coras-font-weight-medium);
+    }
+
+    .sheet-chevron {
+      flex-shrink: 0;
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: rotate(-135deg);
+      transition: transform 0.15s ease;
+    }
+
+    .drawer[data-expanded="true"] .sheet-chevron {
+      transform: rotate(45deg);
+    }
+
+    .drawer-summary {
+      display: none;
+    }
+
+    .drawer[data-expanded="true"] .drawer-summary {
+      display: flex;
+    }
+
+    .drawer-total {
+      display: none;
     }
   }
 `;

package/dist/components/seats-io/seats-io.component.d.ts

@@ -15,6 +15,8 @@ export declare class CorasSeatsIO extends LitElement {
     maxSelectedObjects: number;
     private container;
     private seatsioInstance;
+    private readonly colorScheme;
+    private renderedScheme;
     private eventsCallbacks;
     private getConfig;
     private loadSeatsio;

package/dist/components/seats-io/seats-io.component.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement, } from "lit";
 import { property, query } from "lit/decorators.js";
 import { fireInternalEvent } from "../../core/events.js";
+import { ColorSchemeController } from "../../core/color-scheme.js";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
 import { SEATS_IO_DEFAULTS } from "./seats-io.constants.js";
 import styles from "./seats-io.styles.js";
 export class CorasSeatsIO extends LitElement {
@@ -24,6 +26,11 @@ export class CorasSeatsIO extends LitElement {
         this.selectedObjects = [];
         this.maxSelectedObjects = 0;
         this.seatsioInstance = null;
+        // The chart's dark/light styling is baked in at render time, so track the
+        // effective scheme and rebuild when it flips (the controller requests an
+        // update on both an SDK colour-scheme change and an OS preference change).
+        this.colorScheme = new ColorSchemeController(this);
+        this.renderedScheme = null;
         this.eventsCallbacks = {
             onObjectSelected: (object) => fireInternalEvent(this, "seats-io-object-selected", object),
             onObjectDeselected: (object) => fireInternalEvent(this, "seats-io-object-deselected", object),
@@ -49,6 +56,18 @@ export class CorasSeatsIO extends LitElement {
             workspaceKey: this.workspaceKey,
             event: this.event,
             language: this.language,
+            // The map inherits the embed's effective colour scheme so its background
+            // matches a dark theme instead of staying white.
+            colorScheme: this.colorScheme.scheme,
+            // Prices reach seats.io as raw minor units (e.g. 3500). Format them to the
+            // shopper's currency and locale so tooltips and the legend read "£35.00",
+            // not "3500". A presentation-layer callback, so unlike the renderer-engine
+            // callbacks it may close over the element's currency/locale.
+            priceFormatter: (price) => convertToLocaleCurrency({
+                value: price,
+                locale: this.currencyLocale,
+                currency: this.currency,
+            }),
         };
         if (!this.chartData) {
             return base;
@@ -70,7 +89,11 @@ export class CorasSeatsIO extends LitElement {
                 ? { maxSelectedObjects: this.maxSelectedObjects }
                 : {}),
             selectionValidators: [{ type: "noOrphanSeats" }],
-            session: "continue",
+            // Start a fresh hold session on every mount. "continue" restores the
+            // previous browser session, so reopening the map after a reservation
+            // re-selected seats that are no longer available - selecting them at
+            // price 0 and breaking "Add to basket".
+            session: "start",
         };
         return config;
     }
@@ -103,11 +126,21 @@ export class CorasSeatsIO extends LitElement {
     }
     async updated(changed) {
         super.updated(changed);
+        // Everything below is baked into the chart at construction, so a change to
+        // any of it needs a rebuild, not a prop update the running chart ignores.
+        // The scheme is not a Lit property (the controller drives it), so compare it
+        // against the scheme the current chart was built with.
+        const schemeChanged = this.colorScheme.scheme !== this.renderedScheme;
         if (changed.has("event") ||
             changed.has("workspaceKey") ||
             changed.has("region") ||
             changed.has("language") ||
-            changed.has("chartData")) {
+            changed.has("chartData") ||
+            changed.has("currency") ||
+            changed.has("currencyLocale") ||
+            changed.has("maxSelectedObjects") ||
+            schemeChanged) {
+            this.renderedScheme = this.colorScheme.scheme;
             try {
                 await this.getSeatsio();
                 this.seatsioInstance?.destroy();

package/dist/components/seats-io/seats-io.constants.d.ts

@@ -1,9 +1,14 @@
 export declare const SEATS_IO_DEFAULTS: {
     showRowLabels: boolean;
     showRowLines: boolean;
+    fitTo: "widthAndHeight";
+    showFullScreenButton: boolean;
     legend: {
         hideNonSelectableCategories: boolean;
     };
+    objectPopover: {
+        showUnavailableNotice: boolean;
+    };
     loading: string;
     showActiveSectionTooltipOnMobile: boolean;
 };

package/dist/components/seats-io/seats-io.constants.js

@@ -1,9 +1,21 @@
 export const SEATS_IO_DEFAULTS = {
     showRowLabels: true,
     showRowLines: true,
+    // Fill the container in both dimensions so the chart doesn't float in a wide
+    // margin (with the seats.io controls stranded far from the seats) on large
+    // screens. Paired with the capped map width on the seated selector.
+    fitTo: "widthAndHeight",
+    // Let shoppers pop the map out to full screen; the enlarge affordance sits
+    // next to seats.io's own zoom controls.
+    showFullScreenButton: true,
     legend: {
         hideNonSelectableCategories: true,
     },
+    // Show an "unavailable" note when hovering a seat that can't be picked.
+    // `objectPopover` is the current key; `objectTooltip` is deprecated.
+    objectPopover: {
+        showUnavailableNotice: true,
+    },
     loading: " ",
     showActiveSectionTooltipOnMobile: false,
 };