Made updates to permit project and tracker pages

frontend/src/components/common/StatusPill.vue

@@ -4,11 +4,29 @@ import { computed } from 'vue';
 import { PermitAuthorizationStatus, PermitAuthorizationStatusDescriptions } from '@/utils/enums/housing';
 
 // Props
-const { authStatus, toolTipDirection = 'right' } = defineProps<{
+const {
+  authStatus,
+  toolTipDirection = 'right',
+  enlarge = false
+} = defineProps<{
   authStatus?: string;
   toolTipDirection?: string;
+  enlarge?: boolean;
 }>();
 
+const defaultDimensions = {
+  fontSize: '0.75rem',
+  height: '1.5rem',
+  iconFontSize: '1rem',
+  lineHeight: '1.5rem'
+};
+const enlargedDimensions = {
+  fontSize: '1rem',
+  height: '2rem',
+  iconFontSize: '1.5rem',
+  lineHeight: '2rem'
+};
+
 const pillState = {
   [PermitAuthorizationStatus.ABANDONED]: {
     badgeClass: 'grey',
@@ -60,6 +78,7 @@ const pillState = {
   }
 };
 
+const dimensions = computed(() => (enlarge ? enlargedDimensions : defaultDimensions));
 const getState = computed(() => {
   return pillState[authStatus as keyof typeof pillState];
 });
@@ -71,6 +90,12 @@ const getState = computed(() => {
       v-tooltip="{ value: getState?.toolTip, modifier: toolTipDirection }"
       class="flex justify-content-center align-items-center auth-indicator"
       :class="[getState?.badgeClass]"
+      :style="{
+        '--font-size': dimensions.fontSize,
+        '--icon-font-size': dimensions.iconFontSize,
+        '--height': dimensions.height,
+        '--line-height': dimensions.lineHeight
+      }"
     >
       <font-awesome-icon
         v-if="getState?.iconString"
@@ -88,9 +113,9 @@ const getState = computed(() => {
   border-radius: 2px;
   border-style: solid;
   border-width: 0.1rem;
-  font-size: 0.75rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
+  font-size: var(--font-size);
+  height: var(--height);
+  line-height: var(--line-height);
   padding-left: 0.5rem;
   padding-right: 0.5rem;
   cursor: default;
@@ -102,7 +127,7 @@ const getState = computed(() => {
 }
 
 .icon-detail {
-  font-size: 1rem;
+  font-size: var(--icon-font-height);
   margin-right: 0.5rem;
 }
 

frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue

@@ -27,8 +27,8 @@ const {
     </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.
+      Your submission will be reviewed and you will be contacted by your Housing Navigator 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"

frontend/src/components/housing/projects/CreateEnquiryDialog.vue

@@ -7,10 +7,12 @@ import { useSubmissionStore } from '@/store';
 import { formatDate } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
+import type { User } from '@/types';
 
 // Props
-const { confirmationId = '' } = defineProps<{
+const { confirmationId = '', navigator } = defineProps<{
   confirmationId?: string;
+  navigator?: User;
 }>();
 
 // Store
@@ -75,11 +77,14 @@ const handleCloseDialog = () => {
             </div>
           </div>
         </div>
+        <div class="mb-2 mt-4 font-bold">
+          <span class="query-to-nav mt-3">To: {{ navigator?.firstName }} {{ navigator?.lastName }}</span>
+        </div>
         <Textarea
           v-model="enquiryDescription"
           aria-describedby="ask-navigator"
           placeholder="Ask a navigator"
-          class="w-full mt-4"
+          class="w-full"
           maxlength="4000"
           rows="5"
         />

frontend/src/components/permit/PermitEnquiryModal.vue

@@ -5,7 +5,7 @@ import EnquiryIntakeConfirmation from '@/components/housing/enquiry/EnquiryIntak
 import { Button, Dialog, Textarea } from '@/lib/primevue';
 import { formatDate } from '@/utils/formatters';
 
-import type { Permit, PermitType } from '@/types';
+import type { Permit, PermitType, User } from '@/types';
 import type { Ref } from 'vue';
 
 // Types
@@ -15,11 +15,13 @@ type CombinedPermit = Permit & PermitType;
 const {
   permit,
   confirmationId = '',
+  navigator,
   updatedBy
 } = defineProps<{
   permit: CombinedPermit | undefined;
   confirmationId?: string;
-  updatedBy?: string;
+  navigator: User | undefined;
+  updatedBy: string | undefined;
 }>();
 
 // State
@@ -37,7 +39,7 @@ const handleCloseDialog = () => {
 
 const onSubmitEnquiry = () => {
   if (enquiryDescription.value) {
-    const enquiryMessage = enquiryDescription.value + `\n\nRe: ${permit?.name} \nTracking ID: ${permit?.trackingId}`;
+    const enquiryMessage = `Re: ${permit?.name} \nTracking ID: ${permit?.trackingId} \n\n` + enquiryDescription.value;
     emits('onSumbitEnquiry', enquiryMessage);
   }
 };
@@ -116,6 +118,9 @@ const onSubmitEnquiry = () => {
             <div class="font-bold">{{ permit?.agency }}</div>
           </div>
         </div>
+        <div class="mb-2 mt-4 font-bold">
+          <span class="query-to-nav mt-3">To: {{ navigator?.firstName }} {{ navigator?.lastName }}</span>
+        </div>
         <Textarea
           v-model="enquiryDescription"
           aria-describedby="ask-navigator"

frontend/src/router/index.ts

@@ -275,6 +275,8 @@ export default function getRouter() {
           }, 500);
         });
       }
+
+      return { top: 0 };
     }
   });
 

frontend/src/views/housing/project/ProjectView.vue

@@ -5,12 +5,13 @@ import { useRouter } from 'vue-router';
 
 import Breadcrumb from '@/components/common/Breadcrumb.vue';
 import CreateEnquiryDialog from '@/components/housing/projects/CreateEnquiryDialog.vue';
-// import ProjectPermitModal from '@/components/housing/projects/ProjectPermitModal.vue';
 import StatusPill from '@/components/common/StatusPill.vue';
 import { Accordion, AccordionTab, Button, Card, Divider, useToast } from '@/lib/primevue';
+import { useAuthNStore, useConfigStore } from '@/store';
 import { BasicResponse, RouteName } from '@/utils/enums/application';
 import { PermitAuthorizationStatus, PermitNeeded, PermitStatus } from '@/utils/enums/housing';
 import { formatDate } from '@/utils/formatters';
+import { confirmationTemplateEnquiry } from '@/utils/templates';
 
 import { enquiryService, permitService, submissionService, userService } from '@/services';
 import { useSubmissionStore, useTypeStore } from '@/store';
@@ -40,6 +41,8 @@ const breadcrumbHome: MenuItem = { label: 'Housing', route: RouteName.HOUSING };
 
 // Store
 const submissionStore = useSubmissionStore();
+const { getConfig } = storeToRefs(useConfigStore());
+const { getProfile } = storeToRefs(useAuthNStore());
 const { getPermits, getSubmission } = storeToRefs(submissionStore);
 
 const typeStore = useTypeStore();
@@ -87,6 +90,31 @@ const permitsSubmitted: ComputedRef<Array<CombinedPermit>> = computed(() => {
 const router = useRouter();
 const toast = useToast();
 
+async function emailConfirmation(activityId: string, enquiryId: string, enquiryDescription: string) {
+  const configCC = getConfig.value.ches?.submission?.cc;
+  const user = getProfile;
+
+  const body = confirmationTemplateEnquiry({
+    '{{ contactName }}': user.value?.name,
+    '{{ activityId }}': activityId,
+    '{{ enquiryDescription }}': enquiryDescription,
+    '{{ enquiryId }}': enquiryId
+  });
+  let applicantEmail = user.value?.email;
+
+  if (applicantEmail) {
+    let emailData = {
+      from: configCC,
+      to: [applicantEmail],
+      cc: configCC,
+      subject: 'Confirmation of Submission', // eslint-disable-line quotes
+      bodyType: 'html',
+      body: body
+    };
+    await submissionService.emailConfirmation(emailData);
+  }
+}
+
 function permitBusinessSortFcn(a: CombinedPermit, b: CombinedPermit) {
   return a.businessDomain > b.businessDomain ? 1 : -1;
 }
@@ -154,6 +182,11 @@ async function handleEnquirySubmit(enquiryDescription: string = '') {
   try {
     const response = await enquiryService.createEnquiry(enquiryData);
     enquiryConfirmationId.value = response?.data?.activityId ? response.data.activityId : '';
+
+    // Send confirmation email
+    if (enquiryConfirmationId.value) {
+      emailConfirmation(response.data.activityId, response.data.enquiryId, enquiryDescription);
+    }
   } catch (e: any) {
     toast.error('Failed to submit enquiry', e);
   }
@@ -197,7 +230,12 @@ onMounted(async () => {
     v-if="!loading && getSubmission"
     class="app-primary-color"
   >
-    <div class="mt-7 mb-2 flex justify-content-between align-items-center">
+    <div class="disclaimer-block p-5 mt-5">
+      Based on the information you provided, the following permits are recommended. Please note, that this information
+      is for guidance purposes only and is intended to help you prepare a complete application. Recommendations may be
+      updated as we review your project or receive further details.
+    </div>
+    <div class="mt-8 mb-2 flex justify-content-between align-items-center">
       <h1
         class="m-0 cursor-pointer hover:underline"
         @click="
@@ -231,12 +269,12 @@ onMounted(async () => {
       </span>
       <span v-else>Navigator: -</span>
     </div>
-    <div><h3 class="mb-5">Required permits</h3></div>
+    <div><h3 class="mb-5">Recommended permits</h3></div>
     <div
       v-if="!permitsNeeded?.length"
       class="empty-block p-5 mb-2"
     >
-      We will update the necessary permits here as the project progresses. You may see this message while we are
+      We will update the recommended permits here as the project progresses. You may see this message while we are
       investigating or if no application is needed at this time.
     </div>
     <Card
@@ -330,6 +368,7 @@ onMounted(async () => {
     <CreateEnquiryDialog
       v-model:visible="enquiryModalVisible"
       dismissable-mask
+      :navigator="assignee"
       :confirmation-id="enquiryConfirmationId"
       @on-hide="handleDialogClose"
       @on-sumbit-enquiry="handleEnquirySubmit"
@@ -346,6 +385,11 @@ a {
   text-decoration: underline;
 }
 
+.disclaimer-block {
+  outline: solid 1px $app-grey;
+  border-radius: 8px;
+}
+
 .ellipsis-icon {
   cursor: pointer;
   width: 1.5rem;
@@ -358,7 +402,9 @@ a {
 
 .empty-block {
   background-color: $app-grey;
+  border-radius: 8px;
 }
+
 .header-btn {
   max-height: 2rem;
 }