Feat: Added ability to overwrite sender mail and name for templates and campaigns

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "plunk",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"private": true,
 	"license": "agpl-3.0",
 	"workspaces": {

packages/api/src/controllers/Tasks.ts

@@ -41,6 +41,9 @@ export class Tasks {
 			let subject = "";
 			let body = "";
 
+			let email = "";
+			let name = "";
+
 			if (action) {
 				const { template, notevents } = action;
 
@@ -52,6 +55,9 @@ export class Tasks {
 					}
 				}
 
+				email = project.verified && project.email ? template.email ?? project.email : "[email protected]";
+				name = template.from ?? project.from ?? project.name;
+
 				({ subject, body } = EmailService.format({
 					subject: template.subject,
 					body: template.body,
@@ -62,6 +68,9 @@ export class Tasks {
 					},
 				}));
 			} else if (campaign) {
+				email = project.verified && project.email ? campaign.email ?? project.email : "[email protected]";
+				name = campaign.from ?? project.from ?? project.name;
+
 				({ subject, body } = EmailService.format({
 					subject: campaign.subject,
 					body: campaign.body,
@@ -75,8 +84,8 @@ export class Tasks {
 
 			const { messageId } = await EmailService.send({
 				from: {
-					name: project.from ?? project.name,
+					name,
-					email: project.verified && project.email ? project.email : "[email protected]",
+					email,
 				},
 				to: [contact.email],
 				content: {

packages/api/src/controllers/v1/Campaigns.ts

@@ -3,7 +3,7 @@ import { CampaignSchemas, UtilitySchemas } from "@plunk/shared";
 import dayjs from "dayjs";
 import type { Request, Response } from "express";
 import { prisma } from "../../database/prisma";
-import { HttpException, NotFound } from "../../exceptions";
+import { HttpException, NotAllowed, NotFound } from "../../exceptions";
 import { type IJwt, type ISecret, isAuthenticated, isValidSecretKey } from "../../middleware/auth";
 import { CampaignService } from "../../services/CampaignService";
 import { ContactService } from "../../services/ContactService";
@@ -160,6 +160,7 @@ export class Campaigns {
 				subject: campaign.subject,
 				body: campaign.body,
 				style: campaign.style,
+				email: campaign.email,
 			},
 		});
 
@@ -180,7 +181,15 @@ export class Campaigns {
 			throw new NotFound("project");
 		}
 
-		let { subject, body, recipients, style } = CampaignSchemas.create.parse(req.body);
+		let { subject, body, recipients, style, email, from } = CampaignSchemas.create.parse(req.body);
+
+		if (email && !project.verified) {
+			throw new NotAllowed("You need to attach a domain to your project to customize the sender address");
+		}
+
+		if (email && email.split("@")[1] !== project.email?.split("@")[1]) {
+			throw new NotAllowed("The sender address must be the same domain as the project's email address");
+		}
 
 		if (recipients.length === 1 && recipients[0] === "all") {
 			const projectContacts = await prisma.contact.findMany({
@@ -197,6 +206,8 @@ export class Campaigns {
 				subject,
 				body,
 				style,
+				from: from === "" ? null : from,
+				email: email === "" ? null : email,
 			},
 		});
 
@@ -253,7 +264,15 @@ export class Campaigns {
 			throw new NotFound("project");
 		}
 
-		let { id, subject, body, recipients, style } = CampaignSchemas.update.parse(req.body);
+		let { id, subject, body, recipients, style, email, from } = CampaignSchemas.update.parse(req.body);
+
+		if (email && !project.verified) {
+			throw new NotAllowed("You need to attach a domain to your project to customize the sender address");
+		}
+
+		if (email && email.split("@")[1] !== project.email?.split("@")[1]) {
+			throw new NotAllowed("The sender address must be the same domain as the project's email address");
+		}
 
 		if (recipients.length === 1 && recipients[0] === "all") {
 			const projectContacts = await prisma.contact.findMany({
@@ -276,6 +295,8 @@ export class Campaigns {
 				subject,
 				body,
 				style,
+				from: from === "" ? null : from,
+				email: email === "" ? null : email,
 			},
 			include: {
 				recipients: { select: { id: true } },

packages/api/src/controllers/v1/Templates.ts

@@ -60,6 +60,7 @@ export class Templates {
 				body: template.body,
 				type: template.type,
 				style: template.style,
+				email: template.email,
 			},
 		});
 
@@ -101,7 +102,15 @@ export class Templates {
 			throw new NotFound("project");
 		}
 
-		const { subject, body, type, style } = TemplateSchemas.create.parse(req.body);
+		const { subject, body, type, style, email, from } = TemplateSchemas.create.parse(req.body);
+
+		if (email && !project.verified) {
+			throw new NotAllowed("You need to attach a domain to your project to customize the sender address");
+		}
+
+		if (email && email.split("@")[1] !== project.email?.split("@")[1]) {
+			throw new NotAllowed("The sender address must be the same domain as the project's email address");
+		}
 
 		const template = await prisma.template.create({
 			data: {
@@ -110,6 +119,8 @@ export class Templates {
 				body,
 				type,
 				style,
+				from: from === "" ? null : from,
+				email: email === "" ? null : email,
 			},
 		});
 
@@ -151,7 +162,7 @@ export class Templates {
 			throw new NotFound("project");
 		}
 
-		const { id, subject, body, type, style } = TemplateSchemas.update.parse(req.body);
+		const { id, subject, body, type, style, email, from } = TemplateSchemas.update.parse(req.body);
 
 		let template = await TemplateService.id(id);
 
@@ -159,9 +170,24 @@ export class Templates {
 			throw new NotFound("template");
 		}
 
+		if (email && !project.verified) {
+			throw new NotAllowed("You need to attach a domain to your project to customize the sender address");
+		}
+
+		if (email && email.split("@")[1] !== project.email?.split("@")[1]) {
+			throw new NotAllowed("The sender address must be the same domain as the project's email address");
+		}
+
 		template = await prisma.template.update({
 			where: { id },
-			data: { subject, body, type, style },
+			data: {
+				subject,
+				body,
+				type,
+				style,
+				from: from === "" ? null : from,
+				email: email === "" ? null : email,
+			},
 			include: {
 				actions: true,
 			},

packages/api/src/services/ActionService.ts

@@ -120,8 +120,8 @@ export class ActionService {
 
 				const { messageId } = await EmailService.send({
 					from: {
-						name: project.from ?? project.name,
+						name: action.template.from ?? project.from ?? project.name,
-						email: project.verified && project.email ? project.email : "[email protected]",
+						email: project.verified && project.email ? action.template.email ?? project.email : "[email protected]",
 					},
 					to: [contact.email],
 					content: {

packages/dashboard/src/pages/campaigns/[id].tsx

@@ -32,6 +32,8 @@ import { network } from "../../lib/network";
 interface CampaignValues {
 	subject: string;
 	body: string;
+	email?: string;
+	from?: string;
 	recipients: string[];
 	style: "PLUNK" | "HTML";
 }
@@ -71,6 +73,8 @@ export default function Index() {
 		watch,
 		reset,
 		setValue,
+		setError,
+		clearErrors,
 	} = useForm<CampaignValues>({
 		resolver: zodResolver(CampaignSchemas.update),
 		defaultValues: { recipients: [], body: undefined },
@@ -87,6 +91,21 @@ export default function Index() {
 		});
 	}, [reset, campaign]);
 
+	useEffect(() => {
+		watch((value, { name, type }) => {
+			if (name === "email") {
+				if (value.email && project?.email && !value.email.endsWith(project.email.split("@")[1])) {
+					setError("email", {
+						type: "manual",
+						message: `The sender address must end with @${project.email?.split("@")[1]}`,
+					});
+				} else {
+					clearErrors("email");
+				}
+			}
+		});
+	}, [watch, project, setError, clearErrors]);
+
 	if (!project || !campaign || !events || (watch("body") as string | undefined) === undefined) {
 		return <FullscreenLoader />;
 	}
@@ -404,13 +423,35 @@ export default function Index() {
 					}
 				>
 					<form onSubmit={handleSubmit(update)} className="space-6 grid gap-6 sm:grid-cols-6">
-						<Input
+						<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
-							className={"sm:col-span-6"}
+							<Input
-							label={"Subject"}
+								className={"sm:col-span-6"}
-							placeholder={`Welcome to ${project.name}!`}
+								label={"Subject"}
-							register={register("subject")}
+								placeholder={`Welcome to ${project.name}!`}
-							error={errors.subject}
+								register={register("subject")}
-						/>
+								error={errors.subject}
+							/>
+
+							{project.verified && (
+								<Input
+									className={"sm:col-span-3"}
+									label={"Sender Email"}
+									placeholder={`${project.email}`}
+									register={register("email")}
+									error={errors.email}
+								/>
+							)}
+
+							{project.verified && (
+								<Input
+									className={"sm:col-span-3"}
+									label={"Sender Name"}
+									placeholder={`${project.name}`}
+									register={register("from")}
+									error={errors.from}
+								/>
+							)}
+						</div>
 
 						{contacts ? (
 							<>

packages/dashboard/src/pages/campaigns/new.tsx

@@ -6,7 +6,7 @@ import dayjs from "dayjs";
 import { AnimatePresence, motion } from "framer-motion";
 import { Search, Users2, XIcon } from "lucide-react";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { type FieldError, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { Alert, Card, Dropdown, Editor, FullscreenLoader, Input, MultiselectDropdown } from "../../components";
@@ -20,6 +20,8 @@ import { network } from "../../lib/network";
 interface CampaignValues {
 	subject: string;
 	body: string;
+	email?: string;
+	from?: string;
 	recipients: string[];
 	style: "PLUNK" | "HTML";
 }
@@ -58,6 +60,8 @@ export default function Index() {
 		formState: { errors },
 		setValue,
 		watch,
+		setError,
+		clearErrors,
 	} = useForm<CampaignValues>({
 		resolver: zodResolver(CampaignSchemas.create),
 		defaultValues: {
@@ -67,6 +71,21 @@ export default function Index() {
 		},
 	});
 
+	useEffect(() => {
+		watch((value, { name, type }) => {
+			if (name === "email") {
+				if (value.email && project?.email && !value.email.endsWith(project.email.split("@")[1])) {
+					setError("email", {
+						type: "manual",
+						message: `The sender address must end with @${project.email?.split("@")[1]}`,
+					});
+				} else {
+					clearErrors("email");
+				}
+			}
+		});
+	}, [watch, project, setError, clearErrors]);
+
 	if (!project || !events) {
 		return <FullscreenLoader />;
 	}
@@ -194,13 +213,36 @@ export default function Index() {
 			<Dashboard>
 				<Card title={"Create a new campaign"}>
 					<form onSubmit={handleSubmit(create)} className="space-6 grid gap-6 sm:grid-cols-6">
-						<Input
+						<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
-							className={"sm:col-span-6"}
+							<Input
-							label={"Subject"}
+								className={"sm:col-span-6"}
-							placeholder={`Welcome to ${project.name}!`}
+								label={"Subject"}
-							register={register("subject")}
+								placeholder={`Welcome to ${project.name}!`}
-							error={errors.subject}
+								register={register("subject")}
-						/>
+								error={errors.subject}
+							/>
+
+							{project.verified && (
+								<Input
+									className={"sm:col-span-3"}
+									label={"Sender Email"}
+									placeholder={`${project.email}`}
+									register={register("email")}
+									error={errors.email}
+								/>
+							)}
+
+							{project.verified && (
+								<Input
+									className={"sm:col-span-3"}
+									label={"Sender Name"}
+									placeholder={`${project.name}`}
+									register={register("from")}
+									error={errors.from}
+								/>
+							)}
+						</div>
+
 						{contacts ? (
 							<>
 								<div className={"sm:col-span-3"}>

packages/dashboard/src/pages/templates/[id].tsx

@@ -16,6 +16,8 @@ import { network } from "../../lib/network";
 interface TemplateValues {
 	subject: string;
 	body: string;
+	email?: string;
+	from?: string;
 	type: "MARKETING" | "TRANSACTIONAL";
 	style: "PLUNK" | "HTML";
 }
@@ -41,6 +43,8 @@ export default function Index() {
 		watch,
 		setValue,
 		reset,
+		setError,
+		clearErrors,
 	} = useForm<TemplateValues>({
 		resolver: zodResolver(TemplateSchemas.update),
 		defaultValues: {
@@ -56,6 +60,21 @@ export default function Index() {
 		reset(template);
 	}, [reset, template]);
 
+	useEffect(() => {
+		watch((value, { name, type }) => {
+			if (name === "email") {
+				if (value.email && project?.email && !value.email.endsWith(project.email.split("@")[1])) {
+					setError("email", {
+						type: "manual",
+						message: `The sender address must end with @${project.email?.split("@")[1]}`,
+					});
+				} else {
+					clearErrors("email");
+				}
+			}
+		});
+	}, [watch, project, setError, clearErrors]);
+
 	if (!project || !template || (watch("body") as string | undefined) === undefined) {
 		return <FullscreenLoader />;
 	}
@@ -248,6 +267,26 @@ export default function Index() {
 							</AnimatePresence>
 						</div>
 
+						{project.verified && (
+							<Input
+								className={"sm:col-span-3"}
+								label={"Sender Email"}
+								placeholder={`${project.email}`}
+								register={register("email")}
+								error={errors.email}
+							/>
+						)}
+
+						{project.verified && (
+							<Input
+								className={"sm:col-span-3"}
+								label={"Sender Name"}
+								placeholder={`${project.name}`}
+								register={register("from")}
+								error={errors.from}
+							/>
+						)}
+
 						<div className={"sm:col-span-6"}>
 							<Editor
 								value={watch("body")}

packages/dashboard/src/pages/templates/new.tsx

@@ -3,7 +3,7 @@ import { TemplateSchemas } from "@plunk/shared";
 import type { Template } from "@prisma/client";
 import { AnimatePresence, motion } from "framer-motion";
 import { useRouter } from "next/router";
-import React from "react";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { Card, Dropdown, Editor, FullscreenLoader, Input, Tooltip } from "../../components";
@@ -15,6 +15,8 @@ import { network } from "../../lib/network";
 interface TemplateValues {
 	subject: string;
 	body: string;
+	email?: string;
+	from?: string;
 	type: "MARKETING" | "TRANSACTIONAL";
 	style: "PLUNK" | "HTML";
 }
@@ -41,6 +43,8 @@ export default function Index() {
 		formState: { errors },
 		watch,
 		setValue,
+		setError,
+		clearErrors,
 	} = useForm<TemplateValues>({
 		resolver: zodResolver(TemplateSchemas.create),
 		defaultValues: {
@@ -50,6 +54,21 @@ export default function Index() {
 		},
 	});
 
+	useEffect(() => {
+		watch((value, { name, type }) => {
+			if (name === "email") {
+				if (value.email && project?.email && !value.email.endsWith(project.email.split("@")[1])) {
+					setError("email", {
+						type: "manual",
+						message: `The sender address must end with @${project.email?.split("@")[1]}`,
+					});
+				} else {
+					clearErrors("email");
+				}
+			}
+		});
+	}, [watch, project, setError, clearErrors]);
+
 	if (!project) {
 		return <FullscreenLoader />;
 	}
@@ -141,6 +160,26 @@ export default function Index() {
 							</AnimatePresence>
 						</div>
 
+						{project.verified && (
+							<Input
+								className={"sm:col-span-3"}
+								label={"Sender Email"}
+								placeholder={`${project.email}`}
+								register={register("email")}
+								error={errors.email}
+							/>
+						)}
+
+						{project.verified && (
+							<Input
+								className={"sm:col-span-3"}
+								label={"Sender Name"}
+								placeholder={`${project.name}`}
+								register={register("from")}
+								error={errors.from}
+							/>
+						)}
+
 						<div className={"sm:col-span-6"}>
 							<Editor
 								value={watch("body")}

packages/shared/src/index.ts

@@ -133,6 +133,8 @@ export const CampaignSchemas = {
 			.min(1, "Subject needs to be at least 1 character long")
 			.max(70, "Subject needs to be less than 70 characters long"),
 		body: z.string().min(1, "Body needs to be at least 1 character long"),
+		email: email.nullish().or(z.literal("")),
+		from: z.string().nullish(),
 		recipients: z.array(z.string()),
 		style: z.nativeEnum(TemplateStyle).default("PLUNK"),
 	}),
@@ -143,6 +145,8 @@ export const CampaignSchemas = {
 			.min(1, "Subject needs to be at least 1 character long")
 			.max(70, "Subject needs to be less than 70 characters long"),
 		body: z.string().min(1, "Body needs to be at least 1 character long"),
+		email: email.nullish().or(z.literal("")),
+		from: z.string().nullish(),
 		recipients: z.array(z.string()),
 		style: z.nativeEnum(TemplateStyle).default("PLUNK"),
 	}),
@@ -208,6 +212,8 @@ export const TemplateSchemas = {
 	create: z.object({
 		subject: z.string().min(1, "Subject can't be empty").max(70, "Subject needs to be less than 70 characters long"),
 		body: z.string().min(1, "Body can't be empty"),
+		email: email.nullish().or(z.literal("")),
+		from: z.string().nullish(),
 		type: z.nativeEnum(TemplateType).default("MARKETING"),
 		style: z.nativeEnum(TemplateStyle).default("PLUNK"),
 	}),
@@ -215,6 +221,8 @@ export const TemplateSchemas = {
 		id,
 		subject: z.string().min(1, "Subject can't be empty").max(70, "Subject needs to be less than 70 characters long"),
 		body: z.string().min(1, "Body can't be empty"),
+		email: email.nullish().or(z.literal("")),
+		from: z.string().nullish(),
 		type: z.nativeEnum(TemplateType).default("MARKETING"),
 		style: z.nativeEnum(TemplateStyle).default("PLUNK"),
 	}),

prisma/schema.prisma

@@ -108,6 +108,8 @@ model Template {
   // Details
   subject String
   body    String
+  email   String?
+  from    String?
 
   type  TemplateType
   style TemplateStyle
@@ -159,8 +161,11 @@ model Action {
 model Campaign {
   id String @id @default(uuid())
 
-  subject   String
+  subject String
-  body      String
+  body    String
+  email   String?
+  from    String?
+
   status    CampaignStatus @default(DRAFT)
   delivered DateTime?