feat(celo-news): add analytics event when the feed is mounted (#3296)

### Description

Since the Celo News feed is currently displayed in the existing
`ExchangeHomeScreen` screen, it would have been more difficult to
differentiate users having been exposed to it vs the existing CELO
transaction feed.
Hence the dedicated event.

### Test plan

- Updated tests

### Related issues

- Fixes RET-519

### Backwards compatibility

Yes

src/analytics/Events.tsx

@@ -621,6 +621,7 @@ export enum SwapEvents {
 }
 
 export enum CeloNewsEvents {
+  celo_news_screen_open = 'celo_news_screen_open', // When the screen is mounted
   celo_news_article_tap = 'celo_news_article_tap', // When a user taps on a news article
   celo_news_bottom_read_more_tap = 'celo_news_bottom_read_more_tap', // When a user taps on the read more button at the bottom of the screen
   celo_news_retry_tap = 'celo_news_retry_tap', // When a user taps on the retry button

src/analytics/Properties.tsx

@@ -1418,6 +1418,7 @@ interface SwapEventsProperties {
 }
 
 interface CeloNewsEventsProperties {
+  [CeloNewsEvents.celo_news_screen_open]: undefined
   [CeloNewsEvents.celo_news_article_tap]: {
     url: string
   }

src/exchange/CeloNewsFeed.test.tsx

@@ -97,6 +97,8 @@ describe('CeloNewsFeed', () => {
     expect(tree.queryByText('celoNews.loadingError')).toBeFalsy()
     // Check we cannot see the read more button
     expect(tree.queryByText('celoNews.readMoreButtonText')).toBeFalsy()
+    // Check the analytics event is fired
+    expect(ValoraAnalytics.track).toHaveBeenCalledWith(CeloNewsEvents.celo_news_screen_open)
 
     await waitFor(() => expect(mockFetch).toHaveBeenCalledTimes(1))
     expect(mockFetch).toHaveBeenCalledWith(`${networkConfig.cloudFunctionsUrl}/getCeloNewsFeed`)

src/exchange/CeloNewsFeed.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { useAsync } from 'react-async-hook'
 import { useTranslation } from 'react-i18next'
 import { FlatList, ListRenderItemInfo, StyleSheet, Text, View } from 'react-native'
@@ -64,6 +64,10 @@ export default function CeloNewsFeed() {
   const { readMoreUrl } = useSelector(celoNewsConfigSelector)
   const isLoading = asyncArticles.status === 'loading'
 
+  useEffect(() => {
+    ValoraAnalytics.track(CeloNewsEvents.celo_news_screen_open)
+  }, [])
+
   function onPressReadMore() {
     const url = readMoreUrl
     if (!url) {