@coras-io/embed 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @coras-io/embed
 
+## 0.2.0
+
+### Minor Changes
+
+- c7714d5: Hover and selected states on dropdown rows, calendar days, chips and the ticket-type selector now take a faint tint from the brand primary colour instead of a fixed neutral grey, so they follow a rebrand and match the search button. The ticket-type selector's radius now follows the brand button radius (and the general brand radius by default) rather than staying fixed.
+- e157901: Refine the seated theater booking flow: shoppers can change their seat count directly on the map, hover and legend prices show formatted currency, the map offers a full-screen view, "Add to basket" shows progress while it works, and the map closes and the ticket selector resets after a booking. The static seat map illustration is hidden when the interactive picker is available.
+
+### Patch Changes
+
+- Updated dependencies [c7714d5]
+  - @coras-io/brand-tokens@0.2.0
+
+## 0.1.2
+
+### Patch Changes
+
+- 90975a0: Render prices with the decimal places each currency actually uses instead of
+  always showing two. Zero-decimal currencies (JPY, VND, ISK, HUF and others) now
+  display as whole amounts (`¥1,000` rather than `¥1,000.00`), and IDR is shown
+  without its defunct sen subunit. Two-decimal currencies are unaffected.
+
 ## 0.1.1
 
 ### Patch Changes

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

@@ -14,7 +14,8 @@ export declare class CorasSeatedSelector extends LitElement {
     workspaceKey: string;
     dateLabel: string;
     region: string;
-    ticketCount: number;
+    maxSeats: number;
+    reserving: boolean;
     private selectedSeats;
     private selectionValid;
     private violations;

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 = [];
@@ -143,7 +148,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 +176,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({
@@ -207,27 +210,32 @@ let CorasSeatedSelector = class CorasSeatedSelector extends LitElement {
         const { groups, total } = buildSelectionSummary(this.selectedSeats, data.availableSeats, data.flatPriceBands, data.categories);
         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-inner">
+          <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>
 
-        <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 +262,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 +309,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);

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

@@ -33,16 +33,25 @@ export default css `
     bottom: 0;
     z-index: 20;
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 24px;
+    justify-content: center;
     box-sizing: border-box;
-    padding: 24px clamp(24px, 6vw, 96px);
+    padding: 24px clamp(16px, 4vw, 48px);
     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);
   }
 
+  /* Cap the content width and centre it so the summary and the button stay
+     close together on wide screens instead of hugging opposite edges. */
+  .drawer-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    width: 100%;
+    max-width: 720px;
+  }
+
   .drawer-summary {
     display: flex;
     flex-direction: column;
@@ -75,10 +84,13 @@ export default css `
 
   @media (max-width: 600px) {
     .drawer {
+      padding: 16px;
+    }
+
+    .drawer-inner {
       flex-direction: column;
       align-items: stretch;
       gap: 12px;
-      padding: 16px;
     }
   }
 `;

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

@@ -7,6 +7,7 @@ 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 { 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 {
@@ -49,6 +50,15 @@ export class CorasSeatsIO extends LitElement {
             workspaceKey: this.workspaceKey,
             event: this.event,
             language: this.language,
+            // 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;

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

@@ -1,9 +1,13 @@
 export declare const SEATS_IO_DEFAULTS: {
     showRowLabels: boolean;
     showRowLines: boolean;
+    showFullScreenButton: boolean;
     legend: {
         hideNonSelectableCategories: boolean;
     };
+    objectTooltip: {
+        showUnavailableNotice: boolean;
+    };
     loading: string;
     showActiveSectionTooltipOnMobile: boolean;
 };

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

@@ -1,9 +1,16 @@
 export const SEATS_IO_DEFAULTS = {
     showRowLabels: true,
     showRowLines: true,
+    // 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.
+    objectTooltip: {
+        showUnavailableNotice: true,
+    },
     loading: " ",
     showActiveSectionTooltipOnMobile: false,
 };

package/dist/components/tour-ticket-type-selector/tour-ticket-type-selector.styles.js

@@ -20,10 +20,11 @@ export default css `
       width: 100%;
     }
 
-    /* The trigger reads as a prominent text field, so it keeps a fixed field
-       radius (like the payment fields) rather than tracking the brand radius. */
+    /* The trigger is a button, so its radius follows the brand button radius
+       (which tracks the general brand radius until a separate button radius is
+       set) rather than a fixed field radius. */
     coras-button {
-      --button-border-radius-small: var(--coras-radius-field);
+      --button-border-radius-small: var(--coras-radius-button);
     }
   }
 

package/dist/core/currency/index.d.ts

@@ -5,8 +5,6 @@ type convertToLocaleCurrencyProps = {
     locale: (typeof allLocales)[number];
     currency: SupportedCurrencies;
     isSmallestCurrencyUnit?: boolean;
-    maximumFractionDigits?: number;
-    minimumFractionDigits?: number;
 };
-export declare const convertToLocaleCurrency: ({ value, locale, currency, maximumFractionDigits, minimumFractionDigits, isSmallestCurrencyUnit, }: convertToLocaleCurrencyProps) => string;
+export declare const convertToLocaleCurrency: ({ value, locale, currency, isSmallestCurrencyUnit, }: convertToLocaleCurrencyProps) => string;
 export {};

package/dist/core/currency/index.js

@@ -1,6 +1,16 @@
-export const convertToLocaleCurrency = ({ value = 10000, locale = "en-US", currency = "USD", maximumFractionDigits = 2, minimumFractionDigits = 2, isSmallestCurrencyUnit = true, }) => new Intl.NumberFormat(locale, {
-    style: "currency",
-    currency: currency,
-    maximumFractionDigits: maximumFractionDigits,
-    minimumFractionDigits: minimumFractionDigits,
-}).format(isSmallestCurrencyUnit ? value / 100 : value);
+// Currencies we render without decimals even though their CLDR default is 2.
+// Intl already drops decimals for genuinely zero-decimal currencies (JPY, VND,
+// ISK, HUF, ALL); IDR's default is 2 (the defunct sen subunit) but amounts are
+// only ever whole rupiah, so we force it to 0 here.
+const forcedZeroDecimalCurrencies = new Set(["IDR"]);
+export const convertToLocaleCurrency = ({ value = 10000, locale = "en-US", currency = "USD", isSmallestCurrencyUnit = true, }) => {
+    const fractionDigits = forcedZeroDecimalCurrencies.has(currency)
+        ? 0
+        : undefined;
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currency,
+        minimumFractionDigits: fractionDigits,
+        maximumFractionDigits: fractionDigits,
+    }).format(isSmallestCurrencyUnit ? value / 100 : value);
+};