From 21bdd38b3740e295103bfc18ca745901be05fd83 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 25 Sep 2023 15:11:26 +0100
Subject: [PATCH] Added "Maybe later" button to recommendations modal

refs https://github.com/TryGhost/Product/issues/3824
---
 .../components/pages/RecommendationsPage.js   | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/portal/src/components/pages/RecommendationsPage.js b/apps/portal/src/components/pages/RecommendationsPage.js
index bc83e17cf2..9d9ffe08eb 100644
--- a/apps/portal/src/components/pages/RecommendationsPage.js
+++ b/apps/portal/src/components/pages/RecommendationsPage.js
@@ -10,6 +10,11 @@ import {ReactComponent as CheckmarkIcon} from '../../images/icons/check-circle.s
 import {getRefDomain} from '../../utils/helpers';
 
 export const RecommendationsPageStyles = `
+    .gh-portal-recommendations-header .gh-portal-main-title {
+        padding: 0 32px;
+        text-wrap: balance;
+    }
+
     .gh-portal-recommendation-item {
         min-height: 38px;
     }
@@ -126,6 +131,14 @@ export const RecommendationsPageStyles = `
     .gh-portal-recommendation-item-action {
         min-height: 28px;
     }
+
+    .gh-portal-popup-container.recommendations .gh-portal-action-footer
+
+    .gh-portal-btn-recommendations-later {
+        margin: 8px auto 24px;
+        color: var(--grey6);
+        font-weight: 400;
+    }
 `;
 
 // Fisher-Yates shuffle
@@ -153,7 +166,7 @@ const RecommendationIcon = ({title, favicon, featuredImage}) => {
     };
 
     if (!icon) {
-        return null;
+        return <div className="gh-portal-recommendation-item-favicon"></div>;
     }
 
     return (<img className="gh-portal-recommendation-item-favicon" src={icon} alt={title} onError={hideIcon} />);
@@ -303,7 +316,7 @@ const RecommendationsPage = () => {
     }, []);
 
     const heading = pageData && pageData.signup ? t('Welcome to {{siteTitle}}', {siteTitle: title, interpolation: {escapeValue: false}}) : t('Recommendations');
-    const subheading = pageData && pageData.signup ? t('Thanks for subscribing. Here are a few other sites you may enjoy. ') : t('Here are a few other sites you may enjoy.');
+    const subheading = pageData && pageData.signup ? t('Thank you for subscribing. Before you start reading, below are a few other sites you may enjoy.') : t('Here are a few other sites you may enjoy.');
 
     if (!recommendationsEnabled) {
         return null;
@@ -328,11 +341,14 @@ const RecommendationsPage = () => {
                 ))}
             </div>
 
-            {numToShow < recommendations.length && (
+            {((numToShow < recommendations.length) || (pageData && pageData.signup)) && (
                 <footer className='gh-portal-action-footer'>
-                    <button className='gh-portal-btn gh-portal-center' style={{width: '100%'}} onClick={showAllRecommendations}>
+                    {(numToShow < recommendations.length) && <button className='gh-portal-btn gh-portal-center' style={{width: '100%'}} onClick={showAllRecommendations}>
                         <span>{t('Show all')}</span>
-                    </button>
+                    </button>}
+                    {(pageData && pageData.signup) && <button className='gh-portal-btn gh-portal-center gh-portal-btn-link gh-portal-btn-recommendations-later' style={{width: '100%'}} onClick={showAllRecommendations}>
+                        <span>{t('Maybe later')}</span>
+                    </button>}
                 </footer>
             )}
         </div>