ENG-767 Offers cannot be created if there are no active paid tiers (#19900)

This commit is contained in:
Princi Vershwal 2024-03-21 15:07:32 +05:30 committed by GitHub
parent 5477d70a0c
commit 2798a8cd09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 48 additions and 6 deletions

View File

@ -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 (
<TopLevelGroup
customButtons={<Button color='green' disabled={!checkStripeEnabled(settings, config)} label={allOffers.length > 0 ? 'Manage offers' : 'Add offer'} link linkWithPadding onClick={allOffers.length > 0 ? openOfferListModal : openAddModal}/>}
description={<>Create discounts & coupons to boost new subscriptions. {allOffers.length === 0 && <><br /><a className='text-green' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">Learn more</a></>}</>}
customButtons={<Button color='green' disabled={!checkStripeEnabled(settings, config)} label={offerButtonText} link linkWithPadding onClick={offerButtonLink}/>}
description={<>Create discounts & coupons to boost new subscriptions. {allOffers.length === 0 && <><br /><a className='text-green' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">{descriptionButtonText}</a></>}</>}
keywords={keywords}
navid='offers'
testId='offers'
@ -94,6 +113,17 @@ const Offers: React.FC<{ keywords: string[] }> = ({keywords}) => {
</div> :
null
}
{paidActiveTiers.length === 0 && allOffers.length === 0 ?
(<div>
<div className='items-center-mt-1 flex justify-between'>
<>You must have an active tier to create an offer.</>
</div>
<div className='items-center-mt-1 flex justify-between'>
<Button color='green' label='Manage tiers' link linkWithPadding onClick={openTiers} />
</div>
</div>
) : ''
}
</TopLevelGroup>
);
};

View File

@ -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 = <div className='overflow-x-auto'>
<table className='m-0 w-full'>
{(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');
}
}
}
];

View File

@ -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');