Merge pull request #139 from InseeFr/develop

Fix restore favorite mail (#138)
InseeFr · Apr 23, 2024 · 7cffeeb · 7cffeeb
2 parents 7809ee2 + 54119bf
commit 7cffeeb
Show file tree

Hide file tree

Showing 19 changed files with 258 additions and 166 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,13 +22,21 @@ 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
  */
 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
@@ -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
@@ -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
@@ -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>