@coras-io/embed 0.1.0

package/dist/views/payment-page/controllers/stripe-payment.controller.d.ts

@@ -0,0 +1,66 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+import type { PaymentMethod, PaymentRequestPaymentMethodEvent } from "@stripe/stripe-js";
+import { StripeComponent, CustomerData } from "../payment-page.types.js";
+import { PaymentFiatMethodType } from "../../../components/payment-fiat-method/payment-fiat-method.component.js";
+/**
+ * StripePaymentController manages Stripe-specific payment processing:
+ * - Card payment confirmation
+ * - Apple Pay / Google Pay via PaymentRequest API
+ * - Field-level error mapping from Stripe's error responses
+ * - Payment intent validation
+ */
+export declare class StripePaymentController implements ReactiveController {
+    private host;
+    authorizedPaymentMethod: PaymentMethod | null;
+    authorizedPaymentEvent: PaymentRequestPaymentMethodEvent | null;
+    cardError: string;
+    cardNumberErrorExt: string;
+    cardExpiryErrorExt: string;
+    cardCvcErrorExt: string;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Store the authorized payment method from Apple Pay / Google Pay.
+     */
+    setAuthorizedPayment(paymentMethod: PaymentMethod, event: PaymentRequestPaymentMethodEvent): void;
+    /**
+     * Clear all Stripe field-level errors.
+     */
+    clearFieldErrors(): void;
+    /**
+     * Set an error for a specific Stripe card field.
+     */
+    setFieldError(field: "number" | "expiry" | "cvc" | "general", message: string): void;
+    /**
+     * Clear all errors (global + field-level).
+     */
+    clearAllErrors(): void;
+    /**
+     * Whether any Stripe error is currently active.
+     */
+    get hasError(): boolean;
+    /**
+     * Validate that a client_secret has valid payment intent format.
+     */
+    validatePaymentIntentFormat(clientSecret: string): boolean;
+    /**
+     * Process a Stripe payment (card or Apple/Google Pay).
+     *
+     * Returns true if payment was successful, false otherwise.
+     * Sets error state on the controller for the host to render.
+     */
+    processPayment(clientSecret: string, stripeComponent: StripeComponent, paymentMethod: PaymentFiatMethodType, customer: CustomerData, _expectedAmount: number): Promise<boolean>;
+    /**
+     * Handle the result of a Stripe card validation error.
+     * Maps the Stripe error to the appropriate field and sets errors.
+     */
+    handleStripeValidationError(error: {
+        message?: string;
+        code?: string;
+        type?: string;
+        param?: string;
+    }): void;
+    private processPaymentRequest;
+    private processCardPayment;
+}

package/dist/views/payment-page/controllers/stripe-payment.controller.js

@@ -0,0 +1,202 @@
+import { mapStripeErrorToField, extractPaymentIntentId, } from "../payment-page.utils.js";
+/**
+ * StripePaymentController manages Stripe-specific payment processing:
+ * - Card payment confirmation
+ * - Apple Pay / Google Pay via PaymentRequest API
+ * - Field-level error mapping from Stripe's error responses
+ * - Payment intent validation
+ */
+export class StripePaymentController {
+    constructor(host) {
+        this.authorizedPaymentMethod = null;
+        this.authorizedPaymentEvent = null;
+        this.cardError = "";
+        this.cardNumberErrorExt = "";
+        this.cardExpiryErrorExt = "";
+        this.cardCvcErrorExt = "";
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.authorizedPaymentMethod = null;
+        this.authorizedPaymentEvent = null;
+    }
+    /**
+     * Store the authorized payment method from Apple Pay / Google Pay.
+     */
+    setAuthorizedPayment(paymentMethod, event) {
+        this.authorizedPaymentMethod = paymentMethod;
+        this.authorizedPaymentEvent = event;
+        this.host.requestUpdate();
+    }
+    /**
+     * Clear all Stripe field-level errors.
+     */
+    clearFieldErrors() {
+        this.cardNumberErrorExt = "";
+        this.cardExpiryErrorExt = "";
+        this.cardCvcErrorExt = "";
+        this.host.requestUpdate();
+    }
+    /**
+     * Set an error for a specific Stripe card field.
+     */
+    setFieldError(field, message) {
+        if (field === "number")
+            this.cardNumberErrorExt = message;
+        if (field === "expiry")
+            this.cardExpiryErrorExt = message;
+        if (field === "cvc")
+            this.cardCvcErrorExt = message;
+        this.host.requestUpdate();
+    }
+    /**
+     * Clear all errors (global + field-level).
+     */
+    clearAllErrors() {
+        this.cardError = "";
+        this.clearFieldErrors();
+    }
+    /**
+     * Whether any Stripe error is currently active.
+     */
+    get hasError() {
+        return !!(this.cardError ||
+            this.cardNumberErrorExt ||
+            this.cardExpiryErrorExt ||
+            this.cardCvcErrorExt);
+    }
+    /**
+     * Validate that a client_secret has valid payment intent format.
+     */
+    validatePaymentIntentFormat(clientSecret) {
+        const intentId = extractPaymentIntentId(clientSecret);
+        if (!intentId || !intentId.startsWith("pi_")) {
+            console.error("Invalid payment intent format");
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Process a Stripe payment (card or Apple/Google Pay).
+     *
+     * Returns true if payment was successful, false otherwise.
+     * Sets error state on the controller for the host to render.
+     */
+    async processPayment(clientSecret, stripeComponent, paymentMethod, customer, _expectedAmount) {
+        const stripe = stripeComponent?.getStripe();
+        const elements = stripeComponent?.getElements();
+        const cardElement = stripeComponent?.getCardNumberElement();
+        if (!stripe || !elements) {
+            this.cardError = "Payment configuration error. Please try again.";
+            this.host.requestUpdate();
+            return false;
+        }
+        // Reject malformed client_secret values before they reach Stripe's SDK
+        if (!this.validatePaymentIntentFormat(clientSecret)) {
+            this.cardError = "Payment validation error. Please try again.";
+            this.host.requestUpdate();
+            return false;
+        }
+        if (paymentMethod === "google-pay" || paymentMethod === "apple-pay") {
+            return this.processPaymentRequest(stripe, clientSecret);
+        }
+        if (!cardElement) {
+            this.cardError = "Payment configuration error. Please try again.";
+            this.host.requestUpdate();
+            return false;
+        }
+        return this.processCardPayment(stripe, clientSecret, cardElement, customer);
+    }
+    /**
+     * Handle the result of a Stripe card validation error.
+     * Maps the Stripe error to the appropriate field and sets errors.
+     */
+    handleStripeValidationError(error) {
+        this.clearFieldErrors();
+        const message = error.message || "Payment failed";
+        const field = mapStripeErrorToField(error);
+        this.cardError = "";
+        if (field) {
+            this.setFieldError(field, message);
+        }
+        else {
+            this.cardError = message;
+            this.host.requestUpdate();
+        }
+    }
+    async processPaymentRequest(stripe, clientSecret) {
+        if (!this.authorizedPaymentMethod || !this.authorizedPaymentEvent) {
+            this.cardError = "Payment authorization failed. Please try again.";
+            this.host.requestUpdate();
+            return false;
+        }
+        try {
+            const result = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: this.authorizedPaymentMethod.id,
+            });
+            if (result.error) {
+                console.error(`${this.authorizedPaymentEvent ? "wallet" : "card"} payment failed`);
+                this.cardError = result.error.message || "Payment failed";
+                this.authorizedPaymentEvent.complete("fail");
+                this.authorizedPaymentMethod = null;
+                this.authorizedPaymentEvent = null;
+                this.host.requestUpdate();
+                return false;
+            }
+            this.authorizedPaymentEvent.complete("success");
+            this.authorizedPaymentMethod = null;
+            this.authorizedPaymentEvent = null;
+            this.host.requestUpdate();
+            return true;
+        }
+        catch {
+            console.error("Error processing wallet payment");
+            this.cardError =
+                "An error occurred while processing your payment. Please try again.";
+            if (this.authorizedPaymentEvent) {
+                this.authorizedPaymentEvent.complete("fail");
+            }
+            this.authorizedPaymentMethod = null;
+            this.authorizedPaymentEvent = null;
+            this.host.requestUpdate();
+            return false;
+        }
+    }
+    async processCardPayment(stripe, clientSecret, cardElement, customer) {
+        try {
+            const paymentIntentId = extractPaymentIntentId(clientSecret);
+            if (!paymentIntentId) {
+                console.error("Invalid client secret format");
+                this.cardError = "Invalid payment configuration. Please try again.";
+                this.host.requestUpdate();
+                return false;
+            }
+            const result = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: {
+                    card: cardElement,
+                    billing_details: {
+                        name: customer.name,
+                        email: customer.email,
+                        phone: customer.phone,
+                        address: customer.address,
+                    },
+                },
+            });
+            if (result.error) {
+                console.error("Payment failed");
+                this.handleStripeValidationError(result.error);
+                return false;
+            }
+            return !!result.paymentIntent;
+        }
+        catch {
+            console.error("Error processing payment");
+            this.cardError =
+                "An error occurred while processing your payment. Please try again.";
+            this.host.requestUpdate();
+            return false;
+        }
+    }
+}

package/dist/views/payment-page/domain/payment-mappers.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Payload preparation and error mapping for the payment page.
+ *
+ * These functions transform form data into API request payloads and
+ * map API error responses back to form field names.
+ */
+export { prepareCustomerData, prepareReservationData, prepareAttendeesData, isApiError, mapApiErrorsToForm, } from "../payment-page.utils.js";

package/dist/views/payment-page/domain/payment-mappers.js

@@ -0,0 +1,7 @@
+/**
+ * Payload preparation and error mapping for the payment page.
+ *
+ * These functions transform form data into API request payloads and
+ * map API error responses back to form field names.
+ */
+export { prepareCustomerData, prepareReservationData, prepareAttendeesData, isApiError, mapApiErrorsToForm, } from "../payment-page.utils.js";

package/dist/views/payment-page/domain/payment-validators.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Form validation logic for the payment page.
+ *
+ * Contains field validation, form-level validation, and field visibility helpers.
+ */
+export { validateForm, validateField, getFieldVisibility, hasNameField, hasFirstNameField, hasSecondNameField, hasPhoneField, hasEmailField, } from "../payment-page.utils.js";

package/dist/views/payment-page/domain/payment-validators.js

@@ -0,0 +1,6 @@
+/**
+ * Form validation logic for the payment page.
+ *
+ * Contains field validation, form-level validation, and field visibility helpers.
+ */
+export { validateForm, validateField, getFieldVisibility, hasNameField, hasFirstNameField, hasSecondNameField, hasPhoneField, hasEmailField, } from "../payment-page.utils.js";

package/dist/views/payment-page/domain/recovery-payload.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Recovery payload persistence, validation, and integrity verification.
+ *
+ * These functions manage the localStorage-based crash recovery mechanism
+ * for crypto transfers.
+ */
+export type { PendingTransferPayload } from "../payment-page.utils.js";
+export { isValidTransactionHash, isValidTransferAmount, isValidPendingTransferPayload, computeTransferChecksum, verifyTransferChecksum, } from "../payment-page.utils.js";

package/dist/views/payment-page/domain/recovery-payload.js

@@ -0,0 +1,7 @@
+/**
+ * Recovery payload persistence, validation, and integrity verification.
+ *
+ * These functions manage the localStorage-based crash recovery mechanism
+ * for crypto transfers.
+ */
+export { isValidTransactionHash, isValidTransferAmount, isValidPendingTransferPayload, computeTransferChecksum, verifyTransferChecksum, } from "../payment-page.utils.js";

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

@@ -0,0 +1,47 @@
+import { CSSResultGroup, LitElement, nothing } from "lit";
+import { components } from "../../../../core/types/api-schema.js";
+import { ReservationSummary } from "../../../../contexts/basket/basket.types.js";
+import { FormValues, FieldsConfig, PhoneCodeSelection } from "../../payment-page.types.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/phone-field/phone-field.js";
+import "../hotel-pickup-field/hotel-pickup-field.js";
+type CheckReservationsResponse = components["schemas"]["CheckReservationsResponse"];
+/**
+ * Activity details form section component.
+ * Renders reservation-level and ticket-level requirement fields.
+ */
+export declare class CorasActivityDetails extends LitElement {
+    static styles: CSSResultGroup;
+    /** Reservations check data from API */
+    reservationsCheck: CheckReservationsResponse | undefined;
+    /** Reservation summaries for titles */
+    reservations: ReservationSummary[];
+    /** 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;
+    /** Assets URL for icons */
+    assetsURL: string;
+    /** Field configuration */
+    fieldsConfig: FieldsConfig;
+    /** Available countries for phone code selection */
+    countries: components["schemas"]["Country"][];
+    /** Default phone code selection (from main contact) */
+    selectedPhoneCode: PhoneCodeSelection | null;
+    /** Per-attendee phone code selections, keyed by ticket field prefix */
+    private attendeePhoneCodes;
+    private getFieldValue;
+    private handleValueChanged;
+    private getReservationTitle;
+    private renderField;
+    private getAttendeePhoneCode;
+    private handleAttendeePhoneCodeSelected;
+    private renderPhoneField;
+    private renderReservationRequirements;
+    private renderTicketRequirements;
+    private renderReservation;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+export {};

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

@@ -0,0 +1,247 @@
+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 { getFieldValue, getFieldConfig, capitalizeFirstLetter, } from "../../payment-page.utils.js";
+import { fireInternalEvent } from "../../../../core/events.js";
+import styles from "./activity-details.styles.js";
+import "../../../../components/input-field/input-field.js";
+import "../../../../components/phone-field/phone-field.js";
+import "../hotel-pickup-field/hotel-pickup-field.js";
+/**
+ * Activity details form section component.
+ * Renders reservation-level and ticket-level requirement fields.
+ */
+let CorasActivityDetails = class CorasActivityDetails extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Reservations check data from API */
+        this.reservationsCheck = undefined;
+        /** Reservation summaries for titles */
+        this.reservations = [];
+        /** Current form values */
+        this.formValues = {};
+        /** Current form errors by field name */
+        this.formErrors = {};
+        /** Number of form submission attempts (for showing validation) */
+        this.submissionAttempts = 0;
+        /** Assets URL for icons */
+        this.assetsURL = "";
+        /** Field configuration */
+        this.fieldsConfig = {};
+        /** Available countries for phone code selection */
+        this.countries = [];
+        /** Default phone code selection (from main contact) */
+        this.selectedPhoneCode = null;
+        /** Per-attendee phone code selections, keyed by ticket field prefix */
+        this.attendeePhoneCodes = new Map();
+    }
+    static { this.styles = styles; }
+    getFieldValue(fieldName) {
+        return getFieldValue(fieldName, this.formValues);
+    }
+    handleValueChanged(fieldName, value) {
+        fireInternalEvent(this, "value-changed", { fieldName, value });
+    }
+    getReservationTitle(reservationId) {
+        if (!reservationId || !this.reservations.length) {
+            return nothing;
+        }
+        const reservation = this.reservations.find((res) => res.reservation_id === reservationId);
+        if (!reservation?.attraction_name) {
+            return nothing;
+        }
+        return html `<h3>${reservation.attraction_name}</h3>`;
+    }
+    renderField(options) {
+        const { fieldName, customField, customType } = options;
+        const config = getFieldConfig(fieldName, this.fieldsConfig, customField, customType);
+        // For custom fields, use the field name to generate label
+        const label = config?.label || capitalizeFirstLetter(customField || fieldName);
+        const type = config?.type || "text";
+        const placeholder = config?.placeholder || "";
+        const helpText = config?.helpText || "";
+        const autocomplete = config?.autocomplete || "off";
+        const value = this.getFieldValue(fieldName);
+        const error = this.formErrors[fieldName] || "";
+        const showValidation = this.submissionAttempts > 0;
+        return html `
+      <coras-field
+        type=${type}
+        autocomplete=${autocomplete}
+        name=${fieldName}
+        label=${label}
+        placeholder=${placeholder}
+        value=${value}
+        ?error=${showValidation && !!error}
+        help-text=${(showValidation && error) || helpText}
+        ?validated=${showValidation}
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleValueChanged(fieldName, e.detail.value);
+        }}
+        validation-icon
+      ></coras-field>
+    `;
+    }
+    getAttendeePhoneCode(ticketFieldPrefix) {
+        return (this.attendeePhoneCodes.get(ticketFieldPrefix) || this.selectedPhoneCode);
+    }
+    handleAttendeePhoneCodeSelected(ticketFieldPrefix, event) {
+        const selection = event.detail;
+        this.attendeePhoneCodes.set(ticketFieldPrefix, selection);
+        this.requestUpdate();
+        // Store both country_code (ISO) and phone_code (dial code) as form values
+        this.handleValueChanged(`${ticketFieldPrefix}country_code`, selection.code);
+        this.handleValueChanged(`${ticketFieldPrefix}phone_code`, selection.phoneCode);
+    }
+    renderPhoneField(fieldName, ticketFieldPrefix) {
+        const value = this.getFieldValue(fieldName);
+        const error = this.formErrors[fieldName] || "";
+        const showValidation = this.submissionAttempts > 0;
+        return html `
+      <coras-phone-field
+        .countries=${this.countries}
+        .selectedPhoneCode=${this.getAttendeePhoneCode(ticketFieldPrefix)}
+        value=${value}
+        name=${fieldName}
+        label=${msg("Phone number")}
+        placeholder=""
+        ?validated=${showValidation}
+        ?error=${showValidation && !!error}
+        error-text=${(showValidation && error) || ""}
+        help-text=""
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleValueChanged(fieldName, e.detail.value);
+        }}
+        @phone-code-selected=${(e) => {
+            e.stopPropagation();
+            this.handleAttendeePhoneCodeSelected(ticketFieldPrefix, e);
+        }}
+      ></coras-phone-field>
+    `;
+    }
+    renderReservationRequirements(reservation) {
+        if (!reservation.requirements?.length) {
+            return nothing;
+        }
+        return html `
+      <div class="reservation-requirements-container">
+        ${reservation.requirements.map((requirement) => {
+            const fieldName = `reservation_${reservation.id}_${requirement.field}`;
+            // Special handling for pickup point field
+            if (requirement.field === "pickup_point" &&
+                requirement.options?.length) {
+                return html `
+              <coras-hotel-pickup-field
+                .options=${requirement.options}
+                .value=${this.getFieldValue(fieldName)}
+                .fieldName=${fieldName}
+                .error=${this.formErrors[fieldName] || ""}
+                ?validated=${this.submissionAttempts > 0}
+                ?has-error=${this.submissionAttempts > 0 &&
+                    !!this.formErrors[fieldName]}
+                assets-url=${this.assetsURL}
+                @value-changed=${(e) => {
+                    e.stopPropagation();
+                    this.handleValueChanged(fieldName, e.detail.coras_pickup_id);
+                }}
+              ></coras-hotel-pickup-field>
+            `;
+            }
+            return this.renderField({
+                fieldName,
+                customField: requirement.field,
+                customType: requirement.type,
+            });
+        })}
+      </div>
+    `;
+    }
+    renderTicketRequirements(reservation) {
+        if (!reservation.tickets?.length) {
+            return nothing;
+        }
+        return reservation.tickets.map((ticket, ticketIndex) => {
+            if (!ticket.requirements?.length) {
+                return nothing;
+            }
+            const ticketFieldPrefix = `reservation_${reservation.id}_ticket_${ticket.id}_`;
+            return html `
+          <div class="ticket-container">
+            <h4>${msg("Person")} ${ticketIndex + 1}</h4>
+            ${ticket.requirements.map((requirement) => {
+                const fieldName = `${ticketFieldPrefix}${requirement.field}`;
+                // Special handling for phone_number field
+                if (requirement.field === "phone_number") {
+                    return this.renderPhoneField(fieldName, ticketFieldPrefix);
+                }
+                return this.renderField({
+                    fieldName,
+                    customField: requirement.field,
+                    customType: requirement.type,
+                });
+            })}
+          </div>
+        `;
+        });
+    }
+    renderReservation(reservation) {
+        return html `
+      <div class="reservation-container">
+        ${this.getReservationTitle(reservation.id ?? undefined)}
+        ${this.renderReservationRequirements(reservation)}
+        ${this.renderTicketRequirements(reservation)}
+      </div>
+    `;
+    }
+    render() {
+        const data = this.reservationsCheck;
+        if (!data?.reservations || !data.reservations.length) {
+            return nothing;
+        }
+        return html `
+      <h2>${msg("Activity details")}</h2>
+      <div class="fields-container">
+        ${data.reservations.map((reservation) => this.renderReservation(reservation))}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], CorasActivityDetails.prototype, "reservationsCheck", void 0);
+__decorate([
+    property({ type: Array })
+], CorasActivityDetails.prototype, "reservations", void 0);
+__decorate([
+    property({ type: Object })
+], CorasActivityDetails.prototype, "formValues", void 0);
+__decorate([
+    property({ type: Object })
+], CorasActivityDetails.prototype, "formErrors", void 0);
+__decorate([
+    property({ type: Number })
+], CorasActivityDetails.prototype, "submissionAttempts", void 0);
+__decorate([
+    property({ type: String })
+], CorasActivityDetails.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Object })
+], CorasActivityDetails.prototype, "fieldsConfig", void 0);
+__decorate([
+    property({ type: Array })
+], CorasActivityDetails.prototype, "countries", void 0);
+__decorate([
+    property({ type: Object })
+], CorasActivityDetails.prototype, "selectedPhoneCode", void 0);
+CorasActivityDetails = __decorate([
+    localized()
+], CorasActivityDetails);
+export { CorasActivityDetails };

package/dist/views/payment-page/partials/activity-details/activity-details.d.ts

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

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

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

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

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