Merge pull request #234 from ShivanshPlays/multistep-form1

Added navbar, sidebar, mainpage and overall layout of the whole seller page
Vimall03 · Nov 7, 2024 · 64dd4ea · 64dd4ea
2 parents d136a20 + ad9c617
commit 64dd4ea
Show file tree

Hide file tree

Showing 12 changed files with 383 additions and 55 deletions.
diff --git a/alimento-nextjs/app/vendor/[vendorId]/page.tsx b/alimento-nextjs/app/vendor/[vendorId]/page.tsx
@@ -1,3 +1,4 @@
+import SetUpDishes from '@/components/multistepForm/setupDishes';
 import prismadb from '@/lib/prismadb';
 import { Dish } from '@prisma/client';
 
@@ -29,7 +30,7 @@ const VendorPage: React.FC<VendorPageProps> = async ({ params }) => {
     }
 
     else{
-      // return <SetUpDishes VendorId={vendorId}/>
+      return <SetUpDishes VendorId={vendorId}/>
       // here the guided form component will be added s
     }
 

diff --git a/alimento-nextjs/app/vendor/layout.tsx b/alimento-nextjs/app/vendor/layout.tsx
@@ -1,3 +1,4 @@
+import VendorNavBar from "@/components/common/vendorNavBar";
 
 export default function VendorLayout({
   children,
@@ -7,7 +8,8 @@ export default function VendorLayout({
   return (
     <html lang="en">
       <body>
-          {children}
+        <VendorNavBar />
+        {children}
       </body>
     </html>
   );

diff --git a/alimento-nextjs/components/common/vendorNavBar.tsx b/alimento-nextjs/components/common/vendorNavBar.tsx
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import Container from '../ui/container';
+import NavbarActions from './navbar-actions';
+
+const VendorNavBar = () => {
+  return (
+    <div className="border-b">
+      <Container>
+        <div className="relative px-4 sm:px-6 lg:px-8 flex h-16 items-center">
+          <Link
+            href="/"
+            className="ml-4 h-full items-center justify-center flex lg:ml:0 gap-x-2"
+          >
+            <div className="flex flex-col items-center justify-center">
+              <p className="font-bold text-4xl">Alimento</p>
+              <div className="tracking-widest">v e n d o r</div>
+            </div>
+          </Link>
+          <NavbarActions />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default VendorNavBar;
diff --git a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx
@@ -0,0 +1,18 @@
+export const data = [
+    {
+      id: 1,
+      step: 'step 1',
+      title: 'your store info',
+    },
+    {
+      id: 2,
+      step: 'step 2',
+      title: 'select category',
+    },
+    {
+      id: 3,
+      step: 'step 4',
+      title: 'select tags',
+    },
+  ];
+
diff --git a/alimento-nextjs/components/multistepForm/pages/main.tsx b/alimento-nextjs/components/multistepForm/pages/main.tsx
@@ -0,0 +1,143 @@
+
+import { useGlobalDish } from '@/context/dishFormContext';
+import { MouseEventHandler, useEffect } from 'react';
+import { Toaster } from 'react-hot-toast';
+
+const Main = ({ sellerId }: { sellerId: string }) => {
+  const {
+
+    dishName,
+    dishPrice,
+    dishDescription,
+
+    setValidDishName,
+    setValidDishPrice,
+    setValidDishDescription,
+
+    currentStep,
+    setCurrentStep,
+    formCompleted,
+    completed,
+    setCompleted,
+  } = useGlobalDish();
+
+  // Use useEffect to update completed based on currentStep
+  useEffect(() => {
+    setCompleted(currentStep !== 1);
+  }, [currentStep, setCompleted]);
+
+  const nextStep: MouseEventHandler<HTMLButtonElement> = e => {
+    e.preventDefault();
+
+    let allValid = true;
+
+    // Validate each field and update validity states
+    if (dishName.trim().length < 1) {
+      setValidDishName(false);
+      allValid = false;
+    } else {
+      setValidDishName(true);
+    }
+
+    // Validate listing price
+    if (dishPrice <= 0) {
+      setValidDishPrice(false);
+      allValid = false;
+    } else {
+      setValidDishPrice(true);
+    }
+
+    // Validate listing description
+    if (dishDescription.trim().length < 1) {
+      setValidDishDescription(false);
+      allValid = false;
+    } else {
+      setValidDishDescription(true);
+    }
+
+    // Move to the next step only if all fields are valid
+    if (allValid) {
+      setCurrentStep(currentStep + 1);
+    }
+  };
+
+  const goBack: MouseEventHandler<HTMLButtonElement> = e => {
+    e.preventDefault();
+    setCurrentStep(currentStep - 1);
+  };
+
+  return (
+    <div className="md:overflow-hidden md:min-h-full md:shadow-none shadow-md mx-auto md:m-0 rounded-xl md:rounded-none md:w-full w-[100%] md:bg-transparent min-h-[400px] bg-white z-10 mt-[84px]">
+      <form className="md:mx-16 md:my-0 mx-6 my-6 py-0 md:py-2 relative h-full">
+        <Toaster />
+        {currentStep === 1 && < div> The Forms will go Here </div>}
+        {!formCompleted && (
+          <footer className="md:block hidden w-full left-0 right-0 bottom-0">
+            <div className="flex">
+              <div className="mr-auto mt-2">
+                {completed && (
+                  <button
+                    onClick={goBack}
+                    className={'bg-gray-700 text-white rounded-lg p-2'}
+                  >
+                    Go Back
+                  </button>
+                )}
+              </div>
+              <div className="text-right text-sm mt-2">
+                <button
+                  onClick={
+                    currentStep === 3
+                      ? e => {
+                          e.preventDefault();
+
+                        }
+                      : nextStep
+                  }
+                  className="bg-black text-gray-200 rounded-full p-3"
+                >
+                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                </button>
+              </div>
+            </div>
+          </footer>
+        )}
+
+        {!formCompleted && (
+          <footer className="fixed md:hidden block w-full p-3 left-0 right-0 bottom-0">
+            <div className="flex">
+              <div className="mr-auto">
+                {completed && (
+                  <button
+                    onClick={goBack}
+                    className={
+                      'bg-transparent text-gray-400 hover:text-customTeal'
+                    }
+                  >
+                    Go Back
+                  </button>
+                )}
+              </div>
+              <div className="text-right">
+                <button
+                  onClick={
+                    currentStep === 3
+                      ? e => {
+                          e.preventDefault();
+                        }
+                      : nextStep
+                  }
+                  className="bg-black text-gray-200 rounded-full p-2"
+                >
+                  {currentStep === 3 ? 'Confirm' : 'Next Step'}
+                </button>
+              </div>
+            </div>
+          </footer>
+        )}
+      </form>
+    </div>
+  );
+};
+
+export default Main;
diff --git a/alimento-nextjs/components/multistepForm/pages/sidebar.tsx b/alimento-nextjs/components/multistepForm/pages/sidebar.tsx
@@ -0,0 +1,104 @@
+
+import { useGlobalDish } from '@/context/dishFormContext';
+import { data } from '../components/sidebarConstants';
+
+const Sidebar = () => {
+  const {
+    dishName,
+    dishCategory,
+    dishPrice,
+    dishDescription,
+    dishTags,
+
+    setValidDishName,
+    setValidDishCategory,
+    setValidDishPrice,
+    setValidDishDescription,
+    setValidDishTags,
+
+    currentStep,
+    setCurrentStep,
+    setFormCompleted,
+  } = useGlobalDish();
+
+  const changeStep = (id: number) => {
+    let allValid = true;
+
+    // Validate each field and update validity states
+    if (dishName.trim().length < 1) {
+      setValidDishName(false);
+      allValid = false;
+    } else {
+      setValidDishName(true);
+    }
+
+    if (dishDescription.trim().length < 1) {
+      setValidDishDescription(false);
+      allValid = false;
+    } else {
+      setValidDishDescription(true);
+    }
+
+    if (dishPrice < 1) {
+      setValidDishPrice(false);
+      allValid = false;
+    } else {
+      setValidDishPrice(true);
+    }
+
+    if (dishCategory.trim().length < 1) {
+      setValidDishCategory(false);
+      allValid = false;
+    } else {
+      setValidDishCategory(true);
+    }
+
+    if (dishTags.length < 1) {
+        setValidDishTags(false);
+        allValid = false;
+      } else {
+        setValidDishCategory(true);
+      }
+    // Move to the next step only if all fields are valid
+    if (allValid) {
+      setCurrentStep(id);
+    }
+
+    // Reset the form completion status
+    setFormCompleted(false);
+  };
+
+  return (
+    <>
+      <aside className="bg-[url('/pngFood.png')] bg-cover bg-contain absolute top-0 left-0 right-0 md:relative md:bg-desktop h-[50vh] md:h-full p-8 overflow-hidden md:rounded-xl gap-4 md:gap-0 w-screen md:w-[42.5%] flex flex-row md:flex-col items-start md:justify-start justify-center">
+        {data.map((data, index) => {
+          const { id, step, title } = data;
+
+          return (
+            <div
+              key={index}
+              className={`flex items-center rounded-lg p-2 space-x-4 leading-4 sm:mb-8 ${currentStep === id ? 'border border-black bg-gray-400 ' : ''}`}
+            >
+              <div
+                onClick={() => changeStep(id)}
+                className={`md:w-8 cursor-pointer md:h-8 w-10 h-10 rounded-full flex items-center justify-center font-medium `}
+              >
+                {id}
+              </div>
+              <div className="hidden md:block">
+                <p className="uppercase font-handlee text-customTeal  text-sm font-medium">
+                  {step}
+                </p>
+                <p className="uppercase font-handlee text-customTeal  font-medium tracking-wider">
+                  {title}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </aside>
+    </>
+  );
+};
+
+export default Sidebar;
diff --git a/alimento-nextjs/components/multistepForm/setupDishes.tsx b/alimento-nextjs/components/multistepForm/setupDishes.tsx
@@ -0,0 +1,30 @@
+"use client";
+import React from "react";
+import Image from "next/image";
+import Sidebar from "./pages/sidebar";
+
+const SetUpDishes = ({ VendorId }: { VendorId: string }) => {
+  return (
+    <>
+      <main className="bg-secondary-mongolia mr-10 relative h-screen md:overflow-hidden overflow-y-auto px-10 md:flex items-center justify-center font-ubuntu">
+        <div className="hidden  lg:flex  gap-20  flex-col items-center justify-center text-center text-4xl font-bold">
+          Hey! Let&apos;s upload you first dish on ALIMENTO
+          <Image
+            src="/dishGuide.jpg"
+            height={1000}
+            width={1000}
+            alt="storeSetuppage"
+            className="hidden md:block h-3/4 w-3/4"
+          />
+        </div>
+
+        <div className="md:gray-200  bg-gray-200 dark:bg-gray-700 rounded-xl shadow-md absolute md:relative p-4 flex md:flex-row flex-col md:max-h-[550px] md:max-w-[900px] h-full w-full">
+          <Sidebar />
+          {/* <Main VendorId={VendorId} /> */}
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default SetUpDishes;
diff --git a/alimento-nextjs/context/dishFormContext.tsx b/alimento-nextjs/context/dishFormContext.tsx
@@ -7,7 +7,6 @@ import {
   useContext,
   useState,
 } from "react";
-import toast from "react-hot-toast";
 
 interface GlobalContextType {
   currentStep: number;

diff --git a/alimento-nextjs/lib/providers.tsx b/alimento-nextjs/lib/providers.tsx
@@ -1,7 +1,8 @@
 'use client';
 import React from 'react';
 import { SessionProvider } from 'next-auth/react';
+import { GlobalDishProvider } from '@/context/dishFormContext';
 
 export const Providers = ({ children }: { children: React.ReactNode }) => {
-  return <SessionProvider>{children}</SessionProvider>
+  return <SessionProvider><GlobalDishProvider>{children}</GlobalDishProvider></SessionProvider>
 };
diff --git a/alimento-nextjs/public/dishGuide.jpg b/alimento-nextjs/public/dishGuide.jpg
diff --git a/alimento-nextjs/public/pngFood.png b/alimento-nextjs/public/pngFood.png