fix: don't show banner if preferences exist (#2596)

* fix: don't show banner if preferences exist

* fix: rename notification feature variables

* fix: add tests

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

@@ -0,0 +1,310 @@
+import 'fake-indexeddb/auto'
+import { set } from 'idb-keyval'
+import { hexZeroPad } from 'ethers/lib/utils'
+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'
+
+Object.defineProperty(globalThis, 'crypto', {
+  value: {
+    randomUUID: () => Math.random().toString(),
+  },
+})
+
+describe('PushNotificationsBanner', () => {
+  describe('getSafesToRegister', () => {
+    it('should return all added safes if no preferences exist', () => {
+      const addedSafesOnChain = {
+        '0x123': {},
+        '0x456': {},
+      } as unknown as AddedSafesOnChain
+      const allPreferences = undefined
+
+      const result = _getSafesToRegister('1', addedSafesOnChain, allPreferences)
+
+      expect(result).toEqual({
+        '1': ['0x123', '0x456'],
+      })
+    })
+
+    it('should return only newly added safes if preferences exist', () => {
+      const addedSafesOnChain = {
+        '0x123': {},
+        '0x456': {},
+      } as unknown as AddedSafesOnChain
+      const allPreferences = {
+        '1:0x123': {
+          safeAddress: '0x123',
+          chainId: '1',
+        },
+        '4:0x789': {
+          safeAddress: '0x789',
+          chainId: '4',
+        },
+      } as unknown as PushNotificationPreferences
+
+      const result = _getSafesToRegister('1', addedSafesOnChain, allPreferences)
+
+      expect(result).toEqual({
+        '1': ['0x456'],
+      })
+    })
+
+    it('should return all added safes if no preferences match', () => {
+      const addedSafesOnChain = {
+        '0x123': {},
+        '0x456': {},
+      } as unknown as AddedSafesOnChain
+      const allPreferences = {
+        '1:0x111': {
+          safeAddress: '0x111',
+          chainId: '1',
+        },
+        '4:0x222': {
+          safeAddress: '0x222',
+          chainId: '4',
+        },
+      } as unknown as PushNotificationPreferences
+
+      const result = _getSafesToRegister('1', addedSafesOnChain, allPreferences)
+
+      expect(result).toEqual({
+        '1': ['0x123', '0x456'],
+      })
+    })
+  })
+
+  describe('PushNotificationsBanner', () => {
+    beforeEach(() => {
+      // Reset indexedDB
+      indexedDB = new IDBFactory()
+
+      window.localStorage.clear()
+
+      jest.spyOn(navigation, 'useParams').mockReturnValue({
+        safe: `eth:${hexZeroPad('0x123', 20)}`,
+      })
+    })
+
+    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()
+    })
+  })
+})