Separated Membership and Growth settings

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

apps/admin-x-settings/src/components/Settings.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import AdvancedSettings from './settings/advanced/AdvancedSettings';
 import EmailSettings from './settings/email/EmailSettings';
 import GeneralSettings from './settings/general/GeneralSettings';
+import GrowthSettings from './settings/growth/GrowthSettings';
 import MembershipSettings from './settings/membership/MembershipSettings';
 import SiteSettings from './settings/site/SiteSettings';
 
@@ -13,6 +14,7 @@ const Settings: React.FC = () => {
                 <GeneralSettings />
                 <SiteSettings />
                 <MembershipSettings />
+                <GrowthSettings />
                 <EmailSettings />
                 <AdvancedSettings />
             </div>

apps/admin-x-settings/src/components/Sidebar.tsx

@@ -7,6 +7,7 @@ import {searchKeywords as advancedSearchKeywords} from './settings/advanced/Adva
 import {searchKeywords as emailSearchKeywords} from './settings/email/EmailSettings';
 import {searchKeywords as generalSearchKeywords} from './settings/general/GeneralSettings';
 import {getSettingValues} from '@tryghost/admin-x-framework/api/settings';
+import {searchKeywords as growthSearchKeywords} from './settings/growth/GrowthSettings';
 import {searchKeywords as membershipSearchKeywords} from './settings/membership/MembershipSettings';
 import {searchKeywords as siteSearchKeywords} from './settings/site/SiteSettings';
 import {useGlobalData} from './providers/GlobalDataProvider';
@@ -113,14 +114,17 @@ const Sidebar: React.FC = () => {
                 </SettingNavSection>
 
                 <SettingNavSection isVisible={checkVisible(Object.values(membershipSearchKeywords).flat())} title="Membership">
+                    <NavItem icon='portal' keywords={membershipSearchKeywords.portal} navid='portal' title="Portal settings" onClick={handleSectionClick} />
                     <NavItem icon='key' keywords={membershipSearchKeywords.access} navid='members' title="Access" onClick={handleSectionClick} />
-                    <NavItem icon='portal' keywords={membershipSearchKeywords.portal} navid='portal' title="Portal" onClick={handleSectionClick} />
                     <NavItem icon='bills' keywords={membershipSearchKeywords.tiers} navid='tiers' title="Tiers" onClick={handleSectionClick} />
-                    {hasTipsAndDonations && <NavItem icon='piggybank' keywords={membershipSearchKeywords.tips} navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
-                    <NavItem icon='emailfield' keywords={membershipSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} />
-                    {hasRecommendations && <NavItem icon='heart' keywords={membershipSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
                     <NavItem icon='baseline-chart' keywords={membershipSearchKeywords.analytics} navid='analytics' title="Analytics" onClick={handleSectionClick} />
-                    {hasOffers && <NavItem icon='discount' keywords={membershipSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
+                </SettingNavSection>
+
+                <SettingNavSection isVisible={checkVisible(Object.values(growthSearchKeywords).flat())} title="Growth">
+                    {hasRecommendations && <NavItem icon='heart' keywords={growthSearchKeywords.recommendations} navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
+                    <NavItem icon='emailfield' keywords={growthSearchKeywords.embedSignupForm} navid='embed-signup-form' title="Embeddable signup form" onClick={handleSectionClick} />
+                    {hasOffers && <NavItem icon='discount' keywords={growthSearchKeywords.offers} navid='offers' title="Offers" onClick={handleSectionClick} />}
+                    {hasTipsAndDonations && <NavItem icon='piggybank' keywords={growthSearchKeywords.tips} navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
                 </SettingNavSection>
 
                 <SettingNavSection isVisible={checkVisible(Object.values(emailSearchKeywords).flat())} title="Email newsletter">

apps/admin-x-settings/src/components/providers/routing/modals.tsx

@@ -4,21 +4,21 @@ import type {RoutingModalProps} from '@tryghost/admin-x-framework/routing';
 import AboutModal from '../../settings/general/About';
 import AddIntegrationModal from '../../settings/advanced/integrations/AddIntegrationModal';
 import AddNewsletterModal from '../../settings/email/newsletters/AddNewsletterModal';
-import AddOfferModal from '../../settings/membership/offers/AddOfferModal';
-import AddRecommendationModal from '../../settings/membership/recommendations/AddRecommendationModal';
+import AddOfferModal from '../../settings/growth/offers/AddOfferModal';
+import AddRecommendationModal from '../../settings/growth/recommendations/AddRecommendationModal';
 import AmpModal from '../../settings/advanced/integrations/AmpModal';
 import AnnouncementBarModal from '../../settings/site/AnnouncementBarModal';
 import CustomIntegrationModal from '../../settings/advanced/integrations/CustomIntegrationModal';
 import DesignAndThemeModal from '../../settings/site/DesignAndThemeModal';
-import EditOfferModal from '../../settings/membership/offers/EditOfferModal';
-import EditRecommendationModal from '../../settings/membership/recommendations/EditRecommendationModal';
-import EmbedSignupFormModal from '../../settings/membership/embedSignup/EmbedSignupFormModal';
+import EditOfferModal from '../../settings/growth/offers/EditOfferModal';
+import EditRecommendationModal from '../../settings/growth/recommendations/EditRecommendationModal';
+import EmbedSignupFormModal from '../../settings/growth/embedSignup/EmbedSignupFormModal';
 import FirstpromoterModal from '../../settings/advanced/integrations/FirstPromoterModal';
 import HistoryModal from '../../settings/advanced/HistoryModal';
 import InviteUserModal from '../../settings/general/InviteUserModal';
 import NavigationModal from '../../settings/site/NavigationModal';
 import NewsletterDetailModal from '../../settings/email/newsletters/NewsletterDetailModal';
-import OffersModal from '../../settings/membership/offers/OffersModal';
+import OffersModal from '../../settings/growth/offers/OffersModal';
 import PinturaModal from '../../settings/advanced/integrations/PinturaModal';
 import PortalModal from '../../settings/membership/portal/PortalModal';
 import SlackModal from '../../settings/advanced/integrations/SlackModal';

apps/admin-x-settings/src/components/settings/growth/GrowthSettings.tsx

@@ -0,0 +1,31 @@
+import EmbedSignupForm from './embedSignup/EmbedSignupForm';
+import Offers from './Offers';
+import React from 'react';
+import Recommendations from './Recommendations';
+import SearchableSection from '../../SearchableSection';
+import TipsOrDonations from './TipsOrDonations';
+import useFeatureFlag from '../../../hooks/useFeatureFlag';
+
+export const searchKeywords = {
+    tips: ['growth', 'tip', 'donation', 'one time', 'payment'],
+    embedSignupForm: ['growth', 'embeddable signup form', 'embeddable form', 'embeddable sign up form', 'embeddable sign up'],
+    recommendations: ['growth', 'recommendations', 'recommend', 'blogroll'],
+    offers: ['growth', 'offers', 'discounts', 'coupons', 'promotions']
+};
+
+const GrowthSettings: React.FC = () => {
+    const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
+    const hasRecommendations = useFeatureFlag('recommendations');
+    const hasOffers = useFeatureFlag('adminXOffers');
+
+    return (
+        <SearchableSection keywords={Object.values(searchKeywords).flat()} title='Growth'>
+            {hasRecommendations && <Recommendations keywords={searchKeywords.recommendations} />}
+            <EmbedSignupForm keywords={searchKeywords.embedSignupForm} />
+            {hasOffers && <Offers keywords={searchKeywords.offers} />}
+            {hasTipsAndDonations && <TipsOrDonations keywords={searchKeywords.tips} />}
+        </SearchableSection>
+    );
+};
+
+export default GrowthSettings;

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

@@ -1,5 +1,5 @@
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
-import PortalFrame from '../portal/PortalFrame';
+import PortalFrame from '../../membership/portal/PortalFrame';
 import useFeatureFlag from '../../../../hooks/useFeatureFlag';
 import {Form, Icon, PreviewModalContent, Select, SelectOption, TextArea, TextField} from '@tryghost/admin-x-design-system';
 import {getOfferPortalPreviewUrl, offerPortalPreviewUrlTypes} from '../../../../utils/getOffersPortalPreviewUrl';

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

@@ -1,41 +1,24 @@
 import Access from './Access';
 import Analytics from './Analytics';
-import EmbedSignupForm from './embedSignup/EmbedSignupForm';
-import Offers from './Offers';
 import Portal from './Portal';
 import React from 'react';
-import Recommendations from './Recommendations';
 import SearchableSection from '../../SearchableSection';
 import Tiers from './Tiers';
-import TipsOrDonations from './TipsOrDonations';
-import useFeatureFlag from '../../../hooks/useFeatureFlag';
 
 export const searchKeywords = {
     portal: ['membership', 'portal', 'signup', 'sign up', 'signin', 'sign in', 'login', 'account', 'membership'],
     access: ['membership', 'default', 'access', 'subscription', 'post', 'membership', 'comments', 'commenting'],
     tiers: ['membership', 'tiers', 'payment', 'paid', 'stripe'],
-    tips: ['membership', 'tip', 'donation', 'one time', 'payment'],
-    embedSignupForm: ['membership', 'embeddable signup form', 'embeddable form', 'embeddable sign up form', 'embeddable sign up'],
-    recommendations: ['membership', 'recommendations', 'recommend', 'blogroll'],
-    analytics: ['membership', 'analytics', 'tracking', 'privacy', 'membership'],
-    offers: ['membership', 'offers', 'discounts', 'coupons', 'promotions']
+    analytics: ['membership', 'analytics', 'tracking', 'privacy', 'membership']
 };
 
 const MembershipSettings: React.FC = () => {
-    const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
-    const hasRecommendations = useFeatureFlag('recommendations');
-    const hasOffers = useFeatureFlag('adminXOffers');
-
     return (
         <SearchableSection keywords={Object.values(searchKeywords).flat()} title='Membership'>
-            <Access keywords={searchKeywords.access} />
             <Portal keywords={searchKeywords.portal} />
+            <Access keywords={searchKeywords.access} />
             <Tiers keywords={searchKeywords.tiers} />
-            {hasTipsAndDonations && <TipsOrDonations keywords={searchKeywords.tips} />}
-            <EmbedSignupForm keywords={searchKeywords.embedSignupForm} />
-            {hasRecommendations && <Recommendations keywords={searchKeywords.recommendations} />}
             <Analytics keywords={searchKeywords.analytics} />
-            {hasOffers && <Offers keywords={searchKeywords.offers} />}
         </SearchableSection>
     );
 };