CLASSROOMIO-T-133: Send welcome email after onboarding
Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com> Merge-request: CLASSROOMIO-MR-55 Merged-by: Best Admin <best@digdippa.com>
This commit is contained in:
Rotimi Best
committed by
Space Cloud
Space Cloud
co-authored by
Rotimi Best
Rotimi Best
parent
b979da3db1
commit
7a5d341865
@@ -1,47 +1,47 @@
|
||||
<script>
|
||||
import Avatar from '$lib/components/Avatar/index.svelte';
|
||||
<script lang="ts">
|
||||
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>
|
||||
<div class="w-full min-h-screen flex items-center justify-center">
|
||||
<div class="container border border-gray bg-white">
|
||||
<div class="flex items-center flex-col p-2 lg:px-8 lg:py-3">
|
||||
<div class="flex items-center justify-center w-full pt-2">
|
||||
<Avatar
|
||||
src={'/logo-192.png'}
|
||||
name={'ClassroomIO'}
|
||||
shape="rounded-md"
|
||||
width="w-10"
|
||||
height="h-10"
|
||||
className="mr-2"
|
||||
/>
|
||||
<h4 class="text-xl">ClassroomIO</h4>
|
||||
</div>
|
||||
<div class="flex items-center flex-col w-10/12">
|
||||
<h3>Welcome to ClassroomIO.</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="w-full p-6 border-t border-grey text-center">
|
||||
Already have an account? <a class="hover:underline text-primary-700" href="/login">Log In</a
|
||||
>
|
||||
</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>
|
||||
<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="ClassroomIO logo"
|
||||
style={logo}
|
||||
width="50"
|
||||
height="50"
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
color: '#1d4ee2',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '20px'
|
||||
}}>ClassroomIO</Text
|
||||
>
|
||||
<svelte:component this={children} {...props} />
|
||||
</Container>
|
||||
</Section>
|
||||
</Html>
|
||||
|
||||
@@ -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>
|
||||
@@ -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 <best@classroomio.com>';
|
||||
|
||||
export let sendgrid: MailService;
|
||||
|
||||
export const getSendgrid = (): MailService => {
|
||||
if (sendgrid) return sendgrid;
|
||||
|
||||
SendGridService.setApiKey(SENDGRID_API_KEY);
|
||||
|
||||
sendgrid = SendGridService;
|
||||
|
||||
return sendgrid;
|
||||
};
|
||||
Reference in New Issue
Block a user