feat: added resend & email.js on forms

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=

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

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'
             }
           `}
         >

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}

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<{

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;
+}

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' }),
+  }),
+});