CLASSROOMIO-T-133: Send welcome email after onboarding

Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-55
Merged-by: Best Admin <[email protected]>

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.386.0",
+    "@sendgrid/mail": "^7.7.0",
     "@sentry/browser": "^7.61.0",
     "@sentry/integrations": "^7.61.0",
     "@sentry/tracing": "^7.61.0",
@@ -42,6 +43,7 @@
     "pluralize": "^8.0.0",
     "quill": "^1.3.7",
     "sirv": "^2.0.3",
+    "svelte-email": "^0.0.4",
     "wait-on": "^7.0.1",
     "zod": "^3.21.4"
   },

src/lib/components/Email/EmailTemplate.svelte

@@ -1,47 +1,47 @@
-<script>
+<script lang="ts">
-  import Avatar from '$lib/components/Avatar/index.svelte';
+  import { Container, Head, Html, Img, Preview, Section, Text } from 'svelte-email';
+
+  export let children: ConstructorOfATypedSvelteComponent;
+  export let props = {};
+
+  const main = {
+    background: '#fff'
+  };
+
+  const container = {
+    margin: '20px auto 100px',
+    padding: '0 40px',
+    backgroundColor: '#fff',
+    width: '80%',
+    maxWidth: '600px'
+  };
+
+  const logo = {
+    margin: '0 auto'
+  };
 </script>
 
-<main>
+<Html lang="en">
-  <div class="w-full min-h-screen flex items-center justify-center">
+  <Head />
-    <div class="container border border-gray bg-white">
+  <Preview preview="Welcome to ClassroomIO" />
-      <div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
+  <Section style={main}>
-        <div class="flex items-center justify-center w-full pt-2">
+    <Container style={container}>
-          <Avatar
+      <Img
-            src={'/logo-192.png'}
+        src="https://app.classroomio.com/logo-512.png"
-            name={'ClassroomIO'}
+        alt="ClassroomIO logo"
-            shape="rounded-md"
+        style={logo}
-            width="w-10"
+        width="50"
-            height="h-10"
+        height="50"
-            className="mr-2"
+      />
-          />
+      <Text
-          <h4 class="text-xl">ClassroomIO</h4>
+        style={{
-        </div>
+          textAlign: 'center',
-        <div class="flex items-center flex-col w-10/12">
+          color: '#1d4ee2',
-          <h3>Welcome to ClassroomIO.</h3>
+          fontWeight: 'bold',
-        </div>
+          fontSize: '20px'
-      </div>
+        }}>ClassroomIO</Text
-
+      >
-      <!-- Footer -->
+      <svelte:component this={children} {...props} />
-      <div class="w-full p-6 border-t border-grey text-center">
+    </Container>
-        Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
+  </Section>
-        >
+</Html>
-      </div>
-    </div>
-  </div>
-</main>
-
-<style>
-  .container {
-    width: 450px;
-  }
-  main {
-    background: linear-gradient(
-      138deg,
-      rgb(32, 201, 255) 36.7%,
-      rgb(0, 8, 187) 84.4%,
-      rgb(255, 255, 255) 119.7%
-    );
-    box-sizing: border-box;
-  }
-</style>

src/lib/emails/Welcome.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { Container, Head, Hr, Html, Img, Preview, Section, Text } from 'svelte-email';
+
+  export let firstName = 'Seun';
+
+  const fontFamily =
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+
+  const main = {
+    background: `radial-gradient(
+      circle at 10% 20%,
+      rgb(239, 246, 249) 0%,
+      rgb(206, 239, 253) 90%
+    )`
+  };
+
+  const container = {
+    margin: '100px auto',
+    padding: '40px',
+    backgroundColor: '#fff',
+    border: '1px solid #cccccc',
+    borderRadius: '10px'
+  };
+
+  const logo = {
+    margin: '0 auto'
+  };
+
+  const paragraph = {
+    fontFamily,
+    fontSize: '16px',
+    lineHeight: '26px'
+  };
+
+  const footerParagraph = {
+    ...paragraph,
+    margin: '0px'
+  };
+
+  const footer = {
+    fontFamily,
+    color: '#8898aa',
+    fontSize: '12px'
+  };
+</script>
+
+<Html lang="en">
+  <Head />
+  <Preview preview="Welcome to ClassroomIO" />
+  <Section style={main}>
+    <Container style={container}>
+      <Img
+        src="https://app.classroomio.com/logo-512.png"
+        alt="Svelte logo"
+        style={logo}
+        width="50"
+        height="50"
+      />
+      <Text
+        style={{
+          textAlign: 'center',
+          color: '#1d4ee2',
+          fontWeight: 'bold',
+          fontSize: '20px'
+        }}>ClassroomIO</Text
+      >
+      <Text style={paragraph}>Dear {firstName},</Text>
+      <Text style={paragraph}>Welcome to the vibrant community of ClassroomIO!</Text>
+      <Text style={paragraph}>
+        We're thrilled to have you join us in shaping the future of education. Your decision to
+        embark on this journey with us is deeply appreciated, and we're genuinely excited about the
+        possibilities that lie ahead.
+      </Text>
+      <Text style={paragraph}>
+        At ClassroomIO, we understand the dedication and passion that educators like you bring to
+        the table. That's why we've built a platform that's not only designed to make your teaching
+        experience seamless but also to empower you to create transformative learning moments for
+        your students.
+      </Text>
+      <Text style={paragraph}>
+        Your choice to use ClassroomIO is a testament to your commitment to innovation in education.
+        It's educators like you who drive progress and inspire change, and we're here to support you
+        every step of the way.
+      </Text>
+      <Text style={paragraph}>
+        Our team is working diligently behind the scenes, shipping new features and updates daily.
+        This means you can expect a platform that's constantly evolving, adapting to your needs, and
+        staying at the forefront of educational technology.
+      </Text>
+      <Text style={paragraph}>
+        We encourage you to explore ClassroomIO's range of features, from interactive quizzes and
+        robust course management tools to collaborative forums and AI-integrated lesson planning.
+        Your feedback is invaluable to us as we work together to refine and enhance these features
+        to best suit your teaching style and objectives.
+      </Text>
+      <Text style={paragraph}>
+        Once again, welcome to the ClassroomIO family. We're here to help, to listen, and to
+        celebrate your successes. Get ready to unlock a world of possibilities in education!
+      </Text>
+      <Text style={footerParagraph}>Best regards</Text>
+      <Text style={footerParagraph}>Rotimi Best</Text>
+      <Text style={footerParagraph}>ClassroomIO</Text>
+    </Container>
+  </Section>
+</Html>

src/lib/utils/services/sendgrid.ts

@@ -0,0 +1,17 @@
+import * as SendGridService from '@sendgrid/mail';
+import type { MailService } from '@sendgrid/mail';
+import { SENDGRID_API_KEY } from '$env/static/private';
+
+export const SENDGRID_FROM = 'Rotimi Best <[email protected]>';
+
+export let sendgrid: MailService;
+
+export const getSendgrid = (): MailService => {
+  if (sendgrid) return sendgrid;
+
+  SendGridService.setApiKey(SENDGRID_API_KEY);
+
+  sendgrid = SendGridService;
+
+  return sendgrid;
+};

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

@@ -0,0 +1,7 @@
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+  // Get org data from request
+  // Get teacher email
+  // Generate
+}

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

@@ -0,0 +1,50 @@
+import { render } from 'svelte-email';
+import { json } from '@sveltejs/kit';
+import WelcomeTemplate from './template.svelte';
+import { getSendgrid, SENDGRID_FROM } from '$lib/utils/services/sendgrid';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+const sendgrid = getSendgrid();
+const supabase = getSupabase();
+
+export async function POST({ request }) {
+  const { to, name } = await request.json();
+  const accessToken = request.headers.get('Authorization');
+  console.log('/POST api/email/welcome', to, name);
+
+  if (!to || !name) {
+    return json({ success: false, message: 'Name and To are required fields' }, { status: 400 });
+  }
+
+  let user;
+  try {
+    const { data } = await supabase.auth.getUser(accessToken);
+    user = data.user;
+  } catch (error) {
+    console.error(error);
+  }
+
+  console.log('user', user);
+  if (!user) {
+    return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
+  }
+
+  const options = {
+    from: SENDGRID_FROM,
+    to,
+    subject: 'Thank you so so so much for choosing ClassroomIO!',
+    html: render({
+      template: WelcomeTemplate,
+      props: {
+        name
+      }
+    })
+  };
+
+  sendgrid.send(options);
+
+  return json({
+    success: true,
+    message: 'Email sent'
+  });
+}

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

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

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

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import { Text, Section, Button, Link } from 'svelte-email';
+
+  export let name = '';
+
+  const fontFamily =
+    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
+
+  const paragraph = {
+    fontFamily,
+    fontSize: '16px',
+    lineHeight: '26px'
+  };
+
+  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}>Dear {name},</Text>
+<Text style={paragraph}>Welcome to the vibrant community of ClassroomIO!</Text>
+<Text style={paragraph}>
+  We're thrilled to have you join us in shaping the future of education. Your decision to embark on
+  this journey with us is deeply appreciated, and we're genuinely excited about the possibilities
+  that lie ahead.
+</Text>
+<Text style={paragraph}>
+  At ClassroomIO, we understand the dedication and passion that educators like you bring to the
+  table. That's why we've built a platform that's not only designed to make your teaching experience
+  seamless but also to empower you to create transformative learning moments for your students.
+</Text>
+<Text style={paragraph}>
+  Your choice to use ClassroomIO is a testament to your commitment to innovation in education. It's
+  educators like you who drive progress and inspire change, and we're here to support you every step
+  of the way.
+</Text>
+<Text style={paragraph}>
+  Our team is working diligently behind the scenes, shipping new features and updates daily. This
+  means you can expect a platform that's constantly evolving, adapting to your needs, and staying at
+  the forefront of educational technology.
+</Text>
+<Text style={paragraph}>
+  We encourage you to explore ClassroomIO's range of features, from interactive quizzes and robust
+  course management tools to collaborative forums and AI-integrated lesson planning. Your feedback
+  is invaluable to us as we work together to refine and enhance these features to best suit your
+  teaching style and objectives.
+</Text>
+<Text style={paragraph}>
+  Once again, welcome to the ClassroomIO family. We're here to help, to listen, and to celebrate
+  your successes. Get ready to unlock a world of possibilities in education!
+</Text>
+<Section style={btnContainer}>
+  <Button pX={12} pY={12} style={button} href="https://app.classroomio.com">Go to Dashboard</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/onboarding/+page.svelte

@@ -10,6 +10,7 @@
   import { blockedSubdomain } from '$lib/utils/constants/app';
   import { welcomeModalStore } from '$lib/components/WelcomeModal/store';
   import { getOrganizations } from '$lib/utils/services/org';
+  import { sendWelcomeEmail } from './utils';
 
   interface OnboardingField {
     fullname?: string;
@@ -80,6 +81,7 @@
     const payload = await response.json();
     fields.metadata = payload;
   }
+
   function setOrgSiteName(orgName: string | undefined, isTouched: boolean) {
     if (!orgName || isTouched) return;
     let inputElement = event?.target as HTMLInputElement;
@@ -177,6 +179,10 @@
         .match({ id: $profile.id });
       loading = false;
 
+      if (fields.fullname) {
+        sendWelcomeEmail($profile.email, fields.fullname);
+      }
+
       console.log('data', data);
       console.log('error', error);
       $welcomeModalStore.open = true;

src/routes/onboarding/utils.ts

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