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.
 
 
 

182 lines
5.7 KiB

import React, { useState, useEffect } from "react";
import { product, userProduct } from "../../redux/actions";
import { connect } from "react-redux";
import separate from "../../utils/separate";
import Button from "../Button";
import { toast } from "react-toastify";
import productImg from "./product-chair.svg";
import plus from "./plus.svg";
const ProductSuggestion = ({
isDark,
getSimilar,
book,
similarList,
loading,
isLogin,
pushToCart,
id,
userId,
}) => {
// const [selectedProduct, setSelectedProduct] = useState(null);
const [selectedProduct, setSelectedProduct] = useState([]);
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 similarList?.length ? (
<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 mb-10">
{window.t("این کالاها برای خرید به شما پیشنهام می دهیم")}
</h2>
{/* product design */}
<div className="flex flex-wrap items-center justify-center mt-5 w-full gap-10">
{similarList.map((book, index) => (
<div
className="flex mb-7 justify-center relative"
style={{ maxWidth: "calc(100% / 5)" }}
key={index}
>
<div
className={`flex flex-col items-center rounded-md p-5 cursor-pointer
${selectedProduct.includes(book) ? "bg-white" : ""}
`}
onClick={() =>
setSelectedProduct(
selectedProduct.includes(book)
? selectedProduct.filter((item) => item != book)
: [...selectedProduct, book]
)
}
style={{ border: "solid 1px #ddd" }}
>
<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">
{window.t("تومان")}
</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-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 mb-5">
<p className="text-base text-productPrice font-bold">
&nbsp;
{window.t("جمع لوازم اختیاری خریداری شده")}
&nbsp;
<span className="mx-1">{separate(price)}</span>
{window.t("تومان")}
</p>
<span className="text-lightBlueTextColor text-base mr-1 font-bold">
{window.t("1 کالا")}
</span>
</div>
<p className="text-sm font-light text-gray-600 mb-4">
{window.t(
"در صورت تمایل می توانید موارد بالا را به سبد خرید اضافه کنید"
)}
</p>
<Button
title={window.t("اضافه کردن به سبد خرید")}
backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "1px" }}
width="calc(100% / 5)"
color={"text-white"}
selectable={true}
loading={loading}
onClick={() =>
isLogin
? pushToCart({
productId: id,
userId: userId,
count: 1,
})
: toast.info(window.t("ابتدا وارد حساب کاربری خود شوید."))
}
/>
</div>
</section>
) : null;
};
const mapStateToProps = (state) => ({
book: state.book.info,
isDark: state.publicApi.isDark,
similarList: state.product.similarList,
isLogin: state.user.status,
});
const mapDispatchToProps = {
getSimilar: product.getSimilar,
pushToCart: userProduct.add,
};
export default connect(mapStateToProps, mapDispatchToProps)(ProductSuggestion);
ProductSuggestion.defaultProps = {
suggestions: [
{
productImage: productImg,
productTitle: window.t("لپ تاپ گیمینگ ایسوس"),
productPrice: "750000",
plusIcon: null,
},
{
productImage: productImg,
productTitle: window.t("مانیتور 40 اینچ"),
productPrice: "3.000.000",
plusIcon: plus,
},
{
productImage: productImg,
productTitle: window.t("ماوس گیمینگ"),
productPrice: "650/000",
plusIcon: plus,
},
{
productImage: productImg,
productTitle: window.t("لپ تاپ مک بوک پرو 2022"),
productPrice: "2000",
plusIcon: plus,
},
],
};