fix(dref-translation): update finalize access and add info section of status in dref table

Author: shreeyash07

app/src/utils/constants.ts

@@ -88,6 +88,7 @@ export const DREF_STATUS_DRAFT = 1 satisfies DrefStatus;
 export const DREF_STATUS_FINALIZING = 2 satisfies DrefStatus;
 export const DREF_STATUS_FINALIZED = 3 satisfies DrefStatus;
 export const DREF_STATUS_APPROVED = 4 satisfies DrefStatus;
+export const DREF_STATUS_FAILED = 5 satisfies DrefStatus;
 
 export type TypeOfDrefEnum = components<'read'>['schemas']['DrefDrefDrefTypeEnumKey'];
 export const DREF_TYPE_IMMINENT = 0 satisfies TypeOfDrefEnum;

app/src/views/AccountMyFormsDref/ActiveDrefTable/i18n.json

@@ -8,6 +8,11 @@
         "activeDrefTableStageHeading": "Stage",
         "activeDrefTableTypeOfDrefHeading": "Type of DREF",
         "activeDrefTableCountryHeading": "Country",
-        "activeDrefTableStatusHeading": "Status"
+        "activeDrefTableStatusHeading": "Status",
+        "activeDrefTableStatusDraftDescription": "The form is in its initial stage and has not been finalized yet.",
+        "activeDrefTableStatusFinalizingDescription": "The form is being finalizing. The original language content is being translated into English.",
+        "activeDrefTableStatusFinalizedDescription": "The form has been finalized, and the original language has been switched to English. All further edits must now be made in English.",
+        "activeDrefTableStatusApprovedDescription": "Approved: The form has been reviewed and approved.",
+        "activeDrefTableStatusFailedDescription": "The form finalization process has failed. You can retry to finalize the form again"
     }
 }

app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx

@@ -8,6 +8,7 @@ import {
     Pager,
     Table,
     TableBodyContent,
+    TextOutput,
 } from '@ifrc-go/ui';
 import { type RowOptions } from '@ifrc-go/ui';
 import { type Language } from '@ifrc-go/ui/contexts';
@@ -28,10 +29,14 @@ import {
     listToMap,
 } from '@togglecorp/fujs';
 
+import useGlobalEnums from '#hooks/domain/useGlobalEnums';
 import useUserMe from '#hooks/domain/useUserMe';
 import useFilterState from '#hooks/useFilterState';
 import {
     DREF_STATUS_APPROVED,
+    DREF_STATUS_DRAFT,
+    DREF_STATUS_FAILED,
+    DREF_STATUS_FINALIZED,
     DREF_STATUS_FINALIZING,
     DREF_TYPE_LOAN,
     type TypeOfDrefEnum,
@@ -72,6 +77,8 @@ function ActiveDrefTable(props: Props) {
         pageSize: 6,
     });
 
+    const { dref_dref_status: drefStatus } = useGlobalEnums();
+
     const {
         response: activeDrefResponse,
         pending: activeDrefResponsePending,
@@ -179,6 +186,53 @@ function ActiveDrefTable(props: Props) {
         [],
     );
 
+    const statusDescription = useMemo(() => {
+        if (isNotDefined(drefStatus)) {
+            return undefined;
+        }
+
+        const statusMap = listToMap(
+            drefStatus,
+            (item) => item.key,
+            (item) => item.value,
+        );
+
+        return [
+            {
+                key: DREF_STATUS_DRAFT,
+                status: statusMap[DREF_STATUS_DRAFT],
+                description: strings.activeDrefTableStatusDraftDescription,
+            },
+            {
+                key: DREF_STATUS_FINALIZING,
+                status: statusMap[DREF_STATUS_FINALIZING],
+                description: strings.activeDrefTableStatusFinalizingDescription,
+            },
+            {
+                key: DREF_STATUS_FINALIZED,
+                status: statusMap[DREF_STATUS_FINALIZED],
+                description: strings.activeDrefTableStatusFinalizedDescription,
+            },
+            {
+                key: DREF_STATUS_APPROVED,
+                status: statusMap[DREF_STATUS_APPROVED],
+                description: strings.activeDrefTableStatusApprovedDescription,
+            },
+            {
+                key: DREF_STATUS_FAILED,
+                status: statusMap[DREF_STATUS_FAILED],
+                description: strings.activeDrefTableStatusFailedDescription,
+            },
+        ];
+    }, [
+        drefStatus,
+        strings.activeDrefTableStatusDraftDescription,
+        strings.activeDrefTableStatusFinalizingDescription,
+        strings.activeDrefTableStatusFinalizedDescription,
+        strings.activeDrefTableStatusApprovedDescription,
+        strings.activeDrefTableStatusFailedDescription,
+    ]);
+
     const baseColumns = useMemo(
         () => ([
             createDateColumn<LatestDref, Key>(
@@ -221,7 +275,21 @@ function ActiveDrefTable(props: Props) {
                 'status',
                 strings.activeDrefTableStatusHeading,
                 (item) => item.status_display,
-                { columnClassName: styles.status },
+                {
+                    columnClassName: styles.status,
+                    headerInfoTitle: strings.activeDrefTableStatusHeading,
+                    headerInfoDescription: (
+                        statusDescription?.map((status) => (
+                            <TextOutput
+                                key={status.key}
+                                strongLabel
+                                withoutLabelColon
+                                label={status.status}
+                                value={status.description}
+                            />
+                        ))
+                    ),
+                },
             ),
             createElementColumn<LatestDref, Key, DrefTableActionsProps>(
                 'actions',
@@ -306,6 +374,7 @@ function ActiveDrefTable(props: Props) {
             userMe,
             userRegionCoordinatorMap,
             refetchActiveDref,
+            statusDescription,
         ],
     );
 

app/src/views/AccountMyFormsDref/DrefTableActions/index.tsx

@@ -43,6 +43,7 @@ import useRouting from '#hooks/useRouting';
 import { languageNameMap } from '#utils/common';
 import {
     DREF_STATUS_DRAFT,
+    DREF_STATUS_FAILED,
     DREF_STATUS_FINALIZED,
     DREF_TYPE_IMMINENT,
     DREF_TYPE_LOAN,
@@ -563,7 +564,9 @@ function DrefTableActions(props: Props) {
 
     const canApprove = status === DREF_STATUS_FINALIZED && hasPermissionToApprove;
 
-    const canFinalize = status === DREF_STATUS_DRAFT && hasPermissionToApprove;
+    const canFinalize = status === (DREF_STATUS_DRAFT
+        || DREF_STATUS_FAILED)
+        && hasPermissionToApprove;
 
     const shouldConfirmImminentAddOpsUpdate = drefType === DREF_TYPE_IMMINENT && isDrefImminentV2;