From f283425866b7cba84ad3016649a7f3d5b224a937 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Mon, 15 Aug 2022 11:26:57 +0200
Subject: [PATCH] Added unsubscribe flow for comments (#255)

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

- Added `comments` query param to unsubscribe from comments
- Fixed unsubscribe all not updating comments button in unsubscribe flow
---
 ghost/portal/src/App.js                       |  3 +-
 .../src/components/pages/UnsubscribePage.js   | 32 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/ghost/portal/src/App.js b/ghost/portal/src/App.js
index abc2b59b45..9b1bc15ce0 100644
--- a/ghost/portal/src/App.js
+++ b/ghost/portal/src/App.js
@@ -400,7 +400,8 @@ export default class App extends React.Component {
                 page: 'unsubscribe',
                 pageData: {
                     uuid: qParams.get('uuid'),
-                    newsletterUuid: qParams.get('newsletter')
+                    newsletterUuid: qParams.get('newsletter'),
+                    comments: qParams.get('comments')
                 }
             };
         }
diff --git a/ghost/portal/src/components/pages/UnsubscribePage.js b/ghost/portal/src/components/pages/UnsubscribePage.js
index c59aadb194..11bf664770 100644
--- a/ghost/portal/src/components/pages/UnsubscribePage.js
+++ b/ghost/portal/src/components/pages/UnsubscribePage.js
@@ -31,9 +31,9 @@ function AccountHeader() {
     );
 }
 
-async function updateMemberNewsletters({api, memberUuid, newsletters}) {
+async function updateMemberNewsletters({api, memberUuid, newsletters, enableCommentNotifications}) {
     try {
-        return await api.member.updateNewsletters({uuid: memberUuid, newsletters});
+        return await api.member.updateNewsletters({uuid: memberUuid, newsletters, enableCommentNotifications});
     } catch (e) {
         // ignore auto unsubscribe error
     }
@@ -61,7 +61,8 @@ export default function UnsubscribePage() {
             setMember(memberData);
             const memberNewsletters = memberData?.newsletters || [];
             setSubscribedNewsletters(memberNewsletters);
-            if (siteNewsletters?.length === 1) {
+            if (siteNewsletters?.length === 1 && !commentsEnabled) {
+                // Unsubscribe from all the newsletters, because we only have one
                 const updatedData = await updateMemberNewsletters({
                     api: ghostApi,
                     memberUuid: pageData.uuid,
@@ -69,6 +70,7 @@ export default function UnsubscribePage() {
                 });
                 setSubscribedNewsletters(updatedData.newsletters);
             } else if (pageData.newsletterUuid) {
+                // Unsubscribe link for a specific newsletter
                 const updatedData = await updateMemberNewsletters({
                     api: ghostApi,
                     memberUuid: pageData.uuid,
@@ -77,9 +79,18 @@ export default function UnsubscribePage() {
                     })
                 });
                 setSubscribedNewsletters(updatedData.newsletters);
+            } else if (pageData.comments && commentsEnabled) {
+                // Unsubscribe link for comments
+                const updatedData = await updateMemberNewsletters({
+                    api: ghostApi,
+                    memberUuid: pageData.uuid,
+                    enableCommentNotifications: false
+                });
+
+                setMember(updatedData);
             }
         })();
-    }, [pageData.uuid, pageData.newsletterUuid, site.url, siteNewsletters?.length]);
+    }, [commentsEnabled, pageData.uuid, pageData.newsletterUuid, pageData.comments, site.url, siteNewsletters?.length]);
 
     // Case: Email not found
     if (member === null) {
@@ -96,7 +107,7 @@ export default function UnsubscribePage() {
     }
 
     // Case: Single active newsletter
-    if (siteNewsletters?.length === 1 && !showPrefs) {
+    if (siteNewsletters?.length === 1 && !commentsEnabled && !showPrefs) {
         return (
             <div className='gh-portal-content gh-portal-unsubscribe with-footer'>
                 <CloseButton />
@@ -120,6 +131,14 @@ export default function UnsubscribePage() {
     }
 
     const HeaderNotification = () => {
+        if (pageData.comments && commentsEnabled) {
+            const hideClassName = hasInteracted ? 'gh-portal-hide' : '';
+            return (
+                <>
+                    <p className={`gh-portal-text-center gh-portal-header-message ${hideClassName}`}><strong>{member?.email}</strong> will no longer receive emails when someone replies to your comments.</p>
+                </>
+            );
+        }
         const unsubscribedNewsletter = siteNewsletters?.find((d) => {
             return d.uuid === pageData.newsletterUuid;
         });
@@ -151,7 +170,8 @@ export default function UnsubscribePage() {
                     action: 'updated:success',
                     message: `Email preference updated.`
                 });
-                await api.member.updateNewsletters({uuid: pageData.uuid, newsletters: [], enableCommentNotifications: false});
+                const updatedMember = await api.member.updateNewsletters({uuid: pageData.uuid, newsletters: [], enableCommentNotifications: false});
+                setMember(updatedMember);
             }}
             isPaidMember={member?.status !== 'free'}
             isCommentsEnabled={commentsEnabled !== 'off'}