@coras-io/embed 0.1.0

package/dist/views/details-page/details-page.utilts.js

@@ -0,0 +1,188 @@
+import { differenceInCalendarDays, eachDayOfInterval, format, parseISO, } from "date-fns";
+import { toZonedTime } from "date-fns-tz";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { capitalize } from "../../core/utils/text.js";
+import { formatDateTimeWithTimezone, groupItemsByTime, sortTimeStrings, } from "../../core/utils/datetime.js";
+export const formatDateWithTimezone = ({ dateString, timezone, formatString = "d MMM yyyy", timeFormatString = "d MMM yyyy HH:mm", includeTime = false, }) => {
+    return formatDateTimeWithTimezone({
+        dateString,
+        timezone,
+        formatString,
+        timeFormatString,
+        includeTime,
+    });
+};
+export const getCurrentMonth = (date, currentMonth) => {
+    if (!currentMonth) {
+        return format(parseISO(date), "yyyy-MM");
+    }
+    return currentMonth;
+};
+export const getTotalTicketsCount = (selectedPriceTypes) => {
+    return Object.values(selectedPriceTypes).reduce((total, count) => total + count, 0);
+};
+export const getTicketsAmount = (id, selectedPriceTypes, maxAmount) => {
+    const ticketAmount = selectedPriceTypes[id] ?? 0;
+    if (maxAmount !== null && ticketAmount > maxAmount) {
+        return maxAmount;
+    }
+    else if (ticketAmount < 0) {
+        return 0;
+    }
+    return ticketAmount;
+};
+export const getTicketSelectorLabel = (priceTypes, selectedPriceTypes, apiResponse) => {
+    if (!apiResponse) {
+        return "";
+    }
+    if (apiResponse.attraction_type === "THEATER") {
+        const response = apiResponse;
+        return priceTypes.reduce((acc, { price_type_id: id, name }) => {
+            const maxBookingSize = response?.attraction.max_tickets_per_order;
+            const currentNumber = getTicketsAmount(id, selectedPriceTypes, maxBookingSize);
+            if (currentNumber && currentNumber > 0) {
+                return `${acc}${!acc.length ? "" : ","} ${currentNumber} ${capitalize(name.toLowerCase())}`;
+            }
+            else {
+                return acc;
+            }
+        }, "");
+    }
+    if (apiResponse.attraction_type === "TOUR") {
+        const response = apiResponse;
+        return priceTypes.reduce((acc, { price_type_id: id, name }) => {
+            const maxBookingSize = response?.attraction.max_booking_size;
+            const currentNumber = getTicketsAmount(id, selectedPriceTypes, maxBookingSize);
+            if (currentNumber && currentNumber > 0) {
+                return `${acc}${!acc.length ? "" : ","} ${currentNumber} ${capitalize(name.toLowerCase())}`;
+            }
+            else {
+                return acc;
+            }
+        }, "");
+    }
+    return "";
+};
+export const calculateTotalPrice = (tickets) => {
+    if (!tickets || tickets.length === 0) {
+        return 0;
+    }
+    return tickets.reduce((sum, ticket) => {
+        return sum + (ticket.full_price || 0);
+    }, 0);
+};
+export const sumPricesAndFormat = ({ prices, locale, currency, }) => {
+    if (!prices || prices.length === 0) {
+        return convertToLocaleCurrency({
+            value: 0,
+            locale,
+            currency,
+        });
+    }
+    let sum = 0;
+    for (const priceItem of prices) {
+        if (priceItem.min_full_price &&
+            typeof priceItem.min_full_price[currency] === "number") {
+            sum += priceItem.min_full_price[currency];
+        }
+    }
+    return convertToLocaleCurrency({
+        value: sum,
+        locale,
+        currency,
+    });
+};
+export const isSingleDayAvailability = (salePeriods) => {
+    if (!salePeriods || salePeriods.length === 0) {
+        return false;
+    }
+    let totalDays = 0;
+    for (const period of salePeriods) {
+        if (!period.start || !period.end)
+            continue;
+        const start = parseISO(period.start);
+        const end = parseISO(period.end);
+        totalDays += differenceInCalendarDays(end, start) + 1;
+        if (totalDays > 1) {
+            return false;
+        }
+    }
+    return totalDays === 1;
+};
+export const getAvailabilityDays = ({ salePeriods, targetMonth, timezone, }) => {
+    if (!salePeriods?.length || !targetMonth) {
+        return [];
+    }
+    const availableDays = new Set();
+    const [year, month] = targetMonth.split("-").map(Number);
+    for (const period of salePeriods) {
+        if (!period.start || !period.end)
+            continue;
+        const periodStart = parseISO(period.start);
+        const periodEnd = parseISO(period.end);
+        // Convert period to the given timezone
+        const startZoned = toZonedTime(periodStart, timezone);
+        const endZoned = toZonedTime(periodEnd, timezone);
+        // Iterate through each day in the given timezone
+        const intervalDays = eachDayOfInterval({
+            start: startZoned,
+            end: endZoned,
+        });
+        for (const day of intervalDays) {
+            if (day.getFullYear() === year && day.getMonth() + 1 === month) {
+                availableDays.add(day.getDate());
+            }
+        }
+    }
+    return Array.from(availableDays)
+        .sort((a, b) => a - b)
+        .map(String);
+};
+export const formatTicketDetails = ({ prices, locale, currency, }) => {
+    if (!prices || prices.length === 0) {
+        return "";
+    }
+    const details = prices.map((priceItem) => {
+        const count = priceItem.number_of_tickets;
+        const name = priceItem.price_type_name
+            ? capitalize(priceItem.price_type_name.toLowerCase())
+            : "";
+        const unit = priceItem.min_full_price
+            ? priceItem.min_full_price[currency] || 0
+            : 0;
+        const price = convertToLocaleCurrency({
+            value: unit,
+            locale,
+            currency,
+        });
+        return { count, name, price };
+    });
+    return details
+        .map((detail) => `${detail.count} ${detail.name} (${detail.price})`)
+        .join(" ");
+};
+export const groupAvailabilityByTime = (items, locale) => {
+    return groupItemsByTime(items, locale);
+};
+export const sortTimes = (times) => {
+    return sortTimeStrings(times);
+};
+export const scrollToTop = (behavior = "instant") => {
+    window.scrollTo({ top: 0, behavior });
+};
+export const getAvailabilitySummary = (item, currency) => {
+    const totalPrice = item.min_full_price[currency] ?? 0;
+    const totalFee = item.min_booking_fee[currency] ?? 0;
+    const ticketsPrice = totalPrice - totalFee;
+    const firstPriceItem = item.prices?.[0];
+    const pricePerTicket = firstPriceItem?.price?.[currency] ?? 0;
+    const fullPricePerTicket = firstPriceItem?.min_full_price?.[currency] ?? 0;
+    const bookingFeePerTicket = fullPricePerTicket - pricePerTicket;
+    return {
+        totalPrice,
+        pricePerTicket,
+        bookingFeePerTicket,
+        ticketsPrice,
+        totalFee,
+    };
+};

package/dist/views/details-page/partials/theater-description/theater-description.component.d.ts

@@ -0,0 +1,13 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { components } from "../../../../core/types/api-schema.js";
+import "../../../../components/text-section/text-section.js";
+type Attraction = components["schemas"]["AttractionEvent"];
+export declare class CorasTheaterDescription extends LitElement {
+    static styles: CSSResultGroup;
+    attraction?: Attraction;
+    private renderLocation;
+    private renderDescription;
+    private renderSeatMap;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+export {};

package/dist/views/details-page/partials/theater-description/theater-description.component.js

@@ -0,0 +1,76 @@
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { safeUrl } from "@coras-io/brand-tokens";
+import { sanitizeHtml } from "../../../../core/utils/html.js";
+import { isNilOrEmpty } from "../../../../core/utils/text.js";
+import "../../../../components/text-section/text-section.js";
+import styles from "./theater-description.styles.js";
+let CorasTheaterDescription = class CorasTheaterDescription extends LitElement {
+    static { this.styles = styles; }
+    renderLocation(attraction) {
+        const locationParts = [
+            attraction.attraction.location_name,
+            attraction.attraction.address,
+            attraction.attraction.city,
+        ]
+            .filter((part) => !isNilOrEmpty(part))
+            .map((part) => part?.trim());
+        return html `
+      <coras-text-section label=${msg("Location")}>
+        ${locationParts.join(", ")}
+      </coras-text-section>
+    `;
+    }
+    renderDescription(attraction) {
+        if (isNilOrEmpty(attraction.attraction.description)) {
+            return nothing;
+        }
+        return html `
+      <coras-text-section label=${msg("About")}>
+        ${unsafeHTML(sanitizeHtml(attraction.attraction.description.trim()))}
+      </coras-text-section>
+    `;
+    }
+    renderSeatMap(attraction) {
+        // The seat map URL comes from the API; gate its scheme (https/relative/
+        // data:image) before using it as an `img` source so a malformed or
+        // `javascript:` value can't reach the DOM.
+        const seatMap = safeUrl(attraction.attraction.seat_map);
+        if (!seatMap) {
+            return nothing;
+        }
+        return html `
+      <coras-text-section label=${msg("Seatmap")}>
+        <div class="seatmap-disclaimer">
+          ${msg("For illustrative purposes only")}
+        </div>
+        <img src="${seatMap}" alt=${msg("Seat Map")} />
+      </coras-text-section>
+    `;
+    }
+    render() {
+        if (!this.attraction || this.attraction.attraction_type === "TOUR") {
+            return nothing;
+        }
+        return html `
+      ${this.renderLocation(this.attraction)}
+      ${this.renderDescription(this.attraction)}
+      ${this.renderSeatMap(this.attraction)}
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CorasTheaterDescription.prototype, "attraction", void 0);
+CorasTheaterDescription = __decorate([
+    localized()
+], CorasTheaterDescription);
+export { CorasTheaterDescription };

package/dist/views/details-page/partials/theater-description/theater-description.d.ts

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

package/dist/views/details-page/partials/theater-description/theater-description.js

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

package/dist/views/details-page/partials/theater-description/theater-description.styles.d.ts

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

package/dist/views/details-page/partials/theater-description/theater-description.styles.js

@@ -0,0 +1,19 @@
+import { css } from "lit";
+import component from "../../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    row-gap: 3em;
+  }
+
+  .seatmap-disclaimer {
+    font-weight: var(--coras-font-weight-normal);
+    font-size: var(--coras-font-size-base);
+    line-height: 26px;
+    letter-spacing: 0.2px;
+    margin-bottom: 1rem;
+  }
+`;

package/dist/views/details-page/partials/tour-description/tour-description.component.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { components } from "../../../../core/types/api-schema.js";
+import "../../../../components/text-section/text-section.js";
+import "../../../../components/icon-list/icon-list.js";
+import "../../../../components/icon-list/icon-list-item/icon-list-item.js";
+import "../../../../components/accordion/accordion.js";
+import "../../../../components/accordion/accordion-item/accordion-item.js";
+import { SupportedLocales } from "../../../../core/types/index.js";
+type Attraction = components["schemas"]["AttractionTour"];
+export declare class CorasTourDescription extends LitElement {
+    static styles: CSSResultGroup;
+    attraction?: Attraction;
+    assetsURL: string;
+    locale: SupportedLocales;
+    private renderSections;
+    private renderAboutItems;
+    private renderAccordion;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+export {};

package/dist/views/details-page/partials/tour-description/tour-description.component.js

@@ -0,0 +1,155 @@
+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, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { isNilOrEmpty } from "../../../../core/utils/text.js";
+import { formatMinutesDuration } from "../../../../core/utils/time.js";
+import { removeNewlinesAroundTags, normalizeListItems, sanitizeHtml, } from "../../../../core/utils/html.js";
+import "../../../../components/text-section/text-section.js";
+import "../../../../components/icon-list/icon-list.js";
+import "../../../../components/icon-list/icon-list-item/icon-list-item.js";
+import "../../../../components/accordion/accordion.js";
+import "../../../../components/accordion/accordion-item/accordion-item.js";
+import styles from "./tour-description.styles.js";
+let CorasTourDescription = class CorasTourDescription extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        this.locale = "en-US";
+    }
+    static { this.styles = styles; }
+    renderSections(attraction) {
+        if (!attraction) {
+            return nothing;
+        }
+        const sections = [
+            {
+                label: () => msg("About"),
+                value: attraction.attraction.summary,
+                items: true,
+            },
+            {
+                label: () => msg("Highlights"),
+                value: attraction.attraction.highlights,
+                items: false,
+            },
+            {
+                label: () => msg("Itinerary"),
+                value: attraction.attraction.itinerary,
+                items: false,
+            },
+        ];
+        return html `
+      ${sections.map((section) => !isNilOrEmpty(section.value)
+            ? html `
+              <coras-text-section label=${section.label()}>
+                ${section.items ? this.renderAboutItems() : nothing}
+                ${unsafeHTML(sanitizeHtml(normalizeListItems(removeNewlinesAroundTags(section.value.trim()))))}
+              </coras-text-section>
+            `
+            : nothing)}
+    `;
+    }
+    renderAboutItems(attraction) {
+        if (!attraction) {
+            return nothing;
+        }
+        const aboutItems = [
+            {
+                icon: "clock",
+                value: attraction.attraction.duration,
+                content: () => {
+                    const duration = attraction.attraction.duration;
+                    if (duration) {
+                        return html `${msg("Duration")}
+            ${formatMinutesDuration(duration, this.locale)}`;
+                    }
+                    return nothing;
+                },
+            },
+        ];
+        return html `
+      <coras-icon-list>
+        ${aboutItems.map((item) => item.value
+            ? html `
+                <coras-icon-list-item
+                  assets-url="${this.assetsURL}"
+                  icon="${item.icon}"
+                >
+                  ${item.content()}
+                </coras-icon-list-item>
+              `
+            : nothing)}
+      </coras-icon-list>
+    `;
+    }
+    renderAccordion(attraction) {
+        if (!attraction) {
+            return nothing;
+        }
+        const accordionItems = [
+            {
+                label: () => msg("What's included"),
+                value: attraction.attraction.included,
+            },
+            {
+                label: () => msg("What's excluded"),
+                value: attraction.attraction.excluded,
+            },
+            {
+                label: () => msg("Departure Point"),
+                value: attraction.attraction.departure_point,
+            },
+            {
+                label: () => msg("Please note"),
+                value: attraction.attraction.please_note,
+            },
+            {
+                label: () => msg("Cancellation"),
+                value: attraction.attraction.cancellation_policy,
+            },
+        ];
+        return html `
+      <coras-accordion>
+        ${accordionItems.map((item) => !isNilOrEmpty(item.value)
+            ? html `
+                <coras-accordion-item
+                  assets-url="${this.assetsURL}"
+                  label=${item.label()}
+                >
+                  ${unsafeHTML(sanitizeHtml(normalizeListItems(item.value.trim())))}
+                </coras-accordion-item>
+              `
+            : nothing)}
+      </coras-accordion>
+    `;
+    }
+    render() {
+        if (!this.attraction || this.attraction.attraction_type === "THEATER") {
+            return nothing;
+        }
+        return html `
+      ${this.renderSections(this.attraction)}
+      ${this.renderAccordion(this.attraction)}
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CorasTourDescription.prototype, "attraction", void 0);
+__decorate([
+    property({ type: String })
+], CorasTourDescription.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: String })
+], CorasTourDescription.prototype, "locale", void 0);
+CorasTourDescription = __decorate([
+    localized()
+], CorasTourDescription);
+export { CorasTourDescription };

package/dist/views/details-page/partials/tour-description/tour-description.d.ts

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

package/dist/views/details-page/partials/tour-description/tour-description.js

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

package/dist/views/details-page/partials/tour-description/tour-description.styles.d.ts

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

package/dist/views/details-page/partials/tour-description/tour-description.styles.js

@@ -0,0 +1,11 @@
+import { css } from "lit";
+import component from "../../../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    row-gap: 3em;
+  }
+`;

package/dist/views/help-page/help-page.component.d.ts

@@ -0,0 +1,74 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+import "../../components/tabs/tabs.js";
+import "../../components/tab/tab.js";
+import "../../components/tab-panel/tab-panel.js";
+import "../../components/accordion/accordion.js";
+import "../../components/accordion/accordion-item/accordion-item.js";
+import "../../components/input-field/input-field.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/select-list/select-list.js";
+import "../../components/select-list/select-option/select-option.js";
+import "../../components/icon/icon.js";
+import "../../components/message-card/message-card.js";
+import "../../components/button/button.js";
+import "../../components/dialog/dialog.js";
+import "../../components/layout/layout.js";
+import { HelpPageParamsEvent } from "../../core/pages.js";
+declare const CorasHelpPage_base: import("../../contexts/utils.js").Constructor<{
+    apiHost: string;
+    distributorID: string;
+    assetsURL: string;
+    currency: import("../../index.js").SupportedCurrencies;
+    currencies: import("../../index.js").SupportedCurrencies[];
+    locale: import("../../index.js").SupportedLocales;
+    locales: import("../../index.js").SupportedLocales[];
+    loyaltyPoints: boolean;
+    client: import("openapi-fetch").Client<import("../../core/types/api-schema.js").paths>;
+    getPageProperties(): HelpPageParamsEvent;
+    dispatchPageUpdate(params: import("../../contexts/events.context.js").PageDispatchInput): void;
+}> & typeof LitElement;
+/**
+ * Help page component for FAQs, contact form, and policy pages.
+ *
+ * @fires coras:navigate - Dispatched when navigating away or opening an external link
+ * @fires coras:state-change - Dispatched when the help content tab changes
+ */
+export declare class CorasHelpPage extends CorasHelpPage_base {
+    static styles: CSSResultGroup;
+    currentPage: "help";
+    getPageProperties(): HelpPageParamsEvent;
+    private formValues;
+    private formErrors;
+    private submissionAttempts;
+    private _content;
+    get content(): string;
+    set content(value: string | undefined);
+    private subjectSelectLabel;
+    private subjectDropdownOpen;
+    private showModal;
+    processing: boolean;
+    private formElement;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    private helpTabTask;
+    private subjectsTask;
+    private handleFormValueChange;
+    private validateField;
+    private validateForm;
+    private handleSubjectSelect;
+    private toggleSubjectDropdown;
+    private closeSubjectDropdown;
+    private handleModalClose;
+    private handleTabChange;
+    private renderFaqAccordion;
+    private renderAttractionsTicketsTab;
+    private renderMusicTicketsTab;
+    private renderTheatreTicketsTab;
+    private onLinkClick;
+    private renderSportTicketsTab;
+    private renderInputField;
+    private renderSubjectField;
+    private renderInfoContent;
+    private renderContactForm;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};