From 2abf055271729ff2c9933ad2c2ec33cc3e91609e Mon Sep 17 00:00:00 2001
From: Twiine Enock <twiineenockfox@gmail.com>
Date: Thu, 19 Jun 2025 00:39:59 +0300
Subject: [PATCH] feat: useEvenListeners and OnSubmit utilites for rfe-forms
 worklows

---
 src/FormBootstrap.tsx                         |  3 +-
 src/context/FormWorkflowReducer.ts            | 18 +++++-----
 src/context/GroupFormWorkflowReducer.ts       | 36 ++++++++++---------
 .../GroupSessionWorkspace.tsx                 |  4 ++-
 .../attendance-table/AttendanceTable.tsx      |  3 +-
 5 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/src/FormBootstrap.tsx b/src/FormBootstrap.tsx
index 777c3ec..a026e66 100644
--- a/src/FormBootstrap.tsx
+++ b/src/FormBootstrap.tsx
@@ -141,7 +141,7 @@ const FormBootstrap = ({
     setShowForm(false);
     setTimeout(() => {
       setShowForm(true);
-    });
+    }, 1);
   };
 
   return (
@@ -169,6 +169,7 @@ const FormBootstrap = ({
               ...activeSessionMeta,
               encDate: activeSessionMeta.sessionDate,
             },
+            hideControls: true,
           }}
         />
       )}
diff --git a/src/context/FormWorkflowReducer.ts b/src/context/FormWorkflowReducer.ts
index e048429..e41e851 100644
--- a/src/context/FormWorkflowReducer.ts
+++ b/src/context/FormWorkflowReducer.ts
@@ -198,14 +198,16 @@ const reducer = (state, action) => {
       };
     case 'SUBMIT_FOR_COMPLETE':
       // this state should not be persisted
-      window.dispatchEvent(
-        new CustomEvent('ampath-form-action', {
-          detail: {
-            formUuid: state.activeFormUuid,
-            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: 'onSubmit',
-          },
-        }),
+      ['ampath-form-action', 'rfe-form-submit-action'].forEach((event) =>
+        window.dispatchEvent(
+          new CustomEvent(event, {
+            detail: {
+              formUuid: state.activeFormUuid,
+              patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+              action: 'onSubmit',
+            },
+          }),
+        ),
       );
       return {
         ...state,
diff --git a/src/context/GroupFormWorkflowReducer.ts b/src/context/GroupFormWorkflowReducer.ts
index fbd1d10..2c5b9b1 100644
--- a/src/context/GroupFormWorkflowReducer.ts
+++ b/src/context/GroupFormWorkflowReducer.ts
@@ -273,14 +273,16 @@ const reducer = (state, action) => {
 
     case 'SUBMIT_FOR_NEXT':
       // this state should not be persisted
-      window.dispatchEvent(
-        new CustomEvent('ampath-form-action', {
-          detail: {
-            formUuid: state.activeFormUuid,
-            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: 'onSubmit',
-          },
-        }),
+      ['ampath-form-action', 'rfe-form-submit-action'].forEach((event) =>
+        window.dispatchEvent(
+          new CustomEvent(event, {
+            detail: {
+              formUuid: state.activeFormUuid,
+              patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+              action: 'onSubmit',
+            },
+          }),
+        ),
       );
       return {
         ...state,
@@ -338,14 +340,16 @@ const reducer = (state, action) => {
       };
     case 'SUBMIT_FOR_COMPLETE':
       // this state should not be persisted
-      window.dispatchEvent(
-        new CustomEvent('ampath-form-action', {
-          detail: {
-            formUuid: state.activeFormUuid,
-            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: 'onSubmit',
-          },
-        }),
+      ['ampath-form-action', 'rfe-form-submit-action'].forEach((event) =>
+        window.dispatchEvent(
+          new CustomEvent(event, {
+            detail: {
+              formUuid: state.activeFormUuid,
+              patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+              action: 'onSubmit',
+            },
+          }),
+        ),
       );
       return {
         ...state,
diff --git a/src/group-form-entry-workflow/GroupSessionWorkspace.tsx b/src/group-form-entry-workflow/GroupSessionWorkspace.tsx
index fc442f2..fe493c6 100644
--- a/src/group-form-entry-workflow/GroupSessionWorkspace.tsx
+++ b/src/group-form-entry-workflow/GroupSessionWorkspace.tsx
@@ -18,7 +18,9 @@ const WorkflowNavigationButtons = () => {
   const store = useStore(formStore);
   const formState = store[activeFormUuid];
   const navigationDisabled =
-    (formState !== 'ready' || workflowState !== 'EDIT_FORM') && formState !== 'readyWithValidationErrors';
+    formState === undefined || formState === null
+      ? false
+      : (formState !== 'ready' || workflowState !== 'EDIT_FORM') && formState !== 'readyWithValidationErrors';
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
   const [completeModalOpen, setCompleteModalOpen] = useState(false);
   const { t } = useTranslation();
diff --git a/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx b/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
index e74245d..82a36da 100644
--- a/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
+++ b/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { Edit } from '@carbon/react/icons';
 
 import {
+  CheckboxSkeleton,
   Checkbox,
   SkeletonText,
   Table,
@@ -40,7 +41,7 @@ const PatientRow = ({ patient }) => {
           <SkeletonText />
         </TableCell>
         <TableCell>
-          <Checkbox id={`${identifier}-attendance-checkbox`} labelText={patient.id} disabled />
+          <CheckboxSkeleton />
         </TableCell>
       </TableRow>
     );