From 5a4d98e90dad75c77fd01157faf36842bec36b02 Mon Sep 17 00:00:00 2001
From: Princi Vershwal <vershwal.princi@gmail.com>
Date: Wed, 6 Dec 2023 10:01:48 +0530
Subject: [PATCH] Show Add offer button on settings screen if no offer is
 present (#19215)

Ref
[PROD-3](https://linear.app/tryghost/issue/PROD-3/settings-group-navigation-handling)
---
 .../src/components/settings/growth/Offers.tsx |  8 +++++--
 .../test/acceptance/membership/offers.test.ts | 23 +++++++++++--------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
index 10d1ebeaa0..25ac87063c 100644
--- a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
@@ -48,17 +48,21 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
 
     const latestThree = activeOffers.slice(0, 3);
 
-    const openModal = () => {
+    const openOfferListModal = () => {
         updateRoute('offers/edit');
     };
 
+    const openAddModal = () => {
+        updateRoute('offers/new');
+    };
+
     const goToOfferEdit = (offerId: string) => {
         updateRoute(`offers/edit/${offerId}`);
     };
 
     return (
         <TopLevelGroup
-            customButtons={<Button color='green' disabled={!checkStripeEnabled(settings, config)} label='Manage offers' link linkWithPadding onClick={openModal}/>}
+            customButtons={<Button color='green' disabled={!checkStripeEnabled(settings, config)} label={allOffers.length > 0 ? 'Manage offers' : 'Add offers'} link linkWithPadding onClick={allOffers.length > 0 ? openOfferListModal : openAddModal}/>}
             description={<>Create discounts & coupons to boost new subscriptions. {allOffers.length === 0 && <a className='text-green' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">Learn more</a>}</>}
             keywords={keywords}
             navid='offers'
diff --git a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
index 231b759564..888661ade3 100644
--- a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
+++ b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
@@ -14,16 +14,16 @@ test.describe('Offers Modal', () => {
         }});
         await page.goto('/');
         const section = page.getByTestId('offers');
-        await section.getByRole('button', {name: 'Manage offers'}).click();
-        const modal = page.getByTestId('offers-modal');
-        await expect(modal).toBeVisible();
+        await section.getByRole('button', {name: 'Add offers'}).click();
+        const addModal = page.getByTestId('add-offer-modal');
+        await expect(addModal).toBeVisible();
     });
 
     test('Offers Add Modal is available', async ({page}) => {
         await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
             addOffer: {method: 'POST', path: '/offers/', response: {
                 offers: [{
@@ -45,9 +45,9 @@ test.describe('Offers Modal', () => {
 
     test('Can add a new offer', async ({page}) => {
         const {lastApiRequests} = await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseOffersById: {method: 'GET', path: `/offers/${responseFixtures.offers.offers![0].id}/`, response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
             addOffer: {method: 'POST', path: `/offers/`, response: {
@@ -85,9 +85,9 @@ test.describe('Offers Modal', () => {
 
     test('Errors if required fields are missing', async ({page}) => {
         await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseOffersById: {method: 'GET', path: `/offers/${responseFixtures.offers.offers![0].id}/`, response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
             addOffer: {method: 'POST', path: `/offers/`, response: {
@@ -112,9 +112,9 @@ test.describe('Offers Modal', () => {
 
     test('Shows validation hints', async ({page}) => {
         await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseOffersById: {method: 'GET', path: `/offers/${responseFixtures.offers.offers![0].id}/`, response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
             addOffer: {method: 'POST', path: `/offers/`, response: {
@@ -144,9 +144,10 @@ test.describe('Offers Modal', () => {
 
     test('Can view active offers', async ({page}) => {
         await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
+            browseAllOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers}
         }});
 
@@ -161,9 +162,10 @@ test.describe('Offers Modal', () => {
 
     test('Can view archived offers', async ({page}) => {
         await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
+            browseAllOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers}
         }});
 
@@ -178,9 +180,10 @@ test.describe('Offers Modal', () => {
 
     test('Supports updating an offer', async ({page}) => {
         const {lastApiRequests} = await mockApi({page, requests: {
+            browseOffers: {method: 'GET', path: '/offers/', response: responseFixtures.offers},
             ...globalDataRequests,
             browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
-            browseOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
+            browseAllOffers: {method: 'GET', path: '/offers/?limit=all', response: responseFixtures.offers},
             browseOffersById: {method: 'GET', path: `/offers/${responseFixtures.offers.offers![0].id}/`, response: responseFixtures.offers},
             browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers},
             editOffer: {method: 'PUT', path: `/offers/${responseFixtures.offers.offers![0].id}/`, response: {