ERU Readiness Form and Emergency Response Units Tab

app/src/App/routes/SurgeRoutes.tsx

@@ -122,12 +122,11 @@ const emergencyResponseUnit = customWrapRoute({
     },
 });
 
-const updateERUReadinessForm = customWrapRoute({
+const eruReadinessForm = customWrapRoute({
     parent: rootLayout,
-    path: 'update-eru-readiness',
+    path: 'eru-readiness',
     component: {
-        // TODO: Add ERUReadinessUpdateForm Route
-        render: () => import('#views/Home'),
+        render: () => import('#views/EruReadinessForm'),
         props: {},
     },
     wrapperComponent: Auth,
@@ -1631,5 +1630,5 @@ export default {
     activeSurgeDeployments,
     rapidResponsePersonnel,
     emergencyResponseUnit,
-    updateERUReadinessForm,
+    eruReadinessForm,
 };

app/src/views/EruReadinessForm/EruInputItem/i18n.json

@@ -0,0 +1,11 @@
+{
+    "namespace": "eruReadinessForm",
+    "strings": {
+        "eruEquipmentReadiness": "Equipment Readiness",
+        "eruPeopleReadiness": "People Readiness",
+        "eruFundingReadiness": "Funding Readiness",
+        "eruComments": "Comments",
+        "eruLead": "Confirm that you have capacity to lead this type of ERU",
+        "eruSupport": "Confirm that you have capacity to support this type of ERU"
+    }
+}

app/src/views/EruReadinessForm/EruInputItem/index.tsx

@@ -0,0 +1,160 @@
+import { useMemo } from 'react';
+import {
+    Checkbox,
+    InputSection,
+    RadioInput,
+    TextArea,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { randomString } from '@togglecorp/fujs';
+import {
+    type ArrayError,
+    getErrorObject,
+    type SetValueArg,
+    useFormObject,
+} from '@togglecorp/toggle-form';
+
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
+import { type GoApiResponse } from '#utils/restRequest';
+
+import { type PartialEruItem } from '../schema';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+type GlobalEnumsResponse = GoApiResponse<'/api/v2/global-enums/'>;
+
+type ReadinessOption = NonNullable<GlobalEnumsResponse['deployments_eru_readiness_status']>[number];
+
+function readinessKeySelector(option: ReadinessOption) {
+    return option.key;
+}
+
+function readinessLabelSelector(option: ReadinessOption) {
+    return option.value;
+}
+
+const defaultCollectionValue: PartialEruItem = {
+    client_id: randomString(),
+};
+
+interface Props {
+    index: number;
+    value: PartialEruItem;
+    onChange: (value: SetValueArg<PartialEruItem>, index: number) => void;
+    error: ArrayError<PartialEruItem> | undefined;
+}
+
+function EruInputItem(props: Props) {
+    const {
+        index,
+        value,
+        onChange,
+        error: errorFromProps,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const {
+        deployments_eru_type: eruTypeOptions,
+        deployments_eru_readiness_status,
+    } = useGlobalEnums();
+
+    const onFieldChange = useFormObject(
+        index,
+        onChange,
+        defaultCollectionValue,
+    );
+
+    const error = (value && value.client_id && errorFromProps)
+        ? getErrorObject(errorFromProps?.[value.client_id])
+        : undefined;
+
+    const title = useMemo(() => (
+        eruTypeOptions?.find((eruType) => eruType.key === value.type)?.value
+    ), [eruTypeOptions, value.type]);
+
+    return (
+        <InputSection
+            title={title}
+            className={styles.eruInputItem}
+            contentSectionClassName={styles.content}
+        >
+            <InputSection
+                title={strings.eruEquipmentReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="equipment_readiness"
+                    value={value.equipment_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.equipment_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruPeopleReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="people_readiness"
+                    value={value.people_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.people_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruFundingReadiness}
+                className={styles.inputSection}
+            >
+                <RadioInput
+                    className={styles.readinessInput}
+                    listContainerClassName={styles.radioList}
+                    name="funding_readiness"
+                    value={value.funding_readiness}
+                    onChange={onFieldChange}
+                    options={deployments_eru_readiness_status}
+                    keySelector={readinessKeySelector}
+                    labelSelector={readinessLabelSelector}
+                    error={error?.funding_readiness}
+                />
+            </InputSection>
+            <InputSection
+                title={strings.eruComments}
+                className={styles.inputSection}
+            >
+                <TextArea
+                    name="comment"
+                    value={value?.comment}
+                    onChange={onFieldChange}
+                    error={error?.comment}
+                />
+                <Checkbox
+                    label={strings.eruLead}
+                    name="has_capacity_to_lead"
+                    value={value?.has_capacity_to_lead}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_lead}
+                />
+                <Checkbox
+                    label={strings.eruSupport}
+                    name="has_capacity_to_support"
+                    value={value?.has_capacity_to_support}
+                    onChange={onFieldChange}
+                    error={error?.has_capacity_to_support}
+                />
+            </InputSection>
+        </InputSection>
+    );
+}
+
+export default EruInputItem;

app/src/views/EruReadinessForm/EruInputItem/styles.module.css

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

app/src/views/EruReadinessForm/i18n.json

@@ -0,0 +1,21 @@
+{
+    "namespace": "eruReadinessForm",
+    "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, contact: {imContact} or {surgeContact}.",
+        "imContact": "[email protected]",
+        "surgeContact": "[email protected]",
+        "eruCancelButton": "Cancel",
+        "eruSaveAndCloseButton": "Save and Close",
+        "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"
+    }
+}