152 lines
5.7 KiB
JavaScript
152 lines
5.7 KiB
JavaScript
"use client";
|
|
|
|
import CardCart from "@comp/Cards/CardCart/page";
|
|
import AppContext from "@ctx/AppContext";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Chapar from "plugins/Chapar";
|
|
import PersianNumber from "plugins/PersianNumber";
|
|
import { useContext, useState } from "react";
|
|
import { BottomSheet } from "react-spring-bottom-sheet";
|
|
import { toast } from "react-toastify";
|
|
import logo from "@img/logo.png";
|
|
|
|
const BottomSheetSeeOrder = ({ id }) => {
|
|
const CTX = useContext(AppContext);
|
|
|
|
const [bag, setBag] = useState([]);
|
|
|
|
const handleOpen = async (e) => {
|
|
if (e.type == "OPEN") {
|
|
try {
|
|
const data = await Chapar.get(
|
|
`${process.env.NEXT_PUBLIC_API_URL}/order/${id}`,
|
|
{
|
|
headers: {
|
|
Authorization: localStorage.getItem("token"),
|
|
},
|
|
}
|
|
);
|
|
setBag(data);
|
|
} catch ({ error, status }) {
|
|
toast.error(`${error?.response?.data?.message}`, {
|
|
position: "bottom-right",
|
|
closeOnClick: true,
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<BottomSheet
|
|
onSpringStart={(e) => handleOpen(e)}
|
|
open={CTX.state.bottomSheetSeeOrderOpen}
|
|
onDismiss={() => CTX.setBottomSheetSeeOrderOpen(false)}
|
|
className={"z-50 relative"}
|
|
>
|
|
{/* {bag && bag.length > 0 && ( */}
|
|
<div className="h-[900px]">
|
|
{bag.orderProducts?.map((e) => (
|
|
<div className="text-center p-3">
|
|
<p className="mb-0 text-sm pb-3 rtl">
|
|
<PersianNumber
|
|
number={bag.orderProducts?.length}
|
|
style="text-xl font-bold text-base font-bold mx-2 !text-primary-500"
|
|
/>
|
|
محصول موجود در سبد
|
|
</p>
|
|
|
|
{/* <div className="w-5/12 mx-auto h-[1px] bg-gray-200 my-3"></div> */}
|
|
<div>
|
|
{bag.orderProducts.map((e, index) => (
|
|
<div className="group border-t-[1px] border-gray-100 w-full hover:bg-white z-40 tr03 flex rtl pt-2">
|
|
<Link href={`/products/${e.id}/${e.persianName}`}>
|
|
<div className=" h-fit ">
|
|
{!!e.mainImage ? (
|
|
<Image
|
|
src={`${process.env.NEXT_PUBLIC_STORAGE_URL}/${e.mainImage}`}
|
|
width={100}
|
|
height={100}
|
|
className="xs:!w-[110px] lg:!w-[130px] mx-auto !object-cover"
|
|
alt={`${e.productName} - ${e.productName}`}
|
|
/>
|
|
) : (
|
|
<div className="xs:!w-[85px] lg:!w-[85px] ">
|
|
<Image
|
|
src={logo}
|
|
className="xs:!w-[70px] lg:!w-[70px] mx-auto !object-cover opacity-25 mt-5"
|
|
alt="وسمه"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
<div className="p-3 text-right w-full">
|
|
<Link href={`/products/${e.id}/${e.productName}`}>
|
|
<p className="mb-0 xs:text-[12px] lg:text-[11px] xl:text-[15px] max-h-[50px] tr03 ">
|
|
{e?.productName}
|
|
</p>
|
|
</Link>
|
|
|
|
<div className=" rounded-full flex ltr w-full">
|
|
<div className="mt-3">
|
|
<p className="mb-0 rtl text-sm">
|
|
<PersianNumber
|
|
number={e?.count}
|
|
style={"text-sm ml-1"}
|
|
/>
|
|
عدد
|
|
</p>
|
|
</div>
|
|
<div className="w-full text-right rounded-full">
|
|
{e?.hasDiscount ? (
|
|
<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
|
|
number={(
|
|
data?.productFee / 10
|
|
).toLocaleString()}
|
|
style={"text-[13px]"}
|
|
/>
|
|
</del>
|
|
</p>
|
|
<div className="flex rtl mt-[8px]">
|
|
{" "}
|
|
<p className="mb-0 font-bold">
|
|
<PersianNumber
|
|
number={(
|
|
e?.productFeeWithDiscount / 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={(e?.productFee / 10).toLocaleString()}
|
|
/>
|
|
</p>
|
|
<small className="mr-1 mt-[6px]">تومان</small>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* )} */}
|
|
</BottomSheet>
|
|
);
|
|
};
|
|
|
|
export default BottomSheetSeeOrder;
|