Email Templates

The platform sends automated emails through an AWS Lambda endpoint. Email content is constructed in helper files using HTML templates. This guide explains how to modify existing templates and add new email types.

Email Infrastructure

All email dispatch goes through a single helper function:

File: src/helpers/send_email.ts

interface EmailPayload {
  to: string | string[];
  subject: string;
  html: string;
}

The function sends a POST request to the AWS Lambda endpoint (EMAIL_LAMBDA_URL environment variable) with the email payload.

MOC Email Templates

MOC-related email templates are constructed inline in src/helpers/send_email.ts. Each template includes:

• A header with the MOC serial number
• The event description (submitted, approved, declined, etc.)
• A direct link to the MOC in the platform
• The sender/actor name

Modifying a MOC Email Template

To change the content of a MOC notification email:

1. Open src/helpers/send_email.ts
2. Find the email-sending function for the event you want to modify
3. Edit the HTML template string

Example structure of a MOC email:

<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
  <h2 style="color: #1a365d;">MOC Notification</h2>
  <p>MOC <strong>${serialNum}</strong> has been ${action}.</p>
  <p>${message}</p>
  <a href="${appUrl}/dashboard/Moc/list/${mocId}"
     style="background-color: #2563eb; color: white; padding: 10px 20px;
            text-decoration: none; border-radius: 4px;">
    View MOC
  </a>
</div>

PCR Email Templates

PCR-specific email templates are in a dedicated helper file:

File: src/helpers/pcr_email_helpers.ts

This file contains template functions for:

• PCR creation notification (sent to affected parties)
• PCR signature request
• PCR completion notification

Modifying a PCR Email Template

1. Open src/helpers/pcr_email_helpers.ts
2. Locate the template function for the email type
3. Modify the HTML string

Adding a New Email Type

To add a completely new email notification:

Step 1: Create the Template

Add a new function in src/helpers/send_email.ts or src/helpers/pcr_email_helpers.ts:

export function buildNewEventEmail(data: {
  recipientName: string;
  serialNum: string;
  mocId: string;
  message: string;
}): EmailPayload {
  const appUrl = process.env.NEXT_PUBLIC_APP_URL;

  return {
    to: data.recipientEmail,
    subject: `MOC ${data.serialNum} - New Event`,
    html: `
      <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
        <h2>New Event Notification</h2>
        <p>Dear ${data.recipientName},</p>
        <p>${data.message}</p>
        <a href="${appUrl}/dashboard/Moc/list/${data.mocId}">View MOC</a>
      </div>
    `,
  };
}

Step 2: Call the Template

In the API route or action that triggers the email, import and call the template function:

import { buildNewEventEmail } from "@/helpers/send_email";

// Inside your API handler:
const emailPayload = buildNewEventEmail({
  recipientName: user.name,
  serialNum: moc.serial_num,
  mocId: moc._id,
  message: "Your custom message here",
});

await sendEmail(emailPayload);

Email Styling Guidelines

All email templates use inline CSS (required for email client compatibility). Common styles used:

Element	Style
Container	max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif;
Heading	color: #1a365d; font-size: 20px;
Button	background-color: #2563eb; color: white; padding: 10px 20px; border-radius: 4px;
Footer	color: #6b7280; font-size: 12px; margin-top: 20px;

caution

Email clients do not support external CSS stylesheets, CSS classes, or many modern CSS properties. Always use inline styles and simple HTML tables for layout.

Testing Emails

To test email templates during development:

1. Set EMAIL_LAMBDA_URL to your Lambda endpoint
2. Trigger the action that sends the email (e.g., submit a MOC form step)
3. Check the recipient's inbox
4. For HTML preview without sending, you can temporarily log the HTML output to the console in the send function

Related Files

Purpose	Path
Email dispatch helper	src/helpers/send_email.ts
PCR email templates	src/helpers/pcr_email_helpers.ts
Notification helper	src/helpers/sendNotification.tsx
Markdown for notifications	src/helpers/mardown_notifications.tsx