@coras-io/embed 0.1.0

package/dist/views/search-page/search-page.component.js

@@ -0,0 +1,358 @@
+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, state } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { msg, str, localized } from "@lit/localize";
+import { LocationSearchMixin } from "../../mixins/location-search/location-search.js";
+import { BaseMixin } from "../../mixins/base.mixin.js";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { clientContext } from "../../contexts/client.context.js";
+import { format, formatISO } from "date-fns";
+import { query } from "lit/decorators/query.js";
+import { removeHtmlTags } from "../../core/utils/html.js";
+import { truncate } from "../../core/utils/text.js";
+import { debounce } from "../../core/utils/function.js";
+import styles from "./search-page.styles.js";
+import "../../components/attraction-card/long/attraction-long-card.js";
+import "../../components/button/button.js";
+import "../../components/loading-spinner/loading-spinner.js";
+import "../../components/layout/layout.js";
+import "../../components/breadcrumbs/breadcrumbs.js";
+import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
+import { Task, TaskStatus } from "@lit/task";
+import { apiGet, withErrorHandling } from "../../core/api/queries.js";
+import { adaptPresetImages } from "../../core/images/preset-adapter.js";
+import { ErrorModalMixin } from "../../mixins/error-modal.mixin.js";
+import { getLocale, setLocale } from "../../core/i18n/localization.js";
+/**
+ * Search page component for displaying search results.
+ *
+ * @fires coras:navigate - Dispatched when navigating to a result page
+ * @fires coras:state-change - Dispatched when search parameters change
+ */
+let CorasSearchPage = class CorasSearchPage extends ErrorModalMixin(LocationSearchMixin(BaseMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        this.currentPage = "search";
+        this.startDate = "";
+        this.search = "";
+        this.page = 0;
+        this.pageSize = 10;
+        this.hasMore = true;
+        this.attractions = [];
+        this._isFirstUpdate = true;
+        this.attractionsSearchTask = new Task(this, {
+            task: async ([search, locale, currency, page, size, startDate]) => {
+                const dateStart = startDate || format(new Date(), "yyyy-MM-dd");
+                const { data } = await withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale,
+                    endpoint: "/{api_version}/attractions",
+                    query: {
+                        date_start: dateStart,
+                        search_term: search,
+                        language_code: locale.split("-")[0],
+                        currency,
+                        page,
+                        size,
+                    },
+                }));
+                if (data) {
+                    this.hasMore = (page + 1) * size < (data.total || 0);
+                    if (page === 0) {
+                        this.attractions = data.results || [];
+                    }
+                    else {
+                        this.attractions = [...this.attractions, ...(data.results || [])];
+                    }
+                }
+                else {
+                    this.hasMore = false;
+                    this.attractions = page === 0 ? [] : this.attractions;
+                }
+                return data;
+            },
+            args: () => [
+                this.search,
+                this.locale,
+                this.currency,
+                this.page,
+                this.pageSize,
+                this.startDate,
+            ],
+        });
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    getPageProperties() {
+        return {
+            page: "search",
+            currency: this.currency,
+            locale: this.locale,
+            search: this.search,
+        };
+    }
+    renderBreadcrumbs() {
+        const firstResult = this.attractions[0];
+        if (!this.search || !firstResult)
+            return nothing;
+        const location = firstResult.location;
+        if (!location)
+            return nothing;
+        const cityName = location.location_type === "city" ? location.name : null;
+        const citySlug = location.location_type === "city" ? location.slug : null;
+        const country = location.location_type === "city"
+            ? location.parent_location
+            : location.location_type === "country"
+                ? location
+                : null;
+        const countryName = country?.name;
+        const countrySlug = country?.slug;
+        const handleCountryClick = () => {
+            if (!countrySlug)
+                return;
+            this.dispatchPageUpdate({
+                page: "landing",
+                country: countrySlug,
+                city: "",
+            });
+        };
+        const handleCityClick = () => {
+            if (!countrySlug || !citySlug)
+                return;
+            this.dispatchPageUpdate({
+                page: "landing",
+                country: countrySlug,
+                city: citySlug,
+            });
+        };
+        return html `
+      <coras-breadcrumbs assets-url="${this.assetsURL}">
+        ${countryName
+            ? html `<coras-breadcrumb-item @click=${handleCountryClick} clickable>
+              ${countryName}
+            </coras-breadcrumb-item>`
+            : nothing}
+        ${cityName
+            ? html `<coras-breadcrumb-item @click=${handleCityClick} clickable>
+              ${cityName}
+            </coras-breadcrumb-item>`
+            : nothing}
+        <coras-breadcrumb-item> ${this.search} </coras-breadcrumb-item>
+      </coras-breadcrumbs>
+    `;
+    }
+    renderTitle() {
+        return html `
+      <h3 class="results-title">
+        ${msg(str `Showing results for ‘${this.search}’`)}
+      </h3>
+    `;
+    }
+    loadMoreResults() {
+        if (this.hasMore &&
+            this.attractionsSearchTask.status !== TaskStatus.PENDING) {
+            this.page++;
+        }
+    }
+    setupIntersectionObserver() {
+        if (this.sentinelElement) {
+            if (!this.observer) {
+                this.observer = new IntersectionObserver((entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting &&
+                            this.hasMore &&
+                            this.attractionsSearchTask.status !== TaskStatus.PENDING) {
+                            this.loadMoreResults();
+                        }
+                    });
+                }, { rootMargin: "0px 0px 50% 0px", threshold: 0.1 });
+            }
+            this.observer.observe(this.sentinelElement);
+        }
+    }
+    cleanupIntersectionObserver() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+    }
+    resetSearch() {
+        this.page = 0;
+        this.attractions = [];
+        this.hasMore = true;
+        this.cleanupIntersectionObserver();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Debounced search handler to avoid multiple API calls when search criteria change rapidly
+        this.debouncedSearchHandler = debounce({ delay: 300 }, () => {
+            this.resetSearch();
+            this.attractionsSearchTask.run();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupIntersectionObserver();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (getLocale() !== this.locale) {
+            setLocale(this.locale);
+        }
+        this.setupIntersectionObserver();
+        if (!this.hasMore && this.observer) {
+            this.cleanupIntersectionObserver();
+        }
+        const searchCriteriaChanged = [
+            "locale",
+            "currency",
+            "country",
+            "city",
+            "search",
+            "startDate",
+        ].some((prop) => changedProperties.has(prop));
+        if (searchCriteriaChanged && !this._isFirstUpdate) {
+            this.debouncedSearchHandler();
+        }
+        this._isFirstUpdate = false;
+    }
+    renderAttractions() {
+        if (this.attractionsSearchTask.status === TaskStatus.ERROR &&
+            this.attractions.length === 0) {
+            this.showErrorModalOnce();
+            return html ``;
+        }
+        if (this.page === 0 &&
+            this.attractionsSearchTask.status === TaskStatus.PENDING) {
+            return html `
+        <div class="loading-container">
+          <coras-loading-spinner size="large"></coras-loading-spinner>
+        </div>
+      `;
+        }
+        if (this.attractions.length === 0 &&
+            this.attractionsSearchTask.status === TaskStatus.COMPLETE) {
+            return html `
+        ${this.renderTitle()} ${this.renderBreadcrumbs()}
+        <div class="empty-container">
+          <p>${msg("No attractions found for your criteria.")}</p>
+        </div>
+      `;
+        }
+        return html `
+      ${this.renderTitle()} ${this.renderBreadcrumbs()}
+
+      <div class="cards">
+        ${this.attractions.map((result) => html `
+            <coras-attraction-long-card
+              .images=${adaptPresetImages(result.images)}
+              ?label=${false}
+              name=${result.attraction_name}
+              rating=${result.rating || 0}
+              price=${convertToLocaleCurrency({
+            value: result.min_price[this.currency] || 0,
+            locale: this.locale,
+            currency: this.currency,
+        })}
+              description=${truncate({
+            text: removeHtmlTags(result.description || ""),
+        })}
+              date=${result.upcoming_instances[0] ||
+            formatISO(new Date(), { representation: "date" })}
+              timezone=${result.timezone || ""}
+              locale=${this.locale}
+              @click=${() => this.handleAttractionClick(result.attraction_id)}
+            >
+            </coras-attraction-long-card>
+          `)}
+      </div>
+    `;
+    }
+    handleAttractionClick(attractionId) {
+        this.dispatchPageUpdate({
+            page: "details",
+            id: attractionId,
+        });
+    }
+    renderBottomSection() {
+        const isLoading = this.attractionsSearchTask.status === TaskStatus.PENDING && this.page > 0;
+        return html `
+      <div class="bottom-section">
+        <div class="sentinel"></div>
+        ${isLoading
+            ? html `
+              <div class="loading-more-container">
+                <coras-loading-spinner size="small"></coras-loading-spinner>
+              </div>
+            `
+            : html `
+              <coras-button
+                class="back-to-top-button"
+                variant="text"
+                @click=${() => {
+                window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
+              >
+                ${msg("Back to top")}
+              </coras-button>
+            `}
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <coras-layout ?with-basket=${false}>
+        <slot name="navbar" slot="navbar"></slot>
+        ${this.renderLocationSearchSelector()} ${this.renderAttractions()}
+        ${this.renderBottomSection()}
+        ${this.renderErrorModal({
+            assetsURL: this.assetsURL,
+            buttonLabel: msg("Refresh the page"),
+            onRetry: () => {
+                this.resetSearch();
+                this.attractionsSearchTask.run();
+            },
+            onHelp: () => this.dispatchPageUpdate({ page: "help" }),
+        })}
+        <slot name="footer" slot="footer"></slot>
+      </coras-layout>
+    `;
+    }
+};
+__decorate([
+    consume({ context: clientContext, subscribe: true })
+], CorasSearchPage.prototype, "client", void 0);
+__decorate([
+    property({ type: String, attribute: "start-date" })
+], CorasSearchPage.prototype, "startDate", void 0);
+__decorate([
+    property({ type: String })
+], CorasSearchPage.prototype, "search", void 0);
+__decorate([
+    state()
+], CorasSearchPage.prototype, "page", void 0);
+__decorate([
+    state()
+], CorasSearchPage.prototype, "pageSize", void 0);
+__decorate([
+    state()
+], CorasSearchPage.prototype, "hasMore", void 0);
+__decorate([
+    state()
+], CorasSearchPage.prototype, "attractions", void 0);
+__decorate([
+    query(".sentinel")
+], CorasSearchPage.prototype, "sentinelElement", void 0);
+CorasSearchPage = __decorate([
+    localized()
+], CorasSearchPage);
+export { CorasSearchPage };

package/dist/views/search-page/search-page.d.ts

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

package/dist/views/search-page/search-page.js

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

package/dist/views/search-page/search-page.styles.d.ts

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

package/dist/views/search-page/search-page.styles.js

@@ -0,0 +1,81 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --attractions-title-font-size: var(--coras-font-size-2xl);
+    --attractions-title-line-height: var(--coras-font-size-3xl);
+    --attractions-title-font-weight: var(--coras-font-weight-semibold);
+    --attractions-title-color: var(--coras-color-text);
+    --search-page-max-width: var(--coras-page-max-width);
+
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    height: 100%;
+    grid-row-gap: 2rem;
+  }
+
+  ::slotted([slot="navbar"]) {
+    z-index: 3;
+  }
+
+  coras-layout {
+    .results-title {
+      font-size: var(--attractions-title-font-size);
+      line-height: var(--attractions-title-line-height);
+      font-weight: var(--attractions-title-font-weight);
+      color: var(--attractions-title-color);
+      margin: 2rem 0 2rem 0;
+    }
+
+    .cards {
+      --gutter: 1.25rem;
+
+      display: grid;
+      grid-template-columns: 100%;
+      gap: var(--gutter);
+    }
+  }
+
+  .bottom-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    min-height: 100px;
+  }
+
+  .back-to-top-button {
+    width: fit-content;
+  }
+
+  .loading-container,
+  .error-container,
+  .empty-container,
+  .loading-more-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 200px;
+    width: 100%;
+    gap: 1rem;
+    text-align: center;
+  }
+
+  .loading-more-container {
+    min-height: 100px;
+  }
+
+  @container (max-width: 730px) {
+    coras-layout {
+      .locations {
+        flex-direction: column;
+        gap: 1rem;
+      }
+    }
+  }
+`;

package/dist/views/suggestion-widget/suggestion-widget.component.d.ts

@@ -0,0 +1,33 @@
+import { CSSResultGroup, LitElement } from "lit";
+import "../../components/explore-card/explore-card.js";
+import "../../components/button/button.js";
+import "../../components/carousel/carousel.js";
+import { PageParamsEvent } from "../../core/pages.js";
+declare const CorasSuggestionWidget_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(): PageParamsEvent;
+    dispatchPageUpdate(params: import("../../contexts/events.context.js").PageDispatchInput): void;
+}> & typeof LitElement;
+export declare class CorasSuggestionWidget extends CorasSuggestionWidget_base {
+    static styles: CSSResultGroup;
+    getPageProperties(): PageParamsEvent;
+    limit: number;
+    showExploreCard: boolean;
+    country: string;
+    city: string;
+    private locationName;
+    private handleCardClick;
+    private handleExploreCardClick;
+    private renderAttractions;
+    private renderExploreCard;
+    render(): import("lit").TemplateResult<1>;
+}
+export {};

package/dist/views/suggestion-widget/suggestion-widget.component.js

@@ -0,0 +1,111 @@
+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 { property } from "lit/decorators.js";
+import { localized, msg, str } from "@lit/localize";
+import { ExploreCardVariants } from "../../components/explore-card/explore-card.constants.js";
+import styles from "./suggestion-widget.styles.js";
+import "../../components/explore-card/explore-card.js";
+import "../../components/button/button.js";
+import "../../components/carousel/carousel.js";
+import { getLocationImageURL } from "../../core/images/helpers.js";
+import { IMAGE_BASE_URL } from "../../core/images/constants.js";
+import { BaseMixin } from "../../mixins/base.mixin.js";
+let CorasSuggestionWidget = class CorasSuggestionWidget extends BaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.limit = 4;
+        this.showExploreCard = false;
+        this.country = "";
+        this.city = "";
+        this.locationName = this.country || this.city;
+    }
+    static { this.styles = styles; }
+    getPageProperties() {
+        return {
+            page: "landing",
+            currency: this.currency,
+            locale: this.locale,
+            country: this.country,
+            city: this.city,
+        };
+    }
+    handleCardClick(attractionId) {
+        this.dispatchPageUpdate({
+            page: "details",
+            id: attractionId,
+            locale: this.locale,
+            currency: this.currency,
+        });
+    }
+    handleExploreCardClick(city) {
+        this.dispatchPageUpdate({
+            page: "landing",
+            city,
+            locale: this.locale,
+            currency: this.currency,
+        });
+    }
+    renderAttractions() {
+        return html ``;
+    }
+    renderExploreCard() {
+        const locationName = this.locationName;
+        if (this.showExploreCard) {
+            const imageUrl = getLocationImageURL({
+                baseURL: IMAGE_BASE_URL,
+                country: this.country,
+                city: this.city,
+                imageExtension: "png",
+                params: {
+                    auto: "compress,format",
+                    ar: "2:3",
+                    fit: "crop",
+                },
+            });
+            return html `
+        <coras-explore-card
+          image=${imageUrl}
+          label=${msg(str `Explore ${locationName}`)}
+          variant=${ExploreCardVariants.FULL_SIZE_BG}
+        >
+          <coras-button
+            slot="button"
+            variant="outlined"
+            @click=${() => this.handleExploreCardClick(this.locationName)}
+          >
+            ${msg("See all activities")}
+          </coras-button>
+        </coras-explore-card>
+      `;
+        }
+        return html ``;
+    }
+    render() {
+        const locationName = this.locationName;
+        return html `
+      <h3>${msg(str `Book top rated activities for ${locationName}`)}</h3>
+      <coras-carousel> ${this.renderAttractions()} </coras-carousel>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], CorasSuggestionWidget.prototype, "limit", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-explore-card" })
+], CorasSuggestionWidget.prototype, "showExploreCard", void 0);
+__decorate([
+    property({ type: String })
+], CorasSuggestionWidget.prototype, "country", void 0);
+__decorate([
+    property({ type: String })
+], CorasSuggestionWidget.prototype, "city", void 0);
+CorasSuggestionWidget = __decorate([
+    localized()
+], CorasSuggestionWidget);
+export { CorasSuggestionWidget };

package/dist/views/suggestion-widget/suggestion-widget.d.ts

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

package/dist/views/suggestion-widget/suggestion-widget.js

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

package/dist/views/suggestion-widget/suggestion-widget.styles.d.ts

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

package/dist/views/suggestion-widget/suggestion-widget.styles.js

@@ -0,0 +1,41 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  :host {
+    --suggestion-widget-header-font-size: var(--coras-font-size-2xl);
+    --suggestion-widget-header-font-weight: var(--coras-font-weight-semibold);
+    --suggestion-widget-header-line-height: var(--coras-font-size-3xl);
+    --suggestion-widget-header-color: var(--coras-color-text);
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    h3 {
+      margin: 0;
+      padding-inline: 2.25rem;
+      font-size: var(--suggestion-widget-header-font-size);
+      font-weight: var(--suggestion-widget-header-font-weight);
+      line-height: var(--suggestion-widget-header-line-height);
+      color: var(--suggestion-widget-header-color);
+    }
+
+    coras-attraction-card,
+    coras-explore-card {
+      display: flex;
+      width: 250px;
+      flex-shrink: 0;
+    }
+
+    coras-carousel::part(carousel) {
+      padding-bottom: 2.5rem;
+      padding-inline: 1rem;
+    }
+
+    coras-carousel::part(carousel) {
+      gap: 1.25rem;
+    }
+  }
+`;