@coras-io/embed 0.1.0

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

@@ -0,0 +1,1003 @@
+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 { html, LitElement, nothing } from "lit";
+import { when } from "lit/directives/when.js";
+import { property, state } from "lit/decorators.js";
+import { msg, localized } from "@lit/localize";
+import { Task } from "@lit/task";
+import { consume } from "@lit/context";
+import { addMonths, format, formatISO, parseISO } from "date-fns";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { getDateRangeLabel } from "../../core/i18n/date.js";
+import { PointsMixin } from "../../mixins/points/points.js";
+import { getLocale, setLocale } from "../../core/i18n/localization.js";
+import styles from "./landing-page.styles.js";
+import { MOBILE_SCREEN_BREAKPOINT } from "./landing-page.constants.js";
+import { BaseMixin } from "../../mixins/base.mixin.js";
+import { ErrorModalMixin } from "../../mixins/error-modal.mixin.js";
+import { currentPageContext } from "../../contexts/current-page.context.js";
+import { LocationSearchMixin } from "../../mixins/location-search/location-search.js";
+import "../../components/location-image/location-image.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/locations-results/locations-results.js";
+import "../../components/calendar/dual/dual.js";
+import "../../components/filters-drawer/filters-drawer.js";
+import "../../components/checkbox-group/checkbox-group.js";
+import "../../components/checkbox/checkbox.js";
+import "../../components/button/button.js";
+import "../../components/attraction-card/short/attraction-short-card.js";
+import "../../components/attraction-discovery/attraction-discovery.js";
+import "../../components/attraction-discovery/attraction-discovery-image/attraction-discovery-image.js";
+import "../../components/carousel/carousel.js";
+import "../../components/carousel/carousel-item/carousel-item.js";
+import "../../components/drawer/drawer.js";
+import "../../components/calendar/multi/multi.js";
+import "../../components/tour-ticket-type-selector/tour-ticket-type-selector.js";
+import "../../components/tour-ticket-type-selector/tour-ticket-type/tour-ticket-type.js";
+import "../../components/tour-ticket-type-selector/tour-ticket-counter-button/tour-ticket-counter-button.js";
+import "../../components/sort-dropdown/sort-dropdown.js";
+import "../../components/sort-list/sort-list.js";
+import "../../components/select-list/select-option/select-option.js";
+import "../../components/points/points.js";
+import "../../components/chip/chip.js";
+import "../../components/categories-tree/categories-tree.js";
+import "../../components/breadcrumbs/breadcrumbs.js";
+import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
+import "../../contexts/basket/basket.js";
+import "../../components/layout/layout.js";
+import { apiGet, withErrorHandling } from "../../core/api/queries.js";
+import { addRecentlySelectedSearches } from "../../containers/navbar/navbar.utils.js";
+/**
+ * Landing page component for browsing attractions and experiences.
+ *
+ * @fires coras:navigate - Dispatched when navigating to another page (search result, page navigation)
+ * @fires coras:state-change - Dispatched when in-page params change (filters, sorting, dates)
+ */
+let CorasLandingPage = class CorasLandingPage extends ErrorModalMixin(PointsMixin(LocationSearchMixin(BaseMixin(LitElement)))) {
+    constructor() {
+        super(...arguments);
+        this.currentPage = "landing";
+        this.startDate = "";
+        this.endDate = "";
+        this.sorting = "popularity";
+        this.price = "";
+        this.duration = "";
+        this.categories = "";
+        this.isMobileScreen = false;
+        this.isDateFilterOpen = false;
+        this.isSortingSelectorOpen = false;
+        this.isFiltersDrawerOpened = false;
+        this.selectedMonth = format(new Date(), "yyyy-MM");
+        this.selectedDates = [
+            this.startDate,
+            this.endDate,
+        ];
+        this.selectedPriceOptions = [];
+        this.selectedDurationOptions = [];
+        this._selectedCategories = "";
+        this.activePriceOptions = null;
+        this.activeDurationOptions = null;
+        this.activeCategorySlugs = null;
+        // prevent duplicate writes within a single component lifecycle
+        this.lastSavedRecentValue = null;
+        this.geolocationTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                return withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    endpoint: "/{api_version}/geolocation",
+                    locale: this.locale,
+                }));
+            },
+        });
+        this.filtersTask = new Task(this, {
+            task: async ([locale, currency]) => {
+                return withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    endpoint: "/{api_version}/landing/filters",
+                    locale,
+                    query: {
+                        currency,
+                    },
+                }));
+            },
+            args: () => [this.locale, this.currency],
+        });
+        this.attractionsSearchTask = new Task(this, {
+            task: async ([locale, country, city, startDate, endDate, sorting, duration, price, categories, currency,]) => {
+                return withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale,
+                    endpoint: "/{api_version}/landing",
+                    query: {
+                        date_start: startDate,
+                        date_end: endDate,
+                        city,
+                        country,
+                        sorting,
+                        duration: duration && typeof duration === "string" && duration !== ""
+                            ? duration.split(",").filter(Boolean)
+                            : undefined,
+                        price: (price || undefined),
+                        category: categories && typeof categories === "string" && categories !== ""
+                            ? categories.split(",")
+                            : undefined,
+                        currency,
+                    },
+                }));
+            },
+            args: () => [
+                this.locale,
+                this.country,
+                this.city,
+                this.startDate,
+                this.endDate,
+                this.sorting,
+                this.duration,
+                this.price,
+                this.categories,
+                this.currency,
+            ],
+        });
+        this.sortingTask = new Task(this, {
+            task: async ([locale]) => {
+                return withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale,
+                    endpoint: "/{api_version}/landing/sorting",
+                }));
+            },
+            args: () => [this.locale],
+        });
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    getPageProperties() {
+        return {
+            page: "landing",
+            currency: this.currency,
+            locale: this.locale,
+            country: this.country,
+            city: this.city,
+            startDate: this.startDate,
+            endDate: this.endDate,
+            sort: this.sorting,
+            price: this.price,
+            duration: this.duration,
+            categories: this.categories,
+        };
+    }
+    async firstUpdated(changed) {
+        super.firstUpdated(changed);
+        if (this.country === "" && this.city === "") {
+            await this.geolocationTask.run();
+            if (this.geolocationTask.value?.data) {
+                this.dispatchPageUpdate({
+                    country: this.geolocationTask.value.data.slug,
+                });
+            }
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.isMobileScreen = this.clientWidth < MOBILE_SCREEN_BREAKPOINT;
+        });
+        this.resizeObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (getLocale() !== this.locale) {
+            setLocale(this.locale);
+        }
+        // Record recently viewed location (country or city)
+        if (this.locationsData && (this.country || this.city)) {
+            // Try to find the readable names
+            const matchingCountry = this.locationsData
+                .flatMap((continent) => continent.countries ?? [])
+                .find((country) => country?.slug === this.country);
+            const matchingCity = matchingCountry?.cities?.find((city) => city?.slug === this.city);
+            // Prefer city if present, otherwise country
+            const item = this.city && matchingCity
+                ? { type: "city", value: this.city, name: matchingCity.name }
+                : this.country && matchingCountry
+                    ? {
+                        type: "country",
+                        value: this.country,
+                        name: matchingCountry.name,
+                    }
+                    : null;
+            if (item && item.value && item.value !== this.lastSavedRecentValue) {
+                try {
+                    addRecentlySelectedSearches(item);
+                    this.lastSavedRecentValue = item.value;
+                }
+                catch {
+                    // noop
+                }
+            }
+        }
+        if (changedProperties.has("startDate") ||
+            changedProperties.has("endDate")) {
+            this.selectedDates = [this.startDate, this.endDate];
+            if (changedProperties.get("startDate") &&
+                changedProperties.get("startDate") !== "") {
+                const startDateISO = new Date(changedProperties.get("startDate")).toISOString();
+                this.selectedMonth = format(parseISO(startDateISO), "yyyy-MM");
+            }
+        }
+        if (changedProperties.has("startDate") &&
+            changedProperties.get("startDate") &&
+            changedProperties.get("startDate") !== "") {
+            const startDateISO = new Date(changedProperties.get("startDate")).toISOString();
+            this.selectedMonth = format(parseISO(startDateISO), "yyyy-MM");
+        }
+        if (changedProperties.has("duration")) {
+            this.selectedDurationOptions = this.duration
+                ? this.duration.split(",").filter(Boolean)
+                : [];
+            if (this.activeDurationOptions === null) {
+                this.activeDurationOptions = [...this.selectedDurationOptions];
+            }
+        }
+        if (changedProperties.has("price")) {
+            this.selectedPriceOptions = this.price ? [this.price] : [];
+            if (this.activePriceOptions === null) {
+                this.activePriceOptions = [...this.selectedPriceOptions];
+            }
+        }
+        if (changedProperties.has("categories")) {
+            this.updateActiveFilters();
+        }
+    }
+    toggleDateFilter() {
+        this.isDateFilterOpen = !this.isDateFilterOpen;
+    }
+    handleCalendarMonthChange(event) {
+        this.selectedMonth = event.detail.date;
+        this.requestUpdate();
+    }
+    setSelectedDates(event) {
+        if (this.selectedDates.length === 1) {
+            this.selectedDates = [...this.selectedDates, event.detail.date];
+        }
+        else {
+            this.selectedDates = [event.detail.date];
+        }
+        this.requestUpdate();
+    }
+    renderDateRangeLabel() {
+        const label = getDateRangeLabel(this.startDate, this.endDate, this.locale) ||
+            msg("All dates");
+        return html `${label}`;
+    }
+    updateSelectedDateRangeChanged(e) {
+        this.setSelectedDates(e);
+        if (this.selectedDates.length === 2) {
+            this.dispatchPageUpdate({
+                startDate: this.selectedDates[0],
+                endDate: this.selectedDates[1] || this.selectedDates[0],
+            });
+            this.toggleDateFilter();
+        }
+    }
+    renderDateSelectDropdown() {
+        const variant = !!this.startDate || !!this.endDate ? "primary" : "outlined";
+        const hasSelectedDates = !!this.startDate || !!this.endDate;
+        return html `
+      <coras-dropdown
+        ?open="${this.isDateFilterOpen}"
+        @dropdown-close-request="${this.toggleDateFilter}"
+      >
+        <div slot="trigger" @click=${this.toggleDateFilter}>
+          <coras-button
+            variant=${variant}
+            radius="chip"
+            border-color="light"
+            ?rotate-suffix=${this.isDateFilterOpen && !hasSelectedDates}
+          >
+            <coras-icon
+              slot="prefix"
+              assets-url="${this.assetsURL}"
+              icon="calendar"
+              label="Calendar icon"
+            ></coras-icon>
+            ${hasSelectedDates
+            ? html `
+                  <coras-icon
+                    slot="suffix"
+                    assets-url="${this.assetsURL}"
+                    icon="close"
+                    label="Close icon"
+                    close-icon-style
+                    @click=${this.handleDatesClearIconClicked}
+                  ></coras-icon>
+                `
+            : html `
+                  <coras-icon
+                    slot="suffix"
+                    assets-url="${this.assetsURL}"
+                    icon="keyboard-arrow-down"
+                    label="Arrow down icon"
+                  ></coras-icon>
+                `}
+            ${this.renderDateRangeLabel()}
+          </coras-button>
+        </div>
+        <div class="calendar">
+          <coras-dual-month-calendar
+            assets-url="${this.assetsURL}"
+            locale="${this.locale}"
+            min-date=${format(new Date(), "yyyy-MM")}
+            max-date=${format(addMonths(new Date(), 24), "yyyy-MM")}
+            ?range=${true}
+            selected-month=${this.selectedMonth}
+            .selectedDates=${this.selectedDates}
+            @calendar-month-changed=${this.handleCalendarMonthChange}
+            @date-selected=${this.updateSelectedDateRangeChanged}
+          ></coras-dual-month-calendar>
+        </div>
+      </coras-dropdown>
+    `;
+    }
+    handleDatesClearIconClicked(event) {
+        event.stopPropagation();
+        this.selectedDates = [""];
+        this.dispatchPageUpdate({
+            startDate: "",
+            endDate: "",
+        });
+    }
+    handleDatesResetBtnClicked() {
+        this.selectedDates = [""];
+        this.isDateFilterOpen = false;
+        this.dispatchPageUpdate({
+            startDate: "",
+            endDate: "",
+        });
+    }
+    handleDatesApplyBtnClicked() {
+        this.isDateFilterOpen = false;
+        const startDate = this.selectedDates[0];
+        const endDate = this.selectedDates[1] || this.selectedDates[0];
+        this.dispatchPageUpdate({
+            startDate,
+            endDate,
+        });
+    }
+    renderDateSelectDrawer() {
+        const variant = !!this.startDate || !!this.endDate ? "primary" : "outlined";
+        return html `
+      <coras-button
+        variant=${variant}
+        radius="chip"
+        border-color="light"
+        @click=${this.toggleDateFilter}
+      >
+        ${this.renderDateRangeLabel()}
+      </coras-button>
+
+      <coras-drawer
+        label="Calendar"
+        assets-url="${this.assetsURL}"
+        ?open="${this.isDateFilterOpen}"
+        @modal-closed=${this.toggleDateFilter}
+      >
+        <div class="select-dates-container">
+          <coras-multi-month-calendar
+            locale="en-US"
+            min-date=${format(new Date(), "yyyy-MM")}
+            max-date=${format(addMonths(new Date(), 24), "yyyy-MM")}
+            ?range=${true}
+            selected-month=${this.selectedMonth}
+            .selectedDates=${this.selectedDates}
+            @calendar-month-changed=${this.handleCalendarMonthChange}
+            @date-selected=${this.setSelectedDates}
+          ></coras-multi-month-calendar>
+          <div class="select-dates-actions">
+            <coras-button
+              variant="outlined"
+              border-color="medium"
+              @click=${this.handleDatesResetBtnClicked}
+            >
+              ${msg("Reset")}
+            </coras-button>
+            <coras-button
+              variant="primary"
+              @click=${this.handleDatesApplyBtnClicked}
+            >
+              ${msg("Done")}
+            </coras-button>
+          </div>
+        </div>
+      </coras-drawer>
+    `;
+    }
+    renderDateSelector() {
+        return this.isMobileScreen
+            ? this.renderDateSelectDrawer()
+            : this.renderDateSelectDropdown();
+    }
+    toggleFiltersDrawer() {
+        this.isFiltersDrawerOpened = !this.isFiltersDrawerOpened;
+    }
+    toggleSortingSelector() {
+        this.isSortingSelectorOpen = !this.isSortingSelectorOpen;
+    }
+    getSortingSelectorLabel() {
+        return this.sortingTask.value?.data?.find((item) => item.value === this.sorting)?.label;
+    }
+    handleSortingOptionClick(value) {
+        this.toggleSortingSelector();
+        this.dispatchPageUpdate({
+            sort: value,
+        });
+    }
+    renderSortingSelectorDefault() {
+        if (this.isMobileScreen) {
+            return html ``;
+        }
+        return html `
+      <coras-dropdown
+        ?open=${this.isSortingSelectorOpen}
+        @dropdown-close-request=${this.toggleSortingSelector}
+      >
+        <coras-button
+          slot="trigger"
+          variant="outlined"
+          radius="chip"
+          border-color="light"
+          ?rotate-suffix=${this.isSortingSelectorOpen}
+          @click=${this.toggleSortingSelector}
+        >
+          <coras-icon
+            slot="prefix"
+            assets-url="${this.assetsURL}"
+            icon="sort"
+          ></coras-icon>
+          <coras-icon
+            id="arrow"
+            slot="suffix"
+            assets-url="${this.assetsURL}"
+            icon="keyboard-arrow-down"
+          ></coras-icon>
+          <span data-testid="label" id="label">
+            ${this.getSortingSelectorLabel()}
+          </span>
+        </coras-button>
+
+        <coras-sort-list>
+          ${this.sortingTask.value?.data?.map((item) => html `
+              <coras-select-option
+                key=${item.value}
+                ?selected=${this.sorting === item.value}
+                @click=${() => this.handleSortingOptionClick(item.value)}
+              >
+                ${item.label}
+              </coras-select-option>
+            `)}
+        </coras-sort-list>
+      </coras-dropdown>
+    `;
+    }
+    renderSortingSelectorMobile() {
+        if (!this.isMobileScreen) {
+            return html ``;
+        }
+        return html `<coras-sort-dropdown>
+      ${this.sortingTask.value?.data?.map((item) => html `
+          <coras-select-option
+            key=${item.value}
+            ?selected=${this.sorting === item.value}
+            @click=${() => (this.sorting = item.value)}
+          >
+            ${item.label}
+          </coras-select-option>
+        `)}
+    </coras-sort-dropdown>`;
+    }
+    renderFiltersChip() {
+        const variant = !!this.categories || !!this.duration || !!this.price
+            ? "primary"
+            : "outlined";
+        return html `
+      <coras-button
+        variant=${variant}
+        radius="chip"
+        border-color="light"
+        @click=${this.toggleFiltersDrawer}
+      >
+        ${when(!this.isMobileScreen, () => html `<coras-icon
+              slot="prefix"
+              assets-url="${this.assetsURL}"
+              label="filters"
+              icon="tune"
+            ></coras-icon>`)}
+        ${msg("Filters")}
+      </coras-button>
+    `;
+    }
+    renderActiveFilterChips() {
+        if (this.isMobileScreen) {
+            return html ``;
+        }
+        return html `
+      ${this.activePriceOptions?.map((option) => {
+            return html `
+          <coras-chip
+            variant="primary"
+            assets-url="${this.assetsURL}"
+            @chip-removed=${() => {
+                this.updateSelectedPriceOptions(option);
+                this.afterFilterChipRemove();
+            }}
+          >
+            ${this.getPriceOptionLabel(option)}
+          </coras-chip>
+        `;
+        })}
+      ${this.activeDurationOptions?.map((option) => {
+            return html `
+          <coras-chip
+            variant="primary"
+            assets-url="${this.assetsURL}"
+            @chip-removed=${() => {
+                this.updateSelectedDurationOptions(option);
+                this.afterFilterChipRemove();
+            }}
+          >
+            ${this.getDurationOptionLabel(option)}
+          </coras-chip>
+        `;
+        })}
+      ${this.activeCategorySlugs?.map((slug) => {
+            return html `
+          <coras-chip
+            variant="primary"
+            assets-url="${this.assetsURL}"
+            @chip-removed=${() => {
+                const updatedCategories = this.removeCategorySlug(slug);
+                this.dispatchPageUpdate({
+                    categories: updatedCategories,
+                });
+            }}
+          >
+            ${this.getCategoryName(slug)}
+          </coras-chip>
+        `;
+        })}
+    `;
+    }
+    getPriceOptionLabel(key) {
+        const filters = this.filtersTask.value?.data;
+        if (!filters)
+            return key;
+        const priceFilter = filters.find((filter) => filter.type === "price");
+        return (priceFilter?.options.find((option) => option.value === key)?.label || key);
+    }
+    getDurationOptionLabel(key) {
+        const filters = this.filtersTask.value?.data;
+        if (!filters)
+            return key;
+        const durationFilter = filters.find((filter) => filter.type === "duration");
+        return (durationFilter?.options.find((option) => option.value === key)?.label ||
+            key);
+    }
+    getCategoryName(slug) {
+        const filters = this.filtersTask.value?.data;
+        if (!filters)
+            return slug;
+        const categoryFilters = filters.filter((filter) => filter.type === "category");
+        // Search in main categories first
+        for (const categoryFilter of categoryFilters) {
+            if (categoryFilter.value === slug) {
+                return categoryFilter.label;
+            }
+            // Search in subcategories (options)
+            const subcategory = categoryFilter.options.find((option) => option.value === slug);
+            if (subcategory) {
+                return subcategory.label;
+            }
+        }
+        return slug;
+    }
+    removeCategorySlug(slug) {
+        if (!this.categories)
+            return "";
+        const categorySlugs = this.categories.split(",").filter(Boolean);
+        const updatedSlugs = categorySlugs.filter((s) => s !== slug);
+        return updatedSlugs.join(",");
+    }
+    updateActiveFilters() {
+        this.activePriceOptions = [...this.selectedPriceOptions];
+        this.activeDurationOptions = [...this.selectedDurationOptions];
+        this.activeCategorySlugs = this.categories
+            ? this.categories.split(",").filter(Boolean)
+            : [];
+    }
+    afterFilterChipRemove() {
+        this.updateActiveFilters();
+        this.dispatchPageUpdate({
+            price: this.selectedPriceOptions[0],
+            duration: this.selectedDurationOptions.join(","),
+            categories: this.activeCategorySlugs?.join(",") || "",
+        });
+    }
+    handleFiltersClearBtnClicked() {
+        this.selectedDurationOptions = [];
+        this.selectedPriceOptions = [];
+        this._selectedCategories = "";
+        this.dispatchPageUpdate({
+            categories: "",
+            duration: "",
+            price: "",
+        });
+    }
+    handleFiltersApplyBtnClicked() {
+        this.dispatchPageUpdate({
+            categories: this._selectedCategories,
+            duration: this.selectedDurationOptions.join(","),
+            price: this.selectedPriceOptions[0],
+        });
+        this.toggleFiltersDrawer();
+        this.updateActiveFilters();
+    }
+    updateSelectedDurationOptions(key) {
+        if (this.selectedDurationOptions.includes(key)) {
+            this.selectedDurationOptions = this.selectedDurationOptions.filter((option) => option !== key);
+        }
+        else {
+            this.selectedDurationOptions.push(key);
+        }
+        this.requestUpdate();
+    }
+    renderDurationFilter(durationOptions = []) {
+        return html `<coras-checkbox-group>
+      <span slot="primary">${msg("Duration")}</span>
+      ${durationOptions.map((option) => {
+            return html `<coras-checkbox
+          label=${option.label}
+          variant="main"
+          ?checked=${this.selectedDurationOptions.includes(option.value)}
+          @value-changed=${() => this.updateSelectedDurationOptions(option.value)}
+        ></coras-checkbox>`;
+        })}
+    </coras-checkbox-group>`;
+    }
+    updateSelectedPriceOptions(key) {
+        if (this.selectedPriceOptions.includes(key)) {
+            // If clicking the same option, deselect it (clear all)
+            this.selectedPriceOptions = [];
+        }
+        else {
+            // If clicking a different option, select only that one (single selection)
+            this.selectedPriceOptions = [key];
+        }
+        this.requestUpdate();
+    }
+    renderPriceFilter(priceOptions = []) {
+        return html `<coras-checkbox-group>
+      <span slot="primary">${msg("Price")}</span>
+      ${priceOptions.map((option) => {
+            return html `<coras-checkbox
+          label=${option.label}
+          variant="main"
+          ?checked=${this.selectedPriceOptions.includes(option.value)}
+          @value-changed=${() => this.updateSelectedPriceOptions(option.value)}
+        ></coras-checkbox>`;
+        })}
+    </coras-checkbox-group>`;
+    }
+    transformFiltersToCategories(filters) {
+        const categoryFilters = filters.filter((filter) => filter.type === "category");
+        return categoryFilters.map((categoryFilter, index) => ({
+            id: index + 1,
+            name: categoryFilter.label,
+            slug: categoryFilter.value ||
+                `category-${index}`,
+            media: [],
+            subcategories: categoryFilter.options.map((option, subIndex) => ({
+                id: subIndex + 1000, // Use higher IDs for subcategories to avoid conflicts
+                name: option.label,
+                slug: option.value,
+                media: [],
+                subcategories: [],
+            })),
+        }));
+    }
+    renderCategoriesTree() {
+        return this.filtersTask.render({
+            error: () => html `error`,
+            loading: () => html `loading`,
+            complete: (filters) => {
+                if (!filters.data)
+                    return nothing;
+                const transformedCategories = this.transformFiltersToCategories(filters.data);
+                return html `
+          <coras-categories-tree
+            .categories=${transformedCategories}
+            selectedCategories=${this.categories}
+            @selection-changed=${(event) => {
+                    this._selectedCategories = event.detail;
+                    event.stopPropagation();
+                }}
+          ></coras-categories-tree>
+        `;
+            },
+        });
+    }
+    renderFiltersButtons() {
+        return html `<coras-button
+        slot="reset-action"
+        variant="text"
+        @click=${this.handleFiltersClearBtnClicked}
+        >${msg("Clear all")}</coras-button
+      >
+      <coras-button
+        slot="apply-action"
+        variant="primary"
+        @click=${this.handleFiltersApplyBtnClicked}
+        >${msg("Apply filters")}</coras-button
+      >`;
+    }
+    renderFiltersContent() {
+        return this.filtersTask.render({
+            error: () => html `error`,
+            loading: () => html `loading`,
+            complete: (filters) => {
+                if (!filters.data)
+                    return nothing;
+                const durationFilter = filters.data.find((filter) => filter.type === "duration");
+                const priceFilter = filters.data.find((filter) => filter.type === "price");
+                return html `
+          ${this.renderDurationFilter(durationFilter?.options || [])}
+          ${this.renderPriceFilter(priceFilter?.options || [])}
+          ${this.renderCategoriesTree()}
+        `;
+            },
+        });
+    }
+    renderAttractionsTitle() {
+        if (this.country || this.city) {
+            return html ``;
+        }
+        return html `
+      <h2 class="popular-title">${msg("Popular on our site").toUpperCase()}</h2>
+    `;
+    }
+    renderSections(sections = []) {
+        const sorted = sections.sort((a, b) => {
+            return a.order - b.order;
+        });
+        return sorted.map((section) => {
+            switch (section.type) {
+                case "short-card":
+                    return this.renderAttractionCards(section);
+            }
+        });
+    }
+    renderShowMoreButton(_) {
+        return html `<span class="show-more-button" aria-hidden="true"></span>`;
+        // return html`
+        //   <coras-button
+        //     class="show-more-button"
+        //     variant="text"
+        //     @click=${() =>
+        //       this.dispatchPageUpdate({
+        //         city: params.city || this.city || undefined,
+        //         country: params.country || this.country || undefined,
+        //         categories: params.category?.join(",") || undefined,
+        //         sorting: params.sorting || undefined,
+        //         startDate: params.date_start || undefined,
+        //       })}
+        //   >
+        //     ${msg("Show more")}
+        //   </coras-button>
+        // `;
+    }
+    renderPoints(price) {
+        if (this.calculateRewardPoints) {
+            price = price / 100;
+            const points = this.calculateRewardPoints({ price });
+            return html `<coras-points
+        slot="points"
+        points=${points.toLocaleString("en-GB")}
+        points-logo-url=${this.pointsLogoUrl}
+        points-icon-url=${this.pointsIconUrl}
+        points-unit=${this.pointsUnit}
+      ></coras-points>`;
+        }
+        return html ``;
+    }
+    renderAttractionCards(section) {
+        const currency = this.currency;
+        const locale = this.locale;
+        const cards = section.items;
+        return html `
+      <section>
+        <header class="section-header">
+          <h3>${section.title}</h3>
+          ${this.renderShowMoreButton(section.params)}
+        </header>
+
+        <div class="cards">
+          ${cards.map((card) => {
+            return html `
+              <coras-attraction-short-card
+                .images=${card.images}
+                ?label=${false}
+                name=${card.title}
+                rating=${card.rating || 0}
+                price=${convertToLocaleCurrency({
+                value: card.price[currency],
+                locale,
+                currency,
+            })}
+                category=${card.category.slug}
+                date=${card.date}
+                timezone=${card.timezone}
+                locale=${this.locale}
+                @click=${() => this.dispatchPageUpdate({
+                locale: this.locale,
+                currency: this.currency,
+                page: "details",
+                id: card.id,
+                date: formatISO(parseISO(card.date), {
+                    representation: "date",
+                }),
+            })}
+              >
+                ${this.renderPoints(card.price[currency])}
+              </coras-attraction-short-card>
+            `;
+        })}
+          ${this.renderShowMoreButton(section.params)}
+        </div>
+      </section>
+    `;
+    }
+    renderBreadcrumbs() {
+        if (!this.city || !this.locationsData) {
+            return nothing;
+        }
+        const matchingCountry = this.locationsData
+            .flatMap((continent) => continent.countries ?? [])
+            .find((country) => country?.slug === this.country);
+        if (!matchingCountry) {
+            return nothing;
+        }
+        const matchingCity = matchingCountry.cities?.find((city) => city?.slug === this.city);
+        if (!matchingCity) {
+            return nothing;
+        }
+        const handleCountryClick = () => {
+            this.dispatchPageUpdate({
+                page: "landing",
+                country: this.country,
+                city: "",
+            });
+        };
+        return html `
+      <div class="breadcrumbs-container">
+        <coras-breadcrumbs assets-url="${this.assetsURL}">
+          <coras-breadcrumb-item @click=${handleCountryClick} clickable>
+            ${matchingCountry.name}
+          </coras-breadcrumb-item>
+          <coras-breadcrumb-item> ${matchingCity.name} </coras-breadcrumb-item>
+        </coras-breadcrumbs>
+      </div>
+    `;
+    }
+    renderAttractions() {
+        return this.attractionsSearchTask.render({
+            error: () => {
+                this.showErrorModalOnce();
+                return html ``;
+            },
+            loading: () => html `loading`,
+            complete: (result) => {
+                if (!result.data)
+                    return nothing;
+                return html `
+          <section class="attractions-sections">
+            ${this.renderAttractionsTitle()}
+            ${this.renderSections(result.data || [])}
+          </section>
+        `;
+            },
+        });
+    }
+    render() {
+        return html `
+      <coras-layout with-basket>
+        <slot name="navbar" slot="navbar"></slot>
+        <header class="hero-section">
+          ${this.renderLocationSearchSelector()}
+          <coras-location-image
+            country=${this.country}
+            city=${this.city}
+          ></coras-location-image>
+          <div class="filters">
+            ${this.renderDateSelector()} ${this.renderSortingSelectorDefault()}
+            ${this.renderFiltersChip()}
+            <div class="sorting-dropdown-container">
+              ${this.renderSortingSelectorMobile()}
+            </div>
+            ${this.renderActiveFilterChips()}
+          </div>
+          ${this.renderBreadcrumbs()}
+        </header>
+
+        ${this.renderAttractions()}
+
+        <coras-filters-drawer
+          assets-url="${this.assetsURL}"
+          ?open=${this.isFiltersDrawerOpened}
+          @modal-closed=${this.toggleFiltersDrawer}
+        >
+          ${this.renderFiltersContent()} ${this.renderFiltersButtons()}
+        </coras-filters-drawer>
+
+        ${this.renderErrorModal({
+            assetsURL: this.assetsURL,
+            buttonLabel: msg("Refresh the page"),
+            onRetry: () => this.attractionsSearchTask.run(),
+            onHelp: () => this.dispatchPageUpdate({ page: "help" }),
+        })}
+
+        <slot name="footer" slot="footer"></slot>
+      </coras-layout>
+    `;
+    }
+};
+__decorate([
+    consume({ context: currentPageContext })
+], CorasLandingPage.prototype, "currentPage", void 0);
+__decorate([
+    property({ type: String, attribute: "start-date" })
+], CorasLandingPage.prototype, "startDate", void 0);
+__decorate([
+    property({ type: String, attribute: "end-date" })
+], CorasLandingPage.prototype, "endDate", void 0);
+__decorate([
+    property({ type: String, attribute: "sorting" })
+], CorasLandingPage.prototype, "sorting", void 0);
+__decorate([
+    property({ type: String })
+], CorasLandingPage.prototype, "price", void 0);
+__decorate([
+    property({ type: String })
+], CorasLandingPage.prototype, "duration", void 0);
+__decorate([
+    property({ type: String })
+], CorasLandingPage.prototype, "categories", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "isMobileScreen", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "isDateFilterOpen", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "isSortingSelectorOpen", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "isFiltersDrawerOpened", void 0);
+__decorate([
+    state()
+], CorasLandingPage.prototype, "activeCategorySlugs", void 0);
+CorasLandingPage = __decorate([
+    localized()
+], CorasLandingPage);
+export { CorasLandingPage };