From 8416278ea71443095d96c8e717bc31ff60c5f207 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 29 Aug 2023 12:36:50 +0100
Subject: [PATCH] Added Recommendations settings placeholder under feature flag
 (#17855)

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

- Added Recommendations feature flag
- Added an empty placeholder settings section for Recommendations under the feature flag
---
 .../src/components/Sidebar.tsx                |  2 ++
 .../settings/advanced/labs/AlphaFeatures.tsx  |  4 +++
 .../settings/site/Recommendations.tsx         | 25 +++++++++++++++++++
 .../components/settings/site/SiteSettings.tsx |  7 +++++-
 ghost/admin/app/services/feature.js           |  1 +
 ghost/admin/app/templates/settings/labs.hbs   | 14 +++++++++++
 ghost/core/core/shared/labs.js                |  3 ++-
 7 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 apps/admin-x-settings/src/components/settings/site/Recommendations.tsx

diff --git a/apps/admin-x-settings/src/components/Sidebar.tsx b/apps/admin-x-settings/src/components/Sidebar.tsx
index bd7f545201..62ee714dea 100644
--- a/apps/admin-x-settings/src/components/Sidebar.tsx
+++ b/apps/admin-x-settings/src/components/Sidebar.tsx
@@ -21,6 +21,7 @@ const Sidebar: React.FC = () => {
     };
 
     const hasTipsAndDonations = useFeatureFlag('tipsAndDonations');
+    const hasRecommendations = useFeatureFlag('recommendations');
 
     return (
         <div className="hidden md:!visible md:!block md:h-[calc(100vh-5vmin-84px)] md:w-[240px] md:overflow-y-scroll md:pt-[32px]">
@@ -45,6 +46,7 @@ const Sidebar: React.FC = () => {
                 {/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
                 <SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
+                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Membership">
diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
index e33f7a7d51..349d86a115 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx
@@ -55,6 +55,10 @@ const features = [{
     title: 'Tips & donations',
     description: 'Enables publishers to collect one-time payments',
     flag: 'tipsAndDonations'
+},{
+    title: 'Recommendations',
+    description: 'Enables publishers to recommend sites to their audience',
+    flag: 'recommendations'
 }];
 
 const AlphaFeatures: React.FC = () => {
diff --git a/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx b/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx
new file mode 100644
index 0000000000..6736354d43
--- /dev/null
+++ b/apps/admin-x-settings/src/components/settings/site/Recommendations.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import useSettingGroup from '../../../hooks/useSettingGroup';
+
+const Recommendations: React.FC<{ keywords: string[] }> = ({keywords}) => {
+    const {
+        saveState,
+        handleSave
+    } = useSettingGroup();
+
+    return (
+        <SettingGroup
+            description="Recommend sites to your audience, and get recommended by others."
+            keywords={keywords}
+            navid='recommendations'
+            saveState={saveState}
+            testId='recommendations'
+            title="Recommendations"
+            onSave={handleSave}
+        >
+        </SettingGroup>
+    );
+};
+
+export default Recommendations;
\ No newline at end of file
diff --git a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
index 9e26e437cc..255d426ee3 100644
--- a/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/SiteSettings.tsx
@@ -1,22 +1,27 @@
 import DesignSetting from './DesignSetting';
 import Navigation from './Navigation';
 import React from 'react';
+import Recommendations from './Recommendations';
 import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+import useFeatureFlag from '../../../hooks/useFeatureFlag';
 // import Theme from './Theme';
 
 const searchKeywords = {
     theme: ['themes', 'design', 'appearance', 'style'],
     design: ['design', 'branding', 'logo', 'cover', 'colors', 'fonts', 'background'],
-    navigation: ['navigation', 'menus', 'primary', 'secondary', 'links']
+    navigation: ['navigation', 'menus', 'primary', 'secondary', 'links'],
+    recommendations: ['recommendation', 'recommend', 'blog roll', 'recommending']
 };
 
 const SiteSettings: React.FC = () => {
+    const hasRecommendations = useFeatureFlag('recommendations');
     return (
         <>
             <SettingSection keywords={Object.values(searchKeywords).flat()} title="Site">
                 {/* <Theme keywords={searchKeywords.theme} /> */}
                 <DesignSetting keywords={searchKeywords.design} />
                 <Navigation keywords={searchKeywords.navigation} />
+                {hasRecommendations && <Recommendations keywords={searchKeywords.navigation} />}
             </SettingSection>
         </>
     );
diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js
index 1eef449923..787e328acb 100644
--- a/ghost/admin/app/services/feature.js
+++ b/ghost/admin/app/services/feature.js
@@ -78,6 +78,7 @@ export default class FeatureService extends Service {
     @feature('importMemberTier') importMemberTier;
     @feature('tipsAndDonations') tipsAndDonations;
     @feature('convertToLexical') convertToLexical;
+    @feature('recommendations') recommendations;
 
     _user = null;
 
diff --git a/ghost/admin/app/templates/settings/labs.hbs b/ghost/admin/app/templates/settings/labs.hbs
index 1532ec3fa2..8818ddacf5 100644
--- a/ghost/admin/app/templates/settings/labs.hbs
+++ b/ghost/admin/app/templates/settings/labs.hbs
@@ -366,6 +366,20 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="gh-expandable-block">
+                    <div class="gh-expandable-header">
+                        <div>
+                            <h4 class="gh-expandable-title">Recommendations</h4>
+                            <p class="gh-expandable-description">
+                                Enables publishers to recommend sites to their audience
+                            </p>
+                        </div>
+                        <div class="for-switch">
+                            <GhFeatureFlag @flag="recommendations" />
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
         {{/if}}
diff --git a/ghost/core/core/shared/labs.js b/ghost/core/core/shared/labs.js
index 532047963e..aa57e0dc46 100644
--- a/ghost/core/core/shared/labs.js
+++ b/ghost/core/core/shared/labs.js
@@ -42,7 +42,8 @@ const ALPHA_FEATURES = [
     'collectionsCard',
     'tipsAndDonations',
     'importMemberTier',
-    'convertToLexical'
+    'convertToLexical',
+    'recommendations'
 ];
 
 module.exports.GA_KEYS = [...GA_FEATURES];