Hid tips and donation settings when Stripe is disabled

closes https://linear.app/tryghost/issue/PLG-178

- updated conditional to ensure we're ready for GA by showing when Stripe is enabled rather than only when the feature flag is enabled

apps/admin-x-settings/src/components/Sidebar.tsx

@@ -186,7 +186,7 @@ const Sidebar: React.FC = () => {
                     <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />
                     <NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} />
                     {hasStripeEnabled && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
-                    {hasTipsAndDonations && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-and-donations' title="Tips & donations" onClick={handleSectionClick} />}
+                    {hasTipsAndDonations && hasStripeEnabled && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-and-donations' title="Tips & donations" onClick={handleSectionClick} />}
                 </SettingNavSection>
 
                 <SettingNavSection isVisible={checkVisible(Object.values(emailSearchKeywords).flat())} title="Email newsletter">

apps/admin-x-settings/src/components/settings/growth/GrowthSettings.tsx

@@ -25,7 +25,7 @@ const GrowthSettings: React.FC = () => {
             <Recommendations keywords={searchKeywords.recommendations} />
             <EmbedSignupForm keywords={searchKeywords.embedSignupForm} />
             {hasStripeEnabled && <Offers keywords={searchKeywords.offers} />}
-            {hasTipsAndDonations && <TipsAndDonations keywords={searchKeywords.tips} />}
+            {hasTipsAndDonations && hasStripeEnabled && <TipsAndDonations keywords={searchKeywords.tips} />}
         </SearchableSection>
     );
 };

apps/admin-x-settings/test/acceptance/growth/tips-and-donations.test.ts

@@ -1,18 +1,32 @@
 import {expect, test} from '@playwright/test';
 import {globalDataRequests} from '../../utils/acceptance';
-import {mockApi, toggleLabsFlag} from '@tryghost/admin-x-framework/test/acceptance';
+import {mockApi, settingsWithStripe, toggleLabsFlag} from '@tryghost/admin-x-framework/test/acceptance';
 
 test.describe('Tips and donations', () => {
     test.beforeEach(async () => {
         toggleLabsFlag('tipsAndDonations', true);
     });
 
-    test('Shows suggested amount and shareable link', async ({page}) => {
+    test('Is not shown when Stripe is disabled', async ({page}) => {
         await mockApi({page, requests: {...globalDataRequests}});
         await page.goto('/');
 
+        await expect(page.locator('[data-setting-nav-item] #tips-and-donations')).not.toBeVisible();
+        await expect(page.getByTestId('tips-and-donations')).not.toBeVisible();
+    });
+
+    test('Shows suggested amount and shareable link when Stripe is enabled', async ({page}) => {
+        await mockApi({page, requests: {
+            ...globalDataRequests,
+            browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe}
+        }});
+        await page.goto('/');
+
         const section = page.getByTestId('tips-and-donations');
 
+        await expect(page.locator('[data-setting-nav-item] #tips-and-donations')).toBeVisible();
+        await expect(section).toBeVisible();
+
         await expect(section.getByTestId('suggested-amount')).toHaveText(/\$5/);
         await expect(section.getByTestId('donate-url')).toHaveText('http://test.com/#/portal/support');
         await expect(section.getByTestId('preview-shareable-link')).not.toBeVisible();