@funnelsgrove/payments 0.7.9 → 0.7.11

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.d.ts

@@ -1,6 +1,6 @@
 import type { FunnelSdkRuntimeConfigOverrides, FunnelStepType, RuntimeMode } from '@funnelsgrove/runtime';
 import { type PrepareSolidgateCheckoutInput, type SolidgateCheckoutPreparation } from '../services/solidgate.service.js';
-export type SolidgateCheckoutDialogState = 'loading' | 'ready' | 'submitting' | 'verifying' | 'success' | 'recoverable_error' | 'expired';
+export type SolidgateCheckoutDialogState = 'collecting_email' | 'loading' | 'ready' | 'submitting' | 'verifying' | 'success' | 'recoverable_error' | 'expired';
 export type SolidgateCheckoutDialogContent = {
     title: string;
     closeAriaLabel: string;
@@ -12,13 +12,20 @@ export type SolidgateCheckoutDialogContent = {
     expired: string;
     retry: string;
     resumeVerification: string;
+    customerEmailLabel: string;
+    customerEmailPlaceholder: string;
+    customerEmailInvalid: string;
+    customerEmailUnavailable: string;
+    customerEmailContinue: string;
 };
 export type SolidgateCheckoutDialogProps = {
     open: boolean;
     request: Omit<PrepareSolidgateCheckoutInput, 'signal'>;
+    customerEmail?: string | null;
     checkoutAnalytics?: SolidgateCheckoutAnalyticsContext | null;
     content?: Partial<SolidgateCheckoutDialogContent>;
     onClose: () => void;
+    onCustomerEmailCommit?: (email: string) => Promise<string>;
     onSuccess?: (checkout: SolidgateCheckoutPreparation) => void | Promise<void>;
     onRetry?: () => void;
     onError?: (message: string) => void;
@@ -34,4 +41,4 @@ export type SolidgateCheckoutAnalyticsContext = {
     stepType: Extract<FunnelStepType, 'checkout' | 'paywall_offer' | 'upsell_offer'>;
     stepContractVersion: number;
 };
-export declare function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, content, onClose, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -17,6 +17,17 @@ const defaultContent = {
     expired: 'This checkout has expired. Start a new payment to continue.',
     retry: 'Try again',
     resumeVerification: 'Check payment status',
+    customerEmailLabel: 'Email address',
+    customerEmailPlaceholder: 'you@example.com',
+    customerEmailInvalid: 'Enter a valid email address to continue.',
+    customerEmailUnavailable: 'Your email could not be saved. Please try again.',
+    customerEmailContinue: 'Continue to payment',
+};
+const normalizeValidEmail = (value) => {
+    const normalized = (value === null || value === void 0 ? void 0 : value.trim()) || '';
+    return normalized.length <= 320 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized)
+        ? normalized
+        : null;
 };
 const initialView = {
     state: 'loading',
@@ -85,9 +96,14 @@ function SolidgatePaymentForm({ checkout, hidden, loadingLabel, onError, onMount
                         instanceRef.current = instance;
                     }, onMounted: onMounted, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) })] }));
 }
-export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, content, onClose, onSuccess, onRetry, onError, onStateChange, }) {
+export function SolidgateCheckoutDialog({ open, request, customerEmail, checkoutAnalytics, content, onClose, onCustomerEmailCommit, onSuccess, onRetry, onError, onStateChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
     const [view, setView] = useState(initialView);
+    const normalizedCustomerEmail = normalizeValidEmail(customerEmail);
+    const [emailInput, setEmailInput] = useState((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
+    const [committedEmail, setCommittedEmail] = useState(normalizedCustomerEmail);
+    const [emailError, setEmailError] = useState(null);
+    const [emailSubmitting, setEmailSubmitting] = useState(false);
     const prepareAbortRef = useRef(null);
     const statusAbortRef = useRef(null);
     const successAttemptRef = useRef(null);
@@ -105,6 +121,11 @@ export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, cont
         onStateChangeRef.current = onStateChange;
         onSuccessRef.current = onSuccess;
     }, [checkoutAnalytics, copy, onError, onStateChange, onSuccess]);
+    useEffect(() => {
+        setEmailInput((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
+        setCommittedEmail(normalizedCustomerEmail);
+        setEmailError(null);
+    }, [customerEmail, normalizedCustomerEmail]);
     const { discountKeyOrProviderId, failUrl, funnelPlanKey, funnelEndUserId, funnelId, idempotencyKey, offerSetId, returnUrl, runtimeConfig, successUrl, } = request;
     const { apiBaseUrl, funnelId: runtimeFunnelId, funnelSdkPublishableKey, funnelVersionId, } = runtimeConfig || {};
     const hasRuntimeConfig = runtimeConfig !== undefined;
@@ -145,16 +166,27 @@ export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, cont
         setView(nextView);
         (_a = onStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onStateChangeRef, nextView.state);
     }, []);
+    const requiresEmailCommit = Boolean(onCustomerEmailCommit);
     useEffect(() => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         if (!open) {
             (_a = prepareAbortRef.current) === null || _a === void 0 ? void 0 : _a.abort();
             (_b = statusAbortRef.current) === null || _b === void 0 ? void 0 : _b.abort();
             return;
         }
+        if (requiresEmailCommit && !committedEmail) {
+            (_c = prepareAbortRef.current) === null || _c === void 0 ? void 0 : _c.abort();
+            (_d = statusAbortRef.current) === null || _d === void 0 ? void 0 : _d.abort();
+            queueMicrotask(() => setState({
+                state: 'collecting_email',
+                checkout: null,
+                canResumeVerification: false,
+            }));
+            return;
+        }
         const controller = new AbortController();
-        (_c = prepareAbortRef.current) === null || _c === void 0 ? void 0 : _c.abort();
-        (_d = statusAbortRef.current) === null || _d === void 0 ? void 0 : _d.abort();
+        (_e = prepareAbortRef.current) === null || _e === void 0 ? void 0 : _e.abort();
+        (_f = statusAbortRef.current) === null || _f === void 0 ? void 0 : _f.abort();
         prepareAbortRef.current = controller;
         successAttemptRef.current = null;
         paymentInfoAttemptRef.current = null;
@@ -178,7 +210,7 @@ export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, cont
             }
         });
         return () => controller.abort();
-    }, [normalizedRequest, open, setState]);
+    }, [committedEmail, normalizedRequest, open, requiresEmailCommit, setState]);
     useEffect(() => {
         var _a;
         if (!open) {
@@ -253,6 +285,30 @@ export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, cont
             }
         }
     }, [normalizedRequest, setState, view]);
+    const commitCustomerEmail = useCallback(async (event) => {
+        event.preventDefault();
+        const normalized = normalizeValidEmail(emailInput);
+        if (!normalized || !onCustomerEmailCommit) {
+            setEmailError(copy.customerEmailInvalid);
+            return;
+        }
+        setEmailSubmitting(true);
+        setEmailError(null);
+        try {
+            const committed = normalizeValidEmail(await onCustomerEmailCommit(normalized));
+            if (!committed) {
+                throw new Error('customer-email-not-committed');
+            }
+            setEmailInput(committed);
+            setCommittedEmail(committed);
+        }
+        catch (_a) {
+            setEmailError(copy.customerEmailUnavailable);
+        }
+        finally {
+            setEmailSubmitting(false);
+        }
+    }, [copy.customerEmailInvalid, copy.customerEmailUnavailable, emailInput, onCustomerEmailCommit]);
     if (!open) {
         return null;
     }
@@ -272,7 +328,10 @@ export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, cont
                         : view.state === 'recoverable_error'
                             ? copy.error
                             : null;
-    return (_jsx("div", { className: 'fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4', children: _jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'solidgate-checkout-title', "data-checkout-state": view.state, className: 'w-full max-w-lg rounded-2xl border border-border bg-card p-5 text-foreground shadow-xl', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between gap-4', children: [_jsx("h2", { id: 'solidgate-checkout-title', className: 'text-lg font-semibold text-foreground', children: copy.title }), _jsx("button", { ref: closeButtonRef, type: 'button', onClick: onClose, "aria-label": copy.closeAriaLabel, className: 'rounded-md border border-border bg-background px-3 py-1.5 text-foreground hover:bg-accent', children: "\u00D7" })] }), view.checkout ? (_jsx(SolidgatePaymentForm, { checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
+    return (_jsx("div", { className: 'fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4', children: _jsxs("div", { role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'solidgate-checkout-title', "data-checkout-state": view.state, className: 'w-full max-w-lg rounded-2xl border border-border bg-card p-5 text-foreground shadow-xl', children: [_jsxs("div", { className: 'mb-4 flex items-center justify-between gap-4', children: [_jsx("h2", { id: 'solidgate-checkout-title', className: 'text-lg font-semibold text-foreground', children: copy.title }), _jsx("button", { ref: closeButtonRef, type: 'button', onClick: onClose, "aria-label": copy.closeAriaLabel, className: 'rounded-md border border-border bg-background px-3 py-1.5 text-foreground hover:bg-accent', children: "\u00D7" })] }), view.state === 'collecting_email' ? (_jsxs("form", { className: 'grid gap-4', onSubmit: (event) => void commitCustomerEmail(event), children: [_jsxs("label", { className: 'grid gap-2 text-sm font-medium text-foreground', children: [copy.customerEmailLabel, _jsx("input", { type: 'email', autoComplete: 'email', inputMode: 'email', maxLength: 320, required: true, value: emailInput, onChange: (event) => {
+                                        setEmailInput(event.target.value);
+                                        setEmailError(null);
+                                    }, placeholder: copy.customerEmailPlaceholder, "aria-invalid": Boolean(emailError), className: 'w-full rounded-lg border border-border bg-background px-3 py-2 text-foreground placeholder:text-muted-foreground' })] }), emailError ? (_jsx("p", { role: 'alert', className: 'text-sm text-destructive', children: emailError })) : null, _jsx("button", { type: 'submit', disabled: emailSubmitting, className: 'w-full rounded-lg border border-border bg-accent px-4 py-2 font-medium text-foreground disabled:opacity-60', children: copy.customerEmailContinue })] })) : null, view.checkout ? (_jsx(SolidgatePaymentForm, { checkout: view.checkout, hidden: !showForm, loadingLabel: copy.loading, onMounted: () => {
                         if (view.state === 'loading') {
                             setState(Object.assign(Object.assign({}, view), { state: 'ready' }));
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.7.9",
+  "version": "0.7.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",