publish
parent
9329f6bfa9
commit
36f934a601
|
|
@ -6,12 +6,14 @@ import logo from "../../../public/images/logo.png";
|
|||
import p2 from "../../../public/images/product/2.png";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
import Link from "next/link";
|
||||
|
||||
const CardCart = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<div className=" h-fit ">
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
|
|
@ -29,17 +31,20 @@ const CardCart = ({ data }) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
<div className="p-3 text-right w-full">
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||
{data?.persianName}
|
||||
</p>
|
||||
</Link>
|
||||
|
||||
<div className=" rounded-full flex ltr pt-2 mt-2 w-full">
|
||||
<AddToCart data={data} />
|
||||
<AddToCart data={data} theme={1} />
|
||||
|
||||
<div className="w-full text-right rounded-full">
|
||||
{data?.hasDiscount ? (
|
||||
<div className="flex justify-end">
|
||||
<div className="flex justify-end relative">
|
||||
<p className="mb-0 font-bold text-sm absolute opacity-40 mt-[-7px] ml-[20px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ const CardCategories = ({ data }) => {
|
|||
|
||||
<div className=" rounded-full flex ltr p-3 mt-2">
|
||||
<div className="flex w-full">
|
||||
<AddToCart data={data} />
|
||||
<AddToCart data={data} theme={1} />
|
||||
</div>
|
||||
<div className="w-full text-right rounded-full">
|
||||
{data?.hasDiscount ? (
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ const CardCategoriesMobile = ({ data }) => {
|
|||
|
||||
return (
|
||||
<div className="group border-t-[1px] border-gray-200 w-full hover:bg-white z-40 tr03 flex rtl pt-2 px-3">
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<div className=" h-fit ">
|
||||
{!!data.mainImage ? (
|
||||
<Image
|
||||
|
|
@ -31,20 +32,23 @@ const CardCategoriesMobile = ({ data }) => {
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="p-3 text-right w-full">
|
||||
{" "}
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
||||
{data?.persianName}
|
||||
</p>
|
||||
|
||||
</Link>
|
||||
{data.stock <= 3 && (
|
||||
<p className="mb-0 xs:text-[11px] lg:text-[12px] xl:text-[13px] text-red-600 font-medium">
|
||||
{" "}
|
||||
{data.stock}عدد موجود انبار
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className=" rounded-full flex ltr pt-2 mt-2 w-full">
|
||||
<AddToCart data={data} />{" "}
|
||||
<AddToCart data={data} theme={1} />{" "}
|
||||
<div className="w-full text-right rounded-lg">
|
||||
{data?.hasDiscount ? (
|
||||
<div className="flex justify-end">
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import Image from "next/image";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import AddToCart from "../Components/AddToCart/page";
|
||||
import Link from "next/link";
|
||||
|
||||
const CardNormal = ({ data }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
|
@ -15,6 +16,7 @@ const CardNormal = ({ data }) => {
|
|||
<>
|
||||
{" "}
|
||||
<>
|
||||
<Link href={`/products/${data.id}`}>
|
||||
<div
|
||||
className={` tr03 py-2 overflow-hidden xs:h-[200px] lg:h-[230px] border border-gray-100 ${
|
||||
1 == 1 ? "bg-white rounded-xl" : " opacity-70"
|
||||
|
|
@ -66,10 +68,11 @@ const CardNormal = ({ data }) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
<div className="bg-gray-50 rounded-lg flex ltr p-1 mt-2 border border-gray-100">
|
||||
<div className="flex w-full">
|
||||
<AddToCart data={data} />
|
||||
<AddToCart data={data} theme={1} />
|
||||
</div>
|
||||
|
||||
<div className="w-full text-right rounded-full pr-2">
|
||||
|
|
|
|||
|
|
@ -3,30 +3,43 @@ import AppContext from "@ctx/AppContext";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
const AddToCart = ({ data }) => {
|
||||
const AddToCart = ({ data, theme }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
console.log(
|
||||
data?.id,
|
||||
data?.persianName,
|
||||
data?.cost,
|
||||
data?.costWithDiscount,
|
||||
data?.mainImage,
|
||||
data?.hasDiscount,
|
||||
data?.maxOrderCount
|
||||
);
|
||||
|
||||
const handleAddItemToCart = (id) => {
|
||||
CTX.AddItemToCart(
|
||||
data.id,
|
||||
data.persianName,
|
||||
data.cost,
|
||||
data.costWithDiscount,
|
||||
data.mainImage,
|
||||
data.hasDiscount,
|
||||
data.maxOrderCount
|
||||
data?.id,
|
||||
data?.persianName,
|
||||
data?.cost,
|
||||
data?.costWithDiscount,
|
||||
data?.mainImage,
|
||||
data?.hasDiscount,
|
||||
data?.maxOrderCount
|
||||
);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{data.stock == 0 ? (
|
||||
{theme == 1 && (
|
||||
<>
|
||||
{" "}
|
||||
{data?.stock == 0 ? (
|
||||
<div className="bg-gray-200 w-full h-fit p-2 rounded-xl">
|
||||
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex">
|
||||
{!cart.find((item) => item.id === data.id) ? (
|
||||
{!cart.find((item) => item.id === data?.id) ? (
|
||||
<div className="w-[25px] h-[25px] bg-gray-100 overflow-hidden rounded-lg text-center p-1 m-1 cursor-pointer">
|
||||
<div onClick={() => handleAddItemToCart()}>
|
||||
<p className="mb-0 text-[25px] mt-[-10px]">+</p>
|
||||
|
|
@ -42,12 +55,12 @@ const AddToCart = ({ data }) => {
|
|||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 text-sm ">
|
||||
<PersianNumber
|
||||
number={cart.find((item) => item.id === data.id).count}
|
||||
number={cart.find((item) => item.id === data?.id).count}
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
||||
onClick={() => CTX.RemoveItemFromCart(data.id)}
|
||||
onClick={() => CTX.RemoveItemFromCart(data?.id)}
|
||||
>
|
||||
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
|
||||
</div>
|
||||
|
|
@ -56,6 +69,51 @@ const AddToCart = ({ data }) => {
|
|||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{theme == 2 && (
|
||||
<>
|
||||
{" "}
|
||||
{data?.stock == 0 ? (
|
||||
<div className="bg-red-900 w-fit px-5 h-fit p-2 rounded-xl">
|
||||
<p className="mb-0 text-[12px] text-center ">اتمام موجودی</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex">
|
||||
{!cart.find((item) => item.id === data?.id) ? (
|
||||
<div className=" bg-primary-500 overflow-hidden rounded-lg text-center p-1 px-5 cursor-pointer">
|
||||
<div onClick={() => handleAddItemToCart()}>
|
||||
<p className="mb-0 text-sm text-white xs:mt-[6px] lg:mt-[2px]">
|
||||
افزودن به سبد
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl bg-gray-50 p-1 h-fit rounded-lg">
|
||||
<div
|
||||
className="w-[25px] h-[25px] bg-gray-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
||||
onClick={() => handleAddItemToCart()}
|
||||
>
|
||||
<p className="mb-0 text-[20px] mt-[-2px]">+</p>
|
||||
</div>
|
||||
<p className="mb-0 mx-2 mt-1 text-sm ">
|
||||
<PersianNumber
|
||||
number={cart.find((item) => item.id === data?.id).count}
|
||||
/>
|
||||
</p>
|
||||
<div
|
||||
className="w-[25px] h-[25px] bg-red-200 overflow-hidden rounded-lg text-center cursor-pointer "
|
||||
onClick={() => CTX.RemoveItemFromCart(data?.id)}
|
||||
>
|
||||
<p className="mb-0 text-[20px] mt-[-2px]">-</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,25 @@ import Link from "next/link";
|
|||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const NavBarDownCart = ({ calculateTotalCost, event }) => {
|
||||
const NavBarDownCart = ({ calculateTotalCost, event, permissionGoPay }) => {
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="relative ">
|
||||
<div className="fixed w-full bottom-[0] p-4 bg-body-100 border-t-[1px] border-gray-200 flex rtl">
|
||||
{/* <Link href={"/cart/checkout"} className="w-full"> */}
|
||||
|
||||
{permissionGoPay ? (
|
||||
<button
|
||||
className="btn btn-primary rounded-lg text-sm w-full"
|
||||
onClick={event}
|
||||
>
|
||||
ادامه فرایند خرید
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn btn-primary rounded-lg text-sm w-full opacity-40">
|
||||
ادامه فرایند خرید
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* </Link> */}
|
||||
<div className="w-full mx-2">
|
||||
<p className="mb-0 text-sm font-semibold text-primary-500 text-center">
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const FilterCategory = ({
|
|||
}) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const brands = CTX.state.brands;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
|
||||
const handleCheckboxChange = () => {
|
||||
setIsChecked(!isChecked);
|
||||
|
|
@ -45,6 +46,7 @@ const FilterCategory = ({
|
|||
|
||||
useEffect(() => {
|
||||
CTX.fetchProducts(
|
||||
pageGetProducts,
|
||||
id,
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import CardCategories from "@comp/Cards/CardCategories/page";
|
|||
import AppContext from "@ctx/AppContext";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
|
||||
const ListProdocts = ({
|
||||
sortBy,
|
||||
|
|
@ -15,11 +16,13 @@ const ListProdocts = ({
|
|||
}) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const products = CTX.state.products;
|
||||
|
||||
console.log("products", products);
|
||||
const pager = CTX.state.pager;
|
||||
const stopGetTasks = CTX.state.stopGetTasks;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
|
||||
useEffect(() => {
|
||||
CTX.fetchProducts(
|
||||
pageGetProducts,
|
||||
id,
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
|
|
@ -31,7 +34,7 @@ const ListProdocts = ({
|
|||
}, [sortBy]);
|
||||
|
||||
return (
|
||||
<div className="lg:col-span-6 xl:col-span-4 ">
|
||||
<div>
|
||||
<div className=" px-10 ">
|
||||
<div className=" border-b-[1px] border-gray-50 pb-6">
|
||||
<div className="flex justify-between">
|
||||
|
|
@ -117,7 +120,7 @@ const ListProdocts = ({
|
|||
<div className="">
|
||||
<p className="mb-0 text-base lg:text-sm xl:text-base">
|
||||
<PersianNumber
|
||||
number={12354}
|
||||
number={pager?.totalItems}
|
||||
style="text-[16px] mx-2 font-bold"
|
||||
/>
|
||||
کالا
|
||||
|
|
@ -127,7 +130,9 @@ const ListProdocts = ({
|
|||
</div>
|
||||
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5">
|
||||
<>{products && products.map((e) => <CardCategories data={e} />)}</>
|
||||
{products?.map((e) => (
|
||||
<CardCategories data={e} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,13 @@ import React, { useContext, useEffect, useState } from "react";
|
|||
|
||||
const FilterCategoryMobile = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
|
||||
const [trendFilter, setTrendFilter] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
CTX.fetchProducts(
|
||||
pageGetProducts,
|
||||
props.id,
|
||||
props.selectedBrands,
|
||||
props.isChecked,
|
||||
|
|
|
|||
|
|
@ -3,16 +3,21 @@ import CardCategoriesMobile from "@comp/Cards/CardCategoriesMobile/page";
|
|||
import CardNormal from "@comp/Cards/CardNormal/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import React, { useContext } from "react";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
|
||||
const ListProductsMobile = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
const products = CTX.state.products;
|
||||
const stopGetTasks = CTX.state.stopGetTasks;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-4 xl:grid-cols-5">
|
||||
<>{products && products.map((e) => <CardCategoriesMobile data={e} />)}</>
|
||||
{products?.map((e) => (
|
||||
<CardCategoriesMobile data={e} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,49 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
|
||||
const PaginationCategoory = (props) => {
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
const pager = CTX.state.pager;
|
||||
const pageGetProducts = CTX.state.pageGetProducts;
|
||||
|
||||
const [currentPageIndex, setCurrentPageIndex] = useState(pageGetProducts);
|
||||
const renderPaginationButtons = () => {
|
||||
const buttons = [];
|
||||
for (let i = 0; i < pager?.totalPage; i++) {
|
||||
buttons.push(
|
||||
<div
|
||||
key={i}
|
||||
className={`w-[25px] h-[25px] rounded-full tr03 bg-${
|
||||
currentPageIndex === i ? "secondary-500" : "primary-200"
|
||||
} mx-1 cursor-pointer`}
|
||||
onClick={() => {
|
||||
console.log("ss", i);
|
||||
setCurrentPageIndex(i);
|
||||
CTX.fetchProducts(
|
||||
i,
|
||||
props.id,
|
||||
props.selectedBrands,
|
||||
props.isChecked,
|
||||
props.rangePrice,
|
||||
props.rangePrice,
|
||||
props.sortBy,
|
||||
props.isRangePrice,
|
||||
true //pagination say or not
|
||||
);
|
||||
}}
|
||||
>
|
||||
<p className="mb-0 text-center pt-[2px] text-white">
|
||||
<PersianNumber number={i + 1} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return buttons;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-center rtl mb-10">
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
|
|
@ -22,31 +64,7 @@ const PaginationCategoory = (props) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={1} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={2} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={3} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-200 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={4} style=" !text-[14px] " />
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-800 mx-1">
|
||||
<p className="mb-0 text-center pt-[2px]">
|
||||
<PersianNumber number={5} style=" !text-[14px] text-white " />
|
||||
</p>
|
||||
</div>
|
||||
{renderPaginationButtons()}
|
||||
<div className="w-[25px] h-[25px] rounded-full bg-primary-300 mx-2">
|
||||
<svg
|
||||
width="13"
|
||||
|
|
|
|||
|
|
@ -130,12 +130,22 @@ const Footer = () => {
|
|||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<Link href={`/faq`}>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
سوالات متداول{" "}
|
||||
</li>
|
||||
</Link>
|
||||
<Link href={`/contact-us`}>
|
||||
<li className="text-sm text-gray-600 mt-2">تماس باما </li>
|
||||
<li className="text-sm text-gray-600 mt-2">قوانین سایت</li>
|
||||
</Link>
|
||||
<Link href={`/terms-and-conditions`}>
|
||||
<li className="text-sm text-gray-600 mt-2">
|
||||
قوانین سایت
|
||||
</li>
|
||||
</Link>
|
||||
<Link href={`/about-us`}>
|
||||
<li className="text-sm text-gray-600 mt-2">درباره ما </li>
|
||||
</Link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ const Navbar = ({ theme }) => {
|
|||
|
||||
const CTX = useContext(AppContext);
|
||||
const dataNav = CTX.state.navData;
|
||||
const profile = CTX.state.profile;
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
const [navItemHover, setNavItemHover] = useState(null);
|
||||
|
|
@ -81,11 +82,13 @@ const Navbar = ({ theme }) => {
|
|||
</div>
|
||||
|
||||
<div className="flex rtl py-5 ">
|
||||
{1 == 2 ? (
|
||||
{profile?.length <= 0 ? (
|
||||
<div className="flex">
|
||||
<Link href={"/login"}>
|
||||
<div className="bg-gray-100 py-2 px-5 rounded-xl text-sm ">
|
||||
ورود / عضویت{" "}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex">
|
||||
|
|
@ -94,7 +97,9 @@ const Navbar = ({ theme }) => {
|
|||
className="bg-gray-100 py-2 px-5 rounded-xl text-sm flex cursor-pointer "
|
||||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||||
>
|
||||
<p className="mb-0">حسین معصومی پور</p>
|
||||
<p className="mb-0">
|
||||
{profile?.firstName} {profile?.lastName}
|
||||
</p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-primary-500 mr-2"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -110,42 +115,44 @@ const Navbar = ({ theme }) => {
|
|||
<div>
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile"}>
|
||||
<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="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile/orders"}>
|
||||
<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="group cursor-pointer">
|
||||
<Link href={"/profile/address"}>
|
||||
<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">
|
||||
<li
|
||||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||||
onClick={() =>
|
||||
CTX.setBottomSheetLogOutOpen(true)
|
||||
}
|
||||
>
|
||||
<p className="mb-0 text-sm text-red-500 group-hover: ">
|
||||
خروج{" "}
|
||||
</p>
|
||||
|
|
@ -348,11 +355,13 @@ const Navbar = ({ theme }) => {
|
|||
</div>
|
||||
<div className="flex">
|
||||
<div className="flex">
|
||||
{1 == 2 ? (
|
||||
{profile?.length <= 0 ? (
|
||||
<div className="flex">
|
||||
<Link href={"/login"}>
|
||||
<div className="bg-gray-100 py-2 px-3 rounded-xl text-sm ">
|
||||
ورود / عضویت{" "}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex">
|
||||
|
|
@ -361,7 +370,9 @@ const Navbar = ({ theme }) => {
|
|||
className="bg-gray-100 py-2 px-3 rounded-xl text-sm flex cursor-pointer "
|
||||
onClick={() => setSmallDashboard(!smallDashboard)}
|
||||
>
|
||||
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||
<p className="mb-0">
|
||||
{profile?.firstName} {profile?.lastName}
|
||||
</p>{" "}
|
||||
</div>
|
||||
|
||||
{smallDashboard && (
|
||||
|
|
@ -376,42 +387,44 @@ const Navbar = ({ theme }) => {
|
|||
<div>
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile"}>
|
||||
<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="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile/orders"}>
|
||||
<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="group cursor-pointer">
|
||||
<Link href={"/profile/address"}>
|
||||
<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">
|
||||
<li
|
||||
className="flex justify-between p-2 rounded-full group hover:bg-red-200 tr03 cursor-pointer"
|
||||
onClick={() =>
|
||||
CTX.setBottomSheetLogOutOpen(true)
|
||||
}
|
||||
>
|
||||
<p className="mb-0 text-sm text-red-500 group-hover: ">
|
||||
خروج{" "}
|
||||
</p>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,221 @@
|
|||
export const iranProvince = () => {
|
||||
return [
|
||||
{
|
||||
id: 4,
|
||||
title: "آذربايجان شرقي",
|
||||
slug: "East Azarbaijan",
|
||||
latitude: 37.9035733,
|
||||
longitude: 46.2682109,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "آذربايجان غربي",
|
||||
slug: "Western Azerbaijan",
|
||||
latitude: 37.9035733,
|
||||
longitude: 46.2682109,
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: "اردبيل",
|
||||
slug: "Ardabil",
|
||||
latitude: 38.4853276,
|
||||
longitude: 47.8911209,
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "اصفهان",
|
||||
slug: "Esfahan",
|
||||
latitude: 32.6546275,
|
||||
longitude: 51.6679826,
|
||||
},
|
||||
{
|
||||
id: 31,
|
||||
title: "البرز",
|
||||
slug: "Alborz",
|
||||
latitude: 35.9960467,
|
||||
longitude: 50.9289246,
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: "ايلام",
|
||||
slug: "Ilam",
|
||||
latitude: 33.2957618,
|
||||
longitude: 46.670534,
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: "بوشهر",
|
||||
slug: "Bushehr",
|
||||
latitude: 28.9233837,
|
||||
longitude: 50.820314,
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
title: "تهران",
|
||||
slug: "Tehran",
|
||||
latitude: 35.696111,
|
||||
longitude: 51.423056,
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
title: "خراسان جنوبي",
|
||||
slug: "South Khorasan",
|
||||
latitude: 32.5175643,
|
||||
longitude: 59.1041758,
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "خراسان رضوئ",
|
||||
slug: "Khorasan Razavi",
|
||||
latitude: 32.5175643,
|
||||
longitude: 59.1041758,
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: "خراسان شمالي",
|
||||
slug: "North Khorasan",
|
||||
latitude: 37.4710353,
|
||||
longitude: 57.1013188,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "خوزستان",
|
||||
slug: "Khuzestan",
|
||||
latitude: 31.4360149,
|
||||
longitude: 49.041312,
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: "زنجان",
|
||||
slug: "Zanjan",
|
||||
latitude: 36.5018185,
|
||||
longitude: 48.3988186,
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: "سمنان",
|
||||
slug: "Semnan",
|
||||
latitude: 35.2255585,
|
||||
longitude: 54.4342138,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "سيستان وبلوچستان",
|
||||
slug: "Sistan and Baluchistan",
|
||||
latitude: 27.5299906,
|
||||
longitude: 60.5820676,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "فارس",
|
||||
slug: "Fars",
|
||||
latitude: 29.1043813,
|
||||
longitude: 53.045893,
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
title: "قزوين",
|
||||
slug: "Qazvin",
|
||||
latitude: 36.0881317,
|
||||
longitude: 49.8547266,
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: "قم",
|
||||
slug: "Qom",
|
||||
latitude: 34.6399443,
|
||||
longitude: 50.8759419,
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: "كردستان",
|
||||
slug: "Kurdistan",
|
||||
latitude: 31.4360149,
|
||||
longitude: 49.041312,
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "كرمان",
|
||||
slug: "Kerman",
|
||||
latitude: 30.2839379,
|
||||
longitude: 57.0833628,
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "کرمانشاه",
|
||||
slug: "Kermanshah",
|
||||
latitude: 34.314167,
|
||||
longitude: 47.065,
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: "كهگيلويه وبويراحمد",
|
||||
slug: "Kohgiloyeh Boyerahmad",
|
||||
latitude: 30.6509479,
|
||||
longitude: 51.60525,
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
title: "گلستان",
|
||||
slug: "Golestan",
|
||||
latitude: 37.2898123,
|
||||
longitude: 55.1375834,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "گيلان",
|
||||
slug: "Gilan",
|
||||
latitude: 37.2809,
|
||||
longitude: 49.5924,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: "لرستان",
|
||||
slug: "Lorestan",
|
||||
latitude: 31.4360149,
|
||||
longitude: 49.041312,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "مازندران",
|
||||
slug: "Mazandaran",
|
||||
latitude: 36.2262393,
|
||||
longitude: 52.5318604,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "مرکزی",
|
||||
slug: "Markazi",
|
||||
latitude: 34.6123,
|
||||
longitude: 49.8547,
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: "هرمزگان",
|
||||
slug: "Hormozgan",
|
||||
latitude: 30.2839379,
|
||||
longitude: 57.0833628,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: "همدان",
|
||||
slug: "Hamedan",
|
||||
latitude: 27.138723,
|
||||
longitude: 55.1375834,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: "چهارمحال وبختياری",
|
||||
slug: "Chaharmahal and Bakhtiari ",
|
||||
latitude: 31.9614348,
|
||||
longitude: 50.8456323,
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: "یزد",
|
||||
slug: "Yazd",
|
||||
latitude: 0,
|
||||
longitude: 0,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "vesmeh",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vesmeh",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.17",
|
||||
"axios": "^1.6.5",
|
||||
|
|
@ -18,8 +18,11 @@
|
|||
"react-dom": "^18",
|
||||
"react-grid-gallery": "^1.0.1-alpha.0",
|
||||
"react-image-gallery": "^1.3.0",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-spring-bottom-sheet": "^3.4.1",
|
||||
"react-toastify": "^9.1.3",
|
||||
"simple-react-validator": "^1.6.2",
|
||||
"swiper": "^11.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1968,6 +1971,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/exenv": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
|
||||
"integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
|
||||
},
|
||||
"node_modules/external-editor": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
|
||||
|
|
@ -4007,11 +4015,59 @@
|
|||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-image-lightbox": {
|
||||
"version": "5.1.4",
|
||||
"resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.4.tgz",
|
||||
"integrity": "sha512-kTiAODz091bgT7SlWNHab0LSMZAPJtlNWDGKv7pLlLY1krmf7FuG1zxE0wyPpeA8gPdwfr3cu6sPwZRqWsc3Eg==",
|
||||
"deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react-modal": "^3.11.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "16.x || 17.x",
|
||||
"react-dom": "16.x || 17.x"
|
||||
}
|
||||
},
|
||||
"node_modules/react-infinite-scroll-component": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-infinite-scroll-component/-/react-infinite-scroll-component-6.1.0.tgz",
|
||||
"integrity": "sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==",
|
||||
"dependencies": {
|
||||
"throttle-debounce": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.0.0"
|
||||
}
|
||||
},
|
||||
"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=="
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-modal": {
|
||||
"version": "3.16.1",
|
||||
"resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
|
||||
"integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
|
||||
"dependencies": {
|
||||
"exenv": "^1.2.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-lifecycles-compat": "^3.0.0",
|
||||
"warning": "^4.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
|
||||
"react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-spring": {
|
||||
"version": "8.0.27",
|
||||
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
|
||||
|
|
@ -4092,30 +4148,6 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"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",
|
||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
|
||||
|
|
@ -4472,6 +4504,11 @@
|
|||
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
|
||||
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
|
||||
},
|
||||
"node_modules/simple-react-validator": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/simple-react-validator/-/simple-react-validator-1.6.2.tgz",
|
||||
"integrity": "sha512-49KhaVh7wXTANXKuvLtRebK1RKTBi3Cu/7jf8ssBdL+9ShZOfW74nkPWK+AFj4NApSYpYozMQ27ZybE630SNVA=="
|
||||
},
|
||||
"node_modules/slash": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
|
||||
|
|
@ -4803,6 +4840,14 @@
|
|||
"node": ">=0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/throttle-debounce": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
|
||||
"integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
|
||||
|
|
@ -4955,20 +5000,6 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "5.3.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz",
|
||||
"integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==",
|
||||
"dev": true,
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17"
|
||||
}
|
||||
},
|
||||
"node_modules/unbox-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -19,8 +19,11 @@
|
|||
"react-dom": "^18",
|
||||
"react-grid-gallery": "^1.0.1-alpha.0",
|
||||
"react-image-gallery": "^1.3.0",
|
||||
"react-image-lightbox": "^5.1.4",
|
||||
"react-infinite-scroll-component": "^6.1.0",
|
||||
"react-spring-bottom-sheet": "^3.4.1",
|
||||
"react-toastify": "^9.1.3",
|
||||
"simple-react-validator": "^1.6.2",
|
||||
"swiper": "^11.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import axios from "axios";
|
||||
|
||||
export const getToken = () => {
|
||||
return "Bearer " + localStorage.token;
|
||||
return localStorage.token;
|
||||
};
|
||||
|
||||
const Chapar = axios.create({
|
||||
|
|
|
|||
|
|
@ -1,86 +1,75 @@
|
|||
"use client ";
|
||||
|
||||
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 p3 from "../../public/images/product/3.png";
|
||||
import p4 from "../../public/images/product/4.png";
|
||||
import logo from "../../public/images/logo.png";
|
||||
import Image from "next/image";
|
||||
import Lightbox from "react-image-lightbox";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
|
||||
const GalleryBox = ({ file }) => {
|
||||
console.log(file && file[0]?.fileLocation);
|
||||
const CTX = useContext(AppContext);
|
||||
|
||||
const isOpenLightBox = CTX.state.isOpenLightBox;
|
||||
|
||||
console.log("image", file);
|
||||
return (
|
||||
<div className=" w-full rounded-3xl">
|
||||
<div className="flex justify-center xs:pb-[10px] lg:py-10">
|
||||
<div className="xs:w-[190px] lg:w-[290px]">
|
||||
{!!file ? (
|
||||
<div className="flex justify-center xs:pb-[10px] ">
|
||||
<div className="">
|
||||
{file?.length > 0 ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
||||
file && file[0].fileLocation
|
||||
}`}
|
||||
width={500}
|
||||
height={500}
|
||||
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
||||
width={350}
|
||||
height={350}
|
||||
className=" mx-auto !object-cover"
|
||||
onClick={() => CTX.setIsOpenLightBox(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
||||
{/* <Image
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/> */}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex overflow-x-auto p-3 " id="swich-scrollbar">
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
<Image src={p1} />
|
||||
{file?.map((e) => (
|
||||
<div
|
||||
className="rounded-3xl bg-white border shadow-sm p-3 ml-2"
|
||||
key={e.id}
|
||||
onClick={() => CTX.setIsOpenLightBox(true)}
|
||||
>
|
||||
<div className="xs:w-[50px] lg:w-[50px]">
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.fileLocation}`}
|
||||
alt={e.fileName}
|
||||
width={50}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
<Image src={p2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
<Image src={p3} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
<Image src={p4} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2 inline-block">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
{" "}
|
||||
<Image src={p1} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
{" "}
|
||||
<Image src={p2} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
{" "}
|
||||
<Image src={p3} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-3xl bg-gray-200 p-3 ml-2">
|
||||
<div className="xs:w-[50px] lg:w-[80px]">
|
||||
{" "}
|
||||
<Image src={p4} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{isOpenLightBox && (
|
||||
<Lightbox
|
||||
mainSrc={`http://storage.vesmook.com/${
|
||||
file && file[0].fileLocation
|
||||
}`}
|
||||
onCloseRequest={() => CTX.setIsOpenLightBox(false)}
|
||||
onImageLoadError={(e) => console.log(e)}
|
||||
imageLoadErrorMessage={"باز نمیشه ؟!!!"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,390 @@
|
|||
"use client";
|
||||
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import { iranCities } from "iranCities";
|
||||
import { iranProvince } from "iranProvince";
|
||||
import Chapar from "plugins/Chapar";
|
||||
import React, { useContext, useEffect, useRef, useState } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
import SimpleReactValidator from "simple-react-validator";
|
||||
|
||||
const BottomSheetAddress = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const provinceData = iranProvince();
|
||||
const citiesData = iranCities();
|
||||
|
||||
const [province, setProvince] = useState(null);
|
||||
const [city, setCity] = useState(null);
|
||||
const [cityData, setCityData] = useState([]);
|
||||
const [plaque, setPlaque] = useState("");
|
||||
const [address, setAddress] = useState("");
|
||||
const [buildingUnit, setBuildingUnit] = useState("");
|
||||
const [postalCode, setPostalCode] = useState("");
|
||||
const [receiverFullName, setReceiverFullName] = useState("");
|
||||
const [receiverPhoneNumber, setReceiverPhoneNumber] = useState("");
|
||||
|
||||
const validator = useRef(
|
||||
new SimpleReactValidator({
|
||||
messages: {
|
||||
required: "پر کردن این فیلد الزامی میباشد",
|
||||
},
|
||||
element: (message) => (
|
||||
<>
|
||||
<div className="text-right px-1 ">
|
||||
<small className="text-red-600 t-ig-small ">{message}</small>
|
||||
</div>
|
||||
</>
|
||||
),
|
||||
})
|
||||
);
|
||||
|
||||
const body = {
|
||||
address,
|
||||
province: provinceData?.find((e) => e.id == province)?.title,
|
||||
city: citiesData?.find((e) => e.id == city)?.title,
|
||||
plaque,
|
||||
buildingUnit,
|
||||
receiverFullName,
|
||||
receiverPhoneNumber,
|
||||
postalCode,
|
||||
};
|
||||
|
||||
const handleCreateAddress = async () => {
|
||||
if (validator.current.allValid()) {
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/user/address`,
|
||||
JSON.stringify(body),
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
toast.success(`آدرس اضافه شد`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
|
||||
CTX.setBottomSheetAddressOpen(false);
|
||||
CTX.fetchAddressUser();
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error("پرکردن همه ی فیلد ها واجب است", {
|
||||
position: "bottom-right",
|
||||
autoClose: 2000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: true,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setCityData(citiesData.filter((city) => city.province_id == province));
|
||||
}, [province]);
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetAddressOpen}
|
||||
onDismiss={() => CTX.setBottomSheetAddressOpen(false)}
|
||||
className={"z-50 relative "}
|
||||
>
|
||||
<div className="xs:w-full lg:w-4/12 mx-auto">
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">اقزودن آدرس جدید </p>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
استان
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<select
|
||||
type="text"
|
||||
name="province"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="نام استان"
|
||||
onChange={(e) => {
|
||||
setProvince(e.target.value);
|
||||
validator.current.showMessageFor("province");
|
||||
}}
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="" disabled hidden>
|
||||
انتخاب کنید
|
||||
</option>
|
||||
{provinceData?.map((c, index) => (
|
||||
<option key={index} value={c.id}>
|
||||
{c.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>
|
||||
{validator.current.message("province", province, "required")}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
شهر
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<select
|
||||
type="text"
|
||||
name="city"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="نام استان"
|
||||
onChange={(e) => {
|
||||
setCity(e.target.value);
|
||||
validator.current.showMessageFor("city");
|
||||
}}
|
||||
>
|
||||
{cityData?.map((c, index) => (
|
||||
<option key={index} value={c.id}>
|
||||
{c.title}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>{validator.current.message("city", city, "required")}</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
آدرس
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="address"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="2"
|
||||
onChange={(e) => {
|
||||
setAddress(e.target.value);
|
||||
validator.current.showMessageFor("address");
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>{validator.current.message("address", address, "required")}</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
پلاک
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="plaque"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="24"
|
||||
onChange={(e) => {
|
||||
setPlaque(e.target.value);
|
||||
validator.current.showMessageFor("plaque");
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>{validator.current.message("plaque", plaque, "required")}</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
واحد
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="buildingUnit"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="2"
|
||||
onChange={(e) => {
|
||||
setBuildingUnit(e.target.value);
|
||||
validator.current.showMessageFor("buildingUnit");
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"buildingUnit",
|
||||
buildingUnit,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
کد پستی
|
||||
<small className="text-red-500 mx-1">*</small>
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="postalCode"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="2"
|
||||
onChange={(e) => {
|
||||
setPostalCode(e.target.value);
|
||||
validator.current.showMessageFor("postalCode");
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"postalCode",
|
||||
postalCode,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
نام گرینده
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="receiverFullName"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="علی احمدی"
|
||||
onChange={(e) => {
|
||||
setReceiverFullName(e.target.value);
|
||||
validator.current.showMessageFor("receiverFullName");
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"receiverFullName",
|
||||
receiverFullName,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-3">
|
||||
<label className="float-right mx-3 text-sm my-2 rtl">
|
||||
شماره گرینده
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="receiverPhoneNumber"
|
||||
onChange={(e) => {
|
||||
setReceiverPhoneNumber(e.target.value);
|
||||
validator.current.showMessageFor("receiverPhoneNumber");
|
||||
}}
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="0912......"
|
||||
/>
|
||||
|
||||
<div className="flex justify-start w-full">
|
||||
<small className=" ">
|
||||
{" "}
|
||||
{validator ? (
|
||||
<>
|
||||
{validator.current.message(
|
||||
"receiverPhoneNumber",
|
||||
receiverPhoneNumber,
|
||||
"required"
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full p-3 ">
|
||||
<button
|
||||
className="btn btn-primary text-sm w-full py-3 rounded-3xl"
|
||||
onClick={() => handleCreateAddress()}
|
||||
>
|
||||
ساخت آدرس جدید{" "}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomSheetAddress;
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
"use client";
|
||||
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetDeleteAddress = ({ id }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/user/address/${id}`
|
||||
);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetDeleteAddressOpen}
|
||||
onDismiss={() => CTX.setBottomSheetDeleteAddressOpen(false)}
|
||||
className={"z-50 relative"}
|
||||
>
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">آیا از حذف آدرس اطمینان دارید ؟ </p>
|
||||
</div>
|
||||
|
||||
<div className="xs:w-full lg:w-3/12 mx-auto p-3 ">
|
||||
<button
|
||||
className="btn bg-red-500 text-white text-sm w-full py-3 rounded-3xl"
|
||||
onClick={() => handleDelete()}
|
||||
>
|
||||
حذف آدرس
|
||||
</button>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomSheetDeleteAddress;
|
||||
|
|
@ -3,15 +3,39 @@
|
|||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import Chapar from "plugins/Chapar";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import React, { useContext, useState } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetDiscount = (props) => {
|
||||
const BottomSheetDiscount = ({ orderId }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
|
||||
const [discountCode, setDiscountCode] = useState(null);
|
||||
|
||||
const body = { orderId, discountCode };
|
||||
|
||||
const handleDiscount = async () => {
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/discount/${orderId}?discountCode=${discountCode}`,
|
||||
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
CTX.setCheckOutData(data);
|
||||
CTX.setBottomSheetDiscountOpen(false);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetDiscountOpen}
|
||||
|
|
@ -27,10 +51,14 @@ const BottomSheetDiscount = (props) => {
|
|||
type="text"
|
||||
className="form-control bg-white !border-[1px] focus:!border-[1px] border-gray-400 focus:!border-gray-300 rounded-lg text-right !text-sm tr03 "
|
||||
placeholder="کد را وارد کنید"
|
||||
onChange={(e) => setDiscountCode(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full p-3 ">
|
||||
<button className="btn btn-primary text-sm w-full py-3 rounded-3xl">
|
||||
<button
|
||||
className="btn btn-primary text-sm w-full py-3 rounded-3xl"
|
||||
onClick={() => handleDiscount()}
|
||||
>
|
||||
برسی کد تخفیف{" "}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
|
||||
import CardCart from "@comp/Cards/CardCart/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
import { BottomSheet } from "react-spring-bottom-sheet";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const BottomSheetLogOut = ({ id }) => {
|
||||
const CTX = useContext(AppContext);
|
||||
const cart = CTX.state.cart;
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogOut = async () => {
|
||||
localStorage.removeItem("token");
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
open={CTX.state.bottomSheetLogOutOpen}
|
||||
onDismiss={() => CTX.setBottomSheetLogOutOpen(false)}
|
||||
className={"z-50 relative"}
|
||||
>
|
||||
<div className="text-center p-3">
|
||||
<p className="mb-0 text-sm pb-3">
|
||||
آیا از خروج حساب کاربری اطمینان دارید ؟{" "}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="xs:w-full lg:w-3/12 mx-auto p-3 ">
|
||||
<button
|
||||
className="btn bg-red-500 text-white text-sm w-full py-3 rounded-3xl"
|
||||
onClick={() => handleLogOut()}
|
||||
>
|
||||
خروج{" "}
|
||||
</button>
|
||||
</div>
|
||||
</BottomSheet>
|
||||
);
|
||||
};
|
||||
|
||||
export default BottomSheetLogOut;
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
|
||||
import zarin from "@img/zarin.png";
|
||||
import ap from "@img/ap.png";
|
||||
|
|
@ -10,18 +10,119 @@ import Image from "next/image";
|
|||
import AppContext from "@ctx/AppContext";
|
||||
import BottomSheetDiscount from "plugins/bottomSheet/BottomSheetDiscount";
|
||||
import { useRouter } from "next/navigation";
|
||||
import BottomSheetAddress from "plugins/bottomSheet/BottomSheetAddress";
|
||||
import Chapar from "plugins/Chapar";
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
const page = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const [shippingData, setShippingData] = useState([]);
|
||||
const [shippingId, setShippingID] = useState(null);
|
||||
const [addressData, setAddressData] = useState([]);
|
||||
const [addressId, setAddressId] = useState(null);
|
||||
const [permissionGoPay, setPermissionGoPay] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const checkOutData = CTX.state.checkOutData;
|
||||
|
||||
console.log(checkOutData);
|
||||
const body = {
|
||||
addressId: addressData[addressId]?.id,
|
||||
|
||||
orderId: checkOutData?.id,
|
||||
shippingId: shippingData[shippingId]?.id,
|
||||
};
|
||||
|
||||
console.log(body);
|
||||
|
||||
const GetShippingData = async () => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/warehouse/shipping?page=0`
|
||||
);
|
||||
|
||||
setShippingData(data);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleShippingID = async (index) => {
|
||||
if (addressId !== null) {
|
||||
setShippingID(index);
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/shipping/${checkOutData?.id}`,
|
||||
JSON.stringify({
|
||||
addressId: addressData[addressId]?.id,
|
||||
|
||||
orderId: checkOutData?.id,
|
||||
shippingId: shippingData[index]?.id,
|
||||
}),
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
CTX.setCheckOutData(data);
|
||||
setPermissionGoPay(true);
|
||||
console.log(data);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toast.error(`ابتدا آدرس را انتحاب کنید`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleGoPayment = async () => {
|
||||
try {
|
||||
const data = await Chapar.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/payment/${checkOutData?.id}?paymentMethod=1`,
|
||||
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (shippingData.length <= 0) {
|
||||
GetShippingData();
|
||||
}
|
||||
|
||||
if (CTX.state.addressData <= 0) {
|
||||
CTX.fetchAddressUser();
|
||||
}
|
||||
}, [checkOutData]);
|
||||
|
||||
useEffect(() => {
|
||||
setAddressData(CTX.state.addressData);
|
||||
}, [CTX.state.addressData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (CTX.state.checkOutData.length <= 0) {
|
||||
router.push("/cart");
|
||||
}
|
||||
|
||||
setPermissionGoPay(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
|
|
@ -29,47 +130,60 @@ const page = () => {
|
|||
<div className=" pb-20">
|
||||
<Navbar theme={1} />
|
||||
|
||||
<div className="xs:w-full lg:w-4/12 mx-auto">
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
<p className="mb-0 !text-sm font-semibold py-4">آدس ها</p>
|
||||
|
||||
<div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">تغییر آدرس</p>
|
||||
<div
|
||||
className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg"
|
||||
onClick={() => CTX.setBottomSheetAddressOpen(true)}
|
||||
>
|
||||
<p className="mb-0 text-[11px] text-white rtl">
|
||||
افزودن آدرس جدید
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-3">
|
||||
{addressData.map((e, index) => (
|
||||
<div
|
||||
className={`flex rtl px-3 py-2 border-2 border-transparent tr03 mx-2 mt-3 ${
|
||||
addressId == index
|
||||
? "border-2 border-green-600 rounded-lg bg-green-50"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => setAddressId(index)}
|
||||
>
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 234 244"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 188 264"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto opacity-70 mt-2"
|
||||
className="opacity-70 mx-auto "
|
||||
>
|
||||
<path
|
||||
d="M65.8246 162.813C66.1529 163.999 66.7117 165.11 67.4692 166.081C68.2267 167.052 69.168 167.864 70.2394 168.471C71.3107 169.078 72.4911 169.468 73.7133 169.619C74.9354 169.77 76.1752 169.678 77.3621 169.35C78.5489 169.022 79.6594 168.463 80.6303 167.705C81.6011 166.948 82.4133 166.007 83.0203 164.935C83.6274 163.864 84.0175 162.683 84.1683 161.461C84.3192 160.239 84.2279 158.999 83.8996 157.813L65.8246 162.813ZM11.9996 31.0625C10.8081 30.7145 9.55935 30.6066 8.32582 30.745C7.09228 30.8834 5.89851 31.2654 4.81377 31.8688C3.72903 32.4722 2.77491 33.285 2.00678 34.26C1.23864 35.2351 0.671788 36.353 0.3391 37.5488C0.00641134 38.7447 -0.0854865 39.9947 0.0687392 41.2264C0.222965 42.458 0.620244 43.6468 1.23752 44.7237C1.8548 45.8006 2.6798 46.7442 3.66463 47.4997C4.64947 48.2553 5.77454 48.8077 6.97458 49.125L11.9996 31.0625ZM224.35 168.563C225.57 168.28 226.722 167.756 227.737 167.021C228.752 166.286 229.609 165.355 230.257 164.284C230.906 163.212 231.334 162.021 231.515 160.781C231.695 159.541 231.626 158.278 231.31 157.065C230.994 155.853 230.438 154.716 229.676 153.722C228.913 152.728 227.959 151.897 226.869 151.278C225.78 150.659 224.578 150.264 223.333 150.118C222.089 149.971 220.828 150.076 219.625 150.425L224.35 168.563ZM99.4621 191.488C103.337 205.488 94.8371 220.275 79.7871 224.188L84.4996 242.325C109.212 235.913 124.312 211.05 117.537 186.488L99.4621 191.488ZM79.7871 224.188C64.6371 228.125 49.4371 219.325 45.5371 205.2L27.4621 210.2C34.2121 234.638 59.8871 248.725 84.4996 242.325L79.7871 224.188ZM45.5371 205.2C41.6621 191.2 50.1621 176.413 65.2121 172.5L60.4996 154.375C35.7871 160.788 20.6746 185.638 27.4621 210.2L45.5371 205.2ZM65.2121 172.5C80.3621 168.563 95.5621 177.363 99.4621 191.488L117.537 186.488C110.787 162.05 85.1121 147.963 60.4996 154.363L65.2121 172.5ZM83.8996 157.813L56.9996 60.4375L38.9246 65.4375L65.8246 162.813L83.8996 157.813ZM33.2996 36.9625L11.9996 31.0625L6.97458 49.125L28.2871 55.0375L33.2996 36.9625ZM56.9996 60.4375C55.4136 54.8107 52.3969 49.6907 48.2434 45.5766C44.0899 41.4625 38.9413 38.4948 33.2996 36.9625L28.3121 55.0375C33.6246 56.5125 37.5746 60.55 38.9246 65.4375L56.9996 60.4375ZM110.875 198.063L224.35 168.563L219.637 150.425L106.15 179.925L110.875 198.063Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M211.562 49.9502C205.5 28.0002 202.462 17.0252 193.562 12.0377C184.637 7.03772 173.325 9.98772 150.7 15.8752L126.7 22.1002C104.075 27.9752 92.7623 30.9252 87.6248 39.5752C82.4748 48.2127 85.4998 59.1877 91.5623 81.1252L97.9998 104.413C104.062 126.35 107.087 137.325 116 142.313C124.912 147.313 136.225 144.363 158.85 138.488L182.85 132.238C205.475 126.363 216.787 123.425 221.937 114.788C224.762 110.038 225.125 104.588 223.862 97.0002"
|
||||
d="M94 10.125C47.418 10.125 9.625 46.0957 9.625 90.3984C9.625 141.375 65.875 222.158 86.5293 250.061C87.3866 251.238 88.5103 252.197 89.8087 252.858C91.107 253.518 92.5432 253.863 94 253.863C95.4568 253.863 96.893 253.518 98.1913 252.858C99.4897 252.197 100.613 251.238 101.471 250.061C122.125 222.17 178.375 141.416 178.375 90.3984C178.375 46.0957 140.582 10.125 94 10.125Z"
|
||||
stroke="black"
|
||||
stroke-opacity="0.44"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M94 122.625C109.533 122.625 122.125 110.033 122.125 94.5C122.125 78.967 109.533 66.375 94 66.375C78.467 66.375 65.875 78.967 65.875 94.5C65.875 110.033 78.467 122.625 94 122.625Z"
|
||||
stroke="black"
|
||||
stroke-opacity="0.37"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<p className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
آدرس شما{" "}
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
تهران ، نارمک ، فلکه پنجم پلاک 5 ، واحد 22
|
||||
</p>
|
||||
<p className="mb-0 text-[12px] text-gray-500"> {e.address} </p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">زمان و نحوه ارسال</p>
|
||||
|
|
@ -100,76 +214,15 @@ const page = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 226 176"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-70 mt-2"
|
||||
{shippingData?.map((e, index) => (
|
||||
<div
|
||||
className={`flex rtl px-2 py-1 mx-2 mt-5 border-2 border-transparent tr03 cursor-pointer ${
|
||||
shippingId == index
|
||||
? "border-2 border-green-600 rounded-lg bg-green-50"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => handleShippingID(index)}
|
||||
>
|
||||
<path
|
||||
d="M138 163C158.833 163 176.542 155.708 191.125 141.125C205.708 126.542 213 108.833 213 88C213 66.9583 205.342 49.2 190.025 34.725C174.708 20.25 156.325 13.0083 134.875 13C122.792 13 111.458 14.4667 100.875 17.4C90.3083 20.3333 80.1667 24.7333 70.45 30.6L107.475 45.025C114.725 48.0833 120.583 52.8292 125.05 59.2625C129.517 65.6958 131.75 72.775 131.75 80.5C131.75 91.4 128.029 100.583 120.588 108.05C113.138 115.517 104.15 119.25 93.625 119.25H15.55C14.65 123.608 14 128.525 13.6 134C13.2 139.475 13 146.579 13 155.313C13 157.229 13.8 158.992 15.4 160.6C17.0083 162.2 18.7708 163 20.6875 163H138ZM17.525 106.75H93C100.392 106.75 106.612 104.221 111.662 99.1625C116.721 94.1125 119.25 87.8917 119.25 80.5C119.25 75.2583 117.792 70.5042 114.875 66.2375C111.975 61.9625 107.983 58.7542 102.9 56.6125L58.575 38.8C48.5417 47.325 40.0583 57.3208 33.125 68.7875C26.1667 80.2625 20.9667 92.9167 17.525 106.75ZM138 175.5H20.6875C14.9375 175.5 10.1375 173.575 6.2875 169.725C2.42917 165.867 0.5 161.063 0.5 155.313V145.938C0.5 124.554 3.79167 104.958 10.375 87.15C16.9583 69.3333 26.1875 54.0125 38.0625 41.1875C49.9292 28.3542 64.0958 18.3667 80.5625 11.225C97.0542 4.075 115.158 0.5 134.875 0.5C147.275 0.5 158.967 2.78333 169.95 7.35C180.925 11.9167 190.538 18.1292 198.788 25.9875C207.038 33.8542 213.554 43.1042 218.338 53.7375C223.113 64.3958 225.5 75.8167 225.5 88C225.5 99.9833 223.217 111.308 218.65 121.975C214.083 132.642 207.829 141.946 199.888 149.888C191.946 157.829 182.683 164.079 172.1 168.638C161.517 173.213 150.15 175.5 138 175.5Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
ارسال با پیک (فقط محدوده تهران){" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
<PersianNumber number={5} style={"text-gray-500 mx-1"} />
|
||||
ساعت
|
||||
<small className="mx-2">|</small>
|
||||
هزینه ارسال
|
||||
<PersianNumber number={150} style={"text-gray-500 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 220 220"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mt-1 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M72.5 10V47.5C72.5 54.1304 69.8661 60.4893 65.1777 65.1777C60.4893 69.8661 54.1304 72.5 47.5 72.5H10M147.5 210V172.5C147.5 165.87 150.134 159.511 154.822 154.822C159.511 150.134 165.87 147.5 172.5 147.5H210M210 72.5H172.5C165.87 72.5 159.511 69.8661 154.822 65.1777C150.134 60.4893 147.5 54.1304 147.5 47.5V10M10 147.5H47.5C54.1304 147.5 60.4893 150.134 65.1777 154.822C69.8661 159.511 72.5 165.87 72.5 172.5V210"
|
||||
stroke="black"
|
||||
stroke-opacity="0.79"
|
||||
stroke-width="18.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست عادی{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
حداکثر
|
||||
<PersianNumber number={5} style={"text-gray-600 mx-1"} />
|
||||
روز کاری
|
||||
<small className="mx-2">|</small>
|
||||
هزینه ارسال
|
||||
<PersianNumber number={30} style={"text-gray-600 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
|
|
@ -194,55 +247,26 @@ const page = () => {
|
|||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست سفارشی{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
هزینه ارسال
|
||||
<PersianNumber number={35} style={"text-gray-600 mx-1"} />
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div>
|
||||
<svg
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 264 264"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="opacity-70 mt-2"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M141.375 117.938L197.625 141.375V122.625L141.375 94.5V66.375C141.375 63.8886 140.387 61.504 138.629 59.7459C136.871 57.9877 134.486 57 132 57C129.514 57 127.129 57.9877 125.371 59.7459C123.613 61.504 122.625 63.8886 122.625 66.375V94.5L66.375 122.625V141.375L122.625 117.938V169.5L94.5 188.25V197.625L132 188.25L169.5 197.625V188.25L141.375 169.5V117.938Z"
|
||||
fill="black"
|
||||
fill-opacity="0.44"
|
||||
/>
|
||||
<path
|
||||
d="M132 263.25C106.041 263.25 80.6654 255.552 59.0815 241.13C37.4975 226.709 20.6749 206.21 10.7409 182.227C0.806868 158.244 -1.79232 131.854 3.27199 106.394C8.3363 80.9345 20.8366 57.5479 39.1923 39.1923C57.5479 20.8366 80.9345 8.3363 106.394 3.27199C131.854 -1.79232 158.244 0.806868 182.227 10.7409C206.21 20.6749 226.709 37.4975 241.13 59.0815C255.552 80.6654 263.25 106.041 263.25 132C263.21 166.798 249.37 200.158 224.764 224.764C200.158 249.37 166.798 263.21 132 263.25ZM132 19.5001C109.75 19.5001 87.9989 26.0981 69.4984 38.4597C50.9979 50.8214 36.5785 68.3915 28.0636 88.9482C19.5488 109.505 17.3209 132.125 21.6617 153.948C26.0026 175.771 36.7171 195.816 52.4505 211.55C68.184 227.283 88.2295 237.998 110.052 242.338C131.875 246.679 154.495 244.451 175.052 235.936C195.609 227.422 213.179 213.002 225.54 194.502C237.902 176.001 244.5 154.25 244.5 132C244.465 102.174 232.602 73.5792 211.511 52.4889C190.421 31.3986 161.826 19.5348 132 19.5001Z"
|
||||
fill="black"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پست پیشتاز{" "}
|
||||
{e.name}{" "}
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
{" "}
|
||||
حداکثر
|
||||
<PersianNumber number={2} style={"text-gray-600 mx-1"} />
|
||||
<PersianNumber
|
||||
number={e.workingDays}
|
||||
style={"text-gray-600 mx-1"}
|
||||
/>
|
||||
روز کاری
|
||||
<small className="mx-2">|</small> هزینه ارسال
|
||||
<PersianNumber number={150} style={"text-gray-600 mx-1"} />
|
||||
<PersianNumber
|
||||
number={(e.deliveryCost / 10)?.toLocaleString()}
|
||||
style={"text-gray-600 mx-1"}
|
||||
/>
|
||||
هزار تومان
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 mt-3 px-4 ">
|
||||
|
|
@ -250,7 +274,11 @@ const page = () => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div
|
||||
className={`flex rtl px-2 py-1 mx-2 border-2 border-transparent mt-5 ${
|
||||
true ? "border-2 border-green-600 rounded-lg bg-green-50" : ""
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<Image src={zarin} className="w-[50px]" />
|
||||
</div>
|
||||
|
|
@ -262,20 +290,26 @@ const page = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex rtl px-3 mt-5">
|
||||
<div className="flex rtl px-2 py-1 mx-2 mt-5 opacity-40">
|
||||
<div>
|
||||
<Image src={ap} className="w-[45px]" />
|
||||
</div>
|
||||
<div className="mx-2">
|
||||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||||
پرداخت آنلاین
|
||||
پرداخت آنلاین (به زودی)
|
||||
</h3>
|
||||
<p className="mb-0 text-[12px] text-gray-500">آسان پرداخت</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex justify-between rtl px-3 mt-5"
|
||||
onClick={() => CTX.setBottomSheetDiscountOpen(true)}
|
||||
className={`flex justify-between rtl px-3 mt-5 ${
|
||||
checkOutData?.discountCode != "" ? "opacity-30 blur-[1px]" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (checkOutData?.discountCode == "") {
|
||||
CTX.setBottomSheetDiscountOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="flex">
|
||||
<div>
|
||||
|
|
@ -311,6 +345,11 @@ const page = () => {
|
|||
<span className="text-[30px] opacity-60">+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right flex justify-end px-2 py-1 mx-2">
|
||||
<p className="text-green-600 mb-0 text-[12px] ">
|
||||
کد تخفیف ثبت شد{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="">
|
||||
|
|
@ -329,7 +368,9 @@ const page = () => {
|
|||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.totalProductsPrice?.toLocaleString()}
|
||||
number={(
|
||||
checkOutData?.totalProductsPrice / 10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -346,7 +387,9 @@ const page = () => {
|
|||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.discountPrice?.toLocaleString()}
|
||||
number={(
|
||||
checkOutData?.discountPrice / 10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -358,12 +401,16 @@ const page = () => {
|
|||
</div>
|
||||
|
||||
<div className="flex justify-between rtl my-2 px-4">
|
||||
<p className="mb-0 text-[12px] text-gray-500">هزینه بسته بندی</p>
|
||||
<p className="mb-0 text-[12px] text-gray-500">
|
||||
هزینه بسته بندی
|
||||
</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.packingPrice?.toLocaleString()}
|
||||
number={(
|
||||
checkOutData?.packingPrice / 10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -380,7 +427,9 @@ const page = () => {
|
|||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.deliveryPrice?.toLocaleString()}
|
||||
number={(
|
||||
checkOutData?.deliveryPrice / 10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -399,7 +448,7 @@ const page = () => {
|
|||
<div className="flex justify-center">
|
||||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={checkOutData?.totalPrice?.toLocaleString()}
|
||||
number={(checkOutData?.totalPrice / 10)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold text-primary-800"}
|
||||
/>
|
||||
</p>
|
||||
|
|
@ -411,14 +460,15 @@ const page = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<NavBarDownCart
|
||||
calculateTotalCost={checkOutData.totalPrice}
|
||||
event={() => console.log("D")}
|
||||
calculateTotalCost={checkOutData.totalPrice / 10}
|
||||
event={() => handleGoPayment()}
|
||||
permissionGoPay={permissionGoPay}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<BottomSheetDiscount />
|
||||
<BottomSheetDiscount orderId={checkOutData?.id} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -85,8 +85,11 @@ const page = () => {
|
|||
<div className=" pb-20">
|
||||
<Navbar theme={1} />
|
||||
|
||||
<div className="xs:w-full lg:w-4/12 mx-auto">
|
||||
<div className="text-right flex rtl justify-between border-t-[1px] border-gray-200 my-3 px-4 ">
|
||||
<p className="mb-0 text-sm font-semibold py-4">محصولات انتخاب شده</p>
|
||||
<p className="mb-0 text-sm font-semibold py-4">
|
||||
محصولات انتخاب شده
|
||||
</p>
|
||||
|
||||
<div className="bg-primary-200 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||||
<p className="mb-0 text-[11px] text-white rtl">
|
||||
|
|
@ -138,7 +141,8 @@ const page = () => {
|
|||
<p className="mb-0 ">
|
||||
<PersianNumber
|
||||
number={(
|
||||
(calculateTotalCost - calculateTotalCostWithDiscount) /
|
||||
(calculateTotalCost -
|
||||
calculateTotalCostWithDiscount) /
|
||||
10
|
||||
)?.toLocaleString()}
|
||||
style={"!text-[14px] !font-semibold"}
|
||||
|
|
@ -178,10 +182,12 @@ const page = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NavBarDownCart
|
||||
calculateTotalCost={calculateTotalCostWithDiscount / 10}
|
||||
event={() => handleGoCheckOut()}
|
||||
permissionGoPay={true}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,16 @@ 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";
|
||||
import InfiniteScroll from "react-infinite-scroll-component";
|
||||
|
||||
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 pageGetProducts = CTX.state.pageGetProducts;
|
||||
const stopGetTasks = CTX.state.stopGetTasks;
|
||||
const pager = CTX.state.pager;
|
||||
|
||||
const [isChecked, setIsChecked] = useState(false);
|
||||
const [selectedBrands, setSelectedBrands] = useState([]);
|
||||
const [rangePrice, setRangePrice] = useState([1000, 100]);
|
||||
|
|
@ -26,16 +31,36 @@ export default function page({ params }) {
|
|||
CTX.setBrands(brands);
|
||||
};
|
||||
|
||||
const handleInfiniteNextFetchProducts = () => {
|
||||
CTX.setPageGetProducts((e) => e + 1);
|
||||
CTX.fetchProducts(
|
||||
pageGetProducts + 1,
|
||||
params.id,
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
rangePrice,
|
||||
rangePrice,
|
||||
sortBy,
|
||||
isRangePrice
|
||||
);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
CTX.fetchProducts(params.id);
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth", // Optional: smooth scrolling behavior
|
||||
});
|
||||
CTX.fetchProducts(0, params.id);
|
||||
fetchBarnds();
|
||||
}, []);
|
||||
|
||||
console.log(pager?.totalPage > 1, pager?.totalPage);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={1} />
|
||||
|
||||
{!CTX.state.isMobile && (
|
||||
<div className="xs:hidden lg:block">
|
||||
<div className="pl-20 pr-10 grid lg:grid-cols-8 xl:grid-cols-5 rtl mt-20 ">
|
||||
<FilterCategory
|
||||
|
|
@ -50,6 +75,14 @@ export default function page({ params }) {
|
|||
setIsRangePrice={setIsRangePrice}
|
||||
isRangePrice={isRangePrice}
|
||||
/>
|
||||
|
||||
<div className="lg:col-span-6 xl:col-span-4 ">
|
||||
{true ? (
|
||||
<InfiniteScroll
|
||||
dataLength={20}
|
||||
next={handleInfiniteNextFetchProducts}
|
||||
hasMore={!stopGetTasks}
|
||||
>
|
||||
<ListProdocts
|
||||
id={params.id}
|
||||
isChecked={isChecked}
|
||||
|
|
@ -59,9 +92,20 @@ export default function page({ params }) {
|
|||
sortBy={sortBy}
|
||||
isRangePrice={isRangePrice}
|
||||
/>
|
||||
</InfiniteScroll>
|
||||
) : (
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{CTX.state.isMobile && (
|
||||
<div className="xs:block lg:hidden ">
|
||||
<FilterCategoryMobile
|
||||
id={params.id}
|
||||
|
|
@ -76,10 +120,45 @@ export default function page({ params }) {
|
|||
isRangePrice={isRangePrice}
|
||||
setSortBy={setSortBy}
|
||||
/>
|
||||
<ListProductsMobile />
|
||||
|
||||
<div>
|
||||
{true ? (
|
||||
<InfiniteScroll
|
||||
dataLength={20}
|
||||
next={handleInfiniteNextFetchProducts}
|
||||
hasMore={!stopGetTasks}
|
||||
scrollThreshold={0.5}
|
||||
>
|
||||
<ListProductsMobile
|
||||
id={params.id}
|
||||
isChecked={isChecked}
|
||||
selectedBrands={selectedBrands}
|
||||
rangePrice={rangePrice}
|
||||
sortBy={sortBy}
|
||||
isRangePrice={isRangePrice}
|
||||
/>
|
||||
</InfiniteScroll>
|
||||
) : (
|
||||
<div className="flex justify-center py-5">
|
||||
<div className="bg-white shadow mt-5 w-fit rounded-full text-sm p-4">
|
||||
چیزی یافت نشد
|
||||
</div>
|
||||
</div>
|
||||
<PaginationCategoory />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{pager?.totalPage > 1 && (
|
||||
<PaginationCategoory
|
||||
id={params.id}
|
||||
isChecked={isChecked}
|
||||
selectedBrands={selectedBrands}
|
||||
rangePrice={rangePrice}
|
||||
sortBy={sortBy}
|
||||
isRangePrice={isRangePrice}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
"use client";
|
||||
|
||||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
const page = () => {
|
||||
const [faq, setFaq] = useState([]);
|
||||
const [faqSelect, setFaqSelect] = useState(0);
|
||||
|
||||
const fetchNavData = async (id) => {
|
||||
const res = await fetch(`https://jsonplaceholder.typicode.com/comments`);
|
||||
const post = await res.json();
|
||||
setFaq(post);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchNavData();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<div className="bg-contact-us ">
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={0} />
|
||||
|
||||
<div>
|
||||
<div className="flex justify-center xs:hidden lg:block">
|
||||
<div className="absolute mr-[-1100px] mt-[-200px]">
|
||||
<p className="mb-0 text-[300px] opacity-10 font-extrabold text-white ">
|
||||
{" "}
|
||||
,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="my-[80px] ">
|
||||
<div className="px-5">
|
||||
<h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
|
||||
پرسشهای متداول
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" xs:px-3 lg:px-20 rtl lg:m-10 xs:m-3 pb-20 ">
|
||||
{faq?.map((e, index) => (
|
||||
<div
|
||||
className={` p-5 w-full rounded-lg my-2 tr03 cursor-pointer ${
|
||||
faqSelect == index ? "bg-gray-100" : "bg-primary-100"
|
||||
}`}
|
||||
onClick={() => setFaqSelect(index)}
|
||||
>
|
||||
<div className="flex">
|
||||
<span className="mx-2 text-xl text-gray-900">
|
||||
{faqSelect == index ? "-" : "+"}
|
||||
</span>
|
||||
<h2 className="mb-0 text-gray-700 text-sm text-right mt-1 font-semibold">
|
||||
{e.name}
|
||||
</h2>
|
||||
</div>
|
||||
{faqSelect == index && (
|
||||
<>
|
||||
<div className="h-[1px] bg-gray-300 w-[120px] mr-5 m-5 "></div>
|
||||
<p className="mb-0 text-right text-gray-500 text-sm">
|
||||
{e.body}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -10,10 +10,15 @@ import "react-toastify/dist/ReactToastify.css";
|
|||
import { ToastContainer, toast } from "react-toastify";
|
||||
import Loading from "plugins/Loading/page";
|
||||
import "react-spring-bottom-sheet/dist/style.css";
|
||||
import BottomSheetAddress from "plugins/bottomSheet/BottomSheetAddress";
|
||||
import citiesJSON from "iranCities";
|
||||
import BottomSheetLogOut from "plugins/bottomSheet/BottomSheetLogOut";
|
||||
import "react-image-lightbox/style.css";
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
const [cart, setCart] = useState([]);
|
||||
const [products, setProducts] = useState([]);
|
||||
const [pager, setPager] = useState([]);
|
||||
const [navData, setNavData] = useState([]);
|
||||
const [brands, setBrands] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
|
@ -21,9 +26,19 @@ export default function RootLayout({ children }) {
|
|||
const [bottomSheetCartOpen, setBottomSheetCartOpen] = useState(false);
|
||||
const [bottomSheetFilterOpen, setBottomSheetFilterOpen] = useState(false);
|
||||
const [bottomSheetDiscountOpen, setBottomSheetDiscountOpen] = useState(false);
|
||||
const [bottomSheetAddressOpen, setBottomSheetAddressOpen] = useState(false);
|
||||
const [bottomSheetLogOutOpen, setBottomSheetLogOutOpen] = useState(false);
|
||||
const [bottomSheetDeleteAddressOpen, setBottomSheetDeleteAddressOpen] =
|
||||
useState(false);
|
||||
const [checkOutData, setCheckOutData] = useState([]);
|
||||
const [addressData, setAddressData] = useState([]);
|
||||
const [profile, setProfile] = useState([]);
|
||||
const [stopProducts, setStopProducts] = useState(false);
|
||||
const [pageGetProducts, setPageGetProducts] = useState(0);
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
const [isOpenLightBox, setIsOpenLightBox] = useState(false);
|
||||
|
||||
console.log(navData);
|
||||
console.log("products", products);
|
||||
|
||||
const AddItemToCart = (
|
||||
id,
|
||||
|
|
@ -128,17 +143,21 @@ export default function RootLayout({ children }) {
|
|||
};
|
||||
|
||||
const fetchProducts = async (
|
||||
pageGetProducts,
|
||||
id,
|
||||
selectedBrands,
|
||||
isChecked,
|
||||
minPrice,
|
||||
maxPrice,
|
||||
sort,
|
||||
isRangePrice
|
||||
isRangePrice,
|
||||
paginationSay
|
||||
) => {
|
||||
const brandIds = selectedBrands?.map((brand) => brand.id);
|
||||
|
||||
const queryString = `page=0${id ? `&categoryId=${id}` : ""}${
|
||||
const queryString = `${`page=${pageGetProducts}`}${
|
||||
id ? `&categoryId=${id}` : ""
|
||||
}${
|
||||
brandIds?.length > 0 ? `&brandIds=${brandIds?.join("&brandIds=")}` : ""
|
||||
}${isChecked ? `&isActive=${isChecked}` : ""}${
|
||||
isRangePrice ? `&minPrice=${minPrice}` : ""
|
||||
|
|
@ -153,18 +172,113 @@ export default function RootLayout({ children }) {
|
|||
`${process.env.NEXT_PUBLIC_API_URL}/product?${cleanQueryString}`
|
||||
);
|
||||
const post = await res.json();
|
||||
setProducts(post);
|
||||
if (paginationSay) {
|
||||
// If it's a paginated request (not the first page)
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth", // Optional: smooth scrolling behavior
|
||||
});
|
||||
console.log();
|
||||
setProducts(post.products);
|
||||
setStopProducts(true); // Assuming this stops pagination
|
||||
}
|
||||
|
||||
if (post.length <= 19) {
|
||||
// If the length of fetched products is less than or equal to 19, indicating the last page
|
||||
setStopProducts(true); // Assuming this stops pagination
|
||||
}
|
||||
|
||||
if (!paginationSay && pageGetProducts == 0) {
|
||||
// If it's not a paginated request and it's the first page
|
||||
setProducts(post.products);
|
||||
setPager(post.pager);
|
||||
} else if (!paginationSay && pageGetProducts != 0) {
|
||||
// If it's not a paginated request and it's not the first page
|
||||
console.log("kir", products, !!products ? products : [], post.products);
|
||||
setProducts((data) => [...(data ? data : []), ...post.products]);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAddressUser = async () => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/user/address`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setAddressData(data);
|
||||
} catch ({ error, status }) {
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUserInfo = async () => {
|
||||
try {
|
||||
const data = await Chapar.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/user/info`,
|
||||
{
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("token"),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setProfile(data);
|
||||
} catch ({ error, status }) {
|
||||
localStorage.removeItem("token");
|
||||
toast.error(`${error?.response?.data?.message}`, {
|
||||
position: "bottom-right",
|
||||
closeOnClick: true,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const storedCart = localStorage.getItem("cart");
|
||||
const token = localStorage.getItem("token");
|
||||
if (storedCart) {
|
||||
setCart(JSON.parse(storedCart));
|
||||
}
|
||||
|
||||
if (token) {
|
||||
fetchUserInfo();
|
||||
}
|
||||
|
||||
fetchNavData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const mediaQuery = window.matchMedia("(max-width: 768px)"); // Adjust the width according to your mobile breakpoint
|
||||
|
||||
const checkDeviceType = (mediaQuery) => {
|
||||
if (mediaQuery.matches) {
|
||||
setIsMobile(true);
|
||||
} else {
|
||||
setIsMobile(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Initial check
|
||||
checkDeviceType(mediaQuery);
|
||||
|
||||
// Listen for changes in media query
|
||||
const listener = () => checkDeviceType(mediaQuery);
|
||||
mediaQuery.addEventListener("change", listener);
|
||||
|
||||
// Clean up
|
||||
return () => {
|
||||
mediaQuery.removeEventListener("change", listener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<AppContext.Provider
|
||||
value={{
|
||||
|
|
@ -178,7 +292,17 @@ export default function RootLayout({ children }) {
|
|||
bottomSheetCartOpen,
|
||||
bottomSheetFilterOpen,
|
||||
bottomSheetDiscountOpen,
|
||||
bottomSheetAddressOpen,
|
||||
bottomSheetDeleteAddressOpen,
|
||||
bottomSheetLogOutOpen,
|
||||
checkOutData,
|
||||
addressData,
|
||||
profile,
|
||||
stopProducts,
|
||||
pageGetProducts,
|
||||
pager,
|
||||
isMobile,
|
||||
isOpenLightBox,
|
||||
},
|
||||
setCart,
|
||||
setProducts,
|
||||
|
|
@ -188,12 +312,23 @@ export default function RootLayout({ children }) {
|
|||
setBottomSheetCartOpen,
|
||||
setBottomSheetFilterOpen,
|
||||
setBottomSheetDiscountOpen,
|
||||
setBottomSheetAddressOpen,
|
||||
setBottomSheetDeleteAddressOpen,
|
||||
setBottomSheetLogOutOpen,
|
||||
setCheckOutData,
|
||||
setStopProducts,
|
||||
setProfile,
|
||||
setPageGetProducts,
|
||||
setPager,
|
||||
setIsMobile,
|
||||
setIsOpenLightBox,
|
||||
AddItemToCart,
|
||||
RemoveItemFromCart,
|
||||
fetchNavData,
|
||||
fetchProducts,
|
||||
setCloseNavbar,
|
||||
setAddressData,
|
||||
fetchAddressUser,
|
||||
}}
|
||||
>
|
||||
<html lang="en">
|
||||
|
|
@ -201,6 +336,8 @@ export default function RootLayout({ children }) {
|
|||
{children}
|
||||
<ToastContainer position="bottom-right" closeOnClick={true} rtl />
|
||||
<Loading />
|
||||
<BottomSheetAddress />
|
||||
<BottomSheetLogOut />
|
||||
</body>
|
||||
</html>
|
||||
</AppContext.Provider>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ const Login = () => {
|
|||
|
||||
if (data.user.signUpStatus == 1) {
|
||||
setStepLogin(2);
|
||||
CTX.setProfile(data);
|
||||
} else if (data.user.signUpStatus == 10) {
|
||||
// setProfile(data);
|
||||
toast.success(` ${data.user.firstName} جان خوش اومدی `, {
|
||||
|
|
@ -92,7 +93,7 @@ const Login = () => {
|
|||
);
|
||||
|
||||
CTX.setLoading(false);
|
||||
|
||||
CTX.setProfile(data);
|
||||
if (data.user.signUpStatus == 10) {
|
||||
// setProfile(data);
|
||||
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ export default function Page() {
|
|||
<Navbar theme={0} />
|
||||
<HeroSection />
|
||||
</div>
|
||||
<SurpriseSection data={specialOfferData} />
|
||||
<SurpriseSection data={specialOfferData?.products} />
|
||||
<BetweenSexualSection />
|
||||
<BrandsLogoSection />
|
||||
<BeautySection data={cosmeticData} />
|
||||
<HomeSection data={HomeCosmeticData} />
|
||||
<BeautySection data={cosmeticData?.products} />
|
||||
<HomeSection data={HomeCosmeticData?.products} />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -4,38 +4,64 @@ import Navbar from "@comp/Navbar/page";
|
|||
import GalleryBox from "plugins/Gallery/page";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import l1 from "../../../../public/images/logobrand/2.png";
|
||||
import logo from "../../../../public/images/logo.png";
|
||||
import Image from "next/image";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import AddToCart from "@comp/Cards/Components/AddToCart/page";
|
||||
|
||||
const page = ({ params }) => {
|
||||
const [product, setProduct] = useState([]);
|
||||
const [specificationsHeader, setSpecificationsHeader] = useState([]);
|
||||
|
||||
const fetchPost = async (id) => {
|
||||
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/product/${id}`);
|
||||
const post = await res.json();
|
||||
setProduct(post);
|
||||
setProduct(post.product);
|
||||
};
|
||||
|
||||
console.log("product", product);
|
||||
|
||||
const displaySpecifications = (specs) => {
|
||||
let data = [];
|
||||
if (specs?.length > 3) {
|
||||
specs?.slice(0, 3).forEach((spec) => {
|
||||
const { title, value } = spec;
|
||||
|
||||
data.push(`${title}: ${value}`);
|
||||
});
|
||||
} else {
|
||||
specs?.forEach((spec) => {
|
||||
const { title, value } = spec;
|
||||
|
||||
data.push(`${title}: ${value}`);
|
||||
});
|
||||
}
|
||||
|
||||
setSpecificationsHeader(data); // You can replace console.log with any method to display the content in your header
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPost(params.id);
|
||||
fetchPost(params.id[0]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
displaySpecifications(product?.specifications);
|
||||
}, [product]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar theme={1} />
|
||||
<div className=" py-10">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6">
|
||||
<div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
|
||||
<div className="grid xs:grid-cols-1 lg:grid-cols-8 rtl gap-6 lg:px-20">
|
||||
<div className="lg:col-span-3 ">
|
||||
<GalleryBox file={product.files} />
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-3 xs:px-[20px] lg:px-[100px]">
|
||||
<div className="lg:col-span-3 xs:px-5 lg:px-0 ">
|
||||
<div className="text-right mt-7">
|
||||
<h1 className="text-lg font-semibold ">{product.persianName} </h1>
|
||||
<p className="mb-0 text-sm text-gray-400">
|
||||
Top Shop Biphasic Hair Mask 200 ml
|
||||
{product?.englishName}{" "}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -43,15 +69,23 @@ const page = ({ params }) => {
|
|||
<div className="bg-primary-400 rounded-full py-1 px-3 ml-2">
|
||||
<p className="mb-0 text-sm text-white ">اصالت کالای </p>
|
||||
</div>
|
||||
|
||||
{product?.hasDiscount && (
|
||||
<div className="bg-danger-100 rounded-full py-1 px-3 ml-2">
|
||||
<p className="mb-0 text-sm text-white ">بمب امروز </p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!product?.warranty?.trim() === "" && (
|
||||
<div className="bg-secondary-500 rounded-full py-1 px-3 ml-2">
|
||||
<p className="mb-0 text-sm text-white ">ضمانت بازگشت</p>
|
||||
<p className="mb-0 text-sm text-white ">
|
||||
{product?.warranty}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex my-5">
|
||||
{/* <div className="flex my-5">
|
||||
<div className="w-[30px] h-[30px] rounded-full bg-red-800 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
<div className="w-[30px] h-[30px] rounded-full bg-red-700 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
<div className="w-[30px] h-[30px] rounded-full bg-red-600 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
|
|
@ -59,41 +93,57 @@ const page = ({ params }) => {
|
|||
<div className="w-[30px] h-[30px] rounded-full bg-red-400 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
<div className="w-[30px] h-[30px] rounded-full bg-red-300 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
<div className="w-[30px] h-[30px] rounded-full bg-red-200 border-[5px] border-white shadow mr-2 cursor-pointer "></div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div>
|
||||
<div className="text-right mt-3 flex justify-between">
|
||||
<div className="flex">
|
||||
<div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
|
||||
<p className="mb-0 text-gray-500 ">ویتامین:</p>
|
||||
<h2 className="mb-0 text-gray-400 text-sm">
|
||||
{product?.summery}
|
||||
</h2>
|
||||
</div>
|
||||
<p className="mb-0 text-gray-500 ">ندارد</p>
|
||||
</div>
|
||||
|
||||
<div className="text-right mt-3 flex justify-between">
|
||||
<div className="flex">
|
||||
<div className="w-[5px] h-[5px] bg-primary-500 rounded-full mt-[10px] ml-2 "></div>
|
||||
<p className="mb-0 text-gray-500 ">ویژگی:</p>
|
||||
</div>
|
||||
<p className="mb-0 text-gray-500 ">
|
||||
تقویت کننده , نرم کننده , مرطوب کننده
|
||||
<ul className="mt-3 px-3">
|
||||
{specificationsHeader.map((e) => (
|
||||
<li className=" flex my-2">
|
||||
<div className="w-[10px] h-[10px] relative rounded-full bg-primary-500 mt-1"></div>
|
||||
<p className="mb-0 w-full text-sm text-gray-700 mx-2 ">
|
||||
{e}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* xs:sticky lg:relative xs:top-[60px] lg:top-0 ==> sticky for price=================== */}
|
||||
|
||||
<div className=" mx-auto lg:col-span-2 sticky top-[80px] xs:hidden lg:block xs:px-[20px] lg:px-[100px]">
|
||||
<div className=" w-9/12 lg:col-span-2 sticky top-[80px] xs:hidden lg:block ">
|
||||
<div className="p-3 h-fit border-[1px] border-gray-300 rounded-xl ">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-[130px]">
|
||||
<Image src={l1} />
|
||||
{product.files?.length > 0 ? (
|
||||
<Image
|
||||
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${
|
||||
product.files && product.files[0].fileLocation
|
||||
}`}
|
||||
width={350}
|
||||
height={350}
|
||||
className=" mx-auto !object-cover"
|
||||
onClick={() => CTX.setIsOpenLightBox(true)}
|
||||
/>
|
||||
) : (
|
||||
<div className="xs:!w-[85px] lg:!w-[85px] my-10 ">
|
||||
<Image
|
||||
src={logo}
|
||||
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="mb-0 text-sm text-gray-500">
|
||||
مشاهده محصولات برند تاپ شاپ
|
||||
{product.persianName}{" "}
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
|
||||
|
|
@ -118,10 +168,11 @@ const page = ({ params }) => {
|
|||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p className="mb-0 text-sm font-bold">
|
||||
<p className="mb-0 text-[12px] font-bold">
|
||||
گارانتی{" "}
|
||||
<small className=" text-primary-500 text-sm">اصالت</small> و{" "}
|
||||
<small className=" text-primary-500 text-sm">
|
||||
<small className=" text-primary-500 text-[12px]">اصالت</small>{" "}
|
||||
و{" "}
|
||||
<small className=" text-primary-500 text-[12px]">
|
||||
سلامت فیزیکی کالا
|
||||
</small>
|
||||
</p>
|
||||
|
|
@ -129,17 +180,41 @@ const page = ({ params }) => {
|
|||
|
||||
<div className="w-6/12 mx-auto h-[1px] bg-gray-200 mt-4"></div>
|
||||
|
||||
<div className=" mt-4 ">
|
||||
<div className="flex justify-end rtl mt-[3px] mb-1">
|
||||
<div className=" mt-4 flex justify-between ">
|
||||
{true ? (
|
||||
<div className="flex justify-end">
|
||||
<div className="mb-0 font-bold text-sm absolute mt-[-11px] ml-[0px] right-0 mr-[13px] text-red-600 flex rtl">
|
||||
<del>
|
||||
<PersianNumber
|
||||
number={(product?.cost / 10).toLocaleString()}
|
||||
style={"text-[13px] opacity-40 "}
|
||||
/>
|
||||
</del>
|
||||
</div>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-semibold text-lg">
|
||||
<PersianNumber number={150000} />
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber
|
||||
number={(
|
||||
product?.costWithDiscount / 10
|
||||
).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber
|
||||
number={(data?.cost / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
<button className="btn btn-primary w-full text-sm">
|
||||
افزودن به سبد{" "}
|
||||
</button>
|
||||
)}
|
||||
<AddToCart data={product} theme={2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,48 +250,23 @@ const page = ({ params }) => {
|
|||
<h3 className=" text-sm text-gray-400 mt-7 mb-2">
|
||||
مشخصات محصول
|
||||
</h3>
|
||||
<div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border ">
|
||||
<div className="bg-gray-100 p-3">
|
||||
<div className="min-w-[200px] mt-5 rounded-xl overflow-hidden border rtl ">
|
||||
{product?.specifications?.map((e, index) => (
|
||||
<div
|
||||
className={
|
||||
index % 2 === 0 ? "bg-gray-50 p-3" : "bg-gray-100 p-3"
|
||||
}
|
||||
>
|
||||
<p className="mb-0 text-sm text-gray-600">
|
||||
لورم متن :
|
||||
{e.title}:
|
||||
<small className="text-sm text-gray-800 font-bold ">
|
||||
{" "}
|
||||
ساختگی با تولید
|
||||
{e.value}{" "}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className=" p-3">
|
||||
<p className="mb-0 text-sm text-gray-600">
|
||||
لورم ایپسوم متن :
|
||||
<small className="text-sm text-gray-800 font-bold ">
|
||||
{" "}
|
||||
ساختگی با تولید
|
||||
</small>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-100 p-3">
|
||||
<p className="mb-0 text-sm text-gray-600">
|
||||
لورم :
|
||||
<small className="text-sm text-gray-800 font-bold ">
|
||||
{" "}
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
|
||||
چاپ، و با استفاده{" "}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className=" p-3">
|
||||
<p className="mb-0 text-sm text-gray-600">
|
||||
لورم ایپسوم متن ساختگی :{" "}
|
||||
<small className="text-sm text-gray-800 font-bold ">
|
||||
{" "}
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم{" "}
|
||||
</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>{" "}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -229,20 +279,42 @@ const page = ({ params }) => {
|
|||
</div>
|
||||
|
||||
<div className="xs:block lg:hidden sticky bottom-0 ">
|
||||
<div className="w-full bg-[#eeeeee] p-2 border-t-[2px] border-gray-200">
|
||||
<div className="py-4 flex ltr justify-between px-4">
|
||||
<div className="flex justify-end rtl mt-2 mb-1">
|
||||
{" "}
|
||||
<p className="mb-0 text-gray-500 font-semibold">
|
||||
<PersianNumber number={150000} style="text-xl" />
|
||||
<div className="w-full bg-[white] p-2 border-t-[1px] border-gray-100 mt-[30px]">
|
||||
<div className="py-4 flex ltr justify-between px-4 relative">
|
||||
{product?.hasDiscount ? (
|
||||
<>
|
||||
<p className="mb-0 font-bold text-sm absolute ml-[33px] opacity-30 mt-[-5px] text-red-600">
|
||||
<del>
|
||||
<PersianNumber
|
||||
number={(product?.cost / 10).toLocaleString()}
|
||||
style="!text-[11px]"
|
||||
/>
|
||||
</del>
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px] text-gray-500 ">
|
||||
تومان
|
||||
</small>
|
||||
<div className="flex rtl mt-[8px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold">
|
||||
<PersianNumber
|
||||
number={(
|
||||
product?.costWithDiscount / 10
|
||||
).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[3px]">تومان</small>
|
||||
</div>
|
||||
<button className="btn btn-primary w-fit py-3 px-7 text-sm">
|
||||
افزودن به سبد{" "}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex rtl mt-[3px]">
|
||||
{" "}
|
||||
<p className="mb-0 font-bold text-lg">
|
||||
<PersianNumber
|
||||
number={(product?.cost / 10).toLocaleString()}
|
||||
/>
|
||||
</p>
|
||||
<small className="mr-1 mt-[6px]">تومان</small>
|
||||
</div>
|
||||
)}
|
||||
<AddToCart data={product} theme={2} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
"use client";
|
||||
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext, useEffect } from "react";
|
||||
import SideBarProfile from "../component/SideBarProfile/page";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import BottomSheetDeleteAddress from "plugins/bottomSheet/BottomSheetDeleteAddress";
|
||||
|
||||
const page = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const addressData = CTX.state.addressData;
|
||||
|
||||
console.log(addressData);
|
||||
|
||||
useEffect(() => {
|
||||
if (addressData.length <= 0) {
|
||||
CTX.fetchAddressUser();
|
||||
}
|
||||
}, []);
|
||||
|
||||
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 ">
|
||||
<div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
|
||||
<div className="flex justify-between">
|
||||
<p className="mb-0 font-bold">آدرس های شما</p>
|
||||
<button
|
||||
className="btn btn-primary text-sm rounded-lg py-1"
|
||||
onClick={() => CTX.setBottomSheetAddressOpen(true)}
|
||||
>
|
||||
{" "}
|
||||
افزودن آدرس
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{addressData.length > 0 ? (
|
||||
<div className="overflow-x-auto mt-5">
|
||||
<table
|
||||
className="table-auto w-full bg-white border-collapse rounded-lg"
|
||||
dir="rtl"
|
||||
>
|
||||
<thead>
|
||||
<tr className="bg-gray-300 ">
|
||||
<th className="px-4 text-xs font-semibold text-gray-600 uppercase border-b py-5 text-center">
|
||||
آدرس
|
||||
</th>
|
||||
|
||||
<th className="px-4 text-xs font-semibold text-gray-600 uppercase border-b py-5 text-center">
|
||||
عملیات
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{addressData.map((e) => (
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
<tr className="border-b">
|
||||
<td className="px-4 py-3 text-center">
|
||||
{e.province} ، {e.city} ، {e.address} ،{e.plaque} ،
|
||||
{e.buildingUnit}{" "}
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3 font-semibold text-center">
|
||||
<button
|
||||
className="btn bg-red-500 text-white !py-1 rounded-xl text-sm font-normal"
|
||||
onClick={() =>
|
||||
CTX.setBottomSheetDeleteAddressOpen(true)
|
||||
}
|
||||
>
|
||||
حذف{" "}
|
||||
</button>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
))}
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex justify-center my-[100px]">
|
||||
<p className="mb-0 rounded-full w-fit shadow bg-white text-sm p-5 ">
|
||||
شما آدرسی ندارید
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<BottomSheetDeleteAddress />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
"use client";
|
||||
import AppContext from "@ctx/AppContext";
|
||||
import Link from "next/link";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React, { useContext } from "react";
|
||||
|
||||
const SideBarProfile = () => {
|
||||
const CTX = useContext(AppContext);
|
||||
const profile = CTX.state.profile;
|
||||
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden xs:hidden lg:block">
|
||||
<div>
|
||||
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||
|
||||
<div className="m-3">
|
||||
<p className="mb-0 text-sm">
|
||||
{profile?.firstName} {profile?.lastName}
|
||||
</p>
|
||||
|
||||
<p className="mb-0 text-sm">
|
||||
<PersianNumber number={profile?.phoneNumber} />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
<Link href={"/profile"}>
|
||||
<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="group cursor-pointer">
|
||||
<Link href={"/profile/orders"}>
|
||||
<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="group cursor-pointer">
|
||||
<Link href={"/profile/address"}>
|
||||
<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)}
|
||||
>
|
||||
<p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SideBarProfile;
|
||||
|
|
@ -1,83 +1,31 @@
|
|||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
import SideBarProfile from "../component/SideBarProfile/page";
|
||||
|
||||
const page = () => {
|
||||
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]">
|
||||
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden">
|
||||
<div>
|
||||
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||
|
||||
<div className="m-3">
|
||||
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||
<p className="mb-0 text-sm">09123654891</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="flex justify-between p-4 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
||||
<p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<SideBarProfile />
|
||||
|
||||
<div className="lg:col-span-3 xl:col-span-4 ">
|
||||
<div className="bg-gray-200 p-5 mt-5">
|
||||
<div className="bg-gray-100 p-5 mt-5 rounded-lg overflow-hidden">
|
||||
<p className="mb-0 font-bold">سابقه سفارشات</p>
|
||||
|
||||
<div className="flex rounded-full bg-gray-300 mt-3 w-fit p-2">
|
||||
<div className="bg-primary-500 py-2 rounded-full px-5">
|
||||
<p className="mb-0 text-white"> جاری</p>
|
||||
<div className="flex rounded-xl bg-gray-300 mt-3 w-fit p-2 ">
|
||||
<div className="bg-primary-500 py-2 rounded-xl xs:px-2 lg:px-5">
|
||||
<p className="mb-0 text-white xs:text-sm lg:text-base"> جاری</p>
|
||||
</div>
|
||||
<div className=" py-2 rounded-full px-5">
|
||||
<p className="mb-0">تحویل شده</p>
|
||||
<div className=" py-2 rounded-full xs:px-2 lg:px-5 text-gray-600">
|
||||
<p className="mb-0 xs:text-sm lg:text-base">تحویل شده</p>
|
||||
</div>
|
||||
<div className=" py-2 rounded-full px-5">
|
||||
<p className="mb-0">مرجوع شده</p>
|
||||
<div className=" py-2 rounded-full xs:px-2 lg:px-5 text-gray-600">
|
||||
<p className="mb-0 xs:text-sm lg:text-base">مرجوع شده</p>
|
||||
</div>
|
||||
<div className=" py-2 rounded-full px-5">
|
||||
<p className="mb-0">لغو شده</p>
|
||||
<div className=" py-2 rounded-full xs:px-2 lg:px-5 text-gray-600">
|
||||
<p className="mb-0 xs:text-sm lg:text-base">لغو شده</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -86,6 +34,57 @@ const page = () => {
|
|||
شما سفارشی ندارید
|
||||
</p>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table
|
||||
className="table-auto w-full bg-white border-collapse rounded-lg"
|
||||
dir="rtl"
|
||||
>
|
||||
<thead>
|
||||
<tr className="bg-gray-300 ">
|
||||
<th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
|
||||
قیمت{" "}
|
||||
</th>
|
||||
<th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
|
||||
تاریخ سفارش
|
||||
</th>
|
||||
<th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
|
||||
تاریخ تحویل
|
||||
</th>
|
||||
<th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
|
||||
مرحله سفارش
|
||||
</th>
|
||||
<th className="px-4 text-right text-xs font-semibold text-gray-600 uppercase border-b py-5">
|
||||
عملیات
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-600 text-sm">
|
||||
<tr className="border-b">
|
||||
<td className="px-4 py-3">
|
||||
{" "}
|
||||
<PersianNumber number={3521152} />{" "}
|
||||
</td>
|
||||
<td className="px-4 py-3">1402/8/12</td>
|
||||
<td className="px-4 py-3">1402/8/16</td>
|
||||
<td className="px-4 py-3 text-green-500 font-semibold">
|
||||
در حال بسته بندی
|
||||
</td>
|
||||
|
||||
<td className="px-4 py-3 text-green-500 font-semibold">
|
||||
<button className="btn btn-outline-primary !py-1 rounded-xl text-sm">
|
||||
مشاهده سفارش
|
||||
</button>{" "}
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-b bg-gray-50">
|
||||
<td className="px-4 py-3">جین دو</td>
|
||||
<td className="px-4 py-3">۲۵</td>
|
||||
<td className="px-4 py-3">jane@example.com</td>
|
||||
</tr>
|
||||
{/* Add more rows as needed */}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,18 @@
|
|||
import Navbar from "@comp/Navbar/page";
|
||||
import React from "react";
|
||||
import SideBarProfile from "./component/SideBarProfile/page";
|
||||
|
||||
const page = () => {
|
||||
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]">
|
||||
<div className="rounded-xl border border-gray-100 bg-gray-200 overflow-hidden">
|
||||
<div>
|
||||
<div className="bg-white rounded-b-3xl p-5 flex shadow">
|
||||
<div className="bg-primary-500 w-[60px] h-[60px] rounded-full"></div>
|
||||
|
||||
<div className="m-3">
|
||||
<p className="mb-0 text-sm">حسین معصومی پور</p>
|
||||
<p className="mb-0 text-sm">09123654891</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="p-2 ">
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="group cursor-pointer">
|
||||
<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>
|
||||
</li>
|
||||
|
||||
<li className="flex justify-between p-4 rounded-full group hover:bg-red-200 tr03 cursor-pointer">
|
||||
<p className="mb-0 text-sm text-red-500 group-hover: ">خروج </p>
|
||||
<div className="w-[20px] h-[20px] rounded-full bg-red-200 group-hover:bg-red-500 tr03 "></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<SideBarProfile />
|
||||
|
||||
<div className="lg:col-span-3 xl:col-span-4 ">
|
||||
<div className="bg-primary-500 p-5 rounded-xl ">
|
||||
<div className="bg-primary-500 xs:p-2 lg:p-5 rounded-xl mt-5 ">
|
||||
<div className="flex">
|
||||
<div>
|
||||
<div className="xs:hidden lg:block">
|
||||
<svg
|
||||
width="70"
|
||||
height="70"
|
||||
|
|
@ -80,7 +27,7 @@ const page = () => {
|
|||
</svg>
|
||||
</div>
|
||||
|
||||
<p className="mb-0 text-white mx-4 font-semibold">
|
||||
<p className="mb-0 text-white mx-4 font-medium text-sm">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با
|
||||
استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله
|
||||
در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد
|
||||
|
|
@ -95,10 +42,10 @@ const page = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-200 p-5 mt-5">
|
||||
<div className="bg-gray-200 p-5 mt-5 rounded-lg">
|
||||
<p className="mb-0 font-bold">سفارش جاری</p>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<div className="flex justify-center my-7">
|
||||
<p className="mb-0 rounded-full w-fit shadow bg-white p-5 ">
|
||||
شما سفارشی ندارید
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
"use client";
|
||||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
const params = useSearchParams();
|
||||
const refid = params.get("refid");
|
||||
const paymentStatus = params.get("paymentStatus");
|
||||
const factorNumber = params.get("factorNumber");
|
||||
|
||||
return (
|
||||
<>
|
||||
{paymentStatus ? (
|
||||
<div className="bg-contact-us !min-h-[100vh]">
|
||||
<div className=" pb-20">
|
||||
<div className="pt-[190px] px-10">
|
||||
<div>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 264 276"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mx-auto"
|
||||
>
|
||||
<path
|
||||
d="M132 13L164.832 36.95L205.475 36.875L217.957 75.55L250.882 99.375L238.25 138L250.882 176.625L217.957 200.45L205.475 239.125L164.832 239.05L132 263L99.1691 239.05L58.5254 239.125L46.0441 200.45L13.1191 176.625L25.7504 138L13.1191 99.375L46.0441 75.55L58.5254 36.875L99.1691 36.95L132 13Z"
|
||||
stroke="white"
|
||||
stroke-opacity="0.28"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M88.25 138L119.5 169.25L182 106.75"
|
||||
stroke="white"
|
||||
stroke-width="25"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 className=" xs:text-[20px] lg:text-[40px] text-white font-bold text-center mt-10 rtl">
|
||||
خرید شما با شماره فاکتور{" "}
|
||||
<span className="bg-primary-200 px-2 rounded-lg mx-2">
|
||||
{" "}
|
||||
{factorNumber}
|
||||
</span>
|
||||
با موفقیت کامل شد
|
||||
</h1>
|
||||
<p className="mb-0 text-center xs:text-sm lg:text-base text-gray-200 opacity-80">
|
||||
میتونید با مراجعه به پنل کابری قسمت سفارش ها جزئیات سفارش رو
|
||||
ببینید
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className="btn btn-outline-light text-sm rounded-xl py-1 mt-5">
|
||||
مشاهده سفارش
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-error !min-h-[100vh]">
|
||||
<div className=" pb-20">
|
||||
<div className="pt-[190px] px-10">
|
||||
<div className="text-[200px] text-white mx-auto text-center">
|
||||
!
|
||||
</div>
|
||||
|
||||
<h1 className=" xs:text-[20px] lg:text-[40px] text-white font-bold text-center mt-10 rtl">
|
||||
خرید شما با شماره فاکتور با موفقیت انجام نشد
|
||||
</h1>
|
||||
<p className="mb-0 text-center xs:text-sm lg:text-base text-gray-200 opacity-80">
|
||||
میتونید با مراجعه به پنل گفتینو یا در صفحه تماس با ما با تیم
|
||||
پشتیبانی ما در تماس باشید
|
||||
</p>
|
||||
<div className="flex justify-center">
|
||||
<button className="btn btn-outline-light text-sm rounded-xl py-1 mt-5">
|
||||
درباره ما{" "}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import Footer from "@comp/Footer/page";
|
||||
import Navbar from "@comp/Navbar/page";
|
||||
import PersianNumber from "plugins/PersianNumber";
|
||||
import React from "react";
|
||||
|
||||
const page = () => {
|
||||
const number = "02188195164";
|
||||
return (
|
||||
<>
|
||||
<div className="bg-contact-us !min-h-[100vh]">
|
||||
<div className=" pb-20">
|
||||
<Navbar theme={0} />
|
||||
|
||||
<div>
|
||||
<div className="flex justify-center xs:hidden lg:block">
|
||||
<div className="absolute mr-[-1100px] mt-[-200px]">
|
||||
<p className="mb-0 text-[300px] opacity-10 font-extrabold text-white ">
|
||||
{" "}
|
||||
,
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-[150px] ">
|
||||
<div className="px-5">
|
||||
<h1 className="text-white font-bold text-center xs:text-[20px] lg:text-[40px]">
|
||||
قوانین و مقررات{" "}
|
||||
</h1>
|
||||
|
||||
<p className="mb-0 text-base text-center text-gray-100 xs:text-sm lg:text-base lg:w-7/12 mx-auto">
|
||||
کلیه عناصر موجود در این وب سایت، شامل اطلاعات، اسناد، تولیدات،
|
||||
لوگوها، گرافیک، تصاویر و خدمات، کلاً متعلق به سایت فروشگاه وسمه
|
||||
است. هیچ شخص حقیقی و حقوقی بدون اجازه کتبی صاحب عناصر مذکور سایت
|
||||
فروشگاه، اجازه کپی کردن، توزیع، نشر مجدد، واگذاری (Download)
|
||||
نمایش، ارسال و انتقال آنها را ندارد.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className=" xs:px-3 lg:px-20 lg:flex rtl lg:m-10 xs:m-3 pb-20 ">
|
||||
<div>
|
||||
<h2 className="mb-0 text-right font-semibold xs:text-[17px] lg:text-[20px] my-2 ">
|
||||
قوانین و مقررات فروشگاه وسمه{" "}
|
||||
</h2>
|
||||
<p className="mb-0 text-right xs:text-sm lg:text-base">
|
||||
ز نظر حقوقی، در معاملات سایت فروشگاه اینترنتی وسمه، شرکت (X) به
|
||||
عنوان فروشنده و کاربر اینترنتی سفارش دهنده به عنوان خریدار تلقی می
|
||||
شوند. فروش کالا بر مبنای نوع و مقداری صورت می گیرد که کاربر سفارش
|
||||
دهنده آن را در سایت فروشگاه وسمه درج نموده است. کاربر گرامی عکس
|
||||
محصول قرار داده شده داخل سایت صرفا جهت آشنایی شما با نوع محصول است و
|
||||
با کالای ارسال شده برای شما قطعا متفاوت خواهد بود. لذا به توضیحات
|
||||
محصول توجه فرمایید. ارزش کالا یا کالاهای سفارش داده شده طبق فهرست
|
||||
قیمت سایت محاسبه شده و شامل کلیه مالیاتها و عوارض فروش خواهد بود.
|
||||
تنها مبلغی که در موارد معین به قیمت کالا اضافه می شود، هزینه ارسال و
|
||||
بیمه کالا است. مکان تحویل کالا توسط مشتری سفارش دهنده در سایت درج
|
||||
شده و فروشگاه وسمه به عنوان فروشنده متعهد است با رعایت سیاستهای
|
||||
معین ارسال کالا، سفارش را در آن محل تحویل دهد. در صورت عدم حضور
|
||||
سفارش دهنده در مکان تعیین شده، این فروشگاه هزینههای مربوطه را از
|
||||
خریدار طلب خواهد نمود. در صورتی که فروشگاه اینترنتی وسمه به دلایلی
|
||||
که خارج از اراده فروشگاه باشد، توان تحویل کالا را در موعد مقرر
|
||||
نداشته باشد سفارش رد میشود و اگر پرداخت توسط خریدار انجام شده باشد
|
||||
، به خریدار وجه آن را برگشت خواهد داد. اگر پرداخت در محل باشد که
|
||||
تنها سفارش توسط سایت رد میشود.
|
||||
</p>
|
||||
<ul className="pr-5 mt-5">
|
||||
<li className="text-gray-600 text-sm">
|
||||
1 - خریدار موظف است مبلغ سفارش را هنگام تحویل کالا (در صورت انتخاب
|
||||
پرداخت نقدی) بپردازد. در صورت عدم پرداخت وجه فروشگاه وسمه حق دارد
|
||||
از تحویل کالا خودداری و سفارش را فسخ نماید.
|
||||
</li>
|
||||
<li className="text-gray-600 text-sm">
|
||||
2- هر گونه نقص و یا عیب فنی بایستی در لحظه تحویل سفارش به متصدی
|
||||
تحویل کالا اعلام و کالا مرجوع گردد.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 className="mb-0 text-right font-semibold xs:text-[17px] lg:text-[20px] my-5 ">
|
||||
مالکیت معنوی
|
||||
</h2>
|
||||
<p className="mb-0 text-right xs:text-sm lg:text-base">
|
||||
به محض پذیرش عضویت شما در سایت فروشگاه اینترنتی وسمه، عضویت شما
|
||||
بیانگر پذیرش کلیه ضوابط و مقررات سایت بوده و متعهد هستید به این
|
||||
ضوابط احترام گذاشته و آنها را رعایت کنید{" "}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
|
|
@ -122,6 +122,32 @@ body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-error {
|
||||
background: hsla(0, 71%, 45%, 1);
|
||||
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
hsla(0, 71%, 45%, 1) 0%,
|
||||
hsla(0, 100%, 21%, 1) 100%
|
||||
);
|
||||
|
||||
background: -moz-radial-gradient(
|
||||
circle,
|
||||
hsla(0, 71%, 45%, 1) 0%,
|
||||
hsla(0, 100%, 21%, 1) 100%
|
||||
);
|
||||
|
||||
background: -webkit-radial-gradient(
|
||||
circle,
|
||||
hsla(0, 71%, 45%, 1) 0%,
|
||||
hsla(0, 100%, 21%, 1) 100%
|
||||
);
|
||||
|
||||
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#C62121", endColorstr="#6C0000", GradientType=1 );
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bg-navbar {
|
||||
background: rgba(240, 240, 240, 0.4);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue