@funnelsgrove/payments 0.1.17 → 0.1.18

package/dist/components/ManageSubscriptionScreen.d.ts

@@ -22,6 +22,8 @@ type ManageSubscription = RuntimeSubscription & {
 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?: {
+        cancelled?: boolean;
         past?: boolean;
     }) => string;
+    resolveSubscriptionStatusLabel: (subscription: ManageSubscription) => string;
 };

package/dist/components/ManageSubscriptionScreen.js

@@ -4,9 +4,13 @@ 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 cancelledSubscriptionsNote = 'These subscriptions are cancelled and remain active until the date shown below.';
+const getNormalizedStatus = (subscription) => subscription.status.trim().toLowerCase();
+const isCancelledActiveSubscription = (subscription) => {
+    return subscription.cancelAtPeriodEnd && getNormalizedStatus(subscription) !== 'canceled';
+};
 const isCancellableSubscription = (subscription) => {
-    const normalizedStatus = subscription.status.trim().toLowerCase();
-    return normalizedStatus !== 'canceled' && !subscription.cancelAtPeriodEnd;
+    return getNormalizedStatus(subscription) !== 'canceled' && !subscription.cancelAtPeriodEnd;
 };
 const formatDate = (value) => {
     if (!value) {
@@ -51,8 +55,8 @@ const resolveCreatedDate = (subscription) => {
     return formatDate(subscription.createdAt || subscription.currentPeriodStart);
 };
 const resolveBillingDateLabel = (subscription, options = {}) => {
-    const normalizedStatus = subscription.status.trim().toLowerCase();
-    if (subscription.cancelAtPeriodEnd) {
+    const normalizedStatus = getNormalizedStatus(subscription);
+    if (options.cancelled || subscription.cancelAtPeriodEnd) {
         return `Active until: ${formatDate(subscription.currentPeriodEnd)}`;
     }
     if (options.past && normalizedStatus === 'canceled') {
@@ -64,6 +68,16 @@ const resolveBillingDateLabel = (subscription, options = {}) => {
     return `Next charge: ${formatDate(subscription.currentPeriodEnd)}`;
 };
 const toManageSubscriptions = (subscriptions) => subscriptions;
+const resolveSubscriptionStatusLabel = (subscription) => {
+    if (isCancelledActiveSubscription(subscription)) {
+        return 'Cancelled';
+    }
+    const normalizedStatus = getNormalizedStatus(subscription);
+    if (!normalizedStatus) {
+        return 'Active';
+    }
+    return `${normalizedStatus.charAt(0).toUpperCase()}${normalizedStatus.slice(1)}`;
+};
 export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }) {
     var _a, _b;
     const { attributes, completeStep, goToStep, setAnswer, setUser, user } = useFunnel();
@@ -114,7 +128,8 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
     }, [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 cancelledSubscriptions = useMemo(() => subscriptions.filter(isCancelledActiveSubscription), [subscriptions]);
+    const pastSubscriptions = useMemo(() => subscriptions.filter((subscription) => !isCancellableSubscription(subscription) && !isCancelledActiveSubscription(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) => {
@@ -192,11 +207,11 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             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: () => {
+    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 && cancelledSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Cancelled Subscriptions', subscriptions: cancelledSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: cancelledSubscriptionsNote, cancelled: true })) : 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: () => {
+                                    : 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-status', children: "Cancelled" }), _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;
@@ -204,8 +219,16 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
                                     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))) })] }));
+function SubscriptionSection({ title, subscriptions, plans, onSelect, description, cancelled = false, past = false, }) {
+    const isDisabled = cancelled || past;
+    const rowClassName = cancelled
+        ? 'manage-subscription-row is-cancelled'
+        : past
+            ? 'manage-subscription-row is-past'
+            : 'manage-subscription-row';
+    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: rowClassName, disabled: isDisabled, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-heading', children: [_jsxs("span", { className: 'manage-subscription-row-title', children: ["Subscription #", formatSubscriptionNumber(subscription)] }), _jsx("span", { className: 'manage-subscription-row-status', children: resolveSubscriptionStatusLabel(subscription) })] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { className: cancelled ? 'is-active-until' : undefined, children: cancelled
+                                            ? resolveBillingDateLabel(subscription, { cancelled })
+                                            : resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
 }
 const manageSubscriptionStyles = `
 .manage-subscription {
@@ -295,6 +318,11 @@ const manageSubscriptionStyles = `
   opacity: 0.82;
 }
 
+.manage-subscription-row.is-cancelled {
+  border-left-color: var(--color-warning, #f28100);
+  cursor: default;
+}
+
 .manage-subscription-radio {
   width: 14px;
   height: 14px;
@@ -303,12 +331,31 @@ const manageSubscriptionStyles = `
   display: block;
 }
 
+.manage-subscription-row-heading {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
 .manage-subscription-row-title {
   font-size: 15px;
   line-height: 1.25;
   font-weight: 800;
 }
 
+.manage-subscription-row-status {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 3px 8px;
+  font-size: 10px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .manage-subscription-row-plan {
   font-size: 13px;
   line-height: 1.2;
@@ -326,6 +373,11 @@ const manageSubscriptionStyles = `
   line-height: 1.3;
 }
 
+.manage-subscription-row-meta .is-active-until {
+  color: var(--color-text, #262729);
+  font-weight: 800;
+}
+
 .manage-subscription-support {
   margin: 30px 0 0;
   color: var(--color-text, #262729);
@@ -371,6 +423,19 @@ const manageSubscriptionStyles = `
   font-weight: 800;
 }
 
+.manage-subscription-done-status {
+  width: fit-content;
+  margin: 14px auto 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 4px 10px;
+  font-size: 11px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .manage-subscription-reasons {
   margin: 18px 0 0;
   padding: 0;
@@ -446,4 +511,5 @@ const manageSubscriptionStyles = `
 `;
 export const __manageSubscriptionScreenTestables = {
     resolveBillingDateLabel,
+    resolveSubscriptionStatusLabel,
 };

package/package.json

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