@mj-biz-apps/orders-ng 5.20.0 → 5.22.0

package/dist/lib/checkout-widget/checkout-public-host.component.js

@@ -8,9 +8,12 @@
  */
 import { ChangeDetectorRef, Component, ElementRef, Input, inject, } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ACCOUNT_STEP_FAILED, AccountMessage, CheckPasswordEntry, IsAccountSettled, MayRedirect, ReadCheckoutAccount, VerificationNote, } from './checkout-account.js';
+import { BuildCheckoutCompleteDetail, CHECKOUT_CANCEL_EVENT, CHECKOUT_CLOSE_EVENT, CHECKOUT_RESET_REFUSED_EVENT, CHECKOUT_RESET_REQUEST_EVENT, CHECKOUT_COMPLETE_EVENT, CHECKOUT_ERROR_EVENT, CHECKOUT_STATE_CHANGE_EVENT, CheckoutElementEvent, } from './checkout-events.js';
 import { MJCheckoutWidgetComponent, } from './checkout-widget.component.js';
 import { buildCheckoutDraftLine, formatStripeError, intentAlreadyCollected, stripeConfirmAlreadyCollected, } from './checkout-draft-line.js';
 import * as i0 from "@angular/core";
+const _c0 = a0 => [a0];
 function CheckoutPublicHostComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
     i0.ɵɵtext(1);
@@ -21,7 +24,7 @@ function CheckoutPublicHostComponent_Conditional_1_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(ctx_r0.loadError);
 } }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 8);
+    i0.ɵɵelementStart(0, "p", 7);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -29,17 +32,118 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("Order ", ctx_r0.orderNumber);
 } }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 8);
+    i0.ɵɵtext(1, "Setting up your account\u2026");
+    i0.ɵɵelementEnd();
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.verificationNote);
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 17);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.passwordError);
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "form", 10);
+    i0.ɵɵlistener("submit", function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template_form_submit_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r0.submitPassword()); });
+    i0.ɵɵelementStart(1, "h2", 11);
+    i0.ɵɵtext(2, "Set a password for your account");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_9_Conditional_3_Template, 2, 1, "p", 12);
+    i0.ɵɵelementStart(4, "label", 13);
+    i0.ɵɵtext(5, "Password");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "input", 14);
+    i0.ɵɵlistener("input", function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.password = $event.target.value); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "label", 15);
+    i0.ɵɵtext(8, "Confirm password");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "input", 16);
+    i0.ɵɵlistener("input", function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template_input_input_9_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.passwordConfirmation = $event.target.value); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(10, CheckoutPublicHostComponent_Conditional_2_Conditional_9_Conditional_10_Template, 2, 1, "p", 17);
+    i0.ɵɵelementStart(11, "button", 18);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 19);
+    i0.ɵɵlistener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.skipPassword()); });
+    i0.ɵɵtext(14, " Not now ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r0.verificationNote ? 3 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r0.password);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r0.passwordConfirmation);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.passwordError ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.passwordBusy);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.passwordBusy ? "Saving\u2026" : "Set password", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r0.passwordBusy);
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵlistener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Conditional_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.dismissAccount()); });
+    i0.ɵɵtext(1, "Not now");
+    i0.ɵɵelementEnd();
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20)(1, "button", 21);
+    i0.ɵɵlistener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.retryAccount()); });
+    i0.ɵɵtext(2, "Try again");
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Conditional_3_Template, 2, 0, "button", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional((ctx_r0.config == null ? null : ctx_r0.config.redirectUrl) ? 3 : -1);
+} }
+function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 8);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_2_Template, 4, 1, "div", 20);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.accountMessage);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r0.account == null ? null : ctx_r0.account.Outcome) === "Failed" ? 2 : -1);
+} }
 function CheckoutPublicHostComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4);
     i0.ɵɵtext(2, "\u2713");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h1", 6);
+    i0.ɵɵelementStart(3, "h1", 5);
     i0.ɵɵtext(4, "You're all set");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 7);
+    i0.ɵɵelementStart(5, "p", 6);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template, 2, 1, "p", 8);
+    i0.ɵɵconditionalCreate(7, CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template, 2, 1, "p", 7);
+    i0.ɵɵconditionalCreate(8, CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template, 2, 0, "p", 8)(9, CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template, 15, 7, "form", 9)(10, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template, 3, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -47,20 +151,28 @@ function CheckoutPublicHostComponent_Conditional_2_Template(rf, ctx) { if (rf &
     i0.ɵɵtextInterpolate(ctx_r0.successMessage);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.orderNumber ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.accountLoading ? 8 : (ctx_r0.account == null ? null : ctx_r0.account.CanSetPassword) ? 9 : ctx_r0.accountMessage ? 10 : -1);
 } }
 function CheckoutPublicHostComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 3);
     i0.ɵɵtext(1, "Loading checkout\u2026");
     i0.ɵɵelementEnd();
 } }
-function CheckoutPublicHostComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-checkout-widget", 9);
-    i0.ɵɵlistener("submitted", function CheckoutPublicHostComponent_Conditional_4_Template_mj_checkout_widget_submitted_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onSubmitted($event)); })("cancelled", function CheckoutPublicHostComponent_Conditional_4_Template_mj_checkout_widget_cancelled_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.onCancelled()); });
+function CheckoutPublicHostComponent_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-checkout-widget", 25);
+    i0.ɵɵlistener("submitted", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_submitted_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onSubmitted($event)); })("cancelled", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_cancelled_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onCancelled()); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("config", ctx_r0.config)("distributionSlug", ctx_r0.slug)("sessionKey", ctx_r0.sessionKey)("isProcessing", ctx_r0.processing)("isPaymentReady", ctx_r0.isPaymentReady)("stripePaymentMethodId", ctx_r0.stripePaymentMethodId)("prefillEmail", ctx_r0.prefillEmail)("errorMessage", ctx_r0.errorMessage);
+} }
+function CheckoutPublicHostComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, CheckoutPublicHostComponent_Conditional_4_For_1_Template, 1, 8, "mj-checkout-widget", 24, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("config", ctx_r0.config)("distributionSlug", ctx_r0.slug)("sessionKey", ctx_r0.sessionKey)("isProcessing", ctx_r0.processing)("isPaymentReady", ctx_r0.isPaymentReady)("stripePaymentMethodId", ctx_r0.stripePaymentMethodId)("errorMessage", ctx_r0.errorMessage);
+    i0.ɵɵrepeater(i0.ɵɵpureFunction1(0, _c0, ctx_r0.formGeneration));
 } }
 export { buildCheckoutDraftLine } from './checkout-draft-line.js';
 export class CheckoutPublicHostComponent {
@@ -78,10 +190,35 @@ export class CheckoutPublicHostComponent {
     loadError = null;
     successMessage = null;
     orderNumber = null;
+    /** The post-payment account step, when the host registered one (#292). */
+    account = null;
+    password = '';
+    passwordConfirmation = '';
+    passwordError = null;
+    passwordBusy = false;
+    passwordSet = false;
+    /** True while the account step is being asked for. */
+    accountLoading = false;
+    /** The buyer chose to leave a failed account step. */
+    accountDismissed = false;
+    get accountMessage() {
+        return this.account ? AccountMessage(this.account, this.passwordSet) : null;
+    }
+    get verificationNote() {
+        return VerificationNote(this.account);
+    }
     stripe = null;
     card = null;
     cardMounted = false;
     destroyed = false;
+    state = null;
+    /** Bumped by Cancel: the template re-creates the widget, which clears everything the buyer entered. */
+    formGeneration = 0;
+    /** From the element's attributes, for a host that embeds the checkout in its own panel. */
+    prefillEmail = null;
+    attributionSource = null;
+    attributionReference = null;
+    onResetRequested = () => this.resetRequested();
     get isFree() {
         return (this.config?.unitPrice ?? 0) <= 0;
     }
@@ -96,6 +233,10 @@ export class CheckoutPublicHostComponent {
             this.loadError = 'Checkout requires a secure random source. Open this page over HTTPS.';
             return;
         }
+        if (await this.resumeAccountStep()) {
+            return;
+        }
+        this.setState('LOADING');
         try {
             const init = await this.post('/initialize', {
                 slug: this.slug,
@@ -118,11 +259,14 @@ export class CheckoutPublicHostComponent {
                 return;
             }
             this.config = cfg;
+            this.setState('CHECKOUT');
         }
         catch {
             this.loadError = 'Checkout is temporarily unavailable. Please try again.';
         }
         finally {
+            if (this.loadError)
+                this.reportError(this.loadError);
             this.cdr.detectChanges();
         }
     }
@@ -141,6 +285,7 @@ export class CheckoutPublicHostComponent {
     }
     ngOnDestroy() {
         this.destroyed = true;
+        this.hostEl?.nativeElement?.removeEventListener?.(CHECKOUT_RESET_REQUEST_EVENT, this.onResetRequested);
         try {
             this.card?.unmount?.();
         }
@@ -148,8 +293,74 @@ export class CheckoutPublicHostComponent {
             /* already gone */
         }
     }
+    /**
+     * Cancel resets the checkout to a blank form and tells the host page, which may close the modal
+     * the checkout sits in. The widget is re-created, so every field the buyer filled in is cleared,
+     * and the card field is mounted again on the new form. The session stays open for the next try.
+     */
     onCancelled() {
+        if (this.processing) {
+            return;
+        }
+        this.resetForm();
+        this.setState('CHECKOUT');
+        this.dispatch(CHECKOUT_CANCEL_EVENT, {});
+        this.dispatch(CHECKOUT_CLOSE_EVENT, {});
+        this.cdr.detectChanges();
+    }
+    /**
+     * A reset the embedding host asked for, by dispatching `checkout-reset` on the element (a voice
+     * or chat agent closing its panel, say). Refused while a payment is in flight — resetting then
+     * would strand a charge the buyer cannot see. Unlike Cancel it sends no `checkout-cancel` or
+     * `checkout-close`: the host started it. Also refused while the account step after a sale is
+     * unsettled, since the buyer could not come back to it.
+     *
+     * A reset always starts a new session, before a sale as well as after one: the server matches
+     * the buyer's person record once per session, so a kept session would carry the previous
+     * conversation's buyer into the next. The e-mail and attribution are read again, so a host
+     * starting a new conversation sets them on the element before it dispatches the reset.
+     */
+    resetRequested() {
+        if (this.processing || this.accountUnsettled) {
+            this.dispatch(CHECKOUT_RESET_REFUSED_EVENT, { state: this.state });
+            return;
+        }
+        this.successMessage = null;
+        this.orderNumber = null;
+        this.account = null;
+        this.accountDismissed = false;
+        this.password = '';
+        this.passwordConfirmation = '';
+        this.passwordError = null;
+        this.passwordSet = false;
+        this.config = null;
+        this.sessionId = '';
+        this.forgetClientKey();
+        this.forgetCompleting();
+        this.resetForm();
+        void this.ngOnInit();
+    }
+    /** The account step is still asking the buyer for something, and the buyer has not left it. */
+    get accountUnsettled() {
+        return this.accountLoading || this.passwordBusy || (!this.accountDismissed && !IsAccountSettled(this.account));
+    }
+    /**
+     * Back to a blank form: every field, the error banner and the card entry. The session stays open.
+     * The caller reports the state, since a host reset reports `LOADING` next, not `CHECKOUT`.
+     */
+    resetForm() {
         this.errorMessage = null;
+        this.stripePaymentMethodId = null;
+        try {
+            this.card?.destroy?.();
+        }
+        catch {
+            /* already gone */
+        }
+        this.card = null;
+        this.cardMounted = false;
+        this.isPaymentReady = !this.config?.stripePublishableKey;
+        this.formGeneration++;
     }
     async onSubmitted(event) {
         if (this.processing || !this.config?.productId) {
@@ -157,6 +368,7 @@ export class CheckoutPublicHostComponent {
         }
         this.processing = true;
         this.errorMessage = null;
+        this.setState('PROCESSING');
         try {
             const line = buildCheckoutDraftLine(this.config.productId, event);
             const draft = await this.post('/draft', {
@@ -164,6 +376,10 @@ export class CheckoutPublicHostComponent {
                 clientSessionKey: this.sessionKey,
                 email: event.email,
                 lines: [line],
+                answers: event.answers,
+                ...(this.attributionSource
+                    ? { attribution: { source: this.attributionSource, reference: this.attributionReference } }
+                    : {}),
             });
             if (!draft?.Success) {
                 throw new Error(this.str(draft?.ErrorMessage, 'Could not price this checkout.'));
@@ -211,6 +427,7 @@ export class CheckoutPublicHostComponent {
         }
         catch (err) {
             this.errorMessage = err instanceof Error ? err.message : 'Checkout failed.';
+            this.reportError(this.errorMessage);
         }
         finally {
             this.processing = false;
@@ -218,6 +435,8 @@ export class CheckoutPublicHostComponent {
         }
     }
     async finish() {
+        // Remembered before completing, so a reload after payment returns to the account step.
+        this.rememberCompleting(this.sessionId);
         const done = await this.post('/complete', {
             sessionId: this.sessionId,
             clientSessionKey: this.sessionKey,
@@ -229,11 +448,153 @@ export class CheckoutPublicHostComponent {
         this.successMessage =
             this.config?.successMessage ||
                 (this.orderNumber ? `Thank you. Order ${this.orderNumber} is confirmed.` : 'Thank you. Your order is confirmed.');
-        if (this.config?.redirectUrl) {
-            window.location.href = this.config.redirectUrl;
+        // Dispatched before any redirect, so a host listener sees the sale on this page.
+        this.setState('SUCCESS');
+        this.dispatch(CHECKOUT_COMPLETE_EVENT, BuildCheckoutCompleteDetail({
+            sessionId: this.sessionId,
+            productName: this.config?.productName ?? this.config?.title,
+            productId: this.config?.productId,
+            totalGross: done.TotalGross,
+            currency: this.config?.currency,
+            // The applied promotion code, once the checkout takes one.
+            coupon: null,
+        }));
+        if (done.AccountStep === true) {
+            await this.loadAccount();
+        }
+        else {
+            this.forgetCompleting();
+            this.leaveIfDone();
         }
         this.cdr.detectChanges();
     }
+    /** Asks for the account step of the completed checkout. The host is asked again only after a failure. */
+    async loadAccount() {
+        this.accountLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const res = await this.post('/account', {
+                sessionId: this.sessionId,
+                clientSessionKey: this.sessionKey,
+            });
+            this.account = res.Success ? ReadCheckoutAccount(res.Account) : ACCOUNT_STEP_FAILED;
+        }
+        catch {
+            this.account = ACCOUNT_STEP_FAILED;
+        }
+        finally {
+            this.accountLoading = false;
+        }
+        if (IsAccountSettled(this.account))
+            this.forgetCompleting();
+        this.leaveIfDone();
+        this.cdr.detectChanges();
+    }
+    /** Asks the host again after the account step failed. */
+    async retryAccount() {
+        if (this.accountLoading)
+            return;
+        await this.loadAccount();
+    }
+    /** Leaves a failed account step. A reload of this checkout in the same tab offers it again. */
+    dismissAccount() {
+        this.accountDismissed = true;
+        this.leaveIfDone();
+    }
+    /**
+     * A reload after payment: when this tab completed a checkout whose account step is not settled,
+     * shows the confirmation and the account step instead of a new checkout.
+     */
+    async resumeAccountStep() {
+        const sessionId = this.completingSession();
+        if (!sessionId)
+            return false;
+        try {
+            const res = await this.post('/account', { sessionId, clientSessionKey: this.sessionKey });
+            const account = res.Success ? ReadCheckoutAccount(res.Account) : null;
+            if (!account) {
+                this.forgetCompleting();
+                return false;
+            }
+            this.sessionId = sessionId;
+            this.successMessage = 'Thank you. Your order is confirmed.';
+            this.account = account;
+            if (IsAccountSettled(account))
+                this.forgetCompleting();
+            return true;
+        }
+        catch {
+            return false;
+        }
+        finally {
+            this.cdr.detectChanges();
+        }
+    }
+    /** Sends the new account's password. The host's policy decides; its message is shown when it refuses. */
+    async submitPassword() {
+        const problem = CheckPasswordEntry(this.password, this.passwordConfirmation);
+        if (problem) {
+            this.passwordError = problem;
+            return;
+        }
+        this.passwordBusy = true;
+        this.passwordError = null;
+        try {
+            const res = await this.post('/account/password', {
+                sessionId: this.sessionId,
+                clientSessionKey: this.sessionKey,
+                password: this.password,
+            });
+            this.account = ReadCheckoutAccount(res.Account) ?? this.account;
+            if (IsAccountSettled(this.account))
+                this.forgetCompleting();
+            if (res.Success) {
+                this.passwordSet = true;
+                this.password = '';
+                this.passwordConfirmation = '';
+                this.leaveIfDone();
+            }
+            else {
+                this.passwordError = this.str(res.ErrorMessage, 'That password could not be set. Please try another.');
+            }
+        }
+        catch {
+            this.passwordError = 'That password could not be set right now. Please try again.';
+        }
+        finally {
+            this.passwordBusy = false;
+            this.cdr.detectChanges();
+        }
+    }
+    /** Leaves the password for later: the buyer can reset it at sign-in. */
+    skipPassword() {
+        if (this.account)
+            this.account = { ...this.account, CanSetPassword: false };
+        this.forgetCompleting();
+        this.leaveIfDone();
+    }
+    /** Follows the widget's redirect once nothing is left for the buyer to do here. */
+    leaveIfDone() {
+        if (this.config?.redirectUrl && !this.accountLoading && MayRedirect(this.account, this.accountDismissed)) {
+            window.location.href = this.config.redirectUrl;
+        }
+    }
+    /** Reports a state the host page can track; repeats of the same state are not re-sent. */
+    setState(state) {
+        if (this.state === state)
+            return;
+        this.state = state;
+        this.dispatch(CHECKOUT_STATE_CHANGE_EVENT, { state });
+    }
+    reportError(message) {
+        this.setState('ERROR');
+        this.dispatch(CHECKOUT_ERROR_EVENT, { message });
+    }
+    /** Dispatches on the `<mj-orders-checkout>` element; bubbling and composed, so `document` hears it too. */
+    dispatch(name, detail) {
+        const el = this.hostEl?.nativeElement;
+        el?.dispatchEvent(CheckoutElementEvent(name, detail));
+    }
     async mountStripe(mount) {
         const pk = this.config?.stripePublishableKey;
         if (!pk) {
@@ -252,6 +613,7 @@ export class CheckoutPublicHostComponent {
         catch (err) {
             this.cardMounted = false;
             this.errorMessage = err instanceof Error ? err.message : 'Could not load card entry.';
+            this.reportError(this.errorMessage);
         }
     }
     loadStripe(pk) {
@@ -290,6 +652,29 @@ export class CheckoutPublicHostComponent {
         if (apiRoot) {
             this.apiRoot = apiRoot.replace(/\/+$/, '');
         }
+        this.readConversationAttributes();
+        el.addEventListener?.(CHECKOUT_RESET_REQUEST_EVENT, this.onResetRequested);
+    }
+    /**
+     * For a host that embeds the checkout in its own panel: an e-mail it already knows, and where the
+     * checkout came from. The server keeps the attribution only if it reads as one.
+     */
+    readConversationAttributes() {
+        const el = this.hostEl?.nativeElement;
+        if (!el) {
+            return;
+        }
+        this.prefillEmail = el.getAttribute('email') || el.getAttribute('data-email') || null;
+        this.attributionSource = el.getAttribute('source') || el.getAttribute('data-source') || null;
+        this.attributionReference = el.getAttribute('source-ref') || el.getAttribute('data-source-ref') || null;
+    }
+    forgetClientKey() {
+        try {
+            sessionStorage.removeItem(`mj-checkout-key:${this.slug}`);
+        }
+        catch {
+            /* private mode */
+        }
     }
     clientKey() {
         const storageKey = `mj-checkout-key:${this.slug}`;
@@ -324,6 +709,33 @@ export class CheckoutPublicHostComponent {
         }
         return key;
     }
+    get completingKey() {
+        return `mj-checkout-completing:${this.slug}`;
+    }
+    rememberCompleting(sessionId) {
+        try {
+            sessionStorage.setItem(this.completingKey, sessionId);
+        }
+        catch {
+            /* private mode */
+        }
+    }
+    forgetCompleting() {
+        try {
+            sessionStorage.removeItem(this.completingKey);
+        }
+        catch {
+            /* private mode */
+        }
+    }
+    completingSession() {
+        try {
+            return sessionStorage.getItem(this.completingKey);
+        }
+        catch {
+            return null;
+        }
+    }
     async post(path, body) {
         const res = await fetch(`${this.apiRoot}${path}`, {
             method: 'POST',
@@ -339,22 +751,22 @@ export class CheckoutPublicHostComponent {
         return typeof value === 'string' && value ? value : fallback;
     }
     static ɵfac = function CheckoutPublicHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CheckoutPublicHostComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckoutPublicHostComponent, selectors: [["mj-orders-checkout"]], inputs: { slug: "slug", apiRoot: "apiRoot" }, decls: 5, vars: 1, consts: [[1, "mj-checkout-public"], ["role", "alert", 1, "mj-widget-error-banner"], ["role", "status", 1, "mj-checkout-success"], ["role", "status", 1, "mj-checkout-public__status"], [3, "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "errorMessage"], ["aria-hidden", "true", 1, "mj-checkout-success__icon"], [1, "mj-checkout-success__title"], [1, "mj-checkout-success__msg"], [1, "mj-checkout-success__order"], [3, "submitted", "cancelled", "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "errorMessage"]], template: function CheckoutPublicHostComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CheckoutPublicHostComponent, selectors: [["mj-orders-checkout"]], inputs: { slug: "slug", apiRoot: "apiRoot" }, decls: 5, vars: 1, consts: [[1, "mj-checkout-public"], ["role", "alert", 1, "mj-widget-error-banner"], ["role", "status", 1, "mj-checkout-success"], ["role", "status", 1, "mj-checkout-public__status"], ["aria-hidden", "true", 1, "mj-checkout-success__icon"], [1, "mj-checkout-success__title"], [1, "mj-checkout-success__msg"], [1, "mj-checkout-success__order"], ["role", "status", 1, "mj-checkout-account__msg"], [1, "mj-checkout-account"], [1, "mj-checkout-account", 3, "submit"], [1, "mj-checkout-account__title"], [1, "mj-checkout-account__note"], ["for", "mj-checkout-password", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["for", "mj-checkout-password-confirm", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password-confirm", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["role", "alert", 1, "mj-checkout-account__error"], ["type", "submit", 1, "mj-checkout-account__submit", 3, "disabled"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click", "disabled"], [1, "mj-checkout-account", "mj-checkout-account--actions"], ["type", "button", 1, "mj-checkout-account__submit", 3, "click"], ["type", "button", 1, "mj-checkout-account__skip"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click"], [3, "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage"], [3, "submitted", "cancelled", "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage"]], template: function CheckoutPublicHostComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵconditionalCreate(1, CheckoutPublicHostComponent_Conditional_1_Template, 2, 1, "div", 1)(2, CheckoutPublicHostComponent_Conditional_2_Template, 8, 2, "div", 2)(3, CheckoutPublicHostComponent_Conditional_3_Template, 2, 0, "p", 3)(4, CheckoutPublicHostComponent_Conditional_4_Template, 1, 7, "mj-checkout-widget", 4);
+            i0.ɵɵconditionalCreate(1, CheckoutPublicHostComponent_Conditional_1_Template, 2, 1, "div", 1)(2, CheckoutPublicHostComponent_Conditional_2_Template, 11, 3, "div", 2)(3, CheckoutPublicHostComponent_Conditional_3_Template, 2, 0, "p", 3)(4, CheckoutPublicHostComponent_Conditional_4_Template, 2, 2);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.loadError ? 1 : ctx.successMessage ? 2 : !ctx.config ? 3 : 4);
-        } }, dependencies: [CommonModule, MJCheckoutWidgetComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.mj-checkout-public[_ngcontent-%COMP%] {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success[_ngcontent-%COMP%] {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon[_ngcontent-%COMP%] {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg[_ngcontent-%COMP%], \n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}"] });
+        } }, dependencies: [CommonModule, MJCheckoutWidgetComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.mj-checkout-public[_ngcontent-%COMP%] {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success[_ngcontent-%COMP%] {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon[_ngcontent-%COMP%] {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg[_ngcontent-%COMP%], \n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n\n\n.mj-checkout-account[_ngcontent-%COMP%] {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error[_ngcontent-%COMP%] {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%] {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip[_ngcontent-%COMP%] {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%]:disabled, \n.mj-checkout-account__skip[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg[_ngcontent-%COMP%] {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CheckoutPublicHostComponent, [{
         type: Component,
-        args: [{ selector: 'mj-orders-checkout', standalone: true, imports: [CommonModule, MJCheckoutWidgetComponent], template: "<div class=\"mj-checkout-public\">\n    @if (loadError) {\n        <div class=\"mj-widget-error-banner\" role=\"alert\">{{ loadError }}</div>\n    } @else if (successMessage) {\n        <div class=\"mj-checkout-success\" role=\"status\">\n            <div class=\"mj-checkout-success__icon\" aria-hidden=\"true\">\u2713</div>\n            <h1 class=\"mj-checkout-success__title\">You're all set</h1>\n            <p class=\"mj-checkout-success__msg\">{{ successMessage }}</p>\n            @if (orderNumber) {\n                <p class=\"mj-checkout-success__order\">Order {{ orderNumber }}</p>\n            }\n        </div>\n    } @else if (!config) {\n        <p class=\"mj-checkout-public__status\" role=\"status\">Loading checkout\u2026</p>\n    } @else {\n        <mj-checkout-widget\n            [config]=\"config\"\n            [distributionSlug]=\"slug\"\n            [sessionKey]=\"sessionKey\"\n            [isProcessing]=\"processing\"\n            [isPaymentReady]=\"isPaymentReady\"\n            [stripePaymentMethodId]=\"stripePaymentMethodId\"\n            [errorMessage]=\"errorMessage\"\n            (submitted)=\"onSubmitted($event)\"\n            (cancelled)=\"onCancelled()\">\n        </mj-checkout-widget>\n    }\n</div>\n", styles: [":host {\n    display: block;\n}\n\n.mj-checkout-public {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg,\n.mj-checkout-success__order {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n"] }]
+        args: [{ selector: 'mj-orders-checkout', standalone: true, imports: [CommonModule, MJCheckoutWidgetComponent], template: "<div class=\"mj-checkout-public\">\n    @if (loadError) {\n        <div class=\"mj-widget-error-banner\" role=\"alert\">{{ loadError }}</div>\n    } @else if (successMessage) {\n        <div class=\"mj-checkout-success\" role=\"status\">\n            <div class=\"mj-checkout-success__icon\" aria-hidden=\"true\">\u2713</div>\n            <h1 class=\"mj-checkout-success__title\">You're all set</h1>\n            <p class=\"mj-checkout-success__msg\">{{ successMessage }}</p>\n            @if (orderNumber) {\n                <p class=\"mj-checkout-success__order\">Order {{ orderNumber }}</p>\n            }\n            @if (accountLoading) {\n                <p class=\"mj-checkout-account__msg\" role=\"status\">Setting up your account\u2026</p>\n            } @else if (account?.CanSetPassword) {\n                <form class=\"mj-checkout-account\" (submit)=\"$event.preventDefault(); submitPassword()\">\n                    <h2 class=\"mj-checkout-account__title\">Set a password for your account</h2>\n                    @if (verificationNote) {\n                        <p class=\"mj-checkout-account__note\">{{ verificationNote }}</p>\n                    }\n                    <label class=\"mj-checkout-account__label\" for=\"mj-checkout-password\">Password</label>\n                    <input\n                        id=\"mj-checkout-password\"\n                        class=\"mj-checkout-account__input\"\n                        type=\"password\"\n                        autocomplete=\"new-password\"\n                        [value]=\"password\"\n                        (input)=\"password = $any($event.target).value\" />\n                    <label class=\"mj-checkout-account__label\" for=\"mj-checkout-password-confirm\">Confirm password</label>\n                    <input\n                        id=\"mj-checkout-password-confirm\"\n                        class=\"mj-checkout-account__input\"\n                        type=\"password\"\n                        autocomplete=\"new-password\"\n                        [value]=\"passwordConfirmation\"\n                        (input)=\"passwordConfirmation = $any($event.target).value\" />\n                    @if (passwordError) {\n                        <p class=\"mj-checkout-account__error\" role=\"alert\">{{ passwordError }}</p>\n                    }\n                    <button class=\"mj-checkout-account__submit\" type=\"submit\" [disabled]=\"passwordBusy\">\n                        {{ passwordBusy ? 'Saving\u2026' : 'Set password' }}\n                    </button>\n                    <button class=\"mj-checkout-account__skip\" type=\"button\" (click)=\"skipPassword()\" [disabled]=\"passwordBusy\">\n                        Not now\n                    </button>\n                </form>\n            } @else if (accountMessage) {\n                <p class=\"mj-checkout-account__msg\" role=\"status\">{{ accountMessage }}</p>\n                @if (account?.Outcome === 'Failed') {\n                    <div class=\"mj-checkout-account mj-checkout-account--actions\">\n                        <button class=\"mj-checkout-account__submit\" type=\"button\" (click)=\"retryAccount()\">Try again</button>\n                        @if (config?.redirectUrl) {\n                            <button class=\"mj-checkout-account__skip\" type=\"button\" (click)=\"dismissAccount()\">Not now</button>\n                        }\n                    </div>\n                }\n            }\n        </div>\n    } @else if (!config) {\n        <p class=\"mj-checkout-public__status\" role=\"status\">Loading checkout\u2026</p>\n    } @else {\n        @for (generation of [formGeneration]; track generation) {\n        <mj-checkout-widget\n            [config]=\"config\"\n            [distributionSlug]=\"slug\"\n            [sessionKey]=\"sessionKey\"\n            [isProcessing]=\"processing\"\n            [isPaymentReady]=\"isPaymentReady\"\n            [stripePaymentMethodId]=\"stripePaymentMethodId\"\n            [prefillEmail]=\"prefillEmail\"\n            [errorMessage]=\"errorMessage\"\n            (submitted)=\"onSubmitted($event)\"\n            (cancelled)=\"onCancelled()\">\n        </mj-checkout-widget>\n        }\n    }\n</div>\n", styles: [":host {\n    display: block;\n}\n\n.mj-checkout-public {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg,\n.mj-checkout-success__order {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n/* Post-payment account step: set a password for the account the host created (#292). */\n.mj-checkout-account {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit:disabled,\n.mj-checkout-account__skip:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions {\n    margin-top: 0.75rem;\n}\n"] }]
     }], null, { slug: [{
             type: Input
         }], apiRoot: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckoutPublicHostComponent, { className: "CheckoutPublicHostComponent", filePath: "lib/checkout-widget/checkout-public-host.component.ts", lineNumber: 61 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CheckoutPublicHostComponent, { className: "CheckoutPublicHostComponent", filePath: "lib/checkout-widget/checkout-public-host.component.ts", lineNumber: 84 }); })();
 //# sourceMappingURL=checkout-public-host.component.js.map