TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Added offers modal toggle functions (#18839)

Browse Source 
refs https://github.com/TryGhost/Product/issues/4047

- Wired up Offers Modal hide / show toggling

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 42f000b</samp>

This pull request enhances the offers feature in the admin settings by
adding cancel buttons and navigation options to the modal components. It
also refactors the `OffersModal` component to use the `AddOfferModal`
component for creating new offers.
This commit is contained in:
Ronald Langeveld 2023-11-02 15:36:16 +07:00 committed by GitHub
parent 59817c3c9b
commit a81d803324
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/admin-x-settings/src/components/settings/membership/offers/AddOfferModal.tsx
View File

@ -133,9 +133,14 @@ const AddOfferModal = () => {
}
}, [hasOffers, modal, updateRoute]);
const cancelAddOffer = () => {
modal.remove();
updateRoute('offers/edit');
};
const sidebar = <Sidebar />;
return <PreviewModalContent deviceSelector={false} okLabel='Publish' sidebar={sidebar} size='full' title='Offer' />;
return <PreviewModalContent cancelLabel='Cancel' deviceSelector={false} okLabel='Publish' sidebar={sidebar} size='full' title='Offer' onCancel={cancelAddOffer} />;
};
export default NiceModal.create(AddOfferModal);

5
apps/admin-x-settings/src/components/settings/membership/offers/EditOfferModal.tsx
View File

@ -66,7 +66,10 @@ const EditOfferModal = () => {
const sidebar = <Sidebar />;
return <PreviewModalContent deviceSelector={false} okLabel='Update' sidebar={sidebar} size='full' title='Offer' />;
return <PreviewModalContent deviceSelector={false} okLabel='Update' sidebar={sidebar} size='full' title='Offer' onCancel={() => {
modal.remove();
updateRoute('offers/edit');
}} />;
};
export default NiceModal.create(EditOfferModal);

23
apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
View File

@ -8,7 +8,7 @@ import {useEffect} from 'react';
export type OfferType = 'percent' | 'fixed' | 'trial';
const OfferCard: React.FC<{name: string, type: OfferType}> = ({name, type}) => {
const OfferCard: React.FC<{name: string, type: OfferType, onClick: ()=>void}> = ({name, type, onClick}) => {
let discountColor = '';
switch (type) {
@ -26,7 +26,7 @@ const OfferCard: React.FC<{name: string, type: OfferType}> = ({name, type}) => {
}
return <div className='flex flex-col items-center gap-6 border border-transparent bg-grey-100 p-5 text-center transition-all hover:border-grey-100 hover:bg-grey-75 hover:shadow-sm dark:bg-grey-950 dark:hover:border-grey-800'>
<h2 className='text-[1.6rem]'>{name}</h2>
<h2 className='cursor-pointer text-[1.6rem]' onClick={onClick}>{name}</h2>
<div className=''>
<div className='flex gap-3 text-sm uppercase leading-none'>
<span className={`font-semibold ${discountColor}`}>10% off</span>
@ -58,7 +58,16 @@ const OffersModal = () => {
{id: 'archived', title: 'Archived'}
];
return <Modal cancelLabel='' header={false} size='lg'>
const handleOfferEdit = (id:string) => {
// TODO: implement
modal.remove();
updateRoute(`offers/${id}`);
};
return <Modal cancelLabel='' header={false} size='lg' onOk={() => {
modal.remove();
updateRoute('offers');
}}>
<div className='pt-6'>
<header>
<div className='flex items-center justify-between'>
@ -69,14 +78,14 @@ const OffersModal = () => {
width='wide'
onTabChange={() => {}}
/>
<Button color='green' icon='add' iconColorClass='green' label='New offer' link={true} size='sm' />
<Button color='green' icon='add' iconColorClass='green' label='New offer' link={true} size='sm' onClick={() => updateRoute('offers/new')} />
</div>
<h1 className='mt-12 border-b border-b-grey-300 pb-2.5 text-3xl'>Active offers</h1>
</header>
<div className='mt-8 grid grid-cols-3 gap-6'>
<OfferCard name='Black friday' type='percent' />
<OfferCard name='Buy this right now' type='fixed' />
<OfferCard name='Desperate Sale!' type='trial' />
<OfferCard name='Black friday' type='percent' onClick={() => handleOfferEdit('123')} />
<OfferCard name='Buy this right now' type='fixed' onClick={() => handleOfferEdit('123')} />
<OfferCard name='Desperate Sale!' type='trial' onClick={() => handleOfferEdit('123')} />
</div>
<a className='absolute bottom-10 text-sm' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">→ Learn about offers in Ghost</a>
</div>