feat: Show announcement 1h after the feature has been activated

To avoid spamming the interface with new users, we're putting a delay between the first opening of the Home and the appearance of the announcements dialog.

src/components/Announcements/Announcements.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import { differenceInHours } from 'date-fns'
 
 import flag from 'cozy-flags'
@@ -11,17 +11,37 @@ import { useAnnouncementsSettings } from 'hooks/useAnnouncementsSettings'
 const Announcements: FC = () => {
   const config = flag<AnnouncementsConfigFlag>('home.announcements')
   const [hasBeenDismissed, setBeenDismissed] = useState(false)
-  const { values, save } = useAnnouncementsSettings()
+  const { fetchStatus, values, save } = useAnnouncementsSettings()
+  const [hasBeenActivated, setBeenActivated] = useState(false)
+
+  useEffect(() => {
+    if (
+      !values.firstActivatedAt &&
+      !hasBeenActivated &&
+      fetchStatus === 'loaded'
+    ) {
+      save({
+        firstActivatedAt: new Date().toISOString()
+      })
+      setBeenActivated(true)
+    }
+  }, [hasBeenActivated, save, values.firstActivatedAt, fetchStatus])
 
   const handleDismiss = (): void => {
     setBeenDismissed(true)
   }
 
+  const hasBeenActivatedForMoreThanAHour = values.firstActivatedAt
+    ? differenceInHours(new Date(), Date.parse(values.firstActivatedAt)) >= 1
+    : false
   const moreThan = config?.delayAfterDismiss ?? 24
   const hasBeenDismissedForMoreThan = values.dismissedAt
     ? differenceInHours(new Date(), Date.parse(values.dismissedAt)) >= moreThan
     : true
-  const canBeDisplayed = !hasBeenDismissed && hasBeenDismissedForMoreThan
+  const canBeDisplayed =
+    !hasBeenDismissed &&
+    hasBeenDismissedForMoreThan &&
+    hasBeenActivatedForMoreThanAHour
   const announcements = useAnnouncements({
     canBeDisplayed
   })

src/hooks/useAnnouncementsSettings.tsx

@@ -2,23 +2,31 @@ import { useSettings } from 'cozy-client'
 
 const defaultAnnouncements = {
   dismissedAt: undefined,
-  seen: []
+  seen: [],
+  firstActivatedAt: undefined
 }
 
 const useAnnouncementsSettings = (): {
+  fetchStatus: string
   values: {
     dismissedAt?: string
     seen: string[]
+    firstActivatedAt?: string
   }
-  save: (data: { dismissedAt?: string; seen?: string[] }) => void
+  save: (data: {
+    dismissedAt?: string
+    seen?: string[]
+    firstActivatedAt?: string
+  }) => void
 } => {
-  const { values, save } = useSettings('home', [
+  const { query, values, save } = useSettings('home', [
     'announcements'
   ]) as unknown as UseSettingsType
 
   const saveAnnouncement = (data: {
     dismissedAt?: string
     seen?: string[]
+    firstActivatedAt?: string
   }): void => {
     const announcements = {
       ...(values?.announcements ?? defaultAnnouncements),
@@ -30,22 +38,28 @@ const useAnnouncementsSettings = (): {
   }
 
   return {
+    fetchStatus: query.fetchStatus,
     values: values?.announcements ?? defaultAnnouncements,
     save: saveAnnouncement
   }
 }
 
 interface UseSettingsType {
+  query: {
+    fetchStatus: string
+  }
   values?: {
     announcements: {
       dismissedAt: string
       seen: string[]
+      firstActivatedAt: string
     }
   }
   save: (data: {
     announcements: {
       dismissedAt?: string
       seen: string[]
+      firstActivatedAt?: string
     }
   }) => void
 }