10074-bug: add live validation to status report order form

ustaxcourt · Sep 20, 2024 · 6f7b9db · 6f7b9db
1 parent c5b0ef8
commit 6f7b9db
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 4 deletions.
diff --git a/web-client/integration-tests/journey/petitionsClerkUpdatesCaseDetail.ts b/web-client/integration-tests/journey/petitionsClerkUpdatesCaseDetail.ts
@@ -143,7 +143,7 @@ export const petitionsClerkUpdatesCaseDetail = cerebralTest => {
     });
     expect(cerebralTest.getState('alertError')).toEqual({
       messages: ['Select a case type', 'Select a case procedure'],
-      preventAutoScroll: false,
+      scrollToErrorNotification: false,
       title: 'Please correct the following errors on the page:',
     });
 

diff --git a/web-client/src/presenter/actions/setValidationAlertErrorsAction.ts b/web-client/src/presenter/actions/setValidationAlertErrorsAction.ts
@@ -86,7 +86,7 @@ export const setValidationAlertErrorsAction = ({
           }
         }),
     ),
-    preventAutoScroll: !props.scrollToErrorNotification,
+    scrollToErrorNotification: props.scrollToErrorNotification || false,
     title: 'Please correct the following errors on the page:',
   };
   store.set(state.alertError, alertError);

diff --git a/web-client/src/presenter/presenter.ts b/web-client/src/presenter/presenter.ts
@@ -604,6 +604,7 @@ import { validateRemoveFromTrialSessionSequence } from './sequences/validateRemo
 import { validateSelectDocumentTypeSequence } from './sequences/validateSelectDocumentTypeSequence';
 import { validateSetForHearingSequence } from './sequences/validateSetForHearingSequence';
 import { validateStampSequence } from './sequences/validateStampSequence';
+import { validateStatusReportOrderSequence } from '@web-client/presenter/sequences/StatusReportOrder/validateStatusReportOrderSequence';
 import { validateTrialSessionHearingNoteSequence } from './sequences/validateTrialSessionHearingNoteSequence';
 import { validateTrialSessionNoteSequence } from './sequences/validateTrialSessionNoteSequence';
 import { validateTrialSessionPlanningSequence } from './sequences/validateTrialSessionPlanningSequence';
@@ -1594,6 +1595,7 @@ export const presenterSequences = {
   validateSetForHearingSequence:
     validateSetForHearingSequence as unknown as Function,
   validateStampSequence: validateStampSequence as unknown as Function,
+  validateStatusReportOrderSequence,
   validateTrialSessionHearingNoteSequence:
     validateTrialSessionHearingNoteSequence as unknown as Function,
   validateTrialSessionNoteSequence:

diff --git a/web-client/src/presenter/sequences/StatusReportOrder/validateStatusReportOrderSequence.ts b/web-client/src/presenter/sequences/StatusReportOrder/validateStatusReportOrderSequence.ts
@@ -0,0 +1,16 @@
+import { clearAlertsAction } from '@web-client/presenter/actions/clearAlertsAction';
+import { setValidationAlertErrorsAction } from '@web-client/presenter/actions/setValidationAlertErrorsAction';
+import { setValidationErrorsAction } from '../../actions/setValidationErrorsAction';
+import { showProgressSequenceDecorator } from '../../utilities/showProgressSequenceDecorator';
+import { validateStatusReportOrderFormAction } from '../../actions/StatusReportOrder/validateStatusReportOrderFormAction';
+
+export const validateStatusReportOrderSequence = [
+  showProgressSequenceDecorator([
+    clearAlertsAction,
+    validateStatusReportOrderFormAction,
+    {
+      error: [setValidationErrorsAction, setValidationAlertErrorsAction],
+      success: [clearAlertsAction],
+    },
+  ]),
+] as unknown as () => void;
diff --git a/web-client/src/views/ErrorNotification.tsx b/web-client/src/views/ErrorNotification.tsx
@@ -15,7 +15,7 @@ export const ErrorNotification = connect(
     alertError?: {
       title?: string;
       message?: string;
-      preventAutoScroll?: boolean;
+      scrollToErrorNotification?: boolean;
     };
     alertHelper: {
       showErrorAlert?: boolean;
@@ -29,7 +29,7 @@ export const ErrorNotification = connect(
 
     useEffect(() => {
       const notification = notificationRef.current;
-      if (notification && !alertError?.preventAutoScroll) {
+      if (notification && alertError?.scrollToErrorNotification) {
         window.scrollTo(0, 0);
       }
     });

diff --git a/web-client/src/views/StatusReportOrder.tsx b/web-client/src/views/StatusReportOrder.tsx
@@ -24,6 +24,8 @@ export const StatusReportOrder = connect(
       sequences.statusReportOrderPdfPreviewSequence,
     submitStatusReportOrderSequence: sequences.submitStatusReportOrderSequence,
     updateFormValueSequence: sequences.updateStatusReportOrderFormValueSequence,
+    validateStatusReportOrderSequence:
+      sequences.validateStatusReportOrderSequence,
     validationErrors: state.validationErrors,
   },
   function StatusReportOrder({
@@ -36,6 +38,7 @@ export const StatusReportOrder = connect(
     statusReportOrderPdfPreviewSequence,
     submitStatusReportOrderSequence,
     updateFormValueSequence,
+    validateStatusReportOrderSequence,
     validationErrors,
   }) {
     return (
@@ -226,6 +229,7 @@ export const StatusReportOrder = connect(
                           toFormat: constants.DATE_FORMATS.YYYYMMDD,
                           value: e.target.value,
                         });
+                        validateStatusReportOrderSequence();
                       }}
                     />
                   </FormGroup>
@@ -294,6 +298,7 @@ export const StatusReportOrder = connect(
                             key: e.target.name,
                             value: e.target.value,
                           });
+                          validateStatusReportOrderSequence();
                         }}
                       />
                       <label
@@ -326,6 +331,7 @@ export const StatusReportOrder = connect(
                             key: e.target.name,
                             value: e.target.value,
                           });
+                          validateStatusReportOrderSequence();
                         }}
                       />
                       <label