App highlight alert could never show if related app was not installed

src/components/AppHighlightAlert/AppHighlightAlertWrapper.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { getBackupAppHighlightAlert } from 'components/AppHighlightAlert/BackupAppHighlightAlert'
-import { getGeolocationTrackingAppHighlightAlert } from 'components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert'
+import { getAvailableAppHighlightAlerts } from 'components/AppHighlightAlert/helpers'
 import { useClient } from 'cozy-client'
 
 const AppHighlightAlertWrapper = ({ apps }) => {
@@ -10,27 +9,18 @@ const AppHighlightAlertWrapper = ({ apps }) => {
 
   useEffect(() => {
     const getAppHighlightAlerts = async () => {
-      const appHighlightAlerts = [
-        getBackupAppHighlightAlert(),
-        await getGeolocationTrackingAppHighlightAlert(client)
-      ]
-
-      const availableAppHighlightAlerts = appHighlightAlerts.filter(
-        status => status.available
+      const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts(
+        client,
+        apps
       )
 
-      const selectedIndex = availableAppHighlightAlerts.findIndex(
-        status => status.displayable
-      )
-      if (selectedIndex !== -1) {
-        availableAppHighlightAlerts[selectedIndex].displayed = true
-      }
-
       setAppHighlightAlerts(availableAppHighlightAlerts)
     }
 
-    getAppHighlightAlerts()
-  }, [client])
+    if (apps && appHighlightAlerts.length === 0) {
+      getAppHighlightAlerts()
+    }
+  }, [client, apps, appHighlightAlerts.length])
 
   useEffect(() => {
     appHighlightAlerts.forEach(component => {

src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx

@@ -11,8 +11,9 @@ const APP_START_COUNT_KEY = 'BackupAppHighlightAlert__appStartCount'
 const MAX_COUNT_VALUE = 2
 const DISABLED_COUNT_VALUE = -1
 
-const isAvailable = () => {
+const isAvailable = installedApps => {
   return (
+    installedApps.find(app => app.slug === 'photos') &&
     isFlagshipApp() &&
     flag('flagship.backup.enabled') &&
     flag('flagship.backup.homeHighlightEnabled')
@@ -26,11 +27,11 @@ const isDisplayable = () => {
   return appStartCount >= MAX_COUNT_VALUE - 1
 }
 
-export const getBackupAppHighlightAlert = () => {
+export const getBackupAppHighlightAlert = installedApps => {
   return {
     name: 'BackupAppHighlightAlert',
     Component: BackupAppHighlightAlert,
-    available: isAvailable(),
+    available: isAvailable(installedApps),
     displayable: isDisplayable(),
     onNotDisplayed: onNotDisplayed,
     onDisplayed: onDisplayed

src/components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert.jsx

@@ -20,10 +20,11 @@ const hasNoTimeseriesGeojson = async client => {
   return timeseries.length === 0
 }
 
-const isAvailable = async client => {
+const isAvailable = async (client, installedApps) => {
   const bikegoalSettings = flag('coachco2.bikegoal.settings')
 
   return (
+    installedApps.find(app => app.slug === 'coachco2') &&
     flag('home.push.coachco2.opencount') &&
     flag('home.push.coachco2.opencount') >= 0 &&
     (!bikegoalSettings ||
@@ -41,11 +42,14 @@ const isDisplayable = () => {
   return appStartCount >= flag('home.push.coachco2.opencount') - 1
 }
 
-export const getGeolocationTrackingAppHighlightAlert = async client => {
+export const getGeolocationTrackingAppHighlightAlert = async (
+  client,
+  installedApps
+) => {
   return {
     name: 'GeolocationTrackingAppHighlightAlert',
     Component: GeolocationTrackingAppHighlightAlert,
-    available: await isAvailable(client),
+    available: await isAvailable(client, installedApps),
     displayable: isDisplayable(),
     onNotDisplayed: onNotDisplayed,
     onDisplayed: onDisplayed

src/components/AppHighlightAlert/helpers.js

@@ -0,0 +1,22 @@
+import { getBackupAppHighlightAlert } from 'components/AppHighlightAlert/BackupAppHighlightAlert'
+import { getGeolocationTrackingAppHighlightAlert } from 'components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert'
+
+export const getAvailableAppHighlightAlerts = async (client, installedApps) => {
+  const appHighlightAlerts = [
+    getBackupAppHighlightAlert(installedApps),
+    await getGeolocationTrackingAppHighlightAlert(client, installedApps)
+  ]
+
+  const availableAppHighlightAlerts = appHighlightAlerts.filter(
+    status => status.available
+  )
+
+  const selectedIndex = availableAppHighlightAlerts.findIndex(
+    status => status.displayable
+  )
+  if (selectedIndex !== -1) {
+    availableAppHighlightAlerts[selectedIndex].displayed = true
+  }
+
+  return availableAppHighlightAlerts
+}

src/components/AppHighlightAlert/helpers.spec.js

@@ -0,0 +1,106 @@
+import { getAvailableAppHighlightAlerts } from 'components/AppHighlightAlert/helpers'
+import { getBackupAppHighlightAlert } from 'components/AppHighlightAlert/BackupAppHighlightAlert'
+import { getGeolocationTrackingAppHighlightAlert } from 'components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert'
+
+jest.mock('components/AppHighlightAlert/BackupAppHighlightAlert')
+jest.mock('components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert')
+
+describe('getAvailableAppHighlightAlerts', () => {
+  it('should set the only displayable alert as displayed if only one displayable alert found', async () => {
+    getBackupAppHighlightAlert.mockReturnValue({
+      name: 'BackupAppHighlightAlert',
+      available: false,
+      displayable: false
+    })
+    getGeolocationTrackingAppHighlightAlert.mockReturnValue({
+      name: 'GeolocationTrackingAppHighlightAlert',
+      available: true,
+      displayable: true
+    })
+
+    const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts()
+
+    expect(availableAppHighlightAlerts).toEqual([
+      {
+        name: 'GeolocationTrackingAppHighlightAlert',
+        available: true,
+        displayable: true,
+        displayed: true
+      }
+    ])
+  })
+
+  it('should set the first displayable alert as displayed if multiple displayable alerts found', async () => {
+    getBackupAppHighlightAlert.mockReturnValue({
+      name: 'BackupAppHighlightAlert',
+      available: true,
+      displayable: true
+    })
+    getGeolocationTrackingAppHighlightAlert.mockReturnValue({
+      name: 'GeolocationTrackingAppHighlightAlert',
+      available: true,
+      displayable: true
+    })
+
+    const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts()
+
+    expect(availableAppHighlightAlerts).toEqual([
+      {
+        name: 'BackupAppHighlightAlert',
+        available: true,
+        displayable: true,
+        displayed: true
+      },
+      {
+        name: 'GeolocationTrackingAppHighlightAlert',
+        available: true,
+        displayable: true
+      }
+    ])
+  })
+
+  it('should not return not available alerts', async () => {
+    getBackupAppHighlightAlert.mockReturnValue({
+      name: 'BackupAppHighlightAlert',
+      available: false,
+      displayable: false
+    })
+    getGeolocationTrackingAppHighlightAlert.mockReturnValue({
+      name: 'GeolocationTrackingAppHighlightAlert',
+      available: false,
+      displayable: false
+    })
+
+    const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts()
+
+    expect(availableAppHighlightAlerts).toEqual([])
+  })
+
+  it('should do nothing with not displayable alerts', async () => {
+    getBackupAppHighlightAlert.mockReturnValue({
+      name: 'BackupAppHighlightAlert',
+      available: true,
+      displayable: false
+    })
+    getGeolocationTrackingAppHighlightAlert.mockReturnValue({
+      name: 'GeolocationTrackingAppHighlightAlert',
+      available: true,
+      displayable: false
+    })
+
+    const availableAppHighlightAlerts = await getAvailableAppHighlightAlerts()
+
+    expect(availableAppHighlightAlerts).toEqual([
+      {
+        name: 'BackupAppHighlightAlert',
+        available: true,
+        displayable: false
+      },
+      {
+        name: 'GeolocationTrackingAppHighlightAlert',
+        available: true,
+        displayable: false
+      }
+    ])
+  })
+})