Added v1 notification trigger setup

no issue

- Adds notification flow setup based on query params
- v1 adds notification for successful/failed signin

ghost/portal/src/App.js

@@ -12,6 +12,7 @@ const React = require('react');
 
 const DEV_MODE_DATA = {
     showPopup: true,
+    showNotification: true,
     site: Fixtures.site,
     member: Fixtures.member.paid,
     page: 'signup'
@@ -28,6 +29,7 @@ export default class App extends React.Component {
             member: null,
             page: 'loading',
             showPopup: false,
+            showNotification: false,
             action: 'init:running',
             initStatus: 'running',
             lastPage: null
@@ -88,12 +90,15 @@ export default class App extends React.Component {
     async initSetup() {
         try {
             // Fetch data from API, links, preview, dev sources
-            const {site, member, page, showPopup} = await this.fetchData();
+            const {site, member, page, showPopup, showNotification, notificationType, notificationStatus} = await this.fetchData();
             this.setState({
                 site,
                 member,
                 page,
                 showPopup,
+                showNotification,
+                notificationType,
+                notificationStatus,
                 action: 'init:success',
                 initStatus: 'success'
             });
@@ -120,6 +125,7 @@ export default class App extends React.Component {
         const {site: devSiteData, ...restDevData} = this.fetchDevData();
         const {site: linkSiteData, ...restLinkData} = this.fetchLinkData();
         const {site: previewSiteData, ...restPreviewData} = this.fetchPreviewData();
+        const {site: notificationSiteData, ...restNotificationData} = this.fetchNotificationData();
 
         const stripeParam = this.getStripeUrlParam();
         let page = '';
@@ -136,14 +142,30 @@ export default class App extends React.Component {
                 ...apiSiteData,
                 ...linkSiteData,
                 ...previewSiteData,
+                ...notificationSiteData,
                 ...devSiteData
             },
+            ...restNotificationData,
             ...restDevData,
             ...restLinkData,
             ...restPreviewData
         };
     }
 
+    /** Fetch state for any notifications */
+    fetchNotificationData() {
+        const qs = window.location.search;
+        const qsParams = new URLSearchParams(qs);
+        const notificationType = qsParams.get('action');
+        const notificationStatus = qsParams.get('success') ? JSON.parse(qsParams.get('success')) : null;
+        const showNotification = !!notificationType;
+        return {
+            showNotification: showNotification,
+            notificationType,
+            notificationStatus
+        };
+    }
+
     /** Fetch state for Dev mode */
     fetchDevData() {
         // Setup custom dev mode data from fixtures
@@ -328,7 +350,7 @@ export default class App extends React.Component {
 
     /**Get final App level context from data/state*/
     getContextFromState() {
-        const {site, member, action, page, lastPage, showPopup} = this.state;
+        const {site, member, action, page, lastPage, showPopup, showNotification, notificationType, notificationStatus} = this.state;
         const contextPage = this.getContextPage({page, member});
         const contextMember = this.getContextMember({page: contextPage, member});
         return {
@@ -339,6 +361,9 @@ export default class App extends React.Component {
             member: contextMember,
             lastPage,
             showPopup,
+            showNotification,
+            notificationType,
+            notificationStatus,
             onAction: (_action, data) => this.onAction(_action, data)
         };
     }
@@ -349,6 +374,7 @@ export default class App extends React.Component {
                 <AppContext.Provider value={this.getContextFromState()}>
                     <PopupModal />
                     <TriggerButton />
+                    <Notification />
                 </AppContext.Provider>
             );
         }

ghost/portal/src/actions.js

@@ -36,6 +36,19 @@ function closePopup({state}) {
     };
 }
 
+function openNotification({data}) {
+    return {
+        showNotification: true,
+        ...data
+    };
+}
+
+function closeNotification({state}) {
+    return {
+        showNotification: false
+    };
+}
+
 async function signout({api}) {
     await api.member.signout();
     return {
@@ -157,6 +170,8 @@ const Actions = {
     openPopup,
     closePopup,
     switchPage,
+    openNotification,
+    closeNotification,
     back,
     signout,
     signin,

ghost/portal/src/components/Notification.js

@@ -26,13 +26,41 @@ const Styles = ({brandColor, hasText}) => {
     };
 };
 
+const NotificationText = ({type, status}) => {
+    if (type === 'signin' && status === true) {
+        return (
+            <p>
+                Hey, you are successfully signed in!
+            </p>
+        );
+    } else if (type === 'signin' && status === false) {
+        return (
+            <p>
+                Hey, looks like you used an invalid link to signin!
+            </p>
+        );
+    }
+    return (
+        <p>
+            Hey, this is a neutral notification. I hope you feel well today, here's a <a href='http://ghost.org' target='_blank' rel='noopener noreferrer'>link</a> for you.
+        </p>
+    );
+};
+
 class NotificationContent extends React.Component {
+    static contextType = AppContext;
+
+    onNotificationClose() {
+        this.context.onAction('closeNotification');
+    }
+
     render() {
+        const {notificationType: type, notificationStatus: status} = this.context;
         return (
             <div className='gh-portal-notification-wrapper'>
                 <div className='gh-portal-notification'>
-                    <p>Hey, this is a neutral notification. I hope you feel well today, here's a <a href='http://ghost.org' target='_blank' rel='noopener noreferrer'>link</a> for you.</p>
-                    <CloseIcon className='gh-portal-notification-closeicon' alt='Close' />
+                    <NotificationText type={type} status={status} />
+                    <CloseIcon className='gh-portal-notification-closeicon' alt='Close' onClick={e => this.onNotificationClose(e)} />
                 </div>
             </div>
         );
@@ -58,7 +86,10 @@ export default class Notification extends React.Component {
         const frameStyle = {
             ...Style.frame
         };
-
+        const {showNotification} = this.context;
+        if (!showNotification) {
+            return null;
+        }
         return (
             <Frame style={frameStyle} title="membersjs-notification" head={this.renderFrameStyles()}>
                 <NotificationContent updateWidth={width => this.onWidthChange(width)} />