feat: add label & popup when the reviewer wants to lock all surveys

src/i18n/locales/fr/fr.json

@@ -230,6 +230,7 @@
             "validate-all-empties-surveys": "Valider les carnets vides",
             "validate-survey": "Valider le carnet",
             "lock-survey": "Verrouiller le carnet",
+            "lock-all-surveys": "Verrouiller tous les carnets",
             "not-lock-survey": "Devérrouiller le carnet",
             "status-survey": {
                 "locked": "Verrouillé",
@@ -242,9 +243,11 @@
             },
             "lock-popup": {
                 "boldContent": "Êtes-vous sûr de vouloir verrouiller le carnet ?",
+                "boldContent-all-surveys": "Êtes-vous sûr de vouloir verrouiller tous les carnets ?",
                 "boldContent-not-locked": "Êtes-vous sûr de vouloir déverrouiller le carnet ?",
                 "boldContent-not-unlocked": "Vous ne pouvez pas déverrouiller le carnet !",
                 "content": "En cochant cette option, l'enquêté ne pourra pas modifier le carnet.",
+                "content-all-surveys": "En cochant cette option, les enquêtés ne pourront pas modifier les carnets.",
                 "content-not-locked": "En cochant cette option, l'enquêté pourra modifier le carnet.",
                 "content-not-unlocked": "Une fois que vous avez commencé à remplir le carnet, vous ne pouvez pas le déverrouiller.",
                 "confirm-button": "Compris"

src/pages/home-surveyed/HomeSurveyed.tsx

@@ -8,6 +8,7 @@ import { ReactComponent as LockIcon } from "assets/illustration/mui-icon/lock.sv
 import { ReactComponent as PowerSettingsIcon } from "assets/illustration/mui-icon/power-settings.svg";
 import { ReactComponent as RemoveCircleIcon } from "assets/illustration/mui-icon/remove-circle.svg";
 import { ReactComponent as ReminderNoteImg } from "assets/illustration/reminder-note.svg";
+import { ReactComponent as ErrorIcon } from "assets/illustration/error/activity.svg";
 import BreadcrumbsReviewer from "components/commons/BreadcrumbsReviewer/BreadcrumbsReviewer";
 import FlexCenter from "components/commons/FlexCenter/FlexCenter";
 import LoadingFull from "components/commons/LoadingFull/LoadingFull";
@@ -26,7 +27,7 @@ import ErrorPage from "pages/error/ErrorPage";
 import ErrorProvider from "pages/error/ErrorProvider";
 import React, { useCallback, useEffect } from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import { useTranslation } from "react-i18next";
+import { TFunction, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { logout } from "service/auth-service";
 import { lunaticDatabase } from "service/lunatic-database";
@@ -62,6 +63,7 @@ const HomeSurveyedPage = () => {
     const [initialized, setInitialized] = React.useState<boolean>(false);
     const [state, setState] = React.useState<LunaticData | undefined>(undefined);
     const [isAddActivityOrRouteOpen, setIsAddActivityOrRouteOpen] = React.useState(false);
+    const [isAlertLockDisplayed, setIsAlertLockDisplayed] = React.useState<boolean>(false);
     const [datas, setDatas] = React.useState<Person[]>([]);
 
     const source = getSource(SourcesEnum.WORK_TIME_SURVEY);
@@ -70,6 +72,14 @@ const HomeSurveyedPage = () => {
     const idHousehold = localStorage.getItem(LocalStorageVariableEnum.ID_HOUSEHOLD);
     let userDatas: Person[];
 
+    //TODO: Set Alert to separate component as it is the same as in activity page minus the unlock labels
+    const alertLockLabels = {
+        boldContent: t("page.reviewer-home.lock-popup.boldContent-all-surveys"),
+        content: t("page.reviewer-home.lock-popup.content-all-surveys"),
+        cancel: t("page.alert-when-quit.alert-cancel"),
+        complete: t("page.reviewer-home.lock-survey"),
+    };
+
     const initHome = (idsSurveysSelected: string[]) => {
         initializeHomeSurveys(idHousehold ?? "").then(() => {
             // initializeSurveysDatasCache(idsSurveysSelected).finally(() => {
@@ -200,6 +210,12 @@ const HomeSurveyedPage = () => {
         navigate(getNavigatePath(EdtRoutesNameEnum.REVIEWER_HOME));
     }, []);
 
+    const displayAlert = useCallback(
+        (setDisplayAlert: React.Dispatch<React.SetStateAction<boolean>>, display: boolean) => () =>
+            setDisplayAlert(display),
+        [],
+    );
+
     const renderReminderNote = () => {
         return (
             <FlexCenter className={classes.spacing}>
@@ -293,6 +309,7 @@ const HomeSurveyedPage = () => {
                         !survey.startsWith("activitySurvey") && !survey.startsWith("workTimeSurvey"),
                 );
             initHome(idsSurveysSelected);
+            setIsAlertLockDisplayed(false);
         });
     }, []);
 
@@ -314,6 +331,13 @@ const HomeSurveyedPage = () => {
         let groups = Object.keys(userDatas);
         return renderPageOrLoadingOrError(
             <ErrorBoundary FallbackComponent={ErrorProvider}>
+                <Alert
+                    isAlertDisplayed={isAlertLockDisplayed}
+                    onCompleteCallBack={lockSurveys}
+                    onCancelCallBack={displayAlert(setIsAlertLockDisplayed, false)}
+                    labels={alertLockLabels}
+                    icon={<ErrorIcon aria-label={t("page.alert-when-quit.alt-alert-icon")} />}
+                ></Alert>
                 {renderReminderNote()}
 
                 <Box className={classes.groupCardBox}>
@@ -347,11 +371,15 @@ const HomeSurveyedPage = () => {
                         </Button>
                         <Button
                             variant="contained"
-                            onClick={lockSurveys}
+                            onClick={displayAlert(setIsAlertLockDisplayed, true)}
                             className={cx(classes.navButton)}
                             disabled={!navigator.onLine}
                         >
-                            <LockIcon aria-label={t("accessibility.asset.mui-icon.padlock")} />
+                            <LockIcon
+                                className={cx(classes.lockIcon)}
+                                aria-label={t("accessibility.asset.mui-icon.padlock")}
+                            />
+                            {t("page.reviewer-home.lock-all-surveys")}
                         </Button>
                     </FlexCenter>
                 </Box>
@@ -515,6 +543,10 @@ const useStyles = makeStylesEdt({ "name": { NavButton: HomeSurveyedPage } })(the
     emptyHeader: {
         visibility: "hidden",
     },
+    lockIcon: {
+        width: "1.5rem",
+        marginRight: "0.2rem",
+    },
 }));
 
 export default HomeSurveyedPage;

src/service/survey-state-service.ts

@@ -141,26 +141,20 @@ const validateSurvey = (idSurvey: string) => {
 const validateAllEmptySurveys = (idHousehold: string) => {
     const idSurveys = getSurveysIdsForHousehold(idHousehold);
     const promisesToWait: Promise<any>[] = [];
-
+    console.log("Validate all empty surveys", idSurveys);
     idSurveys.forEach((idSurvey: string) => {
         const data = getData(idSurvey || "");
         const stateData = getLocalSurveyStateData(data);
-
-        if (stateData.state != StateDataStateEnum.VALIDATED) {
-            const validatedStateData: StateData = {
-                idStateData: stateData.idStateData,
-                state: StateDataStateEnum.VALIDATED,
-                date: Date.now(),
-                currentPage: getCurrentPage(data),
-            };
-
-            const value = getValue(idSurvey, FieldNameEnum.FIRSTNAME) as string;
-            if (value == null || value.length == 0) {
-                data.stateData = validatedStateData;
-                promisesToWait.push(saveData(idSurvey, data, false, true, validatedStateData));
-            }
-        } else {
-            promisesToWait.push(saveData(idSurvey, data, false, true, stateData));
+        const validatedStateData: StateData = {
+            idStateData: stateData.idStateData,
+            state: StateDataStateEnum.VALIDATED,
+            date: Date.now(),
+            currentPage: getCurrentPage(data),
+        };
+        const value = getValue(idSurvey, FieldNameEnum.FIRSTNAME) as string;
+        if (value == null || value.length == 0) {
+            data.stateData = validatedStateData;
+            promisesToWait.push(saveData(idSurvey, data, false, true, validatedStateData));
         }
     });