|
|
|
|
@ -10,22 +10,6 @@ import alertIcon from "../../assets/icons/alert.svg"; |
|
|
|
|
|
|
|
|
|
import { connect } from "react-redux"; |
|
|
|
|
|
|
|
|
|
const PriceStatus = ({ name, value, type, isDark }) => { |
|
|
|
|
return ( |
|
|
|
|
<div className="w-full flex flex-row justify-between py-2"> |
|
|
|
|
<strong className="font-light text-sm dark:text-white">{name}</strong> |
|
|
|
|
<span |
|
|
|
|
className="font-bold text-sm dark:text-white" |
|
|
|
|
style={{ |
|
|
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{value + " " + "تومان"} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function ShoppingCart({ |
|
|
|
|
isDark, |
|
|
|
|
isMobile, |
|
|
|
|
@ -40,6 +24,7 @@ function ShoppingCart({ |
|
|
|
|
payFactor, |
|
|
|
|
headerOptions, |
|
|
|
|
setHeaderOptions, |
|
|
|
|
desktopContentTransform, |
|
|
|
|
}) { |
|
|
|
|
useEffect(() => { |
|
|
|
|
getList(); |
|
|
|
|
@ -48,11 +33,67 @@ function ShoppingCart({ |
|
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
const Table = () => { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
return ( |
|
|
|
|
<> |
|
|
|
|
{isMobile ? ( |
|
|
|
|
<div className="w-full flex flex-col"> |
|
|
|
|
<header className="w-full flex flex-row gap-10"> |
|
|
|
|
<strong className="w-1/2 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal"> |
|
|
|
|
کالاهای انتخابی{" "} |
|
|
|
|
</strong> |
|
|
|
|
<strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal"> |
|
|
|
|
تعداد سفارش |
|
|
|
|
</strong> |
|
|
|
|
<strong className="w-1/4 pb-2 border-b border-solid border-gray-200 text-gray70 text-sm font-normal"> |
|
|
|
|
مبلغ |
|
|
|
|
</strong> |
|
|
|
|
</header> |
|
|
|
|
<ul className="w-full mt-2 list-none p-0"> |
|
|
|
|
{list.map((product, index) => ( |
|
|
|
|
<Product key={index} product={product} /> |
|
|
|
|
))} |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const PriceStatus = ({ name, value, type }) => { |
|
|
|
|
return isMobile ? ( |
|
|
|
|
<div className="w-full flex flex-row justify-between py-2"> |
|
|
|
|
<strong className="font-light text-sm dark:text-white">{name}</strong> |
|
|
|
|
<span |
|
|
|
|
className="font-bold text-sm dark:text-white" |
|
|
|
|
style={{ |
|
|
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{value + " " + "تومان"} |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div className="w-full flex flex-row justify-between py-4"> |
|
|
|
|
<strong className="font-light text-base dark:text-white text-blue5F"> |
|
|
|
|
{name} |
|
|
|
|
</strong> |
|
|
|
|
<span |
|
|
|
|
className="font-medium text-xl dark:text-white" |
|
|
|
|
style={{ |
|
|
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "", |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{value} |
|
|
|
|
<span |
|
|
|
|
style={{ |
|
|
|
|
color: !isDark ? (type === "error" ? "#F1420D" : "#246E8A") : "", |
|
|
|
|
}} |
|
|
|
|
className="text-sm mr-2" |
|
|
|
|
> |
|
|
|
|
تومان |
|
|
|
|
</span> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
return isMobile ? ( |
|
|
|
|
<div className="w-full flex flex-col px-4"> |
|
|
|
|
{list.map((product, index) => ( |
|
|
|
|
<Product key={index} product={product} /> |
|
|
|
|
@ -63,19 +104,16 @@ function ShoppingCart({ |
|
|
|
|
name="مبلغ سبد خرید" |
|
|
|
|
value={factorInfo?.sumPrice} |
|
|
|
|
type="normal" |
|
|
|
|
isDark={isDark} |
|
|
|
|
/> |
|
|
|
|
<PriceStatus |
|
|
|
|
name="میزان تخفیف" |
|
|
|
|
value={factorInfo?.offPrice} |
|
|
|
|
type="error" |
|
|
|
|
isDark={isDark} |
|
|
|
|
/> |
|
|
|
|
<PriceStatus |
|
|
|
|
name="مالیات بر ارزش افزوده" |
|
|
|
|
value={factorInfo?.sumPrice * 0.009} |
|
|
|
|
type="error" |
|
|
|
|
isDark={isDark} |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-row justify-between items-center w-full py-3"> |
|
|
|
|
@ -105,14 +143,63 @@ function ShoppingCart({ |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
) : ( |
|
|
|
|
<div className="w-full flex flex-row"> |
|
|
|
|
<div className="flex flex-col"> |
|
|
|
|
<div |
|
|
|
|
className={`w-full flex flex-row relative gap-10 px-5 mt-10 ${ |
|
|
|
|
desktopContentTransform ? "top-24" : "" |
|
|
|
|
}`}
|
|
|
|
|
> |
|
|
|
|
<div className="flex flex-col w-3/4"> |
|
|
|
|
<Table /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div |
|
|
|
|
className="flex flex-col w-1/4 p-10 bg-grayF9 border border-solid border-grayDB rounded-md px-4 py-4" |
|
|
|
|
style={{ height: "fit-content" }} |
|
|
|
|
> |
|
|
|
|
<div className="flex flex-col w-full border-t py-2 border-gray-300 border-b"> |
|
|
|
|
<PriceStatus |
|
|
|
|
name="مبلغ سبد خرید" |
|
|
|
|
value={factorInfo?.sumPrice} |
|
|
|
|
type="normal" |
|
|
|
|
/> |
|
|
|
|
<PriceStatus |
|
|
|
|
name="میزان تخفیف" |
|
|
|
|
value={factorInfo?.offPrice} |
|
|
|
|
type="error" |
|
|
|
|
/> |
|
|
|
|
<PriceStatus |
|
|
|
|
name="مالیات بر ارزش افزوده" |
|
|
|
|
value={factorInfo?.sumPrice * 0.009} |
|
|
|
|
type="error" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<div className="flex flex-row justify-between items-center w-full py-4 border-t border-b border-grayDB border-solid"> |
|
|
|
|
<strong className="font-medium text-base text-blue5F dark:text-white"> |
|
|
|
|
جمع کل سبد خرید |
|
|
|
|
</strong> |
|
|
|
|
<p className="font-medium text-greenBA text-xl dark:text-white"> |
|
|
|
|
{factorInfo?.payPrice} |
|
|
|
|
<span className="font-medium text-greenBA text-sm mr-2">تومان</span> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<div |
|
|
|
|
className="w-full rounded-md flex flex-row justify-center items-center py-2.5 px-3 mt-10 mb-4" |
|
|
|
|
style={{ backgroundColor: "#196EC01a" }} |
|
|
|
|
> |
|
|
|
|
<img src={alertIcon} className="w-5 ml-2" /> |
|
|
|
|
<p className="text-xs text-blueC0 dark:text-white text-justify"> |
|
|
|
|
هزینه ارسال کالا پس از تعیین محل آدرس مشخص میشود |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
<Button |
|
|
|
|
title="ادامه فرایند خرید" |
|
|
|
|
backgroundColor="bg-blueC0" |
|
|
|
|
border={{ color: "#196EC055", width: "1px" }} |
|
|
|
|
width="100%" |
|
|
|
|
color="text-white" |
|
|
|
|
// onClick={() => }
|
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
)} |
|
|
|
|
</> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -124,6 +211,7 @@ const mapStateToProps = (state) => ({ |
|
|
|
|
factorInfo: state.userFactor.info, |
|
|
|
|
userId: state.user.status.id, |
|
|
|
|
hasPhysical: state.userProduct.hasPhysical, |
|
|
|
|
desktopContentTransform: state.publicApi.desktopContentTransform, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const mapDispatchToProps = { |
|
|
|
|
|
