@funnelsgrove/payments 0.1.15 → 0.1.17

package/dist/components/ManageSubscriptionScreen.d.ts

@@ -0,0 +1,27 @@
+import { type ManageSubscriptionContent, type ManageSubscriptionsResponse } from '@funnelsgrove/runtime';
+import type { BillingFallbackPlanConfig, BillingPlanCatalog } from '../config/billing.config.js';
+export type { ManageSubscriptionContent } from '@funnelsgrove/runtime';
+export type ManageSubscriptionScreenProps = {
+    stepId: string;
+    content: ManageSubscriptionContent;
+    homeStepId?: string;
+    nodeId?: string;
+    plans?: BillingPlanCatalog | readonly BillingFallbackPlanConfig[];
+};
+type SubscriptionState = ManageSubscriptionsResponse;
+type RuntimeSubscription = SubscriptionState['subscriptions'][number];
+type ManageSubscription = RuntimeSubscription & {
+    providerPlanId?: string | null;
+    currentPeriodStart?: string | null;
+    createdAt?: string | null;
+    amountCents?: number | null;
+    currency?: string | null;
+    billingInterval?: string | null;
+    billingIntervalCount?: number | null;
+};
+export declare function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }: ManageSubscriptionScreenProps): import("react/jsx-runtime").JSX.Element;
+export declare const __manageSubscriptionScreenTestables: {
+    resolveBillingDateLabel: (subscription: Pick<ManageSubscription, "cancelAtPeriodEnd" | "currentPeriodEnd" | "status">, options?: {
+        past?: boolean;
+    }) => string;
+};

package/dist/components/ManageSubscriptionScreen.js

@@ -0,0 +1,449 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { apiService, buildPreviewManageSubscriptionsFallback, isPreviewFrameRuntime, runtimePublicConfig, useFunnel, } from '@funnelsgrove/runtime';
+import { getFallbackBillingPlans } from '../services/planCatalog.service.js';
+const pastSubscriptionsNote = 'Past subscriptions are already canceled or expired. Dates below are historical, not upcoming charges.';
+const isCancellableSubscription = (subscription) => {
+    const normalizedStatus = subscription.status.trim().toLowerCase();
+    return normalizedStatus !== 'canceled' && !subscription.cancelAtPeriodEnd;
+};
+const formatDate = (value) => {
+    if (!value) {
+        return 'n/a';
+    }
+    const timestamp = Date.parse(value);
+    if (!Number.isFinite(timestamp)) {
+        return 'n/a';
+    }
+    return new Intl.DateTimeFormat('en-US', {
+        month: 'numeric',
+        day: 'numeric',
+        year: 'numeric',
+    }).format(new Date(timestamp));
+};
+const formatSubscriptionNumber = (subscription) => {
+    const source = subscription.providerSubscriptionId || subscription.id;
+    const normalized = source.replace(/[^a-zA-Z0-9]/g, '');
+    return normalized.slice(-7) || source.slice(-7) || subscription.id;
+};
+const formatInterval = (interval, count) => {
+    const normalizedCount = count && Number.isFinite(count) && count > 0 ? count : 1;
+    const normalizedInterval = (interval === null || interval === void 0 ? void 0 : interval.trim()) || 'month';
+    const pluralSuffix = normalizedCount === 1 ? '' : 's';
+    return `${normalizedCount} ${normalizedInterval}${pluralSuffix}`;
+};
+const formatMoney = (amountCents, currency) => {
+    const normalizedCurrency = (currency === null || currency === void 0 ? void 0 : currency.trim().toLowerCase()) || 'usd';
+    return `${(amountCents / 100).toFixed(2)} ${normalizedCurrency}`;
+};
+const resolvePlanLine = (subscription, plans) => {
+    const plan = plans.find((item) => item.providerPlanId === subscription.providerPlanId);
+    if (plan) {
+        return `${formatMoney(plan.amountCents, 'usd')} / ${formatInterval(plan.billingInterval, 1)}`;
+    }
+    if (typeof subscription.amountCents === 'number' && subscription.amountCents > 0) {
+        return `${formatMoney(subscription.amountCents, subscription.currency)} / ${formatInterval(subscription.billingInterval, subscription.billingIntervalCount)}`;
+    }
+    return `${subscription.environment.toUpperCase()} subscription`;
+};
+const resolveCreatedDate = (subscription) => {
+    return formatDate(subscription.createdAt || subscription.currentPeriodStart);
+};
+const resolveBillingDateLabel = (subscription, options = {}) => {
+    const normalizedStatus = subscription.status.trim().toLowerCase();
+    if (subscription.cancelAtPeriodEnd) {
+        return `Active until: ${formatDate(subscription.currentPeriodEnd)}`;
+    }
+    if (options.past && normalizedStatus === 'canceled') {
+        return `Ended on: ${formatDate(subscription.currentPeriodEnd)}`;
+    }
+    if (options.past) {
+        return `Historical period ended: ${formatDate(subscription.currentPeriodEnd)}`;
+    }
+    return `Next charge: ${formatDate(subscription.currentPeriodEnd)}`;
+};
+const toManageSubscriptions = (subscriptions) => subscriptions;
+export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }) {
+    var _a, _b;
+    const { attributes, completeStep, goToStep, setAnswer, setUser, user } = useFunnel();
+    const supportEmail = runtimePublicConfig.supportEmail;
+    const planList = useMemo(() => getFallbackBillingPlans(plans), [plans]);
+    const [stage, setStage] = useState('subscriptions');
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedReasonId, setSelectedReasonId] = useState('');
+    const [selectedSubscriptionId, setSelectedSubscriptionId] = useState(null);
+    const [cancelledActiveUntilDate, setCancelledActiveUntilDate] = useState(null);
+    const [cancelInFlight, setCancelInFlight] = useState(false);
+    useEffect(() => {
+        let active = true;
+        const load = async () => {
+            setLoading(true);
+            setError(null);
+            if (isPreviewFrameRuntime()) {
+                const payload = buildPreviewManageSubscriptionsFallback(apiService.getOrCreateClientUserId());
+                if (active) {
+                    setData(payload);
+                    setLoading(false);
+                }
+                return;
+            }
+            try {
+                const payload = await apiService.getManageSubscriptions();
+                if (active) {
+                    setData(payload);
+                }
+            }
+            catch (nextError) {
+                if (active) {
+                    setError(nextError instanceof Error ? nextError.message : content.errorMessages.load);
+                }
+            }
+            finally {
+                if (active) {
+                    setLoading(false);
+                }
+            }
+        };
+        void load();
+        return () => {
+            active = false;
+        };
+    }, [content.errorMessages.load]);
+    const subscriptions = useMemo(() => { var _a; return toManageSubscriptions((_a = data === null || data === void 0 ? void 0 : data.subscriptions) !== null && _a !== void 0 ? _a : []); }, [data]);
+    const activeSubscriptions = useMemo(() => subscriptions.filter(isCancellableSubscription), [subscriptions]);
+    const pastSubscriptions = useMemo(() => subscriptions.filter((subscription) => !isCancellableSubscription(subscription)), [subscriptions]);
+    const selectedSubscription = (_a = activeSubscriptions.find((subscription) => subscription.id === selectedSubscriptionId)) !== null && _a !== void 0 ? _a : null;
+    const selectedReason = (_b = content.whyStage.reasons.find((reason) => reason.id === selectedReasonId)) !== null && _b !== void 0 ? _b : null;
+    const handleSubscriptionSelected = (subscription) => {
+        if (!isCancellableSubscription(subscription)) {
+            return;
+        }
+        setSelectedSubscriptionId(subscription.id);
+        setAnswer('manageSubscriptionHasActive', true);
+        setAnswer('manageSubscriptionCancelledId', subscription.id);
+        setStage('why');
+    };
+    const handleReasonSelected = (reasonId) => {
+        setSelectedReasonId(reasonId);
+        setAnswer('manageSubscriptionReason', reasonId);
+        setStage('confirm');
+    };
+    const persistCancellationAnswers = async (input) => {
+        var _a;
+        const nextAttributes = Object.assign(Object.assign({}, attributes), { manageSubscriptionHasActive: true, manageSubscriptionReason: input.reasonId, manageSubscriptionReasonLabel: input.reasonLabel, manageSubscriptionCancelled: input.cancelled, manageSubscriptionCancelledId: input.subscriptionId });
+        setAnswer('manageSubscriptionReason', input.reasonId);
+        setAnswer('manageSubscriptionCancelled', input.cancelled);
+        setAnswer('manageSubscriptionCancelledId', input.subscriptionId);
+        setUser(Object.assign(Object.assign({}, user), { attributes: nextAttributes }));
+        if (isPreviewFrameRuntime()) {
+            return;
+        }
+        await apiService.updateUser({
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            attributes: nextAttributes,
+            document: (_a = user.document) !== null && _a !== void 0 ? _a : {},
+        });
+    };
+    const handleCancelSubscription = async () => {
+        if (!selectedSubscription || !selectedReason || cancelInFlight) {
+            return;
+        }
+        setCancelInFlight(true);
+        setError(null);
+        try {
+            await persistCancellationAnswers({
+                cancelled: false,
+                reasonId: selectedReason.id,
+                reasonLabel: selectedReason.label,
+                subscriptionId: selectedSubscription.id,
+            });
+            const payload = await apiService.updateSubscription({
+                subscriptionId: selectedSubscription.id,
+                action: 'cancel',
+            });
+            setData(payload);
+            const refreshedSubscription = toManageSubscriptions(payload.subscriptions).find((subscription) => subscription.id === selectedSubscription.id);
+            setCancelledActiveUntilDate(formatDate((refreshedSubscription === null || refreshedSubscription === void 0 ? void 0 : refreshedSubscription.currentPeriodEnd) || selectedSubscription.currentPeriodEnd));
+            const finalAnswers = {
+                manageSubscriptionHasActive: true,
+                manageSubscriptionReason: selectedReason.id,
+                manageSubscriptionReasonLabel: selectedReason.label,
+                manageSubscriptionCancelled: true,
+                manageSubscriptionCancelledId: selectedSubscription.id,
+            };
+            await persistCancellationAnswers({
+                cancelled: true,
+                reasonId: selectedReason.id,
+                reasonLabel: selectedReason.label,
+                subscriptionId: selectedSubscription.id,
+            });
+            completeStep(stepId, finalAnswers);
+            setStage('done');
+        }
+        catch (nextError) {
+            setError(nextError instanceof Error ? nextError.message : content.errorMessages.cancel);
+        }
+        finally {
+            setCancelInFlight(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: 'manage-subscription', "data-node-id": nodeId || stepId, children: [stage === 'subscriptions' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && activeSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Active Subscriptions', subscriptions: activeSubscriptions, plans: planList, onSelect: handleSubscriptionSelected })) : null, !loading && pastSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Past Subscriptions', subscriptions: pastSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: pastSubscriptionsNote, past: true })) : null, _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] })] })) : null, stage === 'why' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title is-reason', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reasons', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: ">" })] }) }, reason.id))) })] })) : null, stage === 'confirm' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
+                                    void handleCancelSubscription();
+                                }, children: cancelInFlight
+                                    ? content.confirmStage.cancellingLabel
+                                    : content.confirmStage.cancelLabel })] })) : null, stage === 'done' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-done-copy', children: content.doneStage.cancelledMessage }), cancelledActiveUntilDate ? (_jsxs("p", { className: 'manage-subscription-done-copy is-active-until', children: ["Active until: ", cancelledActiveUntilDate] })) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => {
+                                    if (homeStepId) {
+                                        goToStep(homeStepId);
+                                        return;
+                                    }
+                                    setStage('subscriptions');
+                                }, children: content.doneStage.returnHomeLabel })] })) : null] }), _jsx("style", { children: manageSubscriptionStyles })] }));
+}
+function SubscriptionSection({ title, subscriptions, plans, onSelect, description, past = false, }) {
+    return (_jsxs("section", { className: 'manage-subscription-section', "aria-label": title, children: [_jsx("h2", { children: title }), description ? _jsx("p", { className: 'manage-subscription-section-note', children: description }) : null, _jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: past ? 'manage-subscription-row is-past' : 'manage-subscription-row', disabled: past, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-title', children: ["Subscription #", formatSubscriptionNumber(subscription)] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { children: resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
+}
+const manageSubscriptionStyles = `
+.manage-subscription {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--color-primary, #4db53f) 8%, var(--color-surface, #fff) 92%);
+  color: var(--color-text, #262729);
+  font-family: var(--font-family-base, Inter, sans-serif);
+}
+
+.manage-subscription-inner {
+  box-sizing: border-box;
+  min-height: 100%;
+  padding: 22px 12px 32px;
+}
+
+.manage-subscription-inner.is-short {
+  padding-top: 22px;
+}
+
+.manage-subscription-title {
+  margin: 0;
+  color: var(--color-text, #262729);
+  font-size: 20px;
+  line-height: 1.3;
+  font-weight: 800;
+  text-align: center;
+}
+
+.manage-subscription-title.is-reason {
+  max-width: 620px;
+  margin-inline: auto;
+}
+
+.manage-subscription-section {
+  margin-top: 22px;
+}
+
+.manage-subscription-section h2 {
+  margin: 0 0 10px;
+  color: var(--color-text, #262729);
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-align: center;
+}
+
+.manage-subscription-section-note {
+  margin: 0 0 12px;
+  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
+  font-size: 13px;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.manage-subscription-list {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+  list-style: none;
+}
+
+.manage-subscription-row {
+  width: 100%;
+  min-height: 118px;
+  border: 0;
+  border-left: 4px solid var(--color-primary, #4db53f);
+  border-radius: 6px;
+  background: var(--color-surface, #fff);
+  color: var(--color-text, #262729);
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: start;
+  gap: 7px;
+  padding: 10px 12px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.manage-subscription-row.is-past {
+  border-left-color: color-mix(in srgb, var(--color-text, #262729) 25%, var(--color-surface, #fff) 75%);
+  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
+  cursor: default;
+  opacity: 0.82;
+}
+
+.manage-subscription-radio {
+  width: 14px;
+  height: 14px;
+  border: 2px solid color-mix(in srgb, var(--color-text, #262729) 45%, var(--color-surface, #fff) 55%);
+  border-radius: 999px;
+  display: block;
+}
+
+.manage-subscription-row-title {
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+}
+
+.manage-subscription-row-plan {
+  font-size: 13px;
+  line-height: 1.2;
+  font-weight: 800;
+}
+
+.manage-subscription-row-meta {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  color: color-mix(in srgb, var(--color-text, #262729) 68%, transparent);
+  font-size: 11px;
+  font-style: italic;
+  line-height: 1.3;
+}
+
+.manage-subscription-support {
+  margin: 30px 0 0;
+  color: var(--color-text, #262729);
+  font-size: 15px;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.manage-subscription-support a {
+  color: var(--color-secondary, var(--color-primary, #4db53f));
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.manage-subscription-muted,
+.manage-subscription-empty,
+.manage-subscription-error {
+  margin: 18px 0 0;
+  border-radius: 6px;
+  background: var(--color-surface, #fff);
+  padding: 12px;
+  color: color-mix(in srgb, var(--color-text, #262729) 72%, transparent);
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.manage-subscription-error {
+  color: var(--color-danger, #c74b43);
+}
+
+.manage-subscription-done-copy {
+  margin: 15px 0 0;
+  color: color-mix(in srgb, var(--color-text, #262729) 76%, transparent);
+  font-size: 13px;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.manage-subscription-done-copy.is-active-until {
+  margin-top: 8px;
+  color: var(--color-text, #262729);
+  font-weight: 800;
+}
+
+.manage-subscription-reasons {
+  margin: 18px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+  list-style: none;
+}
+
+.manage-subscription-reason {
+  width: 100%;
+  min-height: 68px;
+  border: 0;
+  border-radius: 10px;
+  background: var(--color-surface, #fff);
+  color: var(--color-text, #262729);
+  display: grid;
+  grid-template-columns: 36px 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.25;
+  font-weight: 800;
+  text-align: left;
+  cursor: pointer;
+}
+
+.manage-subscription-reason-icon {
+  font-size: 20px;
+  line-height: 1;
+}
+
+.manage-subscription-reason-arrow {
+  color: var(--color-secondary, var(--color-primary, #4db53f));
+  font-size: 28px;
+  line-height: 0.8;
+}
+
+.manage-subscription-primary {
+  margin-top: 18px;
+  width: 100%;
+  min-height: 56px;
+  border: 0;
+  border-radius: 5px;
+  background: var(--color-primary, #4db53f);
+  color: var(--color-primary-text, #fff);
+  font-size: 19px;
+  line-height: 1.2;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.manage-subscription-primary:disabled {
+  opacity: 0.58;
+  cursor: default;
+}
+
+@media (max-width: 420px) {
+  .manage-subscription-title {
+    font-size: 19px;
+  }
+
+  .manage-subscription-row-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .manage-subscription-reason {
+    grid-template-columns: 32px 1fr auto;
+    padding-inline: 14px;
+    font-size: 14px;
+  }
+}
+`;
+export const __manageSubscriptionScreenTestables = {
+    resolveBillingDateLabel,
+};

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -220,7 +220,6 @@ function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel,
             const result = await checkoutState.checkout.confirm({
                 email: syncedEmail || undefined,
                 redirect: 'if_required',
-                returnUrl,
             });
             if (result.type === 'error') {
                 const message = result.error.message || 'Payment failed.';

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.js

@@ -70,7 +70,6 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
             email: preparedCustomerEmail || (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || undefined,
             expressCheckoutConfirmEvent: event,
             redirect: 'if_required',
-            returnUrl,
         });
         if (result.type === 'error') {
             const message = result.error.message || 'Wallet checkout failed.';

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from './providers/stripe/useStripeSubscriptionCheckoutSession.js';
 export * from './providers/stripe/WalletSubscriptionCheckoutSlot.js';
 export * from './providers/stripe/ApplePaySubscriptionCheckoutSlot.js';
 export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
+export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
 export * from './components/shared/ApplePaySubscribeButton.js';

package/dist/index.js

@@ -11,6 +11,7 @@ export * from './providers/stripe/useStripeSubscriptionCheckoutSession.js';
 export * from './providers/stripe/WalletSubscriptionCheckoutSlot.js';
 export * from './providers/stripe/ApplePaySubscriptionCheckoutSlot.js';
 export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
+export { ManageSubscriptionScreen, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
 export * from './components/shared/ApplePaySubscribeButton.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",