🐛 Fixed misleading "check your email" popup for already-subscribed members

closes https://linear.app/ghost/issue/BER-3724/show-correct-error-for-active-subscriber-checkout-attempts

When a logged-in paid member clicked a paid signup button, e.g. a theme
button using a `data-portal="signup/{tier}/{cadence}"` attribute, Portal
showed the magic-link confirmation page even though the server rejects
the checkout without sending any email, so members were told to check
their inbox for an email that never arrived.

The magic-link page is only correct for the anonymous flow, where the
server emails a sign-in link before rejecting the checkout. Logged-in
members now see an error notification explaining they already have an
active subscription, reusing the existing translated string from the
gift redemption flow.

Author: kevinansfield

apps/portal/CONTEXT.md

@@ -20,4 +20,4 @@ A site control that starts checkout for a membership plan, sending visitors dire
 
 An attempt to start checkout for a membership plan. Checkout attempts are protected by request limits across checkout traffic and repeated attempts against one email address.
 
-When a checkout attempt indicates that the submitted email should sign in instead, Portal continues with the sign-in email flow rather than asking the visitor to retry checkout.
+When a checkout attempt is rejected because an active paid subscription already exists: a signed-out visitor is continued into the sign-in email flow, while a signed-in member is told they already have an active subscription — no sign-in email is sent.

apps/portal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/portal",
-  "version": "2.69.2",
+  "version": "2.69.3",
   "license": "MIT",
   "repository": "https://github.com/TryGhost/Ghost",
   "author": "Ghost Foundation",

apps/portal/src/actions.js

@@ -216,6 +216,16 @@ async function signup({data, state, api}) {
         };
     } catch (e) {
         if (e.code === CANNOT_CHECKOUT_WITH_EXISTING_SUBSCRIPTION) {
+            if (state.member) {
+                return {
+                    action: 'signup:failed',
+                    popupNotification: createPopupNotification({
+                        type: 'signup:failed', autoHide: false, closeable: true, state, status: 'error',
+                        message: t('You already have an active subscription.')
+                    })
+                };
+            }
+
             return {
                 page: 'magiclink',
                 lastPage: 'signin',

apps/portal/src/app.js

@@ -285,9 +285,9 @@ export default class App extends React.Component {
                 locale: i18nLanguage
             };
 
-            this.handleSignupQuery({site, pageQuery, member});
-
-            this.setState(state);
+            this.setState(state, () => {
+                this.handleSignupQuery({site, pageQuery, member});
+            });
 
             // Listen to preview mode changes
             this.hashHandler = () => {

apps/portal/test/actions.test.ts

@@ -111,6 +111,48 @@ describe('signup action', () => {
         });
         expect(result).not.toHaveProperty('action', 'signup:failed');
     });
+
+    test('shows an error when a logged-in member checkout finds an existing subscription', async () => {
+        const checkoutError = new Error('A subscription exists for this Member.') as Error & {code: string};
+        checkoutError.code = 'CANNOT_CHECKOUT_WITH_EXISTING_SUBSCRIPTION';
+
+        const mockApi = {
+            member: {
+                checkoutPlan: vi.fn(() => Promise.reject(checkoutError))
+            }
+        };
+        const state = {
+            site: {},
+            member: {
+                name: 'Jamie Larson',
+                email: 'jamie@example.com',
+                paid: true
+            }
+        };
+
+        const result = await ActionHandler({
+            action: 'signup',
+            data: {
+                plan: 'price_123',
+                tierId: 'tier_123',
+                cadence: 'month'
+            },
+            state,
+            api: mockApi
+        });
+
+        // No sign-in email is sent for authenticated members, so the
+        // check-your-email page would be misleading.
+        expect(result).not.toHaveProperty('page', 'magiclink');
+        expect(result).toMatchObject({
+            action: 'signup:failed',
+            popupNotification: {
+                type: 'signup:failed',
+                status: 'error',
+                message: 'You already have an active subscription.'
+            }
+        });
+    });
 });
 
 describe('redeemGift action', () => {

apps/portal/test/signup-flow.test.js

@@ -1,6 +1,6 @@
 import App from '../src/app.js';
 import {fireEvent, appRender, within, waitFor} from './utils/test-utils';
-import {offer as FixtureOffer, site as FixtureSite} from './utils/test-fixtures';
+import {offer as FixtureOffer, site as FixtureSite, member as FixtureMember} from './utils/test-fixtures';
 import setupGhostApi from '../src/utils/api.js';
 
 // Simple deep clone function
@@ -85,7 +85,7 @@ const offerSetup = async ({site, member = null, offer}) => {
     };
 };
 
-const setup = async ({site, member = null}) => {
+const setup = async ({site, member = null, checkoutPlanError = null}) => {
     const ghostApi = setupGhostApi({siteUrl: 'https://example.com'});
     ghostApi.init = vi.fn(() => {
         return Promise.resolve({
@@ -113,6 +113,9 @@ const setup = async ({site, member = null}) => {
     });
 
     ghostApi.member.checkoutPlan = vi.fn(() => {
+        if (checkoutPlanError) {
+            return Promise.reject(checkoutPlanError);
+        }
         return Promise.resolve();
     });
 
@@ -579,6 +582,37 @@ describe('Signup', () => {
             });
         });
 
+        test('via direct signup link shows an error instead of the magic link page', async () => {
+            const siteData = FixtureSite.singleTier.basic;
+            const paidTier = siteData.products.find(p => p.type === 'paid');
+            window.location.hash = `#/portal/signup/${paidTier.id}/monthly`;
+
+            try {
+                const checkoutError = Object.assign(
+                    new Error('A subscription exists for this Member.'),
+                    {code: 'CANNOT_CHECKOUT_WITH_EXISTING_SUBSCRIPTION'}
+                );
+
+                const {ghostApi, ...utils} = await setup({
+                    site: siteData,
+                    member: FixtureMember.paid,
+                    checkoutPlanError: checkoutError
+                });
+
+                const popupFrame = await utils.findByTitle(/portal-popup/i);
+
+                await waitFor(() => {
+                    expect(ghostApi.member.checkoutPlan).toHaveBeenCalled();
+                });
+                await waitFor(() => {
+                    expect(within(popupFrame.contentDocument).queryByText(/You already have an active subscription\./i)).toBeInTheDocument();
+                });
+                expect(within(popupFrame.contentDocument).queryByText(/Now check your email!/i)).not.toBeInTheDocument();
+            } finally {
+                window.location.hash = '';
+            }
+        });
+
         test('to an offer via link', async () => {
             window.location.hash = `#/portal/offers/${FixtureOffer.id}`;
             const {

ghost/i18n/locales/context.json

@@ -399,7 +399,7 @@
     "X (Twitter)": "Share button in Portal share modal",
     "Yearly": "A label indicating an annual payment cadence",
     "Yesterday": "Time a comment was placed",
-    "You already have an active subscription.": "Notification shown to a member who tries to redeem a gift subscription while they already have an active paid subscription",
+    "You already have an active subscription.": "Notification shown to a member who tries to redeem a gift subscription or start a paid checkout while they already have an active paid subscription",
     "You are receiving this because you are a <strong>%%{status}%% subscriber</strong> to {site}.": "Shown at the bottom of the newsletter.  Status will be one of free/paid/trialing/complimentary - see those strings below.",
     "You can also copy & paste this URL into your browser:": "Descriptive text displayed underneath the buttons in login/signup emails, right before authentication URLs which can be copy/pasted",
     "You can unsubscribe from these notifications at {profileUrl}.": "Footer text in comments email to manage notification preferences for users",