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, | 
						|
    }, | 
						|
  ], | 
						|
};
 | 
						|
 |