Proponent Confirm Email Updates

Confirmation message text change

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

@@ -25,7 +25,7 @@ import { YES_NO_LIST } from '@/utils/constants/application';
 import { CONTACT_PREFERENCE_LIST, PROJECT_RELATIONSHIP_LIST } from '@/utils/constants/housing';
 import { BasicResponse, Regex, RouteName } from '@/utils/enums/application';
 import { IntakeFormCategory, IntakeStatus } from '@/utils/enums/housing';
-import { confirmationTemplate } from '@/utils/templates';
+import { confirmationTemplateEnquiry } from '@/utils/templates';
 
 import type { Ref } from 'vue';
 import type { IInputEvent } from '@/interfaces';
@@ -200,7 +200,7 @@ async function onSubmit(data: any) {
       formRef.value?.setFieldValue('activityId', enquiryResponse.data.activityId);
       formRef.value?.setFieldValue('enquiryId', enquiryResponse.data.enquiryId);
       // Send confirmation email
-      emailConfirmation(enquiryResponse.data.activityId);
+      emailConfirmation(enquiryResponse.data.activityId, enquiryResponse.data.enquiryId);
       stopAutoSave();
     } else {
       throw new Error('Failed to retrieve correct enquiry draft data');
@@ -262,19 +262,29 @@ onBeforeMount(async () => {
   submissions.value = (await submissionService.getSubmissions()).data;
 });
 
-async function emailConfirmation(activityId: string) {
+async function emailConfirmation(activityId: string, enquiryId: string) {
   const configCC = getConfig.value.ches?.submission?.cc;
-  const body = confirmationTemplate({
+
+  // Get the first two sentences of the enquiry description
+  // If there are more than two sentences in enquiryDescription, add '..' to the end
+  const enquiryDescription = formRef.value?.values.basic.enquiryDescription || '';
+  let firstTwoSentences = enquiryDescription.split('.').slice(0, 2).join('.') + '.';
+  const sentences = enquiryDescription.split('.').filter((sentence: string) => sentence.trim().length > 0);
+  firstTwoSentences = sentences.length > 2 ? firstTwoSentences.concat('..') : firstTwoSentences;
+
+  const body = confirmationTemplateEnquiry({
     '{{ contactName }}': formRef.value?.values.applicant.contactFirstName,
-    '{{ activityId }}': activityId
+    '{{ activityId }}': activityId,
+    '{{ enquiryDescription }}': firstTwoSentences.trim(),
+    '{{ enquiryId }}': enquiryId
   });
   let applicantEmail = formRef.value?.values.applicant.contactEmail;
   let emailData = {
     from: configCC,
     to: [applicantEmail],
     cc: configCC,
     subject: 'Confirmation of Submission', // eslint-disable-line quotes
-    bodyType: 'text',
+    bodyType: 'html',
     body: body
   };
   await submissionService.emailConfirmation(emailData);

frontend/src/components/housing/submission/IntakeAssistanceConfirmation.vue

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {});
     <div>
       A Housing Navigator will review your submission and contact you. Your form has also been saved as draft, you can
       find it in
-      <router-link :to="{ name: RouteName.HOUSING_SUBMISSIONS }">View my drafts and submissions page.</router-link>
+      <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>

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -57,7 +57,7 @@ import {
   ProjectLocation,
   SubmissionType
 } from '@/utils/enums/housing';
-import { confirmationTemplate } from '@/utils/templates';
+import { confirmationTemplateSubmission } from '@/utils/templates';
 import { omit } from '@/utils/utils';
 
 import type { Ref } from 'vue';
@@ -224,6 +224,8 @@ async function handleEnquirySubmit(values: any, relatedActivityId: string) {
     if (enquiryResponse.data.activityId) {
       toast.success('Form saved');
       assistanceAssignedActivityId.value = enquiryResponse.data.activityId;
+      // Send confirmation email
+      emailConfirmation(enquiryResponse.data.activityId, enquiryResponse.data.submissionId);
     } else {
       toast.error('Failed to submit enquiry');
     }
@@ -335,6 +337,7 @@ async function onSaveDraft(
   if (assistanceRequired && response?.data?.activityId) {
     formUpdated.value = false;
     handleEnquirySubmit(draftData, response.data.activityId);
+    stopAutoSave();
   }
 }
 
@@ -352,7 +355,7 @@ async function onSubmit(data: any) {
       assignedActivityId.value = response.data.activityId;
       formRef.value?.setFieldValue('activityId', response.data.activityId);
       // Send confirmation email
-      emailConfirmation(response.data.activityId);
+      emailConfirmation(response.data.activityId, response.data.submissionId);
       stopAutoSave();
     } else {
       throw new Error('Failed to retrieve correct draft data');
@@ -364,19 +367,20 @@ async function onSubmit(data: any) {
   }
 }
 
-async function emailConfirmation(activityId: string) {
+async function emailConfirmation(activityId: string, submissionId: string) {
   const configCC = getConfig.value.ches?.submission?.cc;
-  const body = confirmationTemplate({
+  const body = confirmationTemplateSubmission({
     '{{ contactName }}': formRef.value?.values.applicant.contactFirstName,
-    '{{ activityId }}': activityId
+    '{{ activityId }}': activityId,
+    '{{ submissionId }}': submissionId
   });
   let applicantEmail = formRef.value?.values.applicant.contactEmail;
   let emailData = {
     from: configCC,
     to: [applicantEmail],
     cc: configCC,
     subject: 'Confirmation of Submission', // eslint-disable-line quotes
-    bodyType: 'text',
+    bodyType: 'html',
     body: body
   };
   await submissionService.emailConfirmation(emailData);

frontend/src/utils/templates.ts

@@ -1,3 +1,7 @@
+const PCNS_URL = window.location.origin;
+const BC_EMAIL_BANNER_IMG = 'https://coms.api.gov.bc.ca/api/v1/object/446ee8ee-e302-4cb8-b44d-24a1f583edba';
+const BC_EMAIL_FOOTER_IMG = 'https://coms.api.gov.bc.ca/api/v1/object/853de44a-e62f-41f5-81fd-6eff6cb66d52';
+
 export const roadmapTemplate = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
   const baseTemplate =
     'Dear {{ contactName }},\n\n' +
@@ -59,13 +63,56 @@ const replacePlaceholders = (baseText: string, replacementConfig: { [key: string
   return newText;
 };
 
-export const confirmationTemplate = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
+export const confirmationTemplateSubmission = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
   const baseTemplate =
-    'Dear {{ contactName }},\n\n' +
-    'The confirmation ID for your submission is: {{ activityId }}.\n\n' +
+    '<div style="width: 880px">' +
+    '<img src="' +
+    BC_EMAIL_BANNER_IMG +
+    '" height="120rem" width="880px"  alt="B.C. Government Logo" /><br><br>' +
+    '<div style="margin-left: 3rem; margin-right: 3rem;">' +
+    'Dear {{ contactName }},<br><br>' +
+    '<b>Confirmation ID: {{ activityId }}</b><br><br>' +
     // eslint-disable-next-line max-len
-    'A Housing Navigator will review your submission and contact you. Keep the Confirmation ID for future reference.\n\n' +
-    'Regards,\n\n' +
-    'Permit Connect Navigator Service';
+    'Thank you for registering your project with the Navigator Service. We have successfully received your project submission. A Navigator will review your submission and contact you. Please keep your confirmation ID for future reference.<br><br>' +
+    'View your project submission <a href="' +
+    PCNS_URL +
+    '/housing/submission/intake?activityId={{ activityId }}&submissionId={{ submissionId }}">here<a>.<br><br>' +
+    'Regards,<br><br>' +
+    '<a href="' +
+    PCNS_URL +
+    '">Navigator Service<a><br><br><br>' +
+    '</div>' +
+    '<img src="' +
+    BC_EMAIL_FOOTER_IMG +
+    '" width="100%" alt="B.C. Government Footer" /><br><br>' +
+    '</div>';
+  return replacePlaceholders(baseTemplate, replaceConfig);
+};
+
+export const confirmationTemplateEnquiry = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
+  const baseTemplate =
+    '<div style="width: 880px">' +
+    '<img src="' +
+    BC_EMAIL_BANNER_IMG +
+    '" height="120rem" width="880px"  alt="B.C. Government Logo" /><br><br>' +
+    '<div style="margin-left: 3rem; margin-right: 3rem;">' +
+    'Dear {{ contactName }},<br><br>' +
+    '<b>Confirmation ID: {{ activityId }}</b><br><br>' +
+    // eslint-disable-next-line max-len
+    'Thank you for submitting an enquiry to the Navigator Service. We have successfully received your enquiry. A Navigator will review your enquiry and contact you. Please keep your confirmation ID for future reference.<br><br>' +
+    '<b>Enquiry detail:</b><br><br>' +
+    '{{ enquiryDescription }}<br><br>' +
+    'View your enquiry <a href="' +
+    PCNS_URL +
+    '/housing/enquiry/intake?activityId={{ activityId }}&enquiryId={{ enquiryId }}">here<a>.<br><br>' +
+    'Regards,<br><br>' +
+    '<a href="' +
+    PCNS_URL +
+    '">Navigator Service<a><br><br><br>' +
+    '</div>' +
+    '<img src="' +
+    BC_EMAIL_FOOTER_IMG +
+    '" width="100%" alt="B.C. Government Footer" /><br><br>' +
+    '</div>';
   return replacePlaceholders(baseTemplate, replaceConfig);
 };