@coras-io/embed 0.1.0

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

@@ -0,0 +1,1567 @@
+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 { state, property } from "lit/decorators.js";
+import { Task, TaskStatus } from "@lit/task";
+import { localized, msg, str } from "@lit/localize";
+import { classMap } from "lit/directives/class-map.js";
+import { fireEvent } from "../../core/events.js";
+import { map } from "lit/directives/map.js";
+import { consume } from "@lit/context";
+import { SignalWatcher } from "@lit-labs/signals";
+import { isBasketDropdownOpen, isBasketMobileOpen, } from "../../core/signals.js";
+import { format, formatISO, getDate, isAfter, isBefore, parseISO, } from "date-fns";
+import { capitalize } from "../../core/utils/text.js";
+import { apiGet, apiPost, withErrorHandling } from "../../core/api/queries.js";
+import "../../components/button/button.js";
+import "../../components/attraction-header/attraction-header.js";
+import "../../components/image-chip/image-chip.js";
+import "../../components/alert/alert.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/calendar/month/month.js";
+import "../../components/attraction-option/attraction-option.js";
+import "../../components/option-group/option-group.js";
+import "../../components/option-group/option-chip/option-chip.js";
+import "../../components/reservation-preview/reservation-preview.js";
+import "../../components/reservation-preview-item/reservation-preview-item.js";
+import "../../components/dialog/dialog.js";
+import "../../components/image-viewer/image-viewer.js";
+import "../../components/image/image.js";
+import "../../components/seats-io/seats-io.js";
+import "../../components/better-carousel/better-carousel.js";
+import "../../components/better-carousel/better-carousel-item/better-carousel-item.js";
+import "../../components/time-tag/time-tag.js";
+import "../../components/performance-time/performance-time.js";
+import "../../components/sport-options/sport-options.js";
+import "../../components/sport-options/sport-option/sport-option.js";
+import "../../components/seated-selector/seated-selector.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/pay-in/pay-in.js";
+import "../../contexts/basket/basket.js";
+import "../../components/layout/layout.js";
+import "../../components/breadcrumbs/breadcrumbs.js";
+import "../../components/breadcrumbs/breadcrumb-item/breadcrumb-item.js";
+import "./partials/theater-description/theater-description.js";
+import "./partials/tour-description/tour-description.js";
+import { PointsMixin } from "../../mixins/points/points.js";
+import styles from "./details-page.styles.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 { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { calculateTotalPrice, formatDateWithTimezone, formatTicketDetails, getAvailabilityDays, getAvailabilitySummary, getCurrentMonth, getTicketsAmount, getTicketSelectorLabel, getTotalTicketsCount, groupAvailabilityByTime, isSingleDayAvailability, scrollToTop, sortTimes, sumPricesAndFormat, } from "./details-page.utilts.js";
+import { formatDateTimeForDisplay, formatTimeForDisplay, } from "../../core/utils/datetime.js";
+import { getBookingSession, storeBookingSession, } from "../../core/api/middlewares/booking-session/booking-session.utils.js";
+import { BOOKING_SESSION_EXPIRES_HEADER } from "../../core/api/middlewares/booking-session/booking-session.constants.js";
+import { formatDate } from "../../core/i18n/date.js";
+import { getLocale, setLocale } from "../../core/i18n/localization.js";
+import { loyaltyPointsContext } from "../../contexts/properties.context.js";
+import { addRecentlySelectedSearches } from "../../containers/navbar/navbar.utils.js";
+import { filterMediaForGallery } from "../../core/images/filters.js";
+import { readSeatsIoConfig } from "../../core/types/seats-config.js";
+// TODO: can it be dynamic/responsive?
+const IMAGE_CAROUSEL_WIDTH = 480;
+const IMAGE_CAROUSEL_HEIGHT = 320;
+/**
+ * Details page component for viewing attraction details and creating reservations.
+ *
+ * @fires coras:navigate - Dispatched when navigating to another page
+ * @fires coras:state-change - Dispatched when in-page params change (date selection)
+ * @fires coras:reservation-created - Dispatched when a reservation is successfully created via the API
+ */
+let CorasDetailsPage = class CorasDetailsPage extends ErrorModalMixin(PointsMixin(BaseMixin(SignalWatcher(LitElement)))) {
+    constructor() {
+        super(...arguments);
+        this.attractionId = "";
+        this.date = formatISO(new Date(), { representation: "date" });
+        this.currentPage = "details";
+        this.loyaltyPoints = false;
+        this.currentMonth = undefined;
+        this.selectedPriceTypes = {};
+        this.isCalendarDropdownOpen = false;
+        this.isImageViewerModalOpen = false;
+        this.shouldRenderOptions = false;
+        this.isBasketModalOpened = false;
+        this.selectedTimeOptions = {};
+        this.isSingleDayAvailability = false;
+        this.availabilityDays = [];
+        this.isReservationPreviewModalOpened = false;
+        this.selectedSectionId = undefined;
+        this.selectedTime = null;
+        this.hasAvailabilityError = false;
+        this.loadingSelectionIds = new Set();
+        this.seatsFallback = false;
+        this.configTask = new Task(this, {
+            task: async ([client, locale, distributorID]) => {
+                if (!client) {
+                    return null;
+                }
+                const { data } = await withErrorHandling(apiGet({
+                    client,
+                    distributorID,
+                    locale,
+                    endpoint: "/{api_version}/config",
+                }));
+                return readSeatsIoConfig(data);
+            },
+            args: () => [this.client, this.locale, this.distributorID],
+        });
+        this.verifyDate = (firstInstanceDay, lastInstanceDay, timezone) => {
+            if (!this.date) {
+                this.updateDateParam({ date: firstInstanceDay, timezone });
+            }
+            if (this.date &&
+                (isBefore(parseISO(this.date), parseISO(firstInstanceDay)) ||
+                    isAfter(parseISO(this.date), parseISO(lastInstanceDay)))) {
+                this.updateDateParam({ date: firstInstanceDay, timezone });
+            }
+        };
+        this.checkDateAvailability = (firstInstanceDay, timezone) => {
+            if (!this.date) {
+                this.updateDateParam({ date: firstInstanceDay, timezone });
+                return;
+            }
+            const dayOfMonth = String(getDate(parseISO(this.date)));
+            if (!this.availabilityDays.includes(dayOfMonth)) {
+                this.updateDateParam({ date: firstInstanceDay, timezone });
+            }
+        };
+        this.attractionTask = new Task(this, {
+            task: async ([locale, currency, attractionId]) => {
+                const result = await withErrorHandling(apiGet({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale: locale,
+                    endpoint: "/{api_version}/attractions/{coras_attraction_id}",
+                    path: {
+                        coras_attraction_id: attractionId,
+                    },
+                    query: {
+                        currency: currency,
+                        size: 0,
+                    },
+                }));
+                if (!result.data) {
+                    return {};
+                }
+                this.verifyDate(result.data.first_instance_date, result.data.last_instance_date, result.data.attraction.timezone);
+                this.isSingleDayAvailability = isSingleDayAvailability(result.data.attraction.sale_periods ?? null);
+                this.availabilityDays = getAvailabilityDays({
+                    timezone: result.data.attraction.timezone,
+                    salePeriods: result.data.attraction.sale_periods ?? null,
+                    targetMonth: getCurrentMonth(this.date || result.data.first_instance_date, this.currentMonth),
+                });
+                this.checkDateAvailability(result.data.first_instance_date, result.data.attraction.timezone);
+                try {
+                    addRecentlySelectedSearches({
+                        type: "attraction",
+                        value: attractionId,
+                        name: result.data.attraction.attraction_name,
+                    });
+                }
+                catch {
+                    // noop
+                }
+                return result.data;
+            },
+            args: () => [this.locale, this.currency, this.attractionId],
+        });
+        this.bookingSessionTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const bookingSession = getBookingSession();
+                if (bookingSession) {
+                    return bookingSession;
+                }
+                const { data, response } = await withErrorHandling(apiPost({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale: this.locale,
+                    endpoint: "/{api_version}/booking-session",
+                    body: {
+                        language: this.locale.split("-")[0],
+                        user_id: null,
+                        analytics_id: null,
+                        distributor_session_id: null,
+                    },
+                }));
+                if (data && data["booking-session"]) {
+                    const newBookingSession = data["booking-session"];
+                    const expiresHeader = response?.headers.get(BOOKING_SESSION_EXPIRES_HEADER);
+                    if (expiresHeader) {
+                        try {
+                            const expirationDate = new Date(expiresHeader);
+                            if (!isNaN(expirationDate.getTime())) {
+                                storeBookingSession(newBookingSession, expirationDate);
+                            }
+                            else {
+                                const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
+                                storeBookingSession(newBookingSession, defaultExpiration);
+                            }
+                        }
+                        catch (error) {
+                            console.warn("Failed to parse booking session expiration date:", error);
+                            const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
+                            storeBookingSession(newBookingSession, defaultExpiration);
+                        }
+                    }
+                    else {
+                        const defaultExpiration = new Date(Date.now() + 20 * 60 * 1000); // 20 minutes
+                        storeBookingSession(newBookingSession, defaultExpiration);
+                    }
+                    return newBookingSession;
+                }
+                return undefined;
+            },
+        });
+        this.availabilityTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const bookingSession = this.bookingSessionTask.value;
+                if (!bookingSession) {
+                    throw new Error("Booking session not available");
+                }
+                const apiResponse = this.attractionTask.value;
+                if (!apiResponse) {
+                    throw new Error("Attraction data not available");
+                }
+                const result = await withErrorHandling(apiPost({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale: this.locale,
+                    endpoint: "/{api_version}/availability/check",
+                    bookingSession,
+                    body: {
+                        currency: this.currency,
+                        language_code: this.locale.split("-")[0],
+                        attraction_id: this.attractionId,
+                        date: this.date,
+                        tickets: Object.entries(this.selectedPriceTypes).map(([key, value]) => ({
+                            price_type_id: key,
+                            number_of_tickets: value,
+                        })),
+                    },
+                }));
+                if (result.error) {
+                    this.hasAvailabilityError = true;
+                }
+                if (!result.data) {
+                    this.hasAvailabilityError = true;
+                    return [];
+                }
+                if (result.data.length === 0 ||
+                    result.data.filter((availability) => availability.available).length ===
+                        0) {
+                    this.hasAvailabilityError = true;
+                }
+                const availableItems = result.data.filter((item) => item.available) || [];
+                // Auto-select the first performance time once the availability resolves,
+                // keeping this state out of the render path.
+                const sortedTimes = sortTimes(Array.from(groupAvailabilityByTime(availableItems, this.locale).keys()));
+                this.selectedTime = sortedTimes[0] ?? null;
+                availableItems.forEach((item) => {
+                    if (item.selection_id) {
+                        const languageEntries = Object.entries(item.languages_spoken || {});
+                        if (languageEntries.length > 0) {
+                            const localeCode = this.locale.split("-")[0];
+                            const matchingLanguage = languageEntries.find(([key]) => key.split("/")[0] === localeCode);
+                            const defaultLanguage = matchingLanguage
+                                ? matchingLanguage[0]
+                                : languageEntries[0]?.[0];
+                            const defaultTime = item.start_datetime;
+                            this.selectedTimeOptions = {
+                                ...this.selectedTimeOptions,
+                                [item.selection_id]: {
+                                    language: defaultLanguage,
+                                    time: defaultTime,
+                                },
+                            };
+                        }
+                    }
+                });
+                return availableItems;
+            },
+            args: () => [],
+        });
+        this.reservationsTask = new Task(this, {
+            autoRun: false,
+            task: async ([language, selection_id, seated]) => {
+                const bookingSession = this.bookingSessionTask.value;
+                if (!bookingSession) {
+                    throw new Error("Booking session not available");
+                }
+                const apiResponse = this.attractionTask.value;
+                if (!apiResponse) {
+                    throw new Error("Attraction data not available");
+                }
+                const seatedPayload = seated;
+                // Seated selection books a specific performance instance with the chosen
+                // seats; the section flow books a selection_id with ticket-type counts.
+                const reservationFields = seatedPayload
+                    ? {
+                        selection_id: null,
+                        instance_id: seatedPayload.instanceId,
+                        tickets: seatedPayload.tickets,
+                    }
+                    : {
+                        selection_id: selection_id,
+                        instance_id: null,
+                        tickets: this.buildSectionTickets(selection_id),
+                    };
+                const result = await withErrorHandling(apiPost({
+                    client: this.client,
+                    distributorID: this.distributorID,
+                    locale: this.locale,
+                    endpoint: "/{api_version}/reservations",
+                    bookingSession,
+                    body: {
+                        attraction_id: this.attractionId,
+                        currency: this.currency,
+                        date: this.date,
+                        language_code: this.locale.split("-")[0],
+                        tour_language: language,
+                        to_basket: true,
+                        pickup_id: null,
+                        pickup_entry: null,
+                        content_indexed_at: null,
+                        ...reservationFields,
+                    },
+                }));
+                if (result.error) {
+                    this.hasAvailabilityError = true;
+                    return {};
+                }
+                if (result.data) {
+                    // Emit only a minimal, redacted public payload; never the raw
+                    // reservation API response (P-038 data minimization).
+                    const reservation = result.data;
+                    fireEvent(this, "coras:reservation-created", {
+                        ...(reservation.reservation_id != null
+                            ? { reservationId: reservation.reservation_id }
+                            : {}),
+                        ...(reservation.expires_in != null
+                            ? { expiresIn: reservation.expires_in }
+                            : {}),
+                        ...(reservation.ticket_delivery_method != null
+                            ? { ticketDeliveryMethod: reservation.ticket_delivery_method }
+                            : {}),
+                    });
+                }
+                return result.data || {};
+            },
+            args: (language = "", selection_id = "", seated = null) => [language, selection_id, seated],
+        });
+        this.setCurrentMonth = (event) => {
+            event.stopPropagation();
+            this.currentMonth = event.detail.date;
+            const apiResponse = this.attractionTask.value;
+            if (apiResponse) {
+                this.availabilityDays = getAvailabilityDays({
+                    timezone: apiResponse.attraction.timezone,
+                    salePeriods: apiResponse.attraction.sale_periods ?? null,
+                    targetMonth: this.currentMonth,
+                });
+            }
+        };
+        this.changeTicketNumberBy = (id, count, maxAmount) => {
+            const currentValue = getTicketsAmount(id, this.selectedPriceTypes, maxAmount);
+            const totalTickets = getTotalTicketsCount(this.selectedPriceTypes);
+            if (maxAmount !== null && count > 0 && totalTickets + count > maxAmount) {
+                return;
+            }
+            const newValue = currentValue + count;
+            this.selectedPriceTypes = Object.fromEntries(Object.entries({
+                ...this.selectedPriceTypes,
+                [id]: newValue,
+            }).filter(([_key, value]) => value !== 0));
+            this.hasAvailabilityError = false;
+        };
+        this.handleDateSelected = (event) => {
+            event.stopPropagation();
+            this.hasAvailabilityError = false;
+            this.updateDateParam({ date: event.detail.date });
+            this.toggleCalendarDropdown();
+        };
+        this.handleCheckButtonClicked = async () => {
+            this.seatsFallback = false;
+            await this.bookingSessionTask.run();
+            await this.availabilityTask.run();
+            this.shouldRenderOptions = true; // TODO: move to request?
+        };
+        this.renderAttractionHeader = () => {
+            const apiResponse = this.attractionTask.value;
+            if (!apiResponse) {
+                return nothing;
+            }
+            const isTheater = apiResponse.attraction_type === "THEATER";
+            const event = apiResponse;
+            return html `
+      <coras-attraction-header
+        attraction-type=${apiResponse.attraction_type}
+        attraction-name=${apiResponse.attraction.attraction_name}
+        city=${apiResponse.attraction.city ?? ""}
+        location-name=${isTheater ? (event.attraction.location_name ?? "") : ""}
+        timezone=${apiResponse.attraction.timezone}
+        .rating=${apiResponse.attraction.rating ?? undefined}
+        .totalInstances=${isTheater ? event.total_instances : undefined}
+        first-instance-date=${apiResponse.first_instance_date ?? ""}
+        .locale=${this.locale}
+      >
+      </coras-attraction-header>
+    `;
+        };
+        this.renderImageCarouselItems = (images) => {
+            if (!images) {
+                return html ``;
+            }
+            return html `${map(images, (image) => html `
+        <coras-better-carousel-item>
+          <coras-image
+            src=${image.url}
+            width=${IMAGE_CAROUSEL_WIDTH}
+            height=${IMAGE_CAROUSEL_HEIGHT}
+            preset="carousel-hero"
+            loading="lazy"
+            alt=""
+          ></coras-image>
+        </coras-better-carousel-item>
+      `)}`;
+        };
+        this.renderImageCarousel = () => {
+            const apiResponse = this.attractionTask.value;
+            const gallery = filterMediaForGallery(apiResponse?.attraction.media ?? []);
+            const numberOfImages = gallery.length || 1;
+            return html `
+      <div class="image-carousel-wrapper">
+        <coras-better-carousel assets-url="${this.assetsURL}">
+          ${numberOfImages > 1
+                ? html `
+                <coras-image-chip
+                  slot="action"
+                  assets-url="${this.assetsURL}"
+                  number=${numberOfImages}
+                  @click=${this.toggleImageViewerModal}
+                ></coras-image-chip>
+              `
+                : nothing}
+          ${this.renderImageCarouselItems(gallery)}
+        </coras-better-carousel>
+      </div>
+    `;
+        };
+        this.renderPayInComponents = () => {
+            if (!this.loyaltyPoints) {
+                return nothing;
+            }
+            const attraction = this.attractionTask.value?.attraction;
+            const loyalty = attraction?.loyalty;
+            if (!loyalty) {
+                return nothing;
+            }
+            const earnAmount = Object.values(loyalty.earn)[0];
+            const payAmount = Object.values(loyalty.pay)[0];
+            if (!earnAmount || !payAmount) {
+                return nothing;
+            }
+            return html `
+      <div class="pay-in-container">
+        <coras-pay-in
+          type="earn"
+          currency="FIDA"
+          amount="${String(earnAmount)}"
+        ></coras-pay-in>
+        <div class="divider"></div>
+        <coras-pay-in
+          type="pay"
+          currency="${this.currency}"
+          amount="${String(payAmount)}"
+        ></coras-pay-in>
+      </div>
+    `;
+        };
+        this.renderTicketSelectorItems = (items, apiResponse) => {
+            if (!apiResponse) {
+                return nothing;
+            }
+            if (apiResponse.attraction_type === "TOUR") {
+                const response = apiResponse;
+                return html `${map(items, ({ name, description, price_type_id }) => {
+                    const maxAmount = response?.attraction.max_booking_size || 5;
+                    const ticketAmount = this.selectedPriceTypes[price_type_id] || 0;
+                    const totalTickets = getTotalTicketsCount(this.selectedPriceTypes);
+                    return html `
+          <coras-tour-ticket-type
+            label=${capitalize(name.toLowerCase())}
+            details=${description || ""}
+            value=${ticketAmount}
+          >
+            <coras-tour-ticket-counter-button
+              slot="minus-button"
+              assets-url="${this.assetsURL}"
+              variant="minus"
+              ?disabled=${ticketAmount <= 0}
+              @click=${() => this.changeTicketNumberBy(price_type_id, -1, maxAmount)}
+            ></coras-tour-ticket-counter-button>
+            <coras-tour-ticket-counter-button
+              slot="plus-button"
+              assets-url="${this.assetsURL}"
+              variant="plus"
+              ?disabled=${totalTickets + 1 > maxAmount}
+              @click=${() => this.changeTicketNumberBy(price_type_id, 1, maxAmount)}
+            ></coras-tour-ticket-counter-button>
+          </coras-tour-ticket-type>
+        `;
+                })}`;
+            }
+            if (apiResponse.attraction_type === "THEATER") {
+                const response = apiResponse;
+                return html `${map(items, ({ name, description, price_type_id }) => {
+                    const maxAmount = response?.attraction.max_tickets_per_order;
+                    const ticketAmount = this.selectedPriceTypes[price_type_id] || 0;
+                    const totalTickets = getTotalTicketsCount(this.selectedPriceTypes);
+                    return html `
+          <coras-tour-ticket-type
+            label=${capitalize(name.toLowerCase())}
+            details=${description || ""}
+            value=${ticketAmount}
+          >
+            <coras-tour-ticket-counter-button
+              slot="minus-button"
+              assets-url="${this.assetsURL}"
+              variant="minus"
+              ?disabled=${ticketAmount <= 0}
+              @click=${() => this.changeTicketNumberBy(price_type_id, -1, maxAmount)}
+            ></coras-tour-ticket-counter-button>
+            <coras-tour-ticket-counter-button
+              slot="plus-button"
+              assets-url="${this.assetsURL}"
+              variant="plus"
+              ?disabled=${maxAmount != null && totalTickets + 1 > maxAmount}
+              @click=${() => this.changeTicketNumberBy(price_type_id, 1, maxAmount)}
+            ></coras-tour-ticket-counter-button>
+          </coras-tour-ticket-type>
+        `;
+                })}`;
+            }
+        };
+        this.renderTicketSelector = () => {
+            const apiResponse = this.attractionTask.value;
+            if (!apiResponse) {
+                return nothing;
+            }
+            if (apiResponse.attraction_type === "TOUR") {
+                const response = apiResponse;
+                const priceTypes = response.price_types ?? [];
+                if (priceTypes.length > 0 &&
+                    Object.keys(this.selectedPriceTypes).length === 0) {
+                    const firstPriceTypeId = priceTypes[0].price_type_id;
+                    const maxBookingSize = response.attraction.max_booking_size;
+                    this.changeTicketNumberBy(firstPriceTypeId, 1, maxBookingSize);
+                }
+                return html `
+        <coras-tour-ticket-type-selector
+          assets-url="${this.assetsURL}"
+          label="${getTicketSelectorLabel(response.price_types ?? [], this.selectedPriceTypes, response)}"
+          ?error=${this.hasAvailabilityError}
+        >
+          ${this.renderTicketSelectorItems(response.price_types ?? [], response)}
+        </coras-tour-ticket-type-selector>
+      `;
+            }
+            if (apiResponse.attraction_type === "THEATER") {
+                const response = apiResponse;
+                const priceTypes = response.price_types ?? [];
+                if (priceTypes.length > 0 &&
+                    Object.keys(this.selectedPriceTypes).length === 0) {
+                    const firstPriceTypeId = priceTypes[0].price_type_id;
+                    const maxBookingSize = response.attraction.max_tickets_per_order;
+                    this.changeTicketNumberBy(firstPriceTypeId, 1, maxBookingSize);
+                }
+                return html `
+        <coras-tour-ticket-type-selector
+          assets-url="${this.assetsURL}"
+          ?error=${this.hasAvailabilityError}
+          label="${getTicketSelectorLabel(response.price_types ?? [], this.selectedPriceTypes, response)}"
+        >
+          ${this.renderTicketSelectorItems(response.price_types ?? [], response)}
+        </coras-tour-ticket-type-selector>
+      `;
+            }
+            return nothing;
+        };
+        this.renderCalendarDropdown = () => {
+            const apiResponse = this.attractionTask.value;
+            if (!apiResponse) {
+                return nothing;
+            }
+            const date = this.date ||
+                formatISO(parseISO(apiResponse.first_instance_date), {
+                    representation: "date",
+                });
+            if (this.isSingleDayAvailability) {
+                return html `
+        <div id="calendar-dropdown">
+          <coras-button
+            variant="outlined"
+            radius="small"
+            height="md"
+            .shadow=${false}
+            .clickable=${false}
+            background
+            expanded
+          >
+            <coras-icon
+              assets-url="${this.assetsURL}"
+              slot="prefix"
+              icon="calendar"
+              label="calendar"
+            ></coras-icon>
+            <span>${formatDate(date, this.locale, true)}</span>
+          </coras-button>
+        </div>
+      `;
+            }
+            return html `
+      <div id="calendar-dropdown">
+        <coras-dropdown
+          ?open=${this.isCalendarDropdownOpen}
+          @dropdown-close-request=${this.toggleCalendarDropdown}
+        >
+          <coras-button
+            slot="trigger"
+            variant="outlined"
+            radius="small"
+            height="md"
+            border-color="light"
+            background
+            expanded
+            @click=${this.toggleCalendarDropdown}
+            ?error=${this.hasAvailabilityError}
+          >
+            <coras-icon
+              assets-url="${this.assetsURL}"
+              slot="prefix"
+              icon="calendar"
+              label="calendar"
+            ></coras-icon>
+            <coras-icon
+              assets-url="${this.assetsURL}"
+              id="date-field-chevron"
+              slot="suffix"
+              class=${classMap({ open: this.isCalendarDropdownOpen })}
+              icon="keyboard-arrow-down"
+            ></coras-icon>
+            <span>${formatDate(date, this.locale, true)}</span>
+          </coras-button>
+
+          <div class="calendar">
+            <coras-month-calendar
+              assets-url="${this.assetsURL}"
+              locale=${this.locale}
+              min-date=${format(parseISO(apiResponse.first_instance_date), "yyyy-MM")}
+              max-date=${format(parseISO(apiResponse.last_instance_date), "yyyy-MM")}
+              .selectedDates=${[date]}
+              .availableDays=${this.availabilityDays}
+              selected-month=${getCurrentMonth(date, this.currentMonth)}
+              @date-selected=${this.handleDateSelected}
+              @calendar-month-changed=${this.setCurrentMonth}
+            ></coras-month-calendar>
+          </div>
+        </coras-dropdown>
+      </div>
+    `;
+        };
+        this.renderTicketAvailability = () => {
+            const apiResponse = this.attractionTask.value;
+            if (!apiResponse) {
+                return html ``;
+            }
+            const lowestPrice = apiResponse?.attraction?.min_price?.[this.currency] || 0;
+            const formattedPrice = convertToLocaleCurrency({
+                value: lowestPrice,
+                locale: this.locale,
+                currency: this.currency,
+            });
+            return html `
+      <div class="ticket-availability">
+        ${lowestPrice > 0
+                ? html `
+              <div class="caption">
+                ${msg(str `From ${formattedPrice} per adult`)}
+              </div>
+            `
+                : nothing}
+        ${this.renderTicketSelector()} ${this.renderCalendarDropdown()}
+        <coras-button
+          variant="primary"
+          height="sm"
+          ?loading=${this.isCheckingAvailability}
+          @click=${this.handleCheckButtonClicked}
+        >
+          ${msg("Check Availability")}
+        </coras-button>
+      </div>
+    `;
+        };
+        this.renderImageViewerModal = () => {
+            const apiResponse = this.attractionTask.value;
+            const imageUrls = filterMediaForGallery(apiResponse?.attraction.media ?? []).map((media) => media.url);
+            return html `
+      <coras-dialog
+        ?open=${this.isImageViewerModalOpen}
+        @dialog-closed=${this.toggleImageViewerModal}
+        expanded
+      >
+        <div class="image-viewer-modal-container">
+          <h2>${apiResponse?.attraction.attraction_name || ""}</h2>
+
+          <div class="image-viewer-modal-content">
+            <coras-image-viewer
+              assets-url="${this.assetsURL}"
+              .images=${imageUrls}
+              class="image-viewer-modal-image-viewer"
+            ></coras-image-viewer>
+          </div>
+
+          <coras-button
+            variant="primary"
+            ?loading=${this.isCheckingAvailability}
+            @click=${this.handleCheckButtonClicked}
+          >
+            ${msg("Check Availability")}
+          </coras-button>
+        </div>
+      </coras-dialog>
+    `;
+        };
+        this.handleTimeOptionChipClicked = (id, value, type) => {
+            const currentOptions = this.selectedTimeOptions[id] || {};
+            this.selectedTimeOptions = {
+                ...this.selectedTimeOptions,
+                [id]: {
+                    ...currentOptions,
+                    [type]: value,
+                },
+            };
+        };
+        this.renderTourOptionChips = ({ selectionId, languagesSpoken, }) => {
+            const languageEntries = Object.entries(languagesSpoken);
+            return html `${map(languageEntries, ([key, label]) => {
+                const isSelected = this.selectedTimeOptions[selectionId]?.language === key;
+                return html `
+        <coras-option-chip
+          ?selected=${isSelected}
+          @click=${() => this.handleTimeOptionChipClicked(selectionId, key, "language")}
+        >
+          ${label}
+        </coras-option-chip>
+      `;
+            })}`;
+        };
+        this.renderTimeOptionChips = ({ selectionId, startDatetime, timezone, }) => {
+            if (!startDatetime) {
+                return nothing;
+            }
+            const formattedTime = formatTimeForDisplay({
+                dateTime: startDatetime,
+                timezone,
+                locale: this.locale,
+            });
+            const isSelected = this.selectedTimeOptions[selectionId]?.time === startDatetime;
+            return html `
+      <coras-option-chip
+        ?selected=${isSelected}
+        @click=${() => this.handleTimeOptionChipClicked(selectionId, startDatetime, "time")}
+      >
+        ${formattedTime}
+      </coras-option-chip>
+    `;
+        };
+        this.renderTourOptions = (items) => {
+            return html `${map(items, ({ name, languages_spoken, selection_id, prices, start_datetime, timezone, max_full_price, }) => {
+                // The availability API returns one `start_datetime` per item, so each
+                // tour option is a single timed slot (a tour offered at several times
+                // arrives as several items). There is thus one time per option: the
+                // per-option time picker stays collapsed and the slot shows as a badge.
+                // Grouping items into a single multi-time option is a separate feature
+                // that also needs the selection_id<->time basket mapping reworked.
+                const hasOnlyOneTimeOption = true;
+                const hasMultipleLanguages = Object.keys(languages_spoken || {}).length > 1;
+                return html `
+          <coras-attraction-option
+            caption=${name || ""}
+            details=${formatTicketDetails({
+                    prices,
+                    locale: this.locale,
+                    currency: this.currency,
+                })}
+            price=${convertToLocaleCurrency({
+                    value: max_full_price[this.currency] || 0,
+                    locale: this.locale,
+                    currency: this.currency,
+                })}
+            ?show-time-options=${!hasOnlyOneTimeOption}
+            ?show-language-options=${hasMultipleLanguages}
+          >
+            ${hasOnlyOneTimeOption
+                    ? html `<coras-time-tag
+                  slot="badge"
+                  assets-url="${this.assetsURL}"
+                  datetime=${start_datetime}
+                  timezone=${timezone}
+                  locale=${this.locale}
+                ></coras-time-tag>`
+                    : nothing}
+            ${!hasOnlyOneTimeOption
+                    ? html `<coras-option-group slot="time-options">
+                  ${this.renderTimeOptionChips({
+                        selectionId: selection_id,
+                        startDatetime: start_datetime,
+                        timezone,
+                    })}
+                </coras-option-group>`
+                    : nothing}
+            ${hasMultipleLanguages
+                    ? html `<coras-option-group slot="language-options">
+                  ${this.renderTourOptionChips({
+                        selectionId: selection_id,
+                        languagesSpoken: languages_spoken,
+                    })}
+                </coras-option-group>`
+                    : nothing}
+
+            <coras-button
+              slot="basket-button"
+              variant="text"
+              ?loading=${this.isAddingToBasket(selection_id || undefined)}
+              @click=${() => this.handleBasketModalToggle(selection_id)}
+            >
+              ${msg("Add to basket")}
+            </coras-button>
+          </coras-attraction-option>
+        `;
+            })}`;
+        };
+        this.handleSeatsConfirmed = async (event) => {
+            // Capture the selector now: currentTarget is nulled once dispatch ends, and
+            // we only read it after awaiting the reservation.
+            const selector = event.target;
+            await this.reservationsTask.run(["", "", event.detail]);
+            if (this.reservationsTask.status !== TaskStatus.ERROR &&
+                this.reservationsTask.value &&
+                Object.keys(this.reservationsTask.value).length > 0) {
+                // Close the fixed seat-summary bar so it doesn't sit over the basket.
+                selector?.reservationCreated();
+                const isMobile = window.matchMedia("(max-width: 800px)").matches;
+                if (isMobile) {
+                    this.isBasketModalOpened = !this.isBasketModalOpened;
+                    scrollToTop();
+                }
+                else {
+                    isBasketDropdownOpen.set(true);
+                    scrollToTop();
+                }
+            }
+        };
+        this.renderAvailabilityOptions = () => {
+            if (!this.shouldRenderOptions) {
+                return nothing;
+            }
+            return this.availabilityTask.render({
+                complete: (value) => {
+                    if (!value || value.length === 0) {
+                        return nothing;
+                    }
+                    const optionsCount = value.length;
+                    const isTour = this.attractionTask.value?.attraction_type === "TOUR";
+                    if (isTour) {
+                        return html `
+            <div class="options">
+              <div class="header">
+                ${msg(str `We have ${optionsCount} available options`)}
+              </div>
+              <div class="tour-options">
+                ${this.renderTourOptions([...value])}
+              </div>
+            </div>
+          `;
+                    }
+                    else {
+                        const timeGroups = groupAvailabilityByTime([...value], this.locale);
+                        const sortedTimes = sortTimes(Array.from(timeGroups.keys()));
+                        const filteredOptions = this.selectedTime
+                            ? Array.from(timeGroups.get(this.selectedTime) || [])
+                            : [];
+                        const seatedPerformance = this.findSeatedPerformance(filteredOptions);
+                        // Only offer the time picker when there is an actual choice. A single
+                        // performance time is auto-selected above, so showing one lone button
+                        // is noise — render straight to the seat/section options instead.
+                        const showTimePicker = sortedTimes.length > 1;
+                        return html `
+            <div class="options">
+              ${showTimePicker
+                            ? html `
+                    <div class="performance-times-label">
+                      ${msg("Please select a performance time")}
+                    </div>
+                    <div class="performance-times">
+                      ${map(sortedTimes, (time) => html `
+                          <coras-performance-time
+                            assets-url="${this.assetsURL}"
+                            text="${time}"
+                            ?selected=${time === this.selectedTime}
+                            @click=${() => {
+                                this.selectedTime = time;
+                                this.seatsFallback = false;
+                            }}
+                          ></coras-performance-time>
+                        `)}
+                    </div>
+                  `
+                            : ""}
+              ${seatedPerformance
+                            ? this.renderSeatedSelector(seatedPerformance)
+                            : this.renderSectionOptions(filteredOptions)}
+            </div>
+          `;
+                    }
+                },
+                error: (error) => {
+                    const apiError = error;
+                    if (apiError.code === 37) {
+                        return html `${msg("Please select the number of tickets.")}`;
+                    }
+                    return html `${msg("Error!")}`;
+                },
+            });
+        };
+        this.renderReservationPreviewModal = () => {
+            const apiResponse = this.attractionTask.value;
+            const availabilityData = this.availabilityTask.value || [];
+            if (!apiResponse || !this.selectedSectionId) {
+                return nothing;
+            }
+            const selectedSection = availabilityData.find((item) => item.selection_id === this.selectedSectionId);
+            if (!selectedSection) {
+                return nothing;
+            }
+            const sectionName = selectedSection.name || "";
+            const ticketsCount = getTotalTicketsCount(this.selectedPriceTypes);
+            let formattedDate = "";
+            let venueInfo = "";
+            if (selectedSection.start_datetime) {
+                formattedDate = formatDateTimeForDisplay({
+                    dateTime: selectedSection.start_datetime,
+                    timezone: apiResponse.attraction.timezone,
+                    locale: this.locale,
+                });
+            }
+            else if (this.date) {
+                formattedDate = formatDateTimeForDisplay({
+                    dateTime: this.date,
+                    timezone: apiResponse.attraction.timezone,
+                    locale: this.locale,
+                });
+            }
+            if ("location_name" in apiResponse.attraction &&
+                apiResponse.attraction.location_name) {
+                venueInfo = apiResponse.attraction.location_name;
+                if (apiResponse.attraction.city) {
+                    venueInfo += `, ${apiResponse.attraction.city}`;
+                }
+            }
+            else if (apiResponse.attraction.city) {
+                venueInfo = apiResponse.attraction.city;
+            }
+            const subheaderText = formattedDate + (venueInfo ? `, ${venueInfo}` : "");
+            const summary = getAvailabilitySummary(selectedSection, this.currency);
+            const ticketItems = (selectedSection.prices || [])
+                .map((priceItem) => {
+                if (!priceItem.price_type_name)
+                    return null;
+                const count = priceItem.number_of_tickets || 1;
+                const formattedUnitPrice = convertToLocaleCurrency({
+                    value: priceItem.price?.[this.currency] ?? summary.pricePerTicket,
+                    locale: this.locale,
+                    currency: this.currency,
+                });
+                const totalTicketPriceValue = (priceItem.price?.[this.currency] ?? summary.pricePerTicket) * count;
+                const formattedTotalTicketPrice = convertToLocaleCurrency({
+                    value: totalTicketPriceValue,
+                    locale: this.locale,
+                    currency: this.currency,
+                });
+                return {
+                    label: `${count} Tickets (${formattedUnitPrice} each)`,
+                    price: formattedTotalTicketPrice,
+                };
+            })
+                .filter((item) => item !== null);
+            // Calculate booking fee
+            const bookingFee = convertToLocaleCurrency({
+                value: summary.bookingFeePerTicket,
+                locale: this.locale,
+                currency: this.currency,
+            });
+            const formattedTotalBookingFee = convertToLocaleCurrency({
+                value: summary.totalFee,
+                locale: this.locale,
+                currency: this.currency,
+            });
+            const formattedTotalSum = convertToLocaleCurrency({
+                value: summary.totalPrice,
+                locale: this.locale,
+                currency: this.currency,
+            });
+            const attractionName = apiResponse.attraction.attraction_name;
+            return html `
+      <coras-dialog
+        ?open=${this.isReservationPreviewModalOpened}
+        @dialog-closed=${() => {
+                this.isReservationPreviewModalOpened = false;
+                this.selectedSectionId = undefined;
+            }}
+      >
+        <coras-reservation-preview
+          header="${msg(str `${ticketsCount} Tickets for ${attractionName}`)}"
+          subheader="${subheaderText}"
+          section="${sectionName}"
+          price="${formattedTotalSum}"
+        >
+          ${map(ticketItems, (item) => html `
+              <coras-reservation-preview-item
+                label="${item.label}"
+                price="${item.price}"
+              ></coras-reservation-preview-item>
+            `)}
+
+          <coras-reservation-preview-item
+            label="${msg(str `Booking fee (${bookingFee} per ticket)`)}"
+            price="${formattedTotalBookingFee}"
+          ></coras-reservation-preview-item>
+
+          <coras-button
+            slot="action"
+            variant="primary"
+            ?loading=${this.isAddingToBasket(this.selectedSectionId)}
+            @click="${async () => {
+                await this.handleBasketModalToggle(this.selectedSectionId);
+                this.isReservationPreviewModalOpened = false;
+                // Defer scroll past the dialog's scroll-lock restore (rAF-deferred)
+                setTimeout(() => scrollToTop(), 0);
+            }}"
+          >
+            ${msg("Add to basket")}
+          </coras-button>
+
+          ${"seat_map" in apiResponse.attraction &&
+                apiResponse.attraction.seat_map
+                ? html `
+                <img
+                  slot="image"
+                  src="${apiResponse.attraction.seat_map}"
+                  alt="${msg("Seat Map")}"
+                />
+              `
+                : nothing}
+        </coras-reservation-preview>
+      </coras-dialog>
+    `;
+        };
+        this.renderDescription = () => {
+            const attraction = this.attractionTask.value;
+            if (!attraction) {
+                return nothing;
+            }
+            if (attraction.attraction_type === "THEATER") {
+                return html `
+        <coras-theater-description
+          .attraction=${attraction}
+        ></coras-theater-description>
+      `;
+            }
+            else if (attraction.attraction_type === "TOUR") {
+                return html `
+        <coras-tour-description
+          .attraction=${attraction}
+          .assetsURL=${this.assetsURL}
+          .locale=${this.locale}
+        ></coras-tour-description>
+      `;
+            }
+            return nothing;
+        };
+        this.renderBasketModal = () => {
+            const apiResponse = this.attractionTask.value;
+            const ticketsNumber = getTotalTicketsCount(this.selectedPriceTypes);
+            const title = apiResponse?.attraction.attraction_name || "";
+            let formattedDate = "";
+            if (this.reservationsTask.value &&
+                "start_datetime" in this.reservationsTask.value) {
+                formattedDate = formatDateTimeForDisplay({
+                    dateTime: this.reservationsTask.value.start_datetime,
+                    timezone: apiResponse?.attraction?.timezone,
+                    locale: this.locale,
+                }, {
+                    includeTime: true,
+                });
+            }
+            else if (this.date) {
+                formattedDate = formatDateTimeForDisplay({
+                    dateTime: this.date,
+                    timezone: apiResponse?.attraction?.timezone,
+                    locale: this.locale,
+                });
+            }
+            const totalPrice = calculateTotalPrice(this.reservationsTask.value && "tickets" in this.reservationsTask.value
+                ? this.reservationsTask.value.tickets
+                : undefined);
+            const formattedPrice = convertToLocaleCurrency({
+                value: totalPrice,
+                locale: this.locale,
+                currency: this.currency,
+            });
+            const productName = msg(str `${ticketsNumber} tickets for ${title}`);
+            const imageUrl = apiResponse?.attraction.media?.[0]?.url || "";
+            return html `
+      <coras-dialog
+        ?open=${this.isBasketModalOpened}
+        label=${msg("Added to basket")}
+        @dialog-closed=${() => this.handleBasketModalToggle()}
+      >
+        <div slot="header" class="basket-modal-header">
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            icon="check-circle"
+            class="basket-modal-icon"
+          ></coras-icon>
+          <span class="basket-modal-title">${msg("Added to basket")}</span>
+        </div>
+        <div class="basket-modal-content">
+          <coras-image
+            src=${imageUrl}
+            alt=${productName}
+            width="70"
+            height="70"
+            loading="eager"
+            preset="thumbnail"
+          ></coras-image>
+          <div class="basket-modal-description">
+            <div class="basket-modal-name">${productName}</div>
+            <div class="basket-modal-date">${formattedDate}</div>
+            <div class="basket-modal-price">${formattedPrice}</div>
+          </div>
+        </div>
+        <div slot="footer" class="basket-modal-footer">
+          <coras-button
+            variant="primary"
+            @click=${this.handleGoToBasketButtonClicked}
+          >
+            ${msg("Go to basket")}
+          </coras-button>
+          <coras-button
+            variant="outlined"
+            @click=${() => {
+                this.isBasketModalOpened = false;
+            }}
+          >
+            ${msg("Continue shopping")}
+          </coras-button>
+        </div>
+      </coras-dialog>
+    `;
+        };
+        this.renderAvailabilityAlert = () => {
+            if (!this.hasAvailabilityError) {
+                return nothing;
+            }
+            const title = msg("We're sorry, there are not enough tickets available for this event");
+            const description = msg("Please try a different date or number of tickets");
+            return html `
+      <coras-alert assets-url=${this.assetsURL} variant="error" title=${title}>
+        ${description}
+      </coras-alert>
+    `;
+        };
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    getPageProperties() {
+        return {
+            page: "details",
+            currency: this.currency,
+            locale: this.locale,
+            id: this.attractionId,
+            date: this.date,
+        };
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (getLocale() !== this.locale) {
+            setLocale(this.locale);
+        }
+        if (changedProperties.has("currency") || changedProperties.has("locale")) {
+            if (this.availabilityTask.status === TaskStatus.COMPLETE ||
+                this.availabilityTask.status === TaskStatus.ERROR) {
+                this.availabilityTask.run();
+            }
+        }
+        if (changedProperties.has("attractionId")) {
+            this.resetAvailabilityState();
+        }
+    }
+    resetAvailabilityState() {
+        this.shouldRenderOptions = false;
+        this.hasAvailabilityError = false;
+        this.selectedTime = null;
+        this.selectedTimeOptions = {};
+        this.selectedSectionId = undefined;
+        this.isReservationPreviewModalOpened = false;
+        this.isBasketModalOpened = false;
+        this.selectedPriceTypes = {};
+    }
+    updateDateParam({ date, timezone, }) {
+        const firstAvailabilityDate = timezone
+            ? formatDateWithTimezone({
+                dateString: date,
+                timezone,
+                formatString: "yyyy-MM-dd",
+            })
+            : formatISO(parseISO(date), {
+                representation: "date",
+            });
+        this.dispatchPageUpdate({
+            date: firstAvailabilityDate,
+        });
+    }
+    async handleBasketModalToggle(selection_id) {
+        // TODO: check if success, if not show error message
+        // TODO: it calls the task once again when modal is closed
+        if (selection_id) {
+            this.loadingSelectionIds = new Set([
+                ...this.loadingSelectionIds,
+                selection_id,
+            ]);
+            const selectedOption = this.selectedTimeOptions[selection_id] || {};
+            const language = selectedOption.language || "";
+            try {
+                await this.reservationsTask.run([language, selection_id]);
+                if (this.reservationsTask.status !== TaskStatus.ERROR &&
+                    this.reservationsTask.value &&
+                    Object.keys(this.reservationsTask.value).length > 0) {
+                    // TODO: make reusable
+                    const isMobile = window.matchMedia("(max-width: 800px)").matches;
+                    if (isMobile) {
+                        this.isBasketModalOpened = !this.isBasketModalOpened;
+                        scrollToTop();
+                    }
+                    else {
+                        isBasketDropdownOpen.set(true);
+                        scrollToTop();
+                    }
+                    return true;
+                }
+                return false;
+            }
+            finally {
+                const newLoadingSelectionIds = new Set(this.loadingSelectionIds);
+                newLoadingSelectionIds.delete(selection_id);
+                this.loadingSelectionIds = newLoadingSelectionIds;
+            }
+        }
+        else {
+            this.isBasketModalOpened = false;
+            return true;
+        }
+    }
+    buildSectionTickets(selection_id) {
+        const apiResponse = this.attractionTask.value;
+        const availabilityItems = this.availabilityTask
+            .value || [];
+        const selectedOption = availabilityItems.find((item) => item.selection_id === selection_id);
+        const selectedOptionPriceTypeIds = selectedOption?.prices?.map((price) => price.price_type_id) || [];
+        const isTheatre = apiResponse?.attraction_type === "THEATER";
+        return Object.entries(this.selectedPriceTypes)
+            .filter(([key]) => isTheatre || selectedOptionPriceTypeIds.includes(key))
+            .map(([key, value]) => ({
+            number_of_tickets: value,
+            price_type_id: key,
+            booking_fee: null,
+            seats: null,
+        }));
+    }
+    toggleCalendarDropdown() {
+        this.isCalendarDropdownOpen = !this.isCalendarDropdownOpen;
+    }
+    toggleImageViewerModal() {
+        this.isImageViewerModalOpen = !this.isImageViewerModalOpen;
+    }
+    get isCheckingAvailability() {
+        return (this.bookingSessionTask.status === TaskStatus.PENDING ||
+            this.availabilityTask.status === TaskStatus.PENDING);
+    }
+    isAddingToBasket(selectionId) {
+        if (!selectionId) {
+            return this.reservationsTask.status === TaskStatus.PENDING;
+        }
+        return this.loadingSelectionIds.has(selectionId);
+    }
+    renderBreadcrumbs() {
+        const apiResponse = this.attractionTask.value;
+        if (!apiResponse)
+            return nothing;
+        const { attraction } = apiResponse;
+        const location = attraction.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,
+            });
+        };
+        const handleCategoryClick = () => {
+            if (!countrySlug || !citySlug)
+                return;
+            this.dispatchPageUpdate({
+                page: "landing",
+                country: countrySlug,
+                city: citySlug,
+                categories: attraction.main_category.slug,
+            });
+        };
+        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}
+        ${attraction.main_category.name
+            ? html `<coras-breadcrumb-item @click=${handleCategoryClick} clickable>
+              ${attraction.main_category.name}
+            </coras-breadcrumb-item>`
+            : nothing}
+        <coras-breadcrumb-item>
+          ${attraction.attraction_name}
+        </coras-breadcrumb-item>
+      </coras-breadcrumbs>
+    `;
+    }
+    // Resolves the selected performance to the seat map's one prerequisite: the
+    // instance_id (the seats.io event key and the seats endpoint path param).
+    // Price bands and per-seat data come from the seats endpoint itself, so the
+    // availability item only has to supply the instance. Returns null to fall
+    // back to the section picker. All section items of a performance share the
+    // same instance_id, so the first option resolves it.
+    findSeatedPerformance(options) {
+        const apiResponse = this.attractionTask.value;
+        if (this.seatsFallback ||
+            !this.configTask.value ||
+            apiResponse?.attraction_type !== "THEATER") {
+            return null;
+        }
+        // attraction_type is "THEATER" | "TOUR" on both variants, so it cannot
+        // narrow the union structurally; the runtime check above is the guard.
+        const event = apiResponse;
+        if (!event.attraction.seats_sales_enabled) {
+            return null;
+        }
+        const [option] = options;
+        if (!option) {
+            return null;
+        }
+        return {
+            instanceId: option.instance_id,
+            startDatetime: option.start_datetime,
+        };
+    }
+    renderSeatedSelector(performance) {
+        const seatsConfig = this.configTask.value;
+        return html `
+      <coras-seated-selector
+        attraction-id="${this.attractionId}"
+        instance-id="${performance.instanceId}"
+        assets-url="${this.assetsURL}"
+        workspace-key="${seatsConfig.workspaceKey}"
+        region="${seatsConfig.region}"
+        date-label="${formatDate(performance.startDatetime, this.locale, true)}"
+        ticket-count=${getTotalTicketsCount(this.selectedPriceTypes)}
+        @seats-unavailable=${() => (this.seatsFallback = true)}
+        @seats-confirmed=${this.handleSeatsConfirmed}
+      ></coras-seated-selector>
+    `;
+    }
+    renderSectionOptions(filteredOptions) {
+        return html `
+      <div class="sport-options">
+        <coras-sport-options
+          label="${msg(str `We have ${filteredOptions.length} available options`)}"
+        >
+          ${map(filteredOptions, ({ name, selection_id, prices }) => html `
+              <coras-sport-option
+                assets-url="${this.assetsURL}"
+                section="${name || ""}"
+                price="${sumPricesAndFormat({
+            prices,
+            locale: this.locale,
+            currency: this.currency,
+        })}"
+                @click=${() => {
+            this.isReservationPreviewModalOpened = true;
+            this.selectedSectionId = selection_id;
+        }}
+              ></coras-sport-option>
+            `)}
+        </coras-sport-options>
+      </div>
+    `;
+    }
+    handleGoToBasketButtonClicked() {
+        this.handleBasketModalToggle();
+        // TODO: make reusable
+        const isMobile = window.matchMedia("(max-width: 800px)").matches;
+        if (isMobile) {
+            isBasketMobileOpen.set(true);
+            scrollToTop();
+        }
+        else {
+            isBasketDropdownOpen.set(true);
+            scrollToTop();
+        }
+    }
+    render() {
+        return html `
+      <coras-layout with-basket>
+        <slot name="navbar" slot="navbar"></slot>
+        ${this.attractionTask.render({
+            error: () => {
+                this.showErrorModalOnce();
+                return html ``;
+            },
+            complete: () => {
+                return html `
+              ${this.renderBreadcrumbs()} ${this.renderAttractionHeader()}
+              <div class="attraction-header">
+                ${this.renderImageCarousel()} ${this.renderTicketAvailability()}
+                ${this.renderAvailabilityAlert()}
+                ${this.renderPayInComponents()}
+              </div>
+              ${this.renderAvailabilityOptions()}
+              <div class="description">${this.renderDescription()}</div>
+              ${this.isReservationPreviewModalOpened
+                    ? this.renderReservationPreviewModal()
+                    : nothing}
+              ${this.isBasketModalOpened ? this.renderBasketModal() : nothing}
+              ${this.isImageViewerModalOpen
+                    ? this.renderImageViewerModal()
+                    : nothing}
+            `;
+            },
+        })}
+        ${this.renderErrorModal({
+            assetsURL: this.assetsURL,
+            buttonLabel: msg("Refresh the page"),
+            onRetry: () => this.attractionTask.run(),
+            onHelp: () => this.dispatchPageUpdate({ page: "help" }),
+        })}
+        <slot name="footer" slot="footer"></slot>
+      </coras-layout>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "attraction-id" })
+], CorasDetailsPage.prototype, "attractionId", void 0);
+__decorate([
+    property({ type: String })
+], CorasDetailsPage.prototype, "date", void 0);
+__decorate([
+    consume({ context: currentPageContext })
+], CorasDetailsPage.prototype, "currentPage", void 0);
+__decorate([
+    consume({ context: loyaltyPointsContext, subscribe: true })
+], CorasDetailsPage.prototype, "loyaltyPoints", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "currentMonth", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "selectedPriceTypes", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "isCalendarDropdownOpen", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "isImageViewerModalOpen", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "shouldRenderOptions", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "isBasketModalOpened", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "selectedTimeOptions", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "isSingleDayAvailability", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "availabilityDays", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "isReservationPreviewModalOpened", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "selectedSectionId", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "selectedTime", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "hasAvailabilityError", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "loadingSelectionIds", void 0);
+__decorate([
+    state()
+], CorasDetailsPage.prototype, "seatsFallback", void 0);
+CorasDetailsPage = __decorate([
+    localized()
+], CorasDetailsPage);
+export { CorasDetailsPage };