(PC-34158) feat(remoteBanner): get remoteBanner from firestore (#7601)

* Replace ForceUpdateBanner by RemoteBanner, get data from Firestore (+cheatcodes)

* Rename FF showForceUpdateBanner to showRemoteBanner

* Removed fallback values

* Added subtitle web variant

* Added error display to cheatcodes if input is wrong

* Allowed setFF to take options for each FF

* Added sentry when validation error

* Added analytics

* Story for RemoteBanner

* Extracted Dumb remotebanner for storybook

* Removed snapshots from RemoteBanner

* Added a test for analytics and for sentry

* Update dead code

* Renamed all showForceUpdateBanner

* Comment + sonar code smells

* Revert "Extracted Dumb remotebanner for storybook"

This reverts commit 2c19f42.

* Revert "Update dead code"

This reverts commit a4aec9b.

* Renamed HasClickedBanner to HasClickedRemoteBanner as asked in ticket

* Revert "Renamed HasClickedBanner to HasClickedRemoteBanner as asked in ticket"

This reverts commit 85592e0.

* Removed story

__snapshots__/features/home/pages/Home.native.test.tsx.native-snap

@@ -373,7 +373,7 @@ exports[`Home page should render correctly 1`] = `
                       {
                         "busy": undefined,
                         "checked": undefined,
-                        "disabled": undefined,
+                        "disabled": false,
                         "expanded": undefined,
                         "selected": undefined,
                       }

__snapshots__/features/profile/pages/Profile.native.test.tsx.native-snap

@@ -1765,7 +1765,7 @@ exports[`Profile component should render correctly 1`] = `
                   {
                     "busy": undefined,
                     "checked": undefined,
-                    "disabled": undefined,
+                    "disabled": false,
                     "expanded": undefined,
                     "selected": undefined,
                   }

src/cheatcodes/pages/CheatcodesMenu.tsx

@@ -54,6 +54,7 @@ export function CheatcodesMenu(): React.JSX.Element {
     ...cheatcodesNavigationTutorialButtons,
     ...cheatcodesNavigationForceUpdateButtons,
     { title: 'Share 🔗', screen: 'CheatcodesNavigationShare', subscreens: [] },
+    { title: 'RemoteBanner 🆒', screen: 'CheatcodesScreenRemoteBanner', subscreens: [] },
   ]
 
   const otherButtons: CheatcodesButtonsWithSubscreensProps[] = [

src/cheatcodes/pages/features/remoteBanner/CheatcodesScreenRemoteBanner.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react'
+
+import { CheatcodesTemplateScreen } from 'cheatcodes/components/CheatcodesTemplateScreen'
+import { RemoteBanner } from 'features/remoteBanner/components/RemoteBanner'
+import { remoteBannerSchema } from 'features/remoteBanner/components/remoteBannerSchema'
+import { useFeatureFlagOptions } from 'libs/firebase/firestore/featureFlags/useFeatureFlagOptions'
+import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
+import { ErrorBanner } from 'ui/components/banners/ErrorBanner'
+import { ViewGap } from 'ui/components/ViewGap/ViewGap'
+import { getSpacing } from 'ui/theme'
+
+export const CheatcodesScreenRemoteBanner = () => {
+  const { options } = useFeatureFlagOptions(RemoteStoreFeatureFlags.SHOW_REMOTE_BANNER)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    try {
+      remoteBannerSchema.validateSync(options)
+    } catch (error) {
+      setError(String(error))
+    }
+  }, [options])
+
+  return (
+    <CheatcodesTemplateScreen title="RemoteBanner 🆒" flexDirection="column">
+      <ViewGap gap={getSpacing(3)}>
+        <RemoteBanner from="Cheatcodes" />
+        {error ? (
+          <ErrorBanner
+            message={`La bannière ne s‘affichera pas à cause de l’erreur suivante:\n${error}`}
+          />
+        ) : null}
+      </ViewGap>
+    </CheatcodesTemplateScreen>
+  )
+}

src/features/forceUpdate/constants.ts

@@ -23,11 +23,6 @@ export const DESCRIPTION = Platform.select({
   Pour des questions de performance et de sécurité merci d’actualiser la page pour obtenir la dernière version disponible.`,
 })
 
-export const BUTTON_TEXT_BANNER = Platform.select({
-  default: 'Télécharger la dernière version de l’application',
-  web: 'Actualiser la page',
-})
-
 export const BUTTON_TEXT_SCREEN = Platform.select({
   default: 'Télécharger la dernière version',
   web: 'Actualiser la page',

src/features/home/components/modules/banners/HomeBanner.native.test.tsx

@@ -26,26 +26,46 @@ const mockUseGeolocation = jest.mocked(useLocation)
 jest.mock('shared/user/useGetDepositAmountsByAge')
 const mockDepositAmounts = jest.mocked(useGetDepositAmountsByAge)
 
+jest.mock('@react-native-firebase/firestore')
+
+jest.useFakeTimers()
+
 describe('<HomeBanner/>', () => {
   beforeEach(() => {
     setFeatureFlags()
   })
 
-  it('should display force update banner when feature flag showForceUpdateBanner is enable', async () => {
-    setFeatureFlags([RemoteStoreFeatureFlags.SHOW_FORCE_UPDATE_BANNER])
-    mockSubscriptionStepper()
-    mockBannerFromBackend({
-      banner: {
-        name: BannerName.retry_identity_check_banner,
-        title: 'Retente ubble',
-        text: 'pour débloquer ton crédit',
-      },
+  describe('when feature flag showRemoteBanner is enable', () => {
+    beforeEach(() => {
+      setFeatureFlags([
+        {
+          featureFlag: RemoteStoreFeatureFlags.SHOW_REMOTE_BANNER,
+          options: {
+            title: 'title 1',
+            subtitleMobile: 'subtitleMobile 1',
+            subtitleWeb: 'subtitleWeb 1',
+            redirectionUrl: 'https://www.test.fr',
+            redirectionType: 'store',
+          },
+        },
+      ])
     })
 
-    renderHomeBanner({})
-    await act(async () => {})
+    it('should display force update banner', async () => {
+      mockSubscriptionStepper()
+      mockBannerFromBackend({
+        banner: {
+          name: BannerName.retry_identity_check_banner,
+          title: 'Retente ubble',
+          text: 'pour débloquer ton crédit',
+        },
+      })
+      renderHomeBanner({})
 
-    expect(screen.getByText('Mise à jour requise !')).toBeOnTheScreen()
+      const banner = await screen.findByText('title 1')
+
+      expect(banner).toBeOnTheScreen()
+    })
   })
 
   describe('When wipAppV2SystemBlock feature flag deactivated', () => {
@@ -124,7 +144,7 @@ describe('<HomeBanner/>', () => {
   })
 
   describe('When wipAppV2SystemBlock feature flag activated', () => {
-    beforeAll(() => {
+    beforeEach(() => {
       setFeatureFlags([RemoteStoreFeatureFlags.WIP_APP_V2_SYSTEM_BLOCK])
     })
 

src/features/home/components/modules/banners/HomeBanner.tsx

@@ -3,11 +3,11 @@ import React, { ComponentType, FunctionComponent, useCallback, useMemo } from 'r
 import styled from 'styled-components/native'
 
 import { BannerName } from 'api/gen'
-import { ForceUpdateBanner } from 'features/forceUpdate/components/ForceUpdateBanner'
 import { useActivationBanner } from 'features/home/api/useActivationBanner'
 import { ActivationBanner } from 'features/home/components/banners/ActivationBanner'
 import { SignupBanner } from 'features/home/components/banners/SignupBanner'
 import { StepperOrigin, UseNavigationType } from 'features/navigation/RootNavigator/types'
+import { RemoteBanner } from 'features/remoteBanner/components/RemoteBanner'
 import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
 import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
 import { SystemBanner as GenericSystemBanner } from 'ui/components/ModuleBanner/SystemBanner'
@@ -54,7 +54,7 @@ const bannersToRender = [
 ]
 
 export const HomeBanner = ({ isLoggedIn }: HomeBannerProps) => {
-  const showForceUpdateBanner = useFeatureFlag(RemoteStoreFeatureFlags.SHOW_FORCE_UPDATE_BANNER)
+  const showRemoteBanner = useFeatureFlag(RemoteStoreFeatureFlags.SHOW_REMOTE_BANNER)
   const { banner } = useActivationBanner()
   const { navigate } = useNavigation<UseNavigationType>()
   const enableSystemBanner = useFeatureFlag(RemoteStoreFeatureFlags.WIP_APP_V2_SYSTEM_BLOCK)
@@ -138,10 +138,10 @@ export const HomeBanner = ({ isLoggedIn }: HomeBannerProps) => {
     return null
   }, [isLoggedIn, shouldRenderSystemBanner, renderSystemBanner, banner, enableSystemBanner])
 
-  if (showForceUpdateBanner) {
+  if (showRemoteBanner) {
     return (
       <BannerContainer>
-        <ForceUpdateBanner />
+        <RemoteBanner from="Home" />
       </BannerContainer>
     )
   }

src/features/navigation/CheatcodesStackNavigator/CheatcodesStackNavigator.tsx

@@ -14,6 +14,7 @@ import { CheatcodesNavigationIdentityCheck } from 'cheatcodes/pages/features/ide
 import { CheatcodesNavigationNewIdentificationFlow } from 'cheatcodes/pages/features/identityCheck/CheatcodesNavigationNewIdentificationFlow'
 import { CheatcodesNavigationInternal } from 'cheatcodes/pages/features/internal/CheatcodesNavigationInternal'
 import { CheatcodesNavigationProfile } from 'cheatcodes/pages/features/profile/CheatcodesNavigationProfile'
+import { CheatcodesScreenRemoteBanner } from 'cheatcodes/pages/features/remoteBanner/CheatcodesScreenRemoteBanner'
 import { CheatcodesNavigationShare } from 'cheatcodes/pages/features/share/CheatcodesNavigationShare'
 import { CheatcodesNavigationSubscription } from 'cheatcodes/pages/features/subscription/CheatcodesNavigationSubscription'
 import { CheatcodesNavigationTrustedDevice } from 'cheatcodes/pages/features/trustedDevice/CheatcodesNavigationTrustedDevice'
@@ -137,6 +138,10 @@ const routes: CheatcodesStackRoute[] = [
     name: 'CheatcodesScreenNewCaledonia',
     component: CheatcodesScreenNewCaledonia,
   },
+  {
+    name: 'CheatcodesScreenRemoteBanner',
+    component: CheatcodesScreenRemoteBanner,
+  },
   {
     name: 'CheatcodesNavigationErrors',
     component: withAsyncErrorBoundary(CheatcodesNavigationErrors),

src/features/navigation/CheatcodesStackNavigator/CheatcodesStackNavigatorConfig.tsx

@@ -3,35 +3,36 @@ export const cheatcodesStackNavigatorConfig = {
     initialRouteName: 'cheatcodes',
     screens: {
       CheatcodesMenu: 'cheatcodes',
-      CheatcodesNavigationHome: 'cheatcodes/home',
-      CheatcodesScreenCategoryThematicHomeHeader: 'cheatcodes/home/category-thematic-home-header',
-      CheatcodesScreenDefaultThematicHomeHeader: 'cheatcodes/home/default-thematic-home-header',
-      CheatcodesScreenHighlightThematicHomeHeader: 'cheatcodes/home/highlight-thematic-home-header',
-      CheatcodesNavigationProfile: 'cheatcodes/profile',
+      CheatcodesNavigationAccountManagement: 'cheatcodes/other/account-management',
       CheatcodesNavigationAchievements: 'cheatcodes/achievements',
-      CheatcodesNavigationShare: 'cheatcodes/share',
-      CheatcodesNavigationSubscription: 'cheatcodes/subscription',
+      CheatcodesNavigationBookOffer: 'cheatcodes/book-offer',
       CheatcodesNavigationCulturalSurvey: 'cheatcodes/cultural-survey',
-      CheatcodesNavigationTutorial: 'cheatcodes/tutorial',
-      CheatcodesNavigationOnboarding: 'cheatcodes/tutorial/onboarding',
-      CheatcodesNavigationProfileTutorial: 'cheatcodes/tutorial/profile-tutorial',
-      CheatcodesNavigationTrustedDevice: 'cheatcodes/trusted-device',
-      CheatcodesScreenTrustedDeviceInfos: 'cheatcodes/trusted-device/trusted-device-infos',
+      CheatcodesNavigationErrors: 'cheatcodes/other/errors',
+      CheatcodesNavigationForceUpdate: 'cheatcodes/other/force-update',
+      CheatcodesNavigationHome: 'cheatcodes/home',
       CheatcodesNavigationIdentityCheck: 'cheatcodes/identity-check',
+      CheatcodesNavigationInternal: 'cheatcodes/internal',
       CheatcodesNavigationNewIdentificationFlow:
         'cheatcodes/identity-check/new-identification-flow',
-      CheatcodesNavigationInternal: 'cheatcodes/internal',
-      CheatcodesNavigationBookOffer: 'cheatcodes/book-offer',
+      CheatcodesNavigationNotScreensPages: 'cheatcodes/other/not-screens-pages',
+      CheatcodesNavigationOnboarding: 'cheatcodes/tutorial/onboarding',
+      CheatcodesNavigationProfile: 'cheatcodes/profile',
+      CheatcodesNavigationProfileTutorial: 'cheatcodes/tutorial/profile-tutorial',
+      CheatcodesNavigationShare: 'cheatcodes/share',
+      CheatcodesNavigationSignUp: 'cheatcodes/other/sign-up',
+      CheatcodesNavigationSubscription: 'cheatcodes/subscription',
+      CheatcodesNavigationTrustedDevice: 'cheatcodes/trusted-device',
+      CheatcodesNavigationTutorial: 'cheatcodes/tutorial',
+      CheatcodesScreenAccesLibre: 'cheatcodes/other/acces-libre',
+      CheatcodesScreenCategoryThematicHomeHeader: 'cheatcodes/home/category-thematic-home-header',
       CheatcodesScreenDebugInformations: 'cheatcodes/other/debug-informations',
+      CheatcodesScreenDefaultThematicHomeHeader: 'cheatcodes/home/default-thematic-home-header',
       CheatcodesScreenFeatureFlags: 'cheatcodes/other/feature-flags',
-      CheatcodesScreenRemoteConfig: 'cheatcodes/other/remote-config',
+      CheatcodesScreenHighlightThematicHomeHeader: 'cheatcodes/home/highlight-thematic-home-header',
       CheatcodesScreenNewCaledonia: 'cheatcodes/other/new-caledonia',
-      CheatcodesNavigationErrors: 'cheatcodes/other/errors',
-      CheatcodesNavigationNotScreensPages: 'cheatcodes/other/not-screens-pages',
-      CheatcodesScreenAccesLibre: 'cheatcodes/other/acces-libre',
-      CheatcodesNavigationSignUp: 'cheatcodes/other/sign-up',
-      CheatcodesNavigationAccountManagement: 'cheatcodes/other/account-management',
-      CheatcodesNavigationForceUpdate: 'cheatcodes/other/force-update',
+      CheatcodesScreenRemoteBanner: 'cheatcodes/remote-banner',
+      CheatcodesScreenRemoteConfig: 'cheatcodes/other/remote-config',
+      CheatcodesScreenTrustedDeviceInfos: 'cheatcodes/trusted-device/trusted-device-infos',
     },
   },
 }

src/features/navigation/CheatcodesStackNavigator/types.ts

@@ -20,6 +20,7 @@ export type CheatcodesStackParamList = {
   CheatcodesScreenCategoryThematicHomeHeader: undefined
   CheatcodesScreenDefaultThematicHomeHeader: undefined
   CheatcodesScreenHighlightThematicHomeHeader: undefined
+  CheatcodesScreenRemoteBanner: undefined
   CheatcodesScreenTrustedDeviceInfos: undefined
   // Others
   CheatcodesScreenDebugInformations: undefined

src/features/profile/components/Badges/SubscriptionMessageBadge.tsx

@@ -3,11 +3,11 @@ import { openInbox } from 'react-native-email-link'
 
 import { SubscriptionMessage } from 'api/gen'
 import { useIsMailAppAvailable } from 'features/auth/helpers/useIsMailAppAvailable'
-import { ForceUpdateBanner } from 'features/forceUpdate/components/ForceUpdateBanner'
 import { Subtitle } from 'features/profile/components/Subtitle/Subtitle'
 import { formatDateToLastUpdatedAtMessage } from 'features/profile/helpers/formatDateToLastUpdatedAtMessage'
 import { matchSubscriptionMessageIconToSvg } from 'features/profile/helpers/matchSubscriptionMessageIconToSvg'
 import { shouldOpenInbox as checkShouldOpenInbox } from 'features/profile/helpers/shouldOpenInbox'
+import { RemoteBanner } from 'features/remoteBanner/components/RemoteBanner'
 import { InfoBanner } from 'ui/components/banners/InfoBanner'
 import { BaseButtonProps } from 'ui/components/buttons/AppButton/types'
 import { ButtonQuaternarySecondary } from 'ui/components/buttons/ButtonQuaternarySecondary'
@@ -88,7 +88,7 @@ export const SubscriptionMessageBadge = ({
       <Spacer.Column numberOfSpaces={2} />
       {disableActivation ? (
         <React.Fragment>
-          <ForceUpdateBanner />
+          <RemoteBanner from="Profile" />
           <Spacer.Column numberOfSpaces={6} />
         </React.Fragment>
       ) : null}

src/features/profile/components/Header/CreditHeader/CreditHeader.native.test.tsx

@@ -219,7 +219,7 @@ describe('CreditHeader', () => {
 const renderCreditHeader = (props?: Partial<CreditHeaderProps>) => {
   render(
     <CreditHeader
-      showForceUpdateBanner={false}
+      showRemoteBanner={false}
       firstName="Rosa"
       lastName="Bonheur"
       depositExpirationDate={dateInFuture}

src/features/profile/components/Header/CreditHeader/CreditHeader.stories.tsx

@@ -26,7 +26,7 @@ const depositExpirationDate = '2023-02-16T17:16:04.735235'
 // TODO(PC-17931): Fix this stories
 const WithDomainCreditV1 = Template.bind({})
 WithDomainCreditV1.args = {
-  showForceUpdateBanner: false,
+  showRemoteBanner: false,
   firstName: 'Rosa',
   lastName: 'Bonheur',
   depositExpirationDate: depositExpirationDate,
@@ -36,7 +36,7 @@ WithDomainCreditV1.args = {
 // TODO(PC-17931): Fix this stories
 const WithDomainCreditV2 = Template.bind({})
 WithDomainCreditV2.args = {
-  showForceUpdateBanner: false,
+  showRemoteBanner: false,
   firstName: 'Rosa',
   lastName: 'Bonheur',
   depositExpirationDate: depositExpirationDate,

src/features/profile/components/Header/CreditHeader/CreditHeader.tsx

@@ -20,7 +20,7 @@ import { BicolorOffers } from 'ui/svg/icons/BicolorOffers'
 import { Spacer, TypoDS } from 'ui/theme'
 
 export type CreditHeaderProps = {
-  showForceUpdateBanner: boolean
+  showRemoteBanner: boolean
   firstName?: string | null
   lastName?: string | null
   age?: number
@@ -29,7 +29,7 @@ export type CreditHeaderProps = {
 }
 
 export function CreditHeader({
-  showForceUpdateBanner,
+  showRemoteBanner,
   firstName,
   lastName,
   age,
@@ -80,7 +80,7 @@ export function CreditHeader({
 
   return (
     <HeaderWithGreyContainer
-      showForceUpdateBanner={showForceUpdateBanner}
+      showRemoteBanner={showRemoteBanner}
       title={name}
       bannerText={bannerText}
       subtitle={<Subtitle {...subtitleProps} />}