History

Omar López 15d5333cf6 Refactor emails to use JSX as templating engine (#2915 ) * Init Maizzle * Initial template JSX conversion and testing * WIP * WIP * WIP * WIP * WIP * Migrated AttendeeRescheduledEmail * WIP * WIP * DRY * Cleanup * Cleanup * Cleanup * Migrate feedback email * Migrates ForgotPasswordEmail * Migrates OrganizerCancelledEmail * Migrated OrganizerLocationChangeEmail * Formatting * Migrated AttendeeRequestRescheduledEmail * Migrates OrganizerPaymentRefundFailedEmail * Migrates OrganizerRequestEmail * Migrates OrganizerRequestReminderEmail * Fixes type-check * Moved email-manager to package * Import fixes * Removed duplicate email code from vital app * Removed duplicate email code from wipemycal * Build/type fixes * Fixes web email imports * Fixes build * Embed build fixes * Update AttendeeAwaitingPaymentEmail.tsx * Update default-cookies.ts * Revert "Embed build fixes" This reverts commit `8d693e99ac`. * Embed build fixes # Conflicts: # packages/embeds/embed-core/package.json * dep and email date fixes * Update attendee-scheduled-email.ts * Update package.json * Update [...nextauth].tsx * Update email.ts * Prevents /api/email on production builds Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>		2022-06-06 17:49:56 +00:00
..
src	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
templates	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
email-manager.ts	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
index.ts	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
package.json	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
README.md	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00
tailwind.config.js	Refactor emails to use JSX as templating engine (#2915 )	2022-06-06 17:49:56 +00:00

README.md

JSX email templates

components Holds reusable patterns
templates A template equals a type of email sent

Usage

import { renderEmail } from "@calcom/emails";

renderEmail("TeamInviteEmail", */{
  language: t,
  from: "teampro@example.com",
  to: "pro@example.com",
  teamName: "Team Pro",
  joinLink: "https://cal.com",
});

The first argument is the template name as defined inside templates/index.ts. The second argument are the template props.

Development

You can use an API endpoint to preview the email HTML, there's already one on /apps/web/pages/api/email.ts feel free to change the template to the one you're currently working on.