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

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
-							className={"sm:col-span-6"}
-							label={"Subject"}
-							placeholder={`Welcome to ${project.name}!`}
-							register={register("subject")}
-							error={errors.subject}
-						/>
+						<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
+							<Input
+								className={"sm:col-span-6"}
+								label={"Subject"}
+								placeholder={`Welcome to ${project.name}!`}
+								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"}>