Removed Portal billing section for gift members (TryGhost#27706)

closes https://linear.app/ghost/issue/BER-3613

Hide the "Billing info & receipts" section in Portal's account home page
for gift members.

Gift members do not have a card on file or an active Stripe
subscription, so the section's "Update" button (which calls
`manageBilling`) led to a dead end. Complimentary members were already
excluded for the same reason — gift members were an oversight.

Author: sagzy

apps/portal/src/components/pages/AccountHomePage/components/paid-account-actions.js

@@ -145,14 +145,11 @@ const PaidAccountActions = () => {
         return null;
     };
 
-    const BillingSection = ({defaultCardLast4, isComplimentary}) => {
+    const BillingSection = ({defaultCardLast4}) => {
         const {action} = useContext(AppContext);
         const label = action === 'manageBilling:running' ? (
             <LoaderIcon className='gh-portal-billing-button-loader' />
         ) : t('Update');
-        if (isComplimentary) {
-            return null;
-        }
 
         return (
             <section>
@@ -173,6 +170,7 @@ const PaidAccountActions = () => {
 
     const subscription = getMemberSubscription({member});
     const isComplimentary = isComplimentaryMember({member});
+    const isGift = isGiftMember({member});
     const isPaid = isPaidMember({member});
     if (subscription || isComplimentary) {
         const {
@@ -203,7 +201,7 @@ const PaidAccountActions = () => {
                     </div>
                     <PlanUpdateButton isPaid={isPaid} />
                 </section>
-                <BillingSection isComplimentary={isComplimentary} defaultCardLast4={defaultCardLast4} />
+                {!isComplimentary && !isGift && <BillingSection defaultCardLast4={defaultCardLast4} />}
             </>
         );
     }

apps/portal/test/unit/components/pages/AccountHomePage/paid-account-actions.test.js

@@ -674,6 +674,71 @@ describe('PaidAccountActions', () => {
         });
     });
 
+    describe('Billing section', () => {
+        test('renders for a regular paid member', () => {
+            const products = getProductsData({numOfProducts: 1});
+            const site = getSiteData({products, portalProducts: products.map(p => p.id)});
+            const member = getMemberData({
+                paid: true,
+                subscriptions: [
+                    getSubscriptionData({
+                        status: 'active',
+                        amount: 500,
+                        currency: 'USD',
+                        interval: 'month'
+                    })
+                ]
+            });
+
+            const {container} = setup({site, member});
+
+            expect(container.querySelector('[data-test-button="manage-billing"]')).toBeInTheDocument();
+        });
+
+        test('does not render for a gift member', () => {
+            const products = getProductsData({numOfProducts: 1});
+            const site = getSiteData({products, portalProducts: products.map(p => p.id)});
+            const member = getMemberData({
+                paid: true,
+                status: 'gift',
+                subscriptions: [
+                    getSubscriptionData({
+                        status: 'active',
+                        amount: 0,
+                        currency: 'USD',
+                        interval: 'month',
+                        tier: {id: products[0].id, expiry_at: new Date('2099-01-01T12:00:00.000Z')}
+                    })
+                ]
+            });
+
+            const {container} = setup({site, member});
+
+            expect(container.querySelector('[data-test-button="manage-billing"]')).not.toBeInTheDocument();
+        });
+
+        test('does not render for a complimentary member', () => {
+            const products = getProductsData({numOfProducts: 1});
+            const site = getSiteData({products, portalProducts: products.map(p => p.id)});
+            const member = getMemberData({
+                paid: true,
+                status: 'comped',
+                subscriptions: [
+                    getSubscriptionData({
+                        status: 'active',
+                        amount: 0,
+                        currency: 'USD',
+                        interval: 'month'
+                    })
+                ]
+            });
+
+            const {container} = setup({site, member});
+
+            expect(container.querySelector('[data-test-button="manage-billing"]')).not.toBeInTheDocument();
+        });
+    });
+
     describe('Canceled badge', () => {
         test('displays CANCELED badge when cancel_at_period_end is true', () => {
             const products = getProductsData({numOfProducts: 1});