feat: eru readiness ui updates

Author: samshara

app/src/components/DisplayName/index.tsx

@@ -1,8 +1,8 @@
-interface DisplayNameOuputProps {
+interface DisplayNameOutputProps {
     name: string;
 }
 
-function DisplayName({ name }: DisplayNameOuputProps) {
+function DisplayName({ name }: DisplayNameOutputProps) {
     return name;
 }
 

app/src/utils/constants.ts

@@ -208,3 +208,7 @@ export const multiMonthSelectDefaultValue = listToMap(
     (key) => key,
     () => false,
 );
+
+export const ERU_READINESS_READY = 1;
+export const ERU_READINESS_CAN_CONTRIBUTE = 2;
+export const ERU_READINESS_NO_CAPACITY = 3;

app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/i18n.json

@@ -14,6 +14,6 @@
         "deploymentEndDate": "Deployment End Date",
         "emergencyTimeline": "Emergency Timeline",
         "deploymentDate": "Deployment Timeline",
-        "rapidReponseDeploymentCountry": "Deployed To"
+        "rapidResponseDeploymentCountry": "Deployed To"
     }
 }

app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx

@@ -143,7 +143,7 @@ function OngoingRapidResponseDeployments() {
             ),
             createStringColumn<RapidResponseByEventItem, number>(
                 'country',
-                strings.rapidReponseDeploymentCountry,
+                strings.rapidResponseDeploymentCountry,
                 () => '',
                 {
                     defaultEmptyValue: '',
@@ -184,7 +184,7 @@ function OngoingRapidResponseDeployments() {
             strings.rapidResponseEmergency,
             strings.rapidResponsePosition,
             strings.rapidResponseDeployingOrganisation,
-            strings.rapidReponseDeploymentCountry,
+            strings.rapidResponseDeploymentCountry,
             strings.emergencyEndDate,
             strings.emergencyStartDate,
             strings.deploymentStartDate,
@@ -217,7 +217,7 @@ function OngoingRapidResponseDeployments() {
             ),
             createLinkColumn<Personnel, number>(
                 'country',
-                strings.rapidReponseDeploymentCountry,
+                strings.rapidResponseDeploymentCountry,
                 (item) => item?.country_deployed_to?.name,
                 (item) => ({
                     to: 'countriesLayout',
@@ -242,7 +242,7 @@ function OngoingRapidResponseDeployments() {
             strings.rapidResponseRole,
             strings.rapidResponseName,
             strings.rapidResponseOrganisation,
-            strings.rapidReponseDeploymentCountry,
+            strings.rapidResponseDeploymentCountry,
         ],
     );
 

app/src/views/SurgeOverview/EmergencyResponseUnit/EmergencyResponseUnitReadiness/ReadinessIcon/index.tsx

@@ -3,20 +3,26 @@ import {
     CloseCircleLineIcon,
 } from '@ifrc-go/icons';
 
+import {
+    ERU_READINESS_CAN_CONTRIBUTE,
+    ERU_READINESS_NO_CAPACITY,
+    ERU_READINESS_READY,
+} from '#utils/constants';
+
 import styles from './styles.module.css';
 
 interface ReadinessIconProps {
     readiness: number | undefined;
 }
 
 function ReadinessIcon({ readiness }: ReadinessIconProps) {
-    if (readiness === 3) {
+    if (readiness === ERU_READINESS_NO_CAPACITY) {
         return <CloseCircleLineIcon className={styles.redIcon} />;
     }
-    if (readiness === 2) {
+    if (readiness === ERU_READINESS_CAN_CONTRIBUTE) {
         return <CheckboxCircleLineIcon className={styles.yellowIcon} />;
     }
-    if (readiness === 1) {
+    if (readiness === ERU_READINESS_READY) {
         return <CheckboxCircleLineIcon className={styles.greenIcon} />;
     }
     return <CheckboxCircleLineIcon className={styles.grayIcon} />;