feat(email): rich PO details, action buttons, Purchase Order in subject
Subject line now reads 'Purchase Order XXXX' instead of 'PO XXXX'. Each email includes a recipient-specific deep-link action button, a PO summary card (number, title, submitter, vendor, vessel, cost centre, total), and a line items table with qty/unit price/GST/line total. notify() fetches enriched data internally so no call sites change. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
a8e3b5d69b
commit
d82d18bac2
1 changed files with 206 additions and 45 deletions
|
|
@ -5,6 +5,7 @@ import type { PurchaseOrder, User } from "@prisma/client";
|
|||
const isDev = process.env.NODE_ENV === "development";
|
||||
const resend = isDev ? null : new Resend(process.env.RESEND_API_KEY);
|
||||
const FROM = `${process.env.EMAIL_FROM_NAME ?? "PPMS"} <${process.env.EMAIL_FROM ?? "noreply@ppms.pelagiamarine.com"}>`;
|
||||
const APP_URL = (process.env.NEXTAUTH_URL ?? "https://portal.pelagiamarine.com").replace(/\/$/, "");
|
||||
|
||||
export type NotificationEvent =
|
||||
| "PO_SUBMITTED"
|
||||
|
|
@ -25,10 +26,42 @@ interface NotifyParams {
|
|||
note?: string;
|
||||
}
|
||||
|
||||
type EnrichedPo = PurchaseOrder & {
|
||||
submitter: User;
|
||||
vendor: { name: string } | null;
|
||||
vessel: { name: string } | null;
|
||||
account: { name: string; code: string } | null;
|
||||
lineItems: {
|
||||
name: string;
|
||||
quantity: import("@prisma/client").Prisma.Decimal;
|
||||
unit: string;
|
||||
unitPrice: import("@prisma/client").Prisma.Decimal;
|
||||
gstRate: import("@prisma/client").Prisma.Decimal | null;
|
||||
}[];
|
||||
};
|
||||
|
||||
function fmt(n: number): string {
|
||||
return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", maximumFractionDigits: 2 }).format(n);
|
||||
}
|
||||
|
||||
export async function notify({ event, po, recipients, note }: NotifyParams) {
|
||||
const subject = buildSubject(event, po.poNumber);
|
||||
if (!subject) return;
|
||||
|
||||
// Fetch full PO once so all emails in this batch get line items / vendor / vessel
|
||||
const enriched = await db.purchaseOrder.findUnique({
|
||||
where: { id: po.id },
|
||||
include: {
|
||||
submitter: true,
|
||||
vendor: { select: { name: true } },
|
||||
vessel: { select: { name: true } },
|
||||
account: { select: { name: true, code: true } },
|
||||
lineItems: { orderBy: { sortOrder: "asc" }, select: { name: true, quantity: true, unit: true, unitPrice: true, gstRate: true } },
|
||||
},
|
||||
}) as EnrichedPo | null;
|
||||
|
||||
const richPo: EnrichedPo = enriched ?? { ...po, vendor: null, vessel: null, account: null, lineItems: [] };
|
||||
|
||||
await Promise.allSettled(
|
||||
recipients.map(async (recipient) => {
|
||||
const body = buildInAppBody(event, po, recipient);
|
||||
|
|
@ -37,7 +70,7 @@ export async function notify({ event, po, recipients, note }: NotifyParams) {
|
|||
let status = "sent";
|
||||
if (isDev) {
|
||||
console.log(
|
||||
`\n📧 [DEV EMAIL] To: ${recipient.email}\n Subject: ${subject}\n Body: ${buildEmailBody(event, po, note)}\n`
|
||||
`\n📧 [DEV EMAIL] To: ${recipient.email}\n Subject: ${subject}\n Body: ${buildEmailBody(event, po, note)}\n Link: ${APP_URL}${link}\n`
|
||||
);
|
||||
} else {
|
||||
try {
|
||||
|
|
@ -45,7 +78,7 @@ export async function notify({ event, po, recipients, note }: NotifyParams) {
|
|||
from: FROM,
|
||||
to: recipient.email,
|
||||
subject,
|
||||
html: buildHtml(event, po, recipient, note),
|
||||
html: buildHtml(event, richPo, recipient, note),
|
||||
});
|
||||
if (error) status = "failed";
|
||||
} catch {
|
||||
|
|
@ -118,21 +151,17 @@ function buildInAppLink(
|
|||
const isSubmitter = recipient.id === po.submitterId;
|
||||
|
||||
switch (event) {
|
||||
// Manager needs to act on the approval queue
|
||||
case "PO_SUBMITTED":
|
||||
case "VENDOR_ID_PROVIDED":
|
||||
return isManager ? `/approvals/${po.id}` : `/po/${po.id}`;
|
||||
|
||||
// Accounts needs to process payment; everyone else sees the PO
|
||||
case "PO_APPROVED":
|
||||
case "PO_APPROVED_WITH_NOTE":
|
||||
return isAccounts ? `/payments` : `/po/${po.id}`;
|
||||
|
||||
// Submitter needs to open the edit form
|
||||
case "EDITS_REQUESTED":
|
||||
return isSubmitter ? `/po/${po.id}/edit` : `/po/${po.id}`;
|
||||
|
||||
// Submitter needs to confirm receipt
|
||||
case "PAYMENT_SENT":
|
||||
return isSubmitter ? `/po/${po.id}/receipt` : `/po/${po.id}`;
|
||||
|
||||
|
|
@ -141,53 +170,57 @@ function buildInAppLink(
|
|||
}
|
||||
}
|
||||
|
||||
// ── Email action label (button text) ──────────────────────────────────────────
|
||||
|
||||
function buildActionLabel(event: NotificationEvent, recipient: User, po: PurchaseOrder): string {
|
||||
const isManager = recipient.role === "MANAGER" || recipient.role === "SUPERUSER";
|
||||
const isAccounts = recipient.role === "ACCOUNTS";
|
||||
const isSubmitter = recipient.id === po.submitterId;
|
||||
|
||||
switch (event) {
|
||||
case "PO_SUBMITTED":
|
||||
case "VENDOR_ID_PROVIDED":
|
||||
return isManager ? "Review Purchase Order" : "View Purchase Order";
|
||||
case "PO_APPROVED":
|
||||
case "PO_APPROVED_WITH_NOTE":
|
||||
return isAccounts ? "Process Payment" : "View Purchase Order";
|
||||
case "PO_REJECTED":
|
||||
return "View Purchase Order";
|
||||
case "EDITS_REQUESTED":
|
||||
return isSubmitter ? "Edit Purchase Order" : "View Purchase Order";
|
||||
case "VENDOR_ID_REQUESTED":
|
||||
return "Provide Vendor ID";
|
||||
case "PAYMENT_PROCESSING":
|
||||
return "View Purchase Order";
|
||||
case "PAYMENT_SENT":
|
||||
return isSubmitter ? "Confirm Receipt" : "View Purchase Order";
|
||||
case "RECEIPT_CONFIRMED":
|
||||
return "View Purchase Order";
|
||||
default:
|
||||
return "View Purchase Order";
|
||||
}
|
||||
}
|
||||
|
||||
// ── Email subject ─────────────────────────────────────────────────────────────
|
||||
|
||||
function buildSubject(event: NotificationEvent, poNumber: string): string | null {
|
||||
const base = `PO ${poNumber}`;
|
||||
const base = `Purchase Order ${poNumber}`;
|
||||
const map: Record<NotificationEvent, string> = {
|
||||
PO_SUBMITTED: `${base} submitted for review`,
|
||||
PO_APPROVED: `${base} has been approved`,
|
||||
PO_APPROVED_WITH_NOTE: `${base} has been approved`,
|
||||
PO_REJECTED: `${base} has been rejected`,
|
||||
EDITS_REQUESTED: `Edits requested on ${base}`,
|
||||
VENDOR_ID_REQUESTED: `Vendor ID needed for ${base}`,
|
||||
VENDOR_ID_PROVIDED: `Vendor ID provided for ${base}`,
|
||||
PAYMENT_PROCESSING: `Payment initiated for ${base}`,
|
||||
PAYMENT_SENT: `Payment confirmed for ${base}`,
|
||||
RECEIPT_CONFIRMED: `Receipt confirmed — ${base} closed`,
|
||||
PO_SUBMITTED: `${base} submitted for review`,
|
||||
PO_APPROVED: `${base} has been approved`,
|
||||
PO_APPROVED_WITH_NOTE: `${base} has been approved`,
|
||||
PO_REJECTED: `${base} has been rejected`,
|
||||
EDITS_REQUESTED: `Edits requested on ${base}`,
|
||||
VENDOR_ID_REQUESTED: `Vendor ID needed for ${base}`,
|
||||
VENDOR_ID_PROVIDED: `Vendor ID provided for ${base}`,
|
||||
PAYMENT_PROCESSING: `Payment initiated for ${base}`,
|
||||
PAYMENT_SENT: `Payment confirmed for ${base}`,
|
||||
RECEIPT_CONFIRMED: `Receipt confirmed — ${base} closed`,
|
||||
};
|
||||
return map[event] ?? null;
|
||||
}
|
||||
|
||||
// ── Email HTML ────────────────────────────────────────────────────────────────
|
||||
|
||||
function buildHtml(
|
||||
event: NotificationEvent,
|
||||
po: PurchaseOrder & { submitter: User },
|
||||
recipient: User,
|
||||
note?: string
|
||||
): string {
|
||||
return `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="font-family:Inter,sans-serif;max-width:560px;margin:0 auto;padding:32px 24px;color:#111827;">
|
||||
<div style="border-bottom:2px solid #2563eb;padding-bottom:12px;margin-bottom:24px;">
|
||||
<span style="font-size:20px;font-weight:700;color:#1d4ed8;">PPMS</span>
|
||||
</div>
|
||||
<p style="margin:0 0 16px;">Hi ${recipient.name},</p>
|
||||
<p style="margin:0 0 24px;">${buildEmailBody(event, po, note)}</p>
|
||||
<div style="background:#f3f4f6;border-radius:8px;padding:16px;font-size:13px;color:#374151;">
|
||||
<strong>PO Number:</strong> ${po.poNumber}<br/>
|
||||
<strong>Title:</strong> ${po.title}<br/>
|
||||
<strong>Submitted by:</strong> ${po.submitter.name}
|
||||
</div>
|
||||
<p style="margin-top:32px;font-size:12px;color:#9ca3af;">
|
||||
You received this message because you are a stakeholder on this purchase order.
|
||||
</p>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
// ── Email body text ───────────────────────────────────────────────────────────
|
||||
|
||||
function buildEmailBody(
|
||||
event: NotificationEvent,
|
||||
|
|
@ -222,3 +255,131 @@ function buildEmailBody(
|
|||
return `There has been an update on purchase order ${po.poNumber}.`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Email HTML ────────────────────────────────────────────────────────────────
|
||||
|
||||
function buildHtml(
|
||||
event: NotificationEvent,
|
||||
po: EnrichedPo,
|
||||
recipient: User,
|
||||
note?: string
|
||||
): string {
|
||||
const actionPath = buildInAppLink(event, po, recipient);
|
||||
const actionUrl = `${APP_URL}${actionPath}`;
|
||||
const actionLabel = buildActionLabel(event, recipient, po);
|
||||
const bodyText = buildEmailBody(event, po, note);
|
||||
|
||||
const totalAmount = Number(po.totalAmount);
|
||||
|
||||
// ── PO summary card ────────────────────────────────────────────────────────
|
||||
const summaryRows = [
|
||||
["Purchase Order", `<span style="font-family:monospace;">${po.poNumber}</span>`],
|
||||
["Title", po.title],
|
||||
["Submitted by", po.submitter.name],
|
||||
po.vendor ? ["Vendor", po.vendor.name] : null,
|
||||
po.vessel ? ["Vessel", po.vessel.name] : null,
|
||||
po.account ? ["Cost Centre", `${po.account.name} (${po.account.code})`] : null,
|
||||
["Total Amount", `<strong>${fmt(totalAmount)}</strong>`],
|
||||
]
|
||||
.filter(Boolean)
|
||||
.map(
|
||||
(row) =>
|
||||
`<tr>
|
||||
<td style="padding:4px 12px 4px 0;font-size:13px;color:#6b7280;white-space:nowrap;vertical-align:top;">${row![0]}</td>
|
||||
<td style="padding:4px 0;font-size:13px;color:#111827;">${row![1]}</td>
|
||||
</tr>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
// ── Line items table ───────────────────────────────────────────────────────
|
||||
const lineItemRows = po.lineItems
|
||||
.map((li) => {
|
||||
const qty = Number(li.quantity);
|
||||
const price = Number(li.unitPrice);
|
||||
const gst = Number(li.gstRate ?? 0.18);
|
||||
const lineTotal = qty * price * (1 + gst);
|
||||
return `<tr style="border-bottom:1px solid #f3f4f6;">
|
||||
<td style="padding:7px 8px 7px 0;font-size:13px;color:#111827;">${li.name}</td>
|
||||
<td style="padding:7px 4px;font-size:13px;color:#374151;text-align:right;white-space:nowrap;">${qty} ${li.unit}</td>
|
||||
<td style="padding:7px 4px;font-size:13px;color:#374151;text-align:right;white-space:nowrap;">${fmt(price)}</td>
|
||||
<td style="padding:7px 0 7px 4px;font-size:13px;color:#374151;text-align:right;white-space:nowrap;">${Math.round(gst * 100)}%</td>
|
||||
<td style="padding:7px 0 7px 4px;font-size:13px;color:#111827;font-weight:600;text-align:right;white-space:nowrap;">${fmt(lineTotal)}</td>
|
||||
</tr>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
const lineItemsSection = po.lineItems.length > 0
|
||||
? `<div style="margin-top:24px;">
|
||||
<p style="margin:0 0 8px;font-size:13px;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:0.05em;">Line Items</p>
|
||||
<table style="width:100%;border-collapse:collapse;border-top:1px solid #e5e7eb;">
|
||||
<thead>
|
||||
<tr style="background:#f9fafb;">
|
||||
<th style="padding:6px 8px 6px 0;font-size:12px;font-weight:600;color:#6b7280;text-align:left;">Item</th>
|
||||
<th style="padding:6px 4px;font-size:12px;font-weight:600;color:#6b7280;text-align:right;">Qty</th>
|
||||
<th style="padding:6px 4px;font-size:12px;font-weight:600;color:#6b7280;text-align:right;">Unit Price</th>
|
||||
<th style="padding:6px 4px;font-size:12px;font-weight:600;color:#6b7280;text-align:right;">GST</th>
|
||||
<th style="padding:6px 0 6px 4px;font-size:12px;font-weight:600;color:#6b7280;text-align:right;">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>${lineItemRows}</tbody>
|
||||
<tfoot>
|
||||
<tr style="border-top:2px solid #e5e7eb;">
|
||||
<td colspan="4" style="padding:8px 4px 0 0;font-size:13px;font-weight:700;color:#111827;text-align:right;">Grand Total</td>
|
||||
<td style="padding:8px 0 0 4px;font-size:14px;font-weight:700;color:#1d4ed8;text-align:right;">${fmt(totalAmount)}</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>`
|
||||
: "";
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html>
|
||||
<head><meta name="viewport" content="width=device-width,initial-scale=1"/></head>
|
||||
<body style="margin:0;padding:0;background:#f9fafb;font-family:Inter,-apple-system,sans-serif;">
|
||||
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f9fafb;padding:32px 16px;">
|
||||
<tr><td align="center">
|
||||
<table width="560" cellpadding="0" cellspacing="0" style="max-width:560px;width:100%;background:#ffffff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;">
|
||||
|
||||
<!-- Header -->
|
||||
<tr><td style="background:#1d4ed8;padding:20px 32px;">
|
||||
<span style="font-size:22px;font-weight:700;color:#ffffff;letter-spacing:-0.5px;">PPMS</span>
|
||||
<span style="font-size:13px;color:#93c5fd;margin-left:10px;">Pelagia Marine</span>
|
||||
</td></tr>
|
||||
|
||||
<!-- Body -->
|
||||
<tr><td style="padding:32px;">
|
||||
<p style="margin:0 0 20px;font-size:15px;color:#111827;">Hi ${recipient.name},</p>
|
||||
<p style="margin:0 0 24px;font-size:15px;color:#374151;line-height:1.6;">${bodyText}</p>
|
||||
|
||||
<!-- Action button -->
|
||||
<table cellpadding="0" cellspacing="0" style="margin-bottom:32px;">
|
||||
<tr><td style="background:#2563eb;border-radius:8px;">
|
||||
<a href="${actionUrl}" style="display:inline-block;padding:12px 24px;font-size:14px;font-weight:600;color:#ffffff;text-decoration:none;">${actionLabel} →</a>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<!-- PO summary -->
|
||||
<div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px 20px;margin-bottom:4px;">
|
||||
<p style="margin:0 0 10px;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.06em;">Purchase Order Details</p>
|
||||
<table cellpadding="0" cellspacing="0" style="width:100%;">
|
||||
${summaryRows}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
${lineItemsSection}
|
||||
|
||||
</td></tr>
|
||||
|
||||
<!-- Footer -->
|
||||
<tr><td style="background:#f8fafc;border-top:1px solid #e5e7eb;padding:16px 32px;text-align:center;">
|
||||
<p style="margin:0;font-size:12px;color:#9ca3af;">
|
||||
You received this because you are a stakeholder on this purchase order.
|
||||
</p>
|
||||
</td></tr>
|
||||
|
||||
</table>
|
||||
</td></tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>`;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue