From 08c3127390a7733b4c8aa70c9a7dd45df1b777ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D8=AD=D8=B3=DB=8C=D9=86=20=D9=85=D8=B9=D8=B5=D9=88=D9=85?= =?UTF-8?q?=DB=8C=20=D9=BE=D9=88=D8=B1?= Date: Mon, 5 Feb 2024 01:40:57 +0330 Subject: [PATCH] init 2 --- .env | 14 +- Contexts/AppContext.js | 7 + components/Cards/CardCart/page.jsx | 106 +++ components/Cards/CardCategories/page.jsx | 166 +++-- .../Cards/CardCategoriesMobile/page.jsx | 103 ++- components/Cards/CardNormal/page.jsx | 115 +++ components/Category/FilterCategory/page.jsx | 171 +++++ components/Category/ListProdocts/page.jsx | 137 ++++ .../Mobile/FilterCategoryMobile/page.jsx | 129 ++++ .../Mobile/ListProductsMobile/page.jsx | 19 + .../Category/PaginationCategoory/page.jsx | 87 +++ components/Footer/page.jsx | 3 +- .../LandingPage/SurpriseSection/page.jsx | 684 +----------------- components/Login/LoginStep.jsx | 42 ++ components/Login/SignUp.jsx | 50 ++ components/Login/VerifyCodeStep.jsx | 42 ++ components/Navbar/CartNavbar/page.jsx | 71 ++ .../Navbar/SideBarNavBarMobile/page.jsx | 78 ++ components/Navbar/page.jsx | 306 ++++---- package-lock.json | 196 ++++- package.json | 3 +- plugins/Loading/page.jsx | 7 +- plugins/bottomSheet/BottomSheetCart.jsx | 25 + src/app/categories/[id]/page.jsx | 437 ++--------- src/app/layout.jsx | 136 +++- src/app/login/page.jsx | 164 ++++- src/app/page.jsx | 20 +- src/app/products/[id]/page.jsx | 22 +- style/globals.css | 19 +- 29 files changed, 1936 insertions(+), 1423 deletions(-) create mode 100644 Contexts/AppContext.js create mode 100644 components/Cards/CardCart/page.jsx create mode 100644 components/Cards/CardNormal/page.jsx create mode 100644 components/Category/FilterCategory/page.jsx create mode 100644 components/Category/ListProdocts/page.jsx create mode 100644 components/Category/Mobile/FilterCategoryMobile/page.jsx create mode 100644 components/Category/Mobile/ListProductsMobile/page.jsx create mode 100644 components/Category/PaginationCategoory/page.jsx create mode 100644 components/Login/LoginStep.jsx create mode 100644 components/Login/SignUp.jsx create mode 100644 components/Login/VerifyCodeStep.jsx create mode 100644 components/Navbar/CartNavbar/page.jsx create mode 100644 components/Navbar/SideBarNavBarMobile/page.jsx create mode 100644 plugins/bottomSheet/BottomSheetCart.jsx diff --git a/.env b/.env index 126f813..a71ca81 100644 --- a/.env +++ b/.env @@ -1,8 +1,9 @@ NODE_ENV="development" +NEXT_PUBLIC_SERVER_URL=http://192.168.88.17:32770 +NEXT_PUBLIC_PUBLIC_URL=http://192.168.88.17:32770 +NEXT_PUBLIC_API_URL=http://192.168.88.17:32770/api +NEXT_PUBLIC_PACKAGE_VERSION=0.1.1 -NEXT_PUBLIC_SERVER_URL=http://192.168.88.12:32770 -NEXT_PUBLIC_PUBLIC_URL=http://192.168.88.12:32770 -NEXT_PUBLIC_API_URL=http://192.168.88.12:32770/api # SECURE_LOCAL_STORAGE_HASH_KEY=f1da2b2c7a4c446934267fea631102ec389b5b99 # NEXT_PUBLIC_API_URL_IMAGE=https://192.168.88.12:49154/Files/ReportImages @@ -14,8 +15,9 @@ NEXT_PUBLIC_API_URL=http://192.168.88.12:32770/api -# NEXT_PUBLIC_SERVER_URL=https://api.brizco.io -# NEXT_PUBLIC_PUBLIC_URL=https://api.brizco.io -# NEXT_PUBLIC_API_URL=https://api.brizco.io/api +# NEXT_PUBLIC_SERVER_URL=https://apinetinashop.visabartar.com +# NEXT_PUBLIC_PUBLIC_URL=https://apinetinashop.visabartar.com +# NEXT_PUBLIC_API_URL=https://apinetinashop.visabartar.com/api + # NEXT_PUBLIC_API_URL_IMAGE=https://api.macsonline.ir/Files/ReportImages # NEXT_PUBLIC_API_URL_BackUp=https://api.macsonline.ir/Files/BackUps \ No newline at end of file diff --git a/Contexts/AppContext.js b/Contexts/AppContext.js new file mode 100644 index 0000000..fbb8c92 --- /dev/null +++ b/Contexts/AppContext.js @@ -0,0 +1,7 @@ +"use client"; +import { createContext } from "react"; + +const AppContext = createContext({ + state: {}, +}); +export default AppContext; diff --git a/components/Cards/CardCart/page.jsx b/components/Cards/CardCart/page.jsx new file mode 100644 index 0000000..f1d5875 --- /dev/null +++ b/components/Cards/CardCart/page.jsx @@ -0,0 +1,106 @@ +"use client"; +import Image from "next/image"; +import PersianNumber from "plugins/PersianNumber"; +import React, { useContext } from "react"; +import p1 from "../../../public/images/product/1.png"; +import p2 from "../../../public/images/product/2.png"; +import AppContext from "@ctx/AppContext"; + +const CardCart = ({ data }) => { + const CTX = useContext(AppContext); + + console.log("data", data); + + return ( +
+
+ +
+
+

+ {data?.persianName} +

+ {data?.hasDiscount && ( +

+ {" "} + 3 عدد موجود انبار +

+ )} + +
+
+ {/*{cart.find(e=>id)}*/} + {data?.count < 0 ? ( +
+
CTX.AddItemToCart(data.id, data.persianName)} + > + + + +
+
+ ) : ( +
+
CTX.AddItemToCart(data.id)} + > +

+

+
+

+ +

+
CTX.RemoveItemFromCart(data.id)} + > +

-

+
+
+ )} +
+ +
+ {data?.hasDiscount ? ( +
+

+ + + +

+
+ {" "} +

+ +

+ تومان +
+
+ ) : ( +
+ {" "} +

+ +

+ تومان +
+ )} +
+
+
+
+ ); +}; + +export default CardCart; diff --git a/components/Cards/CardCategories/page.jsx b/components/Cards/CardCategories/page.jsx index 297c641..251a139 100644 --- a/components/Cards/CardCategories/page.jsx +++ b/components/Cards/CardCategories/page.jsx @@ -1,9 +1,16 @@ +"use client"; + import Image from "next/image"; import PersianNumber from "plugins/PersianNumber"; -import React from "react"; +import React, { useContext, useState } from "react"; import p1 from "../../../public/images/product/1.png"; +import AppContext from "@ctx/AppContext"; +import Link from "next/link"; + +const CardCategories = ({ data }) => { + const CTX = useContext(AppContext); + const cart = CTX.state.cart; -const CardCategories = () => { return (
<> @@ -14,89 +21,110 @@ const CardCategories = () => { // key={index} // onClick={() => handleRoutineShiftPlanWithDay(index)} > -
-
-
-

- - % + {data.hasDiscount && ( +

+
+
+

+ + % +

+
+
{" "} +
+ )} + {data.hasDiscount && ( +
+
+
+

اصالت کالا

+
+
{" "} +
+ )} + +
+ +
+
+

+ {data.persianName}{" "} +

+ {data.hasDiscount && ( +

+ {" "} + 3 عدد موجود انبار

-
-
{" "} -
{" "} -
-
-
-

اصالت کالا

-
-
{" "} -
{" "} -
- -
-
-

- لوسیون بدن سلامتی | mayasasdsdsda asdsad -

-

- {" "} - 3 عدد موجود انبار -

-
+ )} +
+
+
- {/*
-
- - - -
-
*/} -
-
- id)}*/} + {!cart.find((item) => item.id === data.id) ? ( +
+
+ CTX.AddItemToCart(data.id, data.persianName, data.cost) + } > - - + + + +
-
+ ) : ( +
+
+ CTX.AddItemToCart(data.id, data.persianName, data.cost) + } + > +

+

+
+

+ item.id === data.id).count} + /> +

+
CTX.RemoveItemFromCart(data.id)} + > +

-

+
+
+ )}
-
- {2 == 2 ? ( + {data.hasDiscount ? (

- +

{" "}

- +

تومان
@@ -105,7 +133,7 @@ const CardCategories = () => {
{" "}

- +

تومان
diff --git a/components/Cards/CardCategoriesMobile/page.jsx b/components/Cards/CardCategoriesMobile/page.jsx index bcb35fc..a5596e7 100644 --- a/components/Cards/CardCategoriesMobile/page.jsx +++ b/components/Cards/CardCategoriesMobile/page.jsx @@ -1,57 +1,96 @@ +"use client"; + import Image from "next/image"; import PersianNumber from "plugins/PersianNumber"; -import React from "react"; +import React, { useContext, useState } from "react"; import p1 from "../../../public/images/product/1.png"; -import p2 from "../../../public/images/product/2.png"; +import AppContext from "@ctx/AppContext"; +import Link from "next/link"; + +const CardCategoriesMobile = ({ data }) => { + const CTX = useContext(AppContext); + const cart = CTX.state.cart; + + console.log("data ", data, cart); -const CardCategoriesMobile = () => { return ( -
+
- +
-
+

- لوسیون بدن سلامتی | mayasasdsdsda asdsad -

-

- {" "} - 3 عدد موجود انبار + {data?.persianName}

+ {data?.hasDiscount && ( +

+ {" "} + 3 عدد موجود انبار +

+ )} -
+
-
-
- id)}*/} + {!cart.find((item) => item.id === data.id) ? ( +
+
+ CTX.AddItemToCart(data.id, data.persianName, data.cost) + } > - - + + + +
-
+ ) : ( +
+
+ CTX.AddItemToCart(data.id, data.persianName, data.cost) + } + > +

+

+
+

+ item.id === data.id).count} + /> +

+
CTX.RemoveItemFromCart(data.id)} + > +

-

+
+
+ )}
- {2 == 2 ? ( + {data?.hasDiscount ? (
-

+

- +

{" "}

- +

تومان
@@ -60,7 +99,7 @@ const CardCategoriesMobile = () => {
{" "}

- +

تومان
diff --git a/components/Cards/CardNormal/page.jsx b/components/Cards/CardNormal/page.jsx new file mode 100644 index 0000000..fe9444b --- /dev/null +++ b/components/Cards/CardNormal/page.jsx @@ -0,0 +1,115 @@ +"use client"; +import React, { useContext } from "react"; +import { SwiperSlide } from "swiper/react"; +import p1 from "../../../public/images/product/1.png"; +import p2 from "../../../public/images/product/2.png"; +import p3 from "../../../public/images/product/3.png"; +import p4 from "../../../public/images/product/4.png"; +import Image from "next/image"; +import PersianNumber from "plugins/PersianNumber"; +import AppContext from "@ctx/AppContext"; + +const CardNormal = (props) => { + const CTX = useContext(AppContext); + const cart = CTX.state.cart; + return ( + <> + {" "} + <> +
handleRoutineShiftPlanWithDay(index)} + > +
+
+

+ + % +

+
+
{" "} +
+ +
+
+

+ لوسیون بدن سلامتی | maya +

+

+ {" "} + 3 عدد موجود انبار +

+
+
+ +
+
+ {/*{cart.find(e=>id)}*/} + {2 == 1 ? ( +
+
CTX.AddItemToCart(123, 1)}> + + + +
+
+ ) : ( +
+
+

+

+
+

+ +

+
+

-

+
+
+ )} +
+ +
+ {2 == 2 ? ( + <> +

+ + + +

+
+ {" "} +

+ +

+ تومان +
+ + ) : ( +
+ {" "} +

+ +

+ تومان +
+ )} +
+
+ + ); +}; + +export default CardNormal; diff --git a/components/Category/FilterCategory/page.jsx b/components/Category/FilterCategory/page.jsx new file mode 100644 index 0000000..9119902 --- /dev/null +++ b/components/Category/FilterCategory/page.jsx @@ -0,0 +1,171 @@ +"use client"; +import React, { useContext, useEffect, useState } from "react"; +import { Switch } from "@headlessui/react"; +import RangeSlider from "plugins/RangeSlider/page"; +import PersianNumber from "plugins/PersianNumber"; +import AppContext from "@ctx/AppContext"; + +const FilterCategory = ({ + id, + setSelectedBrands, + selectedBrands, + setIsChecked, + isChecked, + rangePrice, + setRangePrice, + sortBy, + isRangePrice, +}) => { + const CTX = useContext(AppContext); + const brands = CTX.state.brands; + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleRangeChange = (values) => { + setRangePrice(values); + }; + + const handleFilterBrand = (name, id) => { + // Check if the brand is already selected + const isBrandSelected = selectedBrands.some((brand) => brand.id === id); + + if (!isBrandSelected) { + // If the brand is not already selected, add it to the state + setSelectedBrands((prevBrands) => [...prevBrands, { name, id }]); + } else { + // If the brand is already selected, remove it from the state + setSelectedBrands((prevBrands) => + prevBrands.filter((brand) => brand.id !== id) + ); + } + }; + + useEffect(() => { + CTX.fetchProducts( + id, + selectedBrands, + isChecked, + rangePrice[0], + rangePrice[1], + sortBy, + isRangePrice + ); + }, [selectedBrands, isChecked]); + + return ( +
+
+
+
+
+

برند

+
+ + + +
+
+ +
+ {brands?.map((e) => ( +
handleFilterBrand(e.name, e.id)}> +
+
d.id == e.id) + ? "bg-primary-200 p-1" + : "" + } `} + >
+

{e.name}

+
+
+ ))} +
+
+
+

فقط محصولات موجود

+ + Enable notifications + + +
+
+
+

محدوده قیمت

+
+ + + +
+
+
+ +
+ +
+
+

تا قیمت

+

+ +

+
+
+

از قیمت

+

+ +

+
+
+ +
+ +
+
+
+
+
+ ); +}; + +export default FilterCategory; diff --git a/components/Category/ListProdocts/page.jsx b/components/Category/ListProdocts/page.jsx new file mode 100644 index 0000000..3735370 --- /dev/null +++ b/components/Category/ListProdocts/page.jsx @@ -0,0 +1,137 @@ +"use client"; +import CardCategories from "@comp/Cards/CardCategories/page"; +import AppContext from "@ctx/AppContext"; +import PersianNumber from "plugins/PersianNumber"; +import React, { useContext, useEffect } from "react"; + +const ListProdocts = ({ + sortBy, + setSortBy, + rangePrice, + selectedBrands, + isChecked, + id, + isRangePrice, +}) => { + const CTX = useContext(AppContext); + const products = CTX.state.products; + + console.log("products", products); + + useEffect(() => { + CTX.fetchProducts( + id, + selectedBrands, + isChecked, + rangePrice, + rangePrice, + sortBy, + isRangePrice + ); + }, [sortBy]); + + return ( +
+
+
+
+
+
+

فیلتر بر اساس :

+
+ +
+
setSortBy(1)} + > +

+ پربازدید ترین +

+
+
setSortBy(2)} + > +

+ محبوب ترین +

+
+
setSortBy(3)} + > +

+ گران ترین +

+
+
setSortBy(4)} + > +

+ ارزان ترین +

+
+
setSortBy(5)} + > +

+ پرفروش ترین +

+
+
+
+ +
+

+ + کالا +

+
+
+
+ +
+ <>{products && products.map((e) => )} +
+
+
+ ); +}; + +export default ListProdocts; diff --git a/components/Category/Mobile/FilterCategoryMobile/page.jsx b/components/Category/Mobile/FilterCategoryMobile/page.jsx new file mode 100644 index 0000000..16813a5 --- /dev/null +++ b/components/Category/Mobile/FilterCategoryMobile/page.jsx @@ -0,0 +1,129 @@ +"use client"; +import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page"; +import AppContext from "@ctx/AppContext"; +import React, { useContext } from "react"; + +const FilterCategoryMobile = (props) => { + const CTX = useContext(AppContext); + + return ( + <> +
+
+
{ + CTX.setCloseNavbar(true); + }} + > +
+ + + +
+
+
+ + +
+
+ + + +
+
+
+ +
+
+
+ + + + + + +
+

فیلتر ها

+
+
+
+ + + +
+

ترند ها

+
+
+ + + + ); +}; + +export default FilterCategoryMobile; diff --git a/components/Category/Mobile/ListProductsMobile/page.jsx b/components/Category/Mobile/ListProductsMobile/page.jsx new file mode 100644 index 0000000..ed68ede --- /dev/null +++ b/components/Category/Mobile/ListProductsMobile/page.jsx @@ -0,0 +1,19 @@ +"use client"; +import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page"; +import CardNormal from "@comp/Cards/CardNormal/page"; +import AppContext from "@ctx/AppContext"; +import React, { useContext } from "react"; + +const ListProductsMobile = (props) => { + const CTX = useContext(AppContext); + + const products = CTX.state.products; + + return ( +
+ <>{products && products.map((e) => )} +
+ ); +}; + +export default ListProductsMobile; diff --git a/components/Category/PaginationCategoory/page.jsx b/components/Category/PaginationCategoory/page.jsx new file mode 100644 index 0000000..8f304c8 --- /dev/null +++ b/components/Category/PaginationCategoory/page.jsx @@ -0,0 +1,87 @@ +import PersianNumber from "plugins/PersianNumber"; +import React from "react"; + +const PaginationCategoory = (props) => { + return ( +
+
+ + + +
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+

+ +

+
+
+ + + +
+
+ ); +}; + +export default PaginationCategoory; diff --git a/components/Footer/page.jsx b/components/Footer/page.jsx index e412ec8..919d7e4 100644 --- a/components/Footer/page.jsx +++ b/components/Footer/page.jsx @@ -159,7 +159,8 @@ const Footer = () => {

استفاده از مطالب فروشگاه شاواز فقط برای مقاصد غیرتجاری و باذکر منبع - بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد. + بلامانع است. کلیه حقوق این سایت متعلق به شرکت وسمه می باشد. ورژن + {process.env.NEXT_PUBLIC_PACKAGE_VERSION}

diff --git a/components/LandingPage/SurpriseSection/page.jsx b/components/LandingPage/SurpriseSection/page.jsx index 652c22f..33da682 100644 --- a/components/LandingPage/SurpriseSection/page.jsx +++ b/components/LandingPage/SurpriseSection/page.jsx @@ -7,6 +7,7 @@ import p1 from "../../../public/images/product/1.png"; import p2 from "../../../public/images/product/2.png"; import p3 from "../../../public/images/product/3.png"; import p4 from "../../../public/images/product/4.png"; +import CardNormal from "@comp/Cards/CardNormal/page"; const SurpriseSection = () => { return ( @@ -46,7 +47,7 @@ const SurpriseSection = () => { className="rtl relative mt-5" breakpoints={{ 320: { - slidesPerView: 1.6, + slidesPerView: 1.4, }, 480: { slidesPerView: 2, @@ -63,688 +64,13 @@ const SurpriseSection = () => { }} > - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیون بدن سلامتی | maya -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
+ - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- سلامتی | maya -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
+ - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیو -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
- - - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیون |mexicano milanono -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
- - - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیون بدن سلامتی | maya -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
- - - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیون بدن سلامتی | maya -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
- {/*
-
- - - -
-
*/} -
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
- - - <> -
handleRoutineShiftPlanWithDay(index)} - > -
-
-

- - % -

-
-
{" "} -
- -
-
-

- لوسیون بدن سلامتی | maya -

-

- {" "} - 3 عدد موجود انبار -

-
-
- - -
-
-
-
- - - -
-
-
- -
- {2 == 2 ? ( - <> -

- - - -

-
- {" "} -

- -

- تومان -
- - ) : ( -
- {" "} -

- -

- تومان -
- )} -
-
+
diff --git a/components/Login/LoginStep.jsx b/components/Login/LoginStep.jsx new file mode 100644 index 0000000..e5e389d --- /dev/null +++ b/components/Login/LoginStep.jsx @@ -0,0 +1,42 @@ +"use client"; +import React from "react"; + +const LoginStep = ({ phoneNumber, setPhoneNumber, ConfirmPhoneNumber }) => { + return ( +
+

ورود / ثبت نام

+

+ شماره موبایل خود را وارد کنید +

+ +
+ setPhoneNumber(e.target.value)} + /> + +
+ +
+ +
+

+ با ورود و یا ثبت نام در وسمه شما{" "} + + شرایط و قوانین + {" "} + استفاده از سرویس های سایت شاواز و قوانین حریم خصوصی آن را می پذیرید. +

+
+
+
+ ); +}; + +export default LoginStep; diff --git a/components/Login/SignUp.jsx b/components/Login/SignUp.jsx new file mode 100644 index 0000000..00afdd8 --- /dev/null +++ b/components/Login/SignUp.jsx @@ -0,0 +1,50 @@ +import React from "react"; + +const SignUp = ({ setLastName, setFirstName, SignUpLogin }) => { + return ( +
+

مشخصات را وارد کنید

+ +
+
+ + setFirstName(e.target.value)} + /> +
+ +
+ + setLastName(e.target.value)} + /> +
+ +
+ +
+ +
+

+ با ورود و یا ثبت نام در وسمه شما{" "} + + شرایط و قوانین + {" "} + استفاده از سرویس های سایت شاواز و قوانین حریم خصوصی آن را می پذیرید. +

+
+
+
+ ); +}; + +export default SignUp; diff --git a/components/Login/VerifyCodeStep.jsx b/components/Login/VerifyCodeStep.jsx new file mode 100644 index 0000000..7fc8513 --- /dev/null +++ b/components/Login/VerifyCodeStep.jsx @@ -0,0 +1,42 @@ +"use client"; +import PersianNumber from "plugins/PersianNumber"; +import React from "react"; + +const VerifyCodeStep = ({ + LoginWhitVerifyCode, + setVerifyCode, + verifyCode, + phoneNumber, +}) => { + return ( +
+

+ {" "} + پیامک حاوی کد تایید برای شماره + + + + ارسال شده است +

+ +
+ setVerifyCode(e.target.value)} + /> +
+
+ +
+
+ ); +}; + +export default VerifyCodeStep; diff --git a/components/Navbar/CartNavbar/page.jsx b/components/Navbar/CartNavbar/page.jsx new file mode 100644 index 0000000..747041c --- /dev/null +++ b/components/Navbar/CartNavbar/page.jsx @@ -0,0 +1,71 @@ +"use client"; +import CardCart from "@comp/Cards/CardCart/page"; +import AppContext from "@ctx/AppContext"; +import PersianNumber from "plugins/PersianNumber"; +import React, { useContext, useState } from "react"; + +const CartNavbar = (props) => { + const CTX = useContext(AppContext); + const cart = CTX.state.cart; + const [smallBasket, setSmallBasket] = useState(false); + + return ( +
+
setSmallBasket(true)} + onClick={() => setSmallBasket(false)} + > +

سبد خرید

+
+ + {smallBasket && ( +
setSmallBasket(true)} + onMouseLeave={() => setSmallBasket(false)} + > +
+
+

+ + محصول موجود در سبد +

+ + {/*
*/} +
+ {cart.map((e) => ( + + ))} +
+
+ +
+ {/*
+

+ جمع کل : + + تومان +

+
*/} + +
+
+
+ )} +
+ ); +}; + +export default CartNavbar; diff --git a/components/Navbar/SideBarNavBarMobile/page.jsx b/components/Navbar/SideBarNavBarMobile/page.jsx new file mode 100644 index 0000000..f1780b3 --- /dev/null +++ b/components/Navbar/SideBarNavBarMobile/page.jsx @@ -0,0 +1,78 @@ +"use client"; +import Image from "next/image"; +import React, { useContext } from "react"; +import logo from "../../../public/images/logo.png"; +import Link from "next/link"; +import AppContext from "@ctx/AppContext"; + +const SideBarNavBarMobile = () => { + const CTX = useContext(AppContext); + + const closeNavbar = CTX.state.closeNavbar; + console.log("closeNavbar", closeNavbar); + return ( + <> +
+
+
+
CTX.setCloseNavbar(false) + // setOpenResIgType(false) & + // setResponsiveNavBarItemStep(0) + } + >
+
+
+
+
+
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+
+
+
+
+
+
+ + ); +}; + +export default SideBarNavBarMobile; diff --git a/components/Navbar/page.jsx b/components/Navbar/page.jsx index 06e3cb1..f66d65c 100644 --- a/components/Navbar/page.jsx +++ b/components/Navbar/page.jsx @@ -1,5 +1,5 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect, useState } from "react"; import Image from "next/image"; import logo from "../../public/images/logo.png"; import logoWhite from "../../public/images/logo-white.png"; @@ -11,16 +11,21 @@ import { Menu } from "@headlessui/react"; import { motion } from "framer-motion"; import Link from "next/link"; import PersianNumber from "plugins/PersianNumber"; -import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page"; +import CartNavbar from "./CartNavbar/page"; +import AppContext from "@ctx/AppContext"; +import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart"; +import { BottomSheet } from "react-spring-bottom-sheet"; + +const Navbar = ({ theme }) => { + const CTX = useContext(AppContext); + const dataNav = CTX.state.navData; + const cart = CTX.state.cart; -const Navbar = ({ theme, dataNav }) => { - console.log(dataNav); const [navItemHover, setNavItemHover] = useState(null); const [isDesktop, setIsDesktop] = useState(null); const [closeNavbar, setClosNavbar] = useState(false); const [isScrolled, setIsScrolled] = useState(false); const [smallDashboard, setSmallDashboard] = useState(false); - const [smallBasket, setSmallBasket] = useState(false); const handleItemNavber = (index) => { setNavItemHover(index); @@ -67,11 +72,13 @@ const Navbar = ({ theme, dataNav }) => { theme == 0 ? "border-white" : "border-black" } `} > - + + +
- {2 == 2 ? ( + {1 == 2 ? (
ورود / عضویت{" "} @@ -150,63 +157,7 @@ const Navbar = ({ theme, dataNav }) => {
)} -
-
setSmallBasket(true)} - onClick={() => setSmallBasket(false)} - > -

سبد خرید

-
- - {smallBasket && ( -
setSmallBasket(true)} - onMouseLeave={() => setSmallBasket(false)} - > -
-
-

- - محصول موجود در سبد -

- - {/*
*/} -
- - - - - -
-
- -
-
-

- جمع کل : - - تومان -

-
- -
-
-
- )} -
+
@@ -283,9 +234,11 @@ const Navbar = ({ theme, dataNav }) => {
  • -

    - {e.name} -

    + +

    + {e.name} +

    + {e.children.length > 0 && (
    @@ -313,12 +266,14 @@ const Navbar = ({ theme, dataNav }) => { {e.children && e.children.length > 0 && (
    {e.children.map((child) => ( -

    - {child.name} -

    + +

    + {child.name} +

    + ))}
    )} @@ -382,102 +337,121 @@ const Navbar = ({ theme, dataNav }) => {
    -
    setClosNavbar(true)}> - - - - - - - - -
    -
    -
    -
    -
    -
    setClosNavbar(false) - // setOpenResIgType(false) & - // setResponsiveNavBarItemStep(0) - } - >
    -
    -
    -
    -
    -
    - -
    - -
    - - - -
    - -
    - - - -
    - -
    - - -
    +
    +
    + {1 == 2 ? ( +
    +
    + ورود / عضویت{" "}
    + ) : ( +
    +
    +
    setSmallDashboard(!smallDashboard)} + > +

    حسین معصومی پور

    +
    + + {smallDashboard && ( +
    setSmallDashboard(true)} + onMouseLeave={() => setSmallDashboard(false)} + > +
    +
    +
      +
    • +
      +

      + داشبورد +

      +
      +
      +
      • + +
    • +
      +

      + سفارشات +

      +
      +
      +
      • + +
    • +
      +

      + پیگیری سفارش +

      +
      +
      +
      • + +
    • +
      +

      + پشتیبانی{" "} +

      +
      +
      +
      • + +
    • +

      + خروج{" "} +

      +
      +
      • +
    +
    +
    +
    + )} +
    +
    + )} +
    + +
    CTX.setBottomSheetCart(true)} + > +
    +
    + +
    + + + +
    diff --git a/package-lock.json b/package-lock.json index 669133d..f1db0ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "react-dom": "^18", "react-grid-gallery": "^1.0.1-alpha.0", "react-image-gallery": "^1.3.0", + "react-spring-bottom-sheet": "^3.4.1", "react-toastify": "^9.1.3", "swiper": "^11.0.5" }, @@ -228,6 +229,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@next/env": { "version": "14.0.4", "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz", @@ -432,6 +438,11 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@typescript-eslint/parser": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.14.0.tgz", @@ -935,6 +946,11 @@ "readable-stream": "^3.4.0" } }, + "node_modules/body-scroll-lock": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz", + "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==" + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2102,6 +2118,14 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/focus-trap": { + "version": "6.9.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz", + "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==", + "dependencies": { + "tabbable": "^5.3.3" + } + }, "node_modules/follow-redirects": { "version": "1.15.4", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz", @@ -3399,7 +3423,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3870,7 +3893,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3988,8 +4010,111 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "dependencies": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/react-spring-bottom-sheet": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/react-spring-bottom-sheet/-/react-spring-bottom-sheet-3.4.1.tgz", + "integrity": "sha512-yDFqiPMm/fjefjnOe6Q9zxccbCl6HMUKsK5bWgfGHJIj4zmXVKio5d4icQvmOLuwpuCA2pwv4J6nGWS6fUZidQ==", + "dependencies": { + "@juggle/resize-observer": "^3.2.0", + "@reach/portal": "^0.13.0", + "@xstate/react": "^1.2.0", + "body-scroll-lock": "^3.1.5", + "focus-trap": "^6.2.2", + "react-spring": "^8.0.27", + "react-use-gesture": "^8.0.1", + "xstate": "^4.15.1" + }, + "peerDependencies": { + "react": "^16.14.0 || 17 || 18" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@reach/portal": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/@reach/portal/-/portal-0.13.2.tgz", + "integrity": "sha512-g74BnCdtuTGthzzHn2cWW+bcyIYb0iIE/yRsm89i8oNzNgpopbkh9UY8TPbhNlys52h7U60s4kpRTmcq+JqsTA==", + "dependencies": { + "@reach/utils": "0.13.2", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "react": "^16.8.0 || 17.x", + "react-dom": "^16.8.0 || 17.x" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@reach/portal/node_modules/@reach/utils": { + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/@reach/utils/-/utils-0.13.2.tgz", + "integrity": "sha512-3ir6cN60zvUrwjOJu7C6jec/samqAeyAB12ZADK+qjnmQPdzSYldrFWwDVV5H0WkhbYXR3uh+eImu13hCetNPQ==", + "dependencies": { + "@types/warning": "^3.0.0", + "tslib": "^2.1.0", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": "^16.8.0 || 17.x", + "react-dom": "^16.8.0 || 17.x" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/@xstate/react": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@xstate/react/-/react-1.6.3.tgz", + "integrity": "sha512-NCUReRHPGvvCvj2yLZUTfR0qVp6+apc8G83oXSjN4rl89ZjyujiKrTff55bze/HrsvCsP/sUJASf2n0nzMF1KQ==", + "dependencies": { + "use-isomorphic-layout-effect": "^1.0.0", + "use-subscription": "^1.3.0" + }, + "peerDependencies": { + "@xstate/fsm": "^1.0.0", + "react": "^16.8.0 || ^17.0.0", + "xstate": "^4.11.0" + }, + "peerDependenciesMeta": { + "@xstate/fsm": { + "optional": true + }, + "xstate": { + "optional": true + } + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/react-dom": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", + "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" + }, + "peerDependencies": { + "react": "17.0.2" + } + }, + "node_modules/react-spring-bottom-sheet/node_modules/scheduler": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", + "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } }, "node_modules/react-toastify": { "version": "9.1.3", @@ -4003,6 +4128,15 @@ "react-dom": ">=16" } }, + "node_modules/react-use-gesture": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-8.0.1.tgz", + "integrity": "sha512-CXzUNkulUdgouaAlvAsC5ZVo0fi9KGSBSk81WrE4kOIcJccpANe9zZkAYr5YZZhqpicIFxitsrGVS4wmoMun9A==", + "deprecated": "This package is no longer maintained. Please use @use-gesture/react instead", + "peerDependencies": { + "react": ">= 16.8.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4591,6 +4725,11 @@ "node": ">= 4.7.0" } }, + "node_modules/tabbable": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", + "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==" + }, "node_modules/tailwindcss": { "version": "3.4.0", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.0.tgz", @@ -4884,11 +5023,51 @@ "punycode": "^2.1.0" } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/use-subscription": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.8.0.tgz", + "integrity": "sha512-LISuG0/TmmoDoCRmV5XAqYkd3UCBNM0ML3gGBndze65WITcsExCD3DTvXXTLyNcOC0heFQZzluW88bN/oC1DQQ==", + "dependencies": { + "use-sync-external-store": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", @@ -5019,6 +5198,15 @@ "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", "dev": true }, + "node_modules/xstate": { + "version": "4.38.3", + "resolved": "https://registry.npmjs.org/xstate/-/xstate-4.38.3.tgz", + "integrity": "sha512-SH7nAaaPQx57dx6qvfcIgqKRXIh4L0A1iYEqim4s1u7c9VoCgzZc+63FY90AKU4ZzOC2cfJzTnpO4zK7fCUzzw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/xstate" + } + }, "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", diff --git a/package.json b/package.json index fd98654..afd2809 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vesmeh", - "version": "0.1.0", + "version": "0.1.1", "private": true, "scripts": { "dev": "next dev", @@ -19,6 +19,7 @@ "react-dom": "^18", "react-grid-gallery": "^1.0.1-alpha.0", "react-image-gallery": "^1.3.0", + "react-spring-bottom-sheet": "^3.4.1", "react-toastify": "^9.1.3", "swiper": "^11.0.5" }, diff --git a/plugins/Loading/page.jsx b/plugins/Loading/page.jsx index 27708d5..82f6e8c 100644 --- a/plugins/Loading/page.jsx +++ b/plugins/Loading/page.jsx @@ -1,8 +1,6 @@ +"use client"; import React, { useContext } from "react"; - import AppContext from "@ctx/AppContext"; -import gif from "@img/loading.gif"; -import Image from "next/image"; const Loading = ({ rateId }) => { const CTX = useContext(AppContext); @@ -17,9 +15,6 @@ const Loading = ({ rateId }) => { >

    لطفا صبر کنید

    -
    - -
    diff --git a/plugins/bottomSheet/BottomSheetCart.jsx b/plugins/bottomSheet/BottomSheetCart.jsx new file mode 100644 index 0000000..a4c4945 --- /dev/null +++ b/plugins/bottomSheet/BottomSheetCart.jsx @@ -0,0 +1,25 @@ +"use client"; + +import AppContext from "@ctx/AppContext"; +import React, { useContext } from "react"; +import { BottomSheet } from "react-spring-bottom-sheet"; +import { toast } from "react-toastify"; + +const BottomSheetCart = (props) => { + const CTX = useContext(AppContext); + + return ( + CTX.setBottomSheetCart(false)} + > +
    +

    افزودن نقش جدید

    +
    + +
    +     + ); +}; + +export default BottomSheetCart; diff --git a/src/app/categories/[id]/page.jsx b/src/app/categories/[id]/page.jsx index 3710fa0..f736038 100644 --- a/src/app/categories/[id]/page.jsx +++ b/src/app/categories/[id]/page.jsx @@ -1,412 +1,75 @@ "use client"; -import CardCategories from "@comp/Cards/CardCategories/page"; -import CardSurprise from "@comp/Cards/CardSurprise/page"; import Navbar from "@comp/Navbar/page"; -import PersianNumber from "plugins/PersianNumber"; -import React, { useState } from "react"; -import { Switch } from "@headlessui/react"; -import RangeSlider from "plugins/RangeSlider/page"; +import React, { useContext, useEffect, useState } from "react"; import Footer from "@comp/Footer/page"; -import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page"; +import ListProdocts from "@comp/Category/ListProdocts/page"; +import FilterCategoryMobile from "@comp/Category/Mobile/FilterCategoryMobile/page"; +import FilterCategory from "@comp/Category/FilterCategory/page"; +import ListProductsMobile from "@comp/Category/Mobile/ListProductsMobile/page"; +import PaginationCategoory from "@comp/Category/PaginationCategoory/page"; +import AppContext from "@ctx/AppContext"; -const page = () => { +export default function page({ params }) { + // const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product?page=0`); + // const products = await res.json(); + const CTX = useContext(AppContext); const [isChecked, setIsChecked] = useState(false); + const [selectedBrands, setSelectedBrands] = useState([]); + const [rangePrice, setRangePrice] = useState([1000, 100]); + const [isRangePrice, setIsRangePrice] = useState(false); + const [sortBy, setSortBy] = useState(null); - const handleCheckboxChange = () => { - setIsChecked(!isChecked); + const fetchBarnds = async () => { + const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/brand`); + const brands = await res.json(); + CTX.setBrands(brands); }; - const handleRangeChange = (values) => { - console.log("Range values:", values); - }; + useEffect(() => { + CTX.fetchProducts(params.id); + fetchBarnds(); + }, []); return ( <>
    -
    -
    - - -
    -
    - - - -
    -
    -
    - - {/*
    -

    سلاکم

    - - {" "} - - - - -

    خانه اصلی

    -
    */} - -
    -
    -
    - - - - - - -
    -

    فیلتر ها

    -
    -
    -
    - - - -
    -

    ترند ها

    -
    -
    - -
    - - - - -
    -
    -
    -
    -
    -
    -

    برند

    -
    - - - -
    -
    -
    -

    - فقط محصولات موجود{" "} -

    - - Enable notifications - - -
    -
    -
    -

    محدوده قیمت

    -
    - - - -
    -
    -
    - -
    - -
    -
    -

    تا قیمت

    -

    - -

    -
    -
    -

    تا قیمت

    -

    - -

    -
    -
    - -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    -

    - {" "} - فیلتر بر اساس : -

    -
    - -
    -
    -

    - پرفروش ترین -

    -
    -
    -

    - کم فروش ترین -

    -
    -
    -

    - ارزان ترین -

    -
    -
    -

    - گران ترین -

    -
    -
    -

    - اقتصادی ترین -

    -
    -
    -
    - -
    -

    - - کالا -

    -
    -
    -
    - -
    - - - - - - - - - - - - - - - - - -
    -
    -
    + +
    -
    -
    -
    - - - -
    -
    -

    - -

    -
    -
    -

    - -

    -
    -
    -

    - -

    -
    -
    -

    - -

    -
    -
    -

    - -

    -
    -
    - - - +
    + +
    + +
    ); -}; - -export default page; +} diff --git a/src/app/layout.jsx b/src/app/layout.jsx index cb2d4f7..b5f5a52 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -1,18 +1,138 @@ +"use client"; import "../../style/globals.css"; import "../../style/fontiran.css"; import "swiper/css"; import "react-image-gallery/styles/css/image-gallery.css"; import Chapar from "plugins/Chapar"; +import AppContext from "@ctx/AppContext"; +import { useEffect, useState } from "react"; +import "react-toastify/dist/ReactToastify.css"; +import { ToastContainer } from "react-toastify"; +import Loading from "plugins/Loading/page"; -export const metadata = { - title: "Create Next App", - description: "Generated by create next app", -}; +export default function RootLayout({ children }) { + const [cart, setCart] = useState([]); + const [products, setProducts] = useState([]); + const [navData, setNavData] = useState([]); + const [brands, setBrands] = useState([]); + const [loading, setLoading] = useState(false); + const [closeNavbar, setCloseNavbar] = useState(false); + const [bottomSheetCart, setBottomSheetCart] = useState(false); + + const AddItemToCart = (id, persianName, cost) => { + console.log("persianName", persianName); + setCart((prevCart) => { + // Check if the item is already in the cart + const existingItem = prevCart.find((item) => item.id === id); + + if (existingItem) { + // If the item is already in the cart, update its count + return prevCart.map((item) => + item.id === id ? { ...item, count: item.count + 1 } : item + ); + } else { + // If the item is not in the cart, add it with a count of 1 + return [...prevCart, { id, count: 1, persianName, cost }]; + } + }); + }; + + const RemoveItemFromCart = (id) => { + setCart((prevCart) => { + // Check if the item is already in the cart + const existingItem = prevCart.find((item) => item.id === id); + + if (existingItem) { + // If the item is already in the cart + if (existingItem.count === 1) { + // If the item count is 1, remove it from the cart + return prevCart.filter((item) => item.id !== id); + } else { + // If the item count is greater than 1, update its count + return prevCart.map((item) => + item.id === id ? { ...item, count: item.count - 1 } : item + ); + } + } else { + // If the item is not in the cart, do nothing + return prevCart; + } + }); + }; + + const fetchNavData = async (id) => { + const res = await fetch( + `${process.env.NEXT_PUBLIC_API_URL}/product/category?sortByMain=true` + ); + const post = await res.json(); + setNavData(post); + }; + + const fetchProducts = async ( + id, + selectedBrands, + isChecked, + minPrice, + maxPrice, + sort, + isRangePrice + ) => { + const brandIds = selectedBrands?.map((brand) => brand.id); + + const queryString = `page=0${id ? `&categoryId=${id}` : ""}${ + brandIds?.length > 0 ? `&brandIds=${brandIds?.join("&brandIds=")}` : "" + }${isChecked ? `&isActive=${isChecked}` : ""}${ + isRangePrice ? `&minPrice=${minPrice}` : "" + }${isRangePrice ? `&maxPrice=${maxPrice}` : ""}${ + !!sort ? `&sortBy=${sort}` : "" + }`; + + const cleanQueryString = decodeURIComponent( + queryString.replace(/\%20/g, " ") + ); + const res = await fetch( + `${process.env.NEXT_PUBLIC_API_URL}/product?${cleanQueryString}` + ); + const post = await res.json(); + setProducts(post); + }; + + useEffect(() => { + fetchNavData(); + }, []); -export default async function RootLayout({ children }) { return ( - - {children} - + + + + {children} + + + + + ); } diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx index 101f514..f4449a0 100644 --- a/src/app/login/page.jsx +++ b/src/app/login/page.jsx @@ -1,8 +1,118 @@ -import React from "react"; +"use client"; +import React, { useContext, useState } from "react"; import logo from "../../../public/images/logo.png"; import Image from "next/image"; +import Chapar from "plugins/Chapar"; +import { toast } from "react-toastify"; +import PersianNumber from "plugins/PersianNumber"; +import LoginStep from "@comp/Login/LoginStep"; +import VerifyCodeStep from "@comp/Login/VerifyCodeStep"; +import SignUp from "@comp/Login/SignUp"; +import { useRouter } from "next/navigation"; +import AppContext from "@ctx/AppContext"; const Login = () => { + const CTX = useContext(AppContext); + + const [phoneNumber, setPhoneNumber] = useState(""); + const [verifyCode, setVerifyCode] = useState(""); + const [firstName, setFirstName] = useState(""); + const [lastName, setLastName] = useState(""); + const [stepLogin, setStepLogin] = useState(0); + + const router = useRouter(); + + const ConfirmPhoneNumber = async () => { + CTX.setLoading(true); + try { + const data = await Chapar.get( + `${process.env.NEXT_PUBLIC_API_URL}/auth/verifycode?phoneNumber=${phoneNumber}` + ); + setStepLogin(1); + localStorage.removeItem("token"); + CTX.setLoading(false); + } catch ({ error, status }) { + toast.error(" اطلاعات را صحیح وارد کنید ", { + position: "bottom-right", + closeOnClick: true, + }); + CTX.setLoading(false); + } + }; + + const LoginWhitVerifyCode = async () => { + CTX.setLoading(true); + + try { + const data = await Chapar.post( + `${process.env.NEXT_PUBLIC_API_URL}/auth/login/code`, + { + userName: phoneNumber, + password: null, + verifyCode, + } + ); + localStorage.setItem("token", "Bearer " + data.access_token); + + console.log(data); + + if (data.user.signUpStatus == 1) { + setStepLogin(2); + } else if (data.user.signUpStatus == 10) { + // setProfile(data); + toast.success(` ${data.user.firstName} جان خوش اومدی `, { + position: "bottom-right", + closeOnClick: true, + }); + router.push("/profile"); + } + + CTX.setLoading(false); + } catch ({ error, status }) { + toast.error(`${error?.response?.data?.message}`, { + position: "bottom-right", + closeOnClick: true, + }); + CTX.setLoading(false); + } + }; + + const SignUpLogin = async () => { + CTX.setLoading(true); + + try { + const data = await Chapar.post( + `${process.env.NEXT_PUBLIC_API_URL}/auth/signup`, + { lastName, firstName }, + { + headers: { + Authorization: localStorage.getItem("token"), + }, + } + ); + + CTX.setLoading(false); + + if (data.user.signUpStatus == 10) { + // setProfile(data); + + toast.success(` ${data.user.firstName} جان خوش اومدی `, { + position: "bottom-right", + closeOnClick: true, + }); + localStorage.setItem("token", data.access_token); + + router.push("/profile"); + } + } catch ({ error, status }) { + toast.error(`${error?.response?.data?.message}`, { + position: "bottom-right", + closeOnClick: true, + }); + CTX.setLoading(false); + } + }; + return (
    @@ -12,36 +122,28 @@ const Login = () => {
    -
    -

    ورود / ثبت نام

    -

    - شماره موبایل خود را وارد کنید -

    - -
    - - -
    - -
    - -
    -

    - با ورود و یا ثبت نام در وسمه شما{" "} - - شرایط و قوانین - {" "} - استفاده از سرویس های سایت شاواز و قوانین حریم خصوصی آن را می - پذیرید. -

    -
    -
    -
    {" "} + {stepLogin == 0 ? ( + + ) : stepLogin == 1 ? ( + + ) : stepLogin == 2 ? ( + + ) : ( + "" + )}
    diff --git a/src/app/page.jsx b/src/app/page.jsx index d0fc0a4..2288fa1 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -8,27 +8,11 @@ import BrandsLogoSection from "@comp/LandingPage/BrandsLogoSection/page"; import BeautySection from "@comp/LandingPage/BeautySection/page"; import HomeSection from "@comp/LandingPage/HomeSection/page"; -async function getData() { - const res = await fetch("http://192.168.88.12:32770/api/product/category"); - // The return value is *not* serialized - // You can return Date, Map, Set, etc. - - if (!res.ok) { - // This will activate the closest `error.js` Error Boundary - throw new Error("Failed to fetch data"); - } - - return res.json(); -} - -export default async function Page() { - const dataNav = await getData(); - +export default function Page() { return ( <>
    - - +
    diff --git a/src/app/products/[id]/page.jsx b/src/app/products/[id]/page.jsx index 46c9d92..b161721 100644 --- a/src/app/products/[id]/page.jsx +++ b/src/app/products/[id]/page.jsx @@ -1,13 +1,27 @@ +"use client"; import Footer from "@comp/Footer/page"; import Navbar from "@comp/Navbar/page"; import GalleryBox from "plugins/Gallery/page"; -import React from "react"; +import React, { useEffect, useState } from "react"; import l1 from "../../../../public/images/logobrand/2.png"; import Image from "next/image"; import PersianNumber from "plugins/PersianNumber"; -const page = () => { +const page = ({ params }) => { + const [product, setProduct] = useState([]); + const fetchPost = async (id) => { + const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`); + const post = await res.json(); + setProduct(post); + }; + + console.log("product", product); + + useEffect(() => { + fetchPost(params.id); + }, []); + return ( <> @@ -19,9 +33,7 @@ const page = () => {
    -

    - ماسک دو فاز مناسب موهای آسیب دیده تاپ شاپ ظرفیت 200 میلی لیتر -

    +

    {product.persianName}

    Top Shop Biphasic Hair Mask 200 ml

    diff --git a/style/globals.css b/style/globals.css index 11d47f6..8824319 100644 --- a/style/globals.css +++ b/style/globals.css @@ -139,21 +139,20 @@ body { background-size: var(--s) var(--s); } -.scroll-1 { - overflow: auto; - scrollbar-width: thin; /* Firefox */ - scrollbar-color: #2ab1da57 #b1b1b1; /* Firefox */ -} - /* Styles for WebKit browsers (Chrome, Safari) */ .scroll-1::-webkit-scrollbar { - width: 5px; + width: 6px; +} + +body::-webkit-scrollbar-track { + background: #f1f1f1; } .scroll-1::-webkit-scrollbar-thumb { - background-color: #2ab1da1c; + background: #88888842; + border-radius: 10px; } -.scroll-1::-webkit-scrollbar-track { - background-color: #f5f5f5; +.scroll-1::-webkit-scrollbar-thumb:hover { + background: #555; }