diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx index 2ed0aa6aa..26f9c6a95 100644 --- a/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx +++ b/src/components/settings/PushNotifications/PushNotificationsBanner/PushNotificationsBanner.test.tsx @@ -1,6 +1,7 @@ import 'fake-indexeddb/auto' -import { set } from 'idb-keyval' 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' @@ -91,6 +92,56 @@ describe('PushNotificationsBanner', () => { }) }) + it('should only track display of the banner once', () => { + jest.spyOn(tracking, 'trackEvent') + + const ui = ( + + <> + + ) + + const result = render(ui, { + 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(tracking.trackEvent).toHaveBeenCalledTimes(1) + + result.rerender(ui) + + expect(tracking.trackEvent).toHaveBeenCalledTimes(1) + }) it('should display the banner', () => { const result = render( diff --git a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx index 5627acd45..baa7df4ad 100644 --- a/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx +++ b/src/components/settings/PushNotifications/PushNotificationsBanner/index.tsx @@ -1,7 +1,7 @@ import { Button, Chip, Grid, SvgIcon, Typography, IconButton } from '@mui/material' import Link from 'next/link' import { useRouter } from 'next/router' -import { useCallback, useEffect } from 'react' +import { useCallback, useEffect, useRef } from 'react' import type { ReactElement } from 'react' import { CustomTooltip } from '@/components/common/CustomTooltip' @@ -86,6 +86,21 @@ export const _getSafesToRegister = ( return { [chainId]: newlyAddedSafes } } +const TrackBanner = (): null => { + const hasTracked = useRef(false) + + useEffect(() => { + if (hasTracked.current) { + return + } + + trackEvent(PUSH_NOTIFICATION_EVENTS.SHOW_BANNER) + hasTracked.current = true + }, []) + + return null +} + export const PushNotificationsBanner = ({ children }: { children: ReactElement }): ReactElement => { const isNotificationFeatureEnabled = useHasFeature(FEATURES.PUSH_NOTIFICATIONS) const chain = useCurrentChain() @@ -110,12 +125,6 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement } dismissPushNotificationBanner(safe.chainId) }, [dismissPushNotificationBanner, safe.chainId]) - useEffect(() => { - if (shouldShowBanner) { - trackEvent(PUSH_NOTIFICATION_EVENTS.DISPLAY_BANNER) - } - }, [dismissBanner, shouldShowBanner]) - const onEnableAll = async () => { if (!onboard || !addedSafesOnChain) { return @@ -148,57 +157,60 @@ export const PushNotificationsBanner = ({ children }: { children: ReactElement } } return ( - - - - - - - - Enable push notifications - - - - - - Get notified about pending signatures, incoming and outgoing transactions for all Safe Accounts on{' '} - {chain?.chainName} when Safe - {`{Wallet}`} is in the background or closed. - - {/* Cannot wrap singular button as it causes style inconsistencies */} - - {(isOk) => ( -
- {totalAddedSafes > 0 && ( - - )} - {safe && ( - - - - )} -
- )} -
+ )} + {safe && ( + + + + )} + + )} + +
- - } - open - > - {children} -
+ } + open + > + {children} + + ) } diff --git a/src/services/analytics/events/push-notifications.ts b/src/services/analytics/events/push-notifications.ts index 08e6a89a3..344a98f4e 100644 --- a/src/services/analytics/events/push-notifications.ts +++ b/src/services/analytics/events/push-notifications.ts @@ -26,9 +26,9 @@ export const PUSH_NOTIFICATION_EVENTS = { action: 'Unregister device notifications', category, }, - // Notification banner displayed - DISPLAY_BANNER: { - action: 'Display notification banner', + // Notification banner shown + SHOW_BANNER: { + action: 'Show notification banner', category, }, // User dismissed notfication banner