diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
index 4340026..2cc6506 100644
--- a/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
+++ b/apps/web/src/app/(dashboard)/domains/[domainId]/page.tsx
@@ -290,8 +290,7 @@ const DomainSettings: React.FC<{ domain: Domain }> = ({ domain }) => {
Danger
- Deleting a domain will remove all of its DNS records and stop sending
- emails.
+ Deleting a domain will stop sending emails with this domain.
diff --git a/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx b/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
index 24e6006..4acde30 100644
--- a/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
+++ b/apps/web/src/app/(dashboard)/domains/[domainId]/send-test-mail.tsx
@@ -1,8 +1,6 @@
"use client";
import { Button } from "@unsend/ui/src/button";
-import { Input } from "@unsend/ui/src/input";
-import { Label } from "@unsend/ui/src/label";
import {
Dialog,
DialogContent,
@@ -18,27 +16,120 @@ import { Domain } from "@prisma/client";
import { useRouter } from "next/navigation";
import { toast } from "@unsend/ui/src/toaster";
import { Send, SendHorizonal } from "lucide-react";
+import { Code } from "@unsend/ui/src/code";
+
+const jsCode = `const requestOptions = {
+ method: "POST",
+ headers: {
+ "Accept": "application/json",
+ "Content-Type": "application/json",
+ "Authorization": "Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
+ },
+ body: JSON.stringify({
+ "to": "koushikmohan1996@gmail.com",
+ "from": "hello@test.splitpro.app",
+ "subject": "Test mail",
+ "html": "Hello this is a test mail
"
+ }),
+ redirect: "follow"
+};
+
+fetch("http://localhost:3000/api/v1/emails", requestOptions)
+ .then(response => response.text())
+ .then(result => console.log(result))
+ .catch(error => console.error(error));
+`;
+
+const pythonCode = `import requests
+import json
+
+url = "http://localhost:3000/api/v1/emails"
+
+payload = json.dumps({
+ "to": "koushikmohan1996@gmail.com",
+ "from": "hello@test.splitpro.app",
+ "subject": "Test mail",
+ "html": "Hello this is a test mail
"
+})
+headers = {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json',
+ 'Authorization': 'Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
+}
+
+response = requests.request("POST", url, headers=headers, data=payload)
+
+print(response.text)`;
+
+const rubyCode = `require 'uri'
+require 'net/http'
+require 'json'
+
+url = URI("http://localhost:3000/api/v1/emails")
+
+http = Net::HTTP.new(url.host, url.port)
+request = Net::HTTP::Post.new(url)
+request["Accept"] = 'application/json'
+request["Content-Type"] = 'application/json'
+request["Authorization"] = 'Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e'
+request.body = JSON.dump({
+ "to" => "koushikmohan1996@gmail.com",
+ "from" => "hello@test.splitpro.app",
+ "subject" => "Test mail",
+ "html" => "Hello this is a test mail
"
+})
+
+response = http.request(request)
+puts response.read_body`;
+
+const phpCode = `$url = "http://localhost:3000/api/v1/emails";
+
+$payload = json_encode(array(
+ "to" => "koushikmohan1996@gmail.com",
+ "from" => "hello@test.splitpro.app",
+ "subject" => "Test mail",
+ "html" => "Hello this is a test mail
"
+));
+
+$headers = array(
+ "Accept: application/json",
+ "Content-Type: application/json",
+ "Authorization: Bearer us_ad9a79256e366399c747cbf0b38eca3c472e8a2e"
+);
+
+$ch = curl_init($url);
+curl_setopt($ch, CURLOPT_POST, true);
+curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
+curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
+curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
+
+$response = curl_exec($ch);
+if (curl_errno($ch)) {
+ echo 'Error:' . curl_error($ch);
+} else {
+ echo $response;
+}`;
export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
const [open, setOpen] = useState(false);
const [domainName, setDomainName] = useState("");
- const deleteDomainMutation = api.domain.deleteDomain.useMutation();
+ const sendTestEmailFromDomainMutation =
+ api.domain.sendTestEmailFromDomain.useMutation();
const utils = api.useUtils();
const router = useRouter();
- function handleSave() {
- deleteDomainMutation.mutate(
+ function handleSendTestEmail() {
+ sendTestEmailFromDomainMutation.mutate(
{
id: domain.id,
},
{
onSuccess: () => {
utils.domain.domains.invalidate();
+ toast.success(`Test email sent`);
setOpen(false);
- toast.success(`Domain ${domain.name} deleted`);
- router.replace("/domains");
},
}
);
@@ -55,10 +146,28 @@ export const SendTestMail: React.FC<{ domain: Domain }> = ({ domain }) => {
Send test email
-
+
Send test email
+
+
+
);
diff --git a/apps/web/src/server/api/routers/domain.ts b/apps/web/src/server/api/routers/domain.ts
index 9abdd28..81c9a7c 100644
--- a/apps/web/src/server/api/routers/domain.ts
+++ b/apps/web/src/server/api/routers/domain.ts
@@ -13,6 +13,7 @@ import {
getDomain,
updateDomain,
} from "~/server/service/domain-service";
+import { sendEmail } from "~/server/service/email-service";
export const domainRouter = createTRPCRouter({
createDomain: teamProcedure
@@ -61,4 +62,37 @@ export const domainRouter = createTRPCRouter({
await deleteDomain(input.id);
return { success: true };
}),
+
+ sendTestEmailFromDomain: teamProcedure
+ .input(z.object({ id: z.number() }))
+ .mutation(
+ async ({
+ ctx: {
+ session: { user },
+ team,
+ },
+ input,
+ }) => {
+ const domain = await db.domain.findFirst({
+ where: { id: input.id, teamId: team.id },
+ });
+
+ if (!domain) {
+ throw new Error("Domain not found");
+ }
+
+ if (!user.email) {
+ throw new Error("User email not found");
+ }
+
+ return sendEmail({
+ teamId: team.id,
+ to: user.email,
+ from: `hello@${domain.name}`,
+ subject: "Test mail",
+ text: "Hello this is a test mail",
+ html: "Hello this is a test mail
",
+ });
+ }
+ ),
});
diff --git a/apps/web/src/server/service/email-service.ts b/apps/web/src/server/service/email-service.ts
index 489cbb5..267097c 100644
--- a/apps/web/src/server/service/email-service.ts
+++ b/apps/web/src/server/service/email-service.ts
@@ -8,16 +8,16 @@ export async function sendEmail(
) {
const { to, from, subject, text, html, teamId } = emailContent;
- const domains = await db.domain.findMany({ where: { teamId } });
-
const fromDomain = from.split("@")[1];
- if (!fromDomain) {
- throw new Error("From email is not valid");
- }
- const domain = domains.find((domain) => domain.name === fromDomain);
+ const domain = await db.domain.findFirst({
+ where: { teamId, name: fromDomain },
+ });
+
if (!domain) {
- throw new Error("Domain not found. Add domain to unsend first");
+ throw new Error(
+ "Domain of from email is wrong. Use the email verified by unsend"
+ );
}
if (domain.status !== "SUCCESS") {
diff --git a/packages/ui/code-theme.ts b/packages/ui/code-theme.ts
new file mode 100644
index 0000000..acc9bf7
--- /dev/null
+++ b/packages/ui/code-theme.ts
@@ -0,0 +1,148 @@
+const codeTheme: {
+ [key: string]: React.CSSProperties;
+} = {
+ hljs: {
+ display: "block",
+ overflowX: "auto",
+ padding: "0.5em",
+ background: "#070808",
+ color: "#d6deeb",
+ },
+ "hljs-keyword": {
+ color: "#c792ea",
+ fontStyle: "italic",
+ },
+ "hljs-built_in": {
+ color: "#addb67",
+ fontStyle: "italic",
+ },
+ "hljs-type": {
+ color: "#82aaff",
+ },
+ "hljs-literal": {
+ color: "#ff5874",
+ },
+ "hljs-number": {
+ color: "#F78C6C",
+ },
+ "hljs-regexp": {
+ color: "#5ca7e4",
+ },
+ "hljs-string": {
+ color: "#ecc48d",
+ },
+ "hljs-subst": {
+ color: "#d3423e",
+ },
+ "hljs-symbol": {
+ color: "#82aaff",
+ },
+ "hljs-class": {
+ color: "#ffcb8b",
+ },
+ "hljs-function": {
+ color: "#82AAFF",
+ },
+ "hljs-title": {
+ color: "#DCDCAA",
+ fontStyle: "italic",
+ },
+ "hljs-params": {
+ color: "#7fdbca",
+ },
+ "hljs-comment": {
+ color: "#637777",
+ fontStyle: "italic",
+ },
+ "hljs-doctag": {
+ color: "#7fdbca",
+ },
+ "hljs-meta": {
+ color: "#82aaff",
+ },
+ "hljs-meta-keyword": {
+ color: "#82aaff",
+ },
+ "hljs-meta-string": {
+ color: "#ecc48d",
+ },
+ "hljs-section": {
+ color: "#82b1ff",
+ },
+ "hljs-tag": {
+ color: "#7fdbca",
+ },
+ "hljs-name": {
+ color: "#7fdbca",
+ },
+ "hljs-builtin-name": {
+ color: "#7fdbca",
+ },
+ "hljs-attr": {
+ color: "#7fdbca",
+ },
+ "hljs-attribute": {
+ color: "#80cbc4",
+ },
+ "hljs-variable": {
+ color: "#addb67",
+ },
+ "hljs-bullet": {
+ color: "#d9f5dd",
+ },
+ "hljs-code": {
+ color: "#80CBC4",
+ },
+ "hljs-emphasis": {
+ color: "#c792ea",
+ fontStyle: "italic",
+ },
+ "hljs-strong": {
+ color: "#addb67",
+ fontWeight: "bold",
+ },
+ "hljs-formula": {
+ color: "#c792ea",
+ },
+ "hljs-link": {
+ color: "#ff869a",
+ },
+ "hljs-quote": {
+ color: "#697098",
+ fontStyle: "italic",
+ },
+ "hljs-selector-tag": {
+ color: "#ff6363",
+ },
+ "hljs-selector-id": {
+ color: "#fad430",
+ },
+ "hljs-selector-class": {
+ color: "#addb67",
+ fontStyle: "italic",
+ },
+ "hljs-selector-attr": {
+ color: "#c792ea",
+ fontStyle: "italic",
+ },
+ "hljs-selector-pseudo": {
+ color: "#c792ea",
+ fontStyle: "italic",
+ },
+ "hljs-template-tag": {
+ color: "#c792ea",
+ },
+ "hljs-template-variable": {
+ color: "#addb67",
+ },
+ "hljs-addition": {
+ color: "#addb67ff",
+ fontStyle: "italic",
+ },
+ "hljs-deletion": {
+ color: "#EF535090",
+ fontStyle: "italic",
+ },
+};
+
+export default codeTheme;
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 89d9776..1a1169d 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -15,6 +15,7 @@
"@types/node": "^20.11.24",
"@types/react": "^18.2.61",
"@types/react-dom": "^18.2.19",
+ "@types/react-syntax-highlighter": "^15.5.11",
"@unsend/eslint-config": "workspace:*",
"@unsend/tailwind-config": "workspace:*",
"@unsend/typescript-config": "workspace:*",
@@ -32,12 +33,14 @@
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-switch": "^1.0.3",
+ "@radix-ui/react-tabs": "^1.0.4",
"add": "^2.0.6",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.0",
"lucide-react": "^0.359.0",
"next-themes": "^0.3.0",
"pnpm": "^8.15.5",
+ "react-syntax-highlighter": "^15.5.0",
"sonner": "^1.4.41",
"tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7"
diff --git a/packages/ui/src/code.tsx b/packages/ui/src/code.tsx
new file mode 100644
index 0000000..5c282f4
--- /dev/null
+++ b/packages/ui/src/code.tsx
@@ -0,0 +1,97 @@
+import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
+import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
+import ruby from "react-syntax-highlighter/dist/esm/languages/hljs/ruby";
+import php from "react-syntax-highlighter/dist/esm/languages/hljs/php";
+import python from "react-syntax-highlighter/dist/esm/languages/hljs/python";
+// import { nightOwl } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import codeTheme from "../code-theme";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs";
+import { Button } from "./button";
+import { ClipboardCopy, Check } from "lucide-react";
+import { useState } from "react";
+
+type Language = "js" | "ruby" | "php" | "python";
+
+type CodeProps = {
+ codeBlocks: {
+ language: Language;
+ code: string;
+ display?: string;
+ }[];
+};
+
+SyntaxHighlighter.registerLanguage("js", js);
+SyntaxHighlighter.registerLanguage("ruby", ruby);
+SyntaxHighlighter.registerLanguage("php", php);
+SyntaxHighlighter.registerLanguage("python", python);
+
+export const Code: React.FC = ({ codeBlocks }) => {
+ const [selectedTab, setSelectedTab] = useState(
+ codeBlocks[0]?.language ?? "js"
+ );
+ const [isCopied, setIsCopied] = useState(false);
+
+ const copyToClipboard = async (code: string) => {
+ try {
+ await navigator.clipboard.writeText(code);
+ setIsCopied(true);
+ setTimeout(() => setIsCopied(false), 2000); // Reset the icon back to clipboard after 2 seconds
+ } catch (err) {
+ alert("Failed to copy code");
+ }
+ };
+
+ return (
+
+
setSelectedTab(val as Language)}
+ >
+
+
+
+ {codeBlocks.map((block) => (
+
+ {block.language}
+
+ ))}
+
+
+
+
+
+ {block.code}
+
+
+
+ ))}
+
+