|
|
@ -2,7 +2,7 @@ import React from "react"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { connect } from "react-redux"; |
|
|
|
import { userProduct } from "../../redux/actions"; |
|
|
|
import { userProduct } from "../../redux/actions"; |
|
|
|
import { toast } from "react-toastify"; |
|
|
|
import { toast } from "react-toastify"; |
|
|
|
import separate from '../../utils/separate' |
|
|
|
import separate from "../../utils/separate"; |
|
|
|
|
|
|
|
|
|
|
|
//components;
|
|
|
|
//components;
|
|
|
|
import Button from "../Button"; |
|
|
|
import Button from "../Button"; |
|
|
@ -16,55 +16,79 @@ import tick from "./tick-circle.svg"; |
|
|
|
import shop from "./icon-shop.svg"; |
|
|
|
import shop from "./icon-shop.svg"; |
|
|
|
|
|
|
|
|
|
|
|
const ProductStatusCard = ({ |
|
|
|
const ProductStatusCard = ({ |
|
|
|
items, |
|
|
|
|
|
|
|
price, |
|
|
|
price, |
|
|
|
discountPrice, |
|
|
|
offerPrice, |
|
|
|
isDark, |
|
|
|
isDark, |
|
|
|
id, |
|
|
|
id, |
|
|
|
userId, |
|
|
|
userId, |
|
|
|
isLogin, |
|
|
|
isLogin, |
|
|
|
pushToCart, |
|
|
|
pushToCart, |
|
|
|
loading, |
|
|
|
loading, |
|
|
|
|
|
|
|
garanty, |
|
|
|
|
|
|
|
suggestedCounter, |
|
|
|
|
|
|
|
seller, |
|
|
|
|
|
|
|
shippingTime, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<section className="w-full"> |
|
|
|
<section className="w-full"> |
|
|
|
<div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200"> |
|
|
|
<div className="bg-grayF9 rounded-md px-4 py-2 divide-y divide-solid divide-gray-200"> |
|
|
|
{items.map((item, index) => ( |
|
|
|
<div className="flex flex-row items-center justify-between py-3"> |
|
|
|
<div |
|
|
|
|
|
|
|
className="flex flex-row items-center justify-between py-3" |
|
|
|
|
|
|
|
key={index} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
<img src={item.icon} alt="" className="w-8" /> |
|
|
|
<img src={tick} alt="" className="w-8" /> |
|
|
|
<div className="flex flex-col mr-3"> |
|
|
|
<div className="flex flex-col mr-3"> |
|
|
|
<p className="text-sm"> |
|
|
|
<div className="text-sm">{`توصیه به خرید توسط ${suggestedCounter} نفر`}</div> |
|
|
|
<span className="font-bold">{item.subtitle}</span> |
|
|
|
</div> |
|
|
|
{item.title} |
|
|
|
</div> |
|
|
|
</p> |
|
|
|
<img src={circle} alt="" className="w-5" /> |
|
|
|
{item.customerSatisfaction && ( |
|
|
|
</div> |
|
|
|
<p className="text-xs mt-1"> |
|
|
|
{seller && ( |
|
|
|
رضایت خریداران: |
|
|
|
<div className="flex flex-row items-center justify-between py-3"> |
|
|
|
<span className="font-bold text-green-500 mr-2"> |
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
{item.customerSatisfactionPercent} |
|
|
|
<img src={shop} alt="" className="w-8" /> |
|
|
|
</span> |
|
|
|
<div className="flex flex-col mr-3 text-sm"> |
|
|
|
</p> |
|
|
|
{"فروشنده" + " " + seller} |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<img src={circle} alt="" className="w-5" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
)} |
|
|
|
)} |
|
|
|
|
|
|
|
<div className="flex flex-row items-center justify-between py-3"> |
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
|
|
|
<img src={delivery} alt="" className="w-8" /> |
|
|
|
|
|
|
|
<div className="flex flex-col mr-3"> |
|
|
|
|
|
|
|
<div className="flex flex-row gap-1 text-sm"> |
|
|
|
|
|
|
|
{shippingTime} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{item.alertIcon && <img src={circle} alt="" className="w-5" />} |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
))} |
|
|
|
<img src={circle} alt="" className="w-5" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
{garanty && ( |
|
|
|
|
|
|
|
<div className="flex flex-row items-center justify-between py-3"> |
|
|
|
|
|
|
|
<div className="flex flex-row items-center"> |
|
|
|
|
|
|
|
<img src={shield} alt="" className="w-8" /> |
|
|
|
|
|
|
|
<div className="flex flex-col mr-3"> |
|
|
|
|
|
|
|
<div className="flex flex-row gap-1 text-sm">{garanty}</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<img src={circle} alt="" className="w-5" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
|
|
|
|
{offerPrice && ( |
|
|
|
<div className="flex flex-col items-center py-3"> |
|
|
|
<div className="flex flex-col items-center py-3"> |
|
|
|
<p className="text-xl text-blueC0 font-bold"> |
|
|
|
<p className="text-xl text-blueC0 font-bold"> |
|
|
|
{separate(price)} |
|
|
|
{separate(price)} |
|
|
|
<span className="text-sm text-gray-700 font-light mr-1">تومان</span> |
|
|
|
<span className="text-sm text-gray-700 font-light mr-1"> |
|
|
|
|
|
|
|
تومان |
|
|
|
|
|
|
|
</span> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
<p className="text-xs font-light text-gray-600 mt-2"> |
|
|
|
<p className="text-xs font-light text-gray-600 mt-2"> |
|
|
|
با خرید این کالا |
|
|
|
با خرید این کالا |
|
|
|
<span>{discountPrice}</span> |
|
|
|
<span>{offerPrice}</span> |
|
|
|
صرفه جویی کنید |
|
|
|
صرفه جویی کنید |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
)} |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
title="اضافه کردن به سبد خرید" |
|
|
|
title="اضافه کردن به سبد خرید" |
|
|
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
|
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
|
@ -113,43 +137,3 @@ const mapDispatchToProps = { |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ProductStatusCard); |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ProductStatusCard); |
|
|
|
|
|
|
|
|
|
|
|
ProductStatusCard.defaultProps = { |
|
|
|
|
|
|
|
items: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
icon: tick, |
|
|
|
|
|
|
|
title: "توصیه به خرید توسط 4420 نفر", |
|
|
|
|
|
|
|
subtitle: null, |
|
|
|
|
|
|
|
alertIcon: false, |
|
|
|
|
|
|
|
customerSatisfaction: false, |
|
|
|
|
|
|
|
customerSatisfactionPercent: null, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
icon: shop, |
|
|
|
|
|
|
|
title: " آپادانا ", |
|
|
|
|
|
|
|
subtitle: " فروشنده", |
|
|
|
|
|
|
|
alertIcon: true, |
|
|
|
|
|
|
|
customerSatisfaction: true, |
|
|
|
|
|
|
|
customerSatisfactionPercent: " 91.5 ", |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
icon: delivery, |
|
|
|
|
|
|
|
title: " 20 روز کاری پس از سفارش ", |
|
|
|
|
|
|
|
subtitle: "زمان ارسال", |
|
|
|
|
|
|
|
alertIcon: false, |
|
|
|
|
|
|
|
customerSatisfaction: false, |
|
|
|
|
|
|
|
customerSatisfactionPercent: null, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
icon: shield, |
|
|
|
|
|
|
|
title: "اصالت و سلامت فیزیکی", |
|
|
|
|
|
|
|
subtitle: "گارانتی ", |
|
|
|
|
|
|
|
alertIcon: true, |
|
|
|
|
|
|
|
customerSatisfaction: false, |
|
|
|
|
|
|
|
customerSatisfactionPercent: null, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
productPrice: " 56/894/000 ", |
|
|
|
|
|
|
|
discountPrice: " 540.000 ", |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|