Merge branch 'dev' into track-banner-once

src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx

@@ -1,10 +1,12 @@
 import 'fake-indexeddb/auto'
 import { hexZeroPad } from 'ethers/lib/utils'
 import * as tracking from '@/services/analytics'
+import { set } from 'idb-keyval'
 import * as navigation from 'next/navigation'
 import type { ChainInfo, SafeInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
 import { PushNotificationsBanner, _getSafesToRegister } from '.'
+import { createPushNotificationPrefsIndexedDb } from '@/services/push-notifications/preferences'
 import { render } from '@/tests/test-utils'
 import type { AddedSafesOnChain } from '@/store/addedSafesSlice'
 import type { PushNotificationPreferences } from '@/services/push-notifications/preferences'
@@ -140,5 +142,220 @@ describe('PushNotificationsBanner', () => {
 
       expect(tracking.trackEvent).toHaveBeenCalledTimes(1)
     })
+    it('should display the banner', () => {
+      const result = render(
+        <PushNotificationsBanner>
+          <></>
+        </PushNotificationsBanner>,
+        {
+          routerProps: {
+            query: {
+              safe: `eth:${hexZeroPad('0x123', 20)}`,
+            },
+          },
+          initialReduxState: {
+            chains: {
+              loading: false,
+              error: undefined,
+              data: [
+                {
+                  chainId: '1',
+                  features: ['PUSH_NOTIFICATIONS'],
+                } as unknown as ChainInfo,
+              ],
+            },
+            addedSafes: {
+              '1': {
+                [hexZeroPad('0x123', 20)]: {},
+              } as unknown as AddedSafesOnChain,
+            },
+            safeInfo: {
+              loading: false,
+              error: undefined,
+              data: {
+                chainId: '1',
+                address: {
+                  value: hexZeroPad('0x123', 20),
+                },
+              } as unknown as SafeInfo,
+            },
+          },
+        },
+      )
+
+      expect(result.getByText('Get notified about pending signatures', { exact: false })).toBeInTheDocument()
+    })
+
+    it('should not show the banner if notifications are not enabled', () => {
+      const result = render(
+        <PushNotificationsBanner>
+          <></>
+        </PushNotificationsBanner>,
+        {
+          routerProps: {
+            query: {
+              safe: `eth:${hexZeroPad('0x123', 20)}`,
+            },
+          },
+          initialReduxState: {
+            chains: {
+              loading: false,
+              error: undefined,
+              data: [
+                {
+                  chainId: '1',
+                  features: [], // Not enabled
+                } as unknown as ChainInfo,
+              ],
+            },
+            addedSafes: {
+              '1': {
+                [hexZeroPad('0x123', 20)]: {},
+              } as unknown as AddedSafesOnChain,
+            },
+            safeInfo: {
+              loading: false,
+              error: undefined,
+              data: {
+                chainId: '1',
+                address: {
+                  value: hexZeroPad('0x123', 20),
+                },
+              } as unknown as SafeInfo,
+            },
+          },
+        },
+      )
+
+      expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
+    })
+
+    it('should not show the banner if the user has dismissed it', () => {
+      window.localStorage.setItem(
+        'SAFE_v2__dismissPushNotifications',
+        JSON.stringify({ '1': { [hexZeroPad('0x123', 20)]: true } }),
+      )
+
+      const result = render(
+        <PushNotificationsBanner>
+          <></>
+        </PushNotificationsBanner>,
+        {
+          initialReduxState: {
+            chains: {
+              loading: false,
+              error: undefined,
+              data: [
+                {
+                  chainId: '1',
+                  features: ['PUSH_NOTIFICATIONS'],
+                } as unknown as ChainInfo,
+              ],
+            },
+            addedSafes: {
+              '1': {
+                [hexZeroPad('0x123', 20)]: {},
+              } as unknown as AddedSafesOnChain,
+            },
+            safeInfo: {
+              loading: false,
+              error: undefined,
+              data: {
+                chainId: '1',
+                address: {
+                  value: hexZeroPad('0x123', 20),
+                },
+              } as unknown as SafeInfo,
+            },
+          },
+        },
+      )
+
+      expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
+    })
+
+    it('should not show the banner if the Safe is not added', () => {
+      const result = render(
+        <PushNotificationsBanner>
+          <></>
+        </PushNotificationsBanner>,
+        {
+          initialReduxState: {
+            chains: {
+              loading: false,
+              error: undefined,
+              data: [
+                {
+                  chainId: '1',
+                  features: ['PUSH_NOTIFICATIONS'],
+                } as unknown as ChainInfo,
+              ],
+            },
+            addedSafes: {}, // Not added
+            safeInfo: {
+              loading: false,
+              error: undefined,
+              data: {
+                chainId: '1',
+                address: {
+                  value: hexZeroPad('0x123', 20),
+                },
+              } as unknown as SafeInfo,
+            },
+          },
+        },
+      )
+
+      expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
+    })
+
+    it('should not show the banner if the user has already registered for notifications', () => {
+      set(
+        `1:${hexZeroPad('0x123', 20)}`, // Registered
+        {
+          safeAddress: hexZeroPad('0x123', 20),
+          chainId: '1',
+          preferences: {},
+        },
+        createPushNotificationPrefsIndexedDb(),
+      )
+
+      const result = render(
+        <PushNotificationsBanner>
+          <></>
+        </PushNotificationsBanner>,
+        {
+          initialReduxState: {
+            chains: {
+              loading: false,
+              error: undefined,
+              data: [
+                {
+                  chainId: '1',
+                  features: ['PUSH_NOTIFICATIONS'],
+                } as unknown as ChainInfo,
+              ],
+            },
+            addedSafes: {
+              '1': {
+                [hexZeroPad('0x123', 20)]: {},
+              } as unknown as AddedSafesOnChain,
+            },
+            safeInfo: {
+              loading: false,
+              error: undefined,
+              data: {
+                chainId: '1',
+                address: {
+                  value: hexZeroPad('0x123', 20),
+                },
+              } as unknown as SafeInfo,
+            },
+          },
+        },
+      )
+
+      expect(result.queryByText('Get notified about pending signatures', { exact: false })).not.toBeInTheDocument()
+    })
   })
 })

src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx

@@ -102,21 +102,23 @@ const TrackBanner = (): null => {
 }
 
 export const PushNotificationsBanner = ({ children }: { children: ReactElement }): ReactElement => {
-  const isNotificationsEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
   const chain = useCurrentChain()
   const totalAddedSafes = useAppSelector(selectTotalAdded)
   const { safe, safeAddress } = useSafeInfo()
   const addedSafesOnChain = useAppSelector((state) => selectAddedSafes(state, safe.chainId))
   const { query } = useRouter()
   const onboard = useOnboard()
 
+  const { getPreferences, getAllPreferences } = useNotificationPreferences()
   const { dismissPushNotificationBanner, isPushNotificationBannerDismissed } = useDismissPushNotificationsBanner()
 
   const isSafeAdded = !!addedSafesOnChain?.[safeAddress]
-  const shouldShowBanner = isNotificationsEnabled && !isPushNotificationBannerDismissed && isSafeAdded
+  const isSafeRegistered = getPreferences(safe.chainId, safeAddress)
+  const shouldShowBanner =
+    isNotificationFeatureEnabled && !isPushNotificationBannerDismissed && isSafeAdded && !isSafeRegistered
 
   const { registerNotifications } = useNotificationRegistrations()
-  const { getAllPreferences } = useNotificationPreferences()
 
   const dismissBanner = useCallback(() => {
     trackEvent(PUSH_NOTIFICATION_EVENTS.DISMISS_BANNER)

src/components/settings/PushNotifications/hooks/useNotificationTracking.ts

@@ -70,11 +70,11 @@ const handleTrackCachedNotificationEvents = async (
 }
 
 export const useNotificationTracking = (): void => {
-  const isNotificationsEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
 
   useEffect(() => {
-    if (typeof indexedDB !== 'undefined' && isNotificationsEnabled) {
+    if (typeof indexedDB !== 'undefined' && isNotificationFeatureEnabled) {
       handleTrackCachedNotificationEvents(createNotificationTrackingIndexedDb())
     }
-  }, [isNotificationsEnabled])
+  }, [isNotificationFeatureEnabled])
 }

src/components/settings/SettingsHeader/index.tsx

@@ -11,10 +11,10 @@ import { FEATURES } from '@/utils/chains'
 
 const SettingsHeader = (): ReactElement => {
   const safeAddress = useSafeAddress()
-  const isNotificationsEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
 
   const navItems = safeAddress ? settingsNavItems : generalSettingsNavItems
-  const filteredNavItems = isNotificationsEnabled
+  const filteredNavItems = isNotificationFeatureEnabled
     ? navItems
     : navItems.filter((item) => item.href !== AppRoutes.settings.notifications)
 

src/hooks/Beamer/useBeamer.ts

@@ -4,15 +4,12 @@ import { useAppSelector } from '@/store'
 import { CookieType, selectCookies } from '@/store/cookiesSlice'
 import { loadBeamer, unloadBeamer, updateBeamer } from '@/services/beamer'
 import { useCurrentChain } from '@/hooks/useChains'
-import { useBeamerNps } from '@/hooks/Beamer/useBeamerNps'
 
 const useBeamer = () => {
   const cookies = useAppSelector(selectCookies)
   const isBeamerEnabled = cookies[CookieType.UPDATES]
   const chain = useCurrentChain()
 
-  useBeamerNps()
-
   useEffect(() => {
     if (!chain?.shortName) {
       return

src/pages/settings/notifications.tsx

@@ -7,9 +7,9 @@ import { useHasFeature } from '@/hooks/useChains'
 import { FEATURES } from '@/utils/chains'
 
 const NotificationsPage: NextPage = () => {
-  const isNotificationsEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
+  const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS)
 
-  if (!isNotificationsEnabled) {
+  if (!isNotificationFeatureEnabled) {
     return null
   }