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 f5e6043481..9b504f7934 100644
--- a/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/Offers.tsx
@@ -57,15 +57,34 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
updateRoute('offers/new');
};
+ const openTiers = () => {
+ updateRoute('/tiers');
+ };
+
const goToOfferEdit = (offerId: string) => {
sessionStorage.setItem('editOfferPageSource', 'offers');
updateRoute(`offers/edit/${offerId}`);
};
+ let offerButtonText = 'Manage offers';
+ let offerButtonLink = openOfferListModal;
+ let descriptionButtonText = 'Learn more';
+ if (allOffers.length > 0) {
+ offerButtonText = 'Manage offers';
+ offerButtonLink = openOfferListModal;
+ } else if (paidActiveTiers.length === 0 && allOffers.length === 0) {
+ offerButtonText = '';
+ offerButtonLink = openTiers;
+ descriptionButtonText = '';
+ } else if (paidActiveTiers.length > 0 && allOffers.length === 0) {
+ offerButtonText = 'Add offers';
+ offerButtonLink = openAddModal;
+ }
+
return (
0 ? 'Manage offers' : 'Add offer'} link linkWithPadding onClick={allOffers.length > 0 ? openOfferListModal : openAddModal}/>}
- description={<>Create discounts & coupons to boost new subscriptions. {allOffers.length === 0 && <>
Learn more>}>}
+ customButtons={
);
};
diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
index 37465b6770..0b8d20cc4c 100644
--- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
+++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx
@@ -1,9 +1,9 @@
import {Button, Tab, TabView} from '@tryghost/admin-x-design-system';
-import {ButtonGroup, ButtonProps} from '@tryghost/admin-x-design-system';
+import {ButtonGroup, ButtonProps, showToast} from '@tryghost/admin-x-design-system';
import {Modal} from '@tryghost/admin-x-design-system';
import {NoValueLabel} from '@tryghost/admin-x-design-system';
import {SortMenu} from '@tryghost/admin-x-design-system';
-import {Tier, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
+import {Tier, getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers';
import {Tooltip} from '@tryghost/admin-x-design-system';
import {currencyToDecimal, getSymbol} from '../../../../utils/currency';
import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site';
@@ -140,6 +140,8 @@ export const OffersIndexModal = () => {
}
});
+ const paidActiveTiers = getPaidActiveTiers(allTiers || []);
+
const listLayoutOutput =
{(selectedTab === 'active' && activeOffers.length > 0) || (selectedTab === 'archived' && archivedOffers.length > 0) ?
@@ -198,7 +200,16 @@ export const OffersIndexModal = () => {
icon: 'add',
label: 'New offer',
color: 'green',
- onClick: () => updateRoute('offers/new')
+ onClick: () => {
+ if (paidActiveTiers.length === 0) {
+ showToast({
+ type: 'neutral',
+ message: 'You must have an active tier to create an offer.'
+ });
+ } else {
+ updateRoute('offers/new');
+ }
+ }
}
];
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 b46007cb20..00e32bb66a 100644
--- a/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
+++ b/apps/admin-x-settings/test/acceptance/membership/offers.test.ts
@@ -10,7 +10,8 @@ test.describe('Offers Modal', () => {
test('Offers Modal is available', async ({page}) => {
await mockApi({page, requests: {
...globalDataRequests,
- browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe}
+ browseSettings: {...globalDataRequests.browseSettings, response: settingsWithStripe},
+ browseTiers: {method: 'GET', path: '/tiers/', response: responseFixtures.tiers}
}});
await page.goto('/');
const section = page.getByTestId('offers');