From 43a6b8c1edb32397069cc0d95cc99888ca6b8542 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Mon, 16 May 2022 16:38:19 +0530
Subject: [PATCH] Added notification for default unsubscribed newsletter

refs https://github.com/TryGhost/Team/issues/1495
---
 .../src/components/common/NewsletterManagement.js |  6 ++++++
 .../src/components/pages/UnsubscribePage.js       | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index d876117c80..cf8f12c767 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -110,6 +110,7 @@ function ShowPaidMemberMessage({site, isPaid}) {
 }
 
 export default function NewsletterManagement({
+    notification,
     subscribedNewsletters,
     updateSubscribedNewsletters,
     unsubscribeAll,
@@ -117,10 +118,15 @@ export default function NewsletterManagement({
 }) {
     const isDisabled = !subscribedNewsletters?.length;
     const {brandColor, site} = useContext(AppContext);
+    const EmptyNotification = () => {
+        return null;
+    };
+    const FinalNotification = notification || EmptyNotification;
     return (
         <div className='gh-portal-content with-footer'>
             <CloseButton />
             <AccountHeader />
+            <FinalNotification />
             <div className='gh-portal-section'>
                 <div className='gh-portal-list'>
                     <NewsletterPrefs
diff --git a/ghost/portal/src/components/pages/UnsubscribePage.js b/ghost/portal/src/components/pages/UnsubscribePage.js
index 35347fc527..00a3a8aeba 100644
--- a/ghost/portal/src/components/pages/UnsubscribePage.js
+++ b/ghost/portal/src/components/pages/UnsubscribePage.js
@@ -47,6 +47,7 @@ export default function UnsubscribePage() {
     const defaultNewsletters = siteNewsletters.filter((d) => {
         return d.subscribe_on_signup;
     });
+    const [hasInteracted, setHasInteracted] = useState(false);
     const [subscribedNewsletters, setSubscribedNewsletters] = useState(defaultNewsletters);
     const [showPrefs, setShowPrefs] = useState(false);
 
@@ -115,14 +116,28 @@ export default function UnsubscribePage() {
             </div>
         );
     }
+
+    const HeaderNotification = () => {
+        const unsubscribedNewsletter = siteNewsletters?.find((d) => {
+            return d.uuid === pageData.newsletterUuid;
+        });
+        const hideClassName = hasInteracted ? 'hide' : '';
+        return (
+            <p className={`gh-portal-text-center ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive <strong>{unsubscribedNewsletter?.name}</strong> newsletter.</p>
+        );
+    };
+
     return (
         <NewsletterManagement
+            notification={HeaderNotification}
             subscribedNewsletters={subscribedNewsletters}
             updateSubscribedNewsletters={async (newsletters) => {
                 setSubscribedNewsletters(newsletters);
+                setHasInteracted(true);
                 await api.member.updateNewsletters({uuid: pageData.uuid, newsletters});
             }}
             unsubscribeAll={async () => {
+                setHasInteracted(true);
                 setSubscribedNewsletters([]);
                 onAction('showPopupNotification', {
                     action: 'updated:success',