(feat) O3-2971: Show a confirmation modal when the user submits an empty form

src/form-engine.component.tsx

@@ -32,6 +32,7 @@ interface FormEngineProps {
   onCancel?: () => void;
   handleClose?: () => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  handleEmptyFormSubmission?: () => Promise<void>;
   markFormAsDirty?: (isDirty: boolean) => void;
 }
 
@@ -47,6 +48,7 @@ const FormEngine = ({
   onCancel,
   handleClose,
   handleConfirmQuestionDeletion,
+  handleEmptyFormSubmission,
   markFormAsDirty,
 }: FormEngineProps) => {
   const { t } = useTranslation();
@@ -127,13 +129,13 @@ const FormEngine = ({
           provider={session?.currentProvider}
           visit={visit}
           handleConfirmQuestionDeletion={handleConfirmQuestionDeletion}
+          handleEmptyFormSubmission={handleEmptyFormSubmission}
           isFormExpanded={isFormExpanded}
           formSubmissionProps={{
             isSubmitting,
             setIsSubmitting,
-            onSubmit,
-            onError: () => {},
-            handleClose: () => {},
+            onSubmit, 
+            handleClose: handleClose,
           }}
           hideFormCollapseToggle={hideFormCollapseToggle}
           setIsFormDirty={setIsFormDirty}>

src/provider/form-factory-helper.ts

@@ -46,6 +46,19 @@ export function validateForm(context: FormContextProps) {
   return errors.length === 0;
 }
 
+export function validateEmptyForm(context: FormContextProps) {
+  const { formFields, deletedFields } = context;
+  const allFormFields = [...formFields, ...deletedFields];
+  const transientFields = allFormFields
+    .filter((field) => field.questionOptions.isTransient)
+    .map((field) => field.id);
+  const { methods: { formState: { dirtyFields } } } = context;
+  const nonTransientDirtyFields = Object.keys(dirtyFields).filter(
+    (fieldName) => !transientFields.includes(fieldName)
+  );
+  return nonTransientDirtyFields.length === 0;
+}
+
 export async function processPostSubmissionActions(
   postSubmissionHandlers: PostSubmissionActionMeta[],
   submissionResults: OpenmrsResource[],

src/provider/form-factory-provider.tsx

@@ -11,7 +11,7 @@ import {
 } from '@openmrs/esm-framework';
 import { type FormProcessorConstructor } from '../processors/form-processor';
 import { type FormContextProps } from './form-provider';
-import { processPostSubmissionActions, validateForm } from './form-factory-helper';
+import { processPostSubmissionActions, validateForm, validateEmptyForm } from './form-factory-helper';
 import { useTranslation } from 'react-i18next';
 import { usePostSubmissionActions } from '../hooks/usePostSubmissionActions';
 
@@ -47,11 +47,11 @@ interface FormFactoryProviderProps {
     isSubmitting: boolean;
     setIsSubmitting: (isSubmitting: boolean) => void;
     onSubmit: (data: any) => void;
-    onError: (error: any) => void;
     handleClose: () => void;
   };
   hideFormCollapseToggle: () => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  handleEmptyFormSubmission?: () => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
 }
 
@@ -70,14 +70,15 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   children,
   formSubmissionProps,
   hideFormCollapseToggle,
+  handleEmptyFormSubmission,
   handleConfirmQuestionDeletion,
   setIsFormDirty,
 }) => {
   const { t } = useTranslation();
   const rootForm = useRef<FormContextProps>();
   const subForms = useRef<Record<string, FormContextProps>>({});
   const layoutType = useLayoutType();
-  const { isSubmitting, setIsSubmitting, onSubmit, onError, handleClose } = formSubmissionProps;
+  const { isSubmitting, setIsSubmitting, onSubmit, handleClose } = formSubmissionProps;
   const postSubmissionHandlers = usePostSubmissionActions(formJson.postSubmissionActions);
 
   const abortController = new AbortController();
@@ -96,14 +97,42 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   });
 
   useEffect(() => {
-    if (isSubmitting) {
-      // TODO: find a dynamic way of managing the form processing order
-      const forms = [rootForm.current, ...Object.values(subForms.current)];
-      // validate all forms
-      const isValid = forms.every((formContext) => validateForm(formContext));
-      if (isValid) {
-        Promise.all(forms.map((formContext) => formContext.processor.processSubmission(formContext, abortController)))
-          .then(async (results) => {
+    const handleFormSubmission = async () => {
+      if (isSubmitting) {
+        const forms = [rootForm.current, ...Object.values(subForms.current)];
+        // Validate all forms
+        const isValid = forms.every((formContext) => validateForm(formContext));
+
+        if (isValid) {
+          // Check if the form is empty
+          const isEmpty = forms.every((formContext) => validateEmptyForm(formContext));
+          if (isEmpty) {
+            if (handleEmptyFormSubmission && typeof handleEmptyFormSubmission === 'function') {
+              const result = handleEmptyFormSubmission(); 
+              if (result instanceof Promise) { 
+                try {
+                  await result;
+                  handleClose();
+                } catch {
+                  // Rejected (cancelled) -> Do nothing
+                }
+              }  
+              else if (typeof result === 'boolean') {
+                if (result) { // If `true`, close the form
+                  handleClose();
+                }
+              }
+              else {
+                handleClose(); 
+              }
+              return setIsSubmitting(false);
+            }
+          }
+
+          try {
+            const results = await Promise.all(
+              forms.map((formContext) => formContext.processor.processSubmission(formContext, abortController))
+            );
             formSubmissionProps.setIsSubmitting(false);
             if (sessionMode === 'edit') {
               showSnackbar({
@@ -129,8 +158,7 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
             } else {
               handleClose();
             }
-          })
-          .catch((errorObject: Error | ToastDescriptor) => {
+          } catch (errorObject) {
             setIsSubmitting(false);
             if (errorObject instanceof Error) {
               showToast({
@@ -142,11 +170,13 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
             } else {
               showToast(errorObject);
             }
-          });
-      } else {
-        setIsSubmitting(false);
+          }
+        } else {
+          setIsSubmitting(false);
+        }
       }
-    }
+    };
+    handleFormSubmission();
     return () => {
       abortController.abort();
     };
@@ -181,4 +211,4 @@ export const useFormFactory = () => {
     throw new Error('useFormFactoryContext must be used within a FormFactoryProvider');
   }
   return context;
-};
+};