Better no offers handling in offers list screen (#19138)

no issues

- active/archived tabs are no longer hidden, they're always visible
regardless of if there's an offer or not
- same for the modal footer, it's always visible
- used a simple NoValueLabel component instead of custom no offers view

apps/admin-x-design-system/src/assets/icons/tags-block.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-0.75 -0.75 24 24" height="24" width="24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.437481250000001 17.98875c-0.26370937499999997 0.263625 -0.621328125 0.41175 -0.99421875 0.41175 -0.37288125 0 -0.730509375 -0.148125 -0.99421875 -0.41175l-5.042812499999999 -5.041875c-0.13067812499999998 -0.13059375 -0.23433749999999998 -0.28565625 -0.3050625 -0.45628125 -0.070734375 -0.17071875 -0.10713750000000001 -0.35362499999999997 -0.10713750000000001 -0.53840625 0 -0.1846875 0.036403125 -0.3676875 0.10713750000000001 -0.5383125000000001 0.070725 -0.17071875 0.174384375 -0.32578124999999997 0.3050625 -0.45637500000000003L11.25 1.11376875c0.13059375 -0.13055624999999998 0.28575 -0.2341059375 0.45637500000000003 -0.304723125 0.17071875 -0.07061625 0.35362499999999997 -0.10692 0.5383125000000001 -0.106835625h5.041875c0.3729375 0 0.73059375 0.1481578125 0.9943124999999999 0.4118775 0.26371875 0.263728125 0.4119375 0.6214125 0.4119375 0.9943687499999999v5.042812499999999c-0.00009375 0.372703125 -0.148125 0.730125 -0.4115625 0.99375" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c-0.19415625 0 -0.3515625 -0.15739687500000002 -0.3515625 -0.3515625 0 -0.19415625 0.15740625 -0.3515625 0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" d="M15.1771875 4.56939375c0.19415625 0 0.3515625 -0.15739687500000002 0.3515625 -0.3515625 0 -0.19415625 -0.15740625 -0.3515625 -0.3515625 -0.3515625" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M15.8803125 21.795937499999997c3.10659375 0 5.625 -2.51840625 5.625 -5.625s-2.51840625 -5.625 -5.625 -5.625 -5.625 2.51840625 -5.625 5.625 2.51840625 5.625 5.625 5.625Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m19.858124999999998 12.193125 -7.95375 7.9546874999999995" stroke-width="1.5"></path></svg>

apps/admin-x-settings/src/components/settings/growth/offers/OffersIndex.tsx

@@ -1,7 +1,7 @@
 import useFeatureFlag from '../../../../hooks/useFeatureFlag';
 import {Button, Tab, TabView} from '@tryghost/admin-x-design-system';
-import {Icon} 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 {Tooltip} from '@tryghost/admin-x-design-system';
@@ -111,21 +111,6 @@ const OfferCard: React.FC<{amount: number, cadence: string, currency: string, du
     );
 };
 
-const EmptyScreen: React.FC = () => {
-    const {updateRoute} = useRouting();
-
-    return <div className='flex h-full flex-col items-center justify-center text-center'>
-        <Icon colorClass='text-grey-700' name='ai-tagging-spark' size='xl' />
-        <h1 className='mt-6 text-4xl'>Provide offers to new signups</h1>
-        <div className='max-w-[420px]'>
-            <p className='mt-3 text-[1.6rem]'>Boost your subscriptions by creating targeted discounts to potential members.</p>
-            <div className='mt-8'>
-                <Button color='green' label='Create first offer' fullWidth onClick={() => updateRoute('offers/new')} />
-            </div>
-        </div>
-    </div>;
-};
-
 export const OffersIndexModal = () => {
     const modal = useModal();
     const {updateRoute} = useRouting();
@@ -217,6 +202,7 @@ export const OffersIndexModal = () => {
 
     const listLayoutOutput = <div className='overflow-x-auto'>
         <table className='m-0 w-full'>
+            {(selectedTab === 'active' && activeOffers.length > 0) || (selectedTab === 'archived' && archivedOffers.length > 0) ?
                 <tr className='border-b border-b-grey-300'>
                     <th className='px-5 py-2.5 pl-0 text-xs font-normal text-grey-700'>{sortedOffers.length} {sortedOffers.length > 1 ? 'offers' : 'offer'}</th>
                     <th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Tier</th>
@@ -224,7 +210,9 @@ export const OffersIndexModal = () => {
                     <th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Price</th>
                     <th className='px-5 py-2.5 text-xs font-normal text-grey-700'>Redemptions</th>
                     <th className='min-w-[80px] px-5 py-2.5 pr-0 text-xs font-normal text-grey-700'></th>
-            </tr>
+                </tr> :
+                null
+            }
             {sortedOffers.filter((offer) => {
                 const offerTier = allTiers?.find(tier => tier.id === offer?.tier.id);
                 //Check to filter out offers with archived offerTier
@@ -262,15 +250,13 @@ export const OffersIndexModal = () => {
         animate={false}
         cancelLabel=''
         footer={
-            (activeOffers.length > 0 || archivedOffers.length > 0) ?
             <div className='mx-8 flex w-full items-center justify-between'>
                 <a className='text-sm' href="https://ghost.org/help/offers" rel="noopener noreferrer" target="_blank">→ Learn about offers in Ghost</a>
                 <Button color='black' label='Close' onClick={() => {
                     modal.remove();
                     updateRoute('offers');
                 }} />
-                </div> :
-                false
+            </div>
         }
         header={false}
         height='full'
@@ -278,21 +264,17 @@ export const OffersIndexModal = () => {
         testId='offers-modal'
         stickyFooter
     >
-        {(activeOffers.length > 0 || archivedOffers.length > 0) ?
         <div className='pt-6'>
             <header>
                 <div className='flex items-center justify-between'>
                     <div>
-                            {activeOffers.length > 0 && archivedOffers.length > 0 ?
                         <TabView
                             border={false}
                             selectedTab={selectedTab}
                             tabs={offersTabs}
                             width='wide'
                             onTabChange={setSelectedTab}
-                                /> :
-                                null
-                            }
+                        />
                     </div>
                     <Button color='green' icon='add' iconColorClass='green' label='New offer' link={true} size='sm' onClick={() => updateRoute('offers/new')} />
                 </div>
@@ -322,9 +304,19 @@ export const OffersIndexModal = () => {
                     </div>
                 </div>
             </header>
-                {selectedLayout === 'card' ? cardLayoutOutput : listLayoutOutput}
-            </div> :
-            <EmptyScreen />
+            {selectedTab === 'active' && activeOffers.length === 0 ?
+                <NoValueLabel icon='tags-block'>
+                    No offers found.
+                </NoValueLabel> :
+                null
             }
+            {selectedTab === 'archived' && archivedOffers.length === 0 ?
+                <NoValueLabel icon='tags-block'>
+                    No offers found.
+                </NoValueLabel> :
+                null
+            }
+            {selectedLayout === 'card' ? cardLayoutOutput : listLayoutOutput}
+        </div>
     </Modal>;
 };