Added email suppression FAQ modal

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

@@ -19,6 +19,7 @@ import {PopupNotificationStyles} from './common/PopupNotification';
 import {OfferPageStyles} from './pages/OfferPage';
 import {FeedbackPageStyles} from './pages/FeedbackPage';
 import EmailSuppressedPage from '!!raw-loader!./pages/EmailSuppressedPage.css';
+import EmailSuppressionFAQ from '!!raw-loader!./pages/EmailSuppressionFAQ.css';
 
 // Global styles
 const FrameStyles = `
@@ -1175,6 +1176,7 @@ export function getFrameStyles({site}) {
         MobileStyles +
         MultipleProductsGlobalStyles +
         FeedbackPageStyles +
-        EmailSuppressedPage;
+        EmailSuppressedPage +
+        EmailSuppressionFAQ;
     return FrameStyle;
 }

ghost/portal/src/components/common/CloseButton.js

@@ -4,11 +4,18 @@ import {ReactComponent as CloseIcon} from '../../images/icons/close.svg';
 
 export default class CloseButton extends React.Component {
     static contextType = AppContext;
+
+    closePopup = () => {
+        this.context.onAction('closePopup');
+    };
+
     render() {
+        const {onClick} = this.props;
+
         return (
             <div className='gh-portal-closeicon-container'>
-                <CloseIcon className='gh-portal-closeicon' alt='Close' onClick = {() => this.context.onAction('closePopup')} />
+                <CloseIcon className='gh-portal-closeicon' alt='Close' onClick = {onClick || this.closePopup} />
             </div>
         );
     }
-}
+}

ghost/portal/src/components/pages/EmailSuppressedPage.css

@@ -15,6 +15,10 @@
     color: var(--grey6);
 }
 
-.gh-email-suppressed-page-text a {
+.gh-email-suppressed-page-button {
     color: var(--grey3);
+    cursor: pointer;
+    font-size: 1.5rem;
+    text-decoration: underline;
+    background: none;
 }

ghost/portal/src/components/pages/EmailSuppressedPage.js

@@ -43,11 +43,12 @@ export default function EmailSuppressedPage() {
                     permanent failure (bounce).
                 </p>
 
-                <a href="https://ghost.org" target="_blank" rel="noopener noreferrer" onClick={() => {
+                <button
-                    window.open('https://ghost.org', '_blank');
+                    className="gh-portal-btn-text gh-email-suppressed-page-button"
-                }}>
+                    onClick={() => onAction('switchPage', {page: 'emailSuppressionFAQ'})}
+                >
                     Learn more about why this happens
-                </a>
+                </button>
             </div>
 
             <ActionButton

ghost/portal/src/components/pages/EmailSuppressionFAQ.css

@@ -0,0 +1,3 @@
+.gh-email-suppression-faq {
+
+}

ghost/portal/src/components/pages/EmailSuppressionFAQ.js

@@ -0,0 +1,23 @@
+import AppContext from 'AppContext';
+import {useContext} from 'react';
+import CloseButton from 'components/common/CloseButton';
+
+export default function EmailSuppressedPage() {
+    const {onAction} = useContext(AppContext);
+
+    const onClose = () => {
+        onAction('switchPage', {page: 'emailSuppressed'});
+    };
+
+    return (
+        <div className="gh-email-suppressed-page">
+            <header className='gh-portal-detail-header'>
+                <CloseButton onClick={onClose} />
+            </header>
+
+            <div className="gh-email-suppression-faq">
+                <h3>Why is my email disabled?</h3>
+            </div>
+        </div>
+    );
+}

ghost/portal/src/pages.js

@@ -11,6 +11,7 @@ import NewsletterSelectionPage from './components/pages/NewsletterSelectionPage'
 import UnsubscribePage from './components/pages/UnsubscribePage';
 import FeedbackPage from './components/pages/FeedbackPage';
 import EmailSuppressedPage from './components/pages/EmailSuppressedPage';
+import EmailSuppressionFAQ from './components/pages/EmailSuppressionFAQ';
 
 /** List of all available pages in Portal, mapped to their UI component
  * Any new page added to portal needs to be mapped here
@@ -28,7 +29,8 @@ const Pages = {
     loading: LoadingPage,
     offer: OfferPage,
     feedback: FeedbackPage,
-    emailSuppressed: EmailSuppressedPage
+    emailSuppressed: EmailSuppressedPage,
+    emailSuppressionFAQ: EmailSuppressionFAQ
 };
 
 /** Return page if valid, fallback to signup */