Move invite notification email body to template util function

bcgov · May 21, 2024 · 66c8431 · 66c8431
1 parent abdb21c
commit 66c8431
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 20 deletions.
diff --git a/frontend/src/components/common/InviteButton.vue b/frontend/src/components/common/InviteButton.vue
@@ -300,6 +300,7 @@ async function invite() {
           </Button>
           <Spinner
             v-if="inviteLoading"
+            class="h-2rem w-2rem"
           />
         </div><br />
 

diff --git a/frontend/src/services/inviteService.ts b/frontend/src/services/inviteService.ts
@@ -1,4 +1,5 @@
 import { appAxios, comsAxios } from './interceptors';
+import { invite as inviteEmailTemplate } from '@/utils/emailTemplates';
 
 const PATH = 'permission/invite';
 
@@ -73,35 +74,19 @@ export default {
    */
   emailInvites(resourceType: string, resource: any, currentUser: any, invites: any){
     try {
-      // build template
-      let resourceName, subject, body;
-      // eslint-disable-next-line max-len
-      const currentUserEmail = `<a href="mailto:${currentUser.email}" style="color: #1a5a96 !important">${currentUser.email}</a>`;
+      let resourceName, subject;
       // alternate templates depending if resource is a file or a folder
       if (resourceType === 'object') {
         resourceName = resource.name;
         subject = `You have been invited to access ${resourceName} on BCBox`;
-        body = `<html style="color: #495057"><br><br>
-          <h2>${currentUserEmail} invited you to access a file on BCBox</h2>
-          <p>Here's a link to access the file that ${currentUserEmail} shared with you:</p>`;
       }
       else if (resourceType === 'bucket') {
         resourceName = resource.bucketName;
         subject = `You have been invited to access ${resourceName} on BCBox`;
-        body = `<html style="color: #495057"><br><br>
-          <h2>${currentUserEmail} invited you to access a folder on BCBox</h2>\n
-          <p>Here's a link to access the folder that ${currentUserEmail} shared with you:</p>`;
       }
-      // eslint-disable-next-line max-len
-      body = body + `<strong><a style="text-align: center; font-size: large; color: #1a5a96" href="${window.location.origin}/invite/{{token}}">
-          ${resourceName }
-          </a>
-        </strong><br><br>
-        <small>
-          This invite will only work for you and people with existing access. If you do not recognize the sender, do not click on the link above. Only open links that you are expecting from a known sender.
-        </small><br><br>
-        <a style="color: #1a5a96" href="${window.location.origin}">Learn more about BCBox</a>
-      </html>`;
+
+      // build html template for email body
+      const body = inviteEmailTemplate(resourceType, resourceName, currentUser);
 
       // define email data matching the structure required by CHES api
       const emailData:any = {

diff --git a/frontend/src/utils/emailTemplates.ts b/frontend/src/utils/emailTemplates.ts
@@ -0,0 +1,37 @@
+/**
+ * creates template html for the invite notification
+ * @param {string} resourceType either 'object' or 'bucket'
+ * @param {string} resourceName the object name or bucket name
+ * @param {User | null} currentUser current user sending the invite
+ * @returns {string} the template html
+ */
+export function invite(resourceType: string, resourceName: string, currentUser: any): string{
+  let html;
+  // eslint-disable-next-line max-len
+  const currentUserEmail = `<a href="mailto:${currentUser.email}" style="color: #1a5a96 !important">${currentUser.email}</a>`;
+  // alternate templates depending if resource is a file or a folder
+  if (resourceType === 'object') {
+    html = `<html style="color: #495057 !important;"><br>
+      <h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a file on BCBox</h2>
+      <p style="color: #495057 !important;">Here's a link to access the file that ${currentUserEmail} shared with you:</p>`;
+  }
+  else if (resourceType === 'bucket') {
+    html = `<html"><br>
+      <h2 style="color: #495057 !important;">${currentUserEmail} invited you to access a folder on BCBox</h2>\n
+      <p style="color: #495057 !important;">Here's a link to access the folder that ${currentUserEmail} shared with you:</p>`;
+  }
+  // eslint-disable-next-line max-len
+  html = html + `<strong><a style="text-align: center; font-size: large; color: #1a5a96" href="${window.location.origin}/invite/{{token}}">
+      ${resourceName }
+      </a>
+    </strong><br><br>
+    <small style="color: #495057 !important;">
+      This invite will only work for you and people with existing access.
+      If you do not recognize the sender, do not click on the link above.<br>
+      Only open links that you are expecting from a known sender.
+    </small><br><br>
+    <a style="color: #1a5a96" href="${window.location.origin}">Learn more about BCBox</a>
+  </html>`;
+
+  return html;
+}