[SAH-58]: Implement Business Registration Validation

apps/agent/next.config.js

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['@sahil/lib', 'ui', '@sahil/configs'],
+  transpilePackages: ['@sahil/lib', 'ui', '@sahil/configs', "@sahil/features"],
   images: {
     remotePatterns: [
       {

apps/agent/package.json

@@ -16,6 +16,7 @@
     "@hookform/resolvers": "^3.3.0",
     "@react-google-maps/api": "^2.19.2",
     "@sahil/configs": "*",
+    "@sahil/features": "*",
     "@sahil/lib": "*",
     "apollo-link-ws": "^1.0.20",
     "autoprefixer": "10.4.15",
@@ -25,6 +26,7 @@
     "eslint-config-next": "13.4.16",
     "graphql": "^16.8.0",
     "graphql-ws": "^5.14.0",
+    "jsonwebtoken": "^9.0.2",
     "next": "13.4.16",
     "next-auth": "^4.23.1",
     "postcss": "8.4.28",

apps/agent/src/Businesses/BusinessOverviewCard.tsx

@@ -27,7 +27,7 @@ type Props = {
 export const BusinessOverviewCard: FC<Props> = ({ business }) => {
   return (
     <Card className="w-full">
-      <div className="flex justify-between text-4xl">
+      <div className="flex justify-between">
         <Link
           href={`/businesses/${business.id}`}
           className="avatar placeholder h-fit"
@@ -48,16 +48,18 @@ export const BusinessOverviewCard: FC<Props> = ({ business }) => {
           {business.name}
         </Link>
       </div>
-      <div className="mt-2 flex flex-col p-4 gap-4 border border-solid border-[#d2d6db] rounded">
+      <div className="mt-2 flex flex-col bg-gray-50 p-4 gap-4 shadow-sm rounded-lg">
         <div className="flex justify-between items-center">
           <div className="space-y-1 font-semibold">
-            <span className="opacity-70 text-sm font-normal">
+            <span className="text-gray-500 text-sm font-normal">
               Business Type
             </span>
             <p className="capitalize">{business.type}</p>
           </div>
           <div className="space-y-1 font-semibold">
-            <span className="opacity-70 text-sm font-normal">Contact Name</span>
+            <span className="text-gray-500 text-sm font-normal">
+              Contact Name
+            </span>
             <p className="capitalize">{business.contactName}</p>
           </div>
         </div>
@@ -66,7 +68,7 @@ export const BusinessOverviewCard: FC<Props> = ({ business }) => {
         {business.addresses &&
           business.addresses.map((address, index) => (
             <div key={index} className="flex items-center gap-2">
-              <span className="shadow rounded-md p-2">
+              <span className="shadow rounded-md p-2 text-primary">
                 <HiOutlineMapPin />
               </span>
               <p className="truncate ...">{address.street_address}</p>
@@ -75,7 +77,7 @@ export const BusinessOverviewCard: FC<Props> = ({ business }) => {
       </div>
       <div className="mt-3">
         <div className="flex items-center gap-2">
-          <span className="shadow rounded-md p-2">
+          <span className="shadow rounded-md p-2 text-primary">
             <HiOutlinePhone />
           </span>
           <p>{business.phoneNumber}</p>

apps/agent/src/Businesses/BusinessRegistrationForm/BusinessAddressInfo.tsx

@@ -0,0 +1,67 @@
+import { useForm, SubmitHandler } from "react-hook-form";
+import { useRouter } from "next/router";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Card, FormControl, Input } from "ui";
+import { HiArrowSmallLeft, HiArrowSmallRight } from "react-icons/hi2";
+import { useBusinessFormStore } from "@/hooks/useBusinessFormStore";
+
+const businessAddressSchema = z.object({
+  streetName: z.string().min(2, { message: "Must be more than 2 characters" }),
+});
+
+type FormData = z.infer<typeof businessAddressSchema>;
+
+export const BusinessAddressInfo = () => {
+  const { formData, goToStep, updateStepFormData } = useBusinessFormStore(
+    (state) => state
+  );
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormData>({
+    // @ts-ignore
+    resolver: zodResolver(businessAddressSchema),
+  });
+
+  const router = useRouter();
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    const validatedInput = businessAddressSchema.parse(data);
+    updateStepFormData(validatedInput);
+    goToStep("next");
+    router.push(`/businesses/register/preferences`);
+  };
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
+      <Card title="Address Information">
+        <Input
+          name="streetName"
+          label="Address Title"
+          placeholder="Main Branch"
+          register={register}
+          errors={errors}
+        />
+        <Input
+          name="streetName"
+          label="Street Name"
+          placeholder="Keji Lumuro"
+          register={register}
+          errors={errors}
+        />
+        <Input
+          name="streetName"
+          label="City"
+          placeholder="Keji Lumuro"
+          register={register}
+          errors={errors}
+        />
+        <div className="btn btn-sm btn-primary w-fit">
+          <input type="submit" value="Continue" />
+          <HiArrowSmallRight />
+        </div>
+      </Card>
+    </form>
+  );
+};

apps/agent/src/Businesses/BusinessRegistrationForm/BusinessInfo.tsx

@@ -3,11 +3,14 @@ import { useRouter } from "next/router";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useBusinessFormStore } from "@/hooks/useBusinessFormStore";
-import { Card, FormControl } from "ui";
-import { HiArrowSmallLeft, HiArrowSmallRight } from "react-icons/hi2";
+import { Card, Input } from "ui";
+import { HiArrowSmallRight } from "react-icons/hi2";
 
 const businessInfoSchema = z.object({
   name: z.string().min(2, { message: "Must be more than 2 characters" }),
+  businessType: z
+    .string()
+    .min(2, { message: "Must be more than 2 characters" }),
 });
 
 type FormData = z.infer<typeof businessInfoSchema>;
@@ -25,20 +28,34 @@ export const BusinessInfo = () => {
 
   const router = useRouter();
 
-  const { formData } = useBusinessFormStore((state) => state);
+  const { goToStep, updateStepFormData } = useBusinessFormStore(
+    (state) => state
+  );
+
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const validatedInput = businessInfoSchema.parse(data);
+    updateStepFormData(validatedInput);
+    goToStep("next");
+    router.push(`/businesses/register/address_info`);
   };
+
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-2">
       <Card title="Business Info" titleSize="sm">
-        <FormControl label="Name of your business">
-          <input
-            type="text"
-            className="input input-sm input-bordered w-full bg-gray-100"
-            placeholder="Keji's Foods"
-          />
-        </FormControl>
+        <Input
+          name="name"
+          label="Name of your business"
+          placeholder="Keji Lumuro"
+          register={register}
+          errors={errors}
+        />
+        <Input
+          name="businessType"
+          label="Type of Business"
+          placeholder="Keji Lumuro"
+          register={register}
+          errors={errors}
+        />
         <div className="btn btn-sm btn-primary w-fit">
           <input type="submit" value="Continue" />
           <HiArrowSmallRight />

apps/agent/src/Businesses/BusinessRegistrationForm/BusinessInfoSummary.tsx

@@ -1,7 +1,122 @@
+import { useState } from "react";
+import { Card, Spinner, FormControl } from "ui";
+import { HiArrowSmallRight, HiOutlineCheckCircle } from "react-icons/hi2";
+import { useRouter } from "next/router";
+import toast, { Toaster } from "react-hot-toast";
+import {
+  useRegisterBusiness,
+  useRegisterBusinessSubscription,
+} from "@/hooks/businesses";
+import { useBusinessFormStore } from "@/hooks/useBusinessFormStore";
+
 export const BusinessInfoSummary = () => {
+  const [actionId, setActionId] = useState<string>("");
+  const { formData } = useBusinessFormStore((state) => state);
+  const router = useRouter();
+
+  const { data, loading: subscriptionLoading } =
+    useRegisterBusinessSubscription(actionId);
+
+  const { error, loading, registerBusinessAction } = useRegisterBusiness();
+  const onSubmit = async () => {
+    const business = await registerBusinessAction({
+      variables: {
+        object: {
+          name: formData.name,
+        },
+      },
+    });
+    setActionId(business?.data?.registerBusinessAction);
+    router.push(`/businesses/${data?.output?.id}`);
+  };
+
+  if (error) {
+    toast.error("This didn't work.");
+  }
   return (
-    <div>
-      <h3 className="text-xl">Summary</h3>
-    </div>
+    <>
+      <div className="space-y-2">
+        <Card title="Business Info" titleSize="sm">
+          <FormControl label="Business Name">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                placeholder={formData.name as string}
+                className="input input-sm input-bordered w-full max-w-lg"
+                readOnly={true}
+              />
+              <span className="p-2 rounded-md bg-success text-white">
+                <HiOutlineCheckCircle />
+              </span>
+            </div>
+          </FormControl>
+          {formData.businessType && (
+            <FormControl label="Business Type">
+              <div className="flex gap-4">
+                <input
+                  type="text"
+                  placeholder={formData.businessType as string}
+                  className="input input-sm input-bordered w-full max-w-lg"
+                  readOnly={true}
+                />
+                <span className="p-2 rounded-md bg-success text-white">
+                  <HiOutlineCheckCircle />
+                </span>
+              </div>
+            </FormControl>
+          )}
+        </Card>
+        <Card title="Address Information" titleSize="sm">
+          <FormControl label="Street Name">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                placeholder={formData.streetName as string}
+                className="input input-sm input-bordered w-full max-w-lg"
+                readOnly={true}
+              />
+              <span className="p-2 rounded-md bg-success text-white">
+                <HiOutlineCheckCircle />
+              </span>
+            </div>
+          </FormControl>
+        </Card>
+        <Card title="Business Preferences" titleSize="sm">
+          <FormControl label="Preferred Contact Method">
+            <div className="flex gap-4">
+              <input
+                type="text"
+                placeholder={formData.preferredContactMethod as string}
+                className="input input-sm input-bordered w-full max-w-lg"
+                readOnly={true}
+              />
+              <span className="p-2 rounded-md bg-success text-white">
+                <HiOutlineCheckCircle />
+              </span>
+            </div>
+          </FormControl>
+          {formData.preferredPaymentMethod && (
+            <FormControl label="Preferred Payment Method">
+              <div className="flex gap-4">
+                <input
+                  type="text"
+                  placeholder={formData.preferredPaymentMethod as string}
+                  className="input input-sm input-bordered w-full max-w-lg"
+                  readOnly={true}
+                />
+                <span className="p-2 rounded-md bg-success text-white">
+                  <HiOutlineCheckCircle />
+                </span>
+              </div>
+            </FormControl>
+          )}
+        </Card>
+        <div className="btn btn-sm btn-primary w-fit">
+          <input type="submit" value="Continue" onClick={onSubmit} />
+          {loading ? <Spinner /> : <HiArrowSmallRight />}
+        </div>
+      </div>
+      <Toaster position="bottom-center" reverseOrder={false} />
+    </>
   );
 };