You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.7 KiB
149 lines
4.7 KiB
import React, { useState, useEffect } from "react"; |
|
import { product } from "../../redux/actions"; |
|
import { connect } from "react-redux"; |
|
import separate from "../../utils/separate"; |
|
import Button from "../Button"; |
|
|
|
import productImg from "./product-chair.svg"; |
|
import plus from "./plus.svg"; |
|
|
|
const ProductSuggestion = ({ |
|
suggestions, |
|
isDark, |
|
id, |
|
getSimilar, |
|
book, |
|
similarList, |
|
}) => { |
|
const [selectedProduct, setSelectedProduct] = useState(null); |
|
const [price, setPrice] = useState(0); |
|
|
|
useEffect(() => { |
|
if (book) { |
|
getSimilar({ id: book?.id }); |
|
} |
|
}, [book]); |
|
useEffect(() => { |
|
if (similarList.length > 0) { |
|
let allPrice = 0; |
|
for (let item of similarList) { |
|
allPrice = item.price + allPrice; |
|
} |
|
setPrice(() => allPrice); |
|
} |
|
}, [similarList]); |
|
return ( |
|
<section className="mt-10 border-2 border-gray-300 py-10 rounded-lg bg-grayF9"> |
|
<h2 className="text-center text-lg font-bold text-productPrice"> |
|
این کالاها برای خرید به شما پیشنهام می دهیم |
|
</h2> |
|
{/* product design */} |
|
<div className="flex flex-row flex-wrap items-center justify-center mt-5 w-full gap-5"> |
|
{similarList.map((book, index) => ( |
|
<div |
|
className="flex flex-row mb-7 justify-center relative" |
|
style={{ maxWidth: "calc(100% / 5)" }} |
|
key={index} |
|
> |
|
<div |
|
className={`flex flex-col items-center border rounded-md border-gray-300 p-5 cursor-pointer bg-white |
|
${selectedProduct === book ? "bg-white" : ""}`} |
|
onClick={() => setSelectedProduct(book)} |
|
> |
|
<img |
|
src={`https://dnvn.ir/api/v1/file/${book?.book?.fileIds}`} |
|
alt="" |
|
className="w-2/3 rounded-md" |
|
/> |
|
<h2 className="my-3 text-tiny">{book?.name}</h2> |
|
<p className="text-base text-blueC0 font-medium"> |
|
{separate(book?.price)} |
|
<span className="mx-1 text-xs text-black">تومان</span> |
|
</p> |
|
{/* <div className="flex flex-col items-center mt-3"> |
|
<span className="text-xs">انتخاب شما</span> |
|
<input |
|
className="checkbox-input-checked mt-4 cursor-pointer w-4 h-4" |
|
type="checkbox" |
|
/> |
|
</div> */} |
|
</div> |
|
{Number(index) !== similarList.length - 1 && ( |
|
<img |
|
src={plus} |
|
alt="" |
|
className="w-5 absolute -left-2.5 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-20" |
|
/> |
|
)} |
|
</div> |
|
))} |
|
</div> |
|
{/* bottom */} |
|
<div className="flex flex-col justify-center items-center mt-4"> |
|
<div className="flex flex-row mb-5"> |
|
<p className="text-base text-productPrice font-bold"> |
|
جمع لوازم اختیاری خریداری شده |
|
<span className="mx-1">{separate(price)}</span> |
|
تومان |
|
</p> |
|
<span className="text-lightBlueTextColor text-base mr-1 font-bold"> |
|
1 کالا |
|
</span> |
|
</div> |
|
<p className="text-sm font-light text-gray-600 mb-4"> |
|
در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید |
|
</p> |
|
<Button |
|
title="اضافه کردن به سبد خرید" |
|
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"} |
|
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }} |
|
width="calc(100% / 5)" |
|
color={"text-white"} |
|
selectable={true} |
|
onClick={() => {}} |
|
/> |
|
</div> |
|
</section> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
book: state.book.info, |
|
isDark: state.publicApi.isDark, |
|
similarList: state.product.similarList, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
getSimilar: product.getSimilar, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(ProductSuggestion); |
|
|
|
ProductSuggestion.defaultProps = { |
|
suggestions: [ |
|
{ |
|
productImage: productImg, |
|
productTitle: "لپ تاپ گیمینگ ایسوس", |
|
productPrice: "750000", |
|
plusIcon: null, |
|
}, |
|
{ |
|
productImage: productImg, |
|
productTitle: "مانیتور 40 اینچ", |
|
productPrice: "3.000.000", |
|
plusIcon: plus, |
|
}, |
|
{ |
|
productImage: productImg, |
|
productTitle: "ماوس گیمینگ", |
|
productPrice: "650/000", |
|
plusIcon: plus, |
|
}, |
|
{ |
|
productImage: productImg, |
|
productTitle: "لپ تاپ مک بوک پرو 2022", |
|
productPrice: "2000", |
|
plusIcon: plus, |
|
}, |
|
], |
|
};
|
|
|