@coras-io/embed 0.1.0

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

@@ -0,0 +1,594 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { msg, localized } from "@lit/localize";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import styles from "./help-page.styles.js";
+import { sanitizeHtml } from "../../core/utils/html.js";
+import { apiGet, apiPost, withErrorHandling } from "../../core/api/queries.js";
+import "../../components/tabs/tabs.js";
+import "../../components/tab/tab.js";
+import "../../components/tab-panel/tab-panel.js";
+import "../../components/accordion/accordion.js";
+import "../../components/accordion/accordion-item/accordion-item.js";
+import "../../components/input-field/input-field.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/select-list/select-list.js";
+import "../../components/select-list/select-option/select-option.js";
+import "../../components/icon/icon.js";
+import "../../components/message-card/message-card.js";
+import "../../components/button/button.js";
+import "../../components/dialog/dialog.js";
+import "../../components/layout/layout.js";
+import { BaseMixin } from "../../mixins/base.mixin.js";
+import { FIELD_CONFIG } from "./help-page.fields.js";
+import { renderNumberedTree } from "./help-page.utils.js";
+import { Task } from "@lit/task";
+import { getLocale, setLocale } from "../../core/i18n/localization.js"; // used in renderFaqAccordion
+const faqPages = ["faq-attractions", "faq-music", "faq-theatres", "faq-sports"];
+const infoPages = ["cookies", "privacy-policy", "terms-and-conditions"];
+/**
+ * Help page component for FAQs, contact form, and policy pages.
+ *
+ * @fires coras:navigate - Dispatched when navigating away or opening an external link
+ * @fires coras:state-change - Dispatched when the help content tab changes
+ */
+let CorasHelpPage = class CorasHelpPage extends BaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        // Without this, dispatchPageUpdate classifies tab changes with an undefined
+        // page and the host's URL build throws, so the content never syncs.
+        this.currentPage = "help";
+        this.formValues = {
+            name: "",
+            email: "",
+            eventName: "",
+            orderReference: "",
+            message: "",
+            subject: "",
+        };
+        this.formErrors = {
+            name: "",
+            email: "",
+            eventName: "",
+            orderReference: "",
+            message: "",
+            subject: "",
+        };
+        this.submissionAttempts = 0;
+        this._content = "faq-attractions";
+        this.subjectSelectLabel = "";
+        this.subjectDropdownOpen = false;
+        this.showModal = false;
+        this.processing = false;
+        this.helpTabTask = new Task(this, {
+            task: async ([locale, content]) => {
+                if (faqPages.includes(content) || infoPages.includes(content)) {
+                    return withErrorHandling(apiGet({
+                        client: this.client,
+                        distributorID: this.distributorID,
+                        locale,
+                        endpoint: "/{api_version}/pages/{page_slug}",
+                        path: {
+                            page_slug: content,
+                        },
+                    }));
+                }
+            },
+            args: () => [this.locale, this.content],
+        });
+        this.subjectsTask = new Task(this, {
+            task: async ([locale, content]) => {
+                if (content === "contact") {
+                    return withErrorHandling(apiGet({
+                        client: this.client,
+                        distributorID: this.distributorID,
+                        locale,
+                        endpoint: "/{api_version}/customer-support/subjects",
+                    }));
+                }
+            },
+            args: () => [this.locale, this.content],
+        });
+        this.onLinkClick = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const link = target.closest("a");
+            if (!link)
+                return;
+            const href = link.getAttribute("href") || "";
+            // Leave external and safe-scheme links to the browser; only relative
+            // (internal) paths are handled as in-embed navigation below. `mailto:`/`tel:`
+            // would otherwise be mis-routed as a `/coras` path and break.
+            if (/^(?:https?|mailto|tel):/i.test(href)) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const text = (link.textContent || "").trim();
+            if (href === "#contact-link") {
+                this.dispatchPageUpdate({ content: "contact" });
+                return;
+            }
+            if (href === "#microsite-link" || href === "#checkin-link") {
+                this.dispatchPageUpdate({ page: "landing" });
+                return;
+            }
+            if (href === "#privacy-policy-link") {
+                this.dispatchPageUpdate({ content: "privacy-policy" });
+                return;
+            }
+            this.dispatchPageUpdate({ href, text });
+        };
+    }
+    static { this.styles = styles; }
+    getPageProperties() {
+        return {
+            page: "help",
+            currency: this.currency,
+            locale: this.locale,
+            content: this.content,
+        };
+    }
+    get content() {
+        return this._content;
+    }
+    set content(value) {
+        const oldValue = this._content;
+        this._content = value || "faq-attractions";
+        this.requestUpdate("content", oldValue);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (getLocale() !== this.locale) {
+            setLocale(this.locale);
+        }
+    }
+    handleFormValueChange(fieldName, value) {
+        this.formValues = {
+            ...this.formValues,
+            [fieldName]: value,
+        };
+        if (this.submissionAttempts > 0) {
+            this.validateField(fieldName, value);
+        }
+    }
+    validateField(fieldName, value) {
+        const fieldConfig = FIELD_CONFIG[fieldName];
+        if (!fieldConfig)
+            return true;
+        const validator = fieldConfig.validators;
+        let isValid = true;
+        let errorMessage = "";
+        if (!validator) {
+            this.formErrors = {
+                ...this.formErrors,
+                [fieldName]: "",
+            };
+            return true;
+        }
+        const validationResult = validator({ value });
+        if (validationResult) {
+            errorMessage = validationResult;
+            isValid = false;
+        }
+        this.formErrors = {
+            ...this.formErrors,
+            [fieldName]: errorMessage,
+        };
+        return isValid;
+    }
+    validateForm() {
+        let isValid = true;
+        Object.keys(this.formValues).forEach((fieldName) => {
+            const value = this.formValues[fieldName];
+            const fieldIsValid = this.validateField(fieldName, value);
+            if (!fieldIsValid) {
+                isValid = false;
+            }
+        });
+        return isValid;
+    }
+    handleSubjectSelect(option) {
+        this.subjectSelectLabel = option.label;
+        this.formValues = {
+            ...this.formValues,
+            subject: option.value,
+        };
+        this.subjectDropdownOpen = false;
+        if (this.submissionAttempts > 0) {
+            this.validateField("subject", option.value);
+        }
+    }
+    toggleSubjectDropdown() {
+        this.subjectDropdownOpen = !this.subjectDropdownOpen;
+    }
+    closeSubjectDropdown() {
+        this.subjectDropdownOpen = false;
+    }
+    handleModalClose() {
+        this.showModal = false;
+        this.formElement.reset();
+        this.subjectSelectLabel = "";
+        this.dispatchPageUpdate({ page: "landing" });
+    }
+    handleTabChange(event) {
+        if (this.content !== "contact" && this.subjectDropdownOpen) {
+            this.subjectDropdownOpen = false;
+        }
+        this.dispatchPageUpdate({
+            content: event.detail.tab,
+        });
+    }
+    renderFaqAccordion() {
+        return this.helpTabTask.render({
+            error: () => {
+                // this.showErrorModalOnce();
+                return html ``;
+            },
+            loading: () => html `loading`,
+            complete: (result) => {
+                if (!result?.data)
+                    return nothing;
+                const data = result.data;
+                return html `
+          <coras-accordion>
+            ${data.content.sections.map((section) => html `
+                <coras-accordion-item
+                  label=${section.name}
+                  assets-url="${this.assetsURL}"
+                >
+                  ${section.items.map(({ header, content }) => html `
+                      <div class="faq-items" @click=${this.onLinkClick}>
+                        <section class="faq-item">
+                          <span>${header}</span>
+                          <p>${unsafeHTML(sanitizeHtml(content))}</p>
+                        </section>
+                      </div>
+                    `)}
+                </coras-accordion-item>
+              `)}
+          </coras-accordion>
+        `;
+            },
+        });
+    }
+    renderAttractionsTicketsTab() {
+        return html `
+      <coras-tab slot="nav" panel="faq-attractions" variant="chip">
+        ${msg("Attractions tickets")}
+      </coras-tab>
+
+      <coras-tab-panel slot="body" name="faq-attractions">
+        <div class="tab-content">${this.renderFaqAccordion()}</div>
+      </coras-tab-panel>
+    `;
+    }
+    renderMusicTicketsTab() {
+        return html `
+      <coras-tab slot="nav" panel="faq-music" variant="chip">
+        ${msg("Music tickets")}
+      </coras-tab>
+
+      <coras-tab-panel slot="body" name="faq-music">
+        <div class="tab-content">${this.renderFaqAccordion()}</div>
+      </coras-tab-panel>
+    `;
+    }
+    renderTheatreTicketsTab() {
+        return html `
+      <coras-tab slot="nav" panel="faq-theatres" variant="chip">
+        ${msg("Theatre tickets")}
+      </coras-tab>
+
+      <coras-tab-panel slot="body" name="faq-theatres">
+        <div class="tab-content">${this.renderFaqAccordion()}</div>
+      </coras-tab-panel>
+    `;
+    }
+    renderSportTicketsTab() {
+        return html `
+      <coras-tab slot="nav" panel="faq-sports" variant="chip">
+        ${msg("Sport tickets")}
+      </coras-tab>
+
+      <coras-tab-panel slot="body" name="faq-sports">
+        <div class="tab-content">${this.renderFaqAccordion()}</div>
+      </coras-tab-panel>
+    `;
+    }
+    renderInputField(fieldName) {
+        const fieldConfig = FIELD_CONFIG[fieldName];
+        if (!fieldConfig)
+            return null;
+        const label = fieldConfig.label();
+        const placeholder = fieldConfig.placeholder();
+        const value = this.formValues[fieldName] || "";
+        const error = this.formErrors[fieldName] || "";
+        const validated = this.submissionAttempts > 0;
+        const hasError = validated && !!error;
+        return html `
+      <coras-field
+        type="${fieldConfig.type}"
+        autocomplete="${fieldConfig.autocomplete}"
+        name="${fieldName}"
+        label="${label}"
+        value="${value}"
+        ?validated=${validated}
+        ?error=${hasError}
+        help-text=${error}
+        placeholder="${placeholder}"
+        data-testid="${fieldName}"
+        @value-changed=${(event) => {
+            event.stopPropagation();
+            this.handleFormValueChange(fieldName, event.detail.value);
+        }}
+        ?is-textarea="${fieldName === "message"}"
+        validation-icon
+      ></coras-field>
+    `;
+    }
+    renderSubjectField() {
+        const fieldName = "subject";
+        const fieldConfig = FIELD_CONFIG[fieldName];
+        if (!fieldConfig)
+            return null;
+        const label = fieldConfig.label();
+        const placeholder = fieldConfig.placeholder();
+        const value = this.formValues[fieldName] || "";
+        const error = this.formErrors[fieldName] || "";
+        const validated = this.submissionAttempts > 0;
+        const hasError = validated && !!error;
+        return html `
+      <coras-dropdown
+        ?open=${this.subjectDropdownOpen}
+        @dropdown-close-request=${this.closeSubjectDropdown}
+        auto-focus
+      >
+        <coras-button
+          slot="trigger"
+          variant="outlined"
+          radius="small"
+          height="md"
+          border-color="light"
+          expanded
+          background
+          @click=${this.toggleSubjectDropdown}
+          ?error=${hasError}
+          aria-label=${label}
+          data-testid="subject"
+        >
+          <coras-icon
+            assets-url="${this.assetsURL}"
+            slot="suffix"
+            icon="keyboard-arrow-down"
+          ></coras-icon>
+          <span>${this.subjectSelectLabel || placeholder}</span>
+        </coras-button>
+
+        <coras-select-list spacious>
+          ${this.content === "contact"
+            ? this.subjectsTask.render({
+                loading: () => html `
+                  <coras-select-option></coras-select-option>
+                `,
+                error: () => html `
+                  <coras-select-option></coras-select-option>
+                `,
+                complete: (response) => {
+                    const subjects = response?.data ?? [];
+                    return subjects.map((opt) => html `
+                      <coras-select-option
+                        key=${opt.value}
+                        ?selected=${this.formValues[fieldName] === opt.value}
+                        @click=${() => this.handleSubjectSelect(opt)}
+                      >
+                        ${opt.label}
+                      </coras-select-option>
+                    `);
+                },
+            })
+            : html ``}
+        </coras-select-list>
+      </coras-dropdown>
+
+      <input
+        type="hidden"
+        name=${fieldName}
+        value=${value}
+        aria-hidden="true"
+      />
+    `;
+    }
+    renderInfoContent() {
+        return this.helpTabTask.render({
+            error: () => html ``,
+            loading: () => html `loading`,
+            complete: (result) => {
+                if (!result?.data) {
+                    return nothing;
+                }
+                const data = result.data;
+                const sections = data?.content?.sections ?? [];
+                return html `
+          <h1>${data?.title}</h1>
+          <div class="content">
+            <div
+              class="info-numbered"
+              part="info-list"
+              @click=${this.onLinkClick}
+            >
+              ${renderNumberedTree(sections)}
+            </div>
+          </div>
+        `;
+            },
+        });
+    }
+    renderContactForm() {
+        return html `
+      <coras-tab
+        data-testid="contact-us-tab"
+        slot="nav"
+        panel="contact"
+        variant="chip"
+      >
+        ${msg("Contact us")}
+      </coras-tab>
+
+      <coras-tab-panel slot="body" name="contact">
+        <form
+          id="form"
+          class="tab-content"
+          @submit=${async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.submissionAttempts += 1;
+            const isValid = this.validateForm();
+            if (isValid) {
+                this.processing = true;
+                try {
+                    const fullName = (this.formValues.name || "").trim();
+                    const [first, ...rest] = fullName.split(/\s+/).filter(Boolean);
+                    const first_name = first || "";
+                    const last_name = rest.join(" ") || first || "";
+                    const subject = this.formValues
+                        .subject;
+                    await withErrorHandling(apiPost({
+                        client: this.client,
+                        distributorID: this.distributorID,
+                        locale: this.locale,
+                        endpoint: "/{api_version}/customer-support",
+                        body: {
+                            language_code: this.locale.split("-")[0],
+                            first_name,
+                            last_name,
+                            email: this.formValues.email,
+                            attraction_name: this.formValues.eventName,
+                            subject,
+                            question: this.formValues.message,
+                            order_reference: this.formValues.orderReference || null,
+                            attraction_location: null,
+                            attraction_date: null,
+                        },
+                    }));
+                    this.showModal = true;
+                }
+                catch {
+                    // TODO: consider showing an error message
+                }
+                finally {
+                    this.processing = false;
+                }
+            }
+        }}
+        >
+          <coras-message-card variant="info" assets-url="${this.assetsURL}">
+            ${msg("If you can’t find what you are looking for in our info sections, please tell us how we can help")}
+          </coras-message-card>
+
+          ${this.renderInputField("name")} ${this.renderInputField("email")}
+          ${this.renderInputField("eventName")}
+          ${this.renderInputField("orderReference")}
+          ${this.renderSubjectField()} ${this.renderInputField("message")}
+
+          <div class="footer">
+            <coras-button
+              type="submit"
+              data-testid="submit"
+              ?disabled=${this.processing}
+            >
+              ${msg("Send query ")}
+            </coras-button>
+          </div>
+        </form>
+      </coras-tab-panel>
+    `;
+    }
+    render() {
+        const isInfoPage = infoPages.includes(this.content);
+        return html `
+      <coras-layout ?with-basket=${false}>
+        <slot name="navbar" slot="navbar"></slot>
+        ${isInfoPage
+            ? this.renderInfoContent()
+            : html `
+              <h1>${msg("I need help with...")}</h1>
+              <coras-tabs
+                selected-tab=${this.content}
+                @tab-changed=${this.handleTabChange}
+              >
+                ${this.renderAttractionsTicketsTab()}
+                ${this.renderTheatreTicketsTab()}
+                ${this.renderMusicTicketsTab()} ${this.renderSportTicketsTab()}
+                ${this.renderContactForm()}
+              </coras-tabs>
+            `}
+
+        <coras-dialog
+          ?open=${this.showModal}
+          @dialog-closed=${this.handleModalClose}
+        >
+          <coras-icon
+            slot="icon"
+            assets-url="${this.assetsURL}"
+            class="icon"
+            icon="check-circle"
+          ></coras-icon>
+          <div class="container">
+            <h1 class="title">
+              ${msg("Thank you, we’ve received your query")}
+            </h1>
+
+            <p class="message">
+              ${msg("We will reply to the email address you provided as soon as possible. Need to confirm message that goes here.")}
+            </p>
+          </div>
+          <div class="footer-actions" slot="footer">
+            <coras-button @click=${this.handleModalClose}>
+              ${msg("Browse other events")}
+            </coras-button>
+          </div>
+        </coras-dialog>
+        <slot name="footer" slot="footer"></slot>
+      </coras-layout>
+    `;
+    }
+};
+__decorate([
+    state()
+], CorasHelpPage.prototype, "formValues", void 0);
+__decorate([
+    state()
+], CorasHelpPage.prototype, "formErrors", void 0);
+__decorate([
+    state()
+], CorasHelpPage.prototype, "submissionAttempts", void 0);
+__decorate([
+    property({ attribute: "content" })
+], CorasHelpPage.prototype, "content", null);
+__decorate([
+    state()
+], CorasHelpPage.prototype, "subjectSelectLabel", void 0);
+__decorate([
+    state()
+], CorasHelpPage.prototype, "subjectDropdownOpen", void 0);
+__decorate([
+    state()
+], CorasHelpPage.prototype, "showModal", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasHelpPage.prototype, "processing", void 0);
+__decorate([
+    query("#form")
+], CorasHelpPage.prototype, "formElement", void 0);
+CorasHelpPage = __decorate([
+    localized()
+], CorasHelpPage);
+export { CorasHelpPage };

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

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

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

@@ -0,0 +1,12 @@
+import type { InputFieldType, InputFieldAutocomplete } from "../payment-page/payment-page.types.js";
+interface HelpPageFieldConfig {
+    label: () => string;
+    placeholder: () => string;
+    validators: ((params: {
+        value: string;
+    }) => string | undefined) | undefined;
+    type: InputFieldType;
+    autocomplete: InputFieldAutocomplete;
+}
+export declare const FIELD_CONFIG: Record<string, HelpPageFieldConfig>;
+export {};

package/dist/views/help-page/help-page.fields.js

@@ -0,0 +1,46 @@
+import { composeValidators, required, validEmail, } from "./help-page.validators.js";
+import { msg } from "@lit/localize";
+export const FIELD_CONFIG = {
+    name: {
+        label: () => msg("Name"),
+        placeholder: () => msg("Enter your name"),
+        validators: required,
+        type: "text",
+        autocomplete: "name",
+    },
+    email: {
+        label: () => msg("Email address"),
+        placeholder: () => msg("Enter your email address"),
+        validators: composeValidators(required, validEmail),
+        type: "email",
+        autocomplete: "email",
+    },
+    eventName: {
+        label: () => msg("Event or attraction name"),
+        placeholder: () => msg("Enter event name"),
+        validators: required,
+        type: "text",
+        autocomplete: "off",
+    },
+    orderReference: {
+        label: () => msg("Order reference"),
+        placeholder: () => "",
+        validators: undefined,
+        type: "text",
+        autocomplete: "off",
+    },
+    subject: {
+        label: () => msg("What is your question about"),
+        placeholder: () => msg("Select from options"),
+        validators: required,
+        type: "text",
+        autocomplete: "off",
+    },
+    message: {
+        label: () => msg("Tell us how we can help"),
+        placeholder: () => "",
+        validators: required,
+        type: "text",
+        autocomplete: "off",
+    },
+};

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

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

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

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