From f41084d8fba209ed4d642bf39cf8e5c0e50ef7f2 Mon Sep 17 00:00:00 2001
From: mde3 <mabiorduom012@gmail.com>
Date: Thu, 12 Dec 2024 15:46:18 +0300
Subject: [PATCH 1/4] feat: added validation on forms

---
 apps/website/package.json                     |  5 +-
 .../src/app/partners/businesses/page.tsx      | 45 +--------
 .../src/app/partners/couriers/page.tsx        | 42 +-------
 .../src/app/partners/suppliers/page.tsx       | 44 +--------
 apps/website/src/components/shared/Form.tsx   | 98 ++++++++++++++-----
 apps/website/src/components/shared/index.tsx  |  1 +
 .../shared/partners/PartnerBusiness.tsx       | 72 ++++++++++++++
 .../shared/partners/PartnerCourier.tsx        | 76 ++++++++++++++
 .../shared/partners/PartnerSupplier.tsx       | 79 +++++++++++++++
 .../src/components/shared/partners/index.tsx  |  3 +
 .../src/components/shared/partners/type.ts    |  4 +
 apps/website/src/lib/schema.tsx               | 32 ++++++
 12 files changed, 350 insertions(+), 151 deletions(-)
 create mode 100644 apps/website/src/components/shared/partners/PartnerBusiness.tsx
 create mode 100644 apps/website/src/components/shared/partners/PartnerCourier.tsx
 create mode 100644 apps/website/src/components/shared/partners/PartnerSupplier.tsx
 create mode 100644 apps/website/src/components/shared/partners/index.tsx
 create mode 100644 apps/website/src/components/shared/partners/type.ts
 create mode 100644 apps/website/src/lib/schema.tsx

diff --git a/apps/website/package.json b/apps/website/package.json
index e198b747..bf318588 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -9,14 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.1",
     "@sahil/configs": "*",
     "daisyui": "^4.12.2",
     "eslint-config-next": "^14.2.3",
     "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
     "tailwind-merge": "^2.1.0",
-    "ui": "*"
+    "ui": "*",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/apps/website/src/app/partners/businesses/page.tsx b/apps/website/src/app/partners/businesses/page.tsx
index c19f7425..6eb0d1c4 100644
--- a/apps/website/src/app/partners/businesses/page.tsx
+++ b/apps/website/src/app/partners/businesses/page.tsx
@@ -1,5 +1,4 @@
-import { Input, PartnerTitle } from "@/components/shared";
-import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { PartnerBusiness, PartnerTitle } from "@/components/shared";
 
 export const metadata = {
   title: "Partners - Sahil App",
@@ -15,47 +14,7 @@ export default function BusinessesPage() {
           title="Businesses"
           description="Join 100+ businesses (retailers) working with Sahil. Work with trusted suppliers to reduce costs and focus on serving your customers"
         />
-        <form>
-          <div className="flex flex-col space-y-8">
-            <Input 
-              type="text"
-              label="Name"
-              placeholder="John Doe"
-              required={true}
-            />
-            <div className="grid md:grid-cols-2 gap-3">
-              <Input 
-                type="email"
-                label="Email"
-                placeholder="johndoe@gmail.com"
-                required={true}
-              />
-              <Input 
-                type="phone"
-                label="Phone Number (optional)"
-                placeholder="070*****00"
-                required={false}
-              />
-            </div>
-            <Input 
-              type="text"
-              label="Company Name"
-              placeholder="Sunset Restaurant"
-              required={true}
-            />
-          </div>
-          <div className="buttonss mt-8 flex items-center md:justify-end">
-            <button
-              type="submit" 
-              className="group btn btn-primary font-medium text-white rounded-full" 
-            >
-              Submit
-              <span className="relative group flex justify-center items-center rounded-full">
-                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
-              </span>
-            </button>
-          </div>
-        </form>
+        <PartnerBusiness />
       </div>
     </>
   );
diff --git a/apps/website/src/app/partners/couriers/page.tsx b/apps/website/src/app/partners/couriers/page.tsx
index cb886f90..e7b12c4b 100644
--- a/apps/website/src/app/partners/couriers/page.tsx
+++ b/apps/website/src/app/partners/couriers/page.tsx
@@ -1,5 +1,4 @@
-import { Input, PartnerTitle, Select } from "@/components/shared";
-import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { PartnerCourier, PartnerSupplier, PartnerTitle } from "@/components/shared";
 
 export const metadata = {
   title: "Partners - Sahil App",
@@ -15,44 +14,7 @@ export default function CouriersPage() {
           title="Couriers"
           description="Become a courier rider at Sahil, delivery goods and packages from suppliers to businesses or directly to consumers."
         />
-        <form>
-          <div className="flex flex-col space-y-8">
-            <Input 
-              type="text"
-              label="Name"
-              placeholder="John Doe"
-              required={true}
-            />
-            <div className="grid md:grid-cols-2 gap-3">
-              <Input 
-                type="email"
-                label="Email"
-                placeholder="johndoe@gmail.com"
-                required={true}
-              />
-              <Input 
-                type="phone"
-                label="Phone Number (optional)"
-                placeholder="070*****00"
-                required={false}
-              />
-            </div>
-            <Select 
-              label="Do you own a vehicle?"
-            />
-          </div>
-          <div className="buttonss mt-8 flex items-center md:justify-end">
-            <button
-              type="submit" 
-              className="group btn btn-primary font-medium text-white rounded-full" 
-            >
-              Submit
-              <span className="relative group flex justify-center items-center rounded-full">
-                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
-              </span>
-            </button>
-          </div>
-        </form>
+        <PartnerCourier />
       </div>
     </>
   );
diff --git a/apps/website/src/app/partners/suppliers/page.tsx b/apps/website/src/app/partners/suppliers/page.tsx
index e789e990..932c31ce 100644
--- a/apps/website/src/app/partners/suppliers/page.tsx
+++ b/apps/website/src/app/partners/suppliers/page.tsx
@@ -1,5 +1,4 @@
-import { Input, PartnerTitle, TextArea } from "@/components/shared";
-import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { PartnerCourier, PartnerSupplier, PartnerTitle } from "@/components/shared";
 
 export const metadata = {
   title: "Partners - Sahil App",
@@ -15,46 +14,7 @@ export default function SuppliersPage() {
           title="Suppliers"
           description="Join 15+ suppliers (manufacturers) and expand your market reach. Access a diverse network of businesses and streamline your sales"
         />
-        <form>
-          <div className="flex flex-col space-y-8">
-            <Input 
-              type="text"
-              label="Name"
-              placeholder="John Doe"
-              required={true}
-            />
-            <div className="grid md:grid-cols-2 gap-3">
-              <Input 
-                type="email"
-                label="Email"
-                placeholder="johndoe@gmail.com"
-                required={true}
-              />
-              <Input 
-                type="phone"
-                label="Phone Number (optional)"
-                placeholder="070*****00"
-                required={false}
-              />
-            </div>
-            <TextArea 
-              label="What supplies do you have?"
-              placeholder="Crates of soft drinks, fresh vegetables..."
-              required={true}
-            />
-          </div>
-          <div className="buttonss mt-8 flex items-center md:justify-end">
-            <button
-              type="submit" 
-              className="group btn btn-primary font-medium text-white rounded-full" 
-            >
-              Submit
-              <span className="relative group flex justify-center items-center rounded-full">
-                <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
-              </span>
-            </button>
-          </div>
-        </form>
+        <PartnerSupplier />
       </div>
     </>
   );
diff --git a/apps/website/src/components/shared/Form.tsx b/apps/website/src/components/shared/Form.tsx
index 6c97d84d..f2f77ff4 100644
--- a/apps/website/src/components/shared/Form.tsx
+++ b/apps/website/src/components/shared/Form.tsx
@@ -1,57 +1,105 @@
+import React from 'react';
+import { 
+  UseFormRegister, 
+  FieldErrors, 
+  FieldValues, 
+  Path 
+} from 'react-hook-form';
 
-interface InputProps {
+// Generic type constrained to FieldValues
+interface BaseInputProps<TFieldValues extends FieldValues> {
   label: string;
   placeholder: string;
-  type: string;
-  required: boolean;
+  register: UseFormRegister<TFieldValues>;
+  errors: FieldErrors<TFieldValues>;
+  name: Path<TFieldValues>;
+  type?: string;
 }
 
-interface TextAreaProps {
+interface SelectProps<TFieldValues extends FieldValues> {
   label: string;
-  placeholder: string;
-  required: boolean;
+  name: Path<TFieldValues>;
+  register: UseFormRegister<TFieldValues>;
+  errors: FieldErrors<TFieldValues>;
+  options: { value: string; label: string }[];
 }
 
-interface SelectProps {
-  label: string;
-}
-
-export const Input = ({ label, placeholder, type, required }: InputProps) => {
+export const Input = <TFieldValues extends FieldValues>({ 
+  label, 
+  placeholder, 
+  register, 
+  errors, 
+  name, 
+  type = 'text'
+}: BaseInputProps<TFieldValues>) => {
   return (
     <div>
-      <label htmlFor={label} className="label text-sm p-0 mb-2 font-medium">{label}</label>
+      <label htmlFor={name} className="label text-sm p-0 mb-2 font-medium">{label}</label>
       <input 
         type={type}
         placeholder={placeholder} 
-        required={required}
-        className="input input-bordered border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300" 
+        {...register(name)}
+        className={`input input-bordered border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300 ${errors[name] ? 'input-error' : ''}`}
       />
+      {errors[name] && (
+        <p className="mt-1 text-red-700 text-sm">
+          {errors[name]?.message as string}
+        </p>
+      )}
     </div>
   );
 };
 
-export const TextArea = ({ label, placeholder, required }: TextAreaProps) => {
+export const TextArea = <TFieldValues extends FieldValues>({ 
+  label, 
+  placeholder, 
+  register, 
+  errors, 
+  name
+}: BaseInputProps<TFieldValues>) => {
   return (
     <div>
-      <label htmlFor={label} className="label text-sm p-0 mb-2 font-medium">{label}</label>
+      <label htmlFor={name} className="label text-sm p-0 mb-2 font-medium">{label}</label>
       <textarea 
         placeholder={placeholder} 
-        required={required}
-        className="textarea textarea-bordered h-28 resize-none border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300" 
+        {...register(name)}
+        className={`textarea textarea-bordered h-28 resize-none border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300 ${errors[name] ? 'textarea-error' : ''}`}
       />
+      {errors[name] && (
+        <p className="mt-1 text-red-700 text-sm">
+          {errors[name]?.message as string}
+        </p>
+      )}
     </div>
   );
 };
 
-export const Select = ({ label }: SelectProps) => {
+export const Select = <TFieldValues extends FieldValues>({ 
+  label, 
+  name, 
+  register, 
+  errors, 
+  options 
+}: SelectProps<TFieldValues>) => {
   return (
     <div>
-      <label htmlFor={label} className="label text-sm p-0 mb-2 font-medium">{label}</label>
-      <select className="select select-bordered border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300 required">
-        <option disabled selected>Select</option>
-        <option>Yes</option>
-        <option>No</option>
+      <label htmlFor={name} className="label text-sm p-0 mb-2 font-medium">{label}</label>
+      <select 
+        {...register(name)}
+        className={`select select-bordered border border-gray-200 w-full text-sm outline-none focus:outline-none focus:border-gray-300 ${errors[name] ? 'select-error' : ''}`}
+      >
+        <option value="" disabled>Select</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
       </select>
+      {errors[name] && (
+        <p className="mt-1 text-red-700 text-sm">
+          {errors[name]?.message as string}
+        </p>
+      )}
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/apps/website/src/components/shared/index.tsx b/apps/website/src/components/shared/index.tsx
index a87403aa..72981513 100644
--- a/apps/website/src/components/shared/index.tsx
+++ b/apps/website/src/components/shared/index.tsx
@@ -8,3 +8,4 @@ export * from "./Form";
 export * from "./JourneySection";
 export * from "./ContactCard";
 export * from "./PartnerCard";
+export * from "./partners";
diff --git a/apps/website/src/components/shared/partners/PartnerBusiness.tsx b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
new file mode 100644
index 00000000..3a62652a
--- /dev/null
+++ b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
@@ -0,0 +1,72 @@
+"use client";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { formSchema } from "@/lib/schema";
+import { Input } from "../Form";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { FormInputType } from "./type";
+
+export const PartnerBusiness = () => {
+  const {
+    register, 
+    handleSubmit, 
+    reset, 
+    formState: {errors}
+  } = useForm<FormInputType>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const onSubmit: SubmitHandler<FormInputType> = data => {
+    console.log(data)
+    reset()
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col space-y-8">
+        <Input 
+          label="Name"
+          name="name" 
+          register={register}
+          placeholder="John Doe"
+          errors={errors}
+        />
+        <div className="grid md:grid-cols-2 gap-3">
+          <Input 
+            label="Email"
+            name="email" 
+            register={register}
+            placeholder="johndoe@gmail.com"
+            errors={errors}
+          />
+          <Input 
+            label="Phone Number"
+            name="phoneNumber" 
+            type="number"
+            register={register}
+            placeholder="070*****00"
+            errors={errors}
+          />
+        </div>
+        <Input 
+          label="Company Name"
+          name="companyName" 
+          register={register}
+          placeholder="Sunset Restaurant"
+          errors={errors}
+        />
+      </div>
+      <div className="mt-8 flex items-center md:justify-end">
+        <button
+          type="submit" 
+          className="group btn btn-primary font-medium text-white rounded-full" 
+        >
+          Submit
+          <span className="relative group flex justify-center items-center rounded-full">
+            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/website/src/components/shared/partners/PartnerCourier.tsx b/apps/website/src/components/shared/partners/PartnerCourier.tsx
new file mode 100644
index 00000000..e3f122ed
--- /dev/null
+++ b/apps/website/src/components/shared/partners/PartnerCourier.tsx
@@ -0,0 +1,76 @@
+"use client";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { formSchema, mappedVehicleStatuses } from "@/lib/schema";
+import { Input, Select } from "../Form";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { FormInputType } from "./type";
+
+export const PartnerCourier = () => {
+  const {
+    register, 
+    handleSubmit, 
+    reset, 
+    formState: {errors}
+  } = useForm<FormInputType>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const vehicleStatusOptions = Object.entries(mappedVehicleStatuses).map(
+    ([value, label]) => ({ value, label })
+  )
+
+  const onSubmit: SubmitHandler<FormInputType> = data => {
+    console.log(data)
+    reset()
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col space-y-8">
+        <Input 
+          label="Name"
+          name="name" 
+          register={register}
+          placeholder="John Doe"
+          errors={errors}
+        />
+        <div className="grid md:grid-cols-2 gap-3">
+          <Input 
+            label="Email"
+            name="email" 
+            register={register}
+            placeholder="johndoe@gmail.com"
+            errors={errors}
+          />
+          <Input 
+            label="Phone Number"
+            name="phoneNumber" 
+            type="number"
+            register={register}
+            placeholder="070*****00"
+            errors={errors}
+          />
+        </div>
+        <Select 
+          label="Do you own a vehicle?"
+          name="vehicleStatus"
+          register={register}
+          errors={errors}
+          options={vehicleStatusOptions}
+        />
+      </div>
+      <div className="mt-8 flex items-center md:justify-end">
+        <button
+          type="submit" 
+          className="group btn btn-primary font-medium text-white rounded-full" 
+        >
+          Submit
+          <span className="relative group flex justify-center items-center rounded-full">
+            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/website/src/components/shared/partners/PartnerSupplier.tsx b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
new file mode 100644
index 00000000..f65bfc44
--- /dev/null
+++ b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { formSchema } from "@/lib/schema";
+import { Input, TextArea } from "../Form";
+import { HiOutlineArrowUpRight } from "react-icons/hi2";
+import { FormInputType } from "./type";
+
+export const PartnerSupplier = () => {
+  const {
+    register, 
+    handleSubmit, 
+    reset, 
+    formState: {errors}
+  } = useForm<FormInputType>({
+    resolver: zodResolver(formSchema),
+  })
+
+  const onSubmit: SubmitHandler<FormInputType> = data => {
+    console.log(data)
+    reset()
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex flex-col space-y-8">
+        <Input 
+          label="Name"
+          name="name" 
+          register={register}
+          placeholder="John Doe"
+          errors={errors}
+        />
+        <div className="grid md:grid-cols-2 gap-3">
+          <Input 
+            label="Email"
+            name="email" 
+            register={register}
+            placeholder="johndoe@gmail.com"
+            errors={errors}
+          />
+          <Input 
+            label="Phone Number"
+            name="phoneNumber" 
+            type="number"
+            register={register}
+            placeholder="070*****00"
+            errors={errors}
+          />
+        </div>
+        <Input 
+          label="Company Name"
+          name="companyName" 
+          register={register}
+          placeholder="John's Supplies Ltd."
+          errors={errors}
+        />
+        <TextArea 
+          label="What supplies do you have?"
+          name="supplyDetails" 
+          placeholder="Eggs, soft drinks, milk..."
+          register={register}
+          errors={errors}
+        />
+      </div>
+      <div className="mt-8 flex items-center md:justify-end">
+        <button
+          type="submit" 
+          className="group btn btn-primary font-medium text-white rounded-full" 
+        >
+          Submit
+          <span className="relative group flex justify-center items-center rounded-full">
+            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          </span>
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/website/src/components/shared/partners/index.tsx b/apps/website/src/components/shared/partners/index.tsx
new file mode 100644
index 00000000..efa84535
--- /dev/null
+++ b/apps/website/src/components/shared/partners/index.tsx
@@ -0,0 +1,3 @@
+export * from "./PartnerBusiness";
+export * from "./PartnerSupplier";
+export * from "./PartnerCourier";
\ No newline at end of file
diff --git a/apps/website/src/components/shared/partners/type.ts b/apps/website/src/components/shared/partners/type.ts
new file mode 100644
index 00000000..bb1ba399
--- /dev/null
+++ b/apps/website/src/components/shared/partners/type.ts
@@ -0,0 +1,4 @@
+import { formSchema } from "@/lib/schema";
+import { z } from "zod";
+
+export type FormInputType = z.infer<typeof formSchema>
diff --git a/apps/website/src/lib/schema.tsx b/apps/website/src/lib/schema.tsx
new file mode 100644
index 00000000..dd32f570
--- /dev/null
+++ b/apps/website/src/lib/schema.tsx
@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+const phoneRegex = new RegExp(
+  /^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-9])+$/
+);
+
+//array for select elements
+export const vehicleStatuses = [
+  'yes',
+  'no',
+] as const
+
+export type VehicleStatus = typeof vehicleStatuses[number]
+
+export const mappedVehicleStatuses: { [key in VehicleStatus]: string } = {
+  yes: 'Yes',
+  no: 'No',
+}
+
+export const formSchema = z.object({
+  name: z.string().min(3, 'Must be at least 3 characters'),
+  email: z.string().email({message: "Email is required",}),
+  phoneNumber: z.string().regex(phoneRegex, 'Phone number is required'),
+  companyName: z.string().min(3, 'Must be at least 3 characters'),
+  vehicleStatus: z.enum(vehicleStatuses, {
+    errorMap: () => ({ message: 'Please select your vehicle status' }),
+  }),
+  supplyDetails: z
+  .string()
+  .min(3, {message: 'Must be at least 3 characters'})
+  .max(250, {message: 'Must not exceed 250 characters'}),
+});

From 292b00238d8982525abf58c562263e80f7b6eb7a Mon Sep 17 00:00:00 2001
From: mde3 <mabiorduom012@gmail.com>
Date: Thu, 12 Dec 2024 17:40:50 +0300
Subject: [PATCH 2/4] feat: added resend & email.js on forms

---
 apps/website/.env.example                     |   5 +
 apps/website/package.json                     |   7 +-
 apps/website/src/app/_action.ts               |  35 +++++
 .../shared/partners/PartnerBusiness.tsx       |  99 ++++++++++++--
 .../shared/partners/PartnerCourier.tsx        |  99 ++++++++++++--
 .../shared/partners/PartnerSupplier.tsx       | 100 +++++++++++++--
 apps/website/src/emails/partners.tsx          | 121 ++++++++++++++++++
 7 files changed, 438 insertions(+), 28 deletions(-)
 create mode 100644 apps/website/.env.example
 create mode 100644 apps/website/src/app/_action.ts
 create mode 100644 apps/website/src/emails/partners.tsx

diff --git a/apps/website/.env.example b/apps/website/.env.example
new file mode 100644
index 00000000..ece96e2b
--- /dev/null
+++ b/apps/website/.env.example
@@ -0,0 +1,5 @@
+RESEND_API_KEY=
+RESEND_FROM_EMAIL=
+NEXT_PUBLIC_SERVICE_ID=
+NEXT_PUBLIC_TEMPLATE_ID_BUSINESS=
+NEXT_PUBLIC_PUBLIC_KEY=
diff --git a/apps/website/package.json b/apps/website/package.json
index bf318588..264ad65a 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -6,10 +6,13 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "email": "email dev --dir src/emails"
   },
   "dependencies": {
+    "@emailjs/browser": "^4.4.1",
     "@hookform/resolvers": "^3.9.1",
+    "@react-email/components": "^0.0.30",
     "@sahil/configs": "*",
     "daisyui": "^4.12.2",
     "eslint-config-next": "^14.2.3",
@@ -17,6 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
+    "resend": "^4.0.1",
     "tailwind-merge": "^2.1.0",
     "ui": "*",
     "zod": "^3.23.8"
@@ -29,6 +33,7 @@
     "eslint": "^8",
     "eslint-config-next": "^14.2.3",
     "postcss": "^8",
+    "react-email": "3.0.3",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }
diff --git a/apps/website/src/app/_action.ts b/apps/website/src/app/_action.ts
new file mode 100644
index 00000000..6b51ba72
--- /dev/null
+++ b/apps/website/src/app/_action.ts
@@ -0,0 +1,35 @@
+"use server";
+import { z } from "zod";
+import { Resend } from "resend";
+import { formSchema } from "@/lib/schema";
+import PartnerEmail from "@/emails/partners";
+
+type Inputs = z.infer<typeof formSchema>
+
+const resend = new Resend(process.env.RESEND_API_KEY)
+
+export async function sendEmail(data: Inputs) {
+  const result = formSchema.safeParse(data)
+
+  if (result.success) {
+    const { name, email } = result.data
+    try {
+      const data = await resend.emails.send({
+        // from: `Sahil <${process.env.RESEND_FROM_EMAIL}>`,
+        from: 'Sahil <onboarding@resend.dev>',
+        // to: [email],
+        to: ['mabiorduom5@gmail.com'],
+        subject: 'Partnering with Sahil',
+        text: `Name: ${name}\nEmail: ${email}`,
+        react: PartnerEmail({ name })
+      })
+      return { success: true, data }
+    } catch (error) {
+      return { success: false, error }
+    }
+  }
+
+  if (result.error) {
+    return { success: false, error: result.error.format() }
+  }
+}
diff --git a/apps/website/src/components/shared/partners/PartnerBusiness.tsx b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
index 3a62652a..62daa1b2 100644
--- a/apps/website/src/components/shared/partners/PartnerBusiness.tsx
+++ b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
@@ -1,24 +1,85 @@
 "use client";
+import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { formSchema } from "@/lib/schema";
 import { Input } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
+import { sendEmail } from "@/app/_action";
+import emailjs from '@emailjs/browser';
 
 export const PartnerBusiness = () => {
   const {
     register, 
     handleSubmit, 
     reset, 
-    formState: {errors}
+    formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
     resolver: zodResolver(formSchema),
   })
+  
+  const [submissionStatus, setSubmissionStatus] = useState<{
+    type: 'success' | 'error' | null;
+    message: string;
+  }>({
+    type: null,
+    message: ''
+  });
 
-  const onSubmit: SubmitHandler<FormInputType> = data => {
-    console.log(data)
-    reset()
+  // onSubmit function that takes 2 functions
+  const onSubmit: SubmitHandler<FormInputType> = async data => {
+    setSubmissionStatus({ type: null, message: '' });
+
+    try {
+      // first, send email via Resend
+      const resendResult = await sendEmail(data);
+      // then, send email via Email.js
+      const emailJsResult = await sendEmailViaEmailJs(data);
+
+      if (resendResult?.success && emailJsResult) {
+        setSubmissionStatus({
+          type: 'success',
+          message: 'Message sent successfully!'
+        });
+        reset();
+        return;
+      }
+
+      setSubmissionStatus({
+        type: 'error',
+        message: 'Error sending message. Please try again.'
+      });
+    } catch (error) {
+      setSubmissionStatus({
+        type: 'error',
+        message: 'An unexpected error occurred.'
+      });
+    }
+  }
+
+  // helper function to send email via Email.js
+  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
+    try {
+      await emailjs.send(
+        process.env.NEXT_PUBLIC_SERVICE_ID!,
+        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
+        {
+          // map form data to Email.js template fields
+          user_name: data.name,
+          user_email: data.email,
+          user_phone: data.phoneNumber.toString(),
+          user_company: data.companyName,
+        },
+        {
+          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
+        }
+      );
+      return true;
+    } catch (error) {
+      console.error('Email.js send error:', error);
+      return false;
+    }
   }
 
   return (
@@ -56,14 +117,34 @@ export const PartnerBusiness = () => {
           errors={errors}
         />
       </div>
+      {submissionStatus.type && (
+        <div 
+          className={`
+            p-4 rounded-md my-4
+            ${submissionStatus.type === 'success' 
+              ? 'bg-green-100 text-green-800' 
+              : 'bg-red-100 text-red-800'}
+          `}
+        >
+          {submissionStatus.message}
+        </div>
+      )}
       <div className="mt-8 flex items-center md:justify-end">
         <button
-          type="submit" 
-          className="group btn btn-primary font-medium text-white rounded-full" 
+          type="submit"
+          disabled={isSubmitting}
+          className={`
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            ${
+              isSubmitting
+                ? 'bg-gray-400 text-black cursor-not-allowed'
+                : 'bg-primary text-white hover:bg-secondary'
+            }
+          `}
         >
-          Submit
-          <span className="relative group flex justify-center items-center rounded-full">
-            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+          <span className="relative flex items-center justify-center rounded-full">
+            <HiOutlineArrowUpRight className={`transition-transform ${isSubmitting ? '' : 'group-hover:rotate-45'}`} />
           </span>
         </button>
       </div>
diff --git a/apps/website/src/components/shared/partners/PartnerCourier.tsx b/apps/website/src/components/shared/partners/PartnerCourier.tsx
index e3f122ed..0a6f537e 100644
--- a/apps/website/src/components/shared/partners/PartnerCourier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerCourier.tsx
@@ -1,28 +1,89 @@
 "use client";
+import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { formSchema, mappedVehicleStatuses } from "@/lib/schema";
 import { Input, Select } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
+import { sendEmail } from "@/app/_action";
+import emailjs from '@emailjs/browser';
 
 export const PartnerCourier = () => {
   const {
     register, 
     handleSubmit, 
     reset, 
-    formState: {errors}
+    formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
     resolver: zodResolver(formSchema),
   })
 
+  const [submissionStatus, setSubmissionStatus] = useState<{
+    type: 'success' | 'error' | null;
+    message: string;
+  }>({
+    type: null,
+    message: ''
+  });
+
   const vehicleStatusOptions = Object.entries(mappedVehicleStatuses).map(
     ([value, label]) => ({ value, label })
   )
 
-  const onSubmit: SubmitHandler<FormInputType> = data => {
-    console.log(data)
-    reset()
+  // onSubmit function that takes 2 functions
+  const onSubmit: SubmitHandler<FormInputType> = async data => {
+    setSubmissionStatus({ type: null, message: '' });
+
+    try {
+      // first, send email via Resend
+      const resendResult = await sendEmail(data);
+      // then, send email via Email.js
+      const emailJsResult = await sendEmailViaEmailJs(data);
+
+      if (resendResult?.success && emailJsResult) {
+        setSubmissionStatus({
+          type: 'success',
+          message: 'Message sent successfully!'
+        });
+        reset();
+        return;
+      }
+
+      setSubmissionStatus({
+        type: 'error',
+        message: 'Error sending message. Please try again.'
+      });
+    } catch (error) {
+      setSubmissionStatus({
+        type: 'error',
+        message: 'An unexpected error occurred.'
+      });
+    }
+  }
+
+  // helper function to send email via Email.js
+  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
+    try {
+      await emailjs.send(
+        process.env.NEXT_PUBLIC_SERVICE_ID!,
+        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
+        {
+          // map form data to Email.js template fields
+          user_name: data.name,
+          user_email: data.email,
+          user_phone: data.phoneNumber.toString(),
+          user_message: `Vehicle Status: ${data.vehicleStatus}`
+        },
+        {
+          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
+        }
+      );
+      return true;
+    } catch (error) {
+      console.error('Email.js send error:', error);
+      return false;
+    }
   }
 
   return (
@@ -60,14 +121,34 @@ export const PartnerCourier = () => {
           options={vehicleStatusOptions}
         />
       </div>
+      {submissionStatus.type && (
+        <div 
+          className={`
+            p-4 rounded-md my-4
+            ${submissionStatus.type === 'success' 
+              ? 'bg-green-100 text-green-800' 
+              : 'bg-red-100 text-red-800'}
+          `}
+        >
+          {submissionStatus.message}
+        </div>
+      )}
       <div className="mt-8 flex items-center md:justify-end">
         <button
-          type="submit" 
-          className="group btn btn-primary font-medium text-white rounded-full" 
+          type="submit"
+          disabled={isSubmitting}
+          className={`
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            ${
+              isSubmitting
+                ? 'bg-gray-400 text-black cursor-not-allowed'
+                : 'bg-primary text-white hover:bg-secondary'
+            }
+          `}
         >
-          Submit
-          <span className="relative group flex justify-center items-center rounded-full">
-            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+          <span className="relative flex items-center justify-center rounded-full">
+            <HiOutlineArrowUpRight className={`transition-transform ${isSubmitting ? '' : 'group-hover:rotate-45'}`} />
           </span>
         </button>
       </div>
diff --git a/apps/website/src/components/shared/partners/PartnerSupplier.tsx b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
index f65bfc44..b7b9b445 100644
--- a/apps/website/src/components/shared/partners/PartnerSupplier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
@@ -1,24 +1,86 @@
 "use client";
+import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { formSchema } from "@/lib/schema";
 import { Input, TextArea } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
+import { sendEmail } from "@/app/_action";
+import emailjs from '@emailjs/browser';
 
 export const PartnerSupplier = () => {
   const {
     register, 
     handleSubmit, 
     reset, 
-    formState: {errors}
+    formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
     resolver: zodResolver(formSchema),
   })
 
-  const onSubmit: SubmitHandler<FormInputType> = data => {
-    console.log(data)
-    reset()
+  const [submissionStatus, setSubmissionStatus] = useState<{
+    type: 'success' | 'error' | null;
+    message: string;
+  }>({
+    type: null,
+    message: ''
+  });
+
+  // onSubmit function that takes 2 functions
+  const onSubmit: SubmitHandler<FormInputType> = async data => {
+    setSubmissionStatus({ type: null, message: '' });
+
+    try {
+      // first, send email via Resend
+      const resendResult = await sendEmail(data);
+      // then, send email via Email.js
+      const emailJsResult = await sendEmailViaEmailJs(data);
+
+      if (resendResult?.success && emailJsResult) {
+        setSubmissionStatus({
+          type: 'success',
+          message: 'Message sent successfully!'
+        });
+        reset();
+        return;
+      }
+
+      setSubmissionStatus({
+        type: 'error',
+        message: 'Error sending message. Please try again.'
+      });
+    } catch (error) {
+      setSubmissionStatus({
+        type: 'error',
+        message: 'An unexpected error occurred.'
+      });
+    }
+  }
+
+  // helper function to send email via Email.js
+  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
+    try {
+      await emailjs.send(
+        process.env.NEXT_PUBLIC_SERVICE_ID!,
+        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
+        {
+          // map form data to Email.js template fields
+          user_name: data.name,
+          user_email: data.email,
+          user_phone: data.phoneNumber.toString(),
+          user_company: data.companyName,
+          user_message: `Supply Details: ${data.supplyDetails}`
+        },
+        {
+          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
+        }
+      );
+      return true;
+    } catch (error) {
+      console.error('Email.js send error:', error);
+      return false;
+    }
   }
 
   return (
@@ -63,14 +125,34 @@ export const PartnerSupplier = () => {
           errors={errors}
         />
       </div>
+      {submissionStatus.type && (
+        <div 
+          className={`
+            p-4 rounded-md my-4
+            ${submissionStatus.type === 'success' 
+              ? 'bg-green-100 text-green-800' 
+              : 'bg-red-100 text-red-800'}
+          `}
+        >
+          {submissionStatus.message}
+        </div>
+      )}
       <div className="mt-8 flex items-center md:justify-end">
         <button
-          type="submit" 
-          className="group btn btn-primary font-medium text-white rounded-full" 
+          type="submit"
+          disabled={isSubmitting}
+          className={`
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            ${
+              isSubmitting
+                ? 'bg-gray-400 text-black cursor-not-allowed'
+                : 'bg-primary text-white hover:bg-secondary'
+            }
+          `}
         >
-          Submit
-          <span className="relative group flex justify-center items-center rounded-full">
-            <HiOutlineArrowUpRight className="group-hover:rotate-45 transition" />
+          {isSubmitting ? 'Submitting...' : 'Submit'}
+          <span className="relative flex items-center justify-center rounded-full">
+            <HiOutlineArrowUpRight className={`transition-transform ${isSubmitting ? '' : 'group-hover:rotate-45'}`} />
           </span>
         </button>
       </div>
diff --git a/apps/website/src/emails/partners.tsx b/apps/website/src/emails/partners.tsx
new file mode 100644
index 00000000..7fed2c3f
--- /dev/null
+++ b/apps/website/src/emails/partners.tsx
@@ -0,0 +1,121 @@
+import {
+  Body,
+  Container,
+  Column,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Row,
+  Section,
+  Text,
+  Tailwind,
+} from "@react-email/components";
+import * as React from "react";
+
+interface PartnerProps {
+  name: string;
+}
+
+export const PartnerEmail = ({
+  name,
+}: PartnerProps) => (
+  <Html>
+    <Head />
+    <Preview>
+      Your one-stop logistics platform.
+    </Preview>
+    <Tailwind>
+      <Body className="bg-white my-auto mx-auto font-sans px-2">
+        <Container className="bg-zinc-100 my-4 p-3 mx-auto max-w-2xl">
+          <Container className="bg-white border border-solid border-zinc-200 mx-auto px-8 py-4 max-w-2xl">
+            <Section>
+              <Img 
+                src="https://mabior7.github.io/logo/assets/img/logo.png" 
+                width="80" 
+                alt="Sahil App" 
+                className="my-0"
+              />
+            </Section>
+            <Section className="text-black">
+              <Text>
+                Hi {name},
+              </Text>
+              <Heading className="text-lg font-medium">
+                Your submission has been received! 
+              </Heading>
+              <Text>
+                Thank you for reaching out and expressing your interest in partnering with us. 
+                We are excited about the possibility of working and collaborating together. 
+              </Text>
+              <Text>
+                Our team will review the information you provided and promptly get back to you with the way forward. 
+              </Text>
+              <Text>
+                If your profile aligns with our goals, we will schedule an initial meeting to discuss potential opportunities 
+                and how we can support each other’s growth.
+              </Text>
+              <Text>
+                Regards,
+                <br />
+                Sahil team
+              </Text>
+            </Section>
+            <Text>
+              <Hr />
+            </Text>
+            <Section className="flex items-center">
+              <Column className="pr-4">
+                <Link 
+                  href="https://www.linkedin.com/company/sahil-app/" 
+                >
+                  <Img 
+                    src="https://mabior7.github.io/logo/assets/img/linkedin.png" 
+                    alt="LinkedIn" 
+                    width="16" 
+                    height="16" 
+                  />
+                </Link>
+              </Column>
+              <Column className="pr-4">
+                <Link 
+                  href="https://x.com/sahilhq/" 
+                >
+                  <Img 
+                    src="https://mabior7.github.io/logo/assets/img/twitter.png" 
+                    alt="twitter" 
+                    width="16" 
+                    height="16" 
+                  />
+                </Link>
+              </Column>
+              <Column className="pr-4">
+                <Link 
+                  href="https://www.instagram.com/sahil.connect/" 
+                >
+                  <Img 
+                    src="https://mabior7.github.io/logo/assets/img/instagram.png" 
+                    alt="LinkedIn" 
+                    width="16" 
+                    height="16" 
+                  />
+                </Link>
+              </Column>
+            </Section>
+            <Section>
+              <Text style={{ fontSize: "12px", color: "#8898aa" }}>
+                © 2024 Sahil – Company Ltd. All Rights Reserved. |
+                Norrsken House Kigali, 1 KN 78 St, Kigali-Rwanda
+              </Text>
+            </Section>
+          </Container>
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+);
+
+export default PartnerEmail;

From a70227677c18c3a72b642c9461349f63409075f5 Mon Sep 17 00:00:00 2001
From: mde3 <mabiorduom012@gmail.com>
Date: Tue, 17 Dec 2024 14:24:24 +0300
Subject: [PATCH 3/4] feat: added resend & email.js on forms

---
 apps/website/.env.example                     |  1 -
 apps/website/src/app/_action.ts               | 10 +++----
 .../shared/partners/PartnerBusiness.tsx       | 10 +++----
 .../shared/partners/PartnerCourier.tsx        |  8 +++---
 .../shared/partners/PartnerSupplier.tsx       |  4 +--
 .../src/components/shared/partners/type.ts    | 11 ++++++--
 apps/website/src/lib/schema.tsx               | 28 +++++++++++++------
 7 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/apps/website/.env.example b/apps/website/.env.example
index ece96e2b..324aa870 100644
--- a/apps/website/.env.example
+++ b/apps/website/.env.example
@@ -1,5 +1,4 @@
 RESEND_API_KEY=
-RESEND_FROM_EMAIL=
 NEXT_PUBLIC_SERVICE_ID=
 NEXT_PUBLIC_TEMPLATE_ID_BUSINESS=
 NEXT_PUBLIC_PUBLIC_KEY=
diff --git a/apps/website/src/app/_action.ts b/apps/website/src/app/_action.ts
index 6b51ba72..af5fe3c7 100644
--- a/apps/website/src/app/_action.ts
+++ b/apps/website/src/app/_action.ts
@@ -1,15 +1,13 @@
 "use server";
-import { z } from "zod";
 import { Resend } from "resend";
-import { formSchema } from "@/lib/schema";
+import { basePartnerSchema } from "@/lib/schema";
 import PartnerEmail from "@/emails/partners";
-
-type Inputs = z.infer<typeof formSchema>
+import { FormInputType } from "@/components/shared/partners/type";
 
 const resend = new Resend(process.env.RESEND_API_KEY)
 
-export async function sendEmail(data: Inputs) {
-  const result = formSchema.safeParse(data)
+export async function sendEmail(data: FormInputType) {
+  const result = basePartnerSchema.safeParse(data)
 
   if (result.success) {
     const { name, email } = result.data
diff --git a/apps/website/src/components/shared/partners/PartnerBusiness.tsx b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
index 62daa1b2..92752aa1 100644
--- a/apps/website/src/components/shared/partners/PartnerBusiness.tsx
+++ b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formSchema } from "@/lib/schema";
+import { businessPartnerSchema } from "@/lib/schema";
 import { Input } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
@@ -16,7 +16,7 @@ export const PartnerBusiness = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(businessPartnerSchema),
   })
   
   const [submissionStatus, setSubmissionStatus] = useState<{
@@ -134,11 +134,11 @@ export const PartnerBusiness = () => {
           type="submit"
           disabled={isSubmitting}
           className={`
-            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm text-white font-semibold transition-colors
             ${
               isSubmitting
-                ? 'bg-gray-400 text-black cursor-not-allowed'
-                : 'bg-primary text-white hover:bg-secondary'
+                ? 'bg-gray-400 cursor-not-allowed'
+                : 'bg-primary hover:bg-secondary'
             }
           `}
         >
diff --git a/apps/website/src/components/shared/partners/PartnerCourier.tsx b/apps/website/src/components/shared/partners/PartnerCourier.tsx
index 0a6f537e..bfb445cb 100644
--- a/apps/website/src/components/shared/partners/PartnerCourier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerCourier.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formSchema, mappedVehicleStatuses } from "@/lib/schema";
+import { courierPartnerSchema, mappedVehicleStatuses } from "@/lib/schema";
 import { Input, Select } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
@@ -16,7 +16,7 @@ export const PartnerCourier = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(courierPartnerSchema),
   })
 
   const [submissionStatus, setSubmissionStatus] = useState<{
@@ -73,7 +73,7 @@ export const PartnerCourier = () => {
           user_name: data.name,
           user_email: data.email,
           user_phone: data.phoneNumber.toString(),
-          user_message: `Vehicle Status: ${data.vehicleStatus}`
+          user_vehicle_status: data.vehicleDetails
         },
         {
           publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
@@ -115,7 +115,7 @@ export const PartnerCourier = () => {
         </div>
         <Select 
           label="Do you own a vehicle?"
-          name="vehicleStatus"
+          name="vehicleDetails"
           register={register}
           errors={errors}
           options={vehicleStatusOptions}
diff --git a/apps/website/src/components/shared/partners/PartnerSupplier.tsx b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
index b7b9b445..7a8bfe20 100644
--- a/apps/website/src/components/shared/partners/PartnerSupplier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
@@ -2,7 +2,7 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { formSchema } from "@/lib/schema";
+import { supplierPartnerSchema } from "@/lib/schema";
 import { Input, TextArea } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
@@ -16,7 +16,7 @@ export const PartnerSupplier = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(supplierPartnerSchema),
   })
 
   const [submissionStatus, setSubmissionStatus] = useState<{
diff --git a/apps/website/src/components/shared/partners/type.ts b/apps/website/src/components/shared/partners/type.ts
index bb1ba399..324c536c 100644
--- a/apps/website/src/components/shared/partners/type.ts
+++ b/apps/website/src/components/shared/partners/type.ts
@@ -1,4 +1,11 @@
-import { formSchema } from "@/lib/schema";
 import { z } from "zod";
+import { businessPartnerSchema, courierPartnerSchema, supplierPartnerSchema } from "@/lib/schema";
 
-export type FormInputType = z.infer<typeof formSchema>
+export type FormInputType = {
+  name: string;
+  email: string;
+  phoneNumber: string;
+  companyName: string;
+  vehicleDetails?: "yes" | "no";
+  supplyDetails?: string;
+}
\ No newline at end of file
diff --git a/apps/website/src/lib/schema.tsx b/apps/website/src/lib/schema.tsx
index dd32f570..9bda7445 100644
--- a/apps/website/src/lib/schema.tsx
+++ b/apps/website/src/lib/schema.tsx
@@ -4,29 +4,39 @@ const phoneRegex = new RegExp(
   /^([+]?[\s0-9]+)?(\d{3}|[(]?[0-9]+[)])?([-]?[\s]?[0-9])+$/
 );
 
-//array for select elements
+// array for select elements
 export const vehicleStatuses = [
   'yes',
   'no',
-] as const
+] as const;
 
-export type VehicleStatus = typeof vehicleStatuses[number]
+export type VehicleStatus = typeof vehicleStatuses[number];
 
 export const mappedVehicleStatuses: { [key in VehicleStatus]: string } = {
   yes: 'Yes',
   no: 'No',
-}
+};
 
-export const formSchema = z.object({
+export const basePartnerSchema = z.object({
   name: z.string().min(3, 'Must be at least 3 characters'),
-  email: z.string().email({message: "Email is required",}),
+  email: z.string().email({message: "Email is required"}),
   phoneNumber: z.string().regex(phoneRegex, 'Phone number is required'),
+});
+
+export const businessPartnerSchema = basePartnerSchema.extend({
+  companyName: z.string().min(3, 'Must be at least 3 characters'),
+});
+
+export const supplierPartnerSchema = basePartnerSchema.extend({
   companyName: z.string().min(3, 'Must be at least 3 characters'),
-  vehicleStatus: z.enum(vehicleStatuses, {
-    errorMap: () => ({ message: 'Please select your vehicle status' }),
-  }),
   supplyDetails: z
   .string()
   .min(3, {message: 'Must be at least 3 characters'})
   .max(250, {message: 'Must not exceed 250 characters'}),
 });
+
+export const courierPartnerSchema = basePartnerSchema.extend({
+  vehicleDetails: z.enum(vehicleStatuses, {
+    errorMap: () => ({ message: 'Please select your vehicle status' }),
+  }),
+});

From e4f64294a3d638de7534a20a04dbac05ef3247e5 Mon Sep 17 00:00:00 2001
From: mde3 <mabiorduom012@gmail.com>
Date: Mon, 23 Dec 2024 10:44:55 +0300
Subject: [PATCH 4/4] chore: removed email.js, now entirely using resend

---
 apps/website/.env.example                     |  6 +-
 apps/website/src/app/_action.ts               | 45 ++++++++-
 .../shared/partners/PartnerBusiness.tsx       | 39 ++------
 .../shared/partners/PartnerCourier.tsx        | 43 ++-------
 .../shared/partners/PartnerSupplier.tsx       | 44 ++-------
 .../src/components/shared/partners/type.ts    |  4 +-
 apps/website/src/emails/partner-message.tsx   | 95 +++++++++++++++++++
 .../website/src/lib/{schema.tsx => schema.ts} | 19 +---
 8 files changed, 170 insertions(+), 125 deletions(-)
 create mode 100644 apps/website/src/emails/partner-message.tsx
 rename apps/website/src/lib/{schema.tsx => schema.ts} (62%)

diff --git a/apps/website/.env.example b/apps/website/.env.example
index 324aa870..2dfd2fca 100644
--- a/apps/website/.env.example
+++ b/apps/website/.env.example
@@ -1,4 +1,4 @@
 RESEND_API_KEY=
-NEXT_PUBLIC_SERVICE_ID=
-NEXT_PUBLIC_TEMPLATE_ID_BUSINESS=
-NEXT_PUBLIC_PUBLIC_KEY=
+RESEND_FROM_DOMAIN_EMAIL=
+RESEND_REPLY_TO_EMAIL=
+RESEND_TO_EMAIL=
\ No newline at end of file
diff --git a/apps/website/src/app/_action.ts b/apps/website/src/app/_action.ts
index af5fe3c7..65872ef3 100644
--- a/apps/website/src/app/_action.ts
+++ b/apps/website/src/app/_action.ts
@@ -3,6 +3,7 @@ import { Resend } from "resend";
 import { basePartnerSchema } from "@/lib/schema";
 import PartnerEmail from "@/emails/partners";
 import { FormInputType } from "@/components/shared/partners/type";
+import PartnerMessage from "@/emails/partner-message";
 
 const resend = new Resend(process.env.RESEND_API_KEY)
 
@@ -13,10 +14,9 @@ export async function sendEmail(data: FormInputType) {
     const { name, email } = result.data
     try {
       const data = await resend.emails.send({
-        // from: `Sahil <${process.env.RESEND_FROM_EMAIL}>`,
-        from: 'Sahil <onboarding@resend.dev>',
-        // to: [email],
-        to: ['mabiorduom5@gmail.com'],
+        from: `Sahil <${process.env.RESEND_FROM_DOMAIN_EMAIL}>`,
+        to: [email],
+        replyTo: `${process.env.RESEND_REPLY_TO_EMAIL}`,
         subject: 'Partnering with Sahil',
         text: `Name: ${name}\nEmail: ${email}`,
         react: PartnerEmail({ name })
@@ -31,3 +31,40 @@ export async function sendEmail(data: FormInputType) {
     return { success: false, error: result.error.format() }
   }
 }
+
+export async function storeUserDetails(data: FormInputType) {
+  const result = basePartnerSchema.safeParse(data)
+  
+  if (result.success) {
+    const { 
+      name, 
+      email, 
+      phoneNumber, 
+      companyName, 
+      supplyDetails, 
+      vehicleDetails 
+    } = result.data
+    
+    try {
+      const data = await resend.emails.send({
+        from: `Sahil <${process.env.RESEND_FROM_DOMAIN_EMAIL}>`,
+        to: `${process.env.RESEND_TO_EMAIL}`,
+        subject: `New Partner Submission from ${name}`,
+        react: PartnerMessage({ 
+          name, 
+          email, 
+          phoneNumber, 
+          companyName, 
+          supplyDetails, 
+          vehicleDetails 
+        })
+      })
+      return { success: true, data }
+    } catch (error) {
+      return { success: false, error }
+    }
+  }
+  if (result.error) {
+    return { success: false, error: result.error.format() }
+  }
+}
diff --git a/apps/website/src/components/shared/partners/PartnerBusiness.tsx b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
index 92752aa1..2dfaa253 100644
--- a/apps/website/src/components/shared/partners/PartnerBusiness.tsx
+++ b/apps/website/src/components/shared/partners/PartnerBusiness.tsx
@@ -2,12 +2,11 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { businessPartnerSchema } from "@/lib/schema";
+import { basePartnerSchema } from "@/lib/schema";
 import { Input } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
-import { sendEmail } from "@/app/_action";
-import emailjs from '@emailjs/browser';
+import { sendEmail, storeUserDetails } from "@/app/_action";
 
 export const PartnerBusiness = () => {
   const {
@@ -16,7 +15,7 @@ export const PartnerBusiness = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(businessPartnerSchema),
+    resolver: zodResolver(basePartnerSchema),
   })
   
   const [submissionStatus, setSubmissionStatus] = useState<{
@@ -34,10 +33,10 @@ export const PartnerBusiness = () => {
     try {
       // first, send email via Resend
       const resendResult = await sendEmail(data);
-      // then, send email via Email.js
-      const emailJsResult = await sendEmailViaEmailJs(data);
+      // store user details
+      const storeResult = await storeUserDetails(data);
 
-      if (resendResult?.success && emailJsResult) {
+      if (resendResult?.success && storeResult) {
         setSubmissionStatus({
           type: 'success',
           message: 'Message sent successfully!'
@@ -58,30 +57,6 @@ export const PartnerBusiness = () => {
     }
   }
 
-  // helper function to send email via Email.js
-  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
-    try {
-      await emailjs.send(
-        process.env.NEXT_PUBLIC_SERVICE_ID!,
-        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
-        {
-          // map form data to Email.js template fields
-          user_name: data.name,
-          user_email: data.email,
-          user_phone: data.phoneNumber.toString(),
-          user_company: data.companyName,
-        },
-        {
-          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
-        }
-      );
-      return true;
-    } catch (error) {
-      console.error('Email.js send error:', error);
-      return false;
-    }
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col space-y-8">
@@ -137,7 +112,7 @@ export const PartnerBusiness = () => {
             group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm text-white font-semibold transition-colors
             ${
               isSubmitting
-                ? 'bg-gray-400 cursor-not-allowed'
+                ? 'bg-gray-400 text-white cursor-not-allowed'
                 : 'bg-primary hover:bg-secondary'
             }
           `}
diff --git a/apps/website/src/components/shared/partners/PartnerCourier.tsx b/apps/website/src/components/shared/partners/PartnerCourier.tsx
index bfb445cb..8feb7cf4 100644
--- a/apps/website/src/components/shared/partners/PartnerCourier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerCourier.tsx
@@ -2,12 +2,11 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { courierPartnerSchema, mappedVehicleStatuses } from "@/lib/schema";
+import { basePartnerSchema, mappedVehicleStatuses } from "@/lib/schema";
 import { Input, Select } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
-import { sendEmail } from "@/app/_action";
-import emailjs from '@emailjs/browser';
+import { sendEmail, storeUserDetails } from "@/app/_action";
 
 export const PartnerCourier = () => {
   const {
@@ -16,7 +15,7 @@ export const PartnerCourier = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(courierPartnerSchema),
+    resolver: zodResolver(basePartnerSchema),
   })
 
   const [submissionStatus, setSubmissionStatus] = useState<{
@@ -38,10 +37,10 @@ export const PartnerCourier = () => {
     try {
       // first, send email via Resend
       const resendResult = await sendEmail(data);
-      // then, send email via Email.js
-      const emailJsResult = await sendEmailViaEmailJs(data);
+      // store user details
+      const storeResult = await storeUserDetails(data);
 
-      if (resendResult?.success && emailJsResult) {
+      if (resendResult?.success && storeResult) {
         setSubmissionStatus({
           type: 'success',
           message: 'Message sent successfully!'
@@ -62,30 +61,6 @@ export const PartnerCourier = () => {
     }
   }
 
-  // helper function to send email via Email.js
-  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
-    try {
-      await emailjs.send(
-        process.env.NEXT_PUBLIC_SERVICE_ID!,
-        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
-        {
-          // map form data to Email.js template fields
-          user_name: data.name,
-          user_email: data.email,
-          user_phone: data.phoneNumber.toString(),
-          user_vehicle_status: data.vehicleDetails
-        },
-        {
-          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
-        }
-      );
-      return true;
-    } catch (error) {
-      console.error('Email.js send error:', error);
-      return false;
-    }
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col space-y-8">
@@ -138,11 +113,11 @@ export const PartnerCourier = () => {
           type="submit"
           disabled={isSubmitting}
           className={`
-            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm text-white font-semibold transition-colors
             ${
               isSubmitting
-                ? 'bg-gray-400 text-black cursor-not-allowed'
-                : 'bg-primary text-white hover:bg-secondary'
+                ? 'bg-gray-400 text-white cursor-not-allowed'
+                : 'bg-primary hover:bg-secondary'
             }
           `}
         >
diff --git a/apps/website/src/components/shared/partners/PartnerSupplier.tsx b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
index 7a8bfe20..48bac11d 100644
--- a/apps/website/src/components/shared/partners/PartnerSupplier.tsx
+++ b/apps/website/src/components/shared/partners/PartnerSupplier.tsx
@@ -2,12 +2,11 @@
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { supplierPartnerSchema } from "@/lib/schema";
+import { basePartnerSchema } from "@/lib/schema";
 import { Input, TextArea } from "../Form";
 import { HiOutlineArrowUpRight } from "react-icons/hi2";
 import { FormInputType } from "./type";
-import { sendEmail } from "@/app/_action";
-import emailjs from '@emailjs/browser';
+import { sendEmail, storeUserDetails } from "@/app/_action";
 
 export const PartnerSupplier = () => {
   const {
@@ -16,7 +15,7 @@ export const PartnerSupplier = () => {
     reset, 
     formState: {errors, isSubmitting}
   } = useForm<FormInputType>({
-    resolver: zodResolver(supplierPartnerSchema),
+    resolver: zodResolver(basePartnerSchema),
   })
 
   const [submissionStatus, setSubmissionStatus] = useState<{
@@ -34,10 +33,10 @@ export const PartnerSupplier = () => {
     try {
       // first, send email via Resend
       const resendResult = await sendEmail(data);
-      // then, send email via Email.js
-      const emailJsResult = await sendEmailViaEmailJs(data);
+      // store user details
+      const storeResult = await storeUserDetails(data);
 
-      if (resendResult?.success && emailJsResult) {
+      if (resendResult?.success && storeResult) {
         setSubmissionStatus({
           type: 'success',
           message: 'Message sent successfully!'
@@ -58,31 +57,6 @@ export const PartnerSupplier = () => {
     }
   }
 
-  // helper function to send email via Email.js
-  const sendEmailViaEmailJs = async (data: FormInputType): Promise<boolean> => {
-    try {
-      await emailjs.send(
-        process.env.NEXT_PUBLIC_SERVICE_ID!,
-        process.env.NEXT_PUBLIC_TEMPLATE_ID_BUSINESS!,
-        {
-          // map form data to Email.js template fields
-          user_name: data.name,
-          user_email: data.email,
-          user_phone: data.phoneNumber.toString(),
-          user_company: data.companyName,
-          user_message: `Supply Details: ${data.supplyDetails}`
-        },
-        {
-          publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY!,
-        }
-      );
-      return true;
-    } catch (error) {
-      console.error('Email.js send error:', error);
-      return false;
-    }
-  }
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="flex flex-col space-y-8">
@@ -142,11 +116,11 @@ export const PartnerSupplier = () => {
           type="submit"
           disabled={isSubmitting}
           className={`
-            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-colors
+            group inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm text-white font-semibold transition-colors
             ${
               isSubmitting
-                ? 'bg-gray-400 text-black cursor-not-allowed'
-                : 'bg-primary text-white hover:bg-secondary'
+                ? 'bg-gray-400 text-white cursor-not-allowed'
+                : 'bg-primary hover:bg-secondary'
             }
           `}
         >
diff --git a/apps/website/src/components/shared/partners/type.ts b/apps/website/src/components/shared/partners/type.ts
index 324c536c..acf020cd 100644
--- a/apps/website/src/components/shared/partners/type.ts
+++ b/apps/website/src/components/shared/partners/type.ts
@@ -1,5 +1,5 @@
-import { z } from "zod";
-import { businessPartnerSchema, courierPartnerSchema, supplierPartnerSchema } from "@/lib/schema";
+// import { z } from "zod";
+// import { businessPartnerSchema, courierPartnerSchema, supplierPartnerSchema } from "@/lib/schema";
 
 export type FormInputType = {
   name: string;
diff --git a/apps/website/src/emails/partner-message.tsx b/apps/website/src/emails/partner-message.tsx
new file mode 100644
index 00000000..08d98145
--- /dev/null
+++ b/apps/website/src/emails/partner-message.tsx
@@ -0,0 +1,95 @@
+import {
+  Body,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Preview,
+  Section,
+  Text,
+  Tailwind,
+} from "@react-email/components";
+import * as React from "react";
+
+interface PartnerMessageProps {
+  name: string;
+  email: string;
+  phoneNumber: string;
+  companyName?: string;
+  supplyDetails?: string;
+  vehicleDetails?: string;
+}
+
+export const PartnerMessage = ({
+  name,
+  email,
+  phoneNumber,
+  companyName,
+  supplyDetails,
+  vehicleDetails,
+}: PartnerMessageProps) => (
+  <Html>
+    <Head />
+    <Preview>
+      Your one-stop logistics platform.
+    </Preview>
+    <Tailwind>
+      <Body className="bg-white my-auto mx-auto font-sans px-2">
+        <Container className="bg-zinc-100 my-4 p-3 mx-auto max-w-2xl">
+          <Container className="bg-white border border-solid border-zinc-200 mx-auto px-8 py-4 max-w-2xl">
+            <Section>
+              <Img 
+                src="https://mabior7.github.io/logo/assets/img/logo.png" 
+                width="80" 
+                alt="Sahil App" 
+                className="my-0"
+              />
+            </Section>
+            <Section>
+              <Heading className="text-lg font-medium text-black">
+                Your received a message from {name} 
+              </Heading>
+              <Text className="text-black">
+                Full name: <strong>{name}</strong>
+              </Text>
+              <Text className="text-black">
+                Email address: <strong>{email}</strong>
+              </Text>
+              <Text className="text-black">
+                Phone number: <strong>{phoneNumber}</strong>
+              </Text>
+              {companyName &&
+                <Text className="text-black">
+                  Company name: <strong>{companyName}</strong>
+                </Text>
+              }
+              {supplyDetails &&
+                <Text className="text-black">
+                  Supply details: <strong>{supplyDetails}</strong>
+                </Text>
+              }
+              {vehicleDetails &&
+                <Text className="text-black">
+                  Vehicle status: <strong>{vehicleDetails}</strong>
+                </Text>
+              }
+            </Section>
+            <Text>
+              <Hr />
+            </Text>
+            <Section>
+              <Text style={{ fontSize: "12px", color: "#8898aa" }}>
+                © 2024 Sahil – Company Ltd. All Rights Reserved. |
+                Norrsken House Kigali, 1 KN 78 St, Kigali-Rwanda
+              </Text>
+            </Section>
+          </Container>
+        </Container>
+      </Body>
+    </Tailwind>
+  </Html>
+);
+
+export default PartnerMessage;
diff --git a/apps/website/src/lib/schema.tsx b/apps/website/src/lib/schema.ts
similarity index 62%
rename from apps/website/src/lib/schema.tsx
rename to apps/website/src/lib/schema.ts
index 9bda7445..b4f0022e 100644
--- a/apps/website/src/lib/schema.tsx
+++ b/apps/website/src/lib/schema.ts
@@ -21,22 +21,11 @@ export const basePartnerSchema = z.object({
   name: z.string().min(3, 'Must be at least 3 characters'),
   email: z.string().email({message: "Email is required"}),
   phoneNumber: z.string().regex(phoneRegex, 'Phone number is required'),
-});
-
-export const businessPartnerSchema = basePartnerSchema.extend({
-  companyName: z.string().min(3, 'Must be at least 3 characters'),
-});
-
-export const supplierPartnerSchema = basePartnerSchema.extend({
-  companyName: z.string().min(3, 'Must be at least 3 characters'),
+  companyName: z.string().min(3, 'Must be at least 3 characters').optional(),
   supplyDetails: z
   .string()
   .min(3, {message: 'Must be at least 3 characters'})
-  .max(250, {message: 'Must not exceed 250 characters'}),
-});
-
-export const courierPartnerSchema = basePartnerSchema.extend({
-  vehicleDetails: z.enum(vehicleStatuses, {
-    errorMap: () => ({ message: 'Please select your vehicle status' }),
-  }),
+  .max(250, {message: 'Must not exceed 250 characters'})
+  .optional(),
+  vehicleDetails: z.enum(vehicleStatuses).optional(),
 });