feat: refactor ERU readiness form

Author: samshara

Diff for: app/src/views/EruReadinessForm/EruInputItem/index.tsx

@@ -1,6 +1,6 @@
+import { useMemo } from 'react';
 import {
     Checkbox,
-    Container,
     InputSection,
     RadioInput,
     TextArea,
@@ -10,15 +10,14 @@ import { randomString } from '@togglecorp/fujs';
 import {
     type ArrayError,
     getErrorObject,
-    type PartialForm,
     type SetValueArg,
     useFormObject,
 } from '@togglecorp/toggle-form';
 
 import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import { type GoApiResponse } from '#utils/restRequest';
 
-import { type EruType } from '../schema';
+import { type PartialEruItem } from '../schema';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
@@ -35,30 +34,29 @@ function readinessLabelSelector(option: ReadinessOption) {
     return option.value;
 }
 
-const defaultCollectionValue: PartialForm<EruType> = {
+const defaultCollectionValue: PartialEruItem = {
     client_id: randomString(),
 };
 
 interface Props {
     index: number;
-    value: PartialForm<EruType>;
-    onChange: (value: SetValueArg<PartialForm<EruType>>, index: number) => void;
-    title: string | undefined;
-    error: ArrayError<EruType> | undefined;
+    value: PartialEruItem;
+    onChange: (value: SetValueArg<PartialEruItem>, index: number) => void;
+    error: ArrayError<PartialEruItem> | undefined;
 }
 
 function EruInputItem(props: Props) {
     const {
         index,
         value,
         onChange,
-        title,
         error: errorFromProps,
     } = props;
 
     const strings = useTranslation(i18n);
 
     const {
+        deployments_eru_type: eruTypeOptions,
         deployments_eru_readiness_status,
     } = useGlobalEnums();
 
@@ -72,17 +70,23 @@ function EruInputItem(props: Props) {
         ? getErrorObject(errorFromProps?.[value.client_id])
         : undefined;
 
+    const title = useMemo(() => (
+        eruTypeOptions?.find((eruType) => eruType.key === value.type)?.value
+    ), [eruTypeOptions, value.type]);
+
     return (
-        <Container
-            childrenContainerClassName={styles.eruTypes}
-            heading={title}
+        <InputSection
+            title={title}
+            className={styles.eruInputItem}
+            contentSectionClassName={styles.content}
         >
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruEquipmentReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="equipment_readiness"
                     value={value.equipment_readiness}
                     onChange={onFieldChange}
@@ -93,11 +97,12 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruPeopleReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="people_readiness"
                     value={value.people_readiness}
                     onChange={onFieldChange}
@@ -108,11 +113,12 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruFundingReadiness}
+                className={styles.inputSection}
             >
                 <RadioInput
-                    listContainerClassName={styles.readinessList}
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
                     name="funding_readiness"
                     value={value.funding_readiness}
                     onChange={onFieldChange}
@@ -123,8 +129,8 @@ function EruInputItem(props: Props) {
                 />
             </InputSection>
             <InputSection
-                className={styles.readinessOptions}
                 title={strings.eruComments}
+                className={styles.inputSection}
             >
                 <TextArea
                     name="comment"
@@ -147,8 +153,7 @@ function EruInputItem(props: Props) {
                     error={error?.has_capacity_to_support}
                 />
             </InputSection>
-        </Container>
-
+        </InputSection>
     );
 }
 

Diff for: app/src/views/EruReadinessForm/EruInputItem/styles.module.css

@@ -1,13 +1,25 @@
-.eru-types {
+.eru-input-item {
     display: flex;
+    flex-direction: column;
 
-    .readiness-options {
+    .content {
         display: flex;
-        flex-direction: column;
+        gap: var(--go-ui-spacing-sm);
+        flex-wrap: wrap;
 
-        .readiness-list {
+        .input-section {
             display: flex;
             flex-direction: column;
+            flex-grow: 1;
+
+            .readiness-input {
+                display: flex;
+
+                .radio-list {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
         }
     }
 }

Diff for: app/src/views/EruReadinessForm/i18n.json

@@ -3,15 +3,19 @@
     "strings": {
         "eruReadinessFormTitle": "Update ERU Readiness Form",
         "eruReadinessFormHeading": "ERU Deployment Readiness",
-        "eruReadinessFormDescription": "Complete the form with the ERU Readiness data of your National Society. In case of any questions.",
+        "eruReadinessFormDescription": "Complete the form with the ERU readiness data of your National Society. In case of any questions, contact: {imContact} or {surgeContact}.",
+        "imContact": "[email protected]",
+        "surgeContact": "[email protected]",
         "eruCancelButton": "Cancel",
         "eruSaveAndCloseButton": "Save and Close",
-        "eruNationalSociety": "National Society",
-        "eruTypes": "Select ERU Type(s)",
-        "eruFormCreatedSuccessfully": "ERU Readiness Created Successfully",
-        "eruFormFailedToCreate": "Failed to create a ERU Readiness",
-        "eruFormSuccessfullyUpdated": "Successfully Updated ERU Readiness Form",
-        "eruFormFailedToUpdate": "Failed to Update ERU Readiness Form",
-        "eruNoRecord": "No Existing Record"
+        "eruSelectNationalSociety": "National Society",
+        "eruSelectErus": "Select ERU Type(s)",
+        "eruFormSuccessfullyUpdated": "Successfully updated ERU readiness",
+        "eruFormFailedToUpdate": "Failed to update ERU readiness",
+        "eruNoRecord": "No existing record",
+        "eruOwnerFailedToFetch": "Failed to fetch ERU owners!",
+        "eruReadinessFailedToFetch": "Failed to fetch ERU readiness information!",
+        "eruFormSuccessfullyCreated": "Successfully created ERU readiness",
+        "eruFormFailedToCreate": "Failed to create ERU readiness"
     }
 }