From 1220e26282756dd732cee74aa87e7a27e8e0ece3 Mon Sep 17 00:00:00 2001
From: Sanjay Babu <sanjaytkbabu@gmail.com>
Date: Fri, 20 Sep 2024 14:57:24 -0700
Subject: [PATCH] FormNavigationGuard added to Submission and Enquiry intake

---
 .../src/components/housing/enquiry/EnquiryIntakeForm.vue   | 6 +++---
 .../components/housing/submission/SubmissionIntakeForm.vue | 7 ++++---
 .../unit/components/shasIntake/EnquiryIntakeForm.spec.ts   | 3 ++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
index c89280e6..1833308f 100644
--- a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
+++ b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -9,6 +9,7 @@ import BackButton from '@/components/common/BackButton.vue';
 import {
   EditableDropdown,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputText,
   RadioList,
@@ -293,9 +294,6 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
   <div v-if="!assignedActivityId">
     <div class="mb-2 p-0">
       <BackButton
-        :confirm-leave="editable && !!formUpdated"
-        confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
         :route-name="getBackButtonConfig.routeName"
         :text="getBackButtonConfig.text"
       />
@@ -317,6 +315,8 @@ async function emailConfirmation(activityId: string, enquiryId: string) {
       @submit="confirmSubmit"
       @change="formUpdated = true"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <input
         type="hidden"
         name="activityId"
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
index 5449ad9f..565d97ee 100644
--- a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
+++ b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -13,6 +13,7 @@ import {
   Calendar,
   Checkbox,
   Dropdown,
+  FormNavigationGuard,
   InputMask,
   InputNumber,
   RadioList,
@@ -485,12 +486,10 @@ onBeforeMount(async () => {
 <template>
   <div v-if="!assignedActivityId && !assistanceAssignedActivityId">
     <BackButton
-      :confirm-leave="editable && !!formUpdated"
-      confirm-message="Are you sure you want to leave this page?
-      Any unsaved changes will be lost. Please save as draft first."
       :route-name="getBackButtonConfig.routeName"
       :text="getBackButtonConfig.text"
     />
+
     <div class="flex justify-content-center app-primary-color mt-3">
       <h3>Project Investigation Form</h3>
     </div>
@@ -506,6 +505,8 @@ onBeforeMount(async () => {
       @submit="confirmSubmit"
       @change="() => (formUpdated = true)"
     >
+      <FormNavigationGuard v-if="editable && !!formUpdated" />
+
       <SubmissionAssistance
         v-if="editable && values?.applicant"
         :form-errors="errors"
diff --git a/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts b/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts
index 6e76e5c9..b3ba65f4 100644
--- a/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts
+++ b/frontend/tests/unit/components/shasIntake/EnquiryIntakeForm.spec.ts
@@ -20,7 +20,8 @@ vi.mock('vue-router', () => ({
     params: {},
     query: {}
   }),
-  onBeforeRouteUpdate: vi.fn()
+  onBeforeRouteUpdate: vi.fn(),
+  onBeforeRouteLeave: vi.fn()
 }));
 
 const getActivityIds = vi.spyOn(submissionService, 'getActivityIds');