کار بر روی دکمه اضافه کردن به سبد خرید در قسمت پیشنهاد کتاب |18

src/components/ProductSuggestion/index.js

@@ -1,13 +1,24 @@
 import React, { useState, useEffect } from "react";
-import { product } from "../../redux/actions";
+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 }) => {
+const ProductSuggestion = ({
+  isDark,
+  getSimilar,
+  book,
+  similarList,
+  loading,
+  isLogin,
+  pushToCart,
+  id,
+  userId,
+}) => {
   // const [selectedProduct, setSelectedProduct] = useState(null);
   const [selectedProduct, setSelectedProduct] = useState([]);
 
@@ -111,7 +122,16 @@ const ProductSuggestion = ({ isDark, getSimilar, book, similarList }) => {
           width="calc(100% / 5)"
           color={"text-white"}
           selectable={true}
-          onClick={() => {}}
+          loading={loading}
+          onClick={() =>
+            isLogin
+              ? pushToCart({
+                  productId: id,
+                  userId: userId,
+                  count: 1,
+                })
+              : toast.info(window.t("ابتدا وارد حساب کاربری خود شوید."))
+          }
         />
       </div>
     </section>
@@ -122,10 +142,12 @@ 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);

src/views/Product/Desktop/ProductOverAll/index.js

@@ -113,7 +113,7 @@ export const ProductOverAll = ({ book, grades, isDark, loading }) => {
             </Link>
           </div>
         </div>
-        <div className="flex flex-col w-1/3">
+        <div className="flex flex-col w-1/3 ">
           <ProductStatusCard
             price={book?.product[type]?.price}
             garanty={book?.product[type]?.garantyText}