svrjs-nextjs-website/app/(auth)/email-editor/page.tsx

150 lines
3.9 KiB
TypeScript
Raw Normal View History

2024-08-26 13:11:47 +02:00
"use client";
import React, { useState } from "react";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import CodeEditor from "@/components/cards/MonacoEditor";
import { EXAMPLE_A1 } from "@/constants";
import { useToast } from "@/components/ui/use-toast";
const EmailEditor = () => {
const { toast } = useToast();
const [subject, setSubject] = useState("");
const [previewContent, setPreviewContent] = useState<string>(EXAMPLE_A1);
const [loading, setLoading] = useState(false);
2024-08-26 13:11:47 +02:00
const validateInputs = () => {
if (!subject.trim() || !previewContent.trim()) {
toast({
title: "Validation Error",
description: "Subject and content cannot be empty.",
variant: "destructive"
});
return false;
}
return true;
};
2024-08-26 13:11:47 +02:00
const handleSendAll = async () => {
if (!validateInputs()) return;
2024-08-26 13:11:47 +02:00
setLoading(true);
try {
const response = await fetch("/api/newsletter/send", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
subject: subject,
html: previewContent
})
});
2024-08-26 13:11:47 +02:00
if (!response.ok) {
throw new Error("Network response was not ok");
}
2024-08-26 13:11:47 +02:00
const result = await response.json();
toast({
title: "Success!",
description: result.message || "Emails sent successfully"
});
} catch (error) {
console.error("Error:", error);
toast({
title: "Uh oh!",
description: `Failed to send emails: ${error}`,
variant: "destructive"
});
} finally {
setLoading(false);
}
};
2024-08-26 13:11:47 +02:00
const handleSendTest = async () => {
if (!validateInputs()) return;
2024-08-26 13:11:47 +02:00
setLoading(true);
try {
const response = await fetch("/api/newsletter/test", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
subject: subject,
html: previewContent
})
});
2024-08-26 13:11:47 +02:00
if (!response.ok) {
throw new Error("Network response was not ok");
}
2024-08-26 13:11:47 +02:00
const result = await response.json();
toast({
title: "Success!",
description: result.message || "Test email sent successfully"
});
} catch (error) {
console.error("Error:", error);
toast({
title: "Uh oh!",
description: `Failed to send test email: ${error}`,
variant: "destructive"
});
} finally {
setLoading(false);
}
};
2024-08-26 13:11:47 +02:00
const handleEditorChange = (value: string) => {
setPreviewContent(value);
};
2024-08-26 13:11:47 +02:00
return (
<div className="flex flex-col lg:flex-row h-screen">
<div className="w-full lg:w-1/2 p-4 flex flex-col space-y-4">
<Link href="/admin/email" className="text-blue-500 underline">
Back
</Link>
&ldquo;{"{unsubscribeId}"}&rdquo; will be replaced with an
unsubscription ID.
<input
type="text"
placeholder="Subject"
value={subject}
onChange={(e) => setSubject(e.target.value)}
className="border rounded-md p-2"
/>
<CodeEditor onChange={handleEditorChange} />
<div className="flex space-x-2 mt-4">
<Button
variant={"secondary"}
onClick={handleSendTest}
disabled={loading}
>
{loading ? "Sending..." : "Send Test"}
</Button>
<Button onClick={handleSendAll} disabled={loading}>
{loading ? "Sending..." : "Send All"}
</Button>
</div>
</div>
2024-08-26 13:11:47 +02:00
<div className="w-full lg:w-1/2 p-4 overflow-auto">
<h2 className="text-2xl font-bold mb-4 text-secondary-foreground">
Email Preview
</h2>
<iframe
className="border rounded-md w-full h-2/3"
srcDoc={previewContent}
/>
</div>
</div>
);
2024-08-26 13:11:47 +02:00
};
export default EmailEditor;