Added popup notification for newsletter preference toggle

refs https://github.com/TryGhost/Team/issues/1440

ghost/portal/src/AppContext.js

@@ -7,7 +7,9 @@ const AppContext = React.createContext({
     action: '',
     lastPage: '',
     brandColor: '',
-    onAction: () => {}
+    onAction: (action, data) => {
+        return {action, data};
+    }
 });
 
 export default AppContext;

ghost/portal/src/actions.js

@@ -232,6 +232,46 @@ async function clearPopupNotification() {
     };
 }
 
+async function showPopupNotification({data, state}) {
+    let {action, message = ''} = data;
+    action = action || 'showPopupNotification:success';
+    return {
+        popupNotification: createPopupNotification({
+            type: action,
+            autoHide: true,
+            closeable: true,
+            state,
+            status: 'success',
+            message
+        })
+    };
+}
+
+async function updateNewsletterPreference({data, state}) {
+    try {
+        const {newsletter} = data;
+        if (!newsletter) {
+            return {};
+        }
+        await new Promise(r => setTimeout(r, 2000));
+
+        const action = 'updateNewsletterPref:success';
+        return {
+            action,
+            member: state.member
+        };
+    } catch (e) {
+        return {
+            action: 'updateNewsletterPref:failed',
+            popupNotification: createPopupNotification({
+                type: 'updateNewsletter:failed',
+                autoHide: true, closeable: true, state, status: 'error',
+                message: 'Failed to update newsletter settings'
+            })
+        };
+    }
+}
+
 async function updateNewsletter({data, state, api}) {
     try {
         const {subscribed} = data;
@@ -398,7 +438,9 @@ const Actions = {
     refreshMemberData,
     clearPopupNotification,
     editBilling,
-    checkoutPlan
+    checkoutPlan,
+    updateNewsletterPreference,
+    showPopupNotification
 };
 
 /** Handle actions in the App, returns updated state */

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

@@ -21,6 +21,7 @@ function AccountHeader() {
 }
 
 function NewsletterPrefSection({newsletter}) {
+    const {onAction} = useContext(AppContext);
     return (
         <section>
             <div className='gh-portal-list-detail'>
@@ -29,7 +30,11 @@ function NewsletterPrefSection({newsletter}) {
             </div>
             <div>
                 <Switch id={newsletter.id} onToggle={(e) => {
-                    // handle newsletter pref toggle
+                    onAction('showPopupNotification', {
+                        action: 'updated:success',
+                        message: `${newsletter.name} newsletter preference updated.`
+                    });
+                    onAction('updateNewsletterPreference', {newsletter});
                 }} checked={false} />
             </div>
         </section>

ghost/portal/src/utils/helpers.js

@@ -544,7 +544,7 @@ export const formatNumber = (amount) => {
     return amount.toLocaleString();
 };
 
-export const createPopupNotification = ({type, status, autoHide, duration, closeable, state, message, meta = {}}) => {
+export const createPopupNotification = ({type, status, autoHide, duration = 2600, closeable, state, message, meta = {}}) => {
     let count = 0;
     if (state && state.popupNotification) {
         count = (state.popupNotification.count || 0) + 1;