Feat/add collection dates table (#92)

* fix collectionStartDate and add email * wip referents * fix useEffect and add referents in portal page * bump version * remove useless className and add default referents value
InseeFr · Jan 5, 2024 · cd4c82c · cd4c82c
1 parent e46e441
commit cd4c82c
Show file tree

Hide file tree

Showing 16 changed files with 410 additions and 388 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sonor",
-  "version": "0.5.25",
+  "version": "0.5.26",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/components/CampaignPortal/CampaignPortal.css b/src/components/CampaignPortal/CampaignPortal.css
@@ -2,6 +2,11 @@
   width: 30%;
 }
 
+.ContactRow{
+ display: flex;
+ flex-direction: column;
+}
+
 .DatesLeftHeader{
   width: 30%;
 }

diff --git a/src/components/CampaignPortal/CampaignPortal.jsx b/src/components/CampaignPortal/CampaignPortal.jsx
@@ -55,7 +55,7 @@ function CampaignPortal({
         setIsLoading(false);
       });
     }
-  }, [survey]);
+  }, [survey, campaigns, dataRetreiver, location.survey]);
 
   function handleSort(property, asc) {
     const [sortedData, newSort] = Utils.handleSort(property, data, sort, 'campaignPortal', asc);
@@ -103,10 +103,13 @@ function CampaignPortal({
               </Row>
               <Row>
                 <Col>
-                  <Contacts />
+                  <Contacts 
+                    email={surveyInfo.email} 
+                    referents={surveyInfo.referents}
+                  />
                   <DatesTable
                     identificationPhaseStartDate={surveyInfo.identificationPhaseStartDate}
-                    collectionstartDate={surveyInfo.collectionstartDate}
+                    collectionStartDate={surveyInfo.collectionStartDate}
                     collectionEndDate={surveyInfo.collectionEndDate}
                     endDate={surveyInfo.endDate}
                   />

diff --git a/src/components/CampaignPortal/Contacts.jsx b/src/components/CampaignPortal/Contacts.jsx
@@ -5,14 +5,18 @@ import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import D from '../../i18n';
 
-function Contacts() {
+function Contacts({email, referents}) {
   const renderTooltip = (
     <Popover id="popover-basic">
       <Popover.Content>
         {D.sendMail}
       </Popover.Content>
     </Popover>
   );
+
+  const primaryReferents = referents?.filter((referent) => referent.role === "PRIMARY") ?? [];
+  const secondaryReferents = referents?.filter((referent) => referent.role === "SECONDARY") ?? [];
+
   return (
     <Card className="ViewCard">
       <div>
@@ -24,26 +28,64 @@ function Contacts() {
               <tr
                 className="Clickable"
                 data-testid="mail-button"
-                onClick={() => { window.location.assign('mailto:[email protected]'); }}
+                onClick={() => { window.location.assign(`mailto:${email}`); }}
               >
                 <th className="ContactsLeftHeader">{D.functionalBox}</th>
-                <td className=" LightGreyLine MailLink">[email protected]</td>
+                <td className=" LightGreyLine MailLink" >{email}</td>
               </tr>
             </OverlayTrigger>
-            <tr>
-              <th rowSpan="2" className="VerticallyCentered ContactsLeftHeader">{D.cpos}</th>
-              <td className="LightGreyLine">Chloé Dupont</td>
-            </tr>
-            <tr>
-              <td className="LightGreyLine">01 01 01 01 01</td>
-            </tr>
-            <tr>
-              <th rowSpan="2" className="VerticallyCentered ContactsLeftHeader">{D.deputyCpos}</th>
-              <td className="LightGreyLine">Thierry Fabres</td>
-            </tr>
-            <tr>
-              <td className="LightGreyLine">02 01 01 01 01</td>
-            </tr>
+
+            {(referents === undefined || primaryReferents.length === 0) && 
+              <tr>
+                <th className="VerticallyCentered ContactsLeftHeader">{D.cpos}</th>
+                <td>{"-"}</td>
+              </tr>
+            }
+
+            {primaryReferents.map((primaryReferent) => {
+              return (
+                <tr  key={primaryReferent.phoneNumber}>
+                  <th className="VerticallyCentered ContactsLeftHeader">{D.cpos}</th>
+                  <td className="ContactRow">
+                    <span>
+                      {primaryReferent.firstName || primaryReferent.lastName ? 
+                        `${primaryReferent.firstName ?? ""} ${primaryReferent.lastName ?? ""}` 
+                        : "-"
+                      }
+                    </span>
+                    <span >
+                      {primaryReferent.phoneNumber ?? "-"}
+                    </span>
+                  </td>
+                </tr>
+              )
+            })}
+
+            {(referents === undefined || secondaryReferents.length === 0) && 
+              <tr>
+                <th className="VerticallyCentered ContactsLeftHeader">{D.deputyCpos}</th>
+                <td>{"-"}</td>
+              </tr>
+            }
+
+            {secondaryReferents.map((secondaryReferent) => {
+              return (
+                <tr key={secondaryReferent.phoneNumber}>
+                  <th className="VerticallyCentered ContactsLeftHeader">{D.deputyCpos}</th>
+                  <td className="ContactRow">
+                    <span>                        
+                      {secondaryReferent.firstName || secondaryReferent.lastName ? 
+                        `${secondaryReferent.firstName ?? ""} ${secondaryReferent.lastName ?? ""}` 
+                        : "-"
+                      }
+                    </span>
+                    <span >
+                      {secondaryReferent.phoneNumber ?? "-"}
+                    </span>
+                  </td>
+                </tr>             
+              )
+            })} 
           </tbody>
         </Table>
       </div>

diff --git a/src/components/CampaignPortal/Dates.jsx b/src/components/CampaignPortal/Dates.jsx
@@ -4,7 +4,7 @@ import D from '../../i18n';
 import Utils from '../../utils/Utils';
 import Table from 'react-bootstrap/Table';
 
-export const DatesTable = ({identificationPhaseStartDate, collectionstartDate, collectionEndDate, endDate }) => {
+export const DatesTable = ({identificationPhaseStartDate, collectionStartDate, collectionEndDate, endDate }) => {
     return (
         <Card className="ViewCard">
             <Card.Title className="Title">{D.dates}</Card.Title>
@@ -16,7 +16,7 @@ export const DatesTable = ({identificationPhaseStartDate, collectionstartDate, c
                     </tr>
                     <tr>
                         <th className="DatesLeftHeader">{D.collectionStartDate}</th>
-                        <td className="LightGreyLine VerticallyCentered">{collectionstartDate && Utils.convertToDateString(collectionstartDate)}</td>
+                        <td className="LightGreyLine VerticallyCentered">{collectionStartDate && Utils.convertToDateString(collectionStartDate)}</td>
                     </tr>
                     <tr>
                         <th className="DatesLeftHeader">{D.collectionEndDate}</th>

diff --git a/src/components/CampaignPortal/Dates.test.jsx b/src/components/CampaignPortal/Dates.test.jsx
@@ -8,7 +8,7 @@ describe("dates component", () => {
         render(
             <DatesTable
                 identificationPhaseStartDate={1578907245000}
-                collectionstartDate={1609492845000}
+                collectionStartDate={1609492845000}
                 collectionEndDate={1698706800000}
                 endDate={1706655600000}
               />
@@ -27,7 +27,7 @@ describe("dates component", () => {
         render(
             <DatesTable
                 identificationPhaseStartDate={1578907245000}
-                collectionstartDate={1609492845000}
+                collectionStartDate={1609492845000}
                 collectionEndDate={1698706800000}
                 endDate={1706655600000}
               />