From 2a6275ea0f20eca6af04dc1f31c43723f0851a86 Mon Sep 17 00:00:00 2001 From: Rotimi Best Date: Sun, 14 Jun 2026 18:21:26 +0100 Subject: [PATCH] refactor(email): unify email template shell between production and Storybook --- packages/email/src/templates/default.ts | 128 +++++------------- packages/storybook/package.json | 1 + .../storybook/src/templates/email/fixtures.ts | 68 ++++++++++ pnpm-lock.yaml | 3 + 4 files changed, 107 insertions(+), 93 deletions(-) create mode 100644 packages/storybook/src/templates/email/fixtures.ts diff --git a/packages/email/src/templates/default.ts b/packages/email/src/templates/default.ts index b200d31b..0c00e70a 100644 --- a/packages/email/src/templates/default.ts +++ b/packages/email/src/templates/default.ts @@ -9,7 +9,7 @@ export const getDefaultTemplate = (content: string): string => -
- - ClassroomIO Logo -
-
- ${content} -
- -
-

Find us on

- - - - - - - -

- ClassroomIO ${new Date().getFullYear()}. All rights reserved.
- Terms - | - Privacy - Policy -

+
+
+ + ClassroomIO + +
+
+ ${content} +
+
+ ClassroomIO ${new Date().getFullYear()}. All rights reserved. +
+ Website +  ·  + Terms +  ·  + Privacy +
diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 0e5f1004..43fccae4 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -14,6 +14,7 @@ }, "dependencies": { "@cio/certificates": "workspace:*", + "@cio/email": "workspace:*", "@cio/ui": "workspace:*", "@cio/utils": "workspace:*", "svelte-inview": "^4.0.4", diff --git a/packages/storybook/src/templates/email/fixtures.ts b/packages/storybook/src/templates/email/fixtures.ts new file mode 100644 index 00000000..83d433c8 --- /dev/null +++ b/packages/storybook/src/templates/email/fixtures.ts @@ -0,0 +1,68 @@ +import { getDefaultTemplate } from '@cio/email'; + +// ─── Sample content for each use case ──────────────────────────────────────── + +const VERIFY_EMAIL_CONTENT = ` +

Hey there 👋

+

Welcome to ClassroomIO! In order to get your account ready for usage, we need to verify your email.

+

We do this to make sure we don't get fake user emails in our signup. To get the best out of our product, we'll need you to verify your email by clicking the Verify button below.

+
Verify
+`; + +const WELCOME_CONTENT = ` +

Dear Alex,

+

My name is Best, the founder of ClassroomIO. I saw you signed up, any questions so far?

+

Would you like to get a walkthrough of the platform in a 30 minute product demo? It's free and we won't try to sell you anything, just want to learn from your use case and show you all the cool features and flows we thought about.

+

Interested? just book a 30-minute demo slot in our calendar!

+
Book demo
+

PS: I reply personally to every email. We don't have an outsourced support team at the other end of the globe.. ;-)

+`; + +const FORGOT_PASSWORD_CONTENT = ` +

Hello Jane,

+

You are receiving this email because you have requested a password reset for your ClassroomIO account.

+

Please click the button below to reset your password:

+
Reset my password
+

PS: If you did not initiate this request, reply to this email or write to help@classroomio.com so we can look into a possible attempt to breach your account.

+`; + +const COURSE_WELCOME_CONTENT = ` +

Hi there,

+

You now have access to Introduction to Web Development in Acme Coding School.

+

Sign in to ClassroomIO to open the course and get started.

+

If you run into any issues, reach out to your instructor(s).

+

Cheers,

+

Acme Coding School

+`; + +const INVITE_TEACHER_CONTENT = ` +

Hey there,

+

You have been invited to join Acme Coding School on ClassroomIO as Admin 🎉🎉🎉.

+

This invite expires on Jul 15, 2026 (UTC).

+
Accept Invitation
+`; + +const NEWSFEED_POST_CONTENT = ` +

Sarah Johnson made a post in a course you are taking: Advanced JavaScript.

+
+ Don't forget — the final project is due next Friday! Make sure to submit your repository link before the deadline. Let me know if you have any questions. +
+
View post
+`; + +const STUDENT_JOINED_CONTENT = ` +

Hi amazing tutor,

+

Congratulations 🎉, a new student: Alex Rivera (alex@example.com) has joined a course you are teaching: Advanced JavaScript.

+

We hope they have a great experience learning from the best (YOU).

+

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.

+`; + +// ─── Exported email HTML strings ────────────────────────────────────────── + +export const verifyEmailHtml = getDefaultTemplate(VERIFY_EMAIL_CONTENT); +export const forgotPasswordHtml = getDefaultTemplate(FORGOT_PASSWORD_CONTENT); +export const welcomeHtml = getDefaultTemplate(WELCOME_CONTENT); +export const courseWelcomeHtml = getDefaultTemplate(COURSE_WELCOME_CONTENT); +export const inviteTeacherHtml = getDefaultTemplate(INVITE_TEACHER_CONTENT); +export const newsfeedPostHtml = getDefaultTemplate(NEWSFEED_POST_CONTENT); +export const studentJoinedHtml = getDefaultTemplate(STUDENT_JOINED_CONTENT); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3be54ffa..ed794d88 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1332,6 +1332,9 @@ importers: '@cio/certificates': specifier: workspace:* version: link:../certificates + '@cio/email': + specifier: workspace:* + version: link:../email '@cio/ui': specifier: workspace:* version: link:../ui