diff --git a/webapp/channels/src/actions/global_actions.tsx b/webapp/channels/src/actions/global_actions.tsx index 45165c64f0..90f055cdd7 100644 --- a/webapp/channels/src/actions/global_actions.tsx +++ b/webapp/channels/src/actions/global_actions.tsx @@ -254,6 +254,8 @@ export function emitUserLoggedOutEvent(redirectTo = '/', shouldSignalLogout = tr DesktopApp.signalLogout(); } + BrowserStore.clearHideNotificationPermissionRequestBanner(); + WebsocketActions.close(); clearUserCookie(); diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap index 4295d195db..1724b7476c 100644 --- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/__snapshots__/index.test.tsx.snap +++ b/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. { 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(); diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx index 913882e06b..5a34d7fad0 100644 --- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_never_granted_bar.tsx +++ b/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 ( } showCTA={true} showLinkAsButton={true} onButtonClick={handleClick} + showCloseButton={true} + handleClose={handleClose} /> ); } diff --git a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx b/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx index 0caefa8395..4108a2d72c 100644 --- a/webapp/channels/src/components/announcement_bar/notification_permission_bar/notification_permission_unsupported_bar.tsx +++ b/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) { diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json index 7eaa0d0a1c..706be1a116 100644 --- a/webapp/channels/src/i18n/en.json +++ b/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.", diff --git a/webapp/channels/src/stores/browser_store.tsx b/webapp/channels/src/stores/browser_store.tsx index 513df43f27..11589a7d33 100644 --- a/webapp/channels/src/stores/browser_store.tsx +++ b/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; diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx index d4b5be7c79..a3dbd8fe73 100644 --- a/webapp/channels/src/utils/constants.tsx +++ b/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 = {