Proponent Confirm Email Updates

Confirmation message text change

app/src/controllers/submission.ts

@@ -499,9 +499,13 @@ const controller = {
    * @function emailConfirmation
    * Send an email with the confirmation of submission
    */
-  emailConfirmation: async (req: Request<never, never, { emailData: Email }>, res: Response, next: NextFunction) => {
+  emailConfirmation: async (
+    req: Request<never, { html?: string }, { emailData: Email }>,
+    res: Response,
+    next: NextFunction
+  ) => {
     try {
-      const { data, status } = await emailService.email(req.body.emailData);
+      const { data, status } = await emailService.email(req.body.emailData, req.query?.html === 'true');
       res.status(status).json(data);
     } catch (e: unknown) {
       next(e);

app/src/services/email.ts

@@ -54,9 +54,10 @@ const service = {
    * @param emailData
    * @returns Axios response status and data
    */
-  email: async (emailData: Email) => {
+  email: async (emailData: Email, html: boolean = false) => {
     try {
-      const { data, status } = await chesAxios().post('/email', emailData, {
+      const emailDataObj = html ? { ...emailData, bodyType: 'html' } : emailData;
+      const { data, status } = await chesAxios().post('/email', emailDataObj, {
         headers: {
           'Content-Type': 'application/json'
         },

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

@@ -17,7 +17,7 @@ import { ACTIVITY_ID_LENGTH, 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';
 
@@ -187,7 +187,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');
@@ -241,11 +241,21 @@ onBeforeMount(() => {
   if (props.enquiryId) loadEnquiry(props.enquiryId);
 });
 
-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 = {
@@ -256,7 +266,7 @@ async function emailConfirmation(activityId: string) {
     bodyType: 'text',
     body: body
   };
-  await submissionService.emailConfirmation(emailData);
+  await submissionService.emailConfirmation(emailData, true);
 }
 
 async function checkActivityIdValidity(event: Event) {

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';
@@ -352,7 +352,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,11 +364,12 @@ 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 = {
@@ -379,7 +380,7 @@ async function emailConfirmation(activityId: string) {
     bodyType: 'text',
     body: body
   };
-  await submissionService.emailConfirmation(emailData);
+  await submissionService.emailConfirmation(emailData, true);
 }
 
 async function onRegisteredNameInput(e: AutoCompleteCompleteEvent) {

frontend/src/services/submissionService.ts

@@ -97,13 +97,13 @@ export default {
    * Send an email with the submission confirmation data
    * @returns {Promise} An axios response
    */
-  emailConfirmation(emailData: Email) {
+  emailConfirmation(emailData: Email, html: boolean = false) {
     if (emailData.to && !Array.isArray(emailData.to)) {
       emailData.to = delimitEmails(emailData.to);
     }
     if (emailData.cc && !Array.isArray(emailData.cc)) {
       emailData.cc = delimitEmails(emailData.cc);
     }
-    return appAxios().put('submission/emailConfirmation', { emailData });
+    return appAxios().put('submission/emailConfirmation', { emailData }, { params: { html } });
   }
 };

frontend/src/utils/templates.ts

@@ -59,13 +59,64 @@ 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 PCNS_URL = 'https://pcns-prod-master.apps.silver.devops.gov.bc.ca';
+  const BC_BANNER = 'https://coms-dev.api.gov.bc.ca/api/v1/object/3dfe0519-272b-48bb-aef0-799f77e44c8c';
+  const BC_FOOTER = 'https://coms-dev.api.gov.bc.ca/api/v1/object/3d9f8509-3b31-4ace-9a70-4b5a743ea856';
+
   const baseTemplate =
-    'Dear {{ contactName }},\n\n' +
-    'The confirmation ID for your submission is: {{ activityId }}.\n\n' +
+    '<div style="width: 880px">' +
+    '<img src="' +
+    BC_BANNER +
+    '" 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_FOOTER +
+    '" width="100%" alt="B.C. Government Footer" /><br><br>' +
+    '</div>';
+  return replacePlaceholders(baseTemplate, replaceConfig);
+};
+
+export const confirmationTemplateEnquiry = (replaceConfig: { [key: string]: string | string[] | undefined }) => {
+  const PCNS_URL = 'https://pcns-prod-master.apps.silver.devops.gov.bc.ca';
+  const BC_BANNER = 'https://coms-dev.api.gov.bc.ca/api/v1/object/3dfe0519-272b-48bb-aef0-799f77e44c8c';
+  const BC_FOOTER = 'https://coms-dev.api.gov.bc.ca/api/v1/object/3d9f8509-3b31-4ace-9a70-4b5a743ea856';
+
+  const baseTemplate =
+    '<div style="width: 880px">' +
+    '<img src="' +
+    BC_BANNER +
+    '" 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_FOOTER +
+    '" width="100%" alt="B.C. Government Footer" /><br><br>' +
+    '</div>';
   return replacePlaceholders(baseTemplate, replaceConfig);
 };