[MM-60964] Update permissions banner button text and dismiss behaviour (#29134)

webapp/channels/src/actions/global_actions.tsx

@@ -254,6 +254,8 @@ export function emitUserLoggedOutEvent(redirectTo = '/', shouldSignalLogout = tr
             DesktopApp.signalLogout();
         }
 
+        BrowserStore.clearHideNotificationPermissionRequestBanner();
+
         WebsocketActions.close();
 
         clearUserCookie();

webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`NotificationPermissionBar should render the NotificationPermissionNever
         We need your permission to show notifications in the browser.
       </span>
       <button>
-        Enable notifications
+        Manage notification preferences
       </button>
     </div>
     <a

webapp/channels/src/components/announcement_bar/notification_permission_bar/index.test.tsx

@@ -51,7 +51,7 @@ describe('NotificationPermissionBar', () => {
         expect(container).toMatchSnapshot();
 
         expect(screen.getByText('We need your permission to show notifications in the browser.')).toBeInTheDocument();
-        expect(screen.getByText('Enable notifications')).toBeInTheDocument();
+        expect(screen.getByText('Manage notification preferences')).toBeInTheDocument();
     });
 
     test('should call requestNotificationPermission and hide the bar when the button is clicked in NotificationPermissionNeverGrantedBar', async () => {
@@ -64,7 +64,7 @@ describe('NotificationPermissionBar', () => {
         expect(screen.getByText('We need your permission to show notifications in the browser.')).toBeInTheDocument();
 
         await waitFor(async () => {
-            userEvent.click(screen.getByText('Enable notifications'));
+            userEvent.click(screen.getByText('Manage notification preferences'));
         });
 
         expect(utilsNotifications.requestNotificationPermission).toHaveBeenCalled();

webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx

@@ -4,13 +4,15 @@
 import React, {useCallback, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import BrowserStore from 'stores/browser_store';
+
 import AnnouncementBar from 'components/announcement_bar/default_announcement_bar';
 
 import {AnnouncementBarTypes} from 'utils/constants';
 import {requestNotificationPermission} from 'utils/notifications';
 
 export default function NotificationPermissionNeverGrantedBar() {
-    const [show, setShow] = useState(true);
+    const [show, setShow] = useState(!BrowserStore.getHideNotificationPermissionRequestBanner());
 
     const handleClick = useCallback(async () => {
         try {
@@ -25,9 +27,10 @@ export default function NotificationPermissionNeverGrantedBar() {
     }, []);
 
     const handleClose = useCallback(() => {
-        // If the user closes the bar, don't show the notification bar any more for the rest of the session, but
-        // show it again on app refresh.
         setShow(false);
+
+        // Close the bar and don't show it again for the rest of the session.
+        BrowserStore.setHideNotificationPermissionRequestBanner();
     }, []);
 
     if (!show) {
@@ -36,8 +39,6 @@ export default function NotificationPermissionNeverGrantedBar() {
 
     return (
         <AnnouncementBar
-            showCloseButton={true}
-            handleClose={handleClose}
             type={AnnouncementBarTypes.ANNOUNCEMENT}
             message={
                 <FormattedMessage
@@ -48,12 +49,14 @@ export default function NotificationPermissionNeverGrantedBar() {
             ctaText={
                 <FormattedMessage
                     id='announcementBar.notification.permissionNeverGrantedBar.cta'
-                    defaultMessage='Enable notifications'
+                    defaultMessage='Manage notification preferences'
                 />
             }
             showCTA={true}
             showLinkAsButton={true}
             onButtonClick={handleClick}
+            showCloseButton={true}
+            handleClose={handleClose}
         />
     );
 }

webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx

@@ -4,21 +4,24 @@
 import React, {useCallback, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import BrowserStore from 'stores/browser_store';
+
 import AnnouncementBar from 'components/announcement_bar/default_announcement_bar';
 
 import {AnnouncementBarTypes} from 'utils/constants';
 
 export default function UnsupportedNotificationAnnouncementBar() {
-    const [show, setShow] = useState(true);
+    const [show, setShow] = useState(!BrowserStore.getHideNotificationPermissionRequestBanner());
 
     const handleClick = useCallback(async () => {
         window.open('https://mattermost.com/pl/pc-web-requirements', '_blank', 'noopener,noreferrer');
     }, []);
 
     const handleClose = useCallback(() => {
-        // If the user closes the bar, don't show the notification bar any more for the rest of the session, but
-        // show it again on app refresh.
         setShow(false);
+
+        // Close the bar and don't show it again for the rest of the session.
+        BrowserStore.setHideNotificationPermissionRequestBanner();
     }, []);
 
     if (!show) {

webapp/channels/src/i18n/en.json

@@ -2898,7 +2898,7 @@
   "announcement_bar.warn.contact_support_text": "To renew your license, contact support at support@mattermost.com.",
   "announcement_bar.warn.no_internet_connection": "Looks like you do not have access to the internet.",
   "announcement_bar.warn.renew_license_contact_sales": "Contact sales",
-  "announcementBar.notification.permissionNeverGrantedBar.cta": "Enable notifications",
+  "announcementBar.notification.permissionNeverGrantedBar.cta": "Manage notification preferences",
   "announcementBar.notification.permissionNeverGrantedBar.message": "We need your permission to show notifications in the browser.",
   "announcementBar.notification.unsupportedBar.cta": "Update your browser",
   "announcementBar.notification.unsupportedBar.message": "Your browser does not support browser notifications.",

webapp/channels/src/stores/browser_store.tsx

@@ -95,7 +95,20 @@ class BrowserStoreClass {
     clearLandingPreference(siteUrl?: string) {
         localStorage.removeItem(StoragePrefixes.LANDING_PREFERENCE + String(siteUrl));
     }
+
+    getHideNotificationPermissionRequestBanner() {
+        return localStorage.getItem(StoragePrefixes.HIDE_NOTIFICATION_PERMISSION_REQUEST_BANNER) === 'true';
+    }
+
+    setHideNotificationPermissionRequestBanner() {
+        localStorage.setItem(StoragePrefixes.HIDE_NOTIFICATION_PERMISSION_REQUEST_BANNER, 'true');
+    }
+
+    clearHideNotificationPermissionRequestBanner() {
+        localStorage.removeItem(StoragePrefixes.HIDE_NOTIFICATION_PERMISSION_REQUEST_BANNER);
+    }
 }
 
 const BrowserStore = new BrowserStoreClass();
+
 export default BrowserStore;

webapp/channels/src/utils/constants.tsx

@@ -876,6 +876,7 @@ export const StoragePrefixes = {
     INLINE_IMAGE_VISIBLE: 'isInlineImageVisible_',
     DELINQUENCY: 'delinquency_',
     HIDE_JOINED_CHANNELS: 'hideJoinedChannels',
+    HIDE_NOTIFICATION_PERMISSION_REQUEST_BANNER: 'hideNotificationPermissionRequestBanner',
 };
 
 export const LandingPreferenceTypes = {