Added multiple-active-subscriptions members warning and filter

apps/posts/src/views/members/components/members-actions.tsx

@@ -2,7 +2,7 @@ import React, {useCallback, useState} from 'react';
 import {AddLabelModal, DeleteModal, ImportMembersModal, RemoveLabelModal, UnsubscribeModal} from './bulk-action-modals';
 import {Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger} from '@tryghost/shade/components';
 import {type ImportResponse} from './bulk-action-modals/import-members/state';
-import {LucideIcon} from '@tryghost/shade/utils';
+import {LucideIcon, formatNumber} from '@tryghost/shade/utils';
 import {blobDownloadFromEndpoint} from '@tryghost/admin-x-framework/helpers';
 import {buildMemberOperationParams} from '../member-query-params';
 import {buildMembersUrl} from '../member-route';
@@ -229,25 +229,25 @@ const MembersActions: React.FC<MembersActionsProps> = ({
                             <DropdownMenuItem onClick={handleExport}>
                                 <LucideIcon.Download className="mr-2 size-4" />
                                 {hasFilterOrSearch
-                                    ? `Export ${memberCount.toLocaleString()} members`
+                                    ? `Export ${formatNumber(memberCount)} members`
                                     : 'Export all members'}
                             </DropdownMenuItem>
 
                             <DropdownMenuSeparator />
                             <DropdownMenuItem onClick={() => setShowAddLabelModal(true)}>
                                 <LucideIcon.Tags className="mr-2 size-4" />
-                                    Add label to {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+                                    Add label to {formatNumber(memberCount)} {memberCount === 1 ? 'member' : 'members'}
                             </DropdownMenuItem>
                             <DropdownMenuItem onClick={() => setShowRemoveLabelModal(true)}>
                                 <LucideIcon.Tag className="mr-2 size-4" />
-                                    Remove label from {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+                                    Remove label from {formatNumber(memberCount)} {memberCount === 1 ? 'member' : 'members'}
                             </DropdownMenuItem>
                             <DropdownMenuItem
                                 disabled={isLoadingNewsletters}
                                 onClick={() => setShowUnsubscribeModal(true)}
                             >
                                 <LucideIcon.MailX className="mr-2 size-4" />
-                                    Unsubscribe {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+                                    Unsubscribe {formatNumber(memberCount)} {memberCount === 1 ? 'member' : 'members'}
                             </DropdownMenuItem>
                             <DropdownMenuSeparator />
                             <DropdownMenuItem
@@ -256,7 +256,7 @@ const MembersActions: React.FC<MembersActionsProps> = ({
                                 onClick={() => setShowDeleteModal(true)}
                             >
                                 <LucideIcon.Trash2 className="mr-2 size-4" />
-                                    Delete {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
+                                    Delete {formatNumber(memberCount)} {memberCount === 1 ? 'member' : 'members'}
                             </DropdownMenuItem>
                         </>
                     )}

apps/posts/src/views/members/components/multiple-active-subscriptions-banner.tsx

@@ -0,0 +1,49 @@
+import {Banner} from '@tryghost/shade/components';
+import {formatNumber} from '@tryghost/shade/utils';
+import {useMultipleActiveSubscriptionsBanner} from '../hooks/use-multiple-active-subscriptions-banner';
+
+interface MultipleActiveSubscriptionsBannerProps {
+    nql?: string;
+    search: string;
+}
+
+const MultipleActiveSubscriptionsBanner = ({
+    nql,
+    search
+}: MultipleActiveSubscriptionsBannerProps) => {
+    const banner = useMultipleActiveSubscriptionsBanner({
+        nql,
+        search
+    });
+
+    if (!banner.shouldShow) {
+        return null;
+    }
+
+    return (
+        <Banner
+            role="status"
+            variant="warning"
+            {...(banner.canDismiss ? {
+                dismissible: true as const,
+                onDismiss: banner.handleDismiss
+            } : {
+                dismissible: false as const
+            })}
+        >
+            <div className="flex flex-col items-baseline gap-3 pr-8 sm:flex-row">
+                We found {formatNumber(banner.count)} {banner.count === 1 ? 'member' : 'members'} with more than one active paid subscription.{' '}
+                <div className="flex items-baseline gap-3">
+                    {banner.canDismiss && (
+                        <button className="nowrap font-semibold !underline" type="button" onClick={banner.handleViewMembers}>
+                            View members
+                        </button>
+                    )}
+                    <a className="nowrap font-semibold underline" href="https://ghost.org/help/duplicate-subscription-warning/" rel="noopener noreferrer" target="_blank">Learn more</a>
+                </div>
+            </div>
+        </Banner>
+    );
+};
+
+export default MultipleActiveSubscriptionsBanner;

apps/posts/src/views/members/hooks/use-members-filter-state.test.tsx

@@ -57,6 +57,57 @@ describe('useMembersFilterState', () => {
         expect(result.current.hasFilterOrSearch).toBe(false);
     });
 
+    it('parses the multiple active Stripe customers filter into a predicate', async () => {
+        const {result} = renderHook(() => {
+            const state = useMembersFilterState('UTC');
+            const [searchParams] = useSearchParams();
+
+            return {
+                ...state,
+                query: searchParams.toString()
+            };
+        }, {
+            wrapper: createWrapper('/?filter=count.active_stripe_customers%3A%3E1')
+        });
+
+        await waitFor(() => {
+            expect(result.current.nql).toBe('count.active_stripe_customers:>1');
+        });
+
+        expect(result.current.filters).toEqual([
+            {
+                id: 'count.active_stripe_customers:1',
+                field: 'count.active_stripe_customers',
+                operator: 'is-greater',
+                values: [1]
+            }
+        ]);
+        expect(result.current.query).toBe('filter=count.active_stripe_customers%3A%3E1');
+        expect(result.current.hasFilterOrSearch).toBe(true);
+    });
+
+    it('drops unsupported multiple active Stripe customers filter values', async () => {
+        const {result} = renderHook(() => {
+            const state = useMembersFilterState('UTC');
+            const [searchParams] = useSearchParams();
+
+            return {
+                ...state,
+                query: searchParams.toString()
+            };
+        }, {
+            wrapper: createWrapper('/?filter=count.active_stripe_customers%3A%3E2')
+        });
+
+        await waitFor(() => {
+            expect(result.current.query).toBe('');
+        });
+
+        expect(result.current.filters).toEqual([]);
+        expect(result.current.nql).toBeUndefined();
+        expect(result.current.hasFilterOrSearch).toBe(false);
+    });
+
     it('retains supported filters and rewrites mixed URLs canonically', async () => {
         const {result} = renderHook(() => {
             const state = useMembersFilterState('UTC');

apps/posts/src/views/members/hooks/use-members-filter-state.ts

@@ -43,10 +43,13 @@ export function shouldDelayMembersDateFilterHydration(
     return Boolean(filterParam) && isLoadingDependencies && !hasResolvedDependencies && hasTimezoneSensitiveMemberFilter(filterParam);
 }
 
+function getEnabledFilters(filters: Filter[], fields: MemberFields): Filter[] {
+    return filters.filter(predicate => isPredicateEnabled(predicate, fields));
+}
+
 function toSearchParams({baseSearchParams, filters, search, timezone, fields}: ToSearchParamsOptions): URLSearchParams {
     const params = new URLSearchParams(baseSearchParams);
-    const enabled = filters.filter(predicate => isPredicateEnabled(predicate, fields));
-    const filter = serializeMemberFilters(enabled, timezone);
+    const filter = serializeMemberFilters(getEnabledFilters(filters, fields), timezone);
 
     params.delete('filter');
     params.delete('search');
@@ -70,7 +73,7 @@ export function useMembersFilterState(timezone: string): UseMembersFilterStateRe
     const currentQuery = useMemo(() => searchParams.toString(), [searchParams]);
 
     const parsedFilters = useMemo(() => {
-        return parseMemberFilter(filterParam, timezone).filter(predicate => isPredicateEnabled(predicate, fields));
+        return getEnabledFilters(parseMemberFilter(filterParam, timezone), fields);
     }, [filterParam, timezone, fields]);
     const [filters, setDraftFilters] = useState<Filter[]>(parsedFilters);
 
@@ -79,8 +82,7 @@ export function useMembersFilterState(timezone: string): UseMembersFilterStateRe
     }, [searchParams]);
 
     const nql = useMemo(() => {
-        const enabled = filters.filter(predicate => isPredicateEnabled(predicate, fields));
-        return serializeMemberFilters(enabled, timezone);
+        return serializeMemberFilters(getEnabledFilters(filters, fields), timezone);
     }, [filters, timezone, fields]);
 
     useEffect(() => {

apps/posts/src/views/members/hooks/use-multiple-active-subscriptions-banner.ts

@@ -0,0 +1,148 @@
+import {
+    MULTIPLE_ACTIVE_STRIPE_CUSTOMERS_FILTER,
+    buildUserWithDismissedMultipleActiveSubscriptionsBanner,
+    getMultipleActiveSubscriptionsBannerPreference,
+    isMultipleActiveSubscriptionsFilter
+} from '../multiple-active-subscriptions';
+import {buildMembersUrl} from '../member-route';
+import {canManageMembers, useEditUser} from '@tryghost/admin-x-framework/api/users';
+import {toast} from 'sonner';
+import {useBrowseMembers} from '@tryghost/admin-x-framework/api/members';
+import {useCallback, useEffect, useMemo, useState} from 'react';
+import {useCurrentUser} from '@tryghost/admin-x-framework/api/current-user';
+import {useNavigate} from 'react-router';
+
+interface UseMultipleActiveSubscriptionsBannerOptions {
+    nql?: string;
+    search: string;
+}
+
+/**
+ * Drives the banner warning that some members have active subscriptions across
+ * multiple Stripe customers. Dismissal is stored per-user as the member count
+ * at dismissal time, so the banner stays hidden until the count grows beyond
+ * what the user last acknowledged.
+ */
+export function useMultipleActiveSubscriptionsBanner({
+    nql,
+    search
+}: UseMultipleActiveSubscriptionsBannerOptions) {
+    const navigate = useNavigate();
+    const {data: currentUser} = useCurrentUser();
+    const {mutateAsync: editUser, isLoading: isDismissing} = useEditUser();
+    const [optimisticDismissedCount, setOptimisticDismissedCount] = useState<number | null>(null);
+
+    const canManageMemberList = currentUser ? canManageMembers(currentUser) : false;
+    const isViewingFilter = isMultipleActiveSubscriptionsFilter(nql);
+    // Only relevant on the unfiltered member list or when viewing the
+    // affected members themselves — any other filter/search hides the banner.
+    const shouldConsiderBanner = !search && (!nql || isViewingFilter);
+
+    // Count-only query: we just need pagination.total, not the members.
+    const {
+        data
+    } = useBrowseMembers({
+        searchParams: {
+            filter: MULTIPLE_ACTIVE_STRIPE_CUSTOMERS_FILTER,
+            limit: '1',
+            fields: 'id',
+            order: 'id'
+        },
+        defaultErrorHandler: false,
+        enabled: canManageMemberList && shouldConsiderBanner,
+        refetchOnMount: 'always',
+        staleTime: 0
+    });
+
+    const count = data?.meta?.pagination?.total ?? 0;
+    const preference = useMemo(() => {
+        return getMultipleActiveSubscriptionsBannerPreference(currentUser?.accessibility);
+    }, [currentUser?.accessibility]);
+    const dismissedCount = optimisticDismissedCount ?? preference.dismissedCount ?? 0;
+    // While viewing the filtered list the banner explains what's being shown,
+    // so it can't be dismissed and ignores any previous dismissal.
+    const canDismiss = !isViewingFilter;
+    const shouldShow = shouldConsiderBanner
+        && (
+            isViewingFilter
+            || count > dismissedCount
+        );
+
+    // When the member count shrinks below the stored dismissal count, lower the
+    // stored count to match — otherwise fixing some members would leave enough
+    // headroom for new occurrences to go unnoticed until the old high-water
+    // mark is passed again.
+    useEffect(() => {
+        const storedDismissedCount = preference.dismissedCount;
+
+        if (
+            !currentUser
+            || optimisticDismissedCount !== null
+            || isDismissing
+            || storedDismissedCount === undefined
+            || data === undefined
+            || count >= storedDismissedCount
+        ) {
+            return;
+        }
+
+        setOptimisticDismissedCount(count);
+
+        editUser(buildUserWithDismissedMultipleActiveSubscriptionsBanner(
+            currentUser,
+            count,
+            preference.dismissedAt ?? new Date().toISOString()
+        )).then(() => {
+            setOptimisticDismissedCount(null);
+        }).catch((error) => {
+            setOptimisticDismissedCount(null);
+            // This keeps the preference in sync opportunistically; failing to sync should not interrupt the member list.
+            // eslint-disable-next-line no-console
+            console.log('Unable to update multiple active subscriptions banner dismissed count', error);
+        });
+    }, [
+        count,
+        currentUser,
+        data,
+        editUser,
+        isDismissing,
+        optimisticDismissedCount,
+        preference.dismissedAt,
+        preference.dismissedCount
+    ]);
+
+    // Hides the banner immediately via optimistic state, then persists the
+    // current count to the user's accessibility preferences.
+    const handleDismiss = useCallback(() => {
+        if (!currentUser || isDismissing) {
+            return;
+        }
+
+        const previousDismissedCount = optimisticDismissedCount;
+
+        setOptimisticDismissedCount(count);
+
+        editUser(buildUserWithDismissedMultipleActiveSubscriptionsBanner(
+            currentUser,
+            count,
+            new Date().toISOString()
+        )).then(() => {
+            setOptimisticDismissedCount(null);
+        }).catch(() => {
+            setOptimisticDismissedCount(previousDismissedCount);
+            toast.error('Unable to dismiss notification. Please try again.');
+        });
+    }, [count, currentUser, editUser, isDismissing, optimisticDismissedCount]);
+
+    const handleViewMembers = useCallback(() => {
+        navigate(buildMembersUrl({filter: MULTIPLE_ACTIVE_STRIPE_CUSTOMERS_FILTER}));
+    }, [navigate]);
+
+    return {
+        canDismiss,
+        count,
+        handleDismiss,
+        handleViewMembers,
+        shouldShow
+    };
+}

apps/posts/src/views/members/member-fields.test.ts

@@ -41,7 +41,8 @@ describe('memberFields', () => {
             'opened_emails.post_id',
             'clicked_links.post_id',
             'newsletter_feedback',
-            'offer_redemptions'
+            'offer_redemptions',
+            'count.active_stripe_customers'
         ]);
     });