From 433608b73f83e6c5b14a66b973978d37c3b8331e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o=20Poizat?= <hello@zatteo.com>
Date: Thu, 27 Jul 2023 09:14:14 +0200
Subject: [PATCH] feat(backup): Show BackupAppHighlightAlert after 2 flagship
 app open

By using localStorage to store the number of times the user open the
home app inside flagship app, we can very simply show
BackupAppHighlightAlert when user open flagship app for the second
time.

It also avoid to add code in flagship app.
---
 .../BackupAppHighlightAlert.jsx               | 65 ++++++++++++++++++-
 1 file changed, 63 insertions(+), 2 deletions(-)

diff --git a/src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx b/src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx
index d7c24d5a1..e558055ef 100644
--- a/src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx
+++ b/src/components/AppHighlightAlert/BackupAppHighlightAlert.jsx
@@ -1,16 +1,77 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
+import flag from 'cozy-flags'
+import { isFlagshipApp } from 'cozy-device-helper'
 import { useI18n } from 'cozy-ui/transpiled/react'
 
 import AppHighlightAlert from 'components/AppHighlightAlert/AppHighlightAlert'
 
+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 BackupAppHighlightAlert = ({ apps }) => {
   const { t } = useI18n()
+  const [
+    shouldShowBackupAppHighlightAlert,
+    setShouldShowBackupAppHighlightAlert
+  ] = useBackupAppHighlightAlert()
+
+  const onClose = () => {
+    setShouldShowBackupAppHighlightAlert(false)
+  }
 
-  const onClose = () => {}
+  if (!shouldShowBackupAppHighlightAlert) {
+    return null
+  }
 
   return (
     <AppHighlightAlert
+      key="BackupAppHighlightAlert"
       apps={apps}
       appToHighlightSlug="photos"
       onClose={onClose}