From a81d80332450e0feb5e73e5bacd361d66cac61b1 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 2 Nov 2023 15:36:16 +0700
Subject: [PATCH] Added offers modal toggle functions (#18839)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../membership/offers/AddOfferModal.tsx       |  7 +++++-
 .../membership/offers/EditOfferModal.tsx      |  5 +++-
 .../membership/offers/OffersModal.tsx         | 23 +++++++++++++------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/offers/AddOfferModal.tsx b/apps/admin-x-settings/src/components/settings/membership/offers/AddOfferModal.tsx
index d03baa9e54..bf517bb852 100644
--- a/apps/admin-x-settings/src/components/settings/membership/offers/AddOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/offers/AddOfferModal.tsx
@@ -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);
diff --git a/apps/admin-x-settings/src/components/settings/membership/offers/EditOfferModal.tsx b/apps/admin-x-settings/src/components/settings/membership/offers/EditOfferModal.tsx
index 86880829ef..d216b19932 100644
--- a/apps/admin-x-settings/src/components/settings/membership/offers/EditOfferModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/offers/EditOfferModal.tsx
@@ -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);
diff --git a/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx b/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
index 19ea516298..de2a1b618b 100644
--- a/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/offers/OffersModal.tsx
@@ -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>