From 1a42a76b6c3930f4887d07a2ee2f6800c07a68ec Mon Sep 17 00:00:00 2001 From: sajadevo Date: Fri, 3 Jan 2025 19:01:14 +0430 Subject: [PATCH] integrate resend --- app/components/contact.tsx | 35 +++++++++++++++++----------------- components/email-template.tsx | 17 +++++++++++++++++ lib/actions.ts | 36 +++++++++++++++++++++++++++++++++++ package.json | 3 ++- tsconfig.json | 3 +-- 5 files changed, 73 insertions(+), 21 deletions(-) create mode 100644 components/email-template.tsx create mode 100644 lib/actions.ts diff --git a/app/components/contact.tsx b/app/components/contact.tsx index 0bafb85..b9f9be9 100644 --- a/app/components/contact.tsx +++ b/app/components/contact.tsx @@ -13,6 +13,9 @@ import { z } from "zod"; import { cn } from "@/lib/utils"; import { zodResolver } from "@hookform/resolvers/zod"; +// @actions +import { sendInquiry } from "@/lib/actions"; + const formSchema = z.object({ name: z.string().min(3, { message: "Name must be at least 3 characters long", @@ -47,26 +50,22 @@ export function Contact() { async function onSubmit(values: z.infer) { setIsLoading(true); - const formData = new FormData(); - - formData.append("name", values.name); - formData.append("email", values.email); - formData.append("message", values.message); + const response = await sendInquiry(values); - // if (response.status === 200) { - // reset(); - // setError(null); - // setIsSuccess(true); - // setIsLoading(false); + if (response.sent) { + reset(); + setError(null); + setIsSuccess(true); + setIsLoading(false); - // setTimeout(() => { - // setIsSuccess(false); - // }, 3000); - // } else { - // setIsLoading(false); - // setIsSuccess(false); - // setError(response.message); - // } + setTimeout(() => { + setIsSuccess(false); + }, 3000); + } else { + setIsLoading(false); + setIsSuccess(false); + setError("Could not send message. Please try again later."); + } } return ( diff --git a/components/email-template.tsx b/components/email-template.tsx new file mode 100644 index 0000000..0957128 --- /dev/null +++ b/components/email-template.tsx @@ -0,0 +1,17 @@ +export function EmailTemplate({ + name, + email, + message, +}: { + name: string; + email: string; + message: string; +}) { + return ( +
+

Name: {name}

+

Email: {email}

+

Message: {message}

+
+ ); +} diff --git a/lib/actions.ts b/lib/actions.ts new file mode 100644 index 0000000..4acc01c --- /dev/null +++ b/lib/actions.ts @@ -0,0 +1,36 @@ +"use server"; + +// @components +import { EmailTemplate } from "@/components/email-template"; + +// @utils +import { Resend } from "resend"; + +const resend = new Resend(process.env.RESEND_API_KEY); + +export async function sendInquiry({ + name, + email, + message, +}: { + name: string; + email: string; + message: string; +}) { + try { + const { error } = await resend.emails.send({ + from: process.env.RESEND_FROM_EMAIL!, + to: [process.env.RESEND_TO_EMAIL!], + subject: "New Inquiry from sajadevo.com", + react: EmailTemplate({ name, email, message }), + }); + + if (error) { + return { error: error.message, sent: false }; + } + + return { error: null, sent: true }; + } catch (error: any) { + throw new Error(error.message); + } +} diff --git a/package.json b/package.json index 780f11b..f805094 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "dependencies": { "@hookform/resolvers": "3.9.1", - "@radix-ui/react-tooltip": "^1.1.6", + "@radix-ui/react-tooltip": "1.1.6", "@tailwindcss/postcss": "next", "clsx": "2.1.1", "lucide-react": "0.469.0", @@ -24,6 +24,7 @@ "react-dom": "19.0.0", "react-fast-marquee": "1.6.5", "react-hook-form": "7.54.1", + "resend": "4.0.1", "tailwind-merge": "2.5.5", "zod": "3.24.1" }, diff --git a/tsconfig.json b/tsconfig.json index 7b28449..d8b9323 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,8 +19,7 @@ } ], "paths": { - "@/*": ["./*"], - "@payload-config": ["./payload.config.ts"] + "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],