searchbar
parent
df200fdb51
commit
8358f25133
|
|
@ -6,4 +6,4 @@ NEXT_PUBLIC_PUBLIC_URL=https://api.vesmeh.com
|
|||
NEXT_PUBLIC_API_URL=https://api.vesmeh.com/api
|
||||
NEXT_PUBLIC_STORAGE_URL=http://storage.vesmeh.com
|
||||
STORAGE_URL=http://storage.vesmeh.com
|
||||
NEXT_PUBLIC_PACKAGE_VERSION=0.3.0
|
||||
NEXT_PUBLIC_PACKAGE_VERSION=0.3.1
|
||||
|
|
@ -8,25 +8,80 @@ import PaginationCategoory from "@comp/Category/PaginationCategoory/page";
|
|||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import { useContext, useEffect, useMemo, useState } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
|
||||
export default function CategoriesData({ params }) {
|
||||
console.log("params", params.id[0]);
|
||||
export default function CategoriesData({ params, products }) {
|
||||
console.log(", filters,....params", products);
|
||||
|
||||
const CTX = useContext(AppContext);
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
console.log("setStopProducts", CTX.state.stopProducts);
|
||||
if (
|
||||
Number(searchParams.get("page")) === 0 ||
|
||||
!Number(searchParams.get("page")) ||
|
||||
CTX.state.stopProducts
|
||||
) {
|
||||
CTX.setProducts(products.products);
|
||||
} else {
|
||||
CTX.setProducts([...CTX.state.products, ...products.products]);
|
||||
}
|
||||
CTX.setStopProducts(
|
||||
CTX.state.stopProducts || products?.products?.length < 20
|
||||
);
|
||||
CTX.setPager(products.pager);
|
||||
CTX.setFilter(products.filters);
|
||||
}, [products]);
|
||||
|
||||
const pageGetProducts = useMemo(
|
||||
() => (searchParams.get("page") ? Number(searchParams.get("page")) : 0),
|
||||
[searchParams]
|
||||
);
|
||||
const stopProducts = CTX.state.stopProducts;
|
||||
const pager = CTX.state.pager;
|
||||
const productsLength = CTX.state.products?.length ?? 0;
|
||||
console.log("stopProducts-handleInfiniteNextFetchProducts", productsLength);
|
||||
const pager = products.pager;
|
||||
const productsLength = CTX.state.products.length;
|
||||
const filter = CTX.state.filter;
|
||||
|
||||
const isChecked = CTX.state.isChecked;
|
||||
const selectedBrands = CTX.state.selectedBrands;
|
||||
const rangePrice = CTX.state.rangePrice;
|
||||
const isChecked = useMemo(
|
||||
() => Boolean(Number(searchParams.get("isActive"))),
|
||||
[searchParams]
|
||||
);
|
||||
const selectedBrands = useMemo(
|
||||
() =>
|
||||
searchParams.get("brandIds")
|
||||
? searchParams.get("brandIds").split(",")
|
||||
: [],
|
||||
[searchParams]
|
||||
);
|
||||
const rangePrice = useMemo(
|
||||
() => [
|
||||
searchParams.get("maxPrice")
|
||||
? Number(searchParams.get("maxPrice"))
|
||||
: filter?.price?.maximumValue,
|
||||
searchParams.get("minPrice")
|
||||
? Number(searchParams.get("minPrice"))
|
||||
: filter?.price?.minimumValue,
|
||||
],
|
||||
[searchParams]
|
||||
);
|
||||
const isRangePrice = CTX.state.isRangePrice;
|
||||
const sortBy = CTX.state.sortBy;
|
||||
const sortBy = useMemo(
|
||||
() => Number(searchParams.get("sortBy")),
|
||||
[searchParams]
|
||||
);
|
||||
|
||||
console.log(
|
||||
"filters",
|
||||
filter,
|
||||
isChecked,
|
||||
selectedBrands,
|
||||
rangePrice,
|
||||
isRangePrice,
|
||||
sortBy
|
||||
);
|
||||
|
||||
const fetchBarnds = async () => {
|
||||
const res = await fetch(
|
||||
|
|
@ -39,42 +94,43 @@ export default function CategoriesData({ params }) {
|
|||
};
|
||||
|
||||
const decodedName = decodeURIComponent(params.id[1]);
|
||||
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const handleInfiniteNextFetchProducts = () => {
|
||||
// Increment the page number
|
||||
const nextPage = pageGetProducts + 1;
|
||||
console.log("runeed-handleInfiniteNextFetchProducts", nextPage);
|
||||
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("page", nextPage);
|
||||
router.push(`${pathname}?${params}`, { scroll: false });
|
||||
|
||||
// Fetch products for the next page
|
||||
|
||||
CTX.fetchProducts(
|
||||
nextPage,
|
||||
params.id[0] != 0 ? params.id[0] : "",
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
rangePrice,
|
||||
rangePrice,
|
||||
sortBy != -1 ? sortBy : "",
|
||||
isRangePrice
|
||||
);
|
||||
// CTX.fetchProducts(
|
||||
// nextPage,
|
||||
// params.id[0] != 0 ? params.id[0] : "",
|
||||
// selectedBrands,
|
||||
// isChecked,
|
||||
// rangePrice,
|
||||
// rangePrice,
|
||||
// sortBy != -1 ? sortBy : "",
|
||||
// isRangePrice
|
||||
// );
|
||||
|
||||
// Update the pageGetProducts state for the next fetch
|
||||
CTX.setPageGetProducts(nextPage);
|
||||
// CTX.setPageGetProducts(nextPage);
|
||||
};
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const getData = async () => {
|
||||
setLoading(true);
|
||||
await CTX.fetchProducts(0, params.id[0] != 0 ? params.id[0] : "");
|
||||
// await CTX.fetchProducts(0, params.id[0] != 0 ? params.id[0] : "");
|
||||
await fetchBarnds();
|
||||
setLoading(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth", // Optional: smooth scrolling behavior
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
getData();
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import Goftino from "plugins/Goftino/page";
|
|||
import { useRouter } from "next/navigation";
|
||||
import NextTopLoader from "nextjs-toploader";
|
||||
import Yektanet from "plugins/Goftino/page";
|
||||
import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page";
|
||||
|
||||
const RootData = ({ children }) => {
|
||||
const [cart, setCart] = useState([]);
|
||||
|
|
@ -43,6 +44,14 @@ const RootData = ({ children }) => {
|
|||
const [pageGetProducts, setPageGetProducts] = useState(0);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [isOpenLightBox, setIsOpenLightBox] = useState(false);
|
||||
const [
|
||||
cooperationSystemProfileContractData,
|
||||
setCooperationSystemProfileContractData,
|
||||
] = useState("");
|
||||
const [cooperationSystemProfileData, setCooperationSystemProfileData] =
|
||||
useState([]);
|
||||
const [searchResultData, setSearchResultData] = useState([]);
|
||||
const [isSearched, setIsSearched] = useState(false);
|
||||
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [selectedBrands, setSelectedBrands] = useState([]);
|
||||
|
|
@ -367,6 +376,73 @@ const RootData = ({ children }) => {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchCooperationSystemProfile = async () => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/marketer/profile`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
console.log(
|
||||
"---------s---------",
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/marketer/profile`
|
||||
);
|
||||
setCooperationSystemProfileData(data);
|
||||
} catch ({ error, status }) {
|
||||
console.log(status);
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchCooperationSystemProfileContract = async () => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/marketer/signup/contract`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setCooperationSystemProfileContractData(data);
|
||||
} catch ({ error, status }) {
|
||||
console.log(status);
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const fetchSearchResult = async (searchValue) => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/search/thumb?name=${searchValue}`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setSearchResultData(data);
|
||||
} catch ({ error, status }) {
|
||||
console.log(status);
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const storedCart = localStorage.getItem("cart");
|
||||
const token = localStorage.getItem("token");
|
||||
|
|
@ -379,6 +455,7 @@ const RootData = ({ children }) => {
|
|||
}
|
||||
|
||||
fetchNavData();
|
||||
// fetchCooperationSystemProfile();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -437,6 +514,10 @@ const RootData = ({ children }) => {
|
|||
isChecked,
|
||||
orderUser,
|
||||
bottomSheetSeeOrderOpen,
|
||||
cooperationSystemProfileContractData,
|
||||
cooperationSystemProfileData,
|
||||
searchResultData,
|
||||
isSearched,
|
||||
},
|
||||
setCart,
|
||||
setProducts,
|
||||
|
|
@ -464,6 +545,9 @@ const RootData = ({ children }) => {
|
|||
setBottomSheetSeeOrderOpen,
|
||||
setIsChecked,
|
||||
setOrderUser,
|
||||
setCooperationSystemProfileContractData,
|
||||
setCooperationSystemProfileData,
|
||||
setIsSearched,
|
||||
AddItemToCart,
|
||||
RemoveItemFromCart,
|
||||
fetchNavData,
|
||||
|
|
@ -474,6 +558,10 @@ const RootData = ({ children }) => {
|
|||
fetchOrderBagCheck,
|
||||
fetchOrderUser,
|
||||
GoCheckOut,
|
||||
fetchCooperationSystemProfile,
|
||||
fetchCooperationSystemProfileContract,
|
||||
setSearchResultData,
|
||||
fetchSearchResult,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
|
@ -499,6 +587,7 @@ const RootData = ({ children }) => {
|
|||
|
||||
<Goftino />
|
||||
<Yektanet />
|
||||
<SideBarNavBarMobile />
|
||||
</AppContext.Provider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const Cart = ({ mainImage, title, categoryName, slug, id, summery }) => {
|
||||
console.log(process.env.NEXT_PUBLIC_STORAGE_URL + `/Images/Med/` + mainImage);
|
||||
return (
|
||||
<Link href={`/blogs/${id}/${slug}`}>
|
||||
<div className="bg-gray-100 rounded-3xl p-2 ">
|
||||
<div className="w-full h-[200px] overflow-hidden rounded-3xl">
|
||||
<div>
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${mainImage}`}
|
||||
width={500}
|
||||
height={500}
|
||||
className="w-full h-[200px] object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-right">
|
||||
<h3 className=" text-gray-500 font-medium">{title} </h3>
|
||||
<p className="mb-0 text-gray-400 text-sm text-right">{summery}</p>
|
||||
<div className="flex">
|
||||
<div className="bg-primary-200 rounded-2xl p-1 px-4 mt-3">
|
||||
<p className="mb-0 text-sm text-gray-200">{categoryName}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cart;
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
|
||||
const PaginationBlogs = ({ totalPage }) => {
|
||||
console.log("totalPage", totalPage);
|
||||
const CTX = useContext(AppContext);
|
||||
const searchParams = useSearchParams();
|
||||
const pager = totalPage;
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(
|
||||
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
||||
);
|
||||
useEffect(() => {
|
||||
console.log("pagesssss", Number(searchParams.get("page")));
|
||||
setCurrentPageIndex(
|
||||
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
||||
);
|
||||
}, [searchParams]);
|
||||
const renderPaginationButtons = () => {
|
||||
const buttons = [];
|
||||
const totalPages = pager?.totalPage;
|
||||
const maxButtonsToShow = 7; // Maximum buttons to show
|
||||
|
||||
// If total pages are greater than maxButtonsToShow
|
||||
if (totalPages > maxButtonsToShow) {
|
||||
// Show buttons for the first page
|
||||
buttons.push(renderPageButton(0));
|
||||
|
||||
// If current page is not too close to the start, show ellipsis
|
||||
if (currentPageIndex > 2) {
|
||||
buttons.push(renderEllipsis());
|
||||
}
|
||||
|
||||
// Calculate the start index for buttons
|
||||
const start = Math.max(1, currentPageIndex - 2);
|
||||
|
||||
// Calculate the end index for buttons
|
||||
const end = Math.min(currentPageIndex + 3, totalPages - 1);
|
||||
|
||||
// Show buttons for pages within range
|
||||
for (let i = start; i <= end; i++) {
|
||||
buttons.push(renderPageButton(i));
|
||||
}
|
||||
|
||||
// If current page is not too close to the end, show ellipsis
|
||||
if (currentPageIndex < totalPages - 4) {
|
||||
buttons.push(renderEllipsis());
|
||||
}
|
||||
|
||||
// Show button for the last page
|
||||
buttons.push(renderPageButton(totalPages - 1));
|
||||
} else {
|
||||
// Show buttons for all pages
|
||||
for (let i = 0; i < totalPages; i++) {
|
||||
buttons.push(renderPageButton(i));
|
||||
}
|
||||
}
|
||||
|
||||
return buttons;
|
||||
};
|
||||
|
||||
const renderPageButton = (pageIndex) => (
|
||||
<div
|
||||
key={pageIndex}
|
||||
className={`w-[25px] h-[25px] rounded-full tr03 bg-${
|
||||
currentPageIndex === pageIndex ? "secondary-500" : "primary-200"
|
||||
} mx-1 cursor-pointer`}
|
||||
onClick={() => handlePageClick(pageIndex)}
|
||||
>
|
||||
<p className="mb-0 text-center pt-[2px] text-white">
|
||||
<PersianNumber number={pageIndex + 1} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderEllipsis = () => (
|
||||
<div key="ellipsis" className="mx-1">
|
||||
...
|
||||
</div>
|
||||
);
|
||||
|
||||
const handlePageClick = (pageIndex) => {
|
||||
setCurrentPageIndex(pageIndex);
|
||||
// console.log("ss", i);
|
||||
// CTX.fetchProducts(
|
||||
// pageIndex,
|
||||
// props.id[0] != 0 ? props.id[0] : "",
|
||||
// props.selectedBrands,
|
||||
// props.isChecked,
|
||||
// props.rangePrice,
|
||||
// props.rangePrice,
|
||||
// props.sortBy != -1 ? props.sortBy : "",
|
||||
// props.isRangePrice,
|
||||
// true //pagination say or not
|
||||
// );
|
||||
const nextPage = pageIndex;
|
||||
console.log("runeed-handleInfiniteNextFetchProducts", nextPage);
|
||||
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("page", nextPage);
|
||||
router.push(`${pathname}?${params}`);
|
||||
// CTX.setStopProducts(true);
|
||||
// Your fetchProducts function call here
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center rtl mb-10">
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
{/* Previous page button */}
|
||||
</div>
|
||||
{renderPaginationButtons()}
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
{/* Next page button */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PaginationBlogs;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
h2 {
|
||||
color: rgb(0, 49, 155);
|
||||
|
||||
font-weight: 700;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
p {
|
||||
color: rgb(54, 54, 54);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: rgb(216, 16, 16);
|
||||
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 2px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
|
||||
const BlogData = ({ data }) => {
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
|
||||
<div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
|
||||
<div className="grid grid-cols-1 gap-7 rtl">
|
||||
<div className=" mt-10 ">
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/Images/Med/${data.mainImage}`}
|
||||
width={500}
|
||||
height={500}
|
||||
className="w-[400px]"
|
||||
/>
|
||||
<h1 className=" font-bold text-right xs:text-[20px] lg:text-[40px]">
|
||||
{data.title}
|
||||
</h1>
|
||||
<div></div>
|
||||
<div dangerouslySetInnerHTML={{ __html: data.content }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogData;
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
"use client";
|
||||
|
||||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
import Cart from "../BlogComponents/Cart";
|
||||
import PaginationBlogs from "../BlogComponents/PaginationBlogs";
|
||||
|
||||
const BlogsData = ({ dataCaetgories, data }) => {
|
||||
console.log(data);
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
|
||||
const searchParamsCurrentId = searchParams.get("blogCategoryId");
|
||||
const handleGoCategories = (id) => {
|
||||
// CTX.setIsChecked(!isChecked);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
|
||||
params.set("blogCategoryId", id);
|
||||
|
||||
params.set("page", "0");
|
||||
router.push(`${pathname}?${params}`);
|
||||
};
|
||||
|
||||
console.log("dataCaetgories", dataCaetgories);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
|
||||
<div className="xs:px-3 md:px-5 md:container md:mx-auto mb-10">
|
||||
<div className="grid xs:grid-cold-1 md:grid-cols-4 gap-7 ltr mt-10">
|
||||
<div className="xs:xol-span-1 lg:col-span-3">
|
||||
<div className="grid xs:grid-cold-1 md:grid-cols-3 gap-7 rtl ">
|
||||
{data?.blogs?.map((e) => (
|
||||
<Cart
|
||||
categoryName={e.categoryName}
|
||||
title={e.title}
|
||||
mainImage={e.mainImage}
|
||||
slug={e.slug}
|
||||
id={e.id}
|
||||
summery={e.summery}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-20">
|
||||
<PaginationBlogs totalPage={data?.pager} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-100 rounded-2xl p-5 relative h-fit rtl xs:w-full">
|
||||
<h3 className="text-center font-medium mb-5"> دسته بندی ها</h3>
|
||||
|
||||
<div>
|
||||
{dataCaetgories?.map((e) => (
|
||||
<div onClick={() => handleGoCategories(e.id)}>
|
||||
<div className="flex p-2">
|
||||
<div className="w-3 h-3 rounded-full bg-secondary-900 mt-1 ml-2"></div>
|
||||
<p className="mb-0"> {e.name}</p>
|
||||
<small className="text-sm mx-2 mt-[2px]">
|
||||
(
|
||||
<PersianNumber
|
||||
number={e.blogCount}
|
||||
style="text-primary-900 "
|
||||
/>
|
||||
)
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogsData;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { Switch } from "@headlessui/react";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import RangeSlider from "plugins/RangeSlider/page";
|
||||
import { useContext, useEffect, useRef } from "react";
|
||||
|
|
@ -15,36 +16,74 @@ const FilterCategory = ({
|
|||
theme,
|
||||
filter,
|
||||
}) => {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const CTX = useContext(AppContext);
|
||||
const brands = CTX.state.brands;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
const isFirstRender = useRef(true);
|
||||
console.log(filter);
|
||||
console.log("filter", filter);
|
||||
const router = useRouter();
|
||||
|
||||
const handleCheckboxChange = () => {
|
||||
CTX.setIsChecked(!isChecked);
|
||||
// CTX.setIsChecked(!isChecked);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (!isChecked) {
|
||||
params.set("isActive", Number(!isChecked));
|
||||
} else {
|
||||
params.delete("isActive");
|
||||
}
|
||||
params.set("page", "0");
|
||||
router.push(`${pathname}?${params}`);
|
||||
};
|
||||
|
||||
const handleRangeChange = (values) => {
|
||||
CTX.setIsRangePrice(true);
|
||||
// CTX.setIsRangePrice(true);
|
||||
console.log(values);
|
||||
CTX.setRangePrice(values);
|
||||
console.log("rangePrice", rangePrice);
|
||||
console.log("filters,values", values);
|
||||
// CTX.setRangePrice(values);
|
||||
// console.log("rangePrice", rangePrice);
|
||||
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("minPrice", values[0]);
|
||||
params.set("maxPrice", values[1]);
|
||||
params.set("page", "0");
|
||||
router.push(`${pathname}?${params}`, { scroll: false });
|
||||
};
|
||||
|
||||
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
|
||||
CTX.setSelectedBrands((prevBrands) => [...prevBrands, { name, id }]);
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
let brandIds = params.get("brandIds")
|
||||
? Array.from(params.get("brandIds").split(",") ?? [])
|
||||
: [];
|
||||
// console.log("handleFilterBrand", id, brandIds, brandIds.includes(id));
|
||||
if (brandIds.includes(id)) {
|
||||
brandIds = brandIds.filter((brandId) => brandId !== id);
|
||||
console.log("handleFilterBrand", brandIds);
|
||||
if (brandIds.length === 0) {
|
||||
params.delete("brandIds");
|
||||
router.push(`${pathname}?${params}`);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
// If the brand is already selected, remove it from the state
|
||||
CTX.setSelectedBrands((prevBrands) =>
|
||||
prevBrands.filter((brand) => brand.id !== id)
|
||||
);
|
||||
brandIds.push(id);
|
||||
}
|
||||
params.set("brandIds", brandIds.join(","));
|
||||
params.set("page", "0");
|
||||
console.log("handleFilterBrand", id, brandIds);
|
||||
router.push(`${pathname}?${params}`);
|
||||
// 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
|
||||
// CTX.setSelectedBrands((prevBrands) => [...prevBrands, { name, id }]);
|
||||
// } else {
|
||||
// // If the brand is already selected, remove it from the state
|
||||
// CTX.setSelectedBrands((prevBrands) =>
|
||||
// prevBrands.filter((brand) => brand.id !== id)
|
||||
// );
|
||||
// }
|
||||
};
|
||||
|
||||
const handleRangePriceFilter = () => {
|
||||
|
|
@ -60,30 +99,30 @@ const FilterCategory = ({
|
|||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isFirstRender.current) {
|
||||
isFirstRender.current = false;
|
||||
return;
|
||||
}
|
||||
// useEffect(() => {
|
||||
// if (isFirstRender.current) {
|
||||
// isFirstRender.current = false;
|
||||
// return;
|
||||
// }
|
||||
|
||||
CTX.fetchProducts(
|
||||
0,
|
||||
id[0] != 0 ? id[0] : "",
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
rangePrice[0],
|
||||
rangePrice[1],
|
||||
sortBy != -1 ? sortBy : "",
|
||||
isRangePrice
|
||||
);
|
||||
}, [CTX.state.selectedBrands, CTX.state.isChecked]);
|
||||
// CTX.fetchProducts(
|
||||
// 0,
|
||||
// id[0] != 0 ? id[0] : "",
|
||||
// selectedBrands,
|
||||
// isChecked,
|
||||
// rangePrice[0],
|
||||
// rangePrice[1],
|
||||
// sortBy != -1 ? sortBy : "",
|
||||
// isRangePrice
|
||||
// );
|
||||
// }, [CTX.state.selectedBrands, CTX.state.isChecked]);
|
||||
|
||||
useEffect(() => {
|
||||
CTX.setRangePrice([
|
||||
filter?.price?.minimumValue,
|
||||
filter?.price?.maximumValue,
|
||||
]);
|
||||
}, [filter]);
|
||||
// useEffect(() => {
|
||||
// CTX.setRangePrice([
|
||||
// filter?.price?.minimumValue,
|
||||
// filter?.price?.maximumValue,
|
||||
// ]);
|
||||
// }, [filter]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -129,7 +168,7 @@ const FilterCategory = ({
|
|||
<div className="flex my-2 cursor-pointer">
|
||||
<div
|
||||
className={` w-[30px] h-[30px] rounded-lg border ml-3 tr03 ${
|
||||
selectedBrands.find((d) => d.id == e.id)
|
||||
selectedBrands.find((id) => id == e.id)
|
||||
? "bg-primary-200 p-1"
|
||||
: ""
|
||||
} `}
|
||||
|
|
@ -149,7 +188,7 @@ const FilterCategory = ({
|
|||
>
|
||||
<p className="mb-0 lg:text-sm xl:text-base">فقط محصولات موجود </p>
|
||||
<Switch
|
||||
checked={isChecked}
|
||||
checked={Boolean(Number(searchParams.get("isActive")))}
|
||||
onChange={handleCheckboxChange}
|
||||
className={`${
|
||||
isChecked ? "bg-primary-500" : "bg-gray-400"
|
||||
|
|
@ -191,6 +230,7 @@ const FilterCategory = ({
|
|||
</div>
|
||||
<div className="mt-10 px-5">
|
||||
<RangeSlider
|
||||
values={rangePrice}
|
||||
min={filter?.price?.minimumValue}
|
||||
max={filter?.price?.maximumValue}
|
||||
onChange={(e) => handleRangeChange(e)}
|
||||
|
|
@ -201,25 +241,25 @@ const FilterCategory = ({
|
|||
<div className="w-full text-center">
|
||||
<p className="mb-0 text-sm">تا قیمت</p>
|
||||
<p className="mb-0">
|
||||
<PersianNumber number={rangePrice[1]} style="font-bold" />
|
||||
<PersianNumber number={rangePrice[0]} style="font-bold" />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full text-center">
|
||||
<p className="mb-0 text-sm">از قیمت</p>
|
||||
<p className="mb-0">
|
||||
<PersianNumber number={rangePrice[0]} style="font-bold" />
|
||||
<PersianNumber number={rangePrice[1]} style="font-bold" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{/* <div className="mt-4">
|
||||
<button
|
||||
className="btn btn-primary w-full rounded-full text-sm "
|
||||
onClick={() => handleRangePriceFilter()}
|
||||
>
|
||||
اعمال فیلتر
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
"use client";
|
||||
import CardCategories from "@comp/Cards/CardCategories/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import { useContext, useEffect } from "react";
|
||||
|
||||
|
|
@ -14,31 +15,20 @@ const ListProdocts = ({
|
|||
}) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const products = CTX.state.products;
|
||||
console.log("products filters", products);
|
||||
const pager = CTX.state.pager;
|
||||
const stopProducts = CTX.state.stopProducts;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
|
||||
console.log(
|
||||
"soretby--------------------------------------------------------",
|
||||
sortBy
|
||||
);
|
||||
|
||||
console.log(products);
|
||||
|
||||
useEffect(() => {
|
||||
if (sortBy != -1) {
|
||||
CTX.fetchProducts(
|
||||
0,
|
||||
id[0],
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
rangePrice,
|
||||
rangePrice,
|
||||
sortBy != -1 ? sortBy : "",
|
||||
isRangePrice
|
||||
);
|
||||
}
|
||||
}, [sortBy]);
|
||||
const searchParams = useSearchParams();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const sort = (by) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("sortBy", by);
|
||||
params.set("page", "0");
|
||||
router.push(`${pathname}?${params}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
|
@ -55,7 +45,7 @@ const ListProdocts = ({
|
|||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
sortBy == 1 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(1)}
|
||||
onClick={() => sort(1)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base ${
|
||||
|
|
@ -69,7 +59,7 @@ const ListProdocts = ({
|
|||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
sortBy == 2 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(2)}
|
||||
onClick={() => sort(2)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base ${
|
||||
|
|
@ -83,7 +73,7 @@ const ListProdocts = ({
|
|||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
sortBy == 3 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(3)}
|
||||
onClick={() => sort(3)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base ${
|
||||
|
|
@ -97,7 +87,7 @@ const ListProdocts = ({
|
|||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
sortBy == 4 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(4)}
|
||||
onClick={() => sort(4)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base ${
|
||||
|
|
@ -111,7 +101,7 @@ const ListProdocts = ({
|
|||
className={`w-fit rounded-full px-2 mx-2 tr03 ${
|
||||
sortBy == 5 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(5)}
|
||||
onClick={() => sort(1)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base ${
|
||||
|
|
|
|||
|
|
@ -1,10 +1,53 @@
|
|||
"use client";
|
||||
import SideBarNavBarMobile from "@comp/Navbar/SideBarNavBarMobile/page";
|
||||
import ResultSearchBar from "@comp/Navbar/ResultSearchBar/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { useContext } from "react";
|
||||
import { useContext, useEffect, useRef, useState } from "react";
|
||||
|
||||
const SearchSideBar = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const isSearched = CTX.state.isSearched;
|
||||
|
||||
const inputRef = useRef(null);
|
||||
|
||||
const handleRemoveSearch = () => {
|
||||
CTX.setSearchResultData([]);
|
||||
setSearchValue("");
|
||||
CTX.setIsSearched(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (CTX.state.closeNavbar) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [CTX.state.closeNavbar]);
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
setSearchValue(event.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Define a function to send the request
|
||||
const sendRequest = async () => {
|
||||
CTX.fetchSearchResult(searchValue);
|
||||
console.log("Sending request for:", searchValue);
|
||||
};
|
||||
|
||||
// Set a timer to send the request after 2000 milliseconds of inactivity
|
||||
const timer = setTimeout(() => {
|
||||
if (searchValue.trim() !== "") {
|
||||
sendRequest();
|
||||
CTX.setIsSearched(true);
|
||||
}
|
||||
|
||||
if (searchValue == "") {
|
||||
CTX.setIsSearched(false);
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Clean up function to clear the timer on component unmount or when searchTerm changes
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -36,32 +79,72 @@ const SearchSideBar = () => {
|
|||
</div>
|
||||
<input
|
||||
type="text"
|
||||
ref={inputRef}
|
||||
className="form-control bg-gray-100 !border-[0px] border-gray-100 rounded-lg text-right focus:!border-[0px] !text-sm !pr-[60px] "
|
||||
placeholder="دستت برای جست و جو بازه"
|
||||
onFocus={() => CTX.setCloseNavbar(true)}
|
||||
value={searchValue}
|
||||
onChange={(e) => handleInputChange(e)}
|
||||
/>
|
||||
|
||||
<div className="absolute mt-[-46px] ml-[6px]">
|
||||
<div className="w-[40px] h-[40px] bg-gray-200 rounded-lg pt-2">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 275 275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-1"
|
||||
>
|
||||
<path
|
||||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
{!isSearched ? (
|
||||
<div className="absolute mt-[-46px] ml-[6px]">
|
||||
<div className="w-[40px] h-[40px] bg-gray-200 rounded-lg pt-2">
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 275 275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-1"
|
||||
>
|
||||
<path
|
||||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="absolute mt-[-46px] ml-[6px]"
|
||||
onClick={() => handleRemoveSearch()}
|
||||
>
|
||||
<div className="w-[40px] h-[40px] bg-gray-200 rounded-lg pt-2">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 214 214"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[7px] "
|
||||
>
|
||||
<path
|
||||
d="M4.42496 8.34954L6.24996 6.24955C9.42467 3.07411 13.6335 1.1434 18.1112 0.80849C22.589 0.473578 27.0382 1.7567 30.65 4.42455L32.75 6.24955L107 80.4745L181.25 6.22455C182.98 4.43456 185.05 3.00714 187.338 2.02557C189.626 1.04399 192.087 0.527921 194.576 0.507469C197.066 0.487016 199.535 0.962591 201.839 1.90644C204.142 2.8503 206.235 4.24353 207.995 6.00484C209.755 7.76615 211.146 9.86026 212.087 12.165C213.029 14.4697 213.502 16.9389 213.48 19.4285C213.457 21.9181 212.938 24.3783 211.955 26.6654C210.971 28.9525 209.542 31.0208 207.75 32.7495L133.525 107L207.775 181.25C210.947 184.427 212.873 188.638 213.203 193.116C213.533 197.593 212.246 202.041 209.575 205.65L207.75 207.75C204.575 210.925 200.366 212.856 195.889 213.191C191.411 213.526 186.962 212.242 183.35 209.575L181.25 207.75L107 133.525L32.75 207.775C31.0195 209.565 28.9498 210.992 26.6618 211.974C24.3738 212.955 21.9132 213.471 19.4236 213.492C16.9339 213.512 14.4652 213.036 12.1613 212.093C9.85749 211.149 7.76468 209.756 6.00503 207.994C4.24538 206.233 2.85412 204.139 1.91244 201.834C0.970764 199.529 0.497518 197.06 0.520318 194.571C0.543117 192.081 1.06151 189.621 2.04524 187.334C3.02897 185.047 4.45835 182.978 6.24996 181.25L80.475 107L6.22496 32.7495C3.05326 29.5717 1.12717 25.3612 0.796856 20.8836C0.466538 16.4059 1.75392 11.9584 4.42496 8.34954Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<SideBarNavBarMobile />
|
||||
|
||||
{/* {true && (
|
||||
<div
|
||||
className={`relative !z-[100] tr03 ${
|
||||
true ? "opacity-100" : "opacity-100"
|
||||
} `}
|
||||
// onClick={() => setSearchResultShow(!searchResultShow)}
|
||||
>
|
||||
<ResultSearchBar
|
||||
searchResultProductData={searchResultProductData}
|
||||
searchResultCategoryData={searchResultCategoryData}
|
||||
/>
|
||||
</div>
|
||||
)} */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import BottomSheetFilter from "plugins/bottomSheet/BottomSheetFilter";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
|
||||
|
|
@ -9,20 +10,31 @@ const FilterCategoryMobile = (props) => {
|
|||
|
||||
const [trendFilter, setTrendFilter] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.sortBy != -1) {
|
||||
CTX.fetchProducts(
|
||||
0,
|
||||
props.id[0] != 0 ? props.id[0] : "",
|
||||
props.selectedBrands,
|
||||
props.isChecked,
|
||||
props.rangePrice,
|
||||
props.rangePrice,
|
||||
props.sortBy != -1 ? props.sortBy : "",
|
||||
props.isRangePrice
|
||||
);
|
||||
}
|
||||
}, [props.sortBy]);
|
||||
// useEffect(() => {
|
||||
// if (props.sortBy != -1) {
|
||||
// CTX.fetchProducts(
|
||||
// 0,
|
||||
// props.id[0] != 0 ? props.id[0] : "",
|
||||
// props.selectedBrands,
|
||||
// props.isChecked,
|
||||
// props.rangePrice,
|
||||
// props.rangePrice,
|
||||
// props.sortBy != -1 ? props.sortBy : "",
|
||||
// props.isRangePrice
|
||||
// );
|
||||
// }
|
||||
// }, [props.sortBy]);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
const sort = (by) => {
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("sortBy", by);
|
||||
params.set("page", "0");
|
||||
router.push(`${pathname}?${params}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -97,7 +109,7 @@ const FilterCategoryMobile = (props) => {
|
|||
className={`w-fit rounded-full px-2 mx-1 tr03 ${
|
||||
props.sortBy == 1 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(1)}
|
||||
onClick={() => sort(1)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
|
|
@ -111,7 +123,7 @@ const FilterCategoryMobile = (props) => {
|
|||
className={`w-fit rounded-full px-2 mx-1 tr03 ${
|
||||
props.sortBy == 2 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(2)}
|
||||
onClick={() => sort(2)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
|
|
@ -125,7 +137,7 @@ const FilterCategoryMobile = (props) => {
|
|||
className={`w-fit rounded-full px-2 mx-1 tr03 ${
|
||||
props.sortBy == 3 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(3)}
|
||||
onClick={() => sort(3)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
|
|
@ -139,7 +151,7 @@ const FilterCategoryMobile = (props) => {
|
|||
className={`w-fit rounded-full px-2 mx-1 tr03 ${
|
||||
props.sortBy == 4 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(4)}
|
||||
onClick={() => sort(4)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
|
|
@ -153,7 +165,7 @@ const FilterCategoryMobile = (props) => {
|
|||
className={`w-fit rounded-full px-2 mx-1 tr03 ${
|
||||
props.sortBy == 5 ? "bg-primary-600" : " opacity-60 "
|
||||
}`}
|
||||
onClick={() => CTX.setSortBy(5)}
|
||||
onClick={() => sort(5)}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 lg:text-sm xl:text-base text-sm ${
|
||||
|
|
|
|||
|
|
@ -1,19 +1,24 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
|
||||
const PaginationCategoory = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const pager = CTX.state.pager;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
console.log("pager ", pager?.currentPage + 1, pageGetProducts);
|
||||
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(pageGetProducts);
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(
|
||||
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
||||
);
|
||||
useEffect(() => {
|
||||
setCurrentPageIndex(pageGetProducts);
|
||||
}, [pageGetProducts]);
|
||||
console.log("pagesssss", Number(searchParams.get("page")));
|
||||
setCurrentPageIndex(
|
||||
Number(searchParams.get("page")) ? Number(searchParams.get("page")) : 0
|
||||
);
|
||||
}, [searchParams]);
|
||||
const renderPaginationButtons = () => {
|
||||
const buttons = [];
|
||||
const totalPages = pager?.totalPage;
|
||||
|
|
@ -80,17 +85,24 @@ const PaginationCategoory = (props) => {
|
|||
const handlePageClick = (pageIndex) => {
|
||||
setCurrentPageIndex(pageIndex);
|
||||
// console.log("ss", i);
|
||||
CTX.fetchProducts(
|
||||
pageIndex,
|
||||
props.id[0] != 0 ? props.id[0] : "",
|
||||
props.selectedBrands,
|
||||
props.isChecked,
|
||||
props.rangePrice,
|
||||
props.rangePrice,
|
||||
props.sortBy != -1 ? props.sortBy : "",
|
||||
props.isRangePrice,
|
||||
true //pagination say or not
|
||||
);
|
||||
// CTX.fetchProducts(
|
||||
// pageIndex,
|
||||
// props.id[0] != 0 ? props.id[0] : "",
|
||||
// props.selectedBrands,
|
||||
// props.isChecked,
|
||||
// props.rangePrice,
|
||||
// props.rangePrice,
|
||||
// props.sortBy != -1 ? props.sortBy : "",
|
||||
// props.isRangePrice,
|
||||
// true //pagination say or not
|
||||
// );
|
||||
const nextPage = pageIndex;
|
||||
console.log("runeed-handleInfiniteNextFetchProducts", nextPage);
|
||||
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
params.set("page", nextPage);
|
||||
router.push(`${pathname}?${params}`);
|
||||
CTX.setStopProducts(true);
|
||||
// Your fetchProducts function call here
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -117,6 +117,12 @@ const Footer = () => {
|
|||
ژل بهداشتی بانوان{" "}
|
||||
</li>
|
||||
</Link>
|
||||
|
||||
<Link href={`/blogs?page=0`}>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
مجله زیبایی وسمه{" "}
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ const CartNavbar = ({ isScrolled }) => {
|
|||
return (
|
||||
<div
|
||||
className={` ${
|
||||
isScrolled ? " fixed w-fit !z-[100] mt-[-40px] mr-[30px] " : "mr-2"
|
||||
isScrolled
|
||||
? " fixed w-fit !z-[100] mt-[-40px] left-0 ml-[100px] "
|
||||
: "mr-2"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -0,0 +1,134 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import logoBlack from "../../../public/images/logo.png";
|
||||
|
||||
const ResultSearchBar = ({
|
||||
searchResultProductData,
|
||||
searchResultCategoryData,
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<div className="mt-2 mb-4">
|
||||
<div className="flex">
|
||||
<div>
|
||||
<svg
|
||||
width="17"
|
||||
height="17"
|
||||
viewBox="0 0 225 277"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="ml-2"
|
||||
>
|
||||
<path
|
||||
d="M68.3533 92.4443L68.3283 92.4568L68.2908 92.4818L68.3533 92.4443ZM192.778 90.1068C191.909 89.2678 190.944 88.5337 189.903 87.9193C188.43 87.0521 186.795 86.4962 185.099 86.286C183.402 86.0758 181.681 86.2158 180.04 86.6973C178.4 87.1788 176.876 87.9916 175.563 89.0854C174.249 90.1793 173.174 91.5309 172.403 93.0568C168.098 101.543 162.16 109.096 154.928 115.282C156.037 109.051 156.597 102.735 156.603 96.4068C156.627 77.1586 151.55 58.2477 141.889 41.5997C132.228 24.9516 118.327 11.161 101.603 1.63183C99.7603 0.584693 97.6814 0.0233984 95.5618 0.000715882C93.4423 -0.0219666 91.3518 0.494708 89.4869 1.50217C87.622 2.50963 86.0439 3.97479 84.9009 5.7599C83.758 7.54501 83.0878 9.59145 82.9533 11.7068C82.2534 23.5581 79.155 35.1439 73.8458 45.7624C68.5365 56.381 61.1269 65.8112 52.0658 73.4818L49.1908 75.8193C39.7109 82.1974 31.3202 90.0606 24.3408 99.1068C13.4942 112.771 5.98064 128.774 2.39598 145.847C-1.18868 162.921 -0.745824 180.595 3.68944 197.467C8.1247 214.339 16.4303 229.946 27.9476 243.05C39.4649 256.153 53.877 266.393 70.0408 272.957C71.9385 273.729 73.997 274.023 76.0351 273.813C78.0732 273.603 80.0285 272.895 81.7287 271.752C83.4289 270.609 84.822 269.065 85.7854 267.256C86.7487 265.448 87.2528 263.431 87.2533 261.382C87.2429 260.058 87.0321 258.743 86.6283 257.482C83.8316 246.97 83.026 236.028 84.2533 225.219C96.0842 247.527 115.073 265.207 138.166 275.419C140.983 276.679 144.168 276.848 147.103 275.894C165.347 270.005 181.781 259.549 194.846 245.519C207.91 231.49 217.171 214.353 221.748 195.737C226.324 177.121 226.065 157.644 220.995 139.156C215.925 120.668 206.211 103.784 192.778 90.1068ZM143.966 250.494C133.069 244.973 123.457 237.22 115.754 227.74C108.05 218.26 102.428 207.265 99.2533 195.469C98.2826 191.497 97.5314 187.474 97.0033 183.419C96.6476 180.837 95.4936 178.431 93.7028 176.537C91.912 174.643 89.574 173.356 87.0158 172.857C86.2292 172.704 85.4295 172.629 84.6283 172.632C82.432 172.63 80.2739 173.206 78.3714 174.303C76.4688 175.401 74.8889 176.98 73.7908 178.882C63.4214 196.772 58.2079 217.185 58.7283 237.857C49.6052 230.766 41.9805 221.934 36.296 211.874C30.6115 201.814 26.9803 190.726 25.6129 179.252C24.2456 167.779 25.1692 156.148 28.3304 145.034C31.4915 133.92 36.8272 123.543 44.0283 114.507C49.496 107.405 56.0919 101.248 63.5533 96.2818C63.8798 96.0724 64.1929 95.8428 64.4908 95.5943C64.4908 95.5943 68.1908 92.5318 68.3158 92.4693C86.1308 77.4074 98.8028 57.1627 104.566 34.5568C118.184 47.1489 127.263 63.8851 130.393 82.1664C133.524 100.448 130.531 119.251 121.878 135.657C120.733 137.847 120.263 140.327 120.527 142.783C120.79 145.24 121.776 147.564 123.36 149.461C124.944 151.358 127.054 152.742 129.425 153.44C131.795 154.138 134.319 154.118 136.678 153.382C155.825 147.377 172.672 135.651 184.953 119.782C192.337 130.685 197.165 143.114 199.077 156.142C200.989 169.17 199.935 182.462 195.995 195.027C192.055 207.591 185.331 219.105 176.322 228.709C167.313 238.313 156.253 245.76 143.966 250.494Z"
|
||||
fill="#570000"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-0 text-sm font-bold">جستجو های پرطرفدار</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" overflow-x-auto flex whitespace-nowrap hide-scrollBar ">
|
||||
<Link
|
||||
href={`/categories/fac3ee2d-19dd-4229-a412-28a1d09cc948/شامپو-بدن`}
|
||||
>
|
||||
<div className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer">
|
||||
<p className="mb-0 text-[12px]">شامپو بدن</p>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href={`categories/bdf6b13c-4be5-4a93-bcdb-612440bdbd6e/کرم-مرطوب-کننده-دست-و-پا`}
|
||||
>
|
||||
<div className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer">
|
||||
<p className="mb-0 text-[12px]">کرم مرطوب کننده دست و پا</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={`categories/4d3c984d-a867-495c-a0b5-302316f39fb1/شوینده-ظروف`}
|
||||
>
|
||||
<div className="border-2 border-gray-300 py-1 px-3 rounded-full mt-1 mb-2 mx-[2px] cursor-pointer">
|
||||
<p className="mb-0 text-[12px]">شوینده ظروف</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{searchResultCategoryData?.length > 0 &&
|
||||
searchResultProductData?.length > 0 ? (
|
||||
<>
|
||||
{searchResultCategoryData?.map((e, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={`/categories/${e.id}/${e.name.split(" ").join("-")}`}
|
||||
>
|
||||
<div className="flex ">
|
||||
<div className="w-[20px] h-[40px] rounded-2xl bg-gray-200 ml-2 mt-3">
|
||||
{" "}
|
||||
</div>
|
||||
<div className="my-2">
|
||||
<p className="mb-0 text-sm ">{e.name}</p>
|
||||
<small className="text-[12px] text-gray-500">
|
||||
دسته بندی
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
<div className="w-10 h-1 bg-primary-200 rounded-full opacity-35 my-3"></div>
|
||||
|
||||
{searchResultProductData?.map((e, index) => (
|
||||
<Link
|
||||
key={index}
|
||||
href={`/products/${e.id}/${e.persianName.split(" ").join("-")}`}
|
||||
>
|
||||
<div className="flex relative ">
|
||||
<div className="h-fit relative">
|
||||
<div className="w-[50px] h-[50px] rounded-2xl bg-gray-200 ml-2 mt-3 overflow-hidden relative ">
|
||||
{!!e.mainImage ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.mainImage}`}
|
||||
width={200}
|
||||
height={200}
|
||||
className="xs:!w-[60px] lg:!w-[60px] mx-auto object-cover "
|
||||
alt={`${e.persianName} - ${e.englishName}`}
|
||||
/>
|
||||
) : (
|
||||
<div className="">
|
||||
<Image
|
||||
src={logoBlack}
|
||||
className="xs:!w-[30px] lg:!w-[30px] mx-auto opacity-25 mt-5"
|
||||
alt="وسمه"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="my-2 w-full relative text-right">
|
||||
<p className="mb-0 text-sm ">{e.persianName}</p>
|
||||
<small className="text-[12px] text-gray-500 !text-right">
|
||||
محصول{" "}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex justify-center py-5">
|
||||
<div className="bg-white shadow mt-5 w-fit rounded-full text-sm p-4">
|
||||
چیزی یافت نشد
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResultSearchBar;
|
||||
|
|
@ -4,6 +4,9 @@ import Image from "next/image";
|
|||
import Link from "next/link";
|
||||
import { useContext, useState } from "react";
|
||||
import logo from "../../../public/images/logo.png";
|
||||
import Navbar from "../page";
|
||||
import SearchSideBar from "@comp/Category/Mobile/Component/SearchSideBar/page";
|
||||
import ResultSearchBar from "../ResultSearchBar/page";
|
||||
|
||||
const SideBarNavBarMobile = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
|
@ -11,6 +14,9 @@ const SideBarNavBarMobile = () => {
|
|||
const [firstChildIndex, setFirstChildIndex] = useState(-1);
|
||||
|
||||
const dataNav = CTX.state.navData;
|
||||
const isSearched = CTX.state.isSearched;
|
||||
const searchResultCategoryData = CTX.state.searchResultData.categories;
|
||||
const searchResultProductData = CTX.state.searchResultData.products;
|
||||
|
||||
console.log(firstChild);
|
||||
|
||||
|
|
@ -68,85 +74,94 @@ const SideBarNavBarMobile = () => {
|
|||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex justify-center mt-5 px-3">
|
||||
<button className="btn btn-outline-primary rounded-full mx-1 text-sm ">
|
||||
عیدی وسمه چی میشه؟
|
||||
</button>
|
||||
<button className="btn bg-red-700 text-white rounded-full mx-1 text-sm ">
|
||||
بمب امروز{" "}
|
||||
</button>
|
||||
</div>
|
||||
<SearchSideBar />
|
||||
<div className="w-[100px] h-[1px] bg-gray-300 mx-auto mt-4 opacity-50"></div>
|
||||
<div>
|
||||
<ul className="text-right px-5">
|
||||
{dataNav?.map((e, index) => (
|
||||
<li
|
||||
onClick={() => {
|
||||
setFirstChild(dataNav[index].children);
|
||||
setFirstChildIndex(index);
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl bg-gray-50 px-1 rounded-lg my-1">
|
||||
<p className="text-sm mb-0 font-bold ">{e.name}</p>
|
||||
|
||||
<div>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 rotate-180 mt-1"
|
||||
>
|
||||
<path
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
stroke="black"
|
||||
stroke-opacity="0.81"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
{isSearched ? (
|
||||
<div className="rtl p-5">
|
||||
<ResultSearchBar
|
||||
searchResultProductData={searchResultProductData}
|
||||
searchResultCategoryData={searchResultCategoryData}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<ul className="text-right px-5">
|
||||
{dataNav?.map((e, index) => (
|
||||
<li
|
||||
onClick={() => {
|
||||
setFirstChild(dataNav[index].children);
|
||||
setFirstChildIndex(index);
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl bg-gray-50 px-1 rounded-lg my-1">
|
||||
<p className="text-sm mb-0 font-bold ">
|
||||
{e.name}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 88 151"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 rotate-180 mt-1"
|
||||
>
|
||||
<path
|
||||
d="M12.9525 138.35L75.249 75.6471L12.5462 13.3506"
|
||||
stroke="black"
|
||||
stroke-opacity="0.81"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{firstChildIndex == index && (
|
||||
<>
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
href={`/categories/${e.id}/${e.name
|
||||
.split(" ")
|
||||
.join("-")}`}
|
||||
onClick={() => CTX.setCloseNavbar(false)}
|
||||
>
|
||||
<p className="mb-0 text-sm py-3 px-1 text-gray-700">
|
||||
همه موارد
|
||||
</p>
|
||||
</Link>
|
||||
</li>{" "}
|
||||
{firstChild.map((e, index) => (
|
||||
<li key={index}>
|
||||
{firstChildIndex == index && (
|
||||
<>
|
||||
<ul>
|
||||
<li>
|
||||
<Link
|
||||
href={`/categories/${e.id}/${e.name
|
||||
.split(" ")
|
||||
.join("-")}`}
|
||||
onClick={() => CTX.setCloseNavbar(false)}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl px-1 rounded-lg my-1 text-gray-700">
|
||||
<p className="mb-0 text-sm">{e.name}</p>
|
||||
</div>
|
||||
<p className="mb-0 text-sm py-3 px-1 text-gray-700">
|
||||
همه موارد
|
||||
</p>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</li>{" "}
|
||||
{firstChild.map((e, index) => (
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={`/categories/${e.id}/${e.name
|
||||
.split(" ")
|
||||
.join("-")}`}
|
||||
onClick={() =>
|
||||
CTX.setCloseNavbar(false)
|
||||
}
|
||||
>
|
||||
<div className="py-3 flex justify-between rtl px-1 rounded-lg my-1 text-gray-700">
|
||||
<p className="mb-0 text-sm">
|
||||
{e.name}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,14 +12,20 @@ import Link from "next/link";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
import BottomSheetCart from "plugins/bottomSheet/BottomSheetCart";
|
||||
import CartNavbar from "./CartNavbar/page";
|
||||
import { debounce } from "lodash";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ResultSearchBar from "./ResultSearchBar/page";
|
||||
|
||||
const Navbar = ({ theme }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const CTX = useContext(AppContext);
|
||||
const router = useRouter();
|
||||
const dataNav = CTX.state.navData;
|
||||
const profile = CTX.state.profile;
|
||||
const cart = CTX.state.cart;
|
||||
const searchResultCategoryData = CTX.state.searchResultData.categories;
|
||||
const searchResultProductData = CTX.state.searchResultData.products;
|
||||
|
||||
console.log("dataNav", dataNav);
|
||||
|
||||
|
|
@ -28,12 +34,20 @@ const Navbar = ({ theme }) => {
|
|||
const [closeNavbar, setClosNavbar] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [smallDashboard, setSmallDashboard] = useState(false);
|
||||
const [searchResultShow, setSearchResultShow] = useState(false);
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
|
||||
const handleItemNavber = (index) => {
|
||||
setNavItemHover(index);
|
||||
console.log("index", index);
|
||||
};
|
||||
|
||||
const handleRemoveSearch = () => {
|
||||
CTX.setSearchResultData([]);
|
||||
setSearchValue("");
|
||||
setSearchResultShow(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
setIsDesktop(window.innerWidth > 1000); // You can adjust the width threshold as needed
|
||||
|
|
@ -64,6 +78,29 @@ const Navbar = ({ theme }) => {
|
|||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Define a function to send the request
|
||||
const sendRequest = async () => {
|
||||
CTX.fetchSearchResult(searchValue);
|
||||
console.log("Sending request for:", searchValue);
|
||||
setSearchResultShow(true);
|
||||
};
|
||||
|
||||
// Set a timer to send the request after 2000 milliseconds of inactivity
|
||||
const timer = setTimeout(() => {
|
||||
if (searchValue.trim() !== "") {
|
||||
sendRequest();
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
// Clean up function to clear the timer on component unmount or when searchTerm changes
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue]);
|
||||
|
||||
const handleInputChange = (event) => {
|
||||
setSearchValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{isDesktop && (
|
||||
|
|
@ -83,6 +120,77 @@ const Navbar = ({ theme }) => {
|
|||
</div>
|
||||
|
||||
<div className={`flex rtl py-5 `}>
|
||||
<>
|
||||
<div className=" px-3 ltr">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control !py-[10px] bg-gray-100 !border-[0px] border-gray-100 !rounded-2xl text-right focus:!border-[0px] !text-sm !pl-[60px] !w-[375px] "
|
||||
placeholder="دستت برای جست و جو بازه"
|
||||
value={searchValue}
|
||||
onChange={(e) => handleInputChange(e)}
|
||||
/>
|
||||
|
||||
{!searchResultShow ? (
|
||||
<div className="absolute mt-[-36px] ml-[6px] z-90">
|
||||
<div className="w-[30px] h-[30px] bg-gray-300 !rounded-xl pt-2">
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 275 275"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto "
|
||||
>
|
||||
<path
|
||||
d="M215.913 215.913L265 265M250.832 130.822C250.832 197.553 196.915 251.644 130.424 251.644C63.9166 251.644 10 197.552 10 130.838C10 64.0759 63.9166 10 130.408 10C196.915 10 250.832 64.0919 250.832 130.822Z"
|
||||
stroke="black"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="absolute mt-[-36px] ml-[6px] z-90"
|
||||
onClick={() => handleRemoveSearch()}
|
||||
>
|
||||
<div className="w-[30px] h-[30px] bg-gray-300 !rounded-xl pt-2">
|
||||
<svg
|
||||
width="9"
|
||||
height="9"
|
||||
viewBox="0 0 214 214"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto mt-[2px] "
|
||||
>
|
||||
<path
|
||||
d="M4.42496 8.34954L6.24996 6.24955C9.42467 3.07411 13.6335 1.1434 18.1112 0.80849C22.589 0.473578 27.0382 1.7567 30.65 4.42455L32.75 6.24955L107 80.4745L181.25 6.22455C182.98 4.43456 185.05 3.00714 187.338 2.02557C189.626 1.04399 192.087 0.527921 194.576 0.507469C197.066 0.487016 199.535 0.962591 201.839 1.90644C204.142 2.8503 206.235 4.24353 207.995 6.00484C209.755 7.76615 211.146 9.86026 212.087 12.165C213.029 14.4697 213.502 16.9389 213.48 19.4285C213.457 21.9181 212.938 24.3783 211.955 26.6654C210.971 28.9525 209.542 31.0208 207.75 32.7495L133.525 107L207.775 181.25C210.947 184.427 212.873 188.638 213.203 193.116C213.533 197.593 212.246 202.041 209.575 205.65L207.75 207.75C204.575 210.925 200.366 212.856 195.889 213.191C191.411 213.526 186.962 212.242 183.35 209.575L181.25 207.75L107 133.525L32.75 207.775C31.0195 209.565 28.9498 210.992 26.6618 211.974C24.3738 212.955 21.9132 213.471 19.4236 213.492C16.9339 213.512 14.4652 213.036 12.1613 212.093C9.85749 211.149 7.76468 209.756 6.00503 207.994C4.24538 206.233 2.85412 204.139 1.91244 201.834C0.970764 199.529 0.497518 197.06 0.520318 194.571C0.543117 192.081 1.06151 189.621 2.04524 187.334C3.02897 185.047 4.45835 182.978 6.24996 181.25L80.475 107L6.22496 32.7495C3.05326 29.5717 1.12717 25.3612 0.796856 20.8836C0.466538 16.4059 1.75392 11.9584 4.42496 8.34954Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{searchResultShow && (
|
||||
<div
|
||||
className={`relative !z-[100] tr03 ${
|
||||
searchResultShow ? "opacity-100" : "opacity-100"
|
||||
} `}
|
||||
onClick={() => setSearchResultShow(!searchResultShow)}
|
||||
>
|
||||
<div className="absolute w-[370px] bg-gray-100 max-h-[450px] rounded-xl mr-[-385px] mt-[45px] p-5 overflow-auto scroll-1 ">
|
||||
<ResultSearchBar
|
||||
searchResultProductData={searchResultProductData}
|
||||
searchResultCategoryData={searchResultCategoryData}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
{profile?.length <= 0 ? (
|
||||
<div className="flex">
|
||||
<Link href={"/login"}>
|
||||
|
|
@ -148,6 +256,17 @@ const Navbar = ({ theme }) => {
|
|||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile/saleCooperationSystem"}>
|
||||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||
همکاری در فروش{" "}
|
||||
</p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||||
onClick={() =>
|
||||
|
|
@ -364,7 +483,7 @@ const Navbar = ({ theme }) => {
|
|||
{!isDesktop && (
|
||||
<>
|
||||
<div
|
||||
className={` flex justify-between rtl z-[50] rounded-bl-3xl ${
|
||||
className={`flex justify-between rtl z-[50] rounded-bl-3xl ${
|
||||
isScrolled
|
||||
? " !fixed top-0 w-full bg-gray-100 p-5"
|
||||
: " relative px-5 pt-5 "
|
||||
|
|
@ -452,6 +571,17 @@ const Navbar = ({ theme }) => {
|
|||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile/saleCooperationSystem"}>
|
||||
<div className="flex justify-between p-2 rounded-full group-hover:bg-primary-200 tr03">
|
||||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||
همکاری در فروش{" "}
|
||||
</p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
"axios": "^1.6.5",
|
||||
"framer-motion": "^10.16.16",
|
||||
"jalali-moment": "^3.3.11",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "14.0.4",
|
||||
"nextjs-toploader": "^1.6.6",
|
||||
"rc-slider": "^10.5.0",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"axios": "^1.6.5",
|
||||
"framer-motion": "^10.16.16",
|
||||
"jalali-moment": "^3.3.11",
|
||||
"lodash": "^4.17.21",
|
||||
"next": "14.0.4",
|
||||
"nextjs-toploader": "^1.6.6",
|
||||
"rc-slider": "^10.5.0",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import Slider from "rc-slider";
|
||||
import "rc-slider/assets/index.css";
|
||||
|
||||
const RangeSlider = ({ min, max, onChange }) => {
|
||||
const RangeSlider = ({ min, max, onChange, values }) => {
|
||||
const handleStyleMin = {
|
||||
borderColor: "#2189A8",
|
||||
height: 25,
|
||||
|
|
@ -11,6 +11,7 @@ const RangeSlider = ({ min, max, onChange }) => {
|
|||
// left: 0,
|
||||
};
|
||||
|
||||
console.log("slider,values", values, min, max);
|
||||
const trackStyle = [{ backgroundColor: "#2189A8", height: 8 }];
|
||||
|
||||
const railStyle = { backgroundColor: "#e6e6e6", height: 8 };
|
||||
|
|
@ -20,8 +21,10 @@ const RangeSlider = ({ min, max, onChange }) => {
|
|||
min={min}
|
||||
max={max}
|
||||
allowCross={false}
|
||||
value={values ?? [min, max]}
|
||||
// defaultValue={[min, max]}
|
||||
onChange={onChange}
|
||||
|
||||
onChangeComplete={onChange}
|
||||
handleStyle={[handleStyleMin, handleStyleMin]}
|
||||
trackStyle={trackStyle}
|
||||
railStyle={railStyle}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import BlogData from "@comp/Blog/BlogData/page";
|
||||
import React from "react";
|
||||
|
||||
async function getData(id) {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/blog/${id}`);
|
||||
const post = await res.json();
|
||||
return post;
|
||||
}
|
||||
|
||||
const page = async ({ params }) => {
|
||||
const data = await getData(params.id[0]);
|
||||
|
||||
return <BlogData data={data} />;
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import BlogsData from "@comp/Blog/BlogsData/page";
|
||||
import React from "react";
|
||||
|
||||
async function getData(searchParams) {
|
||||
// console.log("page , check", params.page);
|
||||
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/blog?` +
|
||||
new URLSearchParams({ ...searchParams })
|
||||
// ?page=${params.page ?? 0}
|
||||
// { cache: "no-cache" }
|
||||
);
|
||||
const post = await res.json();
|
||||
// console.log("dddddddd ", post);
|
||||
|
||||
return post;
|
||||
}
|
||||
|
||||
async function getCaetgories() {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/blog/category`);
|
||||
|
||||
const post = await res.json();
|
||||
|
||||
// console.log("aaaaaaaaaaaaaaaaaaaa", post);
|
||||
return post;
|
||||
}
|
||||
|
||||
const page = async ({ searchParams }) => {
|
||||
const data = await getData(searchParams);
|
||||
const dataCaetgories = await getCaetgories();
|
||||
// console.log("-------------------------------- ", dataCaetgories);
|
||||
|
||||
return <BlogsData data={data} dataCaetgories={dataCaetgories} />;
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -32,10 +32,49 @@ export async function generateMetadata({ params }) {
|
|||
};
|
||||
}
|
||||
|
||||
const page = ({ params }) => {
|
||||
// page
|
||||
// categoryId
|
||||
// brandIds
|
||||
// isActive
|
||||
// minPrice
|
||||
// maxPrice
|
||||
// sortBy
|
||||
const fetchProducts = async (categoryId, searchParams) => {
|
||||
const { brandIds: brandIdsString, isActive, ...params } = searchParams;
|
||||
const query = {
|
||||
categoryId,
|
||||
page: 0,
|
||||
...(!!isActive ? { isActive: !!isActive } : {}),
|
||||
...params,
|
||||
};
|
||||
|
||||
|
||||
|
||||
const brandIds = brandIdsString?.split(",") ?? [];
|
||||
const brandIdsQuery =
|
||||
brandIds?.length > 0 ? `&brandIds=${brandIds?.join("&brandIds=")}` : "";
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/product?` +
|
||||
new URLSearchParams({ ...query }) +
|
||||
brandIdsQuery
|
||||
);
|
||||
if (!res.ok) return [];
|
||||
const products = await res.json();
|
||||
console.log("ppppp", products);
|
||||
return products;
|
||||
} catch (error) {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const page = async ({ params, searchParams }) => {
|
||||
const products = await fetchProducts(params?.["id"]?.[0], searchParams);
|
||||
console.log("filters,page", products);
|
||||
return (
|
||||
<div>
|
||||
<CategoriesData params={params} />
|
||||
<CategoriesData params={params} products={products} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const SideBarProfile = () => {
|
|||
const profile = CTX.state.profile;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden xs:hidden lg:block">
|
||||
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden xs:hidden lg:block h-fit sticky top-20">
|
||||
<div>
|
||||
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||
|
|
@ -59,6 +59,17 @@ const SideBarProfile = () => {
|
|||
</Link>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile/saleCooperationSystem"}>
|
||||
<div className="flex justify-between p-4 rounded-full group-hover:bg-primary-200 tr03">
|
||||
<p className="mb-0 text-sm text-gray-500 group-hover:text-black tr03">
|
||||
همکاری در فروش{" "}
|
||||
</p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-primary-200 group-hover:bg-primary-500 tr03 "></div>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
<li
|
||||
className="flex justify-between p-4 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||||
onClick={() => CTX.setBottomSheetLogOutOpen(true)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,465 @@
|
|||
"use client";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import SideBarProfile from "../component/SideBarProfile/page";
|
||||
import SimpleReactValidator from "simple-react-validator";
|
||||
import { toast } from "react-toastify";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import moment from "jalali-moment";
|
||||
import Chapar from "plugins/Chapar";
|
||||
|
||||
const page = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cooperationSystemProfileContractData =
|
||||
CTX.state.cooperationSystemProfileContractData;
|
||||
|
||||
const cooperationSystemProfileData = CTX.state.cooperationSystemProfileData;
|
||||
const profile = CTX.state.profile;
|
||||
const [stepsaleCooperationSystem, setStepsaleCooperationSystem] = useState(0);
|
||||
const [rulesAccept, setRulesAccept] = useState(false);
|
||||
const [nationalCode, setNationalCode] = useState("");
|
||||
const [fatherName, setFatherName] = useState("");
|
||||
const [shabaNumber, setShabaNumber] = useState("");
|
||||
const [year, setYear] = useState("");
|
||||
const [month, setMonth] = useState("");
|
||||
const [day, setDay] = useState("");
|
||||
const [birthDate, setBirthDate] = useState("");
|
||||
|
||||
const [, forceUpdate] = useState();
|
||||
const [submited, setSubmited] = useState(false);
|
||||
|
||||
const validator = useRef(
|
||||
new SimpleReactValidator({
|
||||
messages: {
|
||||
required: "پر کردن این فیلد الزامی میباشد",
|
||||
},
|
||||
element: (message) => (
|
||||
<>
|
||||
<div className="text-right px-1 text-sm">
|
||||
<small className="text-red-600 t-ig-small ">{message}</small>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
})
|
||||
);
|
||||
|
||||
// Generate options for days and months
|
||||
const daysOptions = Array.from({ length: 31 }, (_, i) => i + 1);
|
||||
const monthsOptions = Array.from({ length: 12 }, (_, i) => i + 1);
|
||||
// Generate options for years between 1340 and 1388
|
||||
const yearsOptions = Array.from({ length: 49 }, (_, i) => 1388 - i);
|
||||
|
||||
const body = {
|
||||
fatherName,
|
||||
nationalId: nationalCode,
|
||||
shaba: shabaNumber,
|
||||
birthDate,
|
||||
};
|
||||
|
||||
const handleBirthDate = (year, month, day) => {
|
||||
setDay(day);
|
||||
setMonth(month);
|
||||
setYear(year);
|
||||
const persianDate = `${year}/${month}/${day}`;
|
||||
// Convert Persian date to timestamp
|
||||
const timestamp = moment(persianDate, "jYYYY/jM/jD").unix();
|
||||
setBirthDate(timestamp);
|
||||
console.log(timestamp);
|
||||
};
|
||||
|
||||
const sendInfoUserCooperationSystem = async () => {
|
||||
if (validator.current.allValid()) {
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/marketer/signup`,
|
||||
JSON.stringify(body),
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
CTX.setCooperationSystemProfileData(data);
|
||||
setStepsaleCooperationSystem(2);
|
||||
} catch ({ error, status }) {
|
||||
toast.error("مشکلی در ارسال اطلاعات رخ داده است", {
|
||||
position: "bottom-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error("پرکردن همه ی فیلد ها واجب است", {
|
||||
position: "bottom-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
validator.current.showMessages();
|
||||
forceUpdate(1);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("profile.isMarketer", profile);
|
||||
if (profile.isMarketer) {
|
||||
CTX.fetchCooperationSystemProfile();
|
||||
setStepsaleCooperationSystem(2);
|
||||
} else {
|
||||
CTX.fetchCooperationSystemProfileContract();
|
||||
setStepsaleCooperationSystem(0);
|
||||
}
|
||||
}, [profile]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar theme={1} />
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 rtl gap-6 xs:px-[20px] lg:px-[100px] xl:[300px]">
|
||||
<SideBarProfile />
|
||||
|
||||
<div className="lg:col-span-3 xl:col-span-4 mb-20 ">
|
||||
<div className="bg-gray-100 p-4 mt-5 rounded-lg overflow-hidden">
|
||||
<div className="flex mb-10">
|
||||
<div
|
||||
className={`xs:pr-2 lg:pr-4 ${
|
||||
stepsaleCooperationSystem == 0 ? "" : " opacity-40"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 xs:text-[12px] lg:text-base ${
|
||||
stepsaleCooperationSystem == 0 ? "font-bold" : "font-medium"
|
||||
}`}
|
||||
>
|
||||
قوانین همکاری
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`xs:pr-2 lg:pr-4 ${
|
||||
stepsaleCooperationSystem == 1 ? "" : " opacity-40"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 xs:text-[12px] lg:text-base ${
|
||||
stepsaleCooperationSystem == 1 ? "font-bold" : "font-medium"
|
||||
}`}
|
||||
>
|
||||
اطلاعات تکمیلی
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`xs:pr-2 lg:pr-4 ${
|
||||
stepsaleCooperationSystem == 2 ? "" : " opacity-40"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`mb-0 xs:text-[12px] lg:text-base ${
|
||||
stepsaleCooperationSystem == 2 ? "font-bold" : "font-medium"
|
||||
}`}
|
||||
>
|
||||
داشبورد
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{stepsaleCooperationSystem == 0 ? (
|
||||
<div className="pr-5">
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: cooperationSystemProfileContractData,
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex mt-10 cursor-pointer">
|
||||
<input
|
||||
id="checkBox"
|
||||
type="checkbox"
|
||||
className="scale-150"
|
||||
onChange={(e) => {
|
||||
setRulesAccept(e.target.checked);
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
htmlFor="checkBox"
|
||||
className="mb-0 text-sm font-bold mr-2"
|
||||
>
|
||||
{" "}
|
||||
قوانین را مطالعه کرده و آن را میپذیرم{" "}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{!rulesAccept ? (
|
||||
<div className="mt-10">
|
||||
<button className="btn btn-primary rounded-full text-sm p-3 !px-5 opacity-45">
|
||||
مرحله بعد
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="mt-10"
|
||||
onClick={() => setStepsaleCooperationSystem(1)}
|
||||
>
|
||||
<button className="btn btn-primary rounded-full text-sm p-3 !px-5">
|
||||
مرحله بعد
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : stepsaleCooperationSystem == 1 ? (
|
||||
<div className="pr-2">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-2 gap-8 ">
|
||||
<div className="text-right my-2">
|
||||
<div className=" rtl pb-2 pr-3">
|
||||
<label className=" px-2 text-sm ml-0 text-gray-500 ">
|
||||
کد ملی
|
||||
<small className="text-red-900">*</small>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className={`form-control`}
|
||||
name="nationalCode"
|
||||
value={nationalCode}
|
||||
maxLength={11}
|
||||
onChange={(e) => {
|
||||
setNationalCode(e.target.value);
|
||||
validator.current.showMessageFor("nationalCode");
|
||||
}}
|
||||
/>
|
||||
{!submited ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"nationalCode",
|
||||
nationalCode,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right my-2">
|
||||
<div className=" rtl pb-2 pr-3">
|
||||
<label className=" px-2 text-sm ml-0 text-gray-500 ">
|
||||
نام پدر <small className="text-red-900">*</small>
|
||||
</label>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
className={`form-control`}
|
||||
name="fatherName"
|
||||
value={fatherName}
|
||||
maxLength={11}
|
||||
onChange={(e) => {
|
||||
setFatherName(e.target.value);
|
||||
validator.current.showMessageFor("fatherName");
|
||||
}}
|
||||
/>
|
||||
{!submited ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"fatherName",
|
||||
fatherName,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right my-2">
|
||||
<div className=" rtl pb-2 pr-3">
|
||||
<label className=" px-2 text-sm ml-0 text-gray-500 ">
|
||||
شماره شبا<small className="text-red-900">*</small>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<input
|
||||
type="text"
|
||||
className={`form-control !text-left`}
|
||||
name="shabaNumber"
|
||||
value={shabaNumber}
|
||||
onChange={(e) => {
|
||||
setShabaNumber(e.target.value);
|
||||
validator.current.showMessageFor("shabaNumber");
|
||||
}}
|
||||
/>
|
||||
<div className="w-[40px] mr-2">
|
||||
<p className="ltr text-gray-700 font-bold mt-4">
|
||||
IR -{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{!submited ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"shabaNumber",
|
||||
shabaNumber,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="text-right my-2">
|
||||
<div className=" rtl pb-2 pr-3">
|
||||
<label className=" px-2 text-sm ml-0 text-gray-500 ">
|
||||
تاریخ تولد<small className="text-red-900">*</small>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex ltr">
|
||||
<select
|
||||
type="number"
|
||||
className={`form-control !text-center mx-1`}
|
||||
name="year"
|
||||
value={year}
|
||||
onChange={(e) => {
|
||||
handleBirthDate(e.target.value, month, day);
|
||||
validator.current.showMessageFor("year");
|
||||
}}
|
||||
placeholder="سال"
|
||||
maxLength={4}
|
||||
>
|
||||
{yearsOptions.map((y) => (
|
||||
<option key={y} value={y}>
|
||||
{y}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
type="number"
|
||||
className={`form-control !text-center mx-1`}
|
||||
name="month"
|
||||
value={month}
|
||||
onChange={(e) => {
|
||||
handleBirthDate(year, e.target.value, day);
|
||||
validator.current.showMessageFor("month");
|
||||
}}
|
||||
placeholder="ماه"
|
||||
maxLength={2}
|
||||
>
|
||||
{monthsOptions.map((m) => (
|
||||
<option key={m} value={m}>
|
||||
{m}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
type="number"
|
||||
className={`form-control !text-center mx-1`}
|
||||
name="day"
|
||||
value={day}
|
||||
onChange={(e) => {
|
||||
handleBirthDate(year, month, e.target.value);
|
||||
validator.current.showMessageFor("day");
|
||||
}}
|
||||
placeholder="روز"
|
||||
maxLength={4}
|
||||
>
|
||||
{daysOptions.map((d) => (
|
||||
<option key={d} value={d}>
|
||||
{d}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{!submited ? (
|
||||
<div className="flex">
|
||||
<>{validator.current.message("day", day, "required")}</>
|
||||
<>
|
||||
{validator.current.message("year", year, "required")}
|
||||
</>
|
||||
<>
|
||||
{validator.current.message(
|
||||
"month",
|
||||
month,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="mt-10"
|
||||
onClick={() => sendInfoUserCooperationSystem()}
|
||||
>
|
||||
<button className="btn btn-primary rounded-full text-sm p-3 !px-5">
|
||||
مرحله بعد
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : stepsaleCooperationSystem == 2 ? (
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
<div className="xs:col-span-1 lg:col-span-2 ">
|
||||
<div className="bg-white rounded-2xl p-5 ">
|
||||
<p className=" text-sm mb-2 text-center font-medium text-primary-600">
|
||||
کد معرف شما{" "}
|
||||
</p>
|
||||
|
||||
<div className="bg-gray-200 p-5 rounded-2xl">
|
||||
<p className="mb-0 font-bold text-center">
|
||||
{cooperationSystemProfileData?.discountCode}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="bg-primary-500 text-center rounded-2xl p-10">
|
||||
<PersianNumber
|
||||
number={cooperationSystemProfileData?.orderCount}
|
||||
style={"text-white !text-[30px]"}
|
||||
/>
|
||||
<p className="mb-0 text-sm text-center text-white mt-1">
|
||||
فروش شما
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="bg-green-700 text-center rounded-2xl p-10">
|
||||
<div className="flex justify-center">
|
||||
<PersianNumber
|
||||
number={cooperationSystemProfileData?.balance}
|
||||
style={"text-white !text-[30px]"}
|
||||
/>
|
||||
|
||||
<small className="text-white mr-1 opacity-70">
|
||||
تومان
|
||||
</small>
|
||||
</div>
|
||||
<p className="mb-0 text-sm text-center text-white mt-1">
|
||||
سود شما از خرید{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
Loading…
Reference in New Issue