583 lines
28 KiB
JavaScript
583 lines
28 KiB
JavaScript
"use client";
|
||
import NavBarDownCart from "@comp/Carts/component/NavBarDownCart/page";
|
||
import Navbar from "@comp/Navbar/page";
|
||
import PersianNumber from "plugins/PersianNumber";
|
||
import { useContext, useEffect, useState } from "react";
|
||
import AppContext from "@ctx/AppContext";
|
||
import ap from "@img/ap.png";
|
||
import zarin from "@img/zarin.png";
|
||
import Image from "next/image";
|
||
import { useRouter } from "next/navigation";
|
||
import Chapar from "plugins/Chapar";
|
||
import BottomSheetDiscount from "plugins/bottomSheet/BottomSheetDiscount";
|
||
import { toast } from "react-toastify";
|
||
|
||
const CheckoutData = () => {
|
||
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;
|
||
|
||
const body = {
|
||
addressId: addressData[addressId]?.id,
|
||
|
||
orderId: checkOutData?.id,
|
||
shippingId: shippingData[shippingId]?.id,
|
||
};
|
||
|
||
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);
|
||
} 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 () => {
|
||
const token = localStorage.getItem("token").slice(7);
|
||
|
||
try {
|
||
const data = await Chapar.post(
|
||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/payment/${checkOutData?.id}?paymentMethod=1&access_token=${token}`
|
||
|
||
// {
|
||
// headers: {
|
||
// Authorization: token,
|
||
// },
|
||
// }
|
||
);
|
||
|
||
router.push(data?.paymentUrl);
|
||
} catch ({ error, status }) {
|
||
toast.error(`${error?.response?.data?.message}`, {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
}
|
||
};
|
||
|
||
const deleteDiscount = async () => {
|
||
try {
|
||
// Send a POST request to the API endpoint to apply discount
|
||
const data = await Chapar.post(
|
||
`${process.env.NEXT_PUBLIC_API_URL}/order/bag/discount/${checkOutData?.id}`
|
||
);
|
||
CTX.setCheckOutData(data);
|
||
} catch ({ error, status }) {
|
||
// If there's an error, display an error message using toast
|
||
toast.error(`${error?.response?.data?.message}`, {
|
||
position: "bottom-right",
|
||
closeOnClick: true,
|
||
});
|
||
}
|
||
};
|
||
|
||
const filteredShippingData = shippingData?.filter((item) => {
|
||
if (item.name === "ارسال رایگان" && checkOutData.totalPrice <= 5000000) {
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (shippingData.length <= 0) {
|
||
GetShippingData();
|
||
}
|
||
|
||
CTX.fetchAddressUser();
|
||
}, [checkOutData]);
|
||
|
||
useEffect(() => {
|
||
setAddressData(CTX.state.addressData);
|
||
}, [CTX.state.addressData]);
|
||
|
||
useEffect(() => {
|
||
if (CTX.state.checkOutData.length <= 0) {
|
||
router.push("/cart");
|
||
}
|
||
|
||
setPermissionGoPay(false);
|
||
}, []);
|
||
|
||
console.log("checkOutData", checkOutData);
|
||
|
||
return (
|
||
<>
|
||
<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-medium py-4">آدرس ها</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>
|
||
|
||
{addressData?.length > 0 ? (
|
||
<>
|
||
{addressData.map((e, index) => (
|
||
<div
|
||
onClick={() => setAddressId(index)}
|
||
className={`flex rtl justify-between cursor-pointer mx-2 relative ${
|
||
addressId == index
|
||
? "border-2 !border-green-600 rounded-lg bg-green-50"
|
||
: ""
|
||
}`}
|
||
>
|
||
<div className="flex rtl px-3 py-4 w-11/12" key={index}>
|
||
<div>
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 188 264"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="opacity-70 mx-auto "
|
||
>
|
||
<path
|
||
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-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-[12px] text-gray-500">
|
||
{" "}
|
||
{e.address}{" "}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`w-5 h-5 rounded-full mt-4 mx-3 border-2 relative ${
|
||
addressId == index
|
||
? "border-green-400 bg-green-200"
|
||
: "bg-gray-100 border-gray-200 "
|
||
}`}
|
||
></div>
|
||
</div>
|
||
))}
|
||
</>
|
||
) : (
|
||
<div className=" p-5 rounded-lg">
|
||
<div className="flex justify-center py-5">
|
||
<div
|
||
className="bg-white shadow w-fit rounded-full text-sm p-4"
|
||
onClick={() => CTX.setBottomSheetAddressOpen(true)}
|
||
>
|
||
افزودن آدرس +{" "}
|
||
</div>
|
||
</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-medium py-4">زمان و نحوه ارسال</p>
|
||
|
||
<div className="border border-gray-300 w-fit h-fit relative my-3 p-1 rounded-lg">
|
||
<div className="flex">
|
||
<div>
|
||
<svg
|
||
width="15"
|
||
height="15"
|
||
viewBox="0 0 251 200"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="opacity-60"
|
||
>
|
||
<path
|
||
d="M105.625 143.75C110.625 148.75 117.083 151.2 125 151.1C132.917 151 138.75 148.133 142.5 142.5L212.5 37.5L107.5 107.5C101.875 111.25 98.9083 116.979 98.6 124.688C98.2917 132.396 100.633 138.75 105.625 143.75ZM125 0C137.292 0 149.117 1.71667 160.475 5.15C171.833 8.58334 182.508 13.7417 192.5 20.625L168.75 35.625C161.875 32.0833 154.742 29.4292 147.35 27.6625C139.958 25.8958 132.508 25.0083 125 25C97.2917 25 73.6958 34.7417 54.2125 54.225C34.7292 73.7083 24.9917 97.3 25 125C25 133.75 26.2 142.396 28.6 150.938C31 159.479 34.3833 167.5 38.75 175H211.25C216.042 167.083 219.533 158.854 221.725 150.312C223.917 141.771 225.008 132.917 225 123.75C225 116.25 224.113 108.958 222.338 101.875C220.563 94.7917 217.908 87.9167 214.375 81.25L229.375 57.5C235.625 67.2917 240.575 77.7083 244.225 88.75C247.875 99.7917 249.8 111.25 250 123.125C250.208 135 248.854 146.354 245.938 157.188C243.021 168.021 238.75 178.333 233.125 188.125C230.833 191.875 227.708 194.792 223.75 196.875C219.792 198.958 215.625 200 211.25 200H38.75C34.375 200 30.2083 198.958 26.25 196.875C22.2917 194.792 19.1667 191.875 16.875 188.125C11.4583 178.75 7.29167 168.804 4.375 158.288C1.45833 147.771 0 136.675 0 125C0 107.708 3.28334 91.5125 9.85 76.4125C16.4167 61.3125 25.375 48.0833 36.725 36.725C48.075 25.3667 61.35 16.4083 76.55 9.85C91.75 3.29167 107.9 0.00833333 125 0Z"
|
||
fill="black"
|
||
fill-opacity="0.61"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<p className="mb-0 text-[11px] rtl mr-2 text-gray-600">
|
||
سریع ترین زمان ارسال
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
{filteredShippingData?.map((e, index) => (
|
||
<div
|
||
onClick={() => handleShippingID(index)}
|
||
className={`flex rtl justify-between cursor-pointer mx-2 ${
|
||
shippingId == index
|
||
? "border-2 !border-green-600 rounded-lg bg-green-50"
|
||
: ""
|
||
}`}
|
||
>
|
||
<div className="flex rtl px-3 py-4" key={index}>
|
||
<div>
|
||
<svg
|
||
width="25"
|
||
height="25"
|
||
viewBox="0 0 234 244"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="mx-auto opacity-70 mt-2"
|
||
>
|
||
<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"
|
||
stroke="black"
|
||
stroke-opacity="0.44"
|
||
stroke-width="18.75"
|
||
stroke-linecap="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div className="mx-2">
|
||
<h3 className="mb-0 text-sm text-right font-medium text-primary-500 ">
|
||
{e.name}{" "}
|
||
</h3>
|
||
{e.name == "ارسال رایگان" ? (
|
||
<p className="mb-0 text-[12px] text-gray-500">
|
||
ارسال با پست پیشتاز
|
||
</p>
|
||
) : (
|
||
<p className="mb-0 text-[12px] text-gray-500">
|
||
هزینه ارسال
|
||
<PersianNumber
|
||
number={(e.deliveryCost / 10)?.toLocaleString()}
|
||
style={"text-gray-600 mx-1"}
|
||
/>
|
||
هزار تومان
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className={`w-5 h-5 rounded-full mt-6 mx-3 border-2 ${
|
||
shippingId == index
|
||
? "border-green-400 bg-green-200"
|
||
: "bg-gray-100 border-gray-200 "
|
||
}`}
|
||
></div>
|
||
</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-medium py-4">روش پرداخت</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div
|
||
className={`flex rtl px-2 py-2 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]" alt="زرین پال" />
|
||
</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 rtl px-2 py-1 mx-2 mt-5 opacity-40">
|
||
<div>
|
||
<Image src={ap} className="w-[45px]" alt="آپ" />
|
||
</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 ${
|
||
checkOutData?.discountCode != "" ? "" : ""
|
||
}`}
|
||
onClick={() => {
|
||
if (checkOutData?.discountCode == "") {
|
||
CTX.setBottomSheetDiscountOpen(true);
|
||
}
|
||
}}
|
||
>
|
||
<div className="flex">
|
||
<div>
|
||
{checkOutData?.discountCode == "" ? (
|
||
<svg
|
||
width="25"
|
||
height="25"
|
||
viewBox="0 0 244 194"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="opacity-70 mt-2"
|
||
>
|
||
<path
|
||
d="M122 93.875V100.125M122 47V53.25M122 140.75V147M209.5 184.5C216.13 184.5 222.489 181.866 227.178 177.178C231.866 172.489 234.5 166.13 234.5 159.5V122C227.87 122 221.511 119.366 216.822 114.678C212.134 109.989 209.5 103.63 209.5 97C209.5 90.3696 212.134 84.0107 216.822 79.3223C221.511 74.6339 227.87 72 234.5 72V34.5C234.5 27.8696 231.866 21.5107 227.178 16.8223C222.489 12.1339 216.13 9.5 209.5 9.5H34.5C27.8696 9.5 21.5107 12.1339 16.8223 16.8223C12.1339 21.5107 9.5 27.8696 9.5 34.5V72C16.1304 72 22.4893 74.6339 27.1777 79.3223C31.8661 84.0107 34.5 90.3696 34.5 97C34.5 103.63 31.8661 109.989 27.1777 114.678C22.4893 119.366 16.1304 122 9.5 122V159.5C9.5 166.13 12.1339 172.489 16.8223 177.178C21.5107 181.866 27.8696 184.5 34.5 184.5H209.5Z"
|
||
stroke="black"
|
||
stroke-opacity="0.54"
|
||
stroke-width="18.75"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
) : (
|
||
<svg
|
||
width="25"
|
||
height="25"
|
||
viewBox="0 0 220 133"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="opacity-70 mt-2"
|
||
>
|
||
<path
|
||
d="M17.062 71.0875C16.2612 70.1317 15.2777 69.3452 14.1692 68.7742C13.0607 68.2032 11.8494 67.859 10.6062 67.7619C9.36305 67.6648 8.11299 67.8166 6.92923 68.2085C5.74548 68.6005 4.6518 69.2246 3.71224 70.0445C2.77268 70.8643 2.0061 71.8633 1.4574 72.9831C0.9087 74.1028 0.588891 75.3208 0.516701 76.5657C0.444511 77.8105 0.621389 79.0573 1.03698 80.2329C1.45257 81.4086 2.09853 82.4895 2.93702 83.4125L17.062 71.0875ZM49.287 122.25L42.2245 128.412C43.1045 129.421 44.19 130.228 45.4082 130.782C46.6264 131.336 47.949 131.622 49.287 131.622C50.6251 131.622 51.9477 131.336 53.1658 130.782C54.384 130.228 55.4696 129.421 56.3495 128.412L49.287 122.25ZM154.562 15.9125C155.401 14.9896 156.046 13.9086 156.462 12.7329C156.878 11.5573 157.055 10.3105 156.982 9.06565C156.91 7.82079 156.59 6.60283 156.042 5.48309C155.493 4.36334 154.726 3.36431 153.787 2.54448C152.847 1.72465 151.754 1.1005 150.57 0.708553C149.386 0.31661 148.136 0.164754 146.893 0.261882C145.65 0.35901 144.438 0.70317 143.33 1.27421C142.221 1.84524 141.238 2.63169 140.437 3.58749L154.562 15.9125ZM91.3245 59.8375C89.7486 61.7184 88.9729 64.1422 89.1641 66.5886C89.3552 69.035 90.4979 71.309 92.3468 72.9223C94.1958 74.5357 96.6036 75.3597 99.0533 75.2177C101.503 75.0756 103.799 73.9787 105.45 72.1625L91.3245 59.8375ZM80.8995 100.287C81.738 99.3646 82.384 98.2836 82.7996 97.1079C83.2152 95.9323 83.392 94.6855 83.3199 93.4407C83.2477 92.1958 82.9278 90.9778 82.3792 89.8581C81.8304 88.7383 81.0639 87.7393 80.1243 86.9195C79.1847 86.0997 78.0911 85.4755 76.9073 85.0836C75.7236 84.6916 74.4735 84.5398 73.2303 84.6369C71.9872 84.734 70.7759 85.0782 69.6673 85.6492C68.5588 86.2202 67.5754 87.0067 66.7745 87.9625L80.8995 100.287ZM2.93702 83.4125L42.2245 128.412L56.3495 116.087L17.062 71.0875L2.93702 83.4125ZM56.3495 128.412L80.8995 100.287L66.7745 87.9625L42.2245 116.087L56.3495 128.412ZM105.45 72.1625L130.012 44.0375L115.887 31.7125L91.3245 59.8375L105.45 72.1625ZM130.012 44.0375L154.562 15.9125L140.437 3.58749L115.887 31.7125L130.012 44.0375Z"
|
||
fill="#00431B"
|
||
/>
|
||
<path
|
||
d="M210 10.5371L156.425 66.7871M97.5 116L102.862 123.037L129.65 94.9121"
|
||
stroke="#00431B"
|
||
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 ">
|
||
{checkOutData?.discountCode == ""
|
||
? "افزودن کد تخفیف"
|
||
: "تخفیف ثبت شد"}
|
||
</h3>
|
||
<p className="mb-0 text-[12px] text-gray-500">
|
||
{checkOutData?.discountCode == ""
|
||
? "کد تخفیف خود را وارد کنید"
|
||
: `تخفیف با کد ${checkOutData?.discountCode} ثبت شده است`}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{checkOutData?.discountCode == "" ? (
|
||
<div className="pl-3">
|
||
<span className="text-[30px] opacity-60">+</span>
|
||
</div>
|
||
) : (
|
||
<div
|
||
className="text-right flex justify-end px-2 py-1 mx-2 cursor-pointer"
|
||
onClick={() => deleteDiscount()}
|
||
>
|
||
<div className=" h-fit">
|
||
<svg
|
||
width="25"
|
||
height="25"
|
||
viewBox="0 0 104 122"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path
|
||
d="M89.5 42.25L84.25 94.7375C83.4562 102.694 83.0625 106.669 81.25 109.675C79.6603 112.321 77.3224 114.437 74.5312 115.756C71.3625 117.25 67.375 117.25 59.375 117.25H44.625C36.6312 117.25 32.6375 117.25 29.4688 115.75C26.6753 114.432 24.3351 112.316 22.7437 109.669C20.9437 106.669 20.5438 102.694 19.7438 94.7375L14.5 42.25M61.375 82.875V51.625M42.625 82.875V51.625M5.125 26.625H33.9687M33.9687 26.625L36.3813 9.925C37.0813 6.8875 39.6062 4.75 42.5062 4.75H61.4938C64.3938 4.75 66.9125 6.8875 67.6187 9.925L70.0313 26.625M33.9687 26.625H70.0313M70.0313 26.625H98.875"
|
||
stroke="#A80000"
|
||
stroke-width="9.375"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="">
|
||
<div className="text-right flex rtl justify-between border-y-[1px] border-gray-100 my-3 px-4 ">
|
||
<p className="mb-0 text-sm font-medium 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> */}
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex justify-between rtl px-4">
|
||
<p className="mb-0 text-[12px] text-gray-500">قیمت </p>
|
||
|
||
<div className="flex justify-center">
|
||
<p className="mb-0 ">
|
||
<PersianNumber
|
||
number={(
|
||
checkOutData?.totalProductsPrice / 10
|
||
)?.toLocaleString()}
|
||
style={"!text-[14px] !font-medium"}
|
||
/>
|
||
</p>
|
||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||
{" "}
|
||
تومان
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between rtl my-2 px-4">
|
||
<p className="mb-0 text-[12px] text-gray-500">تخفیف محصول</p>
|
||
|
||
<div className="flex justify-center">
|
||
<p className="mb-0 ">
|
||
<PersianNumber
|
||
number={(
|
||
checkOutData?.discountPrice / 10
|
||
)?.toLocaleString()}
|
||
style={"!text-[14px] !font-medium"}
|
||
/>
|
||
</p>
|
||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||
{" "}
|
||
تومان
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between rtl my-2 px-4">
|
||
<p className="mb-0 text-[12px] text-gray-500">
|
||
هزینه بسته بندی
|
||
</p>
|
||
|
||
<div className="flex justify-center">
|
||
<p className="mb-0 ">
|
||
<PersianNumber
|
||
number={(
|
||
checkOutData?.packingPrice / 10
|
||
)?.toLocaleString()}
|
||
style={"!text-[14px] !font-medium"}
|
||
/>
|
||
</p>
|
||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||
{" "}
|
||
تومان
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between rtl my-2 px-4">
|
||
<p className="mb-0 text-[12px] text-gray-500">هزینه ارسال</p>
|
||
|
||
<div className="flex justify-center">
|
||
<p className="mb-0 ">
|
||
<PersianNumber
|
||
number={(
|
||
checkOutData?.deliveryPrice / 10
|
||
)?.toLocaleString()}
|
||
style={"!text-[14px] !font-medium"}
|
||
/>
|
||
</p>
|
||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||
{" "}
|
||
تومان
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-between bg-primary-100 p-3 rtl my-2">
|
||
<p className="mb-0 text-sm text-primary-600 font-medium">
|
||
قابل پرداخت
|
||
</p>
|
||
|
||
<div className="flex justify-center">
|
||
<p className="mb-0 ">
|
||
<PersianNumber
|
||
number={(checkOutData?.totalPrice / 10)?.toLocaleString()}
|
||
style={"!text-[14px] !font-medium text-primary-800"}
|
||
/>
|
||
</p>
|
||
<small className="text-gray-500 text-[12px] mt-1 mx-1">
|
||
{" "}
|
||
تومان
|
||
</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<NavBarDownCart
|
||
calculateTotalCost={checkOutData.totalPrice / 10}
|
||
event={() => handleGoPayment()}
|
||
permissionGoPay={permissionGoPay}
|
||
/>
|
||
</div>
|
||
|
||
<BottomSheetDiscount orderId={checkOutData?.id} />
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default CheckoutData;
|