@forgeroute/ui 0.4.40 → 0.4.42

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, computed, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
-import { DOCUMENT, isPlatformBrowser } from "@angular/common";
-import { AlertComponent, BadgeComponent, ButtonComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, ModalComponent, OptionCardComponent, SkeletonComponent, TextComponent, TextInputComponent } from "@forgeroute/ui";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injectable, InjectionToken, PLATFORM_ID, ViewEncapsulation, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { DOCUMENT, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+import { AlertComponent, BadgeComponent, ButtonComponent, DetailCardComponent, FormRowComponent, FormSectionComponent, ModalComponent, SkeletonComponent, StackComponent, TextComponent, TextInputComponent } from "@forgeroute/ui";
 import * as i1 from "@angular/forms";
 import { FormsModule } from "@angular/forms";
-import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 const sdkImporter = { load: () => import("@stripe/stripe-js") };
 const defaultStripeLoader = async (publishableKey, options) => {
@@ -450,6 +449,7 @@ var StripePaymentComponent = class StripePaymentComponent {
 		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 		this.pending = input(false, ...ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []);
 		this.label = input("Payment details", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
 		this.mountId = input("", ...ngDevMode ? [{ debugName: "mountId" }] : /* istanbul ignore next */ []);
 		this.mountClass = input("", ...ngDevMode ? [{ debugName: "mountClass" }] : /* istanbul ignore next */ []);
 		this.showAchNotice = input(true, ...ngDevMode ? [{ debugName: "showAchNotice" }] : /* istanbul ignore next */ []);
@@ -1245,6 +1245,13 @@ var StripePaymentComponent = class StripePaymentComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				mountId: {
 					classPropertyName: "mountId",
 					publicName: "mountId",
@@ -1377,6 +1384,9 @@ var StripePaymentComponent = class StripePaymentComponent {
       @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
+      @if (!mountOnly() && required()) {
+        <div class="sp-label" data-testid="stripe-required-label">{{ label() }}<span class="sp-required" aria-hidden="true">*</span></div>
+      }
       <div #mount class="sp-mount" [attr.id]="mountId() || null" [class]="mountClass()" [class.sp-mount--hidden]="mountHidden()" [attr.aria-hidden]="mountHidden() ? 'true' : null" [attr.inert]="mountHidden() ? '' : null"
         [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
       @if (!mountOnly() && achNoticeVisible()) {
@@ -1394,7 +1404,7 @@ var StripePaymentComponent = class StripePaymentComponent {
     </div>
   `,
 			isInline: true,
-			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"],
+			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-label{font-size:.875rem;font-weight:500;color:#1e293b;margin-bottom:6px}.sp-required{color:#dc2626;margin-left:2px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"],
 			dependencies: [
 				{
 					kind: "component",
@@ -1407,7 +1417,8 @@ var StripePaymentComponent = class StripePaymentComponent {
 						"dismissAriaLabel",
 						"quiet",
 						"compact",
-						"inline"
+						"inline",
+						"fill"
 					],
 					outputs: ["dismissed"]
 				},
@@ -1492,6 +1503,9 @@ i0.ɵɵngDeclareClassMetadata({
       @if (!mountOnly() && loadErrorText(); as text) {
         <div class="sp-block" data-testid="stripe-load-error"><ui-alert variant="danger">{{ text }}</ui-alert></div>
       }
+      @if (!mountOnly() && required()) {
+        <div class="sp-label" data-testid="stripe-required-label">{{ label() }}<span class="sp-required" aria-hidden="true">*</span></div>
+      }
       <div #mount class="sp-mount" [attr.id]="mountId() || null" [class]="mountClass()" [class.sp-mount--hidden]="mountHidden()" [attr.aria-hidden]="mountHidden() ? 'true' : null" [attr.inert]="mountHidden() ? '' : null"
         [attr.role]="mountOnly() ? null : 'group'" [attr.aria-label]="mountOnly() ? null : label()" data-testid="stripe-mount"></div>
       @if (!mountOnly() && achNoticeVisible()) {
@@ -1508,7 +1522,7 @@ i0.ɵɵngDeclareClassMetadata({
       }
     </div>
   `,
-			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"]
+			styles: ["ui-stripe-payment{display:block;min-width:0}ui-stripe-payment .sp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sp-block{margin-top:12px}.sp-label{font-size:.875rem;font-weight:500;color:#1e293b;margin-bottom:6px}.sp-required{color:#dc2626;margin-left:2px}.sp-actions{margin-top:16px;display:flex;justify-content:flex-end}ui-stripe-payment .sp{position:relative}.sp-mount--hidden{position:absolute;top:0;left:0;right:0;opacity:0;pointer-events:none}@media(max-width:480px){.sp-actions{display:block}.sp-actions ui-button{display:flex}ui-stripe-payment .sp-actions .btn{width:100%}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1769,6 +1783,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
 		mountId: [{
 			type: i0.Input,
 			args: [{
@@ -2393,7 +2415,8 @@ var MicrodepositVerifyComponent = class MicrodepositVerifyComponent {
 						"dismissAriaLabel",
 						"quiet",
 						"compact",
-						"inline"
+						"inline",
+						"fill"
 					],
 					outputs: ["dismissed"]
 				},
@@ -2824,90 +2847,240 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-var StripeConnectComponent = class StripeConnectComponent {
-	constructor() {
-		this.http = inject(HttpClient);
-		this.destroyRef = inject(DestroyRef);
-		this.apiBase = inject(FORGEROUTE_CONFIG, { optional: true })?.baseUrl ?? "/api";
-		this.statusEndpoint = input("/integrations/stripe/status", ...ngDevMode ? [{ debugName: "statusEndpoint" }] : /* istanbul ignore next */ []);
-		this.connectEndpoint = input("/integrations/stripe/connect", ...ngDevMode ? [{ debugName: "connectEndpoint" }] : /* istanbul ignore next */ []);
-		this.connectParams = input(null, ...ngDevMode ? [{ debugName: "connectParams" }] : /* istanbul ignore next */ []);
-		this.title = input("Stripe", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
-		this.description = input("Collect your customers' payments online. You finish setting up your account on Stripe, then come back here. Payouts go straight to your Stripe account.", ...ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []);
-		this.connectedText = input("Connected. Payments go straight to your Stripe account.", ...ngDevMode ? [{ debugName: "connectedText" }] : /* istanbul ignore next */ []);
-		this.connectLabel = input("Connect", ...ngDevMode ? [{ debugName: "connectLabel" }] : /* istanbul ignore next */ []);
-		this.reconnectLabel = input("Reconnect", ...ngDevMode ? [{ debugName: "reconnectLabel" }] : /* istanbul ignore next */ []);
-		this.loadFailedText = input("The Stripe connection could not be loaded. Please try again.", ...ngDevMode ? [{ debugName: "loadFailedText" }] : /* istanbul ignore next */ []);
-		this.connectFailedText = input("Stripe could not be reached. Please try again.", ...ngDevMode ? [{ debugName: "connectFailedText" }] : /* istanbul ignore next */ []);
-		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
-		this.statusChange = output();
-		this.connected = signal(false, ...ngDevMode ? [{ debugName: "connected" }] : /* istanbul ignore next */ []);
-		this.statusKnown = signal(false, ...ngDevMode ? [{ debugName: "statusKnown" }] : /* istanbul ignore next */ []);
-		this.connecting = signal(false, ...ngDevMode ? [{ debugName: "connecting" }] : /* istanbul ignore next */ []);
-		this.error = signal("", ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
-		this.busy = computed(() => !this.statusKnown() && !this.error() || this.connecting(), ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
-		this.started = false;
-		effect(() => {
-			this.statusEndpoint();
-			untracked(() => {
-				if (!this.started) {
-					this.started = true;
-					this.refresh();
-				}
-			});
+function isStripeUrl(url) {
+	if (!url) return false;
+	try {
+		const u = new URL(url);
+		return u.protocol === "https:" && (u.hostname === "stripe.com" || u.hostname.endsWith(".stripe.com"));
+	} catch {
+		return false;
+	}
+}
+var StripeConnectFlow = class {
+	constructor(o) {
+		this.o = o;
+		this.tabOpened = false;
+	}
+	get blocked() {
+		return this.o.state.loading() || !!this.o.disabled?.();
+	}
+	start() {
+		const create = this.o.createAccount();
+		if (!create || this.blocked) return;
+		this.o.state.loading.set(true);
+		const tab = this.openBlankTab();
+		create().pipe(takeUntilDestroyed(this.o.destroyRef)).subscribe({
+			next: (result) => {
+				this.o.state.accountId.set(result.accountId);
+				this.o.state.loading.set(false);
+				this.openStripe(tab, result.onboardingUrl);
+			},
+			error: (error) => {
+				this.closeTab(tab);
+				this.o.state.loading.set(false);
+				this.o.emit({
+					kind: "failed",
+					action: "start",
+					error
+				});
+			}
 		});
 	}
-	refresh() {
-		this.error.set("");
-		this.http.get(this.apiBase + this.statusEndpoint()).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-			next: (body) => {
-				const connected = body?.connected === true;
-				this.connected.set(connected);
-				this.statusKnown.set(true);
-				this.statusChange.emit(connected);
+	check() {
+		const status = this.o.getStatus();
+		if (!status || this.blocked) return;
+		this.o.state.loading.set(true);
+		status().pipe(takeUntilDestroyed(this.o.destroyRef)).subscribe({
+			next: (s) => {
+				this.o.state.complete.set(s.isComplete);
+				this.o.state.detailsSubmitted.set(s.detailsSubmitted ?? false);
+				this.o.state.loading.set(false);
+				if (s.isComplete) this.o.emit({
+					kind: "complete",
+					source: "check"
+				});
+				else if (s.detailsSubmitted) this.o.emit({
+					kind: "verifying",
+					source: "check"
+				});
+				else if (s.onboardingUrl) this.o.emit({ kind: "incomplete" });
 			},
-			error: (e) => {
-				this.statusKnown.set(false);
-				this.error.set(this.messageOf(e, this.loadFailedText()));
+			error: (error) => {
+				this.o.state.loading.set(false);
+				this.o.emit({
+					kind: "failed",
+					action: "check",
+					error
+				});
 			}
 		});
 	}
-	connect() {
-		if (this.connecting() || this.disabled()) return;
-		this.error.set("");
-		this.connecting.set(true);
-		let params = new HttpParams();
-		for (const [k, v] of Object.entries(this.connectParams() ?? {})) params = params.set(k, v);
-		this.http.get(this.apiBase + this.connectEndpoint(), { params }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
-			next: (res) => {
-				const url = res?.url ?? res?.authUrl ?? res?.onboardingUrl;
-				if (!url || !this.isWebAddress(url)) {
-					this.connecting.set(false);
-					this.error.set(this.connectFailedText());
-					return;
-				}
-				this.redirect(url);
+	resume() {
+		const status = this.o.getStatus();
+		if (!status || this.blocked) return;
+		this.o.state.loading.set(true);
+		const tab = this.openBlankTab();
+		status().pipe(takeUntilDestroyed(this.o.destroyRef)).subscribe({
+			next: (s) => {
+				this.o.state.loading.set(false);
+				if (s.isComplete) {
+					this.closeTab(tab);
+					this.o.state.complete.set(true);
+					this.o.emit({
+						kind: "complete",
+						source: "resume"
+					});
+				} else if (s.detailsSubmitted) {
+					this.closeTab(tab);
+					this.o.state.detailsSubmitted.set(true);
+					this.o.emit({
+						kind: "verifying",
+						source: "resume"
+					});
+				} else this.openStripe(tab, s.onboardingUrl);
 			},
-			error: (e) => {
-				this.connecting.set(false);
-				this.error.set(this.messageOf(e, this.connectFailedText()));
+			error: (error) => {
+				this.closeTab(tab);
+				this.o.state.loading.set(false);
+				this.o.emit({
+					kind: "failed",
+					action: "resume",
+					error
+				});
 			}
 		});
 	}
-	redirect(url) {
-		window.location.href = url;
+	readStatusOnReturn() {
+		const status = this.o.getStatus();
+		if (!status) return;
+		status().pipe(takeUntilDestroyed(this.o.destroyRef)).subscribe({
+			next: (s) => {
+				this.o.state.complete.set(s.isComplete);
+				this.o.state.detailsSubmitted.set(s.detailsSubmitted ?? false);
+				if (s.isComplete) this.o.emit({
+					kind: "complete",
+					source: "return"
+				});
+				else if (s.detailsSubmitted) this.o.emit({
+					kind: "verifying",
+					source: "return"
+				});
+			},
+			error: () => {}
+		});
+	}
+	openStripe(tab, url) {
+		if (isStripeUrl(url) && tab) {
+			tab.location.href = url;
+			this.tabOpened = true;
+		} else if (isStripeUrl(url)) this.navigateCurrentTab(url);
+		else {
+			this.closeTab(tab);
+			this.o.emit({ kind: "link-unavailable" });
+		}
+	}
+	openBlankTab() {
+		const tab = window.open("about:blank", "_blank");
+		if (tab) try {
+			tab.opener = null;
+		} catch {}
+		return tab;
 	}
-	isWebAddress(url) {
+	navigateCurrentTab(url) {
+		if (this.o.navigate) this.o.navigate(url);
+		else window.location.href = url;
+	}
+	closeTab(tab) {
 		try {
-			const p = new URL(url, window.location.origin).protocol;
-			return p === "https:" || p === "http:";
-		} catch {
-			return false;
+			tab?.close();
+		} catch {}
+	}
+};
+function stripeConnectNotice(outcome) {
+	switch (outcome.kind) {
+		case "complete": return {
+			variant: "success",
+			message: outcome.source === "resume" ? "Payment account setup is already complete!" : "Payment account setup complete!"
+		};
+		case "verifying": return {
+			variant: "success",
+			message: "Setup submitted! Stripe is verifying your account. This usually takes a few minutes. Click \"Check Status\" to refresh."
+		};
+		case "incomplete": return {
+			variant: "error",
+			message: "Payment account setup is not yet complete. Please continue setup."
+		};
+		case "link-unavailable": return {
+			variant: "error",
+			message: "Unable to retrieve onboarding link. Please try again."
+		};
+		case "failed": return {
+			variant: "error",
+			message: outcome.action === "start" ? "Failed to start payment account setup" : outcome.action === "check" ? "Failed to check payment account status" : "Failed to retrieve onboarding link"
+		};
+	}
+}
+var StripeConnectComponent = class StripeConnectComponent {
+	constructor() {
+		this.destroyRef = inject(DestroyRef);
+		this.createAccount = input(null, ...ngDevMode ? [{ debugName: "createAccount" }] : /* istanbul ignore next */ []);
+		this.getStatus = input(null, ...ngDevMode ? [{ debugName: "getStatus" }] : /* istanbul ignore next */ []);
+		this.accountId = model(null, ...ngDevMode ? [{ debugName: "accountId" }] : /* istanbul ignore next */ []);
+		this.complete = model(false, ...ngDevMode ? [{ debugName: "complete" }] : /* istanbul ignore next */ []);
+		this.detailsSubmitted = model(false, ...ngDevMode ? [{ debugName: "detailsSubmitted" }] : /* istanbul ignore next */ []);
+		this.title = input("Stripe Connect Account", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.bare = input(false, ...ngDevMode ? [{ debugName: "bare" }] : /* istanbul ignore next */ []);
+		this.showWhenNoAccount = input(false, ...ngDevMode ? [{ debugName: "showWhenNoAccount" }] : /* istanbul ignore next */ []);
+		this.startTitle = input("Connect your Stripe account", ...ngDevMode ? [{ debugName: "startTitle" }] : /* istanbul ignore next */ []);
+		this.startText = input("Collect your customers' payments online. You finish setting up your account on Stripe, then come back here.", ...ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []);
+		this.startLabel = input("Set Up Payment Account", ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.refreshOnReturn = input(false, ...ngDevMode ? [{ debugName: "refreshOnReturn" }] : /* istanbul ignore next */ []);
+		this.dashboardUrl = input("https://dashboard.stripe.com", ...ngDevMode ? [{ debugName: "dashboardUrl" }] : /* istanbul ignore next */ []);
+		this.outcome = output();
+		this.loading = model(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+		this.navigateTab = input(null, ...ngDevMode ? [{ debugName: "navigateTab" }] : /* istanbul ignore next */ []);
+		this.visible = computed(() => !!this.accountId() || this.showWhenNoAccount(), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+		this.flow = new StripeConnectFlow({
+			createAccount: () => this.createAccount(),
+			getStatus: () => this.getStatus(),
+			state: {
+				accountId: this.accountId,
+				complete: this.complete,
+				detailsSubmitted: this.detailsSubmitted,
+				loading: this.loading
+			},
+			emit: (outcome) => this.outcome.emit(outcome),
+			disabled: () => this.disabled(),
+			navigate: (url) => this.navigateCurrentTab(url),
+			destroyRef: this.destroyRef
+		});
+		if (typeof document !== "undefined") {
+			const onVisible = () => {
+				if (document.visibilityState !== "visible" || !this.flow.tabOpened || !this.refreshOnReturn() || this.loading()) return;
+				this.flow.tabOpened = false;
+				this.flow.readStatusOnReturn();
+			};
+			document.addEventListener("visibilitychange", onVisible);
+			this.destroyRef.onDestroy(() => document.removeEventListener("visibilitychange", onVisible));
 		}
 	}
-	messageOf(e, fallback) {
-		const text = (e instanceof HttpErrorResponse ? e.error : null)?.message;
-		return typeof text === "string" && text ? text : fallback;
+	start() {
+		this.flow.start();
+	}
+	check() {
+		this.flow.check();
+	}
+	resume() {
+		this.flow.resume();
+	}
+	openDashboard() {
+		window.open(this.dashboardUrl(), "_blank", "noopener,noreferrer");
+	}
+	navigateCurrentTab(url) {
+		const navigate = this.navigateTab();
+		if (navigate) navigate(url);
+		else window.location.href = url;
 	}
 	static {
 		this.ɵfac = i0.ɵɵngDeclareFactory({
@@ -2927,72 +3100,79 @@ var StripeConnectComponent = class StripeConnectComponent {
 			isStandalone: true,
 			selector: "ui-stripe-connect",
 			inputs: {
-				statusEndpoint: {
-					classPropertyName: "statusEndpoint",
-					publicName: "statusEndpoint",
+				createAccount: {
+					classPropertyName: "createAccount",
+					publicName: "createAccount",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				connectEndpoint: {
-					classPropertyName: "connectEndpoint",
-					publicName: "connectEndpoint",
+				getStatus: {
+					classPropertyName: "getStatus",
+					publicName: "getStatus",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				connectParams: {
-					classPropertyName: "connectParams",
-					publicName: "connectParams",
+				accountId: {
+					classPropertyName: "accountId",
+					publicName: "accountId",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				title: {
-					classPropertyName: "title",
-					publicName: "title",
+				complete: {
+					classPropertyName: "complete",
+					publicName: "complete",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				detailsSubmitted: {
+					classPropertyName: "detailsSubmitted",
+					publicName: "detailsSubmitted",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				description: {
-					classPropertyName: "description",
-					publicName: "description",
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				connectedText: {
-					classPropertyName: "connectedText",
-					publicName: "connectedText",
+				bare: {
+					classPropertyName: "bare",
+					publicName: "bare",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				connectLabel: {
-					classPropertyName: "connectLabel",
-					publicName: "connectLabel",
+				showWhenNoAccount: {
+					classPropertyName: "showWhenNoAccount",
+					publicName: "showWhenNoAccount",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				reconnectLabel: {
-					classPropertyName: "reconnectLabel",
-					publicName: "reconnectLabel",
+				startTitle: {
+					classPropertyName: "startTitle",
+					publicName: "startTitle",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				loadFailedText: {
-					classPropertyName: "loadFailedText",
-					publicName: "loadFailedText",
+				startText: {
+					classPropertyName: "startText",
+					publicName: "startText",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				},
-				connectFailedText: {
-					classPropertyName: "connectFailedText",
-					publicName: "connectFailedText",
+				startLabel: {
+					classPropertyName: "startLabel",
+					publicName: "startLabel",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
@@ -3003,60 +3183,103 @@ var StripeConnectComponent = class StripeConnectComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				refreshOnReturn: {
+					classPropertyName: "refreshOnReturn",
+					publicName: "refreshOnReturn",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dashboardUrl: {
+					classPropertyName: "dashboardUrl",
+					publicName: "dashboardUrl",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loading: {
+					classPropertyName: "loading",
+					publicName: "loading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				navigateTab: {
+					classPropertyName: "navigateTab",
+					publicName: "navigateTab",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
-			outputs: { statusChange: "statusChange" },
+			outputs: {
+				accountId: "accountIdChange",
+				complete: "completeChange",
+				detailsSubmitted: "detailsSubmittedChange",
+				outcome: "outcome",
+				loading: "loadingChange"
+			},
 			ngImport: i0,
 			template: `
-    <div class="sc" data-testid="stripe-connect" [attr.aria-busy]="busy() ? 'true' : null">
-      <ui-option-card [title]="title()" letter="S" color="#635bff" [description]="connected() ? connectedText() : description()"
-        [actionLabel]="statusKnown() ? (connected() ? reconnectLabel() : connectLabel()) : ''" [actionVariant]="connected() ? 'secondary' : 'primary'"
-        [actionAriaLabel]="(connected() ? reconnectLabel() : connectLabel()) + ' ' + title()" actionTestId="stripe-connect-action"
-        [actionLoading]="connecting()" [disabled]="disabled() || connecting()" (action)="connect()" />
-      @if (error(); as message) {
-        <ui-alert class="sc-error" variant="danger" data-testid="stripe-connect-error">{{ message }}</ui-alert>
-        @if (!statusKnown()) {
-          <ui-button class="sc-retry" variant="secondary" size="sm" data-testid="stripe-connect-retry" (click)="refresh()">Try again</ui-button>
-        }
+    @if (visible()) {
+      @if (bare()) {
+        <ng-container *ngTemplateOutlet="body" />
+      } @else {
+        <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
+          <ng-container *ngTemplateOutlet="body" />
+        </ui-detail-card>
       }
-    </div>
+    }
+
+    <ng-template #body>
+      @if (!accountId()) {
+        <ui-stack gap="sm" data-testid="connect-status-none">
+          <strong class="sc-title">{{ startTitle() }}</strong>
+          <ui-text size="sm" [text]="startText()" />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="loading() || disabled()" (click)="start()">{{ loading() ? 'Loading...' : startLabel() }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else if (complete()) {
+        <ui-stack gap="sm" data-testid="connect-status-complete">
+          <strong class="sc-title">Account setup complete</strong>
+          <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
+          <ui-stack direction="horizontal">
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else if (detailsSubmitted()) {
+        <ui-stack gap="sm" data-testid="connect-status-verifying">
+          <strong class="sc-title">Stripe is verifying your account</strong>
+          <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="loading() || disabled()" (click)="check()">{{ loading() ? 'Checking...' : 'Check Status' }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else {
+        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+          <strong class="sc-title">Account setup incomplete</strong>
+          <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="loading() || disabled()" (click)="resume()">{{ loading() ? 'Loading...' : 'Complete Setup' }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      }
+    </ng-template>
   `,
 			isInline: true,
-			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-error{display:block;margin-top:12px}ui-stripe-connect .sc-retry{display:inline-block;margin-top:12px}\n"],
+			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}\n"],
 			dependencies: [
 				{
-					kind: "component",
-					type: OptionCardComponent,
-					selector: "ui-option-card",
-					inputs: [
-						"title",
-						"description",
-						"letter",
-						"icon",
-						"color",
-						"actionLabel",
-						"actionVariant",
-						"actionAriaLabel",
-						"actionTestId",
-						"actionLoading",
-						"disabled"
-					],
-					outputs: ["action"]
-				},
-				{
-					kind: "component",
-					type: AlertComponent,
-					selector: "ui-alert",
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
 					inputs: [
-						"variant",
-						"title",
-						"dismissible",
-						"dismissAriaLabel",
-						"quiet",
-						"compact",
-						"inline"
-					],
-					outputs: ["dismissed"]
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
 				},
 				{
 					kind: "component",
@@ -3087,6 +3310,72 @@ var StripeConnectComponent = class StripeConnectComponent {
 						"modal-footer-left",
 						"modal-footer-right"
 					]
+				},
+				{
+					kind: "component",
+					type: DetailCardComponent,
+					selector: "ui-detail-card",
+					inputs: [
+						"title",
+						"uppercaseTitle",
+						"headingLevel",
+						"titleId",
+						"ariaLabel",
+						"subtitle",
+						"background",
+						"headerBackground",
+						"footerBackground",
+						"textColor",
+						"showHeader",
+						"collapsible",
+						"expanded",
+						"showEdit",
+						"editLabel",
+						"editTestId",
+						"editIcon",
+						"editAriaLabel",
+						"fill",
+						"maxBodyHeight",
+						"selectable",
+						"selected",
+						"selectedColor",
+						"selectedBackground"
+					],
+					outputs: [
+						"expandedChange",
+						"editClick",
+						"selectedChange"
+					]
+				},
+				{
+					kind: "component",
+					type: StackComponent,
+					selector: "ui-stack",
+					inputs: [
+						"gap",
+						"direction",
+						"align",
+						"justify",
+						"wrap",
+						"minHeight",
+						"width",
+						"maxWidth",
+						"padding",
+						"centered"
+					]
+				},
+				{
+					kind: "component",
+					type: TextComponent,
+					selector: "ui-text",
+					inputs: [
+						"text",
+						"size",
+						"tone",
+						"color",
+						"strong",
+						"weight"
+					]
 				}
 			],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -3106,107 +3395,159 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			imports: [
-				OptionCardComponent,
-				AlertComponent,
-				ButtonComponent
+				NgTemplateOutlet,
+				ButtonComponent,
+				DetailCardComponent,
+				StackComponent,
+				TextComponent
 			],
 			template: `
-    <div class="sc" data-testid="stripe-connect" [attr.aria-busy]="busy() ? 'true' : null">
-      <ui-option-card [title]="title()" letter="S" color="#635bff" [description]="connected() ? connectedText() : description()"
-        [actionLabel]="statusKnown() ? (connected() ? reconnectLabel() : connectLabel()) : ''" [actionVariant]="connected() ? 'secondary' : 'primary'"
-        [actionAriaLabel]="(connected() ? reconnectLabel() : connectLabel()) + ' ' + title()" actionTestId="stripe-connect-action"
-        [actionLoading]="connecting()" [disabled]="disabled() || connecting()" (action)="connect()" />
-      @if (error(); as message) {
-        <ui-alert class="sc-error" variant="danger" data-testid="stripe-connect-error">{{ message }}</ui-alert>
-        @if (!statusKnown()) {
-          <ui-button class="sc-retry" variant="secondary" size="sm" data-testid="stripe-connect-retry" (click)="refresh()">Try again</ui-button>
-        }
+    @if (visible()) {
+      @if (bare()) {
+        <ng-container *ngTemplateOutlet="body" />
+      } @else {
+        <ui-detail-card [collapsible]="false" [title]="title()" [headingLevel]="3" data-testid="connect-account-card">
+          <ng-container *ngTemplateOutlet="body" />
+        </ui-detail-card>
       }
-    </div>
+    }
+
+    <ng-template #body>
+      @if (!accountId()) {
+        <ui-stack gap="sm" data-testid="connect-status-none">
+          <strong class="sc-title">{{ startTitle() }}</strong>
+          <ui-text size="sm" [text]="startText()" />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-start-button" [disabled]="loading() || disabled()" (click)="start()">{{ loading() ? 'Loading...' : startLabel() }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else if (complete()) {
+        <ui-stack gap="sm" data-testid="connect-status-complete">
+          <strong class="sc-title">Account setup complete</strong>
+          <ui-text size="sm" tone="muted" [text]="'Account ID: ' + accountId()" />
+          <ui-stack direction="horizontal">
+            <ui-button variant="secondary" size="sm" data-testid="connect-dashboard-button" (click)="openDashboard()">View Stripe Dashboard</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else if (detailsSubmitted()) {
+        <ui-stack gap="sm" data-testid="connect-status-verifying">
+          <strong class="sc-title">Stripe is verifying your account</strong>
+          <ui-text size="sm" text="Your setup has been submitted. Stripe is reviewing your information — this usually takes a few minutes. Payment collection will be enabled automatically once approved." />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-check-status-button" [disabled]="loading() || disabled()" (click)="check()">{{ loading() ? 'Checking...' : 'Check Status' }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      } @else {
+        <ui-stack gap="sm" data-testid="connect-status-incomplete">
+          <strong class="sc-title">Account setup incomplete</strong>
+          <ui-text size="sm" text="Complete your Stripe account setup to start collecting payments from customers." />
+          <ui-stack direction="horizontal">
+            <ui-button variant="primary" size="sm" data-testid="connect-complete-setup-button" [disabled]="loading() || disabled()" (click)="resume()">{{ loading() ? 'Loading...' : 'Complete Setup' }}</ui-button>
+          </ui-stack>
+        </ui-stack>
+      }
+    </ng-template>
   `,
 			encapsulation: ViewEncapsulation.None,
-			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-error{display:block;margin-top:12px}ui-stripe-connect .sc-retry{display:inline-block;margin-top:12px}\n"]
+			styles: ["ui-stripe-connect{display:block;min-width:0}ui-stripe-connect .sc-title{font-size:.9375rem;font-weight:600;color:#1e293b}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
 	propDecorators: {
-		statusEndpoint: [{
+		createAccount: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "statusEndpoint",
+				alias: "createAccount",
 				required: false
 			}]
 		}],
-		connectEndpoint: [{
+		getStatus: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "connectEndpoint",
+				alias: "getStatus",
 				required: false
 			}]
 		}],
-		connectParams: [{
+		accountId: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "connectParams",
+				alias: "accountId",
 				required: false
 			}]
+		}, {
+			type: i0.Output,
+			args: ["accountIdChange"]
 		}],
-		title: [{
+		complete: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "title",
+				alias: "complete",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["completeChange"]
+		}],
+		detailsSubmitted: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "detailsSubmitted",
 				required: false
 			}]
+		}, {
+			type: i0.Output,
+			args: ["detailsSubmittedChange"]
 		}],
-		description: [{
+		title: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "description",
+				alias: "title",
 				required: false
 			}]
 		}],
-		connectedText: [{
+		bare: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "connectedText",
+				alias: "bare",
 				required: false
 			}]
 		}],
-		connectLabel: [{
+		showWhenNoAccount: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "connectLabel",
+				alias: "showWhenNoAccount",
 				required: false
 			}]
 		}],
-		reconnectLabel: [{
+		startTitle: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "reconnectLabel",
+				alias: "startTitle",
 				required: false
 			}]
 		}],
-		loadFailedText: [{
+		startText: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "loadFailedText",
+				alias: "startText",
 				required: false
 			}]
 		}],
-		connectFailedText: [{
+		startLabel: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "connectFailedText",
+				alias: "startLabel",
 				required: false
 			}]
 		}],
@@ -3218,12 +3559,47 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		statusChange: [{
+		refreshOnReturn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "refreshOnReturn",
+				required: false
+			}]
+		}],
+		dashboardUrl: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dashboardUrl",
+				required: false
+			}]
+		}],
+		outcome: [{
 			type: i0.Output,
-			args: ["statusChange"]
+			args: ["outcome"]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["loadingChange"]
+		}],
+		navigateTab: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navigateTab",
+				required: false
+			}]
 		}]
 	}
 });
-export { MICRODEPOSIT_COPY, MicrodepositVerifyComponent, STRIPE_A11Y_MESSAGES, STRIPE_ACH_NOTICE, STRIPE_DEFAULT_ERROR_MESSAGE, STRIPE_ERROR_MESSAGES, STRIPE_LOADER, STRIPE_PAYMENT_DEFAULTS, STRIPE_TECHNICAL_ERROR_MESSAGES, StripeConnectComponent, StripePaymentComponent, StripePaymentService, buildLoadOptions, defaultStripeLoader, depositAmountError, descriptorCodeError, getStripeErrorMessage, isDarkPage, microdepositArrivalText, microdepositCancelMessage, microdepositKeepsActiveText, microdepositProcessingText, microdepositStepsText, normalizeDescriptorCode, normalizeIntent, outcomeOf, paymentMethodIdOf, provideStripePayment, readStripeAppearance, readStripeReturnParams, retrieveIntent, verificationOf, verifyMicrodeposits };
+export { MICRODEPOSIT_COPY, MicrodepositVerifyComponent, STRIPE_A11Y_MESSAGES, STRIPE_ACH_NOTICE, STRIPE_DEFAULT_ERROR_MESSAGE, STRIPE_ERROR_MESSAGES, STRIPE_LOADER, STRIPE_PAYMENT_DEFAULTS, STRIPE_TECHNICAL_ERROR_MESSAGES, StripeConnectComponent, StripeConnectFlow, StripePaymentComponent, StripePaymentService, buildLoadOptions, defaultStripeLoader, depositAmountError, descriptorCodeError, getStripeErrorMessage, isDarkPage, isStripeUrl, microdepositArrivalText, microdepositCancelMessage, microdepositKeepsActiveText, microdepositProcessingText, microdepositStepsText, normalizeDescriptorCode, normalizeIntent, outcomeOf, paymentMethodIdOf, provideStripePayment, readStripeAppearance, readStripeReturnParams, retrieveIntent, stripeConnectNotice, verificationOf, verifyMicrodeposits };
 
 //# sourceMappingURL=forgeroute-ui-stripe.mjs.map