diff --git a/alimento-nextjs/app/vendor/[vendorId]/page.tsx b/alimento-nextjs/app/vendor/[vendorId]/page.tsx index 276140e..380f943 100644 --- 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 = async ({ params }) => { } else{ - // return + return // 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 index 8be70ac..db749b3 100644 --- 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 ( - {children} + + {children} ); diff --git a/alimento-nextjs/components/common/vendorNavBar.tsx b/alimento-nextjs/components/common/vendorNavBar.tsx new file mode 100644 index 0000000..42f1313 --- /dev/null +++ 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 ( +
+ +
+ +
+

Alimento

+
v e n d o r
+
+ + +
+ +
+ ); +}; + +export default VendorNavBar; diff --git a/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx b/alimento-nextjs/components/multistepForm/components/sidebarConstants.tsx new file mode 100644 index 0000000..cd48a76 --- /dev/null +++ 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', + }, + ]; + \ No newline at end of file diff --git a/alimento-nextjs/components/multistepForm/pages/main.tsx b/alimento-nextjs/components/multistepForm/pages/main.tsx new file mode 100644 index 0000000..560c430 --- /dev/null +++ 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 = 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 = e => { + e.preventDefault(); + setCurrentStep(currentStep - 1); + }; + + return ( +
+
+ + {currentStep === 1 && < div> The Forms will go Here
} + {!formCompleted && ( +
+
+
+ {completed && ( + + )} +
+
+ +
+
+
+ )} + + {!formCompleted && ( +
+
+
+ {completed && ( + + )} +
+
+ +
+
+
+ )} + + + ); +}; + +export default Main; diff --git a/alimento-nextjs/components/multistepForm/pages/sidebar.tsx b/alimento-nextjs/components/multistepForm/pages/sidebar.tsx new file mode 100644 index 0000000..b218129 --- /dev/null +++ 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 ( + <> + + + ); +}; + +export default Sidebar; diff --git a/alimento-nextjs/components/multistepForm/setupDishes.tsx b/alimento-nextjs/components/multistepForm/setupDishes.tsx new file mode 100644 index 0000000..75576a6 --- /dev/null +++ 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 ( + <> +
+
+ Hey! Let's upload you first dish on ALIMENTO + storeSetuppage +
+ +
+ + {/*
*/} +
+
+ + ); +}; + +export default SetUpDishes; diff --git a/alimento-nextjs/context/dishFormContext.tsx b/alimento-nextjs/context/dishFormContext.tsx index b10b418..4aef9c1 100644 --- 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 index 9eb3b08..daa9cd7 100644 --- 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 {children} + return {children} }; diff --git a/alimento-nextjs/public/dishGuide.jpg b/alimento-nextjs/public/dishGuide.jpg new file mode 100644 index 0000000..46e47e8 Binary files /dev/null and b/alimento-nextjs/public/dishGuide.jpg differ diff --git a/alimento-nextjs/public/pngFood.png b/alimento-nextjs/public/pngFood.png new file mode 100644 index 0000000..b40978a Binary files /dev/null and b/alimento-nextjs/public/pngFood.png differ diff --git a/alimento-nextjs/tailwind.config.ts b/alimento-nextjs/tailwind.config.ts index ebc9f38..e15f9da 100644 --- a/alimento-nextjs/tailwind.config.ts +++ b/alimento-nextjs/tailwind.config.ts @@ -1,62 +1,66 @@ import type { Config } from "tailwindcss"; const config: Config = { - darkMode: ["class"], - content: [ + darkMode: ["class"], + content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { - extend: { - colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' - }, - accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' - }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', - chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' - } - }, - borderRadius: { - lg: 'var(--radius)', - md: 'calc(var(--radius) - 2px)', - sm: 'calc(var(--radius) - 4px)' - } - } + extend: { + colors: { + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + chart: { + "1": "hsl(var(--chart-1))", + "2": "hsl(var(--chart-2))", + "3": "hsl(var(--chart-3))", + "4": "hsl(var(--chart-4))", + "5": "hsl(var(--chart-5))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + + letterSpacing: { + widest: ".5rem", + }, + }, }, plugins: [require("tailwindcss-animate")], };