@coras-io/embed 0.1.0

package/dist/containers/navbar/navbar.d.ts

@@ -0,0 +1,8 @@
+import { CorasNavBar } from "./navbar.component.js";
+export * from "./navbar.component.js";
+export default CorasNavBar;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-navbar": CorasNavBar;
+    }
+}

package/dist/containers/navbar/navbar.js

@@ -0,0 +1,6 @@
+import { CorasNavBar } from "./navbar.component.js";
+export * from "./navbar.component.js";
+export default CorasNavBar;
+if (!customElements.get("coras-navbar")) {
+    customElements.define("coras-navbar", CorasNavBar);
+}

package/dist/containers/navbar/navbar.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/containers/navbar/navbar.styles.js

@@ -0,0 +1,257 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --navbar-background: var(--coras-navbar-background);
+    --navbar-text-color: var(--coras-navbar-text-color);
+    --navbar-border-bottom: var(--coras-navbar-border-bottom);
+    --navbar-shadow: var(--coras-navbar-shadow);
+    --navbar-icon-color: var(--coras-navbar-icon-color);
+
+    --recently-viewed-font-size: var(--coras-font-size-base);
+    --recently-viewed-font-weight: var(--coras-font-weight-medium);
+    --recently-viewed-color: var(--coras-color-text);
+
+    --popular-font-size: var(--coras-font-size-base);
+    --popular-font-weight: var(--coras-font-weight-medium);
+    --popular-color: var(--coras-color-text);
+
+    --no-results-font-size: var(--coras-font-size-base);
+    --no-results-font-weight: var(--coras-font-weight-medium);
+    --no-results-color: var(--coras-color-text);
+
+    --mobile-menu-drawer-icon-color: var(--coras-color-text);
+    --mobile-menu-color: var(--coras-color-text);
+
+    --navbar-gap: 3rem;
+    --navbar-dropdown-gap: 0.5rem;
+    --navbar-mobile-menu-gap: 3rem;
+    --navbar-mobile-menu-padding-top: 5rem;
+    --navbar-mobile-search-padding: 0 2rem;
+    /* Logo is constrained by height with intrinsic width, so any aspect ratio
+       stays crisp. Override --navbar-logo-* on the element to rebrand. */
+    --navbar-logo-height: 2rem;
+    --navbar-logo-max-width: 11.25rem;
+
+    container-type: inline-size;
+    container-name: navbar;
+
+    display: block;
+    width: 100%;
+
+    background: var(--navbar-background);
+  }
+
+  coras-icon[icon="shopping-basket"],
+  coras-icon[icon="menu"] {
+    fill: var(--navbar-icon-color);
+  }
+
+  .locale,
+  .currency-symbol,
+  .currency-name,
+  .basket-items-quantity {
+    color: var(--navbar-text-color);
+  }
+
+  .container {
+    max-width: var(--coras-container-max-width);
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .recently-viewed {
+    font-size: var(--recently-viewed-font-size);
+    font-weight: var(--recently-viewed-font-weight);
+    color: var(--recently-viewed-color);
+    padding: 1rem 1.5rem;
+  }
+
+  .popular {
+    font-size: var(--popular-font-size);
+    font-weight: var(--popular-font-weight);
+    color: var(--popular-color);
+    padding: 1rem 1.5rem;
+  }
+
+  .no-results {
+    font-size: var(--no-results-font-size);
+    font-weight: var(--no-results-font-weight);
+    color: var(--no-results-color);
+    padding: 1rem 1.5rem;
+    text-align: center;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    padding: var(--coras-navbar-padding);
+    border-bottom: var(--navbar-border-bottom);
+    box-shadow: var(--navbar-shadow);
+
+    &.search-only {
+      justify-content: flex-end;
+
+      .search-only-controls {
+        display: flex;
+        align-items: center;
+        column-gap: var(--navbar-gap);
+      }
+    }
+
+    > coras-search-button {
+      display: none;
+
+      @container navbar (max-width: 800px) {
+        display: block;
+      }
+
+      @media (max-width: 800px) {
+        display: block;
+      }
+    }
+
+    .container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+  }
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    transition: width 0.3s ease;
+
+    /* Size both a host-slotted brand element and the default logo (the img
+       rendered from the config.theme.logo URL) by height, letting width follow
+       the aspect ratio. object-fit keeps raster logos undistorted; max-width
+       guards against a very wide wordmark blowing out the bar. */
+    ::slotted([slot="brand"]),
+    .brand-logo {
+      height: var(--navbar-logo-height);
+      width: auto;
+      max-width: var(--navbar-logo-max-width);
+      object-fit: contain;
+      cursor: pointer;
+    }
+
+    @container navbar (max-width: 800px) {
+      --navbar-logo-height: 1.5rem;
+    }
+
+    @media (max-width: 800px) {
+      --navbar-logo-height: 1.5rem;
+    }
+  }
+
+  .navigation-container {
+    display: flex;
+    align-items: center;
+    column-gap: var(--navbar-gap);
+
+    coras-dropdown {
+      [slot="trigger"] {
+        display: flex;
+        align-items: center;
+        column-gap: var(--navbar-dropdown-gap);
+        cursor: pointer;
+      }
+    }
+
+    .currencies [slot="trigger"] {
+      .currency-symbol {
+        font-size: 1.25rem;
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      .currency-name {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+    }
+
+    > coras-icon {
+      cursor: pointer;
+      display: none;
+
+      @container navbar (max-width: 800px) {
+        display: block;
+      }
+
+      @media (max-width: 800px) {
+        display: block;
+      }
+    }
+
+    .search {
+      position: relative;
+
+      coras-select-list {
+        width: 320px;
+      }
+
+      coras-field {
+        width: 220px;
+      }
+
+      @container navbar (max-width: 800px) {
+        display: none;
+      }
+
+      @media (max-width: 800px) {
+        display: none;
+      }
+    }
+
+    .locales,
+    .currencies {
+      @container navbar (max-width: 800px) {
+        display: none;
+      }
+
+      @media (max-width: 800px) {
+        display: none;
+      }
+    }
+
+    [data-testid="basket-trigger"] {
+      display: flex;
+      align-items: center;
+      column-gap: var(--navbar-dropdown-gap);
+      cursor: pointer;
+
+      .basket-items-quantity {
+        @container navbar (max-width: 530px) {
+          display: none;
+        }
+      }
+    }
+  }
+
+  coras-drawer {
+    coras-button > coras-icon {
+      fill: var(--mobile-menu-drawer-icon-color);
+    }
+
+    .mobile-menu {
+      display: flex;
+      flex-direction: column;
+      gap: var(--navbar-mobile-menu-gap);
+      padding-top: var(--navbar-mobile-menu-padding-top);
+      color: var(--mobile-menu-color);
+    }
+
+    .input-wrapper-mobile {
+      padding: var(--navbar-mobile-search-padding);
+    }
+  }
+`;

package/dist/containers/navbar/navbar.utils.d.ts

@@ -0,0 +1,12 @@
+import { components } from "../../core/types/api-schema.js";
+import { PageName } from "../../core/types/shared.js";
+export declare const RECENTLY_SELECTED_SEARCHES_KEY = "coras-recently-selected-searches";
+export declare const getRecentlySelectedSearches: () => components["schemas"]["SearchGetResult"][];
+export declare const addRecentlySelectedSearches: (item: components["schemas"]["SearchGetResult"]) => void;
+export declare const getLocaleLabel: (locale: string) => string;
+export declare enum DrawerSubmenu {
+    LANGUAGE = "language",
+    CURRENCY = "currency",
+    SEARCH = "search"
+}
+export declare const searchResultTypeToLocationPageMap: Record<string, PageName>;

package/dist/containers/navbar/navbar.utils.js

@@ -0,0 +1,40 @@
+export const RECENTLY_SELECTED_SEARCHES_KEY = "coras-recently-selected-searches";
+const RECENTLY_SELECTED_SEARCHES_LIMIT = 10;
+export const getRecentlySelectedSearches = () => {
+    try {
+        const storedData = localStorage.getItem(RECENTLY_SELECTED_SEARCHES_KEY);
+        return storedData ? JSON.parse(storedData) : [];
+    }
+    catch (error) {
+        console.error("Error while parsing recently selected searches:", error);
+        return [];
+    }
+};
+export const addRecentlySelectedSearches = (item) => {
+    try {
+        const recentlySelected = getRecentlySelectedSearches();
+        const updatedResults = [
+            item,
+            ...recentlySelected.filter(({ value }) => value !== item.value),
+        ].slice(0, RECENTLY_SELECTED_SEARCHES_LIMIT);
+        localStorage.setItem(RECENTLY_SELECTED_SEARCHES_KEY, JSON.stringify(updatedResults));
+    }
+    catch (error) {
+        console.error("Error while updating recently selected searches:", error);
+    }
+};
+export const getLocaleLabel = (locale) => {
+    const split = locale.split("-");
+    return split[0].toUpperCase();
+};
+export var DrawerSubmenu;
+(function (DrawerSubmenu) {
+    DrawerSubmenu["LANGUAGE"] = "language";
+    DrawerSubmenu["CURRENCY"] = "currency";
+    DrawerSubmenu["SEARCH"] = "search";
+})(DrawerSubmenu || (DrawerSubmenu = {}));
+export const searchResultTypeToLocationPageMap = {
+    city: "landing",
+    country: "landing",
+    attraction: "details",
+};

package/dist/contexts/basket/basket.context.d.ts

@@ -0,0 +1,4 @@
+import { BasketContext } from "./basket.types.js";
+export declare const basketContext: {
+    __context__: BasketContext;
+};

package/dist/contexts/basket/basket.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const basketContext = createContext(Symbol("basket-context"));

package/dist/contexts/basket/basket.d.ts

@@ -0,0 +1,8 @@
+import { CorasBasketProvider } from "./basket.provider.js";
+export * from "./basket.provider.js";
+export default CorasBasketProvider;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-basket-provider": CorasBasketProvider;
+    }
+}

package/dist/contexts/basket/basket.js

@@ -0,0 +1,6 @@
+import { CorasBasketProvider } from "./basket.provider.js";
+export * from "./basket.provider.js";
+export default CorasBasketProvider;
+if (!customElements.get("coras-basket-provider")) {
+    customElements.define("coras-basket-provider", CorasBasketProvider);
+}

package/dist/contexts/basket/basket.provider.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, PropertyValues, CSSResultGroup } from "lit";
+import { BasketContext, RemoveItem, ReservationSummary } from "./basket.types.js";
+import { paths } from "../../core/types/api-schema.js";
+import { Client } from "openapi-fetch";
+import type { SupportedLocales } from "../../core/types/index.js";
+export declare class CorasBasketProvider extends LitElement {
+    static styles: CSSResultGroup;
+    distributorID: string;
+    locale: SupportedLocales;
+    client: Client<paths>;
+    private expirationTimer;
+    private lowestExpiresInReservationId;
+    basketState: BasketContext;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private clearExpirationTimer;
+    private setupExpirationTimers;
+    private handleReservationCreated;
+    willUpdate(changedProperties: PropertyValues<this>): void;
+    private reservationsTask;
+    private deleteReservationTask;
+    private updateBasketState;
+    getReservations: () => void;
+    addItem: (reservation: ReservationSummary) => void;
+    removeItem: ({ reservationId, apiRequest }: RemoveItem) => void;
+    clearBasket: () => void;
+    private aggregateLoyalty;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/contexts/basket/basket.provider.js

@@ -0,0 +1,218 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { state } from "lit/decorators.js";
+import { consume, provide } from "@lit/context";
+import { Task, TaskStatus } from "@lit/task";
+import { basketContext } from "./basket.context.js";
+import { getBookingSession } from "../../core/api/middlewares/booking-session/booking-session.utils.js";
+import { distributorIdContext, localeContext } from "../properties.context.js";
+import { clientContext } from "../client.context.js";
+import { apiGet, apiDelete, withErrorHandling, } from "../../core/api/queries.js";
+import styles from "./basket.styles.js";
+export class CorasBasketProvider extends LitElement {
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.basketState = {
+            items: null,
+            status: TaskStatus.INITIAL,
+            price: 0,
+            quantity: 0,
+            loyalty: undefined,
+            getReservations: () => { },
+            addItem: () => { },
+            removeItem: () => { },
+            clearBasket: () => { },
+        };
+        this.handleReservationCreated = () => {
+            this.getReservations();
+        };
+        this.reservationsTask = new Task(this, {
+            task: async ([locale]) => {
+                const bookingSession = getBookingSession();
+                if (!bookingSession) {
+                    return null;
+                }
+                const { data } = await withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale,
+                    endpoint: "/{api_version}/reservations",
+                    bookingSession,
+                }));
+                if (!data) {
+                    return null;
+                }
+                this.updateBasketState({
+                    items: data.reservations,
+                    price: data.total_price,
+                    quantity: data.reservations?.length || 0,
+                    loyalty: this.aggregateLoyalty(data.reservations),
+                });
+                this.setupExpirationTimers();
+                return data;
+            },
+            args: () => [this.locale],
+        });
+        this.deleteReservationTask = new Task(this, {
+            autoRun: false,
+            task: async ([reservationId]) => {
+                const bookingSession = getBookingSession();
+                if (!bookingSession) {
+                    return null;
+                }
+                const { data } = await withErrorHandling(apiDelete({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale: this.locale,
+                    endpoint: "/{api_version}/reservations/{reservation_id}",
+                    path: { reservation_id: reservationId },
+                    bookingSession,
+                }));
+                if (!data) {
+                    return null;
+                }
+                this.getReservations();
+                return data;
+            },
+            args: (reservationId = "") => [reservationId],
+        });
+        this.getReservations = () => {
+            this.reservationsTask.run();
+        };
+        this.addItem = (reservation) => {
+            const items = [...(this.basketState.items || []), reservation];
+            this.updateBasketState({
+                items,
+                quantity: this.basketState.quantity + 1,
+                price: this.basketState.price + reservation.total_price,
+                loyalty: this.aggregateLoyalty(items),
+            });
+            this.setupExpirationTimers();
+        };
+        this.removeItem = ({ reservationId, apiRequest = false }) => {
+            if (!this.basketState.items) {
+                return;
+            }
+            const item = this.basketState.items.find((item) => item.reservation_id === reservationId);
+            if (item) {
+                const items = this.basketState.items.filter((item) => item.reservation_id !== reservationId);
+                this.updateBasketState({
+                    items,
+                    quantity: this.basketState.quantity - 1,
+                    price: this.basketState.price - (item?.total_price || 0),
+                    loyalty: this.aggregateLoyalty(items),
+                });
+                this.setupExpirationTimers();
+                if (apiRequest) {
+                    this.deleteReservationTask.run([item.reservation_id]);
+                }
+            }
+        };
+        this.clearBasket = () => {
+            this.updateBasketState({
+                items: [],
+                price: 0,
+                quantity: 0,
+                loyalty: undefined,
+            });
+            this.clearExpirationTimer();
+        };
+        this.basketState.getReservations = this.getReservations;
+        this.basketState.addItem = this.addItem;
+        this.basketState.removeItem = this.removeItem;
+        this.basketState.clearBasket = this.clearBasket;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Reservation creation is dispatched by the page host as a host-facing
+        // event. The basket provider lives inside coras-layout, so it is not on the
+        // event path when the host dispatches the event.
+        window.addEventListener("coras:reservation-created", this.handleReservationCreated, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("coras:reservation-created", this.handleReservationCreated, true);
+        this.clearExpirationTimer();
+    }
+    clearExpirationTimer() {
+        if (this.expirationTimer !== undefined) {
+            window.clearTimeout(this.expirationTimer);
+            this.expirationTimer = undefined;
+            this.lowestExpiresInReservationId = undefined;
+        }
+    }
+    setupExpirationTimers() {
+        this.clearExpirationTimer();
+        if (!this.basketState.items || this.basketState.items.length === 0) {
+            return;
+        }
+        let lowestExpiresIn = Number.MAX_SAFE_INTEGER;
+        let lowestExpiresInItem = null;
+        for (const item of this.basketState.items) {
+            if (item.expires_in > 0 && item.expires_in < lowestExpiresIn) {
+                lowestExpiresIn = item.expires_in;
+                lowestExpiresInItem = item;
+            }
+        }
+        if (lowestExpiresInItem) {
+            const expiresInMs = lowestExpiresIn * 1000;
+            this.lowestExpiresInReservationId = lowestExpiresInItem.reservation_id;
+            this.expirationTimer = window.setTimeout(() => {
+                if (this.lowestExpiresInReservationId) {
+                    this.removeItem({
+                        reservationId: this.lowestExpiresInReservationId,
+                        apiRequest: false,
+                    });
+                }
+            }, expiresInMs);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (this.basketState.status !== this.reservationsTask.status) {
+            this.updateBasketState({ status: this.reservationsTask.status });
+        }
+    }
+    updateBasketState(partialState) {
+        this.basketState = { ...this.basketState, ...partialState };
+    }
+    aggregateLoyalty(reservations) {
+        if (!reservations?.length)
+            return undefined;
+        const pay = {};
+        const earn = {};
+        for (const r of reservations) {
+            if (!r.loyalty)
+                continue;
+            for (const [symbol, amount] of Object.entries(r.loyalty.pay)) {
+                pay[symbol] = (pay[symbol] || 0) + Number(amount);
+            }
+            for (const [symbol, amount] of Object.entries(r.loyalty.earn)) {
+                earn[symbol] = (earn[symbol] || 0) + Number(amount);
+            }
+        }
+        return { pay, earn };
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    consume({ context: distributorIdContext, subscribe: true })
+], CorasBasketProvider.prototype, "distributorID", void 0);
+__decorate([
+    consume({ context: localeContext, subscribe: true })
+], CorasBasketProvider.prototype, "locale", void 0);
+__decorate([
+    consume({ context: clientContext, subscribe: true })
+], CorasBasketProvider.prototype, "client", void 0);
+__decorate([
+    provide({ context: basketContext }),
+    state()
+], CorasBasketProvider.prototype, "basketState", void 0);

package/dist/contexts/basket/basket.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/contexts/basket/basket.styles.js

@@ -0,0 +1,9 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    flex: 1;
+  }
+`;

package/dist/contexts/basket/basket.types.d.ts

@@ -0,0 +1,18 @@
+import { TaskStatus } from "@lit/task";
+import { components } from "../../core/types/api-schema.js";
+export type ReservationSummary = components["schemas"]["EventReservationSummary"] | components["schemas"]["TourReservationSummary"];
+export type RemoveItem = {
+    reservationId: string;
+    apiRequest?: boolean;
+};
+export type BasketContext = {
+    items: ReservationSummary[] | null;
+    price: number;
+    quantity: number;
+    status: TaskStatus;
+    loyalty: components["schemas"]["LoyaltySchema"] | undefined;
+    getReservations: () => void;
+    addItem: (item: ReservationSummary) => void;
+    removeItem: ({ reservationId, apiRequest }: RemoveItem) => void;
+    clearBasket: () => void;
+};

package/dist/contexts/basket/basket.types.js

@@ -0,0 +1 @@
+export {};

package/dist/contexts/client.context.d.ts

@@ -0,0 +1,5 @@
+import { Client } from "openapi-fetch";
+import { paths } from "../core/types/api-schema.js";
+export declare const clientContext: {
+    __context__: Client<paths, `${string}/${string}`>;
+};

package/dist/contexts/client.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const clientContext = createContext(Symbol("client-context"));

package/dist/contexts/current-page.context.d.ts

@@ -0,0 +1,4 @@
+import { PageName } from "../core/types/shared.js";
+export declare const currentPageContext: {
+    __context__: PageName;
+};

package/dist/contexts/current-page.context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const currentPageContext = createContext("current-page-context");