[VO-1064 & VO-1067] feat: Take into account feedback on announcements

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,20 +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 => {
-    save({
-      dismissedAt: new Date().toISOString()
-    })
     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/components/Announcements/AnnouncementsDialog.tsx

@@ -46,13 +46,29 @@ const AnnouncementsDialog: FC<AnnouncementsDialogProps> = ({
     setActiveStep(index)
   }
 
+  const handleLast = (): void => {
+    const uuid = announcements[activeStep].attributes.uuid
+    save({
+      dismissedAt: new Date().toISOString(),
+      seen: [...(values?.seen ?? []), uuid]
+    })
+    onDismiss()
+  }
+
+  const handleDismiss = (): void => {
+    save({
+      dismissedAt: new Date().toISOString()
+    })
+    onDismiss()
+  }
+
   const maxSteps = announcements.length
 
   return (
     <CozyTheme variant="normal">
       <FixedActionsDialog
         open
-        onClose={onDismiss}
+        onClose={handleDismiss}
         content={
           <SwipeableViews
             index={activeStep}
@@ -64,8 +80,8 @@ const AnnouncementsDialog: FC<AnnouncementsDialogProps> = ({
                 key={index}
                 isLast={index === maxSteps - 1}
                 announcement={announcement}
-                onDismiss={onDismiss}
                 onNext={handleNext}
+                onLast={handleLast}
               />
             ))}
           </SwipeableViews>

src/components/Announcements/AnnouncementsDialogContent.tsx

@@ -11,15 +11,15 @@ import { useAnnouncementsImage } from 'hooks/useAnnouncementsImage'
 interface AnnouncementsDialogContentProps {
   isLast: boolean
   announcement: Announcement
-  onDismiss: () => void
   onNext: () => void
+  onLast: () => void
 }
 
 const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
   isLast,
   announcement,
-  onDismiss,
-  onNext
+  onNext,
+  onLast
 }) => {
   const { t, f } = useI18n()
   const primaryImage = useAnnouncementsImage(
@@ -87,7 +87,7 @@ const AnnouncementsDialogContent: FC<AnnouncementsDialogContentProps> = ({
             : 'AnnouncementsDialogContent.next'
         )}
         variant="secondary"
-        onClick={isLast ? onDismiss : onNext}
+        onClick={isLast ? onLast : onNext}
       />
       {secondaryImage ? (
         <img

src/hooks/useAnnouncements.tsx

@@ -77,13 +77,9 @@ const useAnnouncements = ({
       )
       const unseenData = getUnseenAnnouncements(rawData, uuidsInCommon)
 
-      // we consider the first post to have been seen as soon as it is displayed
-      if (unseenData.length > 0) {
-        uuidsInCommon.push(unseenData[0].attributes.uuid)
-      }
       save({ seen: uuidsInCommon })
 
-      setUnseenData(unseenData)
+      setUnseenData(unseenData.slice(0, 5))
     }
   }, [hasStartedFiltering, rawData, values, save])
 

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
 }