@coras-io/embed 0.1.0

package/dist/views/payment-page/partials/activity-details/activity-details.styles.js

@@ -0,0 +1,77 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+  }
+
+  h2 {
+    font-size: var(
+      --payment-page-header-font-size,
+      var(--font-size-lg, 1.5rem)
+    );
+    line-height: var(
+      --payment-page-header-line-height,
+      var(--font-line-height-lg, 1.75rem)
+    );
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 0 0 1rem 0;
+    color: var(--payment-page-header-color, var(--color-text-primary, #161c44));
+  }
+
+  h3 {
+    font-size: var(
+      --activities-details-label-font-size,
+      var(--font-size-2xl, 1.5rem)
+    );
+    font-weight: var(
+      --activities-details-label-font-weight,
+      var(--font-weight-semibold, 600)
+    );
+    margin: 0 0 0.75rem 0;
+    color: var(
+      --activities-details-label-color,
+      var(--color-text-primary, #161c44)
+    );
+  }
+
+  h4 {
+    font-size: var(
+      --activities-details-label-span-font-size,
+      var(--font-size-base, 1rem)
+    );
+    font-weight: var(
+      --activities-details-label-span-font-weight,
+      var(--font-weight-medium, 500)
+    );
+    margin: 0 0 0.25rem 0;
+    color: var(
+      --activities-details-label-color,
+      var(--color-text-primary, #161c44)
+    );
+  }
+
+  .fields-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .reservation-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .reservation-requirements-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .ticket-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+`;

package/dist/views/payment-page/partials/billing-address/billing-address.component.d.ts

@@ -0,0 +1,34 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { components } from "../../../../core/types/api-schema.js";
+import { FormValues, FieldsConfig } from "../../payment-page.types.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/joined-fields/joined-fields.js";
+import "../country-field/country-field.js";
+/**
+ * Billing address form section component.
+ * Renders address line 1, line 2, city, postcode, country, and email fields.
+ */
+export declare class CorasBillingAddress extends LitElement {
+    static styles: CSSResultGroup;
+    /** Current form values */
+    formValues: FormValues;
+    /** Current form errors by field name */
+    formErrors: Record<string, string>;
+    /** Number of form submission attempts (for showing validation) */
+    submissionAttempts: number;
+    /** Available countries for billing address */
+    countries: components["schemas"]["Country"][];
+    /** Assets URL for icons */
+    assetsURL: string;
+    /** Field configuration */
+    fieldsConfig: FieldsConfig;
+    /** Whether to show billing address fields */
+    showBillingAddress: boolean;
+    /** Whether to show the email field */
+    showEmail: boolean;
+    private getFieldValue;
+    private handleValueChanged;
+    private renderField;
+    private renderAddressFields;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

package/dist/views/payment-page/partials/billing-address/billing-address.component.js

@@ -0,0 +1,165 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { fireInternalEvent } from "../../../../core/events.js";
+import { getFieldValue, getFieldConfig } from "../../payment-page.utils.js";
+import styles from "./billing-address.styles.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/joined-fields/joined-fields.js";
+import "../country-field/country-field.js";
+/**
+ * Billing address form section component.
+ * Renders address line 1, line 2, city, postcode, country, and email fields.
+ */
+let CorasBillingAddress = class CorasBillingAddress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current form values */
+        this.formValues = {};
+        /** Current form errors by field name */
+        this.formErrors = {};
+        /** Number of form submission attempts (for showing validation) */
+        this.submissionAttempts = 0;
+        /** Available countries for billing address */
+        this.countries = [];
+        /** Assets URL for icons */
+        this.assetsURL = "";
+        /** Field configuration */
+        this.fieldsConfig = {};
+        /** Whether to show billing address fields */
+        this.showBillingAddress = false;
+        /** Whether to show the email field */
+        this.showEmail = false;
+    }
+    static { this.styles = styles; }
+    getFieldValue(fieldName) {
+        return getFieldValue(fieldName, this.formValues);
+    }
+    handleValueChanged(fieldName, value) {
+        fireInternalEvent(this, "value-changed", { fieldName, value });
+    }
+    renderField(fieldName, options) {
+        const config = getFieldConfig(fieldName, this.fieldsConfig);
+        if (!config)
+            return nothing;
+        const value = this.getFieldValue(fieldName);
+        const error = this.formErrors[fieldName] || "";
+        const showValidation = this.submissionAttempts > 0;
+        const hasError = showValidation && !!error;
+        return html `
+      <coras-field
+        type=${config.type}
+        autocomplete=${config.autocomplete}
+        name=${fieldName}
+        label=${config.label}
+        placeholder=${config.placeholder || ""}
+        value=${value}
+        ?error=${hasError}
+        help-text=${options?.suppressHelpText
+            ? ""
+            : hasError
+                ? error
+                : config.helpText || ""}
+        ?validated=${showValidation}
+        ?borderless=${options?.borderless}
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleValueChanged(fieldName, e.detail.value);
+        }}
+        validation-icon
+      ></coras-field>
+    `;
+    }
+    renderAddressFields() {
+        if (!this.showBillingAddress)
+            return nothing;
+        const showValidation = this.submissionAttempts > 0;
+        const cityError = this.formErrors["city"] || "";
+        const postcodeError = this.formErrors["postcode"] || "";
+        const joinedErrorMessage = cityError || postcodeError || "";
+        const hasJoinedError = showValidation && !!joinedErrorMessage;
+        return html `
+      ${this.renderField("addressLine1")} ${this.renderField("addressLine2")}
+      <coras-joined-fields
+        ?validated=${showValidation}
+        ?error=${hasJoinedError}
+        help-text=${hasJoinedError ? joinedErrorMessage : ""}
+      >
+        <div slot="left">
+          ${this.renderField("city", {
+            borderless: true,
+            suppressHelpText: true,
+        })}
+        </div>
+        <div slot="right">
+          ${this.renderField("postcode", {
+            borderless: true,
+            suppressHelpText: true,
+        })}
+        </div>
+      </coras-joined-fields>
+      <coras-country-field
+        .countries=${this.countries}
+        .value=${this.getFieldValue("country")}
+        ?validated=${showValidation}
+        ?has-error=${showValidation && !!this.formErrors["country"]}
+        error=${(showValidation && this.formErrors["country"]) || ""}
+        assets-url=${this.assetsURL}
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleValueChanged("country", e.detail.value);
+        }}
+      ></coras-country-field>
+    `;
+    }
+    render() {
+        // Don't render if no fields are visible
+        if (!this.showBillingAddress && !this.showEmail) {
+            return nothing;
+        }
+        const heading = this.showBillingAddress
+            ? msg("Billing address")
+            : msg("Contact");
+        return html `
+      <h2>${heading}</h2>
+      <div class="fields-container">
+        ${this.renderAddressFields()}
+        ${this.showEmail ? this.renderField("email") : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CorasBillingAddress.prototype, "formValues", void 0);
+__decorate([
+    property({ type: Object })
+], CorasBillingAddress.prototype, "formErrors", void 0);
+__decorate([
+    property({ type: Number })
+], CorasBillingAddress.prototype, "submissionAttempts", void 0);
+__decorate([
+    property({ type: Array })
+], CorasBillingAddress.prototype, "countries", void 0);
+__decorate([
+    property({ type: String })
+], CorasBillingAddress.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Object })
+], CorasBillingAddress.prototype, "fieldsConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasBillingAddress.prototype, "showBillingAddress", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasBillingAddress.prototype, "showEmail", void 0);
+CorasBillingAddress = __decorate([
+    localized()
+], CorasBillingAddress);
+export { CorasBillingAddress };

package/dist/views/payment-page/partials/billing-address/billing-address.d.ts

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

package/dist/views/payment-page/partials/billing-address/billing-address.js

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

package/dist/views/payment-page/partials/billing-address/billing-address.styles.d.ts

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

package/dist/views/payment-page/partials/billing-address/billing-address.styles.js

@@ -0,0 +1,27 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+  }
+
+  h2 {
+    font-size: var(
+      --payment-page-header-font-size,
+      var(--font-size-lg, 1.5rem)
+    );
+    line-height: var(
+      --payment-page-header-line-height,
+      var(--font-line-height-lg, 1.75rem)
+    );
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 0 0 1rem 0;
+    color: var(--payment-page-header-color, var(--color-text-primary, #161c44));
+  }
+
+  .fields-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+`;

package/dist/views/payment-page/partials/confirmation/confirmation.component.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import "../../../../components/icon/icon.js";
+import { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
+import { SupportedLocales } from "../../../../core/types/index.js";
+export declare class CorasConfirmation extends LitElement {
+    static styles: import("lit").CSSResult;
+    referenceId: string;
+    userEmail: string;
+    locale: SupportedLocales;
+    reservations: ReservationSummary[];
+    loyalty: boolean;
+    private dispatchPageUpdate;
+    private handleHelpClick;
+    private getImgixParams;
+    private renderTicketImage;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/views/payment-page/partials/confirmation/confirmation.component.js

@@ -0,0 +1,193 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import styles from "./confirmation.styles.js";
+import "../../../../components/icon/icon.js";
+import { DEFAULT_LOCALE } from "../../../constants.js";
+import { convertToLocaleCurrency } from "../../../../core/currency/index.js";
+import { formatDateTimeForDisplay, formatTimeForDisplay, } from "../../../../core/utils/datetime.js";
+import { consume } from "@lit/context";
+import { pageDispatchContext, } from "../../../../contexts/events.context.js";
+let CorasConfirmation = class CorasConfirmation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.referenceId = "";
+        this.userEmail = "";
+        this.locale = DEFAULT_LOCALE;
+        this.reservations = [];
+        this.loyalty = false;
+    }
+    static { this.styles = styles; }
+    handleHelpClick(event) {
+        event.preventDefault();
+        this.dispatchPageUpdate?.({ page: "help" });
+    }
+    getImgixParams() {
+        const params = new URLSearchParams({
+            auto: "compress,format",
+            fit: "crop",
+            q: "85",
+            dpr: "2",
+            w: "100",
+            h: "100",
+        });
+        return params.toString();
+    }
+    renderTicketImage(reservation) {
+        if (!reservation.media || reservation.media.length === 0) {
+            return nothing;
+        }
+        const imageUrl = reservation.media[0]?.url || "";
+        const imgixParams = this.getImgixParams();
+        const finalImageUrl = imageUrl.includes("?")
+            ? `${imageUrl}&${imgixParams}`
+            : `${imageUrl}?${imgixParams}`;
+        return html `
+      <div class="ticket-image">
+        <img
+          src="${finalImageUrl}"
+          alt="${reservation.attraction_name}"
+          width="100"
+          height="100"
+          loading="eager"
+        />
+      </div>
+    `;
+    }
+    render() {
+        const isMultipleBookings = this.reservations.length > 1;
+        return html `
+      <div class="confirmation-title-container">
+        <div class="success-icon">
+          <coras-icon icon="success" size="small"></coras-icon>
+        </div>
+        <h1 class="confirmation-title">
+          ${isMultipleBookings
+            ? msg("Thanks, your bookings are confirmed!")
+            : msg("Thanks, your booking is confirmed!")}
+        </h1>
+      </div>
+
+      <div class="confirmation-header">
+        <p class="order-reference">
+          ${msg("Order reference")} <strong>${this.referenceId}</strong>
+        </p>
+        <p class="email-confirmation">
+          ${msg("We've sent your order confirmation to")}
+          <strong>${this.userEmail}</strong>
+        </p>
+      </div>
+
+      ${this.reservations.map((reservation, index) => html `
+          ${index > 0 ? html `<div class="reservation-spacer"></div>` : nothing}
+
+          <div class="confirmation-container">
+            <div class="ticket-details">
+              ${this.renderTicketImage(reservation)}
+              <div class="ticket-info">
+                <div class="ticket-title">
+                  ${reservation.number_of_tickets} x ${msg("tickets for")}
+                  ${reservation.attraction_name}
+                </div>
+              </div>
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="info-grid">
+              <div class="info-item">
+                <div class="info-label">${msg("Time")}</div>
+                <div class="info-value">
+                  ${formatDateTimeForDisplay({
+            dateTime: reservation.start_datetime,
+            timezone: reservation.timezone,
+            locale: this.locale || navigator.language,
+        }, {
+            includeYear: true,
+            shortFormat: true,
+        })},
+                  ${formatTimeForDisplay({
+            dateTime: reservation.start_datetime,
+            timezone: reservation.timezone,
+            locale: this.locale || navigator.language,
+        })}
+                </div>
+              </div>
+
+              <div class="info-item">
+                <div class="info-label">${msg("Location")}</div>
+                <div class="info-value">
+                  ${reservation.location_name
+            ? html `${reservation.location_name}, ${reservation.city}`
+            : reservation.city}
+                </div>
+              </div>
+
+              ${"tour_language" in reservation
+            ? html `
+                    <div class="info-item">
+                      <div class="info-label">${msg("Language")}</div>
+                      <div class="info-value">${reservation.tour_language}</div>
+                    </div>
+                  `
+            : nothing}
+
+              <div class="info-item">
+                <div class="info-label">${msg("Amount Paid")}</div>
+                <div class="info-value">
+                  ${(() => {
+            const payAmount = reservation.loyalty?.pay
+                ? Number(Object.values(reservation.loyalty.pay)[0] ?? 0)
+                : null;
+            return this.loyalty && payAmount
+                ? `${new Intl.NumberFormat(this.locale || navigator.language).format(payAmount)} FIDA`
+                : convertToLocaleCurrency({
+                    value: reservation.total_price,
+                    locale: this.locale || navigator.language,
+                    currency: (reservation.currency ||
+                        "USD"),
+                });
+        })()}
+                </div>
+              </div>
+            </div>
+          </div>
+        `)}
+
+      <div class="help-text">
+        ${msg("If you need help with your order, please visit our")}
+        <span class="help-link" @click="${this.handleHelpClick}">
+          ${msg("Help Centre")}
+        </span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], CorasConfirmation.prototype, "referenceId", void 0);
+__decorate([
+    property({ type: String })
+], CorasConfirmation.prototype, "userEmail", void 0);
+__decorate([
+    property({ type: String })
+], CorasConfirmation.prototype, "locale", void 0);
+__decorate([
+    property({ type: Array })
+], CorasConfirmation.prototype, "reservations", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasConfirmation.prototype, "loyalty", void 0);
+__decorate([
+    consume({ context: pageDispatchContext })
+], CorasConfirmation.prototype, "dispatchPageUpdate", void 0);
+CorasConfirmation = __decorate([
+    localized()
+], CorasConfirmation);
+export { CorasConfirmation };

package/dist/views/payment-page/partials/confirmation/confirmation.d.ts

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

package/dist/views/payment-page/partials/confirmation/confirmation.js

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

package/dist/views/payment-page/partials/confirmation/confirmation.styles.d.ts

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