From e9a282ee4360bbef5f5ea4698111695af21f13d1 Mon Sep 17 00:00:00 2001
From: Rishabh <zrishabhgarg@gmail.com>
Date: Fri, 6 May 2022 18:59:05 +0530
Subject: [PATCH] Refined newsletter preference update UI

refs https://github.com/TryGhost/Team/issues/1559
---
 .../components/common/NewsletterManagement.js | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/ghost/portal/src/components/common/NewsletterManagement.js b/ghost/portal/src/components/common/NewsletterManagement.js
index af35d4e2ef..dcac959a93 100644
--- a/ghost/portal/src/components/common/NewsletterManagement.js
+++ b/ghost/portal/src/components/common/NewsletterManagement.js
@@ -20,43 +20,52 @@ function AccountHeader() {
     );
 }
 
+function SuccessIcon({show}) {
+    if (!show) {
+        return null;
+    }
+    return (
+        <div style={{marginRight: '4px'}}>
+            ✅
+        </div>
+    );
+}
+
 function NewsletterPrefSection({newsletter, subscribedNewsletters, setSubscribedNewsletters}) {
     const isChecked = subscribedNewsletters.some((d) => {
         return d.id === newsletter?.id;
     });
-    const [description, setDescription] = useState(newsletter?.description || '');
+
+    const [showUpdated, setShowUpdated] = useState(false);
     const [timeoutId, setTimeoutId] = useState(null);
-    let finalDescription = description;
-    if (!description) {
-        finalDescription = isChecked ? 'Subscribed' : 'Unsubscribed';
-    }
     return (
         <section className='gh-portal-list-toggle-wrapper'>
             <div className='gh-portal-list-detail'>
                 <h3>{newsletter.name}</h3>
-                <p>{finalDescription}</p>
+                <p>{newsletter?.description}</p>
             </div>
-            <div>
+            <div style={{display: 'flex', alignItems: 'center'}}>
+                <SuccessIcon show={showUpdated} />
                 <Switch id={newsletter.id} onToggle={(e, checked) => {
                     let updatedNewsletters = [];
                     if (!checked) {
                         updatedNewsletters = subscribedNewsletters.filter((d) => {
                             return d.id !== newsletter.id;
                         });
-                        setDescription('Unsubscribed');
+                        setShowUpdated(true);
                         clearTimeout(timeoutId);
                         let newTimeoutId = setTimeout(() => {
-                            setDescription(newsletter?.description);
+                            setShowUpdated(false);
                         }, 3000);
                         setTimeoutId(newTimeoutId);
                     } else {
                         updatedNewsletters = subscribedNewsletters.filter((d) => {
                             return d.id !== newsletter.id;
                         }).concat(newsletter);
-                        setDescription('Subscribed');
+                        setShowUpdated(true);
                         clearTimeout(timeoutId);
                         let newTimeoutId = setTimeout(() => {
-                            setDescription(newsletter?.description);
+                            setShowUpdated(false);
                         }, 3000);
                         setTimeoutId(newTimeoutId);
                     }