diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx index 6ea40fb386..4d8a2ffb19 100644 --- a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx +++ b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx @@ -7,7 +7,7 @@ import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-s import { PushNotificationsBanner, _getSafesToRegister } from '.' import { createPushNotificationPrefsIndexedDb } from '@/services/push-notifications/preferences' -import { render } from '@/tests/test-utils' +import { act, render } from '@/tests/test-utils' import type { AddedSafesOnChain } from '@/store/addedSafesSlice' import type { PushNotificationPreferences } from '@/services/push-notifications/preferences' import * as useWallet from '@/hooks/wallets/useWallet' @@ -28,6 +28,10 @@ jest.spyOn(useWallet, 'default').mockImplementation(() => ({ })) describe('PushNotificationsBanner', () => { + beforeAll(() => { + jest.useFakeTimers() + }) + describe('getSafesToRegister', () => { it('should return all added safes if no preferences exist', () => { const addedSafesOnChain = { @@ -152,6 +156,7 @@ describe('PushNotificationsBanner', () => { expect(tracking.trackEvent).toHaveBeenCalledTimes(1) }) + it('should display the banner', () => { const result = render( @@ -193,6 +198,8 @@ describe('PushNotificationsBanner', () => { }, ) + jest.advanceTimersByTime(3000) + expect(result.getByText('Get notified about pending signatures', { exact: false })).toBeInTheDocument() }) @@ -240,7 +247,7 @@ describe('PushNotificationsBanner', () => { expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument() }) - it('should not show the banner if the user has dismissed it', () => { + it('should not show the banner if the user has dismissed it', async () => { window.localStorage.setItem( 'SAFE_v2__dismissPushNotifications', JSON.stringify({ '1': { [hexZeroPad('0x123', 20)]: true } }), @@ -281,6 +288,11 @@ describe('PushNotificationsBanner', () => { }, ) + await act(() => { + jest.advanceTimersByTime(3000) + return Promise.resolve() + }) + expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument() }) diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx index 9bf3c4cff8..0380e3e5d6 100644 --- a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx +++ b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx @@ -27,10 +27,11 @@ import type { PushNotificationPreferences } from '@/services/push-notifications/ import type { NotifiableSafes } from '../logic' import useWallet from '@/hooks/wallets/useWallet' import CircularProgress from '@mui/material/CircularProgress' - +import useDebounce from '@/hooks/useDebounce' import css from './styles.module.css' const DISMISS_PUSH_NOTIFICATIONS_KEY = 'dismissPushNotifications' +const BANNER_DELAY = 3000 export const useDismissPushNotificationsBanner = () => { const addedSafes = useAppSelector(selectAllAddedSafes) @@ -119,8 +120,10 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement } const isSafeAdded = !!addedSafesOnChain?.[safeAddress] const isSafeRegistered = getPreferences(safe.chainId, safeAddress) - const shouldShowBanner = - isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered && !!wallet + const shouldShowBanner = useDebounce( + isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered && !!wallet, + BANNER_DELAY, + ) const { registerNotifications } = useNotificationRegistrations() @@ -164,7 +167,7 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement } dismissBanner() } - if (!shouldShowBanner) { + if (!shouldShowBanner || isPushNotificationBannerDismissed) { return children }