Fixed notification and showing of recommendation modal (#17991)

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

- Don't show a notification if the recommendation modal is shown
- Don't show the recommendation modal if there are no recommendations

apps/portal/src/App.js

@@ -11,7 +11,7 @@ import {getActivePage, isAccountPage, isOfferPage} from './pages';
 import ActionHandler from './actions';
 import './App.css';
 import NotificationParser from './utils/notifications';
-import {allowCompMemberUpgrade, createPopupNotification, getCurrencySymbol, getFirstpromoterId, getPriceIdFromPageQuery, getProductCadenceFromPrice, getProductFromId, getQueryPrice, getSiteDomain, isActiveOffer, isComplimentaryMember, isInviteOnlySite, isPaidMember, isRecentMember, isSentryEventAllowed, removePortalLinkFromUrl} from './utils/helpers';
+import {hasRecommendations, allowCompMemberUpgrade, createPopupNotification, getCurrencySymbol, getFirstpromoterId, getPriceIdFromPageQuery, getProductCadenceFromPrice, getProductFromId, getQueryPrice, getSiteDomain, isActiveOffer, isComplimentaryMember, isInviteOnlySite, isPaidMember, isRecentMember, isSentryEventAllowed, removePortalLinkFromUrl} from './utils/helpers';
 import {handleDataAttributes} from './data-attributes';
 
 import i18nLib from '@tryghost/i18n';
@@ -120,12 +120,12 @@ export default class App extends React.Component {
             event.preventDefault();
             const target = event.currentTarget;
             const pagePath = (target && target.dataset.portal);
-            const {page, pageQuery} = this.getPageFromLinkPath(pagePath) || {};
+            const {page, pageQuery, pageData} = this.getPageFromLinkPath(pagePath) || {};
             if (this.state.initStatus === 'success') {
                 if (pageQuery && pageQuery !== 'free') {
                     this.handleSignupQuery({site: this.state.site, pageQuery});
                 } else {
-                    this.dispatchAction('openPopup', {page, pageQuery});
+                    this.dispatchAction('openPopup', {page, pageQuery, pageData});
                 }
             }
         };
@@ -210,7 +210,7 @@ export default class App extends React.Component {
     async fetchData() {
         const {site: apiSiteData, member} = await this.fetchApiData();
         const {site: devSiteData, ...restDevData} = this.fetchDevData();
-        const {site: linkSiteData, ...restLinkData} = this.fetchLinkData();
+        const {site: linkSiteData, ...restLinkData} = this.fetchLinkData(apiSiteData);
         const {site: previewSiteData, ...restPreviewData} = this.fetchPreviewData();
         const {site: notificationSiteData, ...restNotificationData} = this.fetchNotificationData();
         let page = '';
@@ -413,7 +413,7 @@ export default class App extends React.Component {
     }
 
     /** Fetch state from Portal Links */
-    fetchLinkData() {
+    fetchLinkData(site) {
         const qParams = new URLSearchParams(window.location.search);
         if (qParams.get('uuid') && qParams.get('action') === 'unsubscribe') {
             return {
@@ -451,7 +451,7 @@ export default class App extends React.Component {
         }
         if (path && linkRegex.test(path)) {
             const [,pagePath] = path.match(linkRegex);
-            const {page, pageQuery, pageData} = this.getPageFromLinkPath(pagePath) || {};
+            const {page, pageQuery, pageData} = this.getPageFromLinkPath(pagePath, site) || {};
             const lastPage = ['accountPlan', 'accountProfile'].includes(page) ? 'accountHome' : null;
             const showPopup = (
                 ['monthly', 'yearly'].includes(pageQuery) ||
@@ -714,11 +714,12 @@ export default class App extends React.Component {
     }
 
     /**Get Portal page from Link/Data-attribute path*/
-    getPageFromLinkPath(path) {
+    getPageFromLinkPath(path, useSite) {
         const customPricesSignupRegex = /^signup\/?(?:\/(\w+?))?\/?$/;
         const customMonthlyProductSignup = /^signup\/?(?:\/(\w+?))\/monthly\/?$/;
         const customYearlyProductSignup = /^signup\/?(?:\/(\w+?))\/yearly\/?$/;
         const customOfferRegex = /^offers\/(\w+?)\/?$/;
+        const site = useSite ?? this.state.site ?? {};
 
         if (customOfferRegex.test(path)) {
             return {
@@ -793,11 +794,14 @@ export default class App extends React.Component {
             return {
                 page: 'supportError'
             };
-        } else if (path === 'recommendations') {
+        } else if (path === 'recommendations' && hasRecommendations({site})) {
             return {
-                page: 'recommendations'
+                page: 'recommendations',
+                pageData: {
+                    signup: false
+                }
             };
-        } else if (path === 'welcome') {
+        } else if (path === 'welcome' && hasRecommendations({site})) {
             return {
                 page: 'recommendations',
                 pageData: {

apps/portal/src/components/Notification.js

@@ -196,6 +196,16 @@ export default class Notification extends React.Component {
         };
     }
 
+    componentDidMount() {
+        const {showPopup} = this.context;
+        if (showPopup) {
+            // Don't show a notification if there is a popup visible on page load
+            this.setState({
+                active: false
+            });
+        }
+    }
+
     onHideNotification() {
         const type = this.state.type;
         const deleteParams = [];

apps/portal/src/utils/helpers.js

@@ -238,6 +238,10 @@ export function isInviteOnlySite({site = {}, pageQuery = ''}) {
     return prices.length === 0 || (site && site.members_signup_access === 'invite');
 }
 
+export function hasRecommendations({site}) {
+    return site?.recommendations_enabled === true;
+}
+
 export function isSigninAllowed({site}) {
     return site?.members_signup_access === 'all' || site?.members_signup_access === 'invite';
 }