From 54119bfeb0c5eda3b12a2ff75a9c20c477f027a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Demazi=C3=A8re?= <simon.demaziere@insee.fr>
Date: Tue, 23 Apr 2024 18:14:40 +0200
Subject: [PATCH] Fix restore favorite mail (#138)

* fix: states cohesion
feat: person mail with star
feat: contactAttempts ordered by date DESC

* feat : refactor functions

* feat: questionnaire availability checked with dates

* fix: remove unused pathalue

* fix: identification persist AOC state on answer handling

* fix: update eventListener with latest addNewState
---
 package.json                                  |   2 +-
 src/pages/Home.jsx                            |  17 +-
 src/pages/SuiviPage.jsx                       |   2 +-
 src/pages/SurveyUnitPage.jsx                  |  11 +-
 src/ui/Questionnaire/Questionnaires.jsx       |   4 +-
 src/ui/SurveyCard.jsx                         |   3 +-
 src/ui/SurveyUnit/ContactAttemptForm.jsx      |  13 +-
 src/ui/SurveyUnit/ContactOutcomeForm.jsx      |  10 +-
 src/ui/SurveyUnit/ContactsCard.jsx            |  18 +-
 src/ui/SurveyUnit/IdentificationCard.jsx      |  10 +-
 src/ui/SurveyUnit/PersonsCard.jsx             |  44 ++++-
 src/ui/SurveyUnit/SurveyUnitHeader.jsx        |  12 +-
 src/ui/TextWithLabel.jsx                      |   7 +-
 src/utils/functions/convertSUStateInToDo.js   |   2 +-
 src/utils/functions/seeder.js                 |  22 ++-
 src/utils/functions/surveyUnitFunctions.js    | 166 ++++++++++--------
 .../functions/surveyUnitFunctions.test.js     |  56 +++---
 src/utils/hooks/useIdentificationQuestions.js |  18 +-
 src/utils/hooks/useQueenListener.js           |   7 +-
 19 files changed, 258 insertions(+), 166 deletions(-)

diff --git a/package.json b/package.json
index 9c30790b5..7e5a4028d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 18097f0a7..e563ddfd9 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { SidebarLayout } from '../ui/SidebarLayout';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -24,11 +24,24 @@ import { SurveyCard } from '../ui/SurveyCard';
 import { Row } from '../ui/Row';
 import { Select } from '../ui/Select';
 import { seedData } from '../utils/functions/seeder';
+import { persistSurveyUnit, updateStateWithDates } from '../utils/functions';
 
 export function Home() {
   const surveyUnits = useSurveyUnits();
   const missingSurveyUnitIds = useMissingSurveyUnits().map(surveyUnit => surveyUnit.id);
   const filter = useSearchFilter();
+  const [shouldCheckState, setShouldCheckState] = useState(true);
+
+  useEffect(() => {
+    if (shouldCheckState && surveyUnits.length > 0) {
+      // persist state VIC when identificationStartDate is reached
+      setShouldCheckState(false);
+      surveyUnits.forEach(su => {
+        const newStates = updateStateWithDates(su);
+        persistSurveyUnit({ ...su, states: newStates });
+      });
+    }
+  }, [surveyUnits.length]);
 
   const filteredSurveyUnits = filterSurveyUnits(surveyUnits, filter);
   const isDev = filteredSurveyUnits.length === 0 && window.location.hostname === 'localhost';
@@ -235,7 +248,7 @@ function Sidebar({ surveyUnits }) {
         <div>
           <Button size="edge" color="textPrimary" variant="underlined" onClick={filter.reset}>
             <RestartAltIcon />
-           {D.resetFilters}
+            {D.resetFilters}
           </Button>
         </div>
       </Stack>
diff --git a/src/pages/SuiviPage.jsx b/src/pages/SuiviPage.jsx
index 214bc74a4..956d501a1 100644
--- a/src/pages/SuiviPage.jsx
+++ b/src/pages/SuiviPage.jsx
@@ -429,7 +429,7 @@ function SurveyUnitRow({ surveyUnit }) {
       <TableRow>
         <TableCell align="center">
           {isActive ? (
-            <Link to={`/survey-unit/${surveyUnit.id}/details?panel=0`}>#{surveyUnit.id}</Link>
+            <Link to={`/survey-unit/${surveyUnit.id}/details`}>#{surveyUnit.id}</Link>
           ) : (
             `#${surveyUnit.id}`
           )}
diff --git a/src/pages/SurveyUnitPage.jsx b/src/pages/SurveyUnitPage.jsx
index 5c479ca2e..120c3d745 100644
--- a/src/pages/SurveyUnitPage.jsx
+++ b/src/pages/SurveyUnitPage.jsx
@@ -16,7 +16,7 @@ import NotInterestedIcon from '@mui/icons-material/NotInterested';
 import Button from '@mui/material/Button';
 import { Typography } from '../ui/Typography';
 import { Questionnaires } from '../ui/Questionnaire/Questionnaires';
-import { addNewState, getLastState } from '../utils/functions';
+import { addNewState, getLastState, persistSurveyUnit } from '../utils/functions';
 import { useEffect } from 'react';
 import { surveyUnitStateEnum } from '../utils/enum/SUStateEnum';
 
@@ -26,9 +26,10 @@ export function SurveyUnitPage() {
 
   useEffect(() => {
     if (surveyUnit !== undefined) {
-      const lastState = getLastState(surveyUnit);
-      if (lastState.type === surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type) {
-        addNewState(surveyUnit, surveyUnitStateEnum.IN_PREPARATION.type);
+      const lastState = getLastState(surveyUnit.states);
+      if (lastState?.type === surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type) {
+        const newStates = addNewState(surveyUnit, surveyUnitStateEnum.IN_PREPARATION.type);
+        persistSurveyUnit({ ...surveyUnit, states: newStates });
       }
     }
   }, [surveyUnit]);
@@ -74,7 +75,7 @@ export function SurveyUnitPage() {
           </Box>
         </SwipeableTab>
         <SwipeableTab index={1} label={D.goToContactPage}>
-          <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
+          <Box sx={{ display: 'grid', gridTemplateColumns: '3fr 2fr', gap: '2rem' }}>
             <PersonsCard surveyUnit={surveyUnit} />
             <ContactsCard surveyUnit={surveyUnit} />
           </Box>
diff --git a/src/ui/Questionnaire/Questionnaires.jsx b/src/ui/Questionnaire/Questionnaires.jsx
index 00ed06f45..ebfb60a01 100644
--- a/src/ui/Questionnaire/Questionnaires.jsx
+++ b/src/ui/Questionnaire/Questionnaires.jsx
@@ -8,10 +8,11 @@ import Button from '@mui/material/Button';
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import D from 'i18n';
-
+import { isQuestionnaireAvailable } from '../../utils/functions';
 
 export function Questionnaires({ surveyUnit }) {
   const { id } = surveyUnit;
+  const isAvailable = isQuestionnaireAvailable(surveyUnit)(false);
 
   return (
     <Card p={2} elevation={0}>
@@ -25,6 +26,7 @@ export function Questionnaires({ surveyUnit }) {
           </Row>
           <Button
             variant="contained"
+            disabled={!isAvailable}
             startIcon={<LibraryBooksIcon />}
             component="a"
             href={`/queen/survey-unit/${id}`}
diff --git a/src/ui/SurveyCard.jsx b/src/ui/SurveyCard.jsx
index 8dc2c98dc..ab3d3eb37 100644
--- a/src/ui/SurveyCard.jsx
+++ b/src/ui/SurveyCard.jsx
@@ -19,7 +19,6 @@ import { Row } from './Row';
 import { AbsoluteLink } from './AbsoluteLink';
 import D from '../i18n/build-dictionary';
 
-
 /**
  * @param {SurveyUnit} surveyUnit
  * @param {boolean} locked
@@ -71,7 +70,7 @@ export function SurveyCard({ surveyUnit, locked = false }) {
             <Row justifyContent="space-between">
               <Row gap={1}>
                 <PersonOutlinedIcon color="textPrimary" />
-                <AbsoluteLink to={isActive ? `/survey-unit/${id}/details?panel=0` : undefined}>
+                <AbsoluteLink to={isActive ? `/survey-unit/${id}/details` : undefined}>
                   <Typography fontWeight={700} color="black" variant="xl">
                     {lastName.toUpperCase()} {firstName}
                   </Typography>
diff --git a/src/ui/SurveyUnit/ContactAttemptForm.jsx b/src/ui/SurveyUnit/ContactAttemptForm.jsx
index 3b0e70cf5..05a09a92d 100644
--- a/src/ui/SurveyUnit/ContactAttemptForm.jsx
+++ b/src/ui/SurveyUnit/ContactAttemptForm.jsx
@@ -15,9 +15,8 @@ import { getContactAttemptByConfiguration } from '../../utils/enum/ContactAttemp
 import { StaticDateTimePicker } from '@mui/x-date-pickers/StaticDateTimePicker';
 import { Typography } from '../Typography';
 import { formatDate } from '../../utils/functions/date';
-import { addNewState } from '../../utils/functions';
+import { addNewState, persistSurveyUnit } from '../../utils/functions';
 import { surveyUnitStateEnum } from '../../utils/enum/SUStateEnum';
-import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';
 
 /**
  * @param {number} step
@@ -65,11 +64,10 @@ export function ContactAttemptForm({ onClose, surveyUnit }) {
     decrement();
   };
 
-  const goNextStep = async e => {
+  const goNextStep = e => {
     e.preventDefault();
     if (step === 3) {
-      await addNewState(surveyUnit, surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type);
-      surveyUnitIDBService.addOrUpdateSU({
+      const updatedSu = {
         ...surveyUnit,
         contactAttempts: [
           ...surveyUnit.contactAttempts,
@@ -79,6 +77,11 @@ export function ContactAttemptForm({ onClose, surveyUnit }) {
             medium,
           },
         ],
+      };
+      const newStates = addNewState(updatedSu, surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type);
+      persistSurveyUnit({
+        ...updatedSu,
+        states: newStates,
       });
       onClose();
       return;
diff --git a/src/ui/SurveyUnit/ContactOutcomeForm.jsx b/src/ui/SurveyUnit/ContactOutcomeForm.jsx
index 8bbe188de..e56fe4dcc 100644
--- a/src/ui/SurveyUnit/ContactOutcomeForm.jsx
+++ b/src/ui/SurveyUnit/ContactOutcomeForm.jsx
@@ -5,11 +5,10 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import React, { useMemo } from 'react';
 import Stack from '@mui/material/Stack';
-import { addNewState } from '../../utils/functions';
+import { addNewState, persistSurveyUnit } from '../../utils/functions';
 import D from 'i18n';
 import { FieldRow } from '../FieldRow';
 import { useForm } from 'react-hook-form';
-import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';
 import {
   contactOutcomeEnum,
   getContactOutcomeByConfiguration,
@@ -34,15 +33,16 @@ export function ContactOutcomeForm({ onClose, surveyUnit }) {
     defaultValues: surveyUnit.contactOutcome ?? defaultValue,
   });
 
-  const onSubmit = handleSubmit(async data => {
+  const onSubmit = handleSubmit(data => {
     // Update survey unit state
     let newState = surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type;
     if (data.type === contactOutcomeEnum.INTERVIEW_ACCEPTED.type) {
       newState = surveyUnitStateEnum.APPOINTMENT_MADE.type;
     }
-    await addNewState(surveyUnit, newState);
-    surveyUnitIDBService.update({
+    const newStates = addNewState(surveyUnit, newState);
+    persistSurveyUnit({
       ...surveyUnit,
+      states: newStates,
       contactOutcome: data,
     });
     onClose();
diff --git a/src/ui/SurveyUnit/ContactsCard.jsx b/src/ui/SurveyUnit/ContactsCard.jsx
index b69ffc0bf..619b22f11 100644
--- a/src/ui/SurveyUnit/ContactsCard.jsx
+++ b/src/ui/SurveyUnit/ContactsCard.jsx
@@ -77,13 +77,15 @@ export function ContactsCard({ surveyUnit }) {
               <ContactOutcome contact={surveyUnit.contactOutcome} />
               {showDivider && <Divider />}
               <Stack gap={2} width={1} alignItems="stretch">
-                {contactAttempts.map(attempt => (
-                  <ContactAttempt
-                    attempt={attempt}
-                    key={attempt.date}
-                    onDelete={handleDeleteAttempt}
-                  />
-                ))}
+                {contactAttempts
+                  .sort((a, b) => b.date - a.date)
+                  .map(attempt => (
+                    <ContactAttempt
+                      attempt={attempt}
+                      key={attempt.date}
+                      onDelete={handleDeleteAttempt}
+                    />
+                  ))}
               </Stack>
             </Stack>
           </Stack>
@@ -134,7 +136,7 @@ function ContactAttempt({ attempt, onDelete }) {
     const mediumMapping = {
       FIELD: 'mediumFaceToFace',
       TEL: 'mediumPhone',
-      MAIL: 'mediumEmail',
+      EMAIL: 'mediumEmail',
     };
 
     const browserLanguage = navigator.language.split('-')[0];
diff --git a/src/ui/SurveyUnit/IdentificationCard.jsx b/src/ui/SurveyUnit/IdentificationCard.jsx
index fb372042c..7cd8cf46a 100644
--- a/src/ui/SurveyUnit/IdentificationCard.jsx
+++ b/src/ui/SurveyUnit/IdentificationCard.jsx
@@ -22,6 +22,8 @@ import RadioGroup from '@mui/material/RadioGroup';
 import { surveyUnitIDBService } from '../../utils/indexeddb/services/surveyUnit-idb-service';
 import { identificationConfigurationEnum } from '../../utils/enum/IdentificationConfigurationEnum';
 import Box from '@mui/material/Box';
+import { addNewState } from '../../utils/functions';
+import { surveyUnitStateEnum } from '../../utils/enum/SUStateEnum';
 
 /**
  * @param {SurveyUnit} surveyUnit
@@ -29,6 +31,12 @@ import Box from '@mui/material/Box';
 export function IdentificationCard({ surveyUnit }) {
   const { questions, setQuestion, answers, question, setAnswer } =
     useIdentificationQuestions(surveyUnit);
+
+  const stateProofSetAnswer = answer => {
+    const newStates = addNewState(surveyUnit, surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type);
+    setAnswer({ ...surveyUnit, states: newStates }, answer);
+  };
+
   return (
     <>
       <Card p={2} elevation={0}>
@@ -68,7 +76,7 @@ export function IdentificationCard({ surveyUnit }) {
         key={question}
         answers={answers}
         question={question}
-        onSubmit={setAnswer}
+        onSubmit={stateProofSetAnswer}
         onClose={() => setQuestion(undefined)}
       />
     </>
diff --git a/src/ui/SurveyUnit/PersonsCard.jsx b/src/ui/SurveyUnit/PersonsCard.jsx
index 9d8e22dab..99ab5e83a 100644
--- a/src/ui/SurveyUnit/PersonsCard.jsx
+++ b/src/ui/SurveyUnit/PersonsCard.jsx
@@ -8,6 +8,7 @@ import {
   displayAgeInYears,
   getTitle,
   personPlaceholder,
+  toggleFavoriteEmailAndPersist,
   toggleFavoritePhoneNumberAndPersist,
 } from '../../utils/functions';
 import React, { Fragment } from 'react';
@@ -45,6 +46,10 @@ export function PersonsCard({ surveyUnit }) {
     toggleFavoritePhoneNumberAndPersist(surveyUnit, personId, phoneNumber);
   };
 
+  const handleFavMailPerson = personId => {
+    toggleFavoriteEmailAndPersist(surveyUnit, personId);
+  };
+
   return (
     <>
       <Card p={2} elevation={0}>
@@ -70,7 +75,11 @@ export function PersonsCard({ surveyUnit }) {
               {persons.map((p, k) => (
                 <Fragment key={p.id}>
                   {k > 0 && <Divider orientation="vertical" flexItem />}
-                  <PersonInfo onPhoneFav={handleFavPhoneNumber} person={p} />
+                  <PersonInfo
+                    onPhoneFav={handleFavPhoneNumber}
+                    onMailFav={handleFavMailPerson}
+                    person={p}
+                  />
                 </Fragment>
               ))}
             </Row>
@@ -87,10 +96,12 @@ export function PersonsCard({ surveyUnit }) {
  *
  * @param {SurveyUnitPerson} person
  * @param {(personId: number, phoneNumber: SurveyUnitPhoneNumber) => void} onPhoneFav
+ * @param {(personId: number) => void} onMailFav
  */
-function PersonInfo({ person, onPhoneFav }) {
+function PersonInfo({ person, onPhoneFav, onMailFav }) {
   const phoneNumberForSource = source => person.phoneNumbers.find(n => n.source === source);
   const handleFavPhoneNumber = phoneNumber => onPhoneFav(person.id, phoneNumber);
+  const handleFavMail = () => onMailFav(person.id);
   return (
     <Stack gap={2} sx={{ width: '100%' }}>
       <Stack gap={0.5}>
@@ -100,7 +111,34 @@ function PersonInfo({ person, onPhoneFav }) {
         <TextWithLabel label={D.surveyUnitAge}>{displayAgeInYears(person.birthdate)}</TextWithLabel>
       </Stack>
 
-      <TextWithLabel label={D.surveyUnitEmail}>{person.email}</TextWithLabel>
+      {/* temporary feature, mail preference will be replaced by person preference */}
+      <Row
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'auto 20px',
+        }}
+      >
+        <TextWithLabel
+          label={D.surveyUnitEmail}
+          sx={{
+            maxWidth: '80%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            display: 'inline-block',
+          }}
+        >
+          {person.email}
+        </TextWithLabel>
+        {person.email && (
+          <IconButton sx={{ py: 0 }} onClick={handleFavMail}>
+            {person.favoriteEmail ? (
+              <StarIcon size="small" color="yellow" />
+            ) : (
+              <StarBorderIcon size="small" color="surfaceTertiary" />
+            )}
+          </IconButton>
+        )}
+      </Row>
 
       <Stack gap={0.5}>
         <Typography as="div" color="textTertiary" variant="s">
diff --git a/src/ui/SurveyUnit/SurveyUnitHeader.jsx b/src/ui/SurveyUnit/SurveyUnitHeader.jsx
index e1ec50a08..d88f3fe78 100644
--- a/src/ui/SurveyUnit/SurveyUnitHeader.jsx
+++ b/src/ui/SurveyUnit/SurveyUnitHeader.jsx
@@ -12,7 +12,12 @@ import { PrivilegedPerson } from './PrivilegedPerson';
 import Chip from '@mui/material/Chip';
 import { Typography } from '../Typography';
 import { toDoEnum } from '../../utils/enum/SUToDoEnum';
-import { addNewState, getSuTodoState, isValidForTransmission } from '../../utils/functions';
+import {
+  addNewState,
+  getSuTodoState,
+  isValidForTransmission,
+  persistSurveyUnit,
+} from '../../utils/functions';
 import CheckIcon from '@mui/icons-material/Check';
 import Button from '@mui/material/Button';
 import SendIcon from '@mui/icons-material/Send';
@@ -192,8 +197,9 @@ export function SurveyUnitHeader({ surveyUnit }) {
  */
 function SubmitButton({ surveyUnit }) {
   const canSubmit = isValidForTransmission(surveyUnit);
-  const handleSubmit = async () => {
-    await addNewState(surveyUnit, surveyUnitStateEnum.WAITING_FOR_SYNCHRONIZATION.type);
+  const handleSubmit = () => {
+    const newStates = addNewState(surveyUnit, surveyUnitStateEnum.WAITING_FOR_SYNCHRONIZATION.type);
+    persistSurveyUnit({ ...surveyUnit, states: newStates });
   };
 
   if (!canSubmit) {
diff --git a/src/ui/TextWithLabel.jsx b/src/ui/TextWithLabel.jsx
index fc9b92d23..e31072056 100644
--- a/src/ui/TextWithLabel.jsx
+++ b/src/ui/TextWithLabel.jsx
@@ -5,9 +5,10 @@ import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
 
 /**
  * @param {string} label
+ * @param {object} sx - cf. MUI system
  * @param {JSX.Element} children
  */
-export function TextWithLabel({ label, children }) {
+export function TextWithLabel({ label, children, sx }) {
   if (children === true) {
     children = (
       <IconWrapper>
@@ -23,11 +24,11 @@ export function TextWithLabel({ label, children }) {
   }
   return (
     <div>
-      <Typography as="span" color="textTertiary" variant="s">
+      <Typography as="span" color="textTertiary" variant="s" sx={sx}>
         {label} :
       </Typography>
       &nbsp; &nbsp;
-      <Typography as="span" color="textPrimary" variant="s">
+      <Typography as="span" color="textPrimary" variant="s" sx={sx}>
         {children || '-'}
       </Typography>
     </div>
diff --git a/src/utils/functions/convertSUStateInToDo.js b/src/utils/functions/convertSUStateInToDo.js
index 9c05eb620..6b67937c3 100644
--- a/src/utils/functions/convertSUStateInToDo.js
+++ b/src/utils/functions/convertSUStateInToDo.js
@@ -45,5 +45,5 @@ export const convertSUStateInToDo = suState => {
     return toDoEnum.TERMINATED;
   }
 
-  return false;
+  return undefined;
 };
diff --git a/src/utils/functions/seeder.js b/src/utils/functions/seeder.js
index 074b75f2f..a21f656d5 100644
--- a/src/utils/functions/seeder.js
+++ b/src/utils/functions/seeder.js
@@ -1,5 +1,6 @@
 import { surveyUnitStateEnum } from '../enum/SUStateEnum';
 import { contactOutcomeEnum } from '../enum/ContactOutcomeEnum';
+import { contactAttemptEnum } from '../enum/ContactAttemptEnum';
 import { surveyUnitIDBService } from '../indexeddb/services/surveyUnit-idb-service';
 import userIdbService from '../indexeddb/services/user-idb-service';
 import { identificationConfigurationEnum } from 'utils/enum/IdentificationConfigurationEnum';
@@ -179,12 +180,12 @@ export async function seedData() {
       states: states,
       contactAttempts: [
         {
-          status: contactOutcomeEnum.IMPOSSIBLE_TO_REACH.type,
+          status: contactAttemptEnum.TEMPORARY_UNAVAILABLE.type,
           date: new Date().getTime() - getRandomIntBetween(10, 100) * day,
           medium: 'FIELD',
         },
         {
-          status: contactOutcomeEnum.INTERVIEW_ACCEPTED.type,
+          status: contactAttemptEnum.INTERVIEW_ACCEPTED.type,
           date: new Date().getTime() - getRandomIntBetween(3, 9) * day,
           medium: 'FIELD',
         },
@@ -206,11 +207,10 @@ export async function seedData() {
       identificationConfiguration: 'IASCO',
       contactOutcomeConfiguration: 'F2F',
       contactAttemptConfiguration: 'F2F',
-      selected: false,
       contactOutcome: {
         date: new Date().getTime() - 2 * day,
         type: contactOutcomeEnum.INTERVIEW_ACCEPTED.type,
-        totalNumberOfContactAttempts: 1,
+        totalNumberOfContactAttempts: 2,
       },
     });
   }
@@ -231,6 +231,20 @@ export async function seedData() {
     lastName: 'Absent',
     identificationConfiguration: identificationConfigurationEnum.NOIDENT,
   });
+  surverUnits.push({
+    ...surverUnits[0],
+    managementStartDate: new Date().getTime() - 10 * day,
+    interviewerStartDate: new Date().getTime() - 9 * day,
+    identificationPhaseStartDate: new Date().getTime() - 8 * day,
+    collectionStartDate: new Date().getTime() - 7 * day,
+    collectionEndDate: new Date().getTime() - 6 * day,
+    endDate: new Date().getTime() + 15 * day,
+    id: 'questNotAvailable',
+    identification: {},
+    firstName: 'Flin',
+    lastName: 'Ished',
+    identificationConfiguration: identificationConfigurationEnum.NOIDENT,
+  });
   await userIdbService.insert({
     id: 1,
     title: 'MISTER',
diff --git a/src/utils/functions/surveyUnitFunctions.js b/src/utils/functions/surveyUnitFunctions.js
index 002745732..197d85a39 100644
--- a/src/utils/functions/surveyUnitFunctions.js
+++ b/src/utils/functions/surveyUnitFunctions.js
@@ -30,21 +30,15 @@ export const getCommentByType = (type, su) => {
  * @returns {{ order: string, value: string, color: string }}
  */
 export const getSuTodoState = surveyUnit => {
-  return convertSUStateInToDo(getLastState(surveyUnit).type);
+  return convertSUStateInToDo(getLastState(surveyUnit?.states ?? [])?.type);
 };
 
 /**
  * @deprecated shouldn't be used outside of surveyUnitFunctions, use getSuTodoState() instead
- * @param {SurveyUnit} su
- * @returns {SurveyUnitState}
+ * @param {{ status: string, date: number, id?: string }[]} states
+ * @returns {SurveyUnitState} or undefined if no states
  */
-export const getLastState = su => {
-  if (Array.isArray(su.states) && su.states.length === 1) return su.states[0];
-  if (Array.isArray(su.states) && su.states.length > 1) {
-    return su.states.reduce((a, b) => (a.date > b.date ? a : b));
-  }
-  return false;
-};
+export const getLastState = states => states?.slice?.().sort((a, b) => b.date - a.date)?.[0];
 
 const DAY = 1000 * 24 * 60 * 60;
 
@@ -65,18 +59,18 @@ export const daysLeftForSurveyUnit = su => {
 };
 
 const checkValidityForTransmissionNoident = su => {
-  const { contactAttempts, contactOutcome } = su;
+  const { contactAttempts, contactOutcome, states = [] } = su;
   if (contactAttempts.length === 0) return false;
   if (!contactOutcome) return false;
   const { type, totalNumberOfContactAttempts } = contactOutcome;
   if (totalNumberOfContactAttempts === 0) return false;
   if (type !== contactOutcomeEnum.INTERVIEW_ACCEPTED.type) return true;
-  if (getLastState(su).type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type) return true;
+  if (getLastState(states)?.type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type) return true;
   return false;
 };
 
 const checkValidityForTransmissionIasco = su => {
-  const { contactOutcome, identification, identificationConfiguration } = su;
+  const { contactOutcome, identification, identificationConfiguration, states = [] } = su;
 
   if (!identificationIsFinished(identificationConfiguration, identification)) return false;
   if (!contactOutcome) return false;
@@ -86,7 +80,7 @@ const checkValidityForTransmissionIasco = su => {
 
   if (
     type === contactOutcomeEnum.INTERVIEW_ACCEPTED.type &&
-    !getLastState(su).type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type
+    !getLastState(states)?.type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type
   )
     return false;
 
@@ -101,7 +95,7 @@ const checkValidityForTransmissionIasco = su => {
     return false;
 
   // TO finish There
-  return getLastState(su).type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type;
+  return getLastState(states)?.type === surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type;
 };
 
 export const isValidForTransmission = su => {
@@ -134,7 +128,7 @@ export const areCaEqual = (ca, anotherCa) => {
 export const deleteContactAttempt = (surveyUnit, contactAttempt) => {
   const { contactAttempts } = surveyUnit;
   const newCA = contactAttempts.filter(ca => !areCaEqual(ca, contactAttempt));
-  surveyUnitIdbService.update({ ...surveyUnit, contactAttempts: newCA });
+  persistSurveyUnit({ ...surveyUnit, contactAttempts: newCA });
 };
 
 export const getContactAttemptNumber = surveyUnit =>
@@ -155,22 +149,36 @@ export const lastContactAttemptIsSuccessfull = surveyUnit => {
 
 const isContactAttemptOk = surveyUnit => lastContactAttemptIsSuccessfull(surveyUnit);
 
-const addLatestState = (surveyUnit, newState) => {
-  const previousLatestState = getLastState(surveyUnit);
-  const { date } = previousLatestState;
-  if (newState.date <= date) {
-    surveyUnit.states.push({ ...newState, date: date + 1 });
+const addLatestState = (states, newState) => {
+  const newStates = states?.slice?.() ?? [];
+  const previousLatestState = getLastState(newStates);
+
+  const date = previousLatestState?.date;
+  if (date && newState.date <= date) {
+    newStates.push({ ...newState, date: date + 1 });
   } else {
-    surveyUnit.states.push(newState);
+    newStates.push(newState);
   }
+  return newStates;
 };
 
-const addContactState = async (surveyUnit, newState) => {
+const copyStatesFromSurveyUnit = surveyUnit => surveyUnit?.states?.slice?.() ?? [];
+
+/**
+ * Add a contact-related state and ensures states cohesity
+ *  => e.g. could add another state after or before newState
+ * @param {*} surveyUnit
+ * @param {{String: type, String: value}} newState SUStateEnum entry
+ * @returns {Array.<{ type: string, value: string }>} updated states
+ */
+const addContactState = (surveyUnit, newState) => {
+  // shallow copy or new empty array
+  let newStates = copyStatesFromSurveyUnit(surveyUnit);
   switch (newState.type) {
     case surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type:
-      addLatestState(surveyUnit, newState);
+      newStates = addLatestState(newStates, newState);
       if (isContactAttemptOk(surveyUnit)) {
-        addLatestState(surveyUnit, {
+        newStates = addLatestState(newStates, {
           date: new Date().getTime(),
           type: surveyUnitStateEnum.APPOINTMENT_MADE.type,
         });
@@ -179,44 +187,46 @@ const addContactState = async (surveyUnit, newState) => {
 
     case surveyUnitStateEnum.APPOINTMENT_MADE.type:
       if (getContactAttemptNumber(surveyUnit) === 0) {
-        addLatestState(surveyUnit, {
+        newStates = addLatestState(newStates, {
           date: new Date().getTime(),
           type: surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type,
         });
       }
-      addLatestState(surveyUnit, newState);
+      newStates = addLatestState(newStates, newState);
       break;
     default:
       break;
   }
-  return surveyUnit;
+  return newStates;
 };
 
 /**
- * Add a new state to a surveyUnit
+ * Add a new state to a surveyUnit, with state cohesion
  *
- * @param surveyUnit
- * @param stateType
- * @returns {Promise<SurveyUnit>}
+ * @param {SurveyUnit } surveyUnit
+ * @param {String }stateType
+ * @returns {Array.<{ type: string, value: string }>}
  */
-export const addNewState = async (surveyUnit, stateType) => {
-  const lastStateType = getLastState(surveyUnit).type;
+export const addNewState = (surveyUnit, stateType) => {
+  // init returned states : previous states or empty array
+  let newStates = copyStatesFromSurveyUnit(surveyUnit);
+
+  const lastStateType = getLastState(newStates)?.type;
   const newState = { date: new Date().getTime(), type: stateType };
-  let newSu = surveyUnit;
   switch (lastStateType) {
     case surveyUnitStateEnum.QUESTIONNAIRE_STARTED.type:
       if (CONTACT_RELATED_STATES.includes(stateType)) {
-        newSu = await addContactState(newSu, newState);
-        addLatestState(newSu, { date: new Date().getTime(), type: lastStateType });
+        newStates = addContactState(surveyUnit, newState);
+        newStates = addLatestState(newStates, { date: new Date().getTime(), type: lastStateType });
       } else {
-        addLatestState(newSu, newState);
+        newStates = addLatestState(newStates, newState);
       }
       break;
 
     case surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type:
       if (surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type === stateType) {
         if (isContactAttemptOk(surveyUnit)) {
-          addLatestState(newSu, {
+          newStates = addLatestState(newStates, {
             date: new Date().getTime(),
             type: surveyUnitStateEnum.APPOINTMENT_MADE.type,
           });
@@ -224,9 +234,9 @@ export const addNewState = async (surveyUnit, stateType) => {
         break;
       }
       if (surveyUnitStateEnum.APPOINTMENT_MADE.type === stateType) {
-        newSu = await addContactState(newSu, newState);
+        newStates = addContactState(surveyUnit, newState);
       } else {
-        addLatestState(newSu, newState);
+        newStates = addLatestState(newStates, newState);
       }
       break;
 
@@ -235,19 +245,9 @@ export const addNewState = async (surveyUnit, stateType) => {
         break;
       }
       if (surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type === stateType) {
-        newSu = await addContactState(newSu, newState);
+        newStates = addContactState(surveyUnit, newState);
       } else {
-        addLatestState(newSu, newState);
-      }
-      break;
-
-    case surveyUnitStateEnum.IN_PREPARATION.type:
-    case surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE.type:
-    case surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type:
-      if (CONTACT_RELATED_STATES.includes(stateType)) {
-        newSu = await addContactState(newSu, newState);
-      } else {
-        addLatestState(newSu, newState);
+        newStates = addLatestState(newStates, newState);
       }
       break;
 
@@ -256,37 +256,52 @@ export const addNewState = async (surveyUnit, stateType) => {
     case surveyUnitStateEnum.TO_BE_REVIEWED.type:
     case surveyUnitStateEnum.FINALIZED.type:
       if (CONTACT_RELATED_STATES.includes(stateType)) {
-        newSu = await addContactState(newSu, newState);
-        addLatestState(newSu, {
+        newStates = addContactState(surveyUnit, newState);
+        newStates = addLatestState(newStates, {
           date: new Date().getTime(),
           type: surveyUnitStateEnum.WAITING_FOR_TRANSMISSION.type,
         });
       } else {
-        addLatestState(newSu, newState);
+        newStates = addLatestState(newStates, newState);
       }
       break;
+
+    case surveyUnitStateEnum.IN_PREPARATION.type:
+    case surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE.type:
+    case surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type:
+    // if no previousState
     default:
+      if (CONTACT_RELATED_STATES.includes(stateType)) {
+        newStates = addContactState(surveyUnit, newState);
+      } else {
+        newStates = addLatestState(newStates, newState);
+      }
       break;
   }
-  newSu.selected = false;
-  await surveyUnitIdbService.addOrUpdate(newSu);
-  return newSu;
+
+  return newStates;
 };
 
+/**
+ * Check if a surveyUnit meets criteria to update state from
+ *  VIN to VIC (lastState is VIN and identificationStartDate has passed)
+ * @param {*} surveyUnit
+ * @returns {[]} newStates
+ */
 export const updateStateWithDates = surveyUnit => {
-  const lastState = getLastState(surveyUnit).type;
+  let newStates = copyStatesFromSurveyUnit(surveyUnit);
+  const lastState = getLastState(newStates)?.type;
   const currentDate = new Date().getTime();
   const { identificationPhaseStartDate } = surveyUnit;
-  let result = 0;
+
   if (
     lastState === surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE.type &&
     currentDate > identificationPhaseStartDate
   ) {
-    result = 1;
-    addNewState(surveyUnit, surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type);
+    newStates = addNewState(surveyUnit, surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type);
   }
 
-  return result;
+  return newStates;
 };
 
 export const isQuestionnaireAvailable = su => inaccessible => {
@@ -322,8 +337,8 @@ export const applyFilters = (surveyUnits, filters) => {
         normalize(lastName).includes(normalizedSearchFilter) ||
         su.id.toString().toLowerCase().includes(normalizedSearchFilter) ||
         normalize(su.address.l6.split(' ').slice(1).toString()).includes(normalizedSearchFilter) ||
-        convertSUStateInToDo(getLastState(su).type)
-          .value.toLowerCase()
+        convertSUStateInToDo(getLastState(su.states)?.type)
+          ?.value.toLowerCase()
           .includes(normalizedSearchFilter) ||
         normalize(su.campaign).includes(normalizedSearchFilter)
       );
@@ -342,7 +357,9 @@ export const applyFilters = (surveyUnits, filters) => {
 
   const filterByToDo = su => {
     if (toDoFilter.length > 0) {
-      return toDoFilter.includes(convertSUStateInToDo(getLastState(su).type).order.toString());
+      return toDoFilter.includes(
+        convertSUStateInToDo(getLastState(su.states)?.type)?.order?.toString?.()
+      );
     }
     return true;
   };
@@ -355,7 +372,10 @@ export const applyFilters = (surveyUnits, filters) => {
   };
 
   const filterByTerminated = su => {
-    return !terminatedFilter || convertSUStateInToDo(getLastState(su).type) !== toDoEnum.TERMINATED;
+    return (
+      !terminatedFilter ||
+      convertSUStateInToDo(getLastState(su.states)?.type) !== toDoEnum.TERMINATED
+    );
   };
 
   const filteredSU = surveyUnits
@@ -510,13 +530,13 @@ export const getprivilegedPerson = surveyUnit => {
 export const createStateIds = async latestSurveyUnit => {
   const { id, states } = latestSurveyUnit;
   const previousSurveyUnit = await surveyUnitIdbService.getById(id);
-  surveyUnitIdbService.addOrUpdateSU({ ...previousSurveyUnit, states });
+  persistSurveyUnit({ ...previousSurveyUnit, states });
 };
 
 export const createCommunicationRequestIds = async latestSurveyUnit => {
   const { id, communicationRequests } = latestSurveyUnit;
   const previousSurveyUnit = await surveyUnitIdbService.getById(id);
-  surveyUnitIdbService.addOrUpdateSU({ ...previousSurveyUnit, communicationRequests });
+  persistSurveyUnit({ ...previousSurveyUnit, communicationRequests });
 };
 
 export const toggleFavoritePhoneNumber = (surveyUnit, personId, phoneNumber) => {
@@ -536,7 +556,7 @@ export const toggleFavoritePhoneNumber = (surveyUnit, personId, phoneNumber) =>
 
 export const toggleFavoritePhoneNumberAndPersist = (surveyUnit, personId, phoneNumber) => {
   const updatedSurveyUnit = toggleFavoritePhoneNumber(surveyUnit, personId, phoneNumber);
-  surveyUnitIdbService.addOrUpdateSU(updatedSurveyUnit);
+  persistSurveyUnit(updatedSurveyUnit);
 };
 
 export const toggleFavoriteEmail = (surveyUnit, personId) => {
@@ -549,5 +569,7 @@ export const toggleFavoriteEmail = (surveyUnit, personId) => {
 };
 export const toggleFavoriteEmailAndPersist = (surveyUnit, personId) => {
   const updatedSurveyUnit = toggleFavoriteEmail(surveyUnit, personId);
-  surveyUnitIdbService.addOrUpdateSU(updatedSurveyUnit);
+  persistSurveyUnit(updatedSurveyUnit);
 };
+
+export const persistSurveyUnit = surveyUnit => surveyUnitIdbService.addOrUpdateSU(surveyUnit);
diff --git a/src/utils/functions/surveyUnitFunctions.test.js b/src/utils/functions/surveyUnitFunctions.test.js
index 5b1a99dc8..edbe31bdb 100644
--- a/src/utils/functions/surveyUnitFunctions.test.js
+++ b/src/utils/functions/surveyUnitFunctions.test.js
@@ -1,22 +1,7 @@
 import { surveyUnitStateEnum } from 'utils/enum/SUStateEnum';
 import { contactAttemptEnum } from 'utils/enum/ContactAttemptEnum';
 import { contactOutcomeEnum } from 'utils/enum/ContactOutcomeEnum';
-import functions from 'utils/functions/index';
-
-vi.mock('utils/functions', async () => {
-  const originalModule = await vi.importActual('utils/functions');
-  //Mock addNewState
-  return {
-    default: {
-      ...originalModule,
-    },
-    addNewState: vi.fn(),
-  };
-});
-
-// Mock for surveyUnitFunctions done here
-
-const {
+import {
   getContactAttemptNumber,
   getLastState,
   isSelectable,
@@ -26,7 +11,7 @@ const {
   isValidForTransmission,
   lastContactAttemptIsSuccessfull,
   areCaEqual,
-} = functions;
+} from 'utils/functions/index';
 
 describe('getCommentByType', () => {
   const noCommentsSu = {};
@@ -51,22 +36,20 @@ describe('getCommentByType', () => {
 
 describe('getLastState', () => {
   it('should return the only state', () => {
-    expect(getLastState({ states: [{ id: 1, date: 1616070963000 }] })).toEqual({
+    expect(getLastState([{ id: 1, date: 1616070963000 }])).toEqual({
       id: 1,
       date: 1616070963000,
     });
   });
-  it('should return false if empty states', () => {
-    expect(getLastState({ states: [] })).toEqual(false);
+  it('should return undefined if empty states', () => {
+    expect(getLastState([])).toEqual(undefined);
   });
   it('should return state with latest date', () => {
     expect(
-      getLastState({
-        states: [
-          { id: 1, date: 1616070963000 },
-          { id: 2, date: 1616070000000 },
-        ],
-      })
+      getLastState([
+        { id: 1, date: 1616070963000 },
+        { id: 2, date: 1616070000000 },
+      ])
     ).toEqual({
       id: 1,
       date: 1616070963000,
@@ -169,31 +152,36 @@ describe('getContactAttemptNumber', () => {
   });
 });
 describe('updateStateWithDates', () => {
+  const NOW = new Date(2021, 2, 15).getTime();
   beforeAll(() => {
-    vi.useFakeTimers('modern').setSystemTime(new Date(2021, 2, 15).getTime());
+    vi.useFakeTimers('modern').setSystemTime(NOW);
   });
   afterAll(() => {
     vi.useRealTimers();
   });
   const beforeCurrent = new Date(2021, 2, 10).getTime();
   const afterCurrent = new Date(2021, 2, 20).getTime();
-  it('should return 0 if SU lastState is not VNC', () => {
+  it('should return initial states if lastState is not VNC', () => {
     const surveyUnit = {};
-    expect(updateStateWithDates(surveyUnit)).toEqual(0);
+    expect(updateStateWithDates(surveyUnit)).toEqual([]);
+    expect(updateStateWithDates({ states: [] })).toEqual([]);
   });
-  it('should return 0 if SU lastState is VNC and currentDate < identificationPhaseStart', async () => {
+  it('should return return initial states if SU lastState is VNC and currentDate < identificationPhaseStart', () => {
     const surveyUnit = {
       states: [surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE],
       identificationPhaseStartDate: afterCurrent,
     };
-    expect(updateStateWithDates(surveyUnit)).toEqual(0);
+    expect(updateStateWithDates(surveyUnit)).toEqual([surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE]);
   });
-  it('should return 1 if SU is VNC and currentDate > identificationPhaseStart', async () => {
+  it('should return 1 if SU is VNC and currentDate > identificationPhaseStart', () => {
     const surveyUnit = {
-      states: [surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE],
+      states: [{ type: surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE.type, date: beforeCurrent }],
       identificationPhaseStartDate: beforeCurrent,
     };
-    expect(updateStateWithDates(surveyUnit)).toEqual(1);
+    expect(updateStateWithDates(surveyUnit)).toEqual([
+      { type: surveyUnitStateEnum.VISIBLE_NOT_CLICKABLE.type, date: beforeCurrent },
+      { type: surveyUnitStateEnum.VISIBLE_AND_CLICKABLE.type, date: NOW },
+    ]);
   });
 });
 
diff --git a/src/utils/hooks/useIdentificationQuestions.js b/src/utils/hooks/useIdentificationQuestions.js
index dc51f5542..8f8a2f265 100644
--- a/src/utils/hooks/useIdentificationQuestions.js
+++ b/src/utils/hooks/useIdentificationQuestions.js
@@ -2,8 +2,7 @@ import { identificationConfigurationEnum } from '../enum/IdentificationConfigura
 import { identificationQuestionsEnum } from '../enum/IdentificationQuestionsEnum';
 import { identificationAnswersEnum } from '../enum/IdentificationAnswersEnum';
 import { useMemo, useState } from 'react';
-import { addNewState } from '../functions';
-import { surveyUnitStateEnum } from '../enum/SUStateEnum';
+import { persistSurveyUnit } from '../functions';
 
 const getQuestions = config => {
   switch (config) {
@@ -79,8 +78,8 @@ export function useIdentificationQuestions(surveyUnit) {
   /**
    * @param {Answer} answer
    */
-  const setAnswer = answer => {
-    // When an answer is marker as "concluded" it makes next answer undefined
+  const setAnswer = (surveyUnit, answer) => {
+    // When an answer is marked as "concluded" it makes next answer undefined
     let concluded = false;
     // Build the identification object expected for the surveyUnit
     const identification = Object.fromEntries(
@@ -107,13 +106,10 @@ export function useIdentificationQuestions(surveyUnit) {
       setQuestion(nextIndex ? questions[nextIndex] : undefined);
     }
 
-    addNewState(
-      {
-        ...surveyUnit,
-        identification,
-      },
-      surveyUnitStateEnum.AT_LEAST_ONE_CONTACT.type
-    );
+    persistSurveyUnit({
+      ...surveyUnit,
+      identification,
+    });
   };
 
   return {
diff --git a/src/utils/hooks/useQueenListener.js b/src/utils/hooks/useQueenListener.js
index 012d595f3..7c65cc621 100644
--- a/src/utils/hooks/useQueenListener.js
+++ b/src/utils/hooks/useQueenListener.js
@@ -3,6 +3,7 @@ import questionnaireEnum from 'utils/enum/QuestionnaireStateEnum';
 import surveyUnitDBService from 'utils/indexeddb/services/surveyUnit-idb-service';
 import { surveyUnitStateEnum } from 'utils/enum/SUStateEnum';
 import { useEffect } from 'react';
+import { persistSurveyUnit } from '../functions';
 
 const computeSurveyUnitState = questionnaireState => {
   switch (questionnaireState) {
@@ -35,10 +36,8 @@ const updateSurveyUnit = (surveyUnitID, queenState) => {
     }
 
     const newStateType = computeSurveyUnitState(newQuestionnaireState);
-    const update = async () => {
-      await addNewState(su, newStateType);
-    };
-    update();
+    const newStates = addNewState(su, newStateType);
+    persistSurveyUnit({ ...su, states: newStates });
   });
 };