CLASSROOMIO-T-213: Replace all email notifications with Nodemailer

package.json

@@ -28,6 +28,7 @@
     "@types/paystack": "^2.0.1",
     "@types/pluralize": "0.0.30",
     "ai": "^2.1.31",
+    "axios": "^1.5.1",
     "body-parser": "^1.20.2",
     "canvas-confetti": "^1.6.0",
     "cookie-parser": "^1.4.6",

src/lib/components/Course/components/Navigation/NavExpandable.svelte

@@ -5,12 +5,14 @@
   import IconButton from '$lib/components/IconButton/index.svelte';
   import { NavClasses } from '$lib/utils/constants/reusableClass';
   import NavIcons from './NavIcons.svelte';
+  import { SkeletonPlaceholder, SkeletonText } from 'carbon-components-svelte';
 
   export let handleClick = () => {};
   export let label = '';
   export let isGroupActive = false;
   export let isExpanded = true;
   export let total = 0;
+  export let isLoading = true;
   // export let subMenuItems = [];
 
   function onClick() {
@@ -23,32 +25,39 @@
 </script>
 
 <div class="">
-  <button
-    class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
-      NavClasses.active} w-[95%]"
-    tabindex="0"
-    on:click={onClick}
-  >
-    <NavIcons name={label} />
-    <span class="font-bold text-md">{label}</span>
-    {#if total}
-      <span class="ml-1">({total})</span>
-    {/if}
-    <span class="grow" />
-
-    {#if label === 'Lessons'}
-      <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
-        {#if isExpanded}
-          <ChevronUpIcon class="carbon-icon dark:text-white" />
-        {:else}
-          <ChevronDownIcon class="carbon-icon dark:text-white" />
-        {/if}
-      </IconButton>
-    {/if}
-  </button>
-  {#if isExpanded}
-    <div in:slide out:slide class="flex flex-col">
-      <slot />
+  {#if isLoading}
+    <div class="w-11/12 mx-auto">
+      <SkeletonText class="py-3 px-4 mb-3 rounded-md" style="height: 40px;" />
     </div>
+  {:else}
+    <button
+      class="item relative flex items-center py-3 px-4 ml-2 mb-1 {NavClasses.item} {isGroupActive &&
+        NavClasses.active} w-[95%]"
+      tabindex="0"
+      on:click={onClick}
+      disabled={isLoading}
+    >
+      <NavIcons name={label} />
+      <span class="font-bold text-md">{label}</span>
+      {#if total}
+        <span class="ml-1">({total})</span>
+      {/if}
+      <span class="grow" />
+
+      {#if label === 'Lessons' && !isLoading}
+        <IconButton size="small" stopPropagation={true} onClick={toggleIsExpanded}>
+          {#if isExpanded}
+            <ChevronUpIcon class="carbon-icon dark:text-white" />
+          {:else}
+            <ChevronDownIcon class="carbon-icon dark:text-white" />
+          {/if}
+        </IconButton>
+      {/if}
+    </button>
+    {#if isExpanded}
+      <div in:slide out:slide class="flex flex-col">
+        <slot />
+      </div>
+    {/if}
   {/if}
 </div>

src/lib/components/Course/components/Navigation/index.svelte

@@ -255,6 +255,7 @@
             isGroupActive={(path || $page.url.pathname) === navItem.to}
             isExpanded={isLessonActive}
             total={navItem.isLecture ? ($lessons || []).length : 0}
+            isLoading={!$course.id}
           >
             {#if navItem.isLecture}
               {#each $lessons as item, index}

src/lib/components/Course/components/People/InviationModal.svelte

@@ -12,10 +12,12 @@
   import { currentOrg } from '$lib/utils/store/org';
   import { getOrgTeam } from '$lib/utils/services/org';
   import type { OrgTeamMember } from '$lib/utils/types/org';
-  import { sendTeacherCourseWelcome } from './utils';
-  import type { Course } from '$lib/utils/types';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import { getStudentInviteLink } from '$lib/utils/functions/course';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
 
   interface Tutor {
     id: number;
@@ -52,7 +54,7 @@
         role_id: ROLE.TUTOR
       });
 
-      sendTeacherCourseWelcome({
+      triggerSendEmail(NOTIFICATION_NAME.WELCOME_TEACHER_TO_COURSE, {
         to: tutor.email,
         name: tutor.text,
         orgName: $currentOrg.name,

src/lib/components/Course/components/People/utils.ts

@@ -1,31 +0,0 @@
-import { supabase } from '$lib/utils/functions/supabase';
-
-export async function sendTeacherCourseWelcome(params: {
-  to: string;
-  name: string;
-  orgName: string;
-  orgSiteName: string;
-  courseName: string;
-}) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/course/teacher_welcome', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify(params)
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}

src/lib/components/CourseLandingPage/components/PaymentModal.svelte

@@ -4,8 +4,11 @@
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { coursePaymentValidation } from '$lib/utils/functions/validator';
   import { Link } from 'carbon-components-svelte';
-  import { sendTeacherStudentJoinRequest, sendStudentRequestReceipt } from './utils';
   import { currentOrg } from '$lib/utils/store/org';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
 
   export let open = false;
   export let paymentLink = '';
@@ -41,7 +44,7 @@
       step = STEPS.STEP_2;
 
       // Send email to first added teacher of student wanting to join
-      sendTeacherStudentJoinRequest({
+      triggerSendEmail(NOTIFICATION_NAME.SEND_TEACHER_STUDENT_BUY_REQUEST, {
         to: teacherEmail,
         courseName,
         studentEmail: fields.email,
@@ -54,7 +57,7 @@
 
   function onClickPaymentLink() {
     // Send email to student to send proof of payment to teacher
-    sendStudentRequestReceipt({
+    triggerSendEmail(NOTIFICATION_NAME.STUDENT_PROOVE_COURSE_PAYMENT, {
       to: fields.email,
       courseName,
       teacherEmail,

src/lib/components/CourseLandingPage/components/utils.ts

@@ -1,60 +0,0 @@
-import { supabase } from '$lib/utils/functions/supabase';
-
-export async function sendTeacherStudentJoinRequest(params: {
-  to: string;
-  courseName: string;
-  studentEmail: string;
-  studentFullname: string;
-}) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/course/teacher_student_buycourse', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify(params)
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}
-
-export async function sendStudentRequestReceipt(params: {
-  to: string;
-  courseName: string;
-  orgName: string;
-  studentFullname: string;
-  teacherEmail: string;
-}) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/course/student_prove_payment', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify(params)
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}

src/lib/components/Navigation/lms.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { page } from '$app/stores';
   import { browser } from '$app/environment';
   import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
@@ -28,6 +28,10 @@
       localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
     }
   }
+
+  function shortenName(name: string) {
+    return name?.substring(0, 2)?.toUpperCase() || '';
+  }
 </script>
 
 <nav class="{navClass} flex w-full p-2 md:px-6 bg-primary-700 h-[48px]">
@@ -58,7 +62,10 @@
             className="mr-2"
           />
         {:else}
-          <TextChip value={$currentOrg.shortName} className="bg-primary-200 font-bold" />
+          <TextChip
+            value={shortenName($currentOrg.name)}
+            className="bg-primary-200 font-bold mr-2"
+          />
         {/if}
         <span class="line-clamp-1">
           {$currentOrg.name}

src/lib/components/Org/Settings/TeamMembers.svelte

@@ -14,7 +14,10 @@
   import { profile } from '$lib/utils/store/user';
   import { supabase } from '$lib/utils/functions/supabase';
   import SectionTitle from '../SectionTitle.svelte';
-  import { sendInvite } from './utils';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
 
   let emailsStr = '';
   let errorMessage = '';
@@ -68,11 +71,13 @@
         ]);
       }
 
-      // Send email invite
-      sendInvite(email, {
-        id: $currentOrg.id,
-        name: $currentOrg.name,
-        siteName: $currentOrg.siteName
+      triggerSendEmail(NOTIFICATION_NAME.INVITE_TEACHER, {
+        email: newMember.email,
+        org: {
+          id: $currentOrg.id,
+          name: $currentOrg.name,
+          siteName: $currentOrg.siteName
+        }
       });
 
       const isLast = index === emails.length - 1;

src/lib/components/Org/Settings/utils.ts

@@ -1,28 +0,0 @@
-import { supabase } from '$lib/utils/functions/supabase';
-
-export async function sendInvite(email: string, org: any) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/invite', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify({
-        email,
-        org
-      })
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}

src/lib/utils/services/notification/notification.ts

@@ -1,11 +1,24 @@
 import { supabase } from '$lib/utils/functions/supabase';
 
 export const NOTIFICATION_NAME = {
-  WELCOME_TO_APP: 'WELCOME TO APP'
+  WELCOME_TO_APP: 'WELCOME TO APP',
+  INVITE_TEACHER: 'INVITE TEACHER',
+  WELCOME_TEACHER_TO_COURSE: 'WELCOME TEACHER TO COURSE',
+  SEND_TEACHER_STUDENT_BUY_REQUEST: 'SEND TEACHER STUDENT BUY REQUEST',
+  STUDENT_PROOVE_COURSE_PAYMENT: 'STUDENT PROOVE COURSE PAYMENT',
+  STUDENT_COURSE_WELCOME: 'STUDENT COURSE WELCOME',
+  TEACHER_STUDENT_JOINED: 'TEACHER STUDENT JOINED'
 };
 
 const NAME_TO_PATH = {
-  [NOTIFICATION_NAME.WELCOME_TO_APP]: '/api/email/welcome'
+  [NOTIFICATION_NAME.WELCOME_TO_APP]: '/api/email/welcome',
+  [NOTIFICATION_NAME.INVITE_TEACHER]: '/api/email/invite',
+  [NOTIFICATION_NAME.WELCOME_TEACHER_TO_COURSE]: '/api/email/course/teacher_welcome',
+  [NOTIFICATION_NAME.SEND_TEACHER_STUDENT_BUY_REQUEST]:
+    '/api/email/course/teacher_student_buycourse',
+  [NOTIFICATION_NAME.STUDENT_PROOVE_COURSE_PAYMENT]: '/api/email/course/student_prove_payment',
+  [NOTIFICATION_NAME.STUDENT_COURSE_WELCOME]: '/api/email/course/student_welcome',
+  [NOTIFICATION_NAME.TEACHER_STUDENT_JOINED]: '/api/email/course/teacher_student_joined'
 };
 
 const getAccessToken = async () => {
@@ -14,7 +27,7 @@ const getAccessToken = async () => {
   return data.session?.access_token || '';
 };
 
-export const triggerSendEmail = async (name: string, body: { [k: string]: string }) => {
+export const triggerSendEmail = async (name: string, body: { [k: string]: any }) => {
   try {
     const accessToken = await getAccessToken();
     const path = NAME_TO_PATH[name];
@@ -37,8 +50,8 @@ export const triggerSendEmail = async (name: string, body: { [k: string]: string
     }
     const result = await response.json();
 
-    console.log(`${name} sent email result`, result);
+    console.log(name, result);
   } catch (error) {
-    console.log(`${name} sent email error`, error);
+    console.error(name, error);
   }
 };

src/lib/utils/services/notification/send.ts

@@ -1,6 +1,12 @@
 import nodemailer from 'nodemailer';
 import { withEmailTemplate } from './template';
-import { SMTP_HOST, SMTP_USER, SMTP_PASSWORD } from '$env/static/private';
+import {
+  SMTP_HOST,
+  SMTP_USER,
+  SMTP_PASSWORD,
+  SMTP_USER_HELP,
+  SMTP_PASSWORD_HELP
+} from '$env/static/private';
 
 const content = `
 <div>
@@ -13,18 +19,20 @@ Your ClassroomIO Team
 </div>
 `;
 
-const transporter = nodemailer.createTransport({
-  host: SMTP_HOST,
-  port: 465,
-  secure: true,
-  auth: {
-    user: SMTP_USER,
-    pass: SMTP_PASSWORD
-  }
-});
+let transporter: nodemailer.Transporter;
 
-const getTransporter = async (): Promise<boolean> => {
+const getTransporter = async (isPersonal?: boolean): Promise<boolean> => {
   return await new Promise((resolve, reject) => {
+    transporter = nodemailer.createTransport({
+      host: SMTP_HOST,
+      port: 465,
+      secure: true,
+      auth: {
+        user: isPersonal ? SMTP_USER : SMTP_USER_HELP,
+        pass: isPersonal ? SMTP_PASSWORD : SMTP_PASSWORD_HELP
+      }
+    });
+
     transporter.verify(function (error, success) {
       if (error) {
         console.log('Transporter error', error);
@@ -38,19 +46,26 @@ const getTransporter = async (): Promise<boolean> => {
 };
 
 export const sendEmail = async ({
+  from,
   to,
   subject,
-  content
+  content,
+  isPersonalEmail,
+  replyTo
 }: {
+  from?: string;
   to: string;
   subject: string;
   content: string;
+  isPersonalEmail?: boolean;
+  replyTo?: string;
 }) => {
-  await getTransporter();
+  await getTransporter(isPersonalEmail);
   const info = await transporter.sendMail({
-    from: '"Best from ClassroomIO" <[email protected]>', // sender address
+    from: from || '"Best from ClassroomIO" <[email protected]>', // sender address
     to, // list of receivers
     subject, // Subject line
+    replyTo,
     html: withEmailTemplate(content) // html body
   });
 

src/lib/utils/services/notification/template.ts

@@ -72,7 +72,7 @@ export const withEmailTemplate = (content: string) =>
 
       .button {
         margin-top:12px;
-        background: #0f172a;
+        background: #0233BD;
         border-radius: 8px;
         text-decoration: none !important;
         color: #fff !important;
@@ -110,10 +110,10 @@ export const withEmailTemplate = (content: string) =>
       }
 
       a {
-        color: #00c4b8;
+        color: #0233BD;
       }
       a:hover {
-        color: #00e6ca;
+        color: #0233BD;
       }
       h1,
       h2,

src/routes/api/email/course/student_prove_payment/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import JoinRequestTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 export async function POST({ request }) {
@@ -35,23 +32,19 @@ export async function POST({ request }) {
     return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
   }
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
+    from: `"${orgName} - ClassroomIO" <[email protected]>`,
     to,
     replyTo: teacherEmail,
     subject: `[${courseName}] One more step left`,
-    html: render({
-      template: JoinRequestTemplate,
-      props: {
-        courseName,
-        studentFullname,
-        teacherEmail,
-        orgName
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    content: `
+    <p>Hi ${studentFullname},</p>
+      <p>You are one step closer to joining: ${courseName}</p>
+      <p>Please send your proof of payment to: ${teacherEmail}, in order to join the course.</p>
+      <p>Talk to you soon and see you in class.</p>
+      <p>${orgName}</p>
+    `
+  });
 
   return json({
     success: true,

src/routes/api/email/course/student_prove_payment/prove_payment.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { Text } from 'svelte-email';
-
-  export let courseName = '';
-  export let studentFullname = '';
-  export let teacherEmail = '';
-  export let orgName = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-</script>
-
-<Text style={paragraph}>Hi {studentFullname},</Text>
-<Text style={paragraphContent}>
-  You are one step closer to joining: {courseName}
-</Text>
-<Text style={paragraphContent}>
-  Please send your proof of payment to: {teacherEmail}, in order to join the course.
-</Text>
-
-<Text style={footerParagraph}>Talk to you soon and see you in class.</Text>
-<Text style={footerParagraph}>{orgName}</Text>

src/routes/api/email/course/student_prove_payment/template.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import ProvePayment from './prove_payment.svelte';
-
-  export let courseName = '';
-  export let studentFullname = '';
-  export let orgName = '';
-  export let teacherEmail = '';
-</script>
-
-<EmailTemplate
-  children={ProvePayment}
-  props={{
-    courseName,
-    studentFullname,
-    orgName,
-    teacherEmail
-  }}
-/>

src/routes/api/email/course/student_welcome/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import WelcomeTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 // Sends email to student when they successfully join a course
@@ -29,20 +26,19 @@ export async function POST({ request }) {
     return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
   }
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
+    from: `"${orgName} - ClassroomIO" <[email protected]>`,
     to,
-    subject: `[${orgName}] Welcome to Class`,
-    html: render({
-      template: WelcomeTemplate,
-      props: {
-        orgName,
-        courseName
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    subject: `[${orgName}] Welcome to Class 🎉`,
+    content: `
+    <p>Hi there,</p>
+      <p>Congratulations 🎉, you’ve successfully joined: <strong>${courseName}</strong></p>
+      <p>Everything has been set up for you to have an amazing learning experience.</p>
+      <p>If you run into any issues, don’t fail to reach out to your instructor(s).</p>
+      <p>Cheers,</p>
+      <p>${orgName}</p>
+    `
+  });
 
   return json({
     success: true,

src/routes/api/email/course/student_welcome/template.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import Welcome from './welcome.svelte';
-
-  export let orgName = '';
-  export let courseName = '';
-</script>
-
-<EmailTemplate
-  children={Welcome}
-  props={{
-    orgName,
-    courseName
-  }}
-/>

src/routes/api/email/course/student_welcome/welcome.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">
-  import { Text } from 'svelte-email';
-
-  export let orgName = '';
-  export let courseName = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-</script>
-
-<Text style={paragraph}>Hey there,</Text>
-<Text style={paragraphContent}>
-  Congratulations, you’ve successfully joined “{courseName}"
-</Text>
-<Text style={paragraphContent}>
-  Everything has been set up for you to have an amazing learning experience.
-</Text>
-<Text style={paragraphContent}>
-  If you run into any issues, don’t fail to reach out to your instructor(s).
-</Text>
-<Text style={footerParagraph}>Cheers,</Text>
-<Text style={footerParagraph}>{orgName}</Text>

src/routes/api/email/course/teacher_student_buycourse/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import JoinRequestTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 export async function POST({ request }) {
@@ -34,21 +31,20 @@ export async function POST({ request }) {
     return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
   }
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
+    from: `ClassroomIO" <[email protected]>`,
     to,
     subject: `[${courseName}] Request to Join Course!`,
-    html: render({
-      template: JoinRequestTemplate,
-      props: {
-        courseName,
-        studentFullname,
-        studentEmail
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    content: `
+    <p>Hi amazing tutor,</p>
+      <p> A new student has requested to join a course you are teaching: “${courseName}"</p>
+      <p style="font: bold;">Student details</p>
+      <p>
+        Name: ${studentFullname}<br />
+       Email: ${studentEmail}
+      </p>
+    `
+  });
 
   return json({
     success: true,

src/routes/api/email/course/teacher_student_buycourse/join_request.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { Text, Link } from 'svelte-email';
-
-  export let courseName = '';
-  export let studentFullname = '';
-  export let studentEmail = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-
-  const linkStyle = {
-    color: '#1d4ee2'
-  };
-</script>
-
-<Text style={paragraph}>Hi amazing tutor,</Text>
-<Text style={paragraphContent}>
-  A new student has requested to join a course you are teaching: “{courseName}"
-</Text>
-<Text style={paragraphContent}>Student details</Text>
-<Text style={paragraphContent}>
-  Name: {studentFullname}<br />
-  Email: {studentEmail}
-</Text>
-
-<Text style={footerParagraph}>Cheers</Text>
-<Text style={footerParagraph}>
-  <Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link>
-</Text>

src/routes/api/email/course/teacher_student_buycourse/template.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import JoinRequest from './join_request.svelte';
-
-  export let courseName = '';
-  export let studentFullname = '';
-  export let studentEmail = '';
-</script>
-
-<EmailTemplate
-  children={JoinRequest}
-  props={{
-    courseName,
-    studentFullname,
-    studentEmail
-  }}
-/>

src/routes/api/email/course/teacher_student_joined/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import WelcomeTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 export async function POST({ request }) {
@@ -28,19 +25,18 @@ export async function POST({ request }) {
     return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
   }
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
+    from: `"ClassroomIO" <[email protected]>`,
     to,
-    subject: `[${courseName}] You've got a new student!`,
-    html: render({
-      template: WelcomeTemplate,
-      props: {
-        courseName
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    subject: `[${courseName}] You've got a new student 🎉!`,
+    content: `
+      <p>Hi amazing tutor,</p>
+      <p>Congratulations 🎉, a new student has joined a course you are teaching: ${courseName}</p>
+      <p>We hope they have a great experience learning from the best (YOU).</p>
+      <p>If you run into any issues, please don’t fail to reach out to us, we’d love to make your teaching
+      experience as easy as possible.</p>
+    `
+  });
 
   return json({
     success: true,

src/routes/api/email/course/teacher_student_joined/template.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import Welcome from './welcome.svelte';
-
-  export let courseName = '';
-</script>
-
-<EmailTemplate
-  children={Welcome}
-  props={{
-    courseName
-  }}
-/>

src/routes/api/email/course/teacher_student_joined/welcome.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import { Text, Link } from 'svelte-email';
-
-  export let courseName = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-
-  const linkStyle = {
-    color: '#1d4ee2'
-  };
-</script>
-
-<Text style={paragraph}>Hi amazing tutor,</Text>
-<Text style={paragraphContent}>
-  Congratulations, a new student has joined a course you are teaching: “{courseName}"
-</Text>
-<Text style={paragraphContent}>
-  We hope they have a great experience learning from the best (YOU).
-</Text>
-<Text style={paragraphContent}>
-  If you run into any issues, please don’t fail to reach out to us, we’d love to make your teaching
-  experience as easy as possible.
-</Text>
-
-<Text style={footerParagraph}>Cheers</Text>
-<Text style={footerParagraph}>
-  <Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link>
-</Text>

src/routes/api/email/course/teacher_welcome/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import WelcomeTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 export async function POST({ request }) {
@@ -31,22 +28,19 @@ export async function POST({ request }) {
   const origin = request.headers.get('origin');
   const inviteLink = `${origin}/org/${orgSiteName}/courses`;
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
+    from: `"[${orgName}] - ClassroomIO" <[email protected]>`,
     to,
     subject: `You have been invited to a course in ${orgName}!`,
-    html: render({
-      template: WelcomeTemplate,
-      props: {
-        name,
-        orgName,
-        inviteLink,
-        courseName
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    content: `
+    <p>Hey ${name},</p>
+      <p> You have been given access to teach a course by ${orgName}</p>
+      <p>The course is titled: ${courseName}</p>
+      <div>
+        <a class="button" href="${inviteLink}">Open Dashboard</a>
+      </div>
+    `
+  });
 
   return json({
     success: true,

src/routes/api/email/course/teacher_welcome/template.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import Welcome from './welcome.svelte';
-
-  export let name = '';
-  export let orgName = '';
-  export let inviteLink = '';
-  export let courseName = '';
-</script>
-
-<EmailTemplate
-  children={Welcome}
-  props={{
-    name,
-    orgName,
-    inviteLink,
-    courseName
-  }}
-/>

src/routes/api/email/course/teacher_welcome/welcome.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-  import { Text, Section, Button, Link } from 'svelte-email';
-
-  export let name = '';
-  export let orgName = '';
-  export let inviteLink = '';
-  export let courseName = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-
-  const btnContainer = {
-    textAlign: 'center' as const
-  };
-
-  const button = {
-    fontFamily,
-    backgroundColor: '#1d4ee2',
-    borderRadius: '5px',
-    color: '#fff',
-    fontSize: '16px',
-    textDecoration: 'none',
-    textAlign: 'center' as const,
-    display: 'block'
-  };
-</script>
-
-<Text style={paragraph}>Hey {name},</Text>
-<Text style={paragraphContent}>
-  You have been given access to teach a course by {orgName}
-</Text>
-<Text style={paragraphContent}>
-  The course is titled: {courseName}
-</Text>
-
-<Section style={btnContainer}>
-  <Button pX={12} pY={12} style={button} href={inviteLink}>Open Dashboard</Button>
-</Section>

src/routes/api/email/invite/+server.js

@@ -1,10 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import TeacherInviteTemplate from './template.svelte';
-import { getSendgrid, SENDGRID_FROM_NOREPLY } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
+import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 // API to send invite to teacher
@@ -45,20 +42,18 @@ export async function POST({ request }) {
   const inviteLink = `${origin}/invite/t/${encodeURIComponent(btoa(inviteData))}`;
   console.log('inviteData', inviteData);
 
-  const options = {
-    from: SENDGRID_FROM_NOREPLY,
+  await sendEmail({
     to: email,
-    subject: `Join ${name} on ClassroomIO`,
-    html: render({
-      template: TeacherInviteTemplate,
-      props: {
-        orgName: name,
-        inviteLink
-      }
-    })
-  };
-
-  sendgrid.send(options);
+    subject: `Join ${name} on ClassroomIO 😃`,
+    content: `
+    <p>Hey there,</p>
+      <p> You have been invited to join ${name} on ClassroomIO 🎉🎉🎉.</p>
+      <div>
+        <a class="button" href="${inviteLink}">Accept Invitation</a>
+      </div>
+    `,
+    isPersonalEmail: true
+  });
 
   return json({
     success: true,

src/routes/api/email/invite/invitation.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { Text, Section, Button, Link } from 'svelte-email';
-
-  export let orgName = '';
-  export let inviteLink = '';
-
-  const fontFamily =
-    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
-
-  const paragraph = {
-    fontFamily,
-    fontSize: '16px',
-    lineHeight: '26px'
-  };
-  const paragraphContent = {
-    ...paragraph,
-    margin: '20px 0'
-  };
-
-  const footerParagraph = {
-    ...paragraph,
-    margin: '0px'
-  };
-
-  const btnContainer = {
-    textAlign: 'center' as const
-  };
-
-  const button = {
-    fontFamily,
-    backgroundColor: '#1d4ee2',
-    borderRadius: '5px',
-    color: '#fff',
-    fontSize: '16px',
-    textDecoration: 'none',
-    textAlign: 'center' as const,
-    display: 'block'
-  };
-
-  const linkStyle = {
-    color: '#1d4ee2'
-  };
-</script>
-
-<Text style={paragraph}>Hey there,</Text>
-<Text style={paragraphContent}>
-  You have been invited to join {orgName} on ClassroomIO.
-</Text>
-
-<Section style={btnContainer}>
-  <Button pX={12} pY={12} style={button} href={inviteLink}>Accept Invitation</Button>
-</Section>
-<Text style={footerParagraph}>Best regards</Text>
-<Text style={footerParagraph}>Rotimi Best</Text>
-<Text style={footerParagraph}
-  ><Link style={linkStyle} href="https://classroomio.com">ClassroomIO</Link></Text
->

src/routes/api/email/invite/template.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
-  import Invitation from './invitation.svelte';
-
-  export let orgName = '';
-  export let inviteLink = '';
-</script>
-
-<EmailTemplate
-  children={Invitation}
-  props={{
-    orgName,
-    inviteLink
-  }}
-/>

src/routes/api/email/welcome/+server.js

@@ -1,11 +1,7 @@
-import { render } from 'svelte-email';
 import { json } from '@sveltejs/kit';
-import { getSendgrid, SENDGRID_FROM } from '$lib/utils/services/sendgrid';
 import { getSupabase } from '$lib/utils/functions/supabase';
-
 import { sendEmail } from '$lib/utils/services/notification/send';
 
-const sendgrid = getSendgrid();
 const supabase = getSupabase();
 
 export async function POST({ request }) {
@@ -50,7 +46,8 @@ export async function POST({ request }) {
       <div>
         <a href="https://app.classroomio.com">Go to Dashboard</a>
       </div>
-    `
+    `,
+    isPersonalEmail: true
   });
 
   return json({

src/routes/invite/s/[hash]/+page.svelte

@@ -10,7 +10,11 @@
   import type { CurrentOrg } from '$lib/utils/types/org.js';
   import { ROLE } from '$lib/utils/constants/roles';
   import { profile } from '$lib/utils/store/user.js';
-  import { sendStudentCourseWelcome, sendTeacherStudentJoinedCourse } from './utils';
+  import {
+    triggerSendEmail,
+    NOTIFICATION_NAME
+  } from '$lib/utils/services/notification/notification';
+  import { snackbar } from '$lib/components/Snackbar/store.js';
 
   export let data;
 
@@ -57,19 +61,20 @@
       loading = false;
       if (addedMember.error) {
         console.error('Error adding student to group', data.groupId);
+        snackbar.error('Joining failed, please contact your admin');
         return;
       }
 
       // Send email welcoming student to the course
-      sendStudentCourseWelcome({
+      triggerSendEmail(NOTIFICATION_NAME.STUDENT_COURSE_WELCOME, {
         to: $profile.email,
         orgName: data.currentOrg?.name,
         courseName: data.name
       });
 
       // Send notification to teacher(s) that a student has joined the course.
-      sendTeacherStudentJoinedCourse({
-        to: teachers,
+      triggerSendEmail(NOTIFICATION_NAME.TEACHER_STUDENT_JOINED, {
+        to: teachers[0],
         courseName: data.name
       });
 

src/routes/invite/s/[hash]/utils.ts

@@ -1,56 +0,0 @@
-import { supabase } from '$lib/utils/functions/supabase';
-
-export async function sendStudentCourseWelcome(params: {
-  to: string;
-  orgName: string;
-  courseName: string;
-}) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/course/student_welcome', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify(params)
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}
-
-export async function sendTeacherStudentJoinedCourse(params: {
-  to: Array<string>;
-  courseName: string;
-}) {
-  const { data } = await supabase.auth.getSession();
-  const accessToken = data.session?.access_token || '';
-
-  try {
-    const response = await fetch('/api/email/course/teacher_student_joined', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Authorization: accessToken
-      },
-      body: JSON.stringify(params)
-    });
-    if (!response.ok) {
-      throw new Error(await response.text());
-    }
-    const result = await response.json();
-
-    console.log('Sent invite email', result);
-  } catch (error) {
-    console.error('Error sending invite email', error);
-  }
-}

src/routes/lms/+page.svelte

@@ -47,7 +47,7 @@
 
 <section class="max-w-6xl gap-5 mx-auto">
   <div class="m-5">
-    <h1 class="text-3xl font-semibold">Dashboard</h1>
+    <h1 class="text-3xl font-semibold">Welcome</h1>
     <div
       class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
     >