@forgeroute/ui 0.4.38 → 0.4.40

package/fesm2022/forgeroute-ui-stripe.mjs

@@ -1,9 +1,11 @@
 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, FormRowComponent, FormSectionComponent, ModalComponent, SkeletonComponent, TextComponent, TextInputComponent } from "@forgeroute/ui";
+import { AlertComponent, BadgeComponent, ButtonComponent, FORGEROUTE_CONFIG, FormRowComponent, FormSectionComponent, ModalComponent, OptionCardComponent, SkeletonComponent, 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) => {
 	const sdk = await sdkImporter.load();
@@ -2822,6 +2824,406 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-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, StripePaymentComponent, StripePaymentService, buildLoadOptions, defaultStripeLoader, depositAmountError, descriptorCodeError, getStripeErrorMessage, isDarkPage, microdepositArrivalText, microdepositCancelMessage, microdepositKeepsActiveText, microdepositProcessingText, microdepositStepsText, normalizeDescriptorCode, normalizeIntent, outcomeOf, paymentMethodIdOf, provideStripePayment, readStripeAppearance, readStripeReturnParams, retrieveIntent, verificationOf, verifyMicrodeposits };
+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();
+				}
+			});
+		});
+	}
+	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);
+			},
+			error: (e) => {
+				this.statusKnown.set(false);
+				this.error.set(this.messageOf(e, this.loadFailedText()));
+			}
+		});
+	}
+	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);
+			},
+			error: (e) => {
+				this.connecting.set(false);
+				this.error.set(this.messageOf(e, this.connectFailedText()));
+			}
+		});
+	}
+	redirect(url) {
+		window.location.href = url;
+	}
+	isWebAddress(url) {
+		try {
+			const p = new URL(url, window.location.origin).protocol;
+			return p === "https:" || p === "http:";
+		} catch {
+			return false;
+		}
+	}
+	messageOf(e, fallback) {
+		const text = (e instanceof HttpErrorResponse ? e.error : null)?.message;
+		return typeof text === "string" && text ? text : fallback;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: StripeConnectComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: StripeConnectComponent,
+			isStandalone: true,
+			selector: "ui-stripe-connect",
+			inputs: {
+				statusEndpoint: {
+					classPropertyName: "statusEndpoint",
+					publicName: "statusEndpoint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				connectEndpoint: {
+					classPropertyName: "connectEndpoint",
+					publicName: "connectEndpoint",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				connectParams: {
+					classPropertyName: "connectParams",
+					publicName: "connectParams",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				title: {
+					classPropertyName: "title",
+					publicName: "title",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				description: {
+					classPropertyName: "description",
+					publicName: "description",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				connectedText: {
+					classPropertyName: "connectedText",
+					publicName: "connectedText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				connectLabel: {
+					classPropertyName: "connectLabel",
+					publicName: "connectLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				reconnectLabel: {
+					classPropertyName: "reconnectLabel",
+					publicName: "reconnectLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadFailedText: {
+					classPropertyName: "loadFailedText",
+					publicName: "loadFailedText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				connectFailedText: {
+					classPropertyName: "connectFailedText",
+					publicName: "connectFailedText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { statusChange: "statusChange" },
+			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>
+        }
+      }
+    </div>
+  `,
+			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"],
+			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",
+					inputs: [
+						"variant",
+						"title",
+						"dismissible",
+						"dismissAriaLabel",
+						"quiet",
+						"compact",
+						"inline"
+					],
+					outputs: ["dismissed"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"variant",
+						"routerLink",
+						"queryParams",
+						"fragment",
+						"state",
+						"href",
+						"target",
+						"rel",
+						"shortLabel",
+						"shortBelow",
+						"color",
+						"active",
+						"size",
+						"type",
+						"disabled",
+						"loading",
+						"fullWidth",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaPressed",
+						"ariaDescribedBy",
+						"modal-footer-left",
+						"modal-footer-right"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StripeConnectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-stripe-connect",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				OptionCardComponent,
+				AlertComponent,
+				ButtonComponent
+			],
+			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>
+        }
+      }
+    </div>
+  `,
+			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"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		statusEndpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "statusEndpoint",
+				required: false
+			}]
+		}],
+		connectEndpoint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "connectEndpoint",
+				required: false
+			}]
+		}],
+		connectParams: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "connectParams",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		description: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "description",
+				required: false
+			}]
+		}],
+		connectedText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "connectedText",
+				required: false
+			}]
+		}],
+		connectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "connectLabel",
+				required: false
+			}]
+		}],
+		reconnectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reconnectLabel",
+				required: false
+			}]
+		}],
+		loadFailedText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadFailedText",
+				required: false
+			}]
+		}],
+		connectFailedText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "connectFailedText",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		statusChange: [{
+			type: i0.Output,
+			args: ["statusChange"]
+		}]
+	}
+});
+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 };
 
 //# sourceMappingURL=forgeroute-ui-stripe.mjs.map