feat: reminders notice letters

Dockerfile

@@ -21,11 +21,11 @@ ENV NGINX_GROUP=nginx
 USER $NGINX_USER_ID
 
 # Add build to nginx root webapp
-COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /pearl/build /usr/share/nginx/html
+COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /sonor/build /usr/share/nginx/html
 
 # Copy nginx configuration
 RUN rm /etc/nginx/conf.d/default.conf
-COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /pearl/nginx.conf /etc/nginx/conf.d/nginx.conf
+COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /sonor/nginx.conf /etc/nginx/conf.d/nginx.conf
 
 # Add entrypoint and start nginx server
 RUN chmod 755 /usr/share/nginx/html/vite-envs.sh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonor",
-  "version": "0.8.0",
+  "version": "0.9.4",
   "private": true,
   "dependencies": {
     "@tanstack/react-query": "4.0.5",
@@ -92,7 +92,6 @@
   },
   "devDependencies": {
     "@originjs/vite-plugin-federation": "^1.2.1",
-    "@playwright/test": "^1.49.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^7.2.1",
@@ -121,6 +120,7 @@
     "stylelint": "^16.11.0",
     "stylelint-config-standard": "^36.0.1",
     "vite": "^4.2.1",
+    "vite-envs": "^4.4.11",
     "vite-tsconfig-paths": "^3.6.0",
     "vitest": "^2.1.8"
   }

src/components/App/App.spec.tsx

@@ -1,23 +1,23 @@
-import { screen, render, act } from '@testing-library/react';
-import { App } from './App';
-import { mockOidcForUser, mockOidcFailed } from '../CustomHooks/useAuth';
-import { it, vi } from 'vitest';
-import D from '../../i18n';
-import { OIDC } from '../../utils/constants.json';
+import { screen, render, act } from "@testing-library/react";
+import { App } from "./App";
+import { mockOidcForUser, mockOidcFailed } from "../CustomHooks/useAuth";
+import { it, vi } from "vitest";
+import D from "../../i18n";
+import { OIDC } from "../../utils/constants.json";
 
-vi.mock('components/CustomHooks/useConfiguration', () => ({
+vi.mock("components/CustomHooks/useConfiguration", () => ({
   useConfiguration: () => ({
     AUTHENTICATION_MODE: OIDC,
   }),
 }));
 
-it('Component is displayed ', async () => {
+it("Component is displayed ", async () => {
   mockOidcForUser();
   render(<App />);
   await screen.findByText(D.surveyList);
 });
 
-it('Component is not displayed ', async () => {
+it("Component is not displayed ", async () => {
   mockOidcFailed();
   render(<App />);
   await screen.findByText(D.cannotAuth);

src/components/App/App.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
-import { ANONYMOUS, OIDC } from '../../utils/constants.json';
-import DataFormatter from '../../utils/DataFormatter';
-import D from '../../i18n';
-import View from 'components/View/View';
-import { useIsAuthenticated } from 'components/CustomHooks/useAuth';
-import { toast } from 'react-toastify';
-import { useConfiguration } from 'components/CustomHooks/useConfiguration';
+import { useEffect, useRef, useState } from "react";
+import { ANONYMOUS, OIDC } from "../../utils/constants.json";
+import DataFormatter from "../../utils/DataFormatter";
+import D from "../../i18n";
+import View from "components/View/View";
+import { useIsAuthenticated } from "components/CustomHooks/useAuth";
+import { toast } from "react-toastify";
+import { useConfiguration } from "components/CustomHooks/useConfiguration";
 
 export const App = () => {
   const [authenticated, setAuthenticated] = useState(false);
@@ -23,9 +23,15 @@ export const App = () => {
       timeoutIdRef.current = setTimeout(() => renewTokens, 5 * 60 * 1000);
     };
 
-    const events = ['mousemove', 'mousedown', 'keypress', 'touchstart', 'click'];
+    const events = [
+      "mousemove",
+      "mousedown",
+      "keypress",
+      "touchstart",
+      "click",
+    ];
 
-    events.forEach(event => {
+    events.forEach((event) => {
       window.addEventListener(event, resetInactivityTimeout);
     });
 
@@ -35,7 +41,7 @@ export const App = () => {
       if (timeoutIdRef.current) {
         clearTimeout(timeoutIdRef.current);
       }
-      events.forEach(event => {
+      events.forEach((event) => {
         window.removeEventListener(event, resetInactivityTimeout);
       });
     };
@@ -44,17 +50,23 @@ export const App = () => {
   useEffect(() => {
     if (configuration.AUTHENTICATION_MODE === ANONYMOUS) {
       const dataRetreiver = new DataFormatter();
-      dataRetreiver.getUserInfo(data => {
+      dataRetreiver.getUserInfo((data) => {
         if (data.error) {
           setContactFailed(true);
         } else {
           setAuthenticated(true);
           setData(data);
         }
       });
-    } else if (configuration.AUTHENTICATION_MODE === OIDC && tokens?.accessToken) {
-      const dataRetreiver = new DataFormatter(tokens.accessToken, configuration);
-      dataRetreiver.getUserInfo(data => {
+    } else if (
+      configuration.AUTHENTICATION_MODE === OIDC &&
+      tokens?.accessToken
+    ) {
+      const dataRetreiver = new DataFormatter(
+        tokens.accessToken,
+        configuration
+      );
+      dataRetreiver.getUserInfo((data) => {
         setAuthenticated(data !== undefined);
         setData(data);
       });

src/components/Header/Header.test.jsx

@@ -62,7 +62,7 @@ DataFormatter.mockImplementation(() => ({
   getDataForCampaignPortal: (a, cb) => cb(campaignPortalData),
   getDataForListSU: (a, cb) => cb(listSU),
   getUserInfo: cb => cb(userData),
-  getDataForMonitoringTable: (survey, date, pagination, mode, cb) => {
+  getDataForMonitoringTable: (survey, date, mode, cb) => {
     switch (mode) {
       case C.BY_INTERVIEWER_ONE_SURVEY:
         cb(respModeByInterviewers1Survey);

src/components/MonitoringTable/FollowUpTable.jsx

@@ -6,19 +6,17 @@ import C from '../../utils/constants.json';
 import D from '../../i18n';
 import './MonitoringTable.css';
 
-function FollowUpTable({
-  data, sort, displayedLines, pagination, mode, handleSort,
-}) {
+// TODO : better handling of NaN values
+function FollowUpTable({ data, sort, displayedLines, pagination, mode, handleSort }) {
   const totalDemRow = mode !== C.BY_INTERVIEWER_ONE_SURVEY || (
     <tr>
       <th className="ColFirstCol">{D.totalDEM}</th>
       <th className="ColumnSpacing" />
       <th className="YellowHeader ColCompletionRate">
-        {Number.isNaN(data.total.dem.completionRate) || (
-          <>
-            {(data.total.dem.completionRate * 100).toFixed(1)}
-            %
-          </>
+        {Number.isNaN(data.total.dem.completionRate) ? (
+          'N/A'
+        ) : (
+          <>{(data.total.dem.completionRate * 100).toFixed(1)}%</>
         )}
       </th>
       <th className="ColumnSpacing" />
@@ -33,6 +31,8 @@ function FollowUpTable({
       <th className="YellowHeader ColAtLeastOneContact">{data.total.dem.atLeastOneContact}</th>
       <th className="YellowHeader ColAppointmentTaken">{data.total.dem.appointmentTaken}</th>
       <th className="YellowHeader ColInterviewStarted">{data.total.dem.interviewStarted}</th>
+      <th className="YellowHeader ColNoticeLetter">{data.total.dem.noticeLetter}</th>
+      <th className="YellowHeader ColReminders">{data.total.dem.reminders}</th>
     </tr>
   );
 
@@ -44,10 +44,7 @@ function FollowUpTable({
         <th className="ColumnSpacing" />
         <th className="YellowHeader ColCompletionRate">
           {Number.isNaN(data.total.france.completionRate) || (
-            <>
-              {(data.total.france.completionRate * 100).toFixed(1)}
-              %
-            </>
+            <>{(data.total.france.completionRate * 100).toFixed(1)}%</>
           )}
         </th>
         <th className="ColumnSpacing" />
@@ -62,6 +59,8 @@ function FollowUpTable({
         <th className="YellowHeader ColAtLeastOneContact">{data.total.france.atLeastOneContact}</th>
         <th className="YellowHeader ColAppointmentTaken">{data.total.france.appointmentTaken}</th>
         <th className="YellowHeader ColInterviewStarted">{data.total.france.interviewStarted}</th>
+        <th className="YellowHeader ColNoticeLetter">{data.total.france.noticeLetter}</th>
+        <th className="YellowHeader ColReminders">{data.total.france.reminders}</th>
       </tr>
     </tfoot>
   );
@@ -77,7 +76,11 @@ function FollowUpTable({
     firstColumnTitle = D.interviewer;
     firstColumnSortAttribute = 'CPinterviewer';
   }
-  function handleSortFunct(property) { return () => { handleSort(property); }; }
+  function handleSortFunct(property) {
+    return () => {
+      handleSort(property);
+    };
+  }
 
   return (
     <Table id="FollowUpTable" className="CustomTable" bordered striped hover responsive size="sm">
@@ -87,9 +90,13 @@ function FollowUpTable({
           <th className="ColumnSpacing" />
           <th className="EmptyHeader ColCompletionRate" />
           <th rowSpan="2" className="ColumnSpacing" />
-          <th colSpan="6" className="CenteredText">{D.numberOfSurveyUnits}</th>
+          <th colSpan="6" className="CenteredText">
+            {D.numberOfSurveyUnits}
+          </th>
           <th rowSpan="2" className="ColumnSpacing" />
-          <th colSpan="4" className="YellowHeader CenteredText">{D.suCollectionsOngoing}</th>
+          <th colSpan="10" className="YellowHeader CenteredText">
+            {D.suCollectionsOngoing}
+          </th>
         </tr>
         <tr>
           <th
@@ -108,24 +115,15 @@ function FollowUpTable({
             {D.completionRate}
             <SortIcon val="completionRate" sort={sort} />
           </th>
-          <th
-            onClick={handleSortFunct('total')}
-            className="Clickable ColAllocated"
-          >
+          <th onClick={handleSortFunct('total')} className="Clickable ColAllocated">
             {D.allocated}
             <SortIcon val="total" sort={sort} />
           </th>
-          <th
-            onClick={handleSortFunct('notStarted')}
-            className="Clickable ColNotStarted"
-          >
+          <th onClick={handleSortFunct('notStarted')} className="Clickable ColNotStarted">
             {D.notStarted}
             <SortIcon val="notStarted" sort={sort} />
           </th>
-          <th
-            onClick={handleSortFunct('onGoing')}
-            className="Clickable ColOngoing"
-          >
+          <th onClick={handleSortFunct('onGoing')} className="Clickable ColOngoing">
             {D.inProgressInterviewer}
             <SortIcon val="onGoing" sort={sort} />
           </th>
@@ -136,17 +134,11 @@ function FollowUpTable({
             {D.waitingForIntReview}
             <SortIcon val="waitingForIntValidation" sort={sort} />
           </th>
-          <th
-            onClick={handleSortFunct('intValidated')}
-            className="Clickable ColIntVal"
-          >
+          <th onClick={handleSortFunct('intValidated')} className="Clickable ColIntVal">
             {D.reviewedByInterviewer}
             <SortIcon val="intValidated" sort={sort} />
           </th>
-          <th
-            onClick={handleSortFunct('demValidated')}
-            className="Clickable ColDemVal"
-          >
+          <th onClick={handleSortFunct('demValidated')} className="Clickable ColDemVal">
             {D.reviewedEnded}
             <SortIcon val="demValidated" sort={sort} />
           </th>
@@ -178,16 +170,33 @@ function FollowUpTable({
             {D.interviewStarted}
             <SortIcon val="interviewStarted" sort={sort} />
           </th>
+          <th
+            className="YellowHeader Clickable CenteredText"
+            onClick={handleSortFunct('noticeLetter')}
+          >
+            {D.noticeLetter}
+            <SortIcon val="noticeLetter" sort={sort} />
+          </th>
+          <th
+            className="YellowHeader Clickable CenteredText"
+            onClick={handleSortFunct('reminders')}
+          >
+            {D.reminders}
+            <SortIcon val="reminders" sort={sort} />
+          </th>
         </tr>
       </thead>
       <tbody>
         {displayedLines
           .slice(
             (pagination.page - 1) * pagination.size,
-            Math.min(pagination.page * pagination.size, displayedLines.length),
+            Math.min(pagination.page * pagination.size, displayedLines.length)
           )
-          .map((line) => (
-            <FollowUpTableLine key={line.campaignId || line.interviewerId || line.site} data={line} />
+          .map(line => (
+            <FollowUpTableLine
+              key={line.campaignId || line.interviewerId || line.site}
+              data={line}
+            />
           ))}
       </tbody>
       {tableFooter}

src/components/MonitoringTable/FollowUpTableLine.jsx

@@ -17,6 +17,8 @@ function FollowUpTableLine({ data }) {
     atLeastOneContact,
     appointmentTaken,
     interviewStarted,
+    noticeLetter,
+    reminders,
   } = data;
   const interviewerName = interviewerFirstName
     ? `${interviewerLastName} ${interviewerFirstName}`
@@ -26,12 +28,7 @@ function FollowUpTableLine({ data }) {
       <td className="ColFirstCol">{interviewerName || survey || site}</td>
       <td className="ColumnSpacing" />
       <td className="ColCompletionRate">
-        {Number.isNaN(completionRate) || (
-          <>
-            {(completionRate * 100).toFixed(1)}
-            %
-          </>
-        )}
+        {Number.isNaN(completionRate) ? 'NaN' : <>{(completionRate * 100).toFixed(1)}%</>}
       </td>
       <td className="ColumnSpacing" />
       <td className="ColAllocated">{total}</td>
@@ -45,6 +42,8 @@ function FollowUpTableLine({ data }) {
       <td className="ColAtLeastOneContact">{atLeastOneContact}</td>
       <td className="ColAppointmentTaken">{appointmentTaken}</td>
       <td className="ColInterviewStarted">{interviewStarted}</td>
+      <td className="ColNoticeLetter">{noticeLetter}</td>
+      <td className="ColReminders">{reminders}</td>
     </tr>
   );
 }

src/components/MonitoringTable/MonitoringTable.css

@@ -36,4 +36,10 @@
 }
 #MonitoringTable .ColInterviewStarted{
   width: 7%;
+}
+#MonitoringTable .ColNoticeLetter{
+  width: 7%;
+}
+#MonitoringTable .ColReminders{
+  width: 7%;
 }