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

This commit is contained in:
Dries Augustyns
2024-09-24 17:19:55 +02:00
parent 213081174d
commit f1d4d5073c
11 changed files with 259 additions and 29 deletions
@@ -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")}
+40 -1
View File
@@ -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")}