Added basic Recommendations modal (#17877)

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

apps/portal/src/App.js

@@ -792,6 +792,10 @@ export default class App extends React.Component {
             return {
                 page: 'supportError'
             };
+        } else if (path === 'recommendations') {
+            return {
+                page: 'recommendations'
+            };
         }
         return {};
     }

apps/portal/src/components/Frame.styles.js

@@ -22,6 +22,7 @@ import EmailSuppressionFAQ from './pages/EmailSuppressionFAQ.css';
 import EmailReceivingFAQ from './pages/EmailReceivingFAQ.css';
 import {TipsAndDonationsSuccessStyle} from './pages/SupportSuccess';
 import {TipsAndDonationsErrorStyle} from './pages/SupportError';
+import {RecommendationsPageStyles} from './pages/RecommendationsPage';
 
 // Global styles
 const FrameStyles = `
@@ -1227,6 +1228,7 @@ export function getFrameStyles({site}) {
         EmailSuppressionFAQ +
         EmailReceivingFAQ +
         TipsAndDonationsSuccessStyle +
-        TipsAndDonationsErrorStyle;
+        TipsAndDonationsErrorStyle +
+        RecommendationsPageStyles;
     return FrameStyle;
 }

apps/portal/src/components/pages/RecommendationsPage.js

@@ -0,0 +1,72 @@
+import AppContext from '../../AppContext';
+import {useContext} from 'react';
+
+// Dummy data for design purposes. To be deleted when wired up with real data.
+const recommendations = [
+    {
+        title: 'Mountains by bike',
+        url: 'https://unsplash.com/photos/1527pjeb6jg',
+        reason: 'Incredible photography, captivating stories.',
+        excerpt: 'Explore mountains with me and my bike!',
+        featured_image: 'https://unsplash.com/photos/1527pjeb6jg',
+        favicon: 'https://unsplash.com/photos/1527pjeb6jg'
+    },
+    {
+        title: 'By the seaside',
+        url: 'https://unsplash.com/photos/V3l7m298DLg',
+        reason: 'Sea, sunsets, beers. What else do you need?',
+        excerpt: 'Enjoy the sea!',
+        featured_image: 'https://unsplash.com/photos/V3l7m298DLg',
+        favicon: 'https://unsplash.com/photos/V3l7m298DLg'
+    }
+];
+
+export const RecommendationsPageStyles = `
+  .gh-portal-recommendation-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+  }
+`;
+
+const RecommendationItem = ({title, url, excerpt}) => {
+    const {t} = useContext(AppContext);
+
+    return (
+        <section className="gh-portal-list-toggle-wrapper gh-portal-recommendation-item">
+            <div className="gh-portal-list-detail gh-portal-list-big">
+                <h3>{title}</h3>
+                <p>{excerpt}</p>
+            </div>
+            <div className="gh-portal-lock-icon-container">
+                <a href={url} target="_blank" rel="noopener noreferrer">{t('Visit')}</a>
+            </div>
+        </section>
+    );
+};
+
+const RecommendationsPage = () => {
+    const {site, t} = useContext(AppContext);
+
+    return (
+        <div className='gh-portal-content with-footer'>
+            <h1 className="gh-portal-text-center gh-portal-text-large pb6">{t('Recommendations')}</h1>
+            <p className="gh-portal-text-center pb4">{t(`Here are a few other sites ${site.title} thinks you may enjoy.`)}</p>
+
+            <div className="gh-portal-list">
+                {recommendations.map((recommendation, index) => (
+                    <RecommendationItem key={index} {...recommendation} />
+                ))}
+            </div>
+
+            <footer className='gh-portal-action-footer'>
+                <button className='gh-portal-btn gh-portal-center' style={{width: '100%'}}>
+                    <span>{t('Show all')}</span>
+                </button>
+            </footer>
+        </div>
+    );
+};
+
+export default RecommendationsPage;

apps/portal/src/pages.js

@@ -16,6 +16,7 @@ import EmailReceivingFAQ from './components/pages/EmailReceivingFAQ';
 import SupportPage from './components/pages/SupportPage';
 import SupportSuccess from './components/pages/SupportSuccess';
 import SupportError from './components/pages/SupportError';
+import RecommendationsPage from './components/pages/RecommendationsPage';
 
 /** List of all available pages in Portal, mapped to their UI component
  * Any new page added to portal needs to be mapped here
@@ -38,7 +39,8 @@ const Pages = {
     emailReceivingFAQ: EmailReceivingFAQ,
     support: SupportPage,
     supportSuccess: SupportSuccess,
-    supportError: SupportError
+    supportError: SupportError,
+    recommendations: RecommendationsPage
 };
 
 /** Return page if valid, fallback to signup */