[SAH-108]: Dynamic Contact Form on Website

apps/website/.env.example

@@ -0,0 +1,4 @@
+RESEND_API_KEY=
+RESEND_FROM_DOMAIN_EMAIL=
+RESEND_REPLY_TO_EMAIL=
+RESEND_TO_EMAIL=

apps/website/package.json

@@ -6,18 +6,25 @@
     "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",
     "next": "^14.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.2",
+    "resend": "^4.0.1",
     "react-icons": "^5.4.0",
     "tailwind-merge": "^2.1.0",
-    "ui": "*"
+    "ui": "*",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "^20",
@@ -27,6 +34,7 @@
     "eslint": "^8",
     "eslint-config-next": "^14.2.3",
     "postcss": "^8",
+    "react-email": "3.0.3",
     "tailwindcss": "^3.3.0",
     "typescript": "^5"
   }

apps/website/src/app/_action.ts

@@ -0,0 +1,70 @@
+"use server";
+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)
+
+export async function sendEmail(data: FormInputType) {
+  const result = basePartnerSchema.safeParse(data)
+
+  if (result.success) {
+    const { name, email } = result.data
+    try {
+      const data = await resend.emails.send({
+        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 })
+      })
+      return { success: true, data }
+    } catch (error) {
+      return { success: false, error }
+    }
+  }
+
+  if (result.error) {
+    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() }
+  }
+}

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="[email protected]"
-                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>
     </>
   );

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="[email protected]"
-                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>
     </>
   );

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="[email protected]"
-                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>
     </>
   );