🐛 Updated Portal to show message when no plans are available (TryGhost#22512)

closes TryGhost#21992

Adds description when plans are not available.

Co-authored-by: Steve Larson <9larsons@gmail.com>

Author: im-adithya

apps/portal/package.json

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

apps/portal/src/components/pages/account-plan-page.js

@@ -438,6 +438,23 @@ const UpgradePlanSection = ({
     );
 };
 
+// Shown when there are no paid plans to display (e.g. a member reaches the
+// plans page via a theme button or deep link while the site has no paid tiers).
+const NoPlansAvailableMessage = () => {
+    return (
+        <section>
+            <div className='gh-portal-section'>
+                <p
+                    className='gh-portal-no-plans-available-notification'
+                    data-testid="no-plans-available-notification-text"
+                >
+                    {t('Sorry, no paid plans are available.')}
+                </p>
+            </div>
+        </section>
+    );
+};
+
 const PlansContainer = ({
     plans, selectedPlan, confirmationPlan, confirmationType, showConfirmation = false,
     pendingOffer, onPlanSelect, onPlanCheckout, onConfirm, onCancelSubscription,
@@ -446,6 +463,14 @@ const PlansContainer = ({
     const {member} = useContext(AppContext);
     // Plan upgrade flow for free, complimentary, or gift members.
     if (!isPaidMember({member}) || isComplimentaryMember({member}) || isGiftMember({member})) {
+        // No paid plans to choose from. This covers the deep-link / theme-button
+        // entry point (#/portal/account/plans), which cannot be gated in-app,
+        // where the body would otherwise render blank under the page header.
+        if (plans.length === 0) {
+            return (
+                <NoPlansAvailableMessage />
+            );
+        }
         return (
             <UpgradePlanSection
                 {...{plans, selectedPlan, onPlanSelect, onPlanCheckout}}

apps/portal/src/components/pages/signup-page.js

@@ -190,7 +190,7 @@ footer.gh-portal-signup-footer.invite-only .gh-portal-signup-message {
     margin-top: 0;
 }
 
-.gh-portal-invite-only-notification, .gh-portal-members-disabled-notification, .gh-portal-paid-members-only-notification {
+.gh-portal-invite-only-notification, .gh-portal-members-disabled-notification, .gh-portal-paid-members-only-notification, .gh-portal-no-plans-available-notification {
     margin: 8px 32px 24px;
     padding: 0;
     text-align: center;

apps/portal/test/unit/components/pages/account-plan-page.test.js

@@ -52,6 +52,25 @@ describe('Account Plan Page', () => {
         expect(continueBtn).toHaveLength(1);
     });
 
+    test('shows an informative message when no paid plans are available', () => {
+        // Reproduces the deep-link / theme-button entry point (#/portal/account/plans)
+        // on a site with members enabled but no paid plan configured. Without the
+        // empty state the body renders blank under the "Choose a plan" header.
+        const siteData = getSiteData({
+            paidMembersEnabled: false,
+            products: getProductsData({numOfProducts: 0})
+        });
+        const {getByTestId, queryByTestId} = customSetup({site: siteData});
+
+        const message = getByTestId('no-plans-available-notification-text');
+        expect(message).toBeInTheDocument();
+        expect(message).toHaveTextContent('Sorry, no paid plans are available.');
+
+        // The plan selectors should not render in the empty state.
+        expect(queryByTestId('monthly-switch')).not.toBeInTheDocument();
+        expect(queryByTestId('yearly-switch')).not.toBeInTheDocument();
+    });
+
     test('can choose plan and continue', async () => {
         const siteData = getSiteData({
             products: getProductsData({numOfProducts: 1})

ghost/i18n/locales/af/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "Aanmelding fout: Ongeldige skakel",
     "Signups from this email domain are currently restricted.": "",
     "Something went wrong, please try again later.": "",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": "",
     "Sorry, that didn’t work.": "Jammer, dit het nie gewerk nie.",
     "Spam complaints": "Spam klagtes",

ghost/i18n/locales/ar/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "خطأ في التسجيل: الرابط غير صالح",
     "Signups from this email domain are currently restricted.": "",
     "Something went wrong, please try again later.": ".حدث خطأ ما، يرجى المحاولة مرة أخرى لاحقًا",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": ".عذرًا، لا توجد توصيات متاحة حاليًا",
     "Sorry, that didn’t work.": ".عذرًا، لم ينجح ذلك",
     "Spam complaints": "شكاوى البريد المزعج",

ghost/i18n/locales/bg/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "Грешка при регистрация: Невалиден линк",
     "Signups from this email domain are currently restricted.": "Регистрациите от този домейн в момента са ограничени.",
     "Something went wrong, please try again later.": "Нещо се обърка, опитайте отново.",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": "За жалост, в момента няма налични препоръки.",
     "Sorry, that didn’t work.": "Жалко, така не се получава.",
     "Spam complaints": "Оплаквания от спам",

ghost/i18n/locales/bn/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "সাইন আপ ত্রুটি: অবৈধ লিঙ্ক",
     "Signups from this email domain are currently restricted.": "",
     "Something went wrong, please try again later.": "",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": "",
     "Sorry, that didn’t work.": "দুঃখিত, এটি কাজ করেনি।",
     "Spam complaints": "স্প্যাম অভিযোগ",

ghost/i18n/locales/bs/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "Greška pri prijavi: Neispravan link",
     "Signups from this email domain are currently restricted.": "",
     "Something went wrong, please try again later.": "",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": "",
     "Sorry, that didn’t work.": "Žao nam je, to nije uspjelo.",
     "Spam complaints": "Pritužbe na spam",

ghost/i18n/locales/ca/portal.json

@@ -204,6 +204,7 @@
     "Signup error: Invalid link": "Error de registre: Enllaç no vàlid",
     "Signups from this email domain are currently restricted.": "",
     "Something went wrong, please try again later.": "Quelcom no ha funcionat. Si-us-plau, torna-ho a intentar més tard.",
+    "Sorry, no paid plans are available.": "",
     "Sorry, no recommendations are available right now.": "Ho sentim, no hi ha cap recomanació ara mateix.",
     "Sorry, that didn’t work.": "Em sap greu, però no ha funcionat.",
     "Spam complaints": "Queixes de correu brossa",