AdminX Tiers static design (#17271)

refs. https://github.com/TryGhost/Product/issues/3580

- A couple of static components were needed as a starting point for
Tiers in AdminX settings.

apps/admin-x-settings/src/components/providers/RoutingProvider.tsx

@@ -3,8 +3,9 @@ import DesignModal from '../settings/site/DesignModal';
 import InviteUserModal from '../settings/general/InviteUserModal';
 import NavigationModal from '../settings/site/NavigationModal';
 import NiceModal from '@ebay/nice-modal-react';
-import PortalModal from '../settings/membership/PortalModal';
+import PortalModal from '../settings/membership/portal/PortalModal';
 import React, {createContext, useCallback, useContext, useEffect, useState} from 'react';
+import TierDetailModal from '../settings/membership/tiers/TierDetailModal';
 import {SettingsContext} from './SettingsProvider';
 
 type RoutingContextProps = {
@@ -52,6 +53,8 @@ function handleNavigation() {
             NiceModal.show(InviteUserModal);
         } else if (pathName === 'portal/edit') {
             NiceModal.show(PortalModal);
+        } else if (pathName === 'tiers/add') {
+            NiceModal.show(TierDetailModal);
         }
         const element = document.getElementById(pathName);
         if (element) {

apps/admin-x-settings/src/components/settings/membership/MembershipSettings.tsx

@@ -3,9 +3,11 @@ import Analytics from './Analytics';
 import Portal from './Portal';
 import React from 'react';
 import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+import Tiers from './Tiers';
 
 const searchKeywords = {
     portal: ['portal', 'signup', 'sign up', 'signin', 'sign in', 'login', 'account', 'membership'],
+    tiers: ['tiers', 'payment', 'paid'],
     access: ['access', 'subscription', 'post', 'membership'],
     analytics: ['analytics', 'tracking', 'privacy', 'membership']
 };
@@ -15,6 +17,7 @@ const MembershipSettings: React.FC = () => {
         <SettingSection keywords={Object.values(searchKeywords).flat()} title='Membership'>
             <Portal keywords={searchKeywords.portal} />
             <Access keywords={searchKeywords.access} />
+            <Tiers keywords={searchKeywords.tiers} />
             <Analytics keywords={searchKeywords.analytics} />
         </SettingSection>
     );

apps/admin-x-settings/src/components/settings/membership/Tiers.tsx

@@ -0,0 +1,48 @@
+import Button from '../../../admin-x-ds/global/Button';
+import React, {useState} from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import TabView from '../../../admin-x-ds/global/TabView';
+import TiersList from './tiers/TiersList';
+import useRouting from '../../../hooks/useRouting';
+
+const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
+    const {updateRoute} = useRouting();
+    const openTierModal = () => {
+        updateRoute('tiers/add');
+    };
+    const [selectedTab, setSelectedTab] = useState('active-tiers');
+
+    const buttons = (
+        <Button color='green' label='Add tier' link={true} onClick={() => {
+            openTierModal();
+        }} />
+    );
+
+    const tabs = [
+        {
+            id: 'active-tiers',
+            title: 'Active',
+            contents: (<TiersList tab='active-tiers' />)
+        },
+        {
+            id: 'archived-tiers',
+            title: 'Archived',
+            contents: (<TiersList tab='archive-tiers' />)
+        }
+    ];
+
+    return (
+        <SettingGroup
+            customButtons={buttons}
+            description='Set prices and paid member sign up settings'
+            keywords={keywords}
+            navid='tiers'
+            testId='tiers'
+            title='Tiers'
+        >
+            <TabView selectedTab={selectedTab} tabs={tabs} onTabChange={setSelectedTab} />
+        </SettingGroup>
+    );
+};
+
+export default Tiers;

apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx

@@ -1,18 +1,18 @@
-import AccountPage from './portal/AccountPage';
-import ConfirmationModal from '../../../admin-x-ds/global/modal/ConfirmationModal';
-import LookAndFeel from './portal/LookAndFeel';
+import AccountPage from './AccountPage';
+import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
+import LookAndFeel from './LookAndFeel';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import PortalPreview from './portal/PortalPreview';
+import PortalPreview from './PortalPreview';
 import React, {useContext, useState} from 'react';
-import SignupOptions from './portal/SignupOptions';
-import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
-import useForm, {Dirtyable} from '../../../hooks/useForm';
-import useRouting from '../../../hooks/useRouting';
-import {PreviewModalContent} from '../../../admin-x-ds/global/modal/PreviewModal';
-import {Setting, SettingValue, Tier} from '../../../types/api';
-import {SettingsContext} from '../../providers/SettingsProvider';
-import {fullEmailAddress} from '../../../utils/helpers';
-import {useTiers} from '../../providers/ServiceProvider';
+import SignupOptions from './SignupOptions';
+import TabView, {Tab} from '../../../../admin-x-ds/global/TabView';
+import useForm, {Dirtyable} from '../../../../hooks/useForm';
+import useRouting from '../../../../hooks/useRouting';
+import {PreviewModalContent} from '../../../../admin-x-ds/global/modal/PreviewModal';
+import {Setting, SettingValue, Tier} from '../../../../types/api';
+import {SettingsContext} from '../../../providers/SettingsProvider';
+import {fullEmailAddress} from '../../../../utils/helpers';
+import {useTiers} from '../../../providers/ServiceProvider';
 
 const Sidebar: React.FC<{
     localSettings: Setting[]

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx

@@ -0,0 +1,35 @@
+import Form from '../../../../admin-x-ds/global/form/Form';
+import Modal from '../../../../admin-x-ds/global/modal/Modal';
+import NiceModal from '@ebay/nice-modal-react';
+import React from 'react';
+import TierDetailPreview from './TierDetailPreview';
+import useRouting from '../../../../hooks/useRouting';
+
+interface TierDetailModalProps {
+
+}
+
+const TierDetailModal: React.FC<TierDetailModalProps> = () => {
+    const {updateRoute} = useRouting();
+    return <Modal
+        afterClose={() => {
+            updateRoute('tiers');
+        }}
+        okLabel='Save & close'
+        size='lg'
+        title='Tier'
+        stickyFooter>
+        <div className='mt-5 flex items-start'>
+            <div className='grow'>
+                <Form>
+                    Tier form
+                </Form>
+            </div>
+            <div className='sticky top-[77px] shrink-0 basis-[380px]'>
+                <TierDetailPreview />
+            </div>
+        </div>
+    </Modal>;
+};
+
+export default NiceModal.create(TierDetailModal);

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailPreview.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface TierDetailPreviewProps {}
+
+const TierDetailPreview: React.FC<TierDetailPreviewProps> = () => {
+    return <>Preview block</>;
+};
+
+export default TierDetailPreview;

apps/admin-x-settings/src/components/settings/membership/tiers/TiersList.tsx

@@ -0,0 +1,45 @@
+import Button from '../../../../admin-x-ds/global/Button';
+import List from '../../../../admin-x-ds/global/List';
+import ListItem from '../../../../admin-x-ds/global/ListItem';
+import NiceModal from '@ebay/nice-modal-react';
+import React from 'react';
+import TierDetailModal from './TierDetailModal';
+
+interface TiersListProps {
+    tab?: string;
+}
+
+const TiersList: React.FC<TiersListProps> = ({
+    tab
+}) => {
+    const action = tab === 'active-tiers' ? (
+        <Button color='green' label='Archive' link />
+    ) : (
+        <Button color='green' label='Activate' link />
+    );
+
+    return (
+        <List>
+            <ListItem
+                action={action}
+                detail='Yet another tier'
+                title='Dummy tier one'
+                hideActions
+                onClick={() => {
+                    NiceModal.show(TierDetailModal);
+                }}
+            />
+            <ListItem
+                action={action}
+                detail='Yet another tier again'
+                title='Dummy tier two'
+                hideActions
+                onClick={() => {
+                    NiceModal.show(TierDetailModal);
+                }}
+            />
+        </List>
+    );
+};
+
+export default TiersList;

apps/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -282,10 +282,10 @@ const ChangeThemeModal = NiceModal.create(() => {
             cancelLabel=''
             footer={false}
             noPadding={true}
-            scrolling={currentTab === 'official' ? false : true}
             size='full'
             testId='theme-modal'
             title=''
+            scrolling
         >
             <div className='flex h-full justify-between'>
                 <div className='grow'>