Restructure handling assistance submission confirmation

bcgov · Jul 2, 2024 · 72a8fa2 · 72a8fa2
1 parent af0bdbb
commit 72a8fa2
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 51 deletions.
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Message } from '@/lib/primevue';
+
+import { RouteName } from '@/utils/enums/application';
+
+// Props
+type Props = {
+  assignedActivityId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <div>
+    <h2>Confirmation of Submission</h2>
+    <Message
+      class="border-none"
+      severity="success"
+      :closable="false"
+    >
+      Your enquiry has been successfully submitted.
+    </Message>
+    <h3>Confirmation ID: {{ props.assignedActivityId }}</h3>
+    <div>
+      A Housing Navigator will review your submission and contact you. Please check your email for the confirmation
+      email and keep the confirmation ID for future reference.
+    </div>
+    <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div>
+  </div>
+</template>
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -7,7 +7,8 @@ import { object, string } from 'yup';
 
 import { Dropdown, InputMask, RadioList, InputText, StepperNavigation, TextArea } from '@/components/form';
 import CollectionDisclaimer from '@/components/housing/CollectionDisclaimer.vue';
-import { Button, Card, Divider, Message, useConfirm, useToast } from '@/lib/primevue';
+import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntakeConfirmation.vue';
+import { Button, Card, Divider, useConfirm, useToast } from '@/lib/primevue';
 import { enquiryService, submissionService } from '@/services';
 import { useConfigStore } from '@/store';
 import { YES_NO_LIST } from '@/utils/constants/application';
@@ -22,20 +23,18 @@ import type { Ref } from 'vue';
 type Props = {
   activityId?: string;
   enquiryId?: string;
-  assignedActivityId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
-  enquiryId: undefined,
-  assignedActivityId: undefined
+  enquiryId: undefined
 });
 
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
 
 // State
-const assignedActivityId: Ref<string | undefined> = ref(props.assignedActivityId);
+const assignedActivityId: Ref<string | undefined> = ref(undefined);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
@@ -444,22 +443,10 @@ async function emailConfirmation(activityId: string) {
       </div>
     </Form>
   </div>
-  <div v-else>
-    <h2>Confirmation of Submission</h2>
-    <Message
-      class="border-none"
-      severity="success"
-      :closable="false"
-    >
-      Your enquiry has been successfully submitted.
-    </Message>
-    <h3>Confirmation ID: {{ assignedActivityId }}</h3>
-    <div>
-      A Housing Navigator will review your submission and contact you. Please check your email for the confirmation
-      email and keep the confirmation ID for future reference.
-    </div>
-    <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div>
-  </div>
+  <EnquiryIntakeConfirmation
+    v-else
+    :assigned-activity-id="assignedActivityId"
+  />
 </template>
 
 <style scoped lang="scss">

diff --git a/frontend/src/components/housing/submission/SubmissionAssistance.vue b/frontend/src/components/housing/submission/SubmissionAssistance.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { Button, useConfirm, useToast } from '@/lib/primevue';
 import { ref } from 'vue';
-import { useRouter } from 'vue-router';
 
 import { enquiryService } from '@/services';
-import { BasicResponse, RouteName } from '@/utils/enums/application';
+import { BasicResponse } from '@/utils/enums/application';
 import { IntakeFormCategory } from '@/utils/enums/housing';
 
 import type { Ref } from 'vue';
@@ -22,7 +21,6 @@ const showTab: Ref<boolean> = ref(true);
 
 // Actions
 const confirm = useConfirm();
-const router = useRouter();
 const toast = useToast();
 
 const checkApplicantValuesValid = (
@@ -58,9 +56,11 @@ const confirmSubmit = (data: any) => {
   });
 };
 
+const emit = defineEmits(['onSubmitAssistance']);
+
 const onSubmit = async (values: any) => {
   try {
-    const tempData = Object.assign(
+    const formattedData = Object.assign(
       {
         basic: {
           applyForPermitConnect: BasicResponse.NO,
@@ -72,14 +72,11 @@ const onSubmit = async (values: any) => {
       { applicant: values?.[IntakeFormCategory.APPLICANT] }
     );
 
-    const enquiryResponse = await enquiryService.createDraft(tempData);
+    const enquiryResponse = await enquiryService.createDraft(formattedData);
 
     if (enquiryResponse.data.activityId) {
       toast.success('Form saved');
-      router.push({
-        name: RouteName.HOUSING_ENQUIRY_INTAKE,
-        query: { assignedActivityId: enquiryResponse.data.activityId }
-      });
+      emit('onSubmitAssistance', enquiryResponse.data.activityId);
     } else {
       toast.error('Failed to submit enquiry');
     }

diff --git a/frontend/src/components/housing/submission/SubmissionIntakeConfirmation.vue b/frontend/src/components/housing/submission/SubmissionIntakeConfirmation.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Message } from '@/lib/primevue';
+
+import { RouteName } from '@/utils/enums/application';
+
+// Props
+type Props = {
+  assignedActivityId: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
+
+<template>
+  <div>
+    <h2>Confirmation of Submission</h2>
+    <Message
+      class="border-none"
+      severity="success"
+      :closable="false"
+    >
+      Your application has been successfully submitted.
+    </Message>
+    <h3>Confirmation ID: {{ props.assignedActivityId }}</h3>
+    <div>
+      Your submission will be reviewed by a Housing Navigator. You may be contacted if needed. Please check your email
+      for the confirmation email and keep the confirmation ID for future reference.
+    </div>
+    <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div>
+  </div>
+</template>
diff --git a/frontend/src/components/housing/submission/SubmissionIntakeForm.vue b/frontend/src/components/housing/submission/SubmissionIntakeForm.vue
@@ -21,7 +21,9 @@ import {
   TextArea
 } from '@/components/form';
 import CollectionDisclaimer from '@/components/housing/CollectionDisclaimer.vue';
+import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntakeConfirmation.vue';
 import SubmissionAssistance from '@/components/housing/submission/SubmissionAssistance.vue';
+import SubmissionIntakeConfirmation from '@/components/housing/submission/SubmissionIntakeConfirmation.vue';
 import { submissionIntakeSchema } from '@/components/housing/submission/SubmissionIntakeSchema';
 import {
   Accordion,
@@ -84,6 +86,7 @@ const { getConfig } = storeToRefs(useConfigStore());
 const activeStep: Ref<number> = ref(0);
 const addressGeocoderOptions: Ref<Array<any>> = ref([]);
 const assignedActivityId: Ref<string | undefined> = ref(undefined);
+const assistanceAssignedActivityId: Ref<string | undefined> = ref(undefined);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
@@ -242,6 +245,10 @@ async function onSubmit(data: any) {
   }
 }
 
+async function onSubmitAssistance(activityId: string) {
+  assistanceAssignedActivityId.value = activityId;
+}
+
 async function emailConfirmation(activityId: string) {
   const configCC = getConfig.value.ches?.submission?.cc;
   const body = confirmationTemplate({
@@ -345,7 +352,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <div v-if="!assignedActivityId">
+  <div v-if="!assignedActivityId && !assistanceAssignedActivityId">
     <BackButton
       :confirm-leave="true"
       confirm-message="Are you sure you want to leave this page?
@@ -368,6 +375,7 @@ onBeforeMount(async () => {
       <SubmissionAssistance
         :form-errors="errors"
         :form-values="values"
+        @on-submit-assistance="onSubmitAssistance"
       />
 
       <input
@@ -1510,22 +1518,14 @@ onBeforeMount(async () => {
       </div>
     </Form>
   </div>
-  <div v-else>
-    <h2>Confirmation of Submission</h2>
-    <Message
-      class="border-none"
-      severity="success"
-      :closable="false"
-    >
-      Your application has been successfully submitted.
-    </Message>
-    <h3>Confirmation ID: {{ assignedActivityId }}</h3>
-    <div>
-      Your submission will be reviewed by a Housing Navigator. You may be contacted if needed. Please check your email
-      for the confirmation email and keep the confirmation ID for future reference.
-    </div>
-    <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div>
-  </div>
+  <SubmissionIntakeConfirmation
+    v-else-if="assignedActivityId"
+    :assigned-activity-id="assignedActivityId"
+  />
+  <EnquiryIntakeConfirmation
+    v-else-if="assistanceAssignedActivityId"
+    :assigned-activity-id="assistanceAssignedActivityId"
+  />
 </template>
 
 <style scoped lang="scss">

diff --git a/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue b/frontend/src/views/housing/enquiry/EnquiryIntakeView.vue
@@ -9,13 +9,11 @@ import type { Ref } from 'vue';
 type Props = {
   activityId?: string;
   enquiryId?: string;
-  assignedActivityId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
-  enquiryId: undefined,
-  assignedActivityId: undefined
+  enquiryId: undefined
 });
 
 // State
@@ -32,6 +30,5 @@ onMounted(async () => {
     v-if="!loading"
     :activity-id="props.activityId"
     :enquiry-id="props.enquiryId"
-    :assigned-activity-id="props.assignedActivityId"
   />
 </template>