@coras-io/embed 0.1.0

package/dist/containers/basket/basket.component.js

@@ -0,0 +1,257 @@
+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 { consume, ContextConsumer } from "@lit/context";
+import { TaskStatus } from "@lit/task";
+import { fireInternalEvent } from "../../core/events.js";
+import "../../components/basket/basket.js";
+import "../../components/basket-empty/basket-empty.js";
+import "../../components/basket-item/basket-item.js";
+import "../../components/basket-item-ticket/basket-item-ticket.js";
+import "../../components/button/button.js";
+import "../../contexts/basket/basket.js";
+import { basketContext } from "../../contexts/basket/basket.context.js";
+import { property } from "lit/decorators.js";
+import { currencyContext, localeContext, assetsURLContext, } from "../../contexts/properties.context.js";
+import { localized, msg } from "@lit/localize";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { formatDateTimeForDisplay, formatTimeForDisplay, } from "../../core/utils/datetime.js";
+let CorasBasket = class CorasBasket extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.expanded = false;
+        this.checkout = false;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        this.basket = new ContextConsumer(this, {
+            context: basketContext,
+            subscribe: true,
+        });
+    }
+    getFormattedPrice(value) {
+        return convertToLocaleCurrency({
+            value,
+            locale: this.locale,
+            currency: this.currency,
+            isSmallestCurrencyUnit: true,
+        });
+    }
+    handleCheckout() {
+        fireInternalEvent(this, "checkout-requested", {});
+    }
+    handleRemoveItem(reservationId) {
+        if (this.basket?.value) {
+            this.basket.value.removeItem({ reservationId, apiRequest: true });
+        }
+    }
+    renderCheckoutButton() {
+        if (this.checkout && this.basket?.value && this.basket.value.quantity > 0) {
+            return html `
+        <coras-button
+          slot="button"
+          @click=${this.handleCheckout}
+          variant="primary"
+          data-testid="checkout-button"
+        >
+          ${msg("Checkout now")}
+        </coras-button>
+      `;
+        }
+        return null;
+    }
+    renderTickets(tickets, totalTickets, reservationTotalPrice) {
+        if (!tickets || tickets.length === 0) {
+            const pricePerTicket = this.getFormattedPrice(reservationTotalPrice / totalTickets);
+            const totalPrice = this.getFormattedPrice(reservationTotalPrice);
+            return html `
+        <coras-basket-item-ticket
+          slot="tickets"
+          ticket-count="${totalTickets}"
+          ticket-name="${msg("Tickets")}"
+          price="${pricePerTicket}"
+          total-price="${totalPrice}"
+        ></coras-basket-item-ticket>
+      `;
+        }
+        const ticketGroups = new Map();
+        tickets.forEach((ticket) => {
+            const groupKey = ticket.price_type_id || msg("Ticket");
+            if (!ticketGroups.has(groupKey)) {
+                ticketGroups.set(groupKey, {
+                    count: 0,
+                    ticket: ticket,
+                    totalPrice: 0,
+                });
+            }
+            const group = ticketGroups.get(groupKey);
+            group.count += 1;
+            if (ticket.full_price !== undefined) {
+                group.totalPrice += ticket.full_price;
+            }
+        });
+        if (ticketGroups.size === 1) {
+            return html ``;
+        }
+        return html `
+      ${Array.from(ticketGroups.values()).map((group) => {
+            const ticket = group.ticket;
+            const ticketCount = group.count;
+            const ticketName = ticket.name || msg("Ticket");
+            let ticketPrice = "";
+            if (ticket.full_price !== undefined) {
+                ticketPrice = this.getFormattedPrice(ticket.full_price);
+            }
+            const groupTotalPrice = ticket.full_price !== undefined
+                ? this.getFormattedPrice(group.totalPrice)
+                : this.getFormattedPrice(reservationTotalPrice);
+            return html `
+          <coras-basket-item-ticket
+            slot="tickets"
+            ticket-count="${ticketCount}"
+            ticket-name="${ticketName}"
+            price="${ticketPrice}"
+            total-price="${groupTotalPrice}"
+          ></coras-basket-item-ticket>
+        `;
+        })}
+    `;
+    }
+    getSeatInfo(reservation) {
+        const seatInfo = [];
+        if (reservation.tickets) {
+            for (const ticket of reservation.tickets) {
+                if ("section" in ticket && ticket.section) {
+                    seatInfo.push(`Section: ${ticket.section}`);
+                }
+                if ("row_name" in ticket && ticket.row_name) {
+                    seatInfo.push(`Row: ${ticket.row_name}`);
+                }
+                if ("seat_name" in ticket && ticket.seat_name) {
+                    seatInfo.push(`Seat: ${ticket.seat_name}`);
+                }
+            }
+        }
+        return seatInfo;
+    }
+    renderBasketItems() {
+        if (!this.basket?.value?.items || this.basket.value.items.length === 0) {
+            return html `<coras-basket-empty></coras-basket-empty>`;
+        }
+        return html `
+      ${this.basket.value.items.map((reservation) => {
+            const date = reservation.start_datetime
+                ? formatDateTimeForDisplay({
+                    dateTime: reservation.start_datetime,
+                    timezone: reservation.timezone,
+                    locale: this.locale,
+                }, {
+                    includeYear: true,
+                    shortFormat: true,
+                })
+                : "";
+            const time = reservation.start_datetime
+                ? formatTimeForDisplay({
+                    dateTime: reservation.start_datetime,
+                    timezone: reservation.timezone,
+                    locale: this.locale,
+                })
+                : "";
+            const imageUrl = reservation.images
+                ? Object.values(reservation.images)[0] || ""
+                : "";
+            const seatInfo = this.getSeatInfo(reservation);
+            const ticketsHtml = this.renderTickets(reservation.tickets || [], reservation.number_of_tickets, reservation.total_price);
+            return html `
+          <coras-basket-item
+            assets-url="${this.assetsURL}"
+            name="${`${reservation.number_of_tickets} ${reservation.number_of_tickets === 1
+                ? msg("ticket for")
+                : msg("tickets for")} ${reservation.attraction_name}`}"
+            image="${imageUrl}"
+            date="${date}"
+            time="${time}"
+            quantity="${reservation.number_of_tickets}"
+            price="${this.getFormattedPrice(reservation.total_price / reservation.number_of_tickets)}"
+            total-price="${this.getFormattedPrice(reservation.total_price)}"
+            expires-in="${reservation.expires_in}"
+          >
+            ${seatInfo.length > 0
+                ? html `
+                  <div slot="details" class="seat-info">
+                    ${seatInfo.join(" | ")}
+                  </div>
+                `
+                : html ``}
+            ${ticketsHtml}
+            <coras-icon
+              slot="remove-button"
+              icon="delete"
+              assets-url="${this.assetsURL}"
+              @click=${(e) => {
+                e.stopPropagation();
+                this.handleRemoveItem(reservation.reservation_id);
+            }}
+            ></coras-icon>
+          </coras-basket-item>
+        `;
+        })}
+    `;
+    }
+    render() {
+        const loyalty = this.basket?.value?.loyalty;
+        const payAmount = loyalty
+            ? Number(Object.values(loyalty.pay)[0] ?? 0)
+            : NaN;
+        const hasTokens = !isNaN(payAmount) && payAmount > 0;
+        const formattedFidaAmount = hasTokens
+            ? new Intl.NumberFormat(this.locale).format(payAmount)
+            : "";
+        const earnAmount = loyalty
+            ? Number(Object.values(loyalty.earn)[0] ?? 0)
+            : NaN;
+        const hasEarnTokens = !isNaN(earnAmount) && earnAmount > 0;
+        const formattedEarnTokensAmount = hasEarnTokens
+            ? new Intl.NumberFormat(this.locale).format(earnAmount)
+            : "";
+        return html `
+      <coras-basket-items
+        ?expanded=${this.expanded}
+        ?checkout=${this.checkout}
+        ?loading=${this.basket?.value?.status === TaskStatus.PENDING}
+        quantity=${this.basket?.value?.quantity || 0}
+        price="${this.getFormattedPrice(this.basket?.value?.price || 0)}"
+        assets-url="${this.assetsURL}"
+        currency="${this.currency}"
+        crypto-price="${formattedFidaAmount}"
+        crypto-earn="${formattedEarnTokensAmount}"
+      >
+        ${this.renderBasketItems()} ${this.renderCheckoutButton()}
+      </coras-basket-items>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CorasBasket.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasBasket.prototype, "checkout", void 0);
+__decorate([
+    consume({ context: localeContext, subscribe: true })
+], CorasBasket.prototype, "locale", void 0);
+__decorate([
+    consume({ context: currencyContext, subscribe: true })
+], CorasBasket.prototype, "currency", void 0);
+__decorate([
+    consume({ context: assetsURLContext, subscribe: true })
+], CorasBasket.prototype, "assetsURL", void 0);
+CorasBasket = __decorate([
+    localized()
+], CorasBasket);
+export { CorasBasket };

package/dist/containers/basket/basket.d.ts

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

package/dist/containers/basket/basket.js

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

package/dist/containers/footer/footer.component.d.ts

@@ -0,0 +1,8 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../components/footer-menu/footer-menu.js";
+import "../../components/footer-menu/footer-menu-item/footer-menu-item.js";
+export declare class CorasFooter extends LitElement {
+    static styles: CSSResultGroup;
+    private _pageDispatch;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/containers/footer/footer.component.js

@@ -0,0 +1,65 @@
+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 { localized, msg } from "@lit/localize";
+import { consume } from "@lit/context";
+import "../../components/footer-menu/footer-menu.js";
+import "../../components/footer-menu/footer-menu-item/footer-menu-item.js";
+import styles from "./footer.styles.js";
+import { pageDispatchContext, } from "../../contexts/events.context.js";
+let CorasFooter = class CorasFooter extends LitElement {
+    static { this.styles = styles; }
+    render() {
+        return html `
+      <div class="container">
+        <coras-footer-menu>
+          <coras-footer-menu-item
+            @click=${() => this._pageDispatch?.({
+            page: "help",
+            content: "terms-and-conditions",
+        })}
+          >
+            ${msg("Terms & Conditions")}
+          </coras-footer-menu-item>
+          <coras-footer-menu-item
+            @click=${() => this._pageDispatch?.({
+            page: "help",
+            content: "privacy-policy",
+        })}
+          >
+            ${msg("Privacy")}
+          </coras-footer-menu-item>
+          <coras-footer-menu-item
+            @click=${() => this._pageDispatch?.({ page: "help", content: "cookies" })}
+          >
+            ${msg("Cookies")}
+          </coras-footer-menu-item>
+          <coras-footer-menu-item
+            href="https://coras.io/contact"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            ${msg("Partner with Coras")}
+          </coras-footer-menu-item>
+          <coras-footer-menu-item
+            slot="right"
+            @click=${() => this._pageDispatch?.({ page: "help" })}
+          >
+            ${msg("Help Centre")}
+          </coras-footer-menu-item>
+        </coras-footer-menu>
+      </div>
+    `;
+    }
+};
+__decorate([
+    consume({ context: pageDispatchContext })
+], CorasFooter.prototype, "_pageDispatch", void 0);
+CorasFooter = __decorate([
+    localized()
+], CorasFooter);
+export { CorasFooter };

package/dist/containers/footer/footer.d.ts

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

package/dist/containers/footer/footer.js

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

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

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

package/dist/containers/footer/footer.styles.js

@@ -0,0 +1,31 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --footer-background: var(--coras-footer-background-color);
+    --footer-text-color: var(--coras-footer-text-color);
+
+    background-color: var(--footer-background);
+
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .container {
+    container-type: inline-size;
+    max-width: var(--coras-footer-max-width);
+    margin: 0 auto;
+    width: 100%;
+    padding: var(--coras-footer-padding);
+    pointer-events: auto;
+
+    coras-footer-menu-item {
+      --footer-menu-item-color: var(
+        --coras-footer-link-color,
+        var(--footer-text-color)
+      );
+    }
+  }
+`;

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

@@ -0,0 +1,102 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../components/button/button.js";
+import "../../components/icon/icon.js";
+import "../../components/input-field/input-field.js";
+import "../../components/flag-icon/flag-icon.js";
+import "../../components/drawer/drawer.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/basket-mobile/basket-mobile.js";
+import "../../components/currencies-list/currencies-list.js";
+import "../../components/locales-list/locales-list.js";
+import "../../components/select-list/select-list.js";
+import "../../components/select-list/select-option/select-option.js";
+import "../../components/mobile-menu-item/mobile-menu-item.js";
+import "../../components/search-button/search-button.js";
+import "../../containers/basket/basket.js";
+import type { SupportedCurrencies, SupportedLocales } from "../../core/types/index.js";
+import { DrawerSubmenu } from "./navbar.utils.js";
+import { PageDispatchInput } from "../../contexts/events.context.js";
+import { SearchMixinInterface } from "../../mixins/search-mixin/types.js";
+import { PageName } from "../../core/types/shared.js";
+import { paths } from "../../core/types/api-schema.js";
+import { Client } from "openapi-fetch";
+declare const CorasNavBar_base: import("../../contexts/utils.js").Constructor<SearchMixinInterface> & typeof LitElement;
+export declare class CorasNavBar extends CorasNavBar_base implements SearchMixinInterface {
+    static styles: CSSResultGroup;
+    assetsURL: string;
+    searchOnly: boolean;
+    showLanguageSelector: boolean;
+    showCurrencySelector: boolean;
+    showBasket: boolean;
+    showSearch: boolean;
+    logo?: string;
+    locale: SupportedLocales;
+    locales: SupportedLocales[];
+    currency: SupportedCurrencies;
+    currencies: SupportedCurrencies[];
+    searchValue: string;
+    distributorID: string;
+    client: Client<paths>;
+    private isCurrenciesDropdownOpen;
+    private isLocalesDropdownOpen;
+    protected isSearchDropdownOpen: boolean;
+    protected currentMobileSubmenu: DrawerSubmenu | null;
+    protected isMobileDrawerOpen: boolean;
+    currentPage: PageName;
+    dispatchPageUpdate: (params: PageDispatchInput) => void;
+    private get shouldRenderMobileMenu();
+    private basket;
+    private _wasMobile;
+    private handleResize;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    private toggleCurrenciesDropdown;
+    private handleCurrenciesDropdownClose;
+    private handleCurrenciesOptionClicked;
+    private toggleLocalesDropdown;
+    private handleLocalesDropdownClose;
+    private handleLocalesOptionClicked;
+    private handleCheckout;
+    private isMobile;
+    private toggleBasketDropdown;
+    private handleBasketDropdownClose;
+    private toggleSearchDropdown;
+    private handleSearchDropdownClose;
+    private handleSearchOptionClicked;
+    private handleSearchMoreOptionClicked;
+    private setCurrentMobileSubmenu;
+    private handleSubmenuClose;
+    private handleMobileDrawerClosed;
+    private toggleMobileDrawer;
+    private handleSearchInputChange;
+    getSearchTerm(): string;
+    private renderCurrenciesOptions;
+    private renderCurrenciesDropdown;
+    private renderLocalesOptions;
+    private renderLocalesDropdown;
+    private renderBasketTrigger;
+    private renderBasketDropdown;
+    private renderBasket;
+    private renderBasketModal;
+    private renderSearchInput;
+    private renderRecentlySearchedItems;
+    private renderSearchItems;
+    private renderSearchResults;
+    private renderSearch;
+    private renderLocalesList;
+    private renderCurrencyList;
+    private renderMobileSearchInput;
+    private renderMobileSearchResults;
+    private renderMobileSearch;
+    private get hasBasketItems();
+    private renderMenu;
+    private renderMobileMenu;
+    private renderMobileMenuIcon;
+    private renderReturnButton;
+    private renderMobileMenuDrawer;
+    private renderBrand;
+    private renderSearchOnlyHeader;
+    private renderFullHeader;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};