From 6de3e85bd014f2f975f5b82303b19536b2fe90a3 Mon Sep 17 00:00:00 2001 From: Sodbileg Gansukh Date: Thu, 16 Nov 2023 17:08:38 +0800 Subject: [PATCH] Fixed duplicate modals issue in offers AdminX refs https://github.com/TryGhost/Product/issues/4138 - we should follow the same pattern as change modal flow for the Offers modals - with the change theme flow, only one modal is shown at a time to make it feel like navigating inside one container modal - this removes the container modal from OffersContainerModal and puts back the Modal component to each screens, so there will be no modal on top of another --- .../components/providers/SettingsRouter.tsx | 7 +-- .../settings/growth/offers/AddOfferModal.tsx | 3 +- .../settings/growth/offers/EditOfferModal.tsx | 6 +- .../settings/growth/offers/OfferSuccess.tsx | 58 ++++++++++++----- .../growth/offers/OffersContainerModal.tsx | 36 +---------- .../settings/growth/offers/OffersIndex.tsx | 63 +++++++++++++------ 6 files changed, 98 insertions(+), 75 deletions(-) diff --git a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx index 481cfb0d11..d5cb055bfd 100644 --- a/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx +++ b/apps/admin-x-settings/src/components/providers/SettingsRouter.tsx @@ -31,10 +31,9 @@ export const modalPaths: {[key: string]: ModalName} = { 'recommendations/edit': 'EditRecommendationModal', 'announcement-bar/edit': 'AnnouncementBarModal', 'embed-signup-form/show': 'EmbedSignupFormModal', - 'offers/edit/*': 'OffersContainerModal', - // 'offers/new': 'AddOfferModal', - // 'offers/success/:id': 'OfferSuccess', - // 'offers/:id': 'EditOfferModal', + 'offers/edit': 'OffersContainerModal', + 'offers/edit/:id': 'OffersContainerModal', + 'offers/new': 'OffersContainerModal', about: 'AboutModal' }; diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx index 1071ae08fd..f97f8379a2 100644 --- a/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/offers/AddOfferModal.tsx @@ -429,11 +429,12 @@ const AddOfferModal = () => { cancelLabel='Cancel' deviceSelector={false} dirty={saveState === 'unsaved'} + height='full' okColor={okProps.color} okLabel='Publish' preview={iframe} sidebar={sidebar} - size='full' + size='lg' title='Offer' onCancel={cancelAddOffer} onOk={async () => { diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx index 30303a6f1f..ce842ea962 100644 --- a/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/offers/EditOfferModal.tsx @@ -253,13 +253,15 @@ const EditOfferModal: React.FC<{id: string}> = ({id}) => { href={href} />; - return offerById ? { diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx index 9f7fd810c3..306719ec38 100644 --- a/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/offers/OfferSuccess.tsx @@ -1,22 +1,27 @@ import {Button} from '@tryghost/admin-x-design-system'; import {Icon} from '@tryghost/admin-x-design-system'; +import {Modal} from '@tryghost/admin-x-design-system'; +import {Offer, useBrowseOffersById} from '@tryghost/admin-x-framework/api/offers'; import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site'; -import {useBrowseOffersById} from '@tryghost/admin-x-framework/api/offers'; import {useEffect, useState} from 'react'; import {useGlobalData} from '../../../providers/GlobalDataProvider'; +import {useRouting} from '@tryghost/admin-x-framework/routing'; const OfferSuccess: React.FC<{id: string}> = ({id}) => { + const {updateRoute} = useRouting(); const {data: {offers: offerById = []} = {}} = useBrowseOffersById(id ? id : ''); + const [offer, setOffer] = useState(); const [offerLink, setOfferLink] = useState(''); const {siteData} = useGlobalData(); useEffect(() => { if (offerById.length > 0) { - const offer = offerById[0]; - const offerUrl = `${getHomepageUrl(siteData!)}${offer?.code}`; + const currentOffer = offerById[0]; + const offerUrl = `${getHomepageUrl(siteData!)}${currentOffer?.code}`; setOfferLink(offerUrl); + setOffer(currentOffer); } }, [offerById, siteData]); @@ -33,20 +38,43 @@ const OfferSuccess: React.FC<{id: string}> = ({id}) => { } }; - return
- -

Your new offer is live!

-

You can share the link anywhere. In your newsletter, social media, a podcast, or in-person. It all just works.

-
-
- ; + ; }; export default OfferSuccess; diff --git a/apps/admin-x-settings/src/components/settings/growth/offers/OffersContainerModal.tsx b/apps/admin-x-settings/src/components/settings/growth/offers/OffersContainerModal.tsx index a90c93d08e..de729811ae 100644 --- a/apps/admin-x-settings/src/components/settings/growth/offers/OffersContainerModal.tsx +++ b/apps/admin-x-settings/src/components/settings/growth/offers/OffersContainerModal.tsx @@ -2,60 +2,30 @@ import AddOfferModal from './AddOfferModal'; import EditOfferModal from './EditOfferModal'; import NiceModal from '@ebay/nice-modal-react'; import OfferSuccess from './OfferSuccess'; -import {Button, Modal} from '@tryghost/admin-x-design-system'; import {OffersIndexModal} from './OffersIndex'; import {useRouting} from '@tryghost/admin-x-framework/routing'; -import {useState} from 'react'; type OffersRouteHandlerProps = { route: string; - setIsIndex: (value: boolean) => void; }; -const OffersRouteHandler: React.FC = ({route, setIsIndex}) => { +const OffersRouteHandler: React.FC = ({route}) => { if (route === 'offers/new') { - setIsIndex(false); return ; } else if (route.startsWith('offers/edit/') && route.length > 'offers/edit/'.length) { - setIsIndex(false); const offerId = route.split('/').pop(); return ; } else if (route.startsWith('offers/success/') && route.length > 'offers/success/'.length) { - setIsIndex(false); const offerId = route.split('/').pop(); return ; } else { - setIsIndex(true); return ; } }; const OffersContainerModal = () => { - const {route, updateRoute} = useRouting(); - const [isIndex, setIsIndex] = useState(true); - return ( - { - updateRoute('offers'); - }} - cancelLabel='' - footer={ - isIndex &&
- → Learn about offers in Ghost -
- } - header={false} - height='full' - size='lg' - stickyFooter= {isIndex} - testId='offers-modal' - > - - - ); + const {route} = useRouting(); + return ; }; export default NiceModal.create(OffersContainerModal); 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 934e5d3431..3e996de467 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,5 +1,6 @@ import useFeatureFlag from '../../../../hooks/useFeatureFlag'; import {Button, Tab, TabView} from '@tryghost/admin-x-design-system'; +import {Modal} from '@tryghost/admin-x-design-system'; import {Tier, getPaidActiveTiers, useBrowseTiers} from '@tryghost/admin-x-framework/api/tiers'; import {currencyToDecimal, getSymbol} from '../../../../utils/currency'; import {getHomepageUrl} from '@tryghost/admin-x-framework/api/site'; @@ -193,26 +194,48 @@ export const OffersIndexModal = () => { })} ; - return
-
-
- -
-
-

{offersTabs.find(tab => tab.id === selectedTab)?.title} offers

-
-
-
-
- {selectedLayout === 'card' ? cardLayoutOutput : listLayoutOutput} -
; +
+

{offersTabs.find(tab => tab.id === selectedTab)?.title} offers

+
+
+
+ + {selectedLayout === 'card' ? cardLayoutOutput : listLayoutOutput} + + ; };