@coras-io/embed 0.1.0

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

@@ -0,0 +1,1733 @@
+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, query, state } from "lit/decorators.js";
+import { localized, msg } from "@lit/localize";
+import { fireEvent } from "../../core/events.js";
+import "../../components/alert/alert.js";
+import "../../components/button/button.js";
+import "../../components/checkbox/checkbox.js";
+import "../../components/input-field/input-field.js";
+import "../../components/flag-icon/flag-icon.js";
+import "../../components/phone-field/phone-field.js";
+import "../../components/dropdown/dropdown.js";
+import "../../components/joined-fields/joined-fields.js";
+import "../../containers/basket/basket.js";
+import "../../contexts/basket/basket.js";
+import "../../components/layout/layout.js";
+import "../../components/icon/icon.js";
+import "../../components/collect-fida/collect-fida.js";
+import "../../components/select-list/select-list.js";
+import "../../components/select-list/select-option/select-option.js";
+import "../../components/transfer-modal/transfer-modal.js";
+import "../../components/crypto-auth-modal/crypto-auth-modal.js";
+import { BaseMixin } from "../../mixins/base.mixin.js";
+import { ErrorModalMixin } from "../../mixins/error-modal.mixin.js";
+import { CoinbaseMixin } from "../../mixins/coinbase.mixin.js";
+import styles from "./payment-page.styles.js";
+import "../../components/bottom-drawer/bottom-drawer.js";
+import "../../components/expiration-timer/expiration-timer.js";
+import { Task } from "@lit/task";
+import { FIELDS } from "./payment-page.fields.js";
+import "./partials/stripe/stripe.js";
+import "./partials/country-field/country-field.js";
+import "./partials/hotel-pickup-field/hotel-pickup-field.js";
+import "./partials/confirmation/confirmation.js";
+import "./partials/payment-type-selector/payment-type-selector.js";
+import "./partials/activity-details/activity-details.js";
+import "./partials/billing-address/billing-address.js";
+import { getBookingSession, removeBookingSession, } from "../../core/api/middlewares/booking-session/booking-session.utils.js";
+import { PaymentApiService } from "./services/payment-api.service.js";
+import { getDefaultPhoneCode, getDefaultCountry, getShortestExpirationSeconds, getTotalQuantity, getTotalPrice, isValidEmail, validateWalletEmail, findCountryCode as findCountryCodeUtil, formatPhoneWithPlus, prepareReservationData, prepareAttendeesData, isApiError, mapApiErrorsToForm, prepareCustomerData as prepareCustomerDataUtil, getFieldConfig, pollTransactionStatus, } from "./payment-page.utils.js";
+import { consume } from "@lit/context";
+import { currentPageContext } from "../../contexts/current-page.context.js";
+import { convertToLocaleCurrency } from "../../core/currency/index.js";
+import { TRANSACTION_POLLING_MAX_ATTEMPTS, TRANSACTION_POLLING_INITIAL_INTERVAL_MS, TRANSACTION_POLLING_MAX_INTERVAL_MS, BALANCE_BACKOFF_INITIAL_MS, BALANCE_BACKOFF_MAX_MS, } from "./payment-page.constants.js";
+import { getLocale, setLocale } from "../../core/i18n/localization.js";
+import { StripePaymentController } from "./controllers/stripe-payment.controller.js";
+import { PaymentFlowController } from "./controllers/payment-flow.controller.js";
+import { FormValidationController } from "./controllers/form-validation.controller.js";
+import { LayoutController } from "./controllers/layout.controller.js";
+import { CryptoAuthController } from "./controllers/crypto-auth.controller.js";
+import { CryptoTransferController, } from "./controllers/crypto-transfer.controller.js";
+/**
+ * Payment page component for processing checkout and payments.
+ *
+ * @fires coras:navigate - Dispatched when navigating to another page
+ * @fires coras:payment-status - Dispatched when a payment attempt changes status
+ */
+let CorasPaymentPage = class CorasPaymentPage extends CoinbaseMixin(ErrorModalMixin(BaseMixin(LitElement))) {
+    constructor() {
+        super(...arguments);
+        this.stripeKey = "";
+        // Custom key-value pairs forwarded to the reservations/confirm API `metadata`
+        // field (see openapi `ReservationsPutRequest`/`ConfirmReservationsSchema`).
+        this.metadata = {};
+        // Branding/preview mode (set by the SDK mount). With no booking session the
+        // page renders the full form with actions disabled instead of the empty state
+        // so the checkout chrome can be styled. See CorasMountOptions.preview.
+        this.preview = false;
+        this.cdpProjectId = "";
+        this.currentPage = "payment";
+        this.stripeController = new StripePaymentController(this);
+        this.flowController = new PaymentFlowController(this);
+        this.formController = new FormValidationController(this);
+        this.layoutController = new LayoutController(this);
+        this.cryptoAuthController = new CryptoAuthController(this, {
+            sendCode: (email) => this.sendCode(email),
+            loginWithCode: (email, code) => this.loginWithCode(email, code),
+            initiateMfaEnrollment: (phone) => this.initiateMfaEnrollment(phone),
+            submitMfaEnrollment: (code) => this.submitMfaEnrollment(code),
+            onLoginSuccess: () => this.handleCryptoLoginSuccess(),
+            onBalanceRefresh: () => this.balanceTask.run(),
+            onMfaEnrollmentComplete: () => this._syncMfaPhoneToFormIfEmpty(),
+        });
+        this.cryptoTransferController = new CryptoTransferController(this, {
+            transferTokens: (amount) => this.transferTokens(amount),
+            confirmReservation: async () => {
+                const result = await this.confirmReservation();
+                if (result) {
+                    return {
+                        transaction_id: result.transaction_id ?? this.transactionId,
+                        user_id: result.user_id ?? this.userId,
+                    };
+                }
+                return null;
+            },
+            checkTransactionStatus: (userId) => this.checkTransactionStatus(userId),
+            showErrorModalOnce: () => this.showErrorModalOnce(),
+            redirectToConfirmation: (success) => this.redirectToConfirmation(success),
+            refreshBalance: () => this.balanceTask.run(),
+            submitMfaVerification: (code) => this.submitMfaVerification(code),
+            initiateMfaVerification: () => this.initiateMfaVerification(),
+            resetMfaVerificationState: () => this.resetMfaVerificationState(),
+            getPendingTransferAmount: () => this.pendingTransferAmount,
+            getCurrentCartTotal: () => String(this.getReservationsLoyaltyTotal("pay")),
+            setTransactionId: (id) => {
+                this.transactionId = id;
+            },
+            setUserId: (id) => {
+                this.userId = id;
+            },
+        });
+        /** AbortController for canceling long-running async ops on disconnect. */
+        this.abortController = new AbortController();
+        this.apiService = null;
+        this.showCryptoAuthModal = false;
+        this.transactionId = "";
+        this.userId = "";
+        // Stripe PaymentIntent secret from a successful reservation. Retained across
+        // a card decline so the corrected card can be re-submitted to Stripe without
+        // re-running the reservation, which consumes the single-use booking session.
+        this.pendingClientSecret = null;
+        this.referenceId = "";
+        this.earnedTokensToIssue = null;
+        this.canMakePayment = {
+            applePay: false,
+            googlePay: false,
+        };
+        this.paymentType = "stripe";
+        this.paymentMethod = "card";
+        this.paymentSuccessful = false;
+        this.paymentFailed = false;
+        this.loyaltyPageUrl = null;
+        this.userEmail = "";
+        this.configTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const result = await this.getApiService().fetchConfig();
+                if (!result.data) {
+                    throw new Error("Failed to fetch payment configuration");
+                }
+                const config = result.data;
+                this.stripeKey = config.stripe_publishable_key;
+                if (config.coinbase_project_id) {
+                    this.cdpProjectId = config.coinbase_project_id;
+                }
+                if (config.rpc_url) {
+                    this.cryptoRpc = config.rpc_url;
+                    this.cryptoNetwork = config.rpc_url.includes("mainnet")
+                        ? "base"
+                        : "base-sepolia";
+                }
+                if (config.fida_token_address) {
+                    this.tokenContractAddress = config.fida_token_address;
+                }
+                if (config.treasury_wallet_address) {
+                    this.recipientAddress = config.treasury_wallet_address;
+                }
+                if (config.loyalty_page_url) {
+                    this.loyaltyPageUrl = config.loyalty_page_url;
+                }
+                return config;
+            },
+        });
+        this.countriesTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const language_code = this.locale.split("-")[0] || "en";
+                const { data, error } = await this.getApiService().fetchCountries(language_code);
+                if (error) {
+                    console.error("Error fetching countries:", error);
+                    return [];
+                }
+                if (data) {
+                    const defaultCode = getDefaultPhoneCode(data, this.locale);
+                    if (defaultCode) {
+                        this.formController.handlePhoneCodeSelection(defaultCode);
+                    }
+                    // Pre-fill country from geolocation if not already set
+                    if (!this.formController.getFieldValue("country")) {
+                        await this.geolocationTask.taskComplete;
+                        const geoData = this.geolocationTask.value;
+                        if (geoData?.code) {
+                            const defaultCountry = getDefaultCountry(data, geoData.code);
+                            if (defaultCountry) {
+                                this.handleFormValueChange("country", defaultCountry);
+                            }
+                        }
+                    }
+                    return data;
+                }
+                return [];
+            },
+        });
+        this.geolocationTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const result = await this.getApiService().fetchGeolocation();
+                if (result.error) {
+                    console.error("Error fetching geolocation:", result.error);
+                    return null;
+                }
+                return result.data ?? null;
+            },
+        });
+        this.balanceBackoffMs = BALANCE_BACKOFF_INITIAL_MS;
+        this.balanceTask = new Task(this, {
+            task: async ([loggedIn, hasRpc, loyaltyPoints]) => {
+                if (!loyaltyPoints || !loggedIn || !hasRpc) {
+                    this.balanceBackoffMs = BALANCE_BACKOFF_INITIAL_MS;
+                    this.clearBalanceBackoff();
+                    return null;
+                }
+                try {
+                    // IMPORTANT: For gas-sponsored transfers, we need to check Smart Account balance
+                    // Only tokens in the Smart Account can be used with gas sponsorship
+                    // The EOA balance doesn't matter for sponsored transactions
+                    const smartAccountAddress = this.coinbaseSession?.smartAccountAddress;
+                    if (!smartAccountAddress) {
+                        console.error("No smart account address available for balance check");
+                        this.balanceBackoffMs = BALANCE_BACKOFF_INITIAL_MS;
+                        this.clearBalanceBackoff();
+                        return null;
+                    }
+                    const balance = await this.getTokenBalance(smartAccountAddress);
+                    // Success — reset backoff
+                    this.balanceBackoffMs = BALANCE_BACKOFF_INITIAL_MS;
+                    this.clearBalanceBackoff();
+                    return balance;
+                }
+                catch (error) {
+                    console.error("Balance fetch failed, retrying with backoff:", error);
+                    // Schedule retry with exponential backoff
+                    this.clearBalanceBackoff();
+                    this.balanceRetryTimerId = setTimeout(() => {
+                        this.balanceRetryTimerId = undefined;
+                        this.balanceTask.run();
+                    }, this.balanceBackoffMs);
+                    this.balanceBackoffMs = Math.min(this.balanceBackoffMs * 2, BALANCE_BACKOFF_MAX_MS);
+                    // Re-throw so the Task stays in error state
+                    throw error;
+                }
+            },
+            args: () => [
+                Boolean(this.coinbaseSession),
+                Boolean(this.cryptoRpc),
+                Boolean(this.loyaltyPoints),
+            ],
+        });
+        this.reservationsCheckTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const bookingSession = getBookingSession();
+                // No session means there is nothing to check out: a legitimate empty
+                // state (lost/expired session, or the branding preview), not an error.
+                // Returning empty keeps the error modal reserved for real API failures.
+                if (!bookingSession) {
+                    return undefined;
+                }
+                const { data, error } = await this.getApiService().checkReservations(bookingSession);
+                if (error) {
+                    throw error;
+                }
+                return data;
+            },
+        });
+        this.reservationsTask = new Task(this, {
+            autoRun: false,
+            task: async () => {
+                const bookingSession = getBookingSession();
+                if (!bookingSession) {
+                    return {
+                        reservations: null,
+                        total_price: 0,
+                    };
+                }
+                const result = await this.getApiService().fetchReservations(bookingSession);
+                if (result.error) {
+                    console.error("Failed to fetch reservations");
+                    return { reservations: [] };
+                }
+                return result.data || { reservations: [] };
+            },
+        });
+        this.handleCardValidationChange = (event) => {
+            event.stopPropagation();
+            const detail = event.detail;
+            if (detail.isValid) {
+                // Mirror regular form fields: clear external error when field becomes valid
+                switch (detail.elementType) {
+                    case "cardNumber":
+                        this.stripeController.cardError = "";
+                        this.stripeController.cardNumberErrorExt = "";
+                        break;
+                    case "cardExpiry":
+                        this.stripeController.cardExpiryErrorExt = "";
+                        break;
+                    case "cardCvc":
+                        this.stripeController.cardCvcErrorExt = "";
+                        break;
+                }
+            }
+            else if (detail.elementType === "cardNumber") {
+                this.stripeController.cardError = detail.error;
+            }
+            this.requestUpdate();
+        };
+        this.handleCanMakePaymentChange = (event) => {
+            event.stopPropagation();
+            this.canMakePayment = event.detail;
+        };
+        this.handlePaymentMethodAuthorized = (event) => {
+            event.stopPropagation();
+            this.stripeController.setAuthorizedPayment(event.detail.paymentMethod, event.detail.event);
+            this.onFormSubmit(new Event("submit"));
+        };
+        this.onFormSubmit = async (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            // Guard must remain first: mutations below assume a single active submission
+            if (this.flowController.isProcessing) {
+                return;
+            }
+            this.flowController.beginSubmission();
+            this.stripeController.clearAllErrors();
+            // Reset transaction IDs to avoid reporting stale IDs from a prior attempt.
+            // Preserve them when reusing a prior reservation (card-decline retry),
+            // since the same transaction is being completed.
+            if (!this.pendingClientSecret) {
+                this.transactionId = "";
+                this.userId = "";
+            }
+            try {
+                const isFormValid = this.validateForm();
+                let isCardValid = true;
+                if (this.paymentType === "stripe" &&
+                    this.paymentMethod !== "google-pay" &&
+                    this.paymentMethod !== "apple-pay") {
+                    isCardValid = await this.stripeComponent.validateCardElements();
+                }
+                if (!isFormValid || !isCardValid) {
+                    this.flowController.transition("idle");
+                    this.dispatchPaymentFailure();
+                    await this.updateComplete;
+                    this.scrollToFirstError();
+                    return;
+                }
+                if ((this.paymentMethod === "apple-pay" ||
+                    this.paymentMethod === "google-pay") &&
+                    !this.stripeController.authorizedPaymentMethod) {
+                    const pr = this.stripeComponent.getPaymentRequest();
+                    if (pr) {
+                        const price = getTotalPrice(this.reservationsTask.value);
+                        pr.update({
+                            total: {
+                                label: "Total",
+                                amount: Math.round(price),
+                            },
+                        });
+                        this.flowController.transition("idle"); // Return to idle so user can retry after dismissing payment sheet
+                        pr.show();
+                        return;
+                    }
+                }
+                // Crypto path: block transfer until MFA enrollment is complete
+                if (this.paymentType === "crypto") {
+                    if (!this.coinbaseSession || !this.isMfaEnrolled) {
+                        this.showCryptoAuthModal = true;
+                        this.flowController.transition("auth_required");
+                        return;
+                    }
+                    await this.syncEmailFromCoinbase();
+                    const tokensAmount = String(this.getReservationsLoyaltyTotal("pay"));
+                    this.pendingTransferAmount = tokensAmount;
+                    // Check for a valid pending transfer from a previous attempt.
+                    // If found (same amount, not stale, checksum OK), retry the API
+                    // confirmation instead of initiating a new on-chain transfer.
+                    const pendingTransfer = await this.cryptoTransferController.getValidPendingTransfer();
+                    if (pendingTransfer) {
+                        const retryResult = await this.cryptoTransferController.retryPendingTransfer(pendingTransfer);
+                        if (retryResult !== "completed") {
+                            this.flowController.transition("idle");
+                        }
+                        return;
+                    }
+                    // Initiate a fresh on-chain transfer; the MFA listener will open the OTP modal
+                    const transferResult = await this.startCryptoTransfer();
+                    if (transferResult !== "completed") {
+                        this.flowController.transition("idle");
+                    }
+                    return;
+                }
+                // Reuse the PaymentIntent from a prior attempt when retrying after a card
+                // decline: the first reservation PUT consumes the single-use booking
+                // session, but a declined PaymentIntent stays confirmable, so re-submit
+                // the corrected card to Stripe without re-running the reservation.
+                this.flowController.transition("confirming");
+                let clientSecret = this.pendingClientSecret;
+                if (!clientSecret) {
+                    const confirmationResult = await this.confirmReservation();
+                    if (!confirmationResult) {
+                        this.flowController.transition("failed");
+                        this.dispatchPaymentFailure();
+                        return;
+                    }
+                    clientSecret = confirmationResult
+                        .client_secret;
+                }
+                this.flowController.transition("processing_payment");
+                {
+                    const customer = this.prepareCustomerData();
+                    const data = this.reservationsTask.value;
+                    const expectedAmount = getTotalPrice(data);
+                    const paymentSuccess = await this.stripeController.processPayment(clientSecret, this.stripeComponent, this.paymentMethod, customer, expectedAmount);
+                    if (!paymentSuccess) {
+                        console.error("Payment processing failed");
+                        this.flowController.transition("failed");
+                        this.dispatchPaymentFailure();
+                        return;
+                    }
+                }
+                this.flowController.transition("polling");
+                const finalStatus = await this.checkTransactionStatus(this.userId);
+                if (finalStatus === "PAID") {
+                    // PaymentIntent is consumed; drop it so a later submit cannot reuse it
+                    this.pendingClientSecret = null;
+                    this.flowController.transition("success");
+                    this.redirectToConfirmation(true);
+                }
+                else {
+                    console.error("Transaction failed with status:", finalStatus);
+                    this.flowController.transition("failed");
+                    this.redirectToConfirmation(false);
+                }
+            }
+            catch (error) {
+                console.error("Error during payment process:", error);
+                this.stripeController.cardError =
+                    "An unexpected error occurred. Please try again.";
+                this.flowController.transition("failed");
+                this.dispatchPaymentFailure();
+            }
+        };
+        this.handleSendCode = async () => {
+            await this.cryptoAuthController.handleSendCode(this.walletEmail, () => this.validateWalletEmail(this.walletEmail), (error) => {
+                this.walletEmailError = error;
+            });
+        };
+        this.handleResendCode = async () => {
+            await this.cryptoAuthController.handleResendCode(this.walletEmail, this.codeSent, !!this.coinbaseSession);
+        };
+        this.handleLogin = async () => {
+            await this.cryptoAuthController.handleLogin(this.walletEmail);
+        };
+        this.startCryptoTransfer = async () => {
+            return this.cryptoTransferController.startTransfer();
+        };
+        this.handleMfaCodeSubmitted = async (e) => {
+            await this.cryptoTransferController.handleMfaCodeSubmitted(e.detail.code);
+        };
+        this.handleMfaResendRequested = async () => {
+            await this.cryptoTransferController.handleMfaResendRequested();
+        };
+        this.handleTransferCancelled = () => {
+            this.cryptoTransferController.handleTransferCancelled();
+            this.flowController.transition("idle");
+        };
+    }
+    static { this.styles = [
+        super.styles,
+        styles,
+    ]; }
+    getPageProperties() {
+        return {
+            page: this.currentPage,
+            currency: this.currency,
+            locale: this.locale,
+        };
+    }
+    getApiService() {
+        if (!this.apiService) {
+            this.apiService = new PaymentApiService({
+                client: this.client,
+                distributorID: this.distributorID,
+                locale: this.locale,
+            });
+        }
+        else {
+            this.apiService.updateConfig({
+                client: this.client,
+                distributorID: this.distributorID,
+                locale: this.locale,
+            });
+        }
+        return this.apiService;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (getLocale() !== this.locale) {
+            setLocale(this.locale);
+        }
+        if (changedProperties.has("codeSent")) {
+            if (this.codeSent) {
+                this.cryptoAuthController.startOtpInactivityTimer(this.codeSent, !!this.coinbaseSession);
+            }
+            else {
+                this.cryptoAuthController.clearOtpInactivityTimer();
+                this.cryptoAuthController.showResend = false;
+            }
+        }
+        if (changedProperties.has("loyaltyPoints") ||
+            changedProperties.has("cdpProjectId")) {
+            const prevLoyalty = changedProperties.has("loyaltyPoints")
+                ? changedProperties.get("loyaltyPoints")
+                : this.loyaltyPoints;
+            if (this.loyaltyPoints && this.cdpProjectId) {
+                this.initCoinbase(this.cdpProjectId).then(() => {
+                    this.getUser()
+                        .catch(() => { })
+                        .finally(() => this.syncEmailFromCoinbase());
+                    this.balanceTask.run();
+                });
+            }
+            else if (prevLoyalty && !this.loyaltyPoints) {
+                this.paymentType = "stripe";
+                this.coinbaseSession = undefined;
+                this.codeSent = false;
+                this.walletEmail = "";
+                this.walletEmailError = "";
+                this.cleanupCoinbase();
+                this.balanceTask.run();
+            }
+        }
+        if (changedProperties.has("mfaVerificationRequired")) {
+            if (this.mfaVerificationRequired && this.flowController.isProcessing) {
+                this.cryptoTransferController.openMfaVerification();
+            }
+        }
+        if (this.showCryptoAuthModal &&
+            this.coinbaseSession &&
+            this.isMfaEnrolled) {
+            this.showCryptoAuthModal = false;
+        }
+    }
+    firstUpdated() {
+        this.configTask.run();
+        this.countriesTask.run();
+        this.geolocationTask.run();
+        this.reservationsCheckTask.run();
+        this.reservationsTask.run();
+        this.updateComplete.then(() => {
+            const el = this.layoutElement;
+            if (el) {
+                this.layoutController.observe(el);
+            }
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Recreate AbortController on reconnect so polling works after
+        // disconnect/reconnect cycles (e.g. route transitions).
+        if (this.abortController.signal.aborted) {
+            this.abortController = new AbortController();
+        }
+    }
+    disconnectedCallback() {
+        this.abortController.abort();
+        this.clearBalanceBackoff();
+        super.disconnectedCallback();
+    }
+    clearBalanceBackoff() {
+        if (this.balanceRetryTimerId != null) {
+            clearTimeout(this.balanceRetryTimerId);
+            this.balanceRetryTimerId = undefined;
+        }
+    }
+    hasReservations() {
+        return (this.reservationsTask.value?.reservations?.length ?? 0) > 0;
+    }
+    getReservationsLoyaltyTotal(field) {
+        const reservations = this.reservationsTask?.value?.reservations;
+        if (!reservations?.length)
+            return 0;
+        return reservations.reduce((sum, r) => {
+            const val = r.loyalty
+                ? Number(Object.values(r.loyalty[field])[0] ?? 0)
+                : 0;
+            return sum + (isNaN(val) ? 0 : val);
+        }, 0);
+    }
+    formatEarnedTokens() {
+        if (!this.earnedTokensToIssue)
+            return null;
+        const numericValue = Number(this.earnedTokensToIssue);
+        if (Number.isNaN(numericValue) || numericValue <= 0)
+            return null;
+        return new Intl.NumberFormat(this.locale).format(numericValue);
+    }
+    handlePhoneCodeSelection(event) {
+        this.formController.handlePhoneCodeSelection(event.detail);
+    }
+    handleTermsChange(event) {
+        this.formController.handleTermsChange(event.detail.value);
+    }
+    handleFidaEmailAgreementChange(event) {
+        this.formController.marketing = event.detail.value;
+        this.requestUpdate();
+    }
+    isValidEmail(email) {
+        return isValidEmail(email);
+    }
+    handlePaymentTypeSelected(event) {
+        this.paymentType = event.detail.type;
+        if (this.paymentType === "crypto" &&
+            (!this.coinbaseSession || !this.isMfaEnrolled)) {
+            this.showCryptoAuthModal = true;
+        }
+    }
+    handlePaymentMethodSelected(event) {
+        this.paymentMethod = event.detail.method;
+    }
+    handleFormValueChange(fieldName, value) {
+        this.formController.handleValueChange(fieldName, value, this.flowController.submissionAttempts);
+    }
+    validateForm() {
+        const isValid = this.formController.validate(this.reservationsCheckTask.value, this.shouldShowBillingAddress(), this.paymentType, this.hasCryptoEmail());
+        this.stripeComponent?.updatePortals();
+        return isValid;
+    }
+    /**
+     * Scrolls to the first visible field that is currently in an error state.
+     * This improves UX by guiding the user to the problem immediately.
+     */
+    scrollToFirstError() {
+        const root = this.renderRoot;
+        // Determine if Stripe has an error shown
+        const stripeHasError = Boolean(this.stripeController.cardError ||
+            this.stripeController.cardNumberErrorExt ||
+            this.stripeController.cardExpiryErrorExt ||
+            this.stripeController.cardCvcErrorExt);
+        const selectors = [
+            "coras-field[error]",
+            "coras-country-field[has-error]",
+            "coras-hotel-pickup-field[has-error]",
+            "coras-joined-fields[error]",
+            "coras-checkbox[error]",
+        ];
+        if (stripeHasError) {
+            selectors.push("coras-stripe");
+        }
+        let target = null;
+        for (const sel of selectors) {
+            const el = root.querySelector(sel);
+            if (el) {
+                target = el;
+                break;
+            }
+        }
+        if (!target)
+            return;
+        target.scrollIntoView({
+            behavior: "smooth",
+            block: "center",
+        });
+        // Shadow DOM encapsulation requires explicit shadowRoot access for inner controls
+        try {
+            const shadowRoot = target
+                .shadowRoot;
+            if (shadowRoot) {
+                const focusable = shadowRoot.querySelector("input, select, textarea, button, [tabindex]");
+                if (focusable) {
+                    focusable.focus({ preventScroll: true });
+                    return;
+                }
+            }
+        }
+        catch {
+            // no-op: focusing is best-effort
+        }
+        target.focus({ preventScroll: true });
+    }
+    getFieldVisibility() {
+        const data = this.reservationsCheckTask.value;
+        // In preview with no booking session there are no requirements to drive the
+        // form, so show every general field — the studio brands the full form.
+        if (this.preview && !data?.general?.requirements?.length) {
+            return {
+                hasNameField: true,
+                hasFirstNameField: true,
+                hasSecondNameField: true,
+                hasPhoneField: true,
+                hasEmailField: true,
+            };
+        }
+        return this.formController.getFieldVisibility(data);
+    }
+    hasFirstNameField() {
+        return this.getFieldVisibility().hasFirstNameField;
+    }
+    hasSecondNameField() {
+        return this.getFieldVisibility().hasSecondNameField;
+    }
+    hasPhoneField() {
+        return this.getFieldVisibility().hasPhoneField;
+    }
+    hasEmailField() {
+        return this.getFieldVisibility().hasEmailField;
+    }
+    /**
+     * Determines if billing address fields should be displayed.
+     * Billing address is only shown for card payments (not Apple Pay, Google Pay, or crypto).
+     */
+    shouldShowBillingAddress() {
+        if (this.paymentType === "crypto") {
+            return false;
+        }
+        return !(this.paymentMethod === "apple-pay" || this.paymentMethod === "google-pay");
+    }
+    renderContactDetailsEditable() {
+        return html `
+      <h2>${msg("Order details")}</h2>
+      <div class="fields-container">
+        ${this.hasFirstNameField()
+            ? this.renderField({ fieldName: "first_name" })
+            : nothing}
+        ${this.hasSecondNameField()
+            ? this.renderField({ fieldName: "second_name" })
+            : nothing}
+        ${this.hasPhoneField()
+            ? this.renderField({ fieldName: "phone" })
+            : nothing}
+      </div>
+    `;
+    }
+    renderActivityDetails() {
+        const data = this.reservationsCheckTask.value;
+        if (!data?.reservations || !data.reservations.length) {
+            return nothing;
+        }
+        const reservationSummaries = this.reservationsTask.value?.reservations || [];
+        return html `
+      <coras-activity-details
+        .reservationsCheck=${data}
+        .reservations=${reservationSummaries}
+        .formValues=${this.formController.formValues}
+        .formErrors=${this.formController.formErrors}
+        .submissionAttempts=${this.flowController.submissionAttempts}
+        .fieldsConfig=${FIELDS}
+        .countries=${this.countriesTask.value || []}
+        .selectedPhoneCode=${this.formController.selectedPhoneCode}
+        assets-url=${this.assetsURL}
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleFormValueChange(e.detail.fieldName, e.detail.value);
+        }}
+      ></coras-activity-details>
+    `;
+    }
+    validateWalletEmail(email) {
+        const error = validateWalletEmail(email);
+        this.walletEmailError = error;
+        return !error;
+    }
+    /**
+     * Checks if we have a valid email for crypto payments.
+     * Email is required for the reservation API.
+     * This checks for ANY email source (including user input).
+     */
+    hasCryptoEmail() {
+        return !!(this.formController.formValues.email || this.coinbaseSession?.email);
+    }
+    renderCryptoWalletInfo() {
+        return nothing;
+    }
+    renderPaymentDetailsStep() {
+        const fidaAmount = this.getReservationsLoyaltyTotal("pay");
+        const formattedFidaAmount = new Intl.NumberFormat(this.locale).format(isNaN(fidaAmount) ? 0 : fidaAmount);
+        const termsLabel = this.paymentType === "crypto"
+            ? msg("I confirm I have read and accept FIDA's Terms & Conditions")
+            : msg("I confirm I have read and accept Coras's Terms & Conditions");
+        if (this.paymentType === "crypto") {
+            const isLoggedIn = !!this.coinbaseSession;
+            const isFullyAuthenticated = isLoggedIn && this.isMfaEnrolled;
+            const balance = this.balanceTask.value;
+            const formattedBalance = balance != null ? this.formatTokenBalance(balance) : "0";
+            const currentBalance = Number(formattedBalance);
+            const insufficientBalance = balance === null || balance === 0n || currentBalance < fidaAmount;
+            return html `
+        ${isLoggedIn && isFullyAuthenticated
+                ? this.renderCryptoWalletInfo()
+                : nothing}
+        ${this.renderBillingAddress()}
+        <div class="footer">
+          <div class="terms-and-button crypto-footer">
+            <div class="terms-container">
+              <coras-checkbox
+                ?checked=${this.formController.termsAccepted}
+                ?error=${this.formController.termsError}
+                label="${termsLabel}"
+                @value-changed=${this.handleTermsChange}
+              ></coras-checkbox>
+            </div>
+            <div class="button-container">
+              <coras-button
+                type="submit"
+                data-testid="submit"
+                ?loading=${this.flowController.isProcessing}
+                ?disabled=${!this.hasReservations() ||
+                !isLoggedIn ||
+                (isFullyAuthenticated && insufficientBalance)}
+              >
+                ${isFullyAuthenticated && insufficientBalance
+                ? msg("Insufficient FIDA balance")
+                : html `${msg("Pay now with")} ${formattedFidaAmount} FIDA`}
+              </coras-button>
+            </div>
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      ${this.renderPaymentDetails()} ${this.renderBillingAddress()}
+      <div class="footer">
+        <div class="terms-and-button">
+          <div class="terms-container">
+            <coras-checkbox
+              ?checked=${this.formController.termsAccepted}
+              ?error=${this.formController.termsError}
+              label="${termsLabel}"
+              @value-changed=${this.handleTermsChange}
+            ></coras-checkbox>
+          </div>
+          <div class="button-container">
+            <coras-button
+              type="submit"
+              data-testid="submit"
+              ?loading=${this.flowController.isProcessing}
+              ?disabled=${!this.hasReservations()}
+            >
+              ${msg("Pay now")}
+            </coras-button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    handleCryptoAuthCancelled() {
+        this.showCryptoAuthModal = false;
+        this._resetMfaPhoneState();
+        // Only switch away from crypto if user hasn't logged in yet.
+        // If they're logged in but closed the MFA modal, keep them on crypto
+        // — the pay button will remain disabled until MFA is enrolled.
+        if (!this.coinbaseSession) {
+            this.paymentType = "stripe";
+        }
+    }
+    _resetMfaPhoneState() {
+        this.cryptoAuthController.resetMfaPhoneState();
+    }
+    /**
+     * Syncs the MFA phone number to the payment form if the form phone is empty.
+     * Called after successful MFA enrollment so the form gets the number the user
+     * verified during SMS OTP setup.
+     */
+    _syncMfaPhoneToFormIfEmpty() {
+        const formHasPhone = !!this.formController.formValues.phone &&
+            !!this.formController.selectedPhoneCode?.phoneCode;
+        if (formHasPhone)
+            return;
+        const mfaPhoneCode = this.cryptoAuthController.mfaSelectedPhoneCode ||
+            this.formController.selectedPhoneCode;
+        const mfaLocalNumber = this.cryptoAuthController.localPhoneNumber;
+        if (mfaPhoneCode && mfaLocalNumber) {
+            // Phone from MFA modal — sync back to the main form
+            this.formController.selectedPhoneCode = { ...mfaPhoneCode };
+            this.handleFormValueChange("phone", mfaLocalNumber);
+        }
+    }
+    renderCryptoAuthModalElement() {
+        if (!this.showCryptoAuthModal)
+            return nothing;
+        const formPhone = this.getFormPhoneNumber();
+        const maskedPhone = formPhone ? `******${formPhone.slice(-4)}` : "";
+        return html `
+      <coras-crypto-auth-modal
+        ?open=${this.showCryptoAuthModal}
+        email=${this.walletEmail}
+        email-error=${this.walletEmailError}
+        ?marketing=${this.formController.marketing}
+        ?code-sent=${this.codeSent}
+        ?is-logged-in=${!!this.coinbaseSession}
+        ?is-mfa-enrolled=${this.isMfaEnrolled}
+        ?mfa-enrollment-code-sent=${this.mfaEnrollmentCodeSent}
+        otp-error=${this.cryptoAuthController.otpError}
+        mfa-error=${this.cryptoAuthController.mfaError}
+        mfa-enrollment-error=${this.mfaEnrollmentError || ""}
+        ?show-resend=${this.cryptoAuthController.showResend}
+        rate-limit-error=${this.cryptoAuthController.otpRateLimitError}
+        sms-rate-limit-error=${this.cryptoAuthController.smsRateLimitError}
+        form-phone=${formPhone || ""}
+        masked-phone=${maskedPhone}
+        phone-number-error=${this.cryptoAuthController.phoneNumberError || ""}
+        assets-url=${this.assetsURL}
+        ?loading=${this.flowController.isProcessing}
+        ?show-phone-input=${this.cryptoAuthController.showMfaPhoneInput}
+        .countries=${this.countriesTask.value || []}
+        .selectedPhoneCode=${this.cryptoAuthController.mfaSelectedPhoneCode ||
+            this.formController.selectedPhoneCode}
+        local-phone-number=${this.cryptoAuthController.localPhoneNumber}
+        @email-changed=${(e) => {
+            this.walletEmail = e.detail.value;
+            if (this.walletEmailError)
+                this.walletEmailError = "";
+            if (this.walletEmail && this.paymentType === "crypto") {
+                this.handleFormValueChange("email", this.walletEmail);
+            }
+        }}
+        @marketing-changed=${this.handleFidaEmailAgreementChange}
+        @send-code=${this.handleSendCode}
+        @verify-code=${(e) => {
+            this.cryptoAuthController.otpCode = e.detail.code || "";
+            if (this.cryptoAuthController.otpError)
+                this.cryptoAuthController.otpError = "";
+            this.cryptoAuthController.clearOtpInactivityTimer();
+            this.cryptoAuthController.showResend = false;
+            this.handleLogin();
+        }}
+        @resend-email-code=${this.handleResendCode}
+        @initiate-mfa-enrollment=${() => {
+            const formPhone = this.getFormPhoneNumber();
+            const hasFormPhone = !!formPhone && !this.cryptoAuthController.showMfaPhoneInput;
+            this.cryptoAuthController.handleMfaEnrollmentWithFormPhone(formPhone, hasFormPhone, this.formController.selectedPhoneCode?.phoneCode || "", (err) => {
+                this.mfaEnrollmentError = err;
+            });
+        }}
+        @verify-mfa-enrollment=${(e) => {
+            this.cryptoAuthController.mfaCode = e.detail.code || "";
+            if (this.cryptoAuthController.mfaError)
+                this.cryptoAuthController.mfaError = "";
+            this.cryptoAuthController.handleVerifyMfaEnrollment();
+        }}
+        @resend-mfa-code=${() => {
+            const formPhone = this.getFormPhoneNumber();
+            const hasFormPhone = !!formPhone && !this.cryptoAuthController.showMfaPhoneInput;
+            this.cryptoAuthController.handleMfaEnrollmentWithFormPhone(formPhone, hasFormPhone, this.formController.selectedPhoneCode?.phoneCode || "", (err) => {
+                this.mfaEnrollmentError = err;
+            });
+        }}
+        @phone-changed=${(e) => {
+            this.cryptoAuthController.handlePhoneEnrollmentChange(e.detail.value);
+        }}
+        @phone-code-selected=${(e) => {
+            this.cryptoAuthController.mfaSelectedPhoneCode = e.detail;
+        }}
+        @show-phone-input=${() => {
+            this.cryptoAuthController.showMfaPhoneInput = true;
+            this.cryptoAuthController.localPhoneNumber = "";
+            if (!this.cryptoAuthController.mfaSelectedPhoneCode) {
+                this.cryptoAuthController.mfaSelectedPhoneCode = this.formController
+                    .selectedPhoneCode
+                    ? { ...this.formController.selectedPhoneCode }
+                    : null;
+            }
+        }}
+        @back-to-email-input=${() => {
+            this.codeSent = false;
+        }}
+        @back-to-sms-prompt=${() => {
+            this.mfaEnrollmentCodeSent = false;
+        }}
+        @auth-cancelled=${this.handleCryptoAuthCancelled}
+      ></coras-crypto-auth-modal>
+    `;
+    }
+    renderPaymentDetails() {
+        return html `
+      <div
+        class="payment-details-wrapper"
+        ?hidden=${this.paymentMethod !== "card"}
+      >
+        <h2>${msg("Payment details")}</h2>
+        <div class="card-container">
+          <coras-stripe
+            stripe-key=${this.stripeKey}
+            locale=${this.locale}
+            currency=${this.currency}
+            country=${this.findCountryCode(this.getFieldValue("country")) ||
+            "US"}
+            external-error=${this.stripeController.cardError}
+            external-card-number-error=${this.stripeController
+            .cardNumberErrorExt}
+            external-card-expiry-error=${this.stripeController
+            .cardExpiryErrorExt}
+            external-card-cvc-error=${this.stripeController.cardCvcErrorExt}
+            @card-validation-changed=${this.handleCardValidationChange}
+            @can-make-payment-changed=${this.handleCanMakePaymentChange}
+            @payment-method-authorized=${this.handlePaymentMethodAuthorized}
+          >
+          </coras-stripe>
+        </div>
+      </div>
+    `;
+    }
+    renderBillingAddress() {
+        const showBillingAddress = this.shouldShowBillingAddress();
+        const showEmail = this.hasEmailField();
+        if (!showBillingAddress && !showEmail) {
+            return nothing;
+        }
+        return html `
+      <coras-billing-address
+        .formValues=${this.formController.formValues}
+        .formErrors=${this.formController.formErrors}
+        .submissionAttempts=${this.flowController.submissionAttempts}
+        .countries=${this.countriesTask.value || []}
+        .fieldsConfig=${FIELDS}
+        ?showBillingAddress=${showBillingAddress}
+        ?showEmail=${showEmail}
+        assets-url=${this.assetsURL}
+        @value-changed=${(e) => {
+            e.stopPropagation();
+            this.handleFormValueChange(e.detail.fieldName, e.detail.value);
+        }}
+      ></coras-billing-address>
+    `;
+    }
+    getFieldValue(fieldName) {
+        return this.formController.getFieldValue(fieldName);
+    }
+    /**
+     * Finds the country code for a given country name
+     */
+    findCountryCode(countryName) {
+        const countriesValue = this.countriesTask.value;
+        const countries = Array.isArray(countriesValue) ? countriesValue : [];
+        return findCountryCodeUtil(countryName, countries);
+    }
+    /**
+     * Returns the best available email from Coinbase auth sources when using FIDA (crypto).
+     * Priority: explicitly entered walletEmail (from login form) > session email
+     */
+    async getCoinbaseAuthEmail() {
+        // 1) Email typed by the user into the FIDA login field
+        if (this.walletEmail) {
+            return this.walletEmail;
+        }
+        // 2) Email from the Coinbase session, if available
+        if (this.coinbaseSession?.email) {
+            return this.coinbaseSession.email;
+        }
+        return undefined;
+    }
+    /**
+     * Sync email in formValues from Coinbase authentication sources.
+     * Invoked after successful login, session restore, or when switching to crypto payments.
+     */
+    async syncEmailFromCoinbase() {
+        const coinbaseEmail = await this.getCoinbaseAuthEmail();
+        if (!coinbaseEmail)
+            return;
+        // Only autofill if the email field is currently empty
+        if (!this.formController.formValues.email) {
+            this.handleFormValueChange("email", coinbaseEmail);
+        }
+    }
+    async handleCryptoLoginSuccess() {
+        await this.syncEmailFromCoinbase();
+        this.submitUserConsent();
+    }
+    async submitUserConsent() {
+        try {
+            const email = this.walletEmail;
+            if (!email)
+                return;
+            const accessToken = await this.getCoinbaseAccessToken();
+            if (!accessToken)
+                return;
+            await this.getApiService().submitUserConsent(email, {
+                "Coinbase-Access-Token": accessToken,
+            });
+        }
+        catch {
+            // Fire-and-forget — consent failure should not block the login flow
+        }
+    }
+    /**
+     * Prepares customer data from form values
+     */
+    prepareCustomerData() {
+        return prepareCustomerDataUtil(this.formController.formValues, this.formController.selectedPhoneCode, this.findCountryCode.bind(this), this.shouldShowBillingAddress());
+    }
+    /**
+     * Prepares reservation data with requirements
+     */
+    prepareReservationData() {
+        const reservations = this.reservationsTask.value?.reservations;
+        return prepareReservationData(Array.isArray(reservations) && reservations.length > 0
+            ? reservations
+            : [], this.getFieldValue.bind(this));
+    }
+    /**
+     * Prepares attendee data for the attendees field in the PUT request to /reservations
+     */
+    prepareAttendeesData() {
+        const reservations = this.reservationsTask.value?.reservations;
+        return prepareAttendeesData(Array.isArray(reservations) && reservations.length > 0
+            ? reservations
+            : [], this.reservationsCheckTask.value, this.getFieldValue.bind(this), this.formController.selectedPhoneCode);
+    }
+    /**
+     * Confirms the reservation with the API
+     */
+    async confirmReservation() {
+        const customer = this.prepareCustomerData();
+        const { reservations } = this.prepareReservationData();
+        const { attendees, hasRequirements } = this.prepareAttendeesData();
+        /* reservation data prepared */
+        try {
+            if (!reservations.length) {
+                console.error("No reservations found");
+                this.formController.formErrors = {
+                    ...this.formController.formErrors,
+                    reservations: "At least one reservation is required",
+                };
+                return null;
+            }
+            const reservationsCheckData = this.reservationsCheckTask.value;
+            if (reservationsCheckData?.reservations) {
+                for (const reservation of reservationsCheckData.reservations) {
+                    if (reservation.id && reservation.requirements?.length) {
+                        const pickupRequirement = reservation.requirements.find((req) => req.field === "pickup_point");
+                        if (pickupRequirement) {
+                            const fieldName = `reservation_${reservation.id}_pickup_point`;
+                            const pickupId = this.getFieldValue(fieldName);
+                            if (pickupId) {
+                                const { error } = await this.getApiService().patchReservation(reservation.id, {
+                                    pickup_id: pickupId,
+                                    pickup_entry: null,
+                                });
+                                if (error) {
+                                    console.error("Failed to update pickup_id for reservation");
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            const phoneNumber = formatPhoneWithPlus(customer.phone);
+            if (customer.phone && !phoneNumber) {
+                // Validate phone format client-side before sending to the API
+                this.formController.formErrors = {
+                    ...this.formController.formErrors,
+                    phone: msg("Please enter a valid phone number"),
+                };
+                this.flowController.transition("idle");
+                await this.updateComplete;
+                this.scrollToFirstError();
+                return null;
+            }
+            const bookingSession = getBookingSession();
+            if (!bookingSession) {
+                console.error("Cannot confirm reservation: booking session is missing.");
+                return null;
+            }
+            const body = {
+                first_name: customer.name.split(" ")[0] || "",
+                second_name: customer.name.split(" ").slice(1).join(" ") || "",
+                email: customer.email,
+                phone_number: phoneNumber || "",
+                reservations,
+                attendees: hasRequirements && attendees.length > 0 ? attendees : null,
+                payment_type: this.paymentType === "crypto" ? 1 : 0,
+                payment_method_id: null,
+                payment_method_data: null,
+                products: null,
+                id_number: null,
+                wallet_address: null,
+                transaction_hash: null,
+                // Host-supplied custom data, stored by the API and returned on read.
+                ...(Object.keys(this.metadata).length > 0
+                    ? { metadata: this.metadata }
+                    : {}),
+            };
+            const customHeaders = {};
+            if (this.paymentType === "crypto") {
+                const smartAccountAddress = this.coinbaseSession?.smartAccountAddress;
+                if (smartAccountAddress) {
+                    body.wallet_address = smartAccountAddress;
+                }
+                if (this.transactionId) {
+                    body.transaction_hash = this.transactionId;
+                }
+                const accessToken = await this.getCoinbaseAccessToken();
+                if (accessToken) {
+                    customHeaders["Coinbase-Access-Token"] = accessToken;
+                }
+            }
+            const { data, error } = await this.getApiService().confirmReservation(body, bookingSession, customHeaders);
+            if (error) {
+                this.handleApiErrors(error);
+                return null;
+            }
+            if (data) {
+                const responseData = data;
+                this.transactionId = responseData.transaction_id;
+                this.userId = responseData.user_id;
+                this.pendingClientSecret = responseData.client_secret ?? null;
+                // Invalidate booking session so a page refresh cannot replay the reservation
+                removeBookingSession();
+                return responseData;
+            }
+            return null;
+        }
+        catch (error) {
+            this.handleApiErrors(error);
+            return null;
+        }
+    }
+    async checkTransactionStatus(userId, maxAttempts = TRANSACTION_POLLING_MAX_ATTEMPTS, initialInterval = TRANSACTION_POLLING_INITIAL_INTERVAL_MS) {
+        const { status, tokensToIssue } = await pollTransactionStatus(userId, maxAttempts, initialInterval, TRANSACTION_POLLING_MAX_INTERVAL_MS, this.client, this.distributorID, this.locale, (referenceId) => {
+            this.referenceId = referenceId;
+        }, this.abortController.signal);
+        if (status === "PAID") {
+            this.paymentSuccessful = true;
+            this.earnedTokensToIssue = tokensToIssue;
+        }
+        else {
+            this.paymentFailed = true;
+        }
+        return status;
+    }
+    /**
+     * Sanitizes error objects to prevent leaking internal/SDK details to the user.
+     * Only allows structured ApiError objects through; replaces unknown shapes.
+     */
+    sanitizeError(error) {
+        if (isApiError(error))
+            return error;
+        return { errors: {} };
+    }
+    /**
+     * Handles API errors by mapping them to form fields
+     */
+    handleApiErrors(error) {
+        const sanitized = this.sanitizeError(error);
+        const { attendees } = this.prepareAttendeesData();
+        const reservations = this.reservationsTask.value?.reservations;
+        const { formErrors, cardError } = mapApiErrorsToForm(sanitized, this.formController.formErrors, attendees, Array.isArray(reservations) ? reservations : []);
+        this.formController.formErrors = formErrors;
+        if (cardError) {
+            this.stripeController.cardError = cardError;
+        }
+        this.updateComplete.then(() => this.scrollToFirstError());
+    }
+    handleTryAgain() {
+        // Reset submit state so the user can re-submit
+        this.flowController.retry();
+        this.paymentFailed = false;
+        this.formController.formErrors = {};
+        this.stripeController.clearAllErrors();
+        this.requestUpdate();
+    }
+    /**
+     * Dispatches the coras:payment-status event with a failed status.
+     * Use this for failure paths that occur before we have transaction details.
+     */
+    dispatchPaymentFailure() {
+        fireEvent(this, "coras:payment-status", {
+            status: "failed",
+            ...(this.transactionId ? { reference: this.transactionId } : {}),
+        });
+    }
+    /**
+     * Handles payment confirmation
+     */
+    redirectToConfirmation(success) {
+        fireEvent(this, "coras:payment-status", {
+            status: success ? "succeeded" : "failed",
+            ...(this.transactionId ? { reference: this.transactionId } : {}),
+        });
+        // Scroll to top while the form content is still in the DOM and the page is
+        // scrollable. Doing this after the content swap may fail because the shorter
+        // confirmation view can remove the overflow that makes scrolling possible.
+        window.scrollTo({ top: 0, behavior: "instant" });
+        if (success) {
+            this.paymentSuccessful = true;
+            this.userEmail = this.formController.formValues.email || "";
+        }
+        else {
+            this.paymentFailed = true;
+        }
+    }
+    renderField(options) {
+        const { fieldName, customField, customType, borderless, suppressHelpText } = options;
+        if (fieldName === "phone") {
+            return this.renderPhoneField(fieldName);
+        }
+        const fieldConfig = getFieldConfig(fieldName, FIELDS, customField, customType);
+        if (!fieldConfig)
+            return null;
+        const value = this.getFieldValue(fieldName);
+        const error = this.formController.formErrors[fieldName] || "";
+        const validated = this.flowController.submissionAttempts > 0;
+        const hasError = validated && !!error;
+        if (fieldName === "country" || customType === "country") {
+            return html `
+        <coras-country-field
+          name="${fieldName}"
+          label="${fieldConfig.label}"
+          value="${value}"
+          help-text="${fieldConfig.helpText}"
+          error="${error}"
+          ?validated=${validated}
+          ?has-error=${hasError}
+          autocomplete="${fieldConfig.autocomplete}"
+          assets-url="${this.assetsURL}"
+          .countries=${this.countriesTask.value || []}
+          @value-changed=${(event) => {
+                event.stopPropagation();
+                this.handleFormValueChange(fieldName, event.detail.value);
+            }}
+        ></coras-country-field>
+      `;
+        }
+        return html `
+      <coras-field
+        type="${fieldConfig.type}"
+        autocomplete="${fieldConfig.autocomplete}"
+        name="${fieldName}"
+        label="${fieldConfig.label}"
+        value="${value}"
+        ?validated=${validated}
+        ?error=${hasError}
+        help-text=${suppressHelpText
+            ? ""
+            : hasError
+                ? error
+                : fieldConfig.helpText}
+        placeholder="${fieldConfig.placeholder}"
+        ?borderless=${borderless}
+        @value-changed=${(event) => {
+            event.stopPropagation();
+            this.handleFormValueChange(fieldName, event.detail.value);
+        }}
+      ></coras-field>
+    `;
+    }
+    renderPhoneField(fieldName) {
+        const fieldConfig = FIELDS[fieldName];
+        const error = this.formController.formErrors[fieldName] || "";
+        const validated = this.flowController.submissionAttempts > 0;
+        const hasError = validated && !!error;
+        return html `
+      <coras-phone-field
+        .countries=${this.countriesTask.value || []}
+        .selectedPhoneCode=${this.formController.selectedPhoneCode}
+        value=${this.formController.getFieldValue(fieldName)}
+        name=${fieldName}
+        label=${fieldConfig.label()}
+        placeholder=${fieldConfig.placeholder()}
+        ?validated=${validated}
+        ?error=${hasError}
+        error-text=${hasError ? error : ""}
+        help-text=${fieldConfig.helpText()}
+        @value-changed=${(event) => {
+            event.stopPropagation();
+            this.handleFormValueChange(fieldName, event.detail.value);
+        }}
+        @phone-code-selected=${this.handlePhoneCodeSelection}
+      ></coras-phone-field>
+    `;
+    }
+    renderPaymentTypeSelector() {
+        const data = this.reservationsTask.value;
+        const payWithTokens = String(this.getReservationsLoyaltyTotal("pay"));
+        const earnWithTokens = String(this.getReservationsLoyaltyTotal("earn"));
+        const price = convertToLocaleCurrency({
+            value: data?.total_price || 0,
+            locale: this.locale,
+            currency: this.currency,
+            isSmallestCurrencyUnit: true,
+        });
+        const disablePay = !this.loyaltyPoints || !this.cryptoRpc;
+        const isLoggedIn = !!this.coinbaseSession;
+        const isFullyAuthenticated = isLoggedIn && this.isMfaEnrolled;
+        const balance = this.balanceTask.value;
+        const hasBalance = balance != null;
+        const formattedBalance = hasBalance ? this.formatTokenBalance(balance) : "";
+        const currentBalance = Number(formattedBalance || 0);
+        const fidaAmount = Number(payWithTokens || 0);
+        const insufficientBalance = !hasBalance || balance === 0n || currentBalance < fidaAmount;
+        return html `
+      <coras-payment-type-selector
+        .currency=${this.currency}
+        pay-with-tokens=${payWithTokens}
+        earn-with-tokens=${earnWithTokens}
+        .price=${price}
+        selected-type=${this.paymentType}
+        selected-method=${this.paymentMethod}
+        assets-url="${this.assetsURL}"
+        ?disable-pay=${disablePay}
+        ?apple-pay-available=${this.canMakePayment.applePay}
+        ?google-pay-available=${this.canMakePayment.googlePay}
+        ?loyalty-points=${this.loyaltyPoints}
+        ?logged-in=${isFullyAuthenticated}
+        balance=${formattedBalance}
+        ?insufficient-balance=${insufficientBalance}
+        @payment-type-selected=${this.handlePaymentTypeSelected}
+        @payment-method-selected=${this.handlePaymentMethodSelected}
+      ></coras-payment-type-selector>
+    `;
+    }
+    renderPaymentForm() {
+        return html `
+      <form id="form" @submit=${this.onFormSubmit}>
+        ${this.renderContactDetailsEditable()}
+        <hr class="section-divider" />
+        ${this.renderActivityDetails()} ${this.renderPaymentTypeSelector()}
+        ${this.renderPaymentDetailsStep()}
+      </form>
+      ${this.renderCryptoAuthModalElement()}
+    `;
+    }
+    getShortestExpirationSeconds() {
+        return getShortestExpirationSeconds(this.reservationsTask.value?.reservations);
+    }
+    getTotalQuantity() {
+        return getTotalQuantity(this.reservationsTask.value?.reservations);
+    }
+    getTotalPriceFormatted() {
+        const taskValue = this.reservationsTask.value;
+        const data = taskValue && "reservations" in taskValue ? taskValue : undefined;
+        const price = getTotalPrice(data);
+        return convertToLocaleCurrency({
+            value: price,
+            locale: this.locale,
+            currency: this.currency,
+        });
+    }
+    renderContent() {
+        if (this.paymentSuccessful) {
+            return this.renderSuccess();
+        }
+        if (this.paymentFailed) {
+            return this.renderFailure();
+        }
+        return this.configTask.render({
+            initial: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            error: () => {
+                this.showErrorModalOnce();
+                return html ``;
+            },
+            complete: () => this.renderReservationsTask(),
+        });
+    }
+    getLoyaltyAccountUrl() {
+        if (!this.loyaltyPageUrl)
+            return "#";
+        const base = this.loyaltyPageUrl.replace(/\/+$/, "");
+        return `${base}/${this.locale}/${this.currency}`;
+    }
+    renderSuccess() {
+        const tokens = this.formatEarnedTokens();
+        return html `
+      <div class="confirmation-container">
+        <coras-confirmation
+          referenceId="${this.referenceId || this.transactionId}"
+          userEmail="${this.userEmail}"
+          locale="${this.locale}"
+          .reservations="${this.reservationsTask.value?.reservations || []}"
+          ?loyalty="${this.paymentType === "crypto"}"
+        ></coras-confirmation>
+        ${this.loyaltyPoints && tokens
+            ? html `<div class="collect-fida-container">
+              <coras-collect-fida
+                tokens="${tokens}"
+                account-url="${this.getLoyaltyAccountUrl()}"
+                assets-url="${this.assetsURL}"
+              ></coras-collect-fida>
+            </div>`
+            : nothing}
+      </div>
+    `;
+    }
+    renderFailure() {
+        return html `
+      <div class="payment-error-container">
+        <coras-alert
+          variant="error"
+          title="${msg("Sorry, your order was not successful")}"
+          assets-url="${this.assetsURL}"
+        >
+          ${msg("Your card has not been charged. If you want to try again, please click the button to go back to the same event")}
+          <coras-button
+            slot="action-below"
+            @click=${this.handleTryAgain}
+            data-testid="try-again"
+          >
+            ${msg("Try again")}
+          </coras-button>
+        </coras-alert>
+      </div>
+    `;
+    }
+    renderReservationsTask() {
+        // The check task gates the form: it surfaces API failures and supplies the
+        // field requirements. Basket emptiness, though, is decided by the actual
+        // reservations below — the check response only carries requirements, and a
+        // basket of plain tickets returns no per-reservation entries.
+        return this.reservationsCheckTask.render({
+            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            error: () => {
+                this.showErrorModalOnce();
+                return html ``;
+            },
+            complete: () => this.renderReservations(),
+        });
+    }
+    renderReservations() {
+        return this.reservationsTask.render({
+            pending: () => html `<div class="loading">${msg("Loading...")}</div>`,
+            complete: (data) => {
+                // Nothing to check out: real customers are guided back to browse;
+                // the branding preview renders the full form (with Pay now disabled).
+                const hasCheckout = (data?.reservations?.length ?? 0) > 0;
+                if (!hasCheckout && !this.preview) {
+                    return this.renderEmptyBasket();
+                }
+                return html `
+          <div class="payment-form-container">${this.renderPaymentForm()}</div>
+        `;
+            },
+        });
+    }
+    renderEmptyBasket() {
+        return html `
+      <div class="empty-basket-state">
+        <coras-icon
+          icon="shopping-basket"
+          assets-url="${this.assetsURL}"
+        ></coras-icon>
+        <h2>${msg("Your basket is empty")}</h2>
+        <p>${msg("Add tickets to your basket to check out.")}</p>
+        <coras-button
+          variant="primary"
+          data-testid="browse-events"
+          @click=${() => this.dispatchPageUpdate({ page: "landing" })}
+        >
+          ${msg("Browse events")}
+        </coras-button>
+      </div>
+    `;
+    }
+    renderBottomDrawer() {
+        if (this.paymentSuccessful || this.paymentFailed)
+            return nothing;
+        return html `
+      <coras-bottom-drawer
+        .open=${!this.layoutController.isBasketVisible}
+        style="--bottom-drawer-padding-inline: 1rem; --bottom-drawer-padding-block: 1rem;"
+      >
+        <div class="drawer-collapsed-content">
+          ${this.renderMobileCollapsedContent()}
+        </div>
+        <div class="drawer-expanded-content">
+          <coras-basket expanded></coras-basket>
+        </div>
+      </coras-bottom-drawer>
+    `;
+    }
+    renderMobileCollapsedContent() {
+        return html `
+      ${this.renderExpirationTimer()} ${this.renderMobileBasketSummary()}
+    `;
+    }
+    renderExpirationTimer() {
+        const exp = this.getShortestExpirationSeconds();
+        if (exp <= 0)
+            return nothing;
+        return html `<div class="mobile-expiration-timer">
+      <coras-expiration-timer
+        assets-url="${this.assetsURL}"
+        expiration-time="${exp}"
+      ></coras-expiration-timer>
+    </div>`;
+    }
+    renderMobileBasketSummary() {
+        return html `
+      <div class="mobile-basket-summary">
+        <div class="left">
+          <span class="label">${msg("Total")}</span>
+          <span class="value">${this.getTotalPriceFormatted()}</span>
+        </div>
+        <div class="right">
+          <coras-icon
+            icon="shopping-basket"
+            assets-url="${this.assetsURL}"
+          ></coras-icon>
+          <span class="count">(${this.getTotalQuantity()})</span>
+        </div>
+      </div>
+    `;
+    }
+    /**
+     * Gets the full phone number from the payment form contact details.
+     * Returns the E.164 formatted phone or null if not available.
+     */
+    getFormPhoneNumber() {
+        const phoneCode = this.formController.selectedPhoneCode?.phoneCode;
+        const phoneNumber = this.formController.formValues.phone;
+        if (!phoneCode || !phoneNumber) {
+            return null;
+        }
+        const cleanNumber = phoneNumber
+            .replace(/^[+0]+/, "")
+            .replace(/[\s\-()]/g, "");
+        return `+${phoneCode}${cleanNumber}`;
+    }
+    recoverPendingTransfer() {
+        return this.cryptoTransferController.recoverPendingTransfer();
+    }
+    /**
+     * Renders the OTP verification modal for crypto payments
+     */
+    renderTransferModal() {
+        if (!this.cryptoTransferController.showTransferModal)
+            return nothing;
+        const formPhone = this.getFormPhoneNumber();
+        const maskedPhone = formPhone ? `******${formPhone.slice(-4)}` : "";
+        return html `
+      <coras-transfer-modal
+        ?open=${this.cryptoTransferController.showTransferModal}
+        amount=${this.pendingTransferAmount}
+        masked-phone=${maskedPhone}
+        modal-state=${this.cryptoTransferController.transferModalState}
+        mfa-error=${this.cryptoTransferController.mfaVerificationError}
+        ?mfa-loading=${this.cryptoTransferController.mfaVerificationLoading}
+        locale=${this.locale}
+        assets-url=${this.assetsURL}
+        @transfer-cancelled=${this.handleTransferCancelled}
+        @mfa-code-submitted=${this.handleMfaCodeSubmitted}
+        @mfa-resend-requested=${this.handleMfaResendRequested}
+      ></coras-transfer-modal>
+    `;
+    }
+    render() {
+        return html `
+      <coras-layout with-basket>
+        <slot name="navbar" slot="navbar"></slot>
+        <div class="content">
+          ${this.renderContent()}
+          ${this.paymentSuccessful || this.paymentFailed
+            ? nothing
+            : html `<coras-basket></coras-basket>`}
+        </div>
+        ${this.renderErrorModal({
+            assetsURL: this.assetsURL,
+            buttonLabel: msg("Refresh the page"),
+            onRetry: () => this.reservationsCheckTask.run(),
+            onHelp: () => this.dispatchPageUpdate({ page: "help" }),
+        })}
+        ${this.renderBottomDrawer()} ${this.renderTransferModal()}
+        <slot name="footer" slot="footer"></slot>
+      </coras-layout>
+    `;
+    }
+};
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "stripeKey", void 0);
+__decorate([
+    property({ attribute: false })
+], CorasPaymentPage.prototype, "metadata", void 0);
+__decorate([
+    property({ type: Boolean })
+], CorasPaymentPage.prototype, "preview", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "cdpProjectId", void 0);
+__decorate([
+    consume({ context: currentPageContext })
+], CorasPaymentPage.prototype, "currentPage", void 0);
+__decorate([
+    query("coras-stripe")
+], CorasPaymentPage.prototype, "stripeComponent", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "showCryptoAuthModal", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "transactionId", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "userId", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "referenceId", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "earnedTokensToIssue", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "canMakePayment", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "paymentType", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "paymentMethod", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "paymentSuccessful", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "paymentFailed", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "loyaltyPageUrl", void 0);
+__decorate([
+    state()
+], CorasPaymentPage.prototype, "userEmail", void 0);
+__decorate([
+    query("coras-layout")
+], CorasPaymentPage.prototype, "layoutElement", void 0);
+CorasPaymentPage = __decorate([
+    localized()
+], CorasPaymentPage);
+export { CorasPaymentPage };