Add an AppHighlightAlert targeting coachco2

src/components/AppHighlightAlert/AppHighlightAlertWrapper.jsx

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react'
+
+import { getBackupAppHighlightAlert } from 'components/AppHighlightAlert/BackupAppHighlightAlert'
+import { getGeolocationTrackingAppHighlightAlert } from 'components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert'
+
+const AppHighlightAlertWrapper = ({ apps }) => {
+  const [appHighlightAlerts, setAppHighlightAlerts] = useState([])
+
+  useEffect(() => {
+    const appHighlightAlerts = [
+      getBackupAppHighlightAlert(),
+      getGeolocationTrackingAppHighlightAlert()
+    ]
+
+    const availableAppHighlightAlerts = appHighlightAlerts.filter(
+      status => status.available
+    )
+
+    const selectedIndex = availableAppHighlightAlerts.findIndex(
+      status => status.displayable
+    )
+    if (selectedIndex !== -1) {
+      availableAppHighlightAlerts[selectedIndex].displayed = true
+    }
+
+    setAppHighlightAlerts(availableAppHighlightAlerts)
+  }, [])
+
+  useEffect(() => {
+    appHighlightAlerts.forEach(component => {
+      if (component.displayed) {
+        component.onDisplayed()
+      } else {
+        component.onNotDisplayed()
+      }
+    })
+  }, [appHighlightAlerts])
+
+  return (
+    <>
+      {appHighlightAlerts.map(({ Component, name, displayed }) => (
+        <Component key={name} apps={apps} displayed={displayed} />
+      ))}
+    </>
+  )
+}
+
+export default AppHighlightAlertWrapper

src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import flag from 'cozy-flags'
 import { isFlagshipApp } from 'cozy-device-helper'
@@ -11,55 +11,60 @@ const APP_START_COUNT_KEY = 'BackupAppHighlightAlert__appStartCount'
 const MAX_COUNT_VALUE = 2
 const DISABLED_COUNT_VALUE = -1
 
-const useBackupAppHighlightAlert = () => {
-  const [
-    shouldShowBackupAppHighlightAlert,
-    setShouldShowBackupAppHighlightAlert
-  ] = useState(false)
-
-  useEffect(() => {
-    if (
-      !isFlagshipApp() ||
-      !flag('flagship.backup.enabled') ||
-      !flag('flagship.backup.homeHighlightEnabled')
-    ) {
-      return
-    }
-
-    const appStartCount = parseInt(
-      localStorage.getItem(APP_START_COUNT_KEY),
-      10
-    )
-
-    let newAppStartCount
-
-    if (isNaN(appStartCount)) {
-      newAppStartCount = 1
-    } else if (appStartCount === DISABLED_COUNT_VALUE) {
-      return
-    } else if (appStartCount < MAX_COUNT_VALUE) {
-      newAppStartCount = appStartCount + 1
-    } else {
-      newAppStartCount = DISABLED_COUNT_VALUE
-    }
-
-    localStorage.setItem(APP_START_COUNT_KEY, newAppStartCount.toString())
-
-    setShouldShowBackupAppHighlightAlert(newAppStartCount === 2)
-  }, [])
-
-  return [
-    shouldShowBackupAppHighlightAlert,
-    setShouldShowBackupAppHighlightAlert
-  ]
+const isAvailable = () => {
+  return (
+    isFlagshipApp() &&
+    flag('flagship.backup.enabled') &&
+    flag('flagship.backup.homeHighlightEnabled')
+  )
+}
+
+const isDisplayable = () => {
+  const appStartCount =
+    parseInt(localStorage.getItem(APP_START_COUNT_KEY), 10) || 0
+
+  return appStartCount >= MAX_COUNT_VALUE - 1
+}
+
+export const getBackupAppHighlightAlert = () => {
+  return {
+    name: 'BackupAppHighlightAlert',
+    Component: BackupAppHighlightAlert,
+    available: isAvailable(),
+    displayable: isDisplayable(),
+    onNotDisplayed: onNotDisplayed,
+    onDisplayed: onDisplayed
+  }
+}
+
+const onNotDisplayed = () => {
+  const appStartCount = parseInt(localStorage.getItem(APP_START_COUNT_KEY), 10)
+
+  let newAppStartCount
+
+  if (appStartCount === DISABLED_COUNT_VALUE) {
+    return
+  }
+
+  if (isNaN(appStartCount)) {
+    newAppStartCount = 1
+  } else {
+    newAppStartCount = appStartCount + 1
+  }
+
+  localStorage.setItem(APP_START_COUNT_KEY, newAppStartCount.toString())
 }
 
-const BackupAppHighlightAlert = ({ apps }) => {
+const onDisplayed = () => {
+  localStorage.setItem(APP_START_COUNT_KEY, DISABLED_COUNT_VALUE)
+}
+
+const BackupAppHighlightAlert = ({ apps, displayed }) => {
   const { t } = useI18n()
   const [
     shouldShowBackupAppHighlightAlert,
     setShouldShowBackupAppHighlightAlert
-  ] = useBackupAppHighlightAlert()
+  ] = useState(displayed)
 
   const onClose = () => {
     setShouldShowBackupAppHighlightAlert(false)
@@ -78,5 +83,3 @@ const BackupAppHighlightAlert = ({ apps }) => {
     />
   )
 }
-
-export default BackupAppHighlightAlert

src/components/AppHighlightAlert/GeolocationTrackingAppHighlightAlert.jsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react'
+
+import flag from 'cozy-flags'
+import { isFlagshipApp } from 'cozy-device-helper'
+import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
+
+import AppHighlightAlert from 'components/AppHighlightAlert/AppHighlightAlert'
+
+const APP_START_COUNT_KEY =
+  'GeolocationTrackingAppHighlightAlert__appStartCount'
+
+const DISABLED_COUNT_VALUE = -1
+
+const isAvailable = () => {
+  const bikegoalSettings = flag('coachco2.bikegoal.settings')
+
+  return (
+    isFlagshipApp() &&
+    flag('home.push.coachco2.opencount') &&
+    flag('home.push.coachco2.opencount') >= 0 &&
+    (!bikegoalSettings ||
+      bikegoalSettings.sourceId === null ||
+      (bikegoalSettings.sourceId !== null && flag('coachco2.bikegoal.enabled')))
+  )
+}
+
+const isDisplayable = () => {
+  const appStartCount =
+    parseInt(localStorage.getItem(APP_START_COUNT_KEY), 10) || 0
+
+  return appStartCount >= flag('home.push.coachco2.opencount') - 1
+}
+
+export const getGeolocationTrackingAppHighlightAlert = () => {
+  return {
+    name: 'GeolocationTrackingAppHighlightAlert',
+    Component: GeolocationTrackingAppHighlightAlert,
+    available: isAvailable(),
+    displayable: isDisplayable(),
+    onNotDisplayed: onNotDisplayed,
+    onDisplayed: onDisplayed
+  }
+}
+
+const onNotDisplayed = () => {
+  const appStartCount = parseInt(localStorage.getItem(APP_START_COUNT_KEY), 10)
+
+  let newAppStartCount
+
+  if (appStartCount === DISABLED_COUNT_VALUE) {
+    return
+  }
+
+  if (isNaN(appStartCount)) {
+    newAppStartCount = 1
+  } else {
+    newAppStartCount = appStartCount + 1
+  }
+
+  localStorage.setItem(APP_START_COUNT_KEY, newAppStartCount.toString())
+}
+
+const onDisplayed = () => {
+  localStorage.setItem(APP_START_COUNT_KEY, DISABLED_COUNT_VALUE)
+}
+
+const getAlertDescription = t => {
+  const bikegoalSettings = flag('coachco2.bikegoal.settings')
+
+  if (bikegoalSettings?.sourceId) {
+    if (bikegoalSettings.sourceId === 'employer') {
+      return t(
+        'appHighlightAlert.geolocationTracking.bikegoalSourceEmployerDescription',
+        {
+          sourceType: bikegoalSettings.sourceType,
+          sourceIdentity: bikegoalSettings.sourceIdentity
+        }
+      )
+    } else {
+      return t(
+        'appHighlightAlert.geolocationTracking.bikegoalSourceDefaultDescription',
+        {
+          sourceType: bikegoalSettings.sourceType,
+          sourceIdentity: bikegoalSettings.sourceIdentity
+        }
+      )
+    }
+  }
+
+  return t('appHighlightAlert.geolocationTracking.defaultDescription')
+}
+
+export const GeolocationTrackingAppHighlightAlert = ({ apps, displayed }) => {
+  const { t } = useI18n()
+  const [
+    shouldShowGeolocationTrackingAppHighlightAlert,
+    setShouldShowGeolocationTrackingAppHighlightAlert
+  ] = useState(displayed)
+
+  const onClose = () => {
+    setShouldShowGeolocationTrackingAppHighlightAlert(false)
+  }
+
+  if (!shouldShowGeolocationTrackingAppHighlightAlert) {
+    return null
+  }
+
+  const description = getAlertDescription(t)
+
+  return (
+    <AppHighlightAlert
+      apps={apps}
+      appToHighlightSlug="coachco2"
+      onClose={onClose}
+      description={description}
+    />
+  )
+}

src/components/Applications.jsx

@@ -10,7 +10,7 @@ import AppTile from 'components/AppTile'
 import LogoutTile from 'components/LogoutTile'
 import ShortcutLink from 'components/ShortcutLink'
 import LoadingPlaceholder from 'components/LoadingPlaceholder'
-import BackupAppHighlightAlert from 'components/AppHighlightAlert/BackupAppHighlightAlert'
+import AppHighlightAlertWrapper from 'components/AppHighlightAlert/AppHighlightAlertWrapper'
 import homeConfig from 'config/home.json'
 import useHomeShortcuts from 'hooks/useHomeShortcuts'
 import { appsConn } from 'queries'
@@ -51,7 +51,7 @@ const getApplicationsList = memoize(data => {
     const array = apps.map(app => <AppTile key={app.id} app={app} />)
 
     array.push(
-      <BackupAppHighlightAlert key="BackupAppHighlightAlert" apps={apps} />
+      <AppHighlightAlertWrapper key="AppHighlightAlertWrapper" apps={apps} />
     )
 
     return array

src/locales/en.json

@@ -586,5 +586,12 @@
     "appHighlightAlert": {
       "description": "Save your photos safely in your Cozy to protect them of loss or theft!"
     }
+  },
+  "appHighlightAlert": {
+    "geolocationTracking": {
+      "defaultDescription": "Track your travel and carbon footprint with the CO2 Coach",
+      "bikegoalSourceEmployerDescription": "Your %{sourceType} %{sourceIdentity} invites you to take part in improving the area and benefit from the \"prime vélo\", this application will help you measure its progress, and much more!",
+      "bikegoalSourceDefaultDescription": "Your %{sourceType} %{sourceIdentity} invites you to play your part in improving the region. Save and analyse your journeys!"
+    }
   }
 }

src/locales/fr.json

@@ -586,5 +586,12 @@
     "appHighlightAlert": {
       "description": "Mettez vos photos & videos en sécurité en les sauvegardant automatiquement dans votre Cozy!"
     }
+  },
+  "appHighlightAlert": {
+    "geolocationTracking": {
+      "defaultDescription": "Suivez vos déplacements et votre empreinte carbone avec le Coach CO2",
+      "bikegoalSourceEmployerDescription": "Votre %{sourceType} %{sourceIdentity} vous invite à participer à l’amélioration du territoire et bénéficier de la \"prime vélo\", cette application vous aidera à mesurer son avancement, et bien plus !",
+      "bikegoalSourceDefaultDescription": "Votre %{sourceType} %{sourceIdentity} vous invite à participer à l'amélioration du territoire, mémorisez et analysez vos déplacements !"
+    }
   }
 }