Fix movsense icon, add translation key for deployment(s) page strings

src/locales/en/common.json

@@ -5,7 +5,11 @@
   "created_on": "Created on: {{- date}}",
   "started_on": "Started on: {{- date}}",
   "stopped_on": "Stopped on: {{- date}}",
-  "stop_deployment": "Stop deployment",
   "export_data": "Export Data",
-  "last_uploaded": "Last Uploaded: {{- date}}"
+  "last_uploaded": "Last Uploaded: {{- date}}",
+  "cancel": "Cancel",
+  "deploy": "Deploy",
+  "last_data_zero": "Last data: Today",
+  "last_data_one": "Last data: {{count}} day ago",
+  "last_data_other": "Last data: {{count}} days ago"
 }

src/locales/en/deployment.json

@@ -6,7 +6,12 @@
   },
   "devices_card": {
     "title": "Devices",
-    "description": "Select the master device in order to deploy."
+    "description": "Select the master device in order to deploy.",
+    "device_deployment": {
+      "description": "The device will be permanently deployed. You can not undo this action.",
+      "title": "Deployment of a Master Device",
+      "submit": "I'm sure I want to deploy it"
+    }
   },
   "informed_consents_card": {
     "title": "Informed Consents",
@@ -15,5 +20,13 @@
   "data_card": {
     "title": "Data",
     "description": "See an overview of the collected data for each participant master device."
-  }
+  },
+  "stop_deployment": {
+    "title": "Stop deployment",
+    "description": "The deployment will be permanently stopped and will no longer be running.",
+    "alert": "You can not undo this action.",
+    "confirm": "I'm sure I want to stop it",
+    "stop": "Stop"
+  },
+  "page_description": "\"See the detailed data of the Deployment. Select the participant for further individual data."
 }

src/pages/Deployment/BasicInfo/index.tsx

@@ -52,12 +52,11 @@ const BasicInfo = () => {
     open: openStopConfirmationModal,
     onClose: () => setOpenStopConfirmationModal(false),
     onConfirm: handleStopDeployment,
-    title: "Stop deployment",
-    description:
-      "The deployment will be permanently stopped and will no longer be running.",
-    boldText: "You can not undo this action.",
-    checkboxLabel: "I'm sure I want to stop it",
-    actionButtonLabel: "Stop",
+    title: t("deployment:stop_deployment.title"),
+    description: t("deployment:stop_deployment.description"),
+    boldText: t("deployment:stop_deployment.alert"),
+    checkboxLabel: t("deployment:stop_deployment.confirm"),
+    actionButtonLabel: t("deployment:stop_deployment.stop"),
   };
 
   const generateExport = useCreateSummary();
@@ -123,7 +122,7 @@ const BasicInfo = () => {
               onClick={() => setOpenStopConfirmationModal(true)}
             >
               <Stop fontSize="small" />
-              {t("common:stop_deployment")}
+              {t("deployment:stop_deployment.title")}
             </StyledButton>
           )}
         </Left>

src/pages/Deployment/Devices/index.tsx

@@ -9,7 +9,7 @@ import { Checkbox, Modal, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import CarpAccordion from "@Components/CarpAccordion";
-import { t } from "i18next";
+import { useTranslation } from "react-i18next";
 import { useStudyDetails } from "@Utils/queries/studies";
 import { getDeviceIcon } from "@Utils/utility";
 import { CarpServiceError } from "@carp-dk/client";
@@ -32,6 +32,7 @@ import LoadingSkeleton from "../LoadingSkeleton";
 
 const Devices = () => {
   const { id: studyId, deploymentId } = useParams();
+  const { t } = useTranslation();
 
   const {
     data: study,
@@ -148,18 +149,19 @@ const Devices = () => {
         aria-describedby="modal-modal-description"
       >
         <ModalBox sx={{ boxShadow: 24 }}>
-          <Title variant="h2">Deployment of a Master Device</Title>
+          <Title variant="h2">
+            {t("deployment:devices_card.device_deployment.title")}
+          </Title>
           <DescriptionContainer>
             <Description variant="h4">
-              The device will be permanently deployed. You can not undo this
-              action.
+              {t("deployment:devices_card.device_deployment.description")}
             </Description>
           </DescriptionContainer>
           <Bottom>
             <Stack direction="row" alignItems="center" gap="8px">
               <Checkbox onClick={() => setAllowDeploy(!allowDeploy)} />
               <Typography variant="h5">
-                I&apos;m sure I want to deploy it
+                {t("deployment:devices_card.device_deployment.submit")}
               </Typography>
             </Stack>
             <Stack direction="row" gap="8px">
@@ -169,15 +171,15 @@ const Devices = () => {
                   setAllowDeploy(false);
                 }}
               >
-                Cancel
+                {t("common:cancel")}
               </CancelButton>
               <ActionButton
                 variant="contained"
                 color="primary"
                 onClick={() => onConfirm()}
                 disabled={!allowDeploy}
               >
-                Deploy
+                {t("common:deploy")}
               </ActionButton>
             </Stack>
           </Bottom>
@@ -190,20 +192,23 @@ const Devices = () => {
             <DeviceCard key={primaryDevice.name}>
               <DeviceRow
                 direction="row"
-                onClick={() =>
+                onClick={() => {
+                  if (primaryDevice.status === "Deployed") return;
                   setModalState({
                     open: true,
                     roleName: primaryDevice.name,
                     deviceId: v4(),
-                  })
-                }
-                sx={{
-                  "&:hover": {
-                    backgroundColor: "#ededed",
-                    borderRadius: "100px",
-                    cursor: "pointer",
-                  },
+                  });
                 }}
+                sx={
+                  primaryDevice.status !== "Deployed" && {
+                    "&:hover": {
+                      backgroundColor: "#ededed",
+                      borderRadius: "100px",
+                      cursor: "pointer",
+                    },
+                  }
+                }
                 justifyContent="center"
               >
                 <DeviceName direction="row">

src/pages/Deployment/index.tsx

@@ -4,11 +4,14 @@ import BasicInfo from "./BasicInfo";
 import Participants from "./Participants";
 import InformedConsentCard from "./InformedConsentCard";
 import Devices from "./Devices";
+import { useTranslation } from "react-i18next";
 
 const Deployment = () => {
+  const { t } = useTranslation();
+
   const sectionName = ["Deployments", "Deployment"];
-  const description =
-    "See the detailed data of the Deployment. Select the participant for further individual data.";
+  const description = t("deployment:page_description");
+
   return (
     <StudyPageLayout>
       <StudyHeader path={sectionName} description={description} />

src/pages/Deployments/DeploymentCard/index.tsx

@@ -116,7 +116,12 @@ const DeploymentCard = ({
           onClick={(event) => handleCardToggle(event)}
           open={isCardOpen}
         >
-          <KeyboardArrowDownRoundedIcon />
+          <KeyboardArrowDownRoundedIcon
+            sx={{
+              transform: isCardOpen ? "rotate(0deg)" : "rotate(-90deg)",
+              transition: "transform 0.3s ease",
+            }}
+          />
         </MinimizeButton>
       </TopContainer>
       <ParticipantsContainer>
@@ -164,7 +169,11 @@ export const DeploymentSkeletonCard = () => {
           />
         </IdContainer>
         <MinimizeButton disableRipple onClick={() => {}} open={false}>
-          <KeyboardArrowDownRoundedIcon />
+          <KeyboardArrowDownRoundedIcon
+            sx={{
+              transform: "rotate(-90deg)",
+            }}
+          />
         </MinimizeButton>
       </TopContainer>
       <ParticipantsContainer />

src/pages/Deployments/ParticipantRecord/index.tsx

@@ -24,6 +24,7 @@ import {
   StyledContainer,
   StyledStatusDot,
 } from "./styles";
+import { useTranslation } from "react-i18next";
 
 type Props = {
   participantData: ParticipantData;
@@ -36,6 +37,8 @@ const ParticipantRecord = ({
   participantStatus,
   deviceStatusList,
 }: Props) => {
+  const { t } = useTranslation();
+
   const participantRole =
     participantStatus.assignedParticipantRoles.roleNames[0];
   const participantDeviceRoleName =
@@ -49,13 +52,10 @@ const ParticipantRecord = ({
   const lastDataUpload = useMemo(() => {
     const lastData = participantData.dateOfLastDataUpload;
     if (!lastData) {
-      return "Last data: Today";
+      return "";
     }
     const elapsedDays = calculateDaysPassedFromDate(lastData.toString());
-    if (elapsedDays === 0) {
-      return "Last data: Today";
-    }
-    return `Last data: ${elapsedDays} day${elapsedDays > 1 ? "s" : ""} ago`;
+    return t("common:last_data", { count: elapsedDays });
   }, [participantData.dateOfLastDataUpload]);
 
   return (

src/pages/Participant/ParticipantDataCard/index.tsx

@@ -59,12 +59,13 @@ const ParticipantDataCard = () => {
   } = useGetParticipantData(deploymentId);
 
   const [participant, setParticipant] = useState<ParticipantData | null>(null);
-  const initalValues = participantData?.roles
-    ? (participantData?.roles as any as Array<any>)
-        .filter((v) => v)
-        .map((v) => v.data.values.toArray().filter((value) => value))
-        .flat()
-    : participantData?.common.values.toArray().filter((v) => v);
+  const initalValues =
+    (participantData?.roles as any as Array<any>).length !== 0
+      ? (participantData?.roles as any as Array<any>)
+          .filter((v) => v)
+          .map((v) => v.data.values.toArray().filter((value) => value))
+          .flat()
+      : participantData?.common.values.toArray().filter((v) => v);
   useEffect(() => {
     if (participantGroupStatus) {
       setParticipant(

src/pages/StudyOverview/Overview/DeploymentsInProgress/index.tsx

@@ -139,12 +139,12 @@ const DeploymentsInProgress = () => {
                 <StyledTableCell>
                   <SecondaryCellText variant="h5" noWrap>
                     <Stack direction="row" spacing="16px">
-                      {g.devices.map((d) => (
+                      {g.devices.map((d, idx) => (
                         <Stack
                           direction="row"
                           spacing={0.5}
                           alignItems="center"
-                          key={d.device}
+                          key={g.deploymentId + ":" + idx}
                         >
                           <StyledStatusDot status={d.__type.split(".").pop()} />
                           <Typography variant="h6">

src/utils/utility.tsx

@@ -1,4 +1,5 @@
 import ecgHeartIcon from "@Assets/images/ecg_heart.png";
+import ecgHeartIconBlue from "@Assets/images/ecg_heart_blue.png";
 import { Day, Record } from "@Components/RecentDataChart";
 import { customPalette as palette } from "@Utils/theme";
 import carpCommon from "@cachet/carp-common";
@@ -113,7 +114,14 @@ export const getDeviceIcon = (deviceType: string, isBlue?: boolean) => {
         />
       );
     case "dk.cachet.carp.common.application.devices.MovesenseDevice":
-      return (
+      return isBlue ? (
+        <img
+          src={ecgHeartIconBlue}
+          width="20px"
+          height="20px"
+          alt="heart icon"
+        />
+      ) : (
         <img src={ecgHeartIcon} width="20px" height="20px" alt="heart icon" />
       );
     case "dk.cachet.carp.common.application.devices.Smartphone":