Usability improvements: Submission intake form changes, Confirmation …

…page changes
bcgov · Nov 7, 2024 · 3b2ab1b · 3b2ab1b
1 parent fc47b9f
commit 3b2ab1b
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 80 deletions.
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
@@ -6,10 +6,12 @@ import { RouteName } from '@/utils/enums/application';
 // Props
 const {
   assignedActivityId,
+  assignedEnquiryId,
   showHeader = true,
   showHomeLink = true
 } = defineProps<{
   assignedActivityId: string;
+  assignedEnquiryId: string;
   showHeader?: boolean;
   showHomeLink?: boolean;
 }>();
@@ -25,10 +27,18 @@ const {
     >
       Your enquiry has been successfully submitted.
     </Message>
-    <h3>Confirmation ID: {{ assignedActivityId }}</h3>
+    <h3 class="inline-block mr-2">Confirmation ID:</h3>
+    <router-link
+      :to="{
+        name: RouteName.HOUSING_ENQUIRY_INTAKE,
+        query: { activityId: assignedActivityId, enquiryId: assignedEnquiryId }
+      }"
+    >
+      <span class="text-2xl">{{ assignedActivityId }}</span>
+    </router-link>
     <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.
+      A Housing Navigator will review your submission and contact you in 2 business days. Please check your email for
+      the confirmation email and keep the confirmation ID for future reference.
     </div>
     <div
       v-if="showHomeLink"
@@ -38,3 +48,8 @@ const {
     </div>
   </div>
 </template>
+<style scoped lang="scss">
+.inline-block {
+  display: inline-block;
+}
+</style>
diff --git a/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue b/frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue
@@ -42,6 +42,7 @@ const { getConfig } = storeToRefs(useConfigStore());
 
 // State
 const assignedActivityId: Ref<string | undefined> = ref(undefined);
+const assignedEnquiryId: Ref<string | undefined> = ref(undefined);
 const autoSaveRef: Ref<InstanceType<typeof FormAutosave> | null> = ref(null);
 const editable: Ref<boolean> = ref(true);
 const filteredProjectActivityIds: Ref<Array<string>> = ref([]);
@@ -117,7 +118,7 @@ async function confirmNext(data: any) {
 
 function confirmSubmit(data: any) {
   confirm.require({
-    message: 'Are you sure you wish to submit this form? Please review the form before submitting.',
+    message: 'Are you sure you wish to submit this form?',
     header: 'Please confirm submission',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',
@@ -254,6 +255,7 @@ async function onSubmit(data: any) {
 
     if (enquiryResponse.data.activityId && enquiryResponse.data.enquiryId) {
       assignedActivityId.value = enquiryResponse.data.activityId;
+      assignedEnquiryId.value = enquiryResponse.data.enquiryId;
       formRef.value?.setFieldValue('activityId', enquiryResponse.data.activityId);
       formRef.value?.setFieldValue('enquiryId', enquiryResponse.data.enquiryId);
 
@@ -296,7 +298,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <div v-if="!assignedActivityId">
+  <div v-if="!assignedActivityId || !assignedEnquiryId">
     <div class="mb-2 p-0">
       <BackButton
         :route-name="getBackButtonConfig.routeName"
@@ -524,6 +526,7 @@ onBeforeMount(async () => {
   <EnquiryIntakeConfirmation
     v-else
     :assigned-activity-id="assignedActivityId"
+    :assigned-enquiry-id="assignedEnquiryId"
   />
 </template>
 

diff --git a/frontend/src/components/housing/submission/IntakeAssistanceConfirmation.vue b/frontend/src/components/housing/submission/IntakeAssistanceConfirmation.vue
@@ -4,8 +4,9 @@ import { Message } from '@/lib/primevue';
 import { RouteName } from '@/utils/enums/application';
 
 // Props
-const { assignedActivityId } = defineProps<{
+const { assignedActivityId, assignedEnquiryId } = defineProps<{
   assignedActivityId: string;
+  assignedEnquiryId: string;
 }>();
 </script>
 
@@ -19,13 +20,26 @@ const { assignedActivityId } = defineProps<{
     >
       Your assistance request has been successfully submitted.
     </Message>
-    <h3>Confirmation ID: {{ assignedActivityId }}</h3>
+    <h3 class="inline-block mr-2">Confirmation ID:</h3>
+    <router-link
+      :to="{
+        name: RouteName.HOUSING_ENQUIRY_INTAKE,
+        query: { activityId: assignedActivityId, enquiryId: assignedEnquiryId }
+      }"
+    >
+      <span class="text-2xl">{{ assignedActivityId }}</span>
+    </router-link>
     <div>
-      A Housing Navigator will review your submission and contact you. Your form has also been saved as draft, you can
-      find it in
+      A Housing Navigator will review your submission and contact you in 2 business days. Your form has also been saved
+      as draft, you can find it in
       <router-link :to="{ name: RouteName.HOUSING_SUBMISSIONS }">My drafts and previous entries.</router-link>
       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.HOUSING }">Back to Housing</router-link></div>
   </div>
 </template>
+<style scoped lang="scss">
+.inline-block {
+  display: inline-block;
+}
+</style>
diff --git a/frontend/src/components/housing/submission/SubmissionAssistance.vue b/frontend/src/components/housing/submission/SubmissionAssistance.vue
@@ -43,7 +43,7 @@ const checkApplicantValuesValid = (
 
 const confirmSubmit = () => {
   confirm.require({
-    message: 'Are you sure you want to request assistance for this form? Please review this form before submitting.',
+    message: 'Are you sure you want to request assistance for this form?',
     header: 'Please confirm assistance',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',

diff --git a/frontend/src/components/housing/submission/SubmissionIntakeConfirmation.vue b/frontend/src/components/housing/submission/SubmissionIntakeConfirmation.vue
@@ -4,8 +4,9 @@ import { Message } from '@/lib/primevue';
 import { RouteName } from '@/utils/enums/application';
 
 // Props
-const { assignedActivityId } = defineProps<{
+const { assignedActivityId, assignedSubmissionId } = defineProps<{
   assignedActivityId: string;
+  assignedSubmissionId: string;
 }>();
 </script>
 
@@ -19,11 +20,24 @@ const { assignedActivityId } = defineProps<{
     >
       Your application has been successfully submitted.
     </Message>
-    <h3>Confirmation ID: {{ assignedActivityId }}</h3>
+    <h3 class="inline-block mr-2">Confirmation ID:</h3>
+    <router-link
+      :to="{
+        name: RouteName.HOUSING_SUBMISSION_INTAKE,
+        query: { activityId: assignedActivityId, submissionId: assignedSubmissionId }
+      }"
+    >
+      <span class="text-2xl">{{ assignedActivityId }}</span>
+    </router-link>
     <div>
-      Your submission will be reviewed and you will be contacted by a Housing Navigator. Please check your email for the
-      confirmation email and keep the confirmation ID for future reference.
+      Your submission will be reviewed and you will be contacted by a Housing Navigator in 2 business days. 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.HOUSING }">Back to Housing</router-link></div>
   </div>
 </template>
+<style scoped lang="scss">
+.inline-block {
+  display: inline-block;
+}
+</style>