@coras-io/embed 0.1.0

package/dist/views/payment-page/controllers/crypto-transfer.controller.js

@@ -0,0 +1,288 @@
+import { isValidPendingTransferPayload, computeTransferChecksum, verifyTransferChecksum, sanitizeErrorMessage, } from "../payment-page.utils.js";
+const PENDING_TRANSFER_KEY = "coras-pending-crypto-transfer";
+const ONE_HOUR_MS = 60 * 60 * 1000;
+/**
+ * CryptoTransferController manages the on-chain token transfer lifecycle,
+ * crash recovery via localStorage, and MFA verification during transfers.
+ *
+ * Extracted from payment-page.component.ts. Manages:
+ * - Transfer modal state (showTransferModal, transferModalState)
+ * - Transfer transaction hash tracking
+ * - MFA verification during transfer (code submission, resend, cancellation)
+ * - Pending transfer persistence and recovery (localStorage + checksum)
+ */
+export class CryptoTransferController {
+    constructor(host, deps) {
+        this.showTransferModal = false;
+        this.transferModalState = "mfa-verification";
+        this.transferTransactionHash = "";
+        this.transferErrorMessage = "";
+        this.mfaVerificationError = "";
+        this.mfaVerificationLoading = false;
+        this.host = host;
+        this.deps = deps;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.reset();
+    }
+    // ─── Transfer Execution ─────────────────────────────────────────────────────
+    /**
+     * Starts a new on-chain crypto transfer.
+     * Called when user clicks Pay Now with crypto and is fully authenticated.
+     */
+    async startTransfer() {
+        this.mfaVerificationError = "";
+        try {
+            const result = await this.deps.transferTokens(this.deps.getPendingTransferAmount());
+            if (!result.success || !result.transactionHash) {
+                this.showTransferModal = false;
+                this.transferModalState = "mfa-verification";
+                this.host.requestUpdate();
+                this.deps.showErrorModalOnce();
+                return "failed";
+            }
+            return await this.handleTransferSuccess(result.transactionHash);
+        }
+        catch (error) {
+            console.error("Transfer error:", error);
+            this.showTransferModal = false;
+            this.transferModalState = "mfa-verification";
+            this.host.requestUpdate();
+            this.deps.showErrorModalOnce();
+            return "failed";
+        }
+        finally {
+            this.deps.refreshBalance();
+        }
+    }
+    /**
+     * Handles successful on-chain transfer — confirms reservation with API.
+     * Persists the transaction hash BEFORE calling the API for crash recovery.
+     */
+    async handleTransferSuccess(transactionHash) {
+        this.transferModalState = "loading";
+        this.transferTransactionHash = transactionHash;
+        this.host.requestUpdate();
+        await this.persistPendingTransfer(transactionHash);
+        this.deps.setTransactionId(transactionHash);
+        const confirmationResult = await this.deps.confirmReservation();
+        if (!confirmationResult) {
+            this.showTransferModal = false;
+            this.transferModalState = "mfa-verification";
+            this.host.requestUpdate();
+            this.deps.showErrorModalOnce();
+            return "failed";
+        }
+        // Update phase before clearing to ensure crash-recovery atomicity
+        this.updatePendingTransferPhase("reservation_confirmed");
+        this.clearPendingTransfer();
+        const finalStatus = await this.deps.checkTransactionStatus(confirmationResult.user_id);
+        this.showTransferModal = false;
+        this.transferModalState = "mfa-verification";
+        this.host.requestUpdate();
+        this.deps.redirectToConfirmation(finalStatus === "PAID");
+        return "completed";
+    }
+    // ─── MFA Verification (during transfer) ─────────────────────────────────────
+    /**
+     * Opens the transfer modal for MFA verification.
+     * Called from the component when MFA fires during transfer.
+     */
+    openMfaVerification() {
+        this.showTransferModal = true;
+        this.transferModalState = "mfa-verification";
+        this.mfaVerificationError = "";
+        this.host.requestUpdate();
+    }
+    async handleMfaCodeSubmitted(code) {
+        this.mfaVerificationLoading = true;
+        this.mfaVerificationError = "";
+        this.host.requestUpdate();
+        try {
+            await this.deps.submitMfaVerification(code);
+            this.transferModalState = "loading";
+        }
+        catch (error) {
+            console.error("MFA verification error:", error);
+            this.mfaVerificationError = sanitizeErrorMessage(error, "Verification failed");
+        }
+        finally {
+            this.mfaVerificationLoading = false;
+            this.host.requestUpdate();
+        }
+    }
+    async handleMfaResendRequested() {
+        this.mfaVerificationError = "";
+        this.host.requestUpdate();
+        try {
+            await this.deps.initiateMfaVerification();
+        }
+        catch (error) {
+            console.error("Failed to resend MFA code:", error);
+            this.mfaVerificationError = sanitizeErrorMessage(error, "Failed to resend code");
+            this.host.requestUpdate();
+        }
+    }
+    handleTransferCancelled() {
+        this.showTransferModal = false;
+        this.transferModalState = "mfa-verification";
+        this.mfaVerificationError = "";
+        this.mfaVerificationLoading = false;
+        this.deps.resetMfaVerificationState();
+        this.host.requestUpdate();
+    }
+    // ─── Pending Transfer Persistence ───────────────────────────────────────────
+    async persistPendingTransfer(transactionHash) {
+        try {
+            const timestamp = Date.now();
+            const checksum = await computeTransferChecksum(transactionHash, this.deps.getPendingTransferAmount(), timestamp);
+            const data = {
+                transactionHash,
+                amount: this.deps.getPendingTransferAmount(),
+                timestamp,
+                checksum,
+                phase: "transfer_submitted",
+            };
+            localStorage.setItem(PENDING_TRANSFER_KEY, JSON.stringify(data));
+        }
+        catch {
+            // localStorage may be blocked (e.g. private browsing)
+        }
+    }
+    clearPendingTransfer() {
+        try {
+            localStorage.removeItem(PENDING_TRANSFER_KEY);
+        }
+        catch {
+            // localStorage may be blocked
+        }
+    }
+    updatePendingTransferPhase(phase) {
+        try {
+            const raw = localStorage.getItem(PENDING_TRANSFER_KEY);
+            if (raw) {
+                const data = JSON.parse(raw);
+                data.phase = phase;
+                localStorage.setItem(PENDING_TRANSFER_KEY, JSON.stringify(data));
+            }
+        }
+        catch {
+            // localStorage may be blocked
+        }
+    }
+    /**
+     * Checks for a pending transfer that wasn't confirmed with the backend.
+     * Called once on initialization to recover from crashes/failures.
+     */
+    async recoverPendingTransfer() {
+        try {
+            const raw = localStorage.getItem(PENDING_TRANSFER_KEY);
+            if (!raw)
+                return;
+            const data = JSON.parse(raw);
+            if (!isValidPendingTransferPayload(data)) {
+                this.clearPendingTransfer();
+                return;
+            }
+            if (Date.now() - data.timestamp > ONE_HOUR_MS) {
+                this.clearPendingTransfer();
+                return;
+            }
+            const checksumValid = await verifyTransferChecksum(data);
+            if (!checksumValid) {
+                console.warn("Pending transfer recovery rejected: checksum verification failed. " +
+                    "Local recovery data is treated as a hint only.");
+                this.clearPendingTransfer();
+                return;
+            }
+            this.deps.setTransactionId(data.transactionHash);
+            this.transferTransactionHash = data.transactionHash;
+            const confirmationResult = await this.deps.confirmReservation();
+            if (confirmationResult) {
+                this.clearPendingTransfer();
+                const finalStatus = await this.deps.checkTransactionStatus(confirmationResult.user_id);
+                if (finalStatus === "PAID") {
+                    this.deps.redirectToConfirmation(true);
+                }
+            }
+        }
+        catch {
+            this.clearPendingTransfer();
+        }
+    }
+    /**
+     * Gets a valid pending transfer from localStorage, or null.
+     * Validates structure, TTL, checksum, and amount match.
+     */
+    async getValidPendingTransfer() {
+        try {
+            const raw = localStorage.getItem(PENDING_TRANSFER_KEY);
+            if (!raw)
+                return null;
+            const data = JSON.parse(raw);
+            if (!isValidPendingTransferPayload(data)) {
+                this.clearPendingTransfer();
+                return null;
+            }
+            if (Date.now() - data.timestamp > ONE_HOUR_MS) {
+                this.clearPendingTransfer();
+                return null;
+            }
+            const checksumValid = await verifyTransferChecksum(data);
+            if (!checksumValid) {
+                this.clearPendingTransfer();
+                return null;
+            }
+            const currentAmount = this.deps.getCurrentCartTotal();
+            if (data.amount !== currentAmount) {
+                this.clearPendingTransfer();
+                return null;
+            }
+            return data;
+        }
+        catch {
+            this.clearPendingTransfer();
+            return null;
+        }
+    }
+    /**
+     * Retries reservation confirmation for a pending on-chain transfer.
+     */
+    async retryPendingTransfer(payload) {
+        try {
+            this.deps.setTransactionId(payload.transactionHash);
+            this.transferTransactionHash = payload.transactionHash;
+            const confirmationResult = await this.deps.confirmReservation();
+            if (confirmationResult) {
+                this.clearPendingTransfer();
+                const finalStatus = await this.deps.checkTransactionStatus(confirmationResult.user_id);
+                this.deps.redirectToConfirmation(finalStatus === "PAID");
+                return "completed";
+            }
+            else {
+                this.deps.showErrorModalOnce();
+                return "failed";
+            }
+        }
+        catch (error) {
+            console.error("Pending transfer retry failed:", error);
+            this.deps.showErrorModalOnce();
+            return "failed";
+        }
+        finally {
+            this.deps.refreshBalance();
+        }
+    }
+    // ─── Reset ──────────────────────────────────────────────────────────────────
+    reset() {
+        this.showTransferModal = false;
+        this.transferModalState = "mfa-verification";
+        this.transferTransactionHash = "";
+        this.transferErrorMessage = "";
+        this.mfaVerificationError = "";
+        this.mfaVerificationLoading = false;
+        this.host.requestUpdate();
+    }
+}

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

@@ -0,0 +1,60 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+import { ValidatorContext } from "../payment-page.validators.js";
+import { FormValues, PhoneCodeSelection, FieldVisibility } from "../payment-page.types.js";
+import { components } from "../../../core/types/api-schema.js";
+/**
+ * FormValidationController manages form state, validation, and field visibility.
+ *
+ * Extracted from payment-page.component.ts to reduce the component's
+ * responsibility surface. The component delegates form state management
+ * and validation logic to this controller.
+ */
+export declare class FormValidationController implements ReactiveController {
+    private host;
+    formValues: FormValues;
+    formErrors: Record<string, string>;
+    selectedPhoneCode: PhoneCodeSelection | null;
+    termsAccepted: boolean;
+    termsError: boolean;
+    marketing: boolean;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle a form field value change.
+     * Updates formValues and re-validates the field if a submission has been attempted.
+     */
+    handleValueChange(fieldName: string, value: string, submissionAttempts: number): void;
+    /**
+     * Get the value of a form field, supporting nested reservation field structures.
+     */
+    getFieldValue(fieldName: string): string;
+    /**
+     * Build validation context for a field (e.g., country code for phone validation).
+     */
+    getValidationContext(fieldName: string): ValidatorContext | undefined;
+    /**
+     * Validate the entire form.
+     * Returns true if all visible, required fields pass validation.
+     */
+    validate(checkData: components["schemas"]["CheckReservationsResponse"] | undefined, shouldValidateBillingAddress: boolean, paymentType: "stripe" | "crypto", hasCryptoEmail: boolean): boolean;
+    /**
+     * Get field visibility flags based on API requirements.
+     * Memoized — recomputes only when checkData reference changes.
+     */
+    private _cachedCheckData;
+    private _cachedVisibility;
+    getFieldVisibility(checkData: components["schemas"]["CheckReservationsResponse"] | undefined): FieldVisibility;
+    /**
+     * Handle phone code selection change.
+     */
+    handlePhoneCodeSelection(selection: PhoneCodeSelection): void;
+    /**
+     * Handle terms checkbox change.
+     */
+    handleTermsChange(accepted: boolean): void;
+    /**
+     * Reset all form state.
+     */
+    reset(): void;
+}

package/dist/views/payment-page/controllers/form-validation.controller.js

@@ -0,0 +1,122 @@
+import { msg } from "@lit/localize";
+import { getFieldValue, handleFormValueChange, validateField as validateFieldUtil, validateForm as validateFormUtil, getFieldVisibility as getFieldVisibilityUtil, } from "../payment-page.utils.js";
+import { FIELDS } from "../payment-page.fields.js";
+import { required } from "../payment-page.validators.js";
+/**
+ * FormValidationController manages form state, validation, and field visibility.
+ *
+ * Extracted from payment-page.component.ts to reduce the component's
+ * responsibility surface. The component delegates form state management
+ * and validation logic to this controller.
+ */
+export class FormValidationController {
+    constructor(host) {
+        this.formValues = {};
+        this.formErrors = {};
+        this.selectedPhoneCode = null;
+        this.termsAccepted = false;
+        this.termsError = false;
+        this.marketing = false;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.reset();
+    }
+    /**
+     * Handle a form field value change.
+     * Updates formValues and re-validates the field if a submission has been attempted.
+     */
+    handleValueChange(fieldName, value, submissionAttempts) {
+        this.formValues = handleFormValueChange(fieldName, value, this.formValues);
+        if (submissionAttempts > 0) {
+            const context = this.getValidationContext(fieldName);
+            const result = validateFieldUtil(fieldName, value, this.formErrors, FIELDS, required, context);
+            this.formErrors = result.errors;
+        }
+        this.host.requestUpdate();
+    }
+    /**
+     * Get the value of a form field, supporting nested reservation field structures.
+     */
+    getFieldValue(fieldName) {
+        return getFieldValue(fieldName, this.formValues);
+    }
+    /**
+     * Build validation context for a field (e.g., country code for phone validation).
+     */
+    getValidationContext(fieldName) {
+        if (fieldName === "phone") {
+            return { countryCode: this.selectedPhoneCode?.code };
+        }
+        if (fieldName.endsWith("phone_number")) {
+            const countryCodeField = fieldName.replace(/phone_number$/, "country_code");
+            const countryCode = this.formValues[countryCodeField] ||
+                this.selectedPhoneCode?.code;
+            return { countryCode };
+        }
+        return undefined;
+    }
+    /**
+     * Validate the entire form.
+     * Returns true if all visible, required fields pass validation.
+     */
+    validate(checkData, shouldValidateBillingAddress, paymentType, hasCryptoEmail) {
+        const result = validateFormUtil(this.formValues, this.formErrors, FIELDS, required, checkData, shouldValidateBillingAddress, (fieldName) => this.getValidationContext(fieldName));
+        this.formErrors = result.errors;
+        this.termsError = !this.termsAccepted;
+        if (paymentType === "crypto" && !hasCryptoEmail) {
+            this.formErrors = {
+                ...this.formErrors,
+                email: msg("Email is required"),
+            };
+            this.host.requestUpdate();
+            return false;
+        }
+        if (this.termsError) {
+            this.host.requestUpdate();
+            return false;
+        }
+        this.host.requestUpdate();
+        return result.isValid;
+    }
+    getFieldVisibility(checkData) {
+        if (checkData !== this._cachedCheckData || !this._cachedVisibility) {
+            this._cachedCheckData = checkData;
+            this._cachedVisibility = getFieldVisibilityUtil(checkData);
+        }
+        return this._cachedVisibility;
+    }
+    /**
+     * Handle phone code selection change.
+     */
+    handlePhoneCodeSelection(selection) {
+        this.selectedPhoneCode = selection;
+        this.host.requestUpdate();
+    }
+    /**
+     * Handle terms checkbox change.
+     */
+    handleTermsChange(accepted) {
+        this.termsAccepted = accepted;
+        if (accepted) {
+            this.termsError = false;
+        }
+        this.host.requestUpdate();
+    }
+    /**
+     * Reset all form state.
+     */
+    reset() {
+        this.formValues = {};
+        this.formErrors = {};
+        this.selectedPhoneCode = null;
+        this.termsAccepted = false;
+        this.termsError = false;
+        this.marketing = false;
+        this._cachedCheckData = undefined;
+        this._cachedVisibility = undefined;
+        this.host.requestUpdate();
+    }
+}

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

@@ -0,0 +1,22 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * LayoutController manages responsive layout behavior for the payment page.
+ * Tracks container width to determine basket visibility using ResizeObserver.
+ */
+export declare class LayoutController implements ReactiveController {
+    private host;
+    private resizeObserver?;
+    isBasketVisible: boolean;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Start observing an element for size changes.
+     * Typically called from firstUpdated() with the component's container.
+     */
+    observe(element: HTMLElement): void;
+    /**
+     * Stop observing and clean up the ResizeObserver.
+     */
+    disconnect(): void;
+}

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

@@ -0,0 +1,43 @@
+import { PAYMENT_LAYOUT_BREAKPOINT_PX } from "../payment-page.constants.js";
+/**
+ * LayoutController manages responsive layout behavior for the payment page.
+ * Tracks container width to determine basket visibility using ResizeObserver.
+ */
+export class LayoutController {
+    constructor(host) {
+        this.isBasketVisible = true;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        // No-op — observe() must be called with the target element
+    }
+    hostDisconnected() {
+        this.disconnect();
+    }
+    /**
+     * Start observing an element for size changes.
+     * Typically called from firstUpdated() with the component's container.
+     */
+    observe(element) {
+        this.disconnect();
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width;
+                const shouldShow = width >= PAYMENT_LAYOUT_BREAKPOINT_PX;
+                if (this.isBasketVisible !== shouldShow) {
+                    this.isBasketVisible = shouldShow;
+                    this.host.requestUpdate();
+                }
+            }
+        });
+        this.resizeObserver.observe(element);
+    }
+    /**
+     * Stop observing and clean up the ResizeObserver.
+     */
+    disconnect() {
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = undefined;
+    }
+}

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

@@ -0,0 +1,47 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+/**
+ * Possible states of the payment submission lifecycle.
+ *
+ * State graph:
+ *   idle ──▶ validating ──▶ auth_required (crypto only, user must log in)
+ *                       ──▶ confirming ──▶ processing_payment ──▶ polling ──▶ success
+ *                                                                          ──▶ failed
+ *   failed ──▶ idle (via retry)
+ */
+export type SubmitState = "idle" | "validating" | "auth_required" | "confirming" | "processing_payment" | "polling" | "success" | "failed";
+/**
+ * PaymentFlowController manages the submit lifecycle as a deterministic state machine.
+ * Every terminal path (success, failed, idle via retry) guarantees isProcessing === false.
+ */
+export declare class PaymentFlowController implements ReactiveController {
+    private host;
+    submitState: SubmitState;
+    submissionAttempts: number;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Whether the payment flow is actively processing and UI should
+     * disable the submit button / show a loading indicator.
+     */
+    get isProcessing(): boolean;
+    /**
+     * Transition to a new submit state.
+     * Always triggers a host update so the UI reflects the change.
+     */
+    transition(next: SubmitState): void;
+    /**
+     * Begin a new form submission attempt.
+     * Increments the attempt counter and enters the validating state.
+     */
+    beginSubmission(): void;
+    /**
+     * Reset all submit state back to idle.
+     * Called on disconnect and when clearing the form.
+     */
+    reset(): void;
+    /**
+     * Reset to idle after a failed payment so the user can re-submit.
+     */
+    retry(): void;
+}

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

@@ -0,0 +1,63 @@
+/**
+ * Terminal and non-processing states where the submit button should be enabled.
+ */
+const NON_PROCESSING_STATES = new Set([
+    "idle",
+    "success",
+    "failed",
+    "auth_required",
+]);
+/**
+ * PaymentFlowController manages the submit lifecycle as a deterministic state machine.
+ * Every terminal path (success, failed, idle via retry) guarantees isProcessing === false.
+ */
+export class PaymentFlowController {
+    constructor(host) {
+        this.submitState = "idle";
+        this.submissionAttempts = 0;
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() { }
+    hostDisconnected() {
+        this.reset();
+    }
+    /**
+     * Whether the payment flow is actively processing and UI should
+     * disable the submit button / show a loading indicator.
+     */
+    get isProcessing() {
+        return !NON_PROCESSING_STATES.has(this.submitState);
+    }
+    /**
+     * Transition to a new submit state.
+     * Always triggers a host update so the UI reflects the change.
+     */
+    transition(next) {
+        this.submitState = next;
+        this.host.requestUpdate();
+    }
+    /**
+     * Begin a new form submission attempt.
+     * Increments the attempt counter and enters the validating state.
+     */
+    beginSubmission() {
+        this.submissionAttempts += 1;
+        this.transition("validating");
+    }
+    /**
+     * Reset all submit state back to idle.
+     * Called on disconnect and when clearing the form.
+     */
+    reset() {
+        this.submitState = "idle";
+        this.submissionAttempts = 0;
+        this.host.requestUpdate();
+    }
+    /**
+     * Reset to idle after a failed payment so the user can re-submit.
+     */
+    retry() {
+        this.transition("idle");
+    }
+}