[Deliver -187584887 & 187584886] A buyer should update delete carts (#57

)

* [Deliver -187584887 & 187584886] A buyer should update delete carts

* fix bugs

* fix bug in deleting cart

.vscode/settings.json

@@ -1,5 +1,9 @@
 {
     "cSpell.words": [
-        "noresults"
+        "flexer",
+        "noresults",
+        "setarray",
+        "setcheckout",
+        "toastify"
     ]
 }

src/assets/styles/ViewCart.scss

@@ -1,14 +1,9 @@
-// button {
-//   background-color: transparent;
-//   border: 0;
-// }
 FaCheckSquare {
   color: $primary-color;
 }
 .cart-section {
   display: flex;
   flex-direction: row;
-  padding: 20px;
   .cart-products {
     flex: 2;
     margin: 10px;
@@ -35,7 +30,7 @@ FaCheckSquare {
         .checkout-btn {
           background: $primary-color;
           cursor: pointer;
-          width: 12%;
+          width: 8%;
           color: $white;
           border-radius: 5px;
           border: none;
@@ -116,12 +111,14 @@ FaCheckSquare {
                     width: 20px;
                     height: 20px;
                     font-size: 12px;
+                    cursor:pointer;
                   }
                   input {
                     background: transparent;
                     border: 0;
                     width: 20px;
                     padding-left: 10px;
+                    padding-right: 10px;
                     text-align: center;
                     align-items: center;
                   }
@@ -133,6 +130,7 @@ FaCheckSquare {
                     background: transparent;
                     border: 0;
                     font-size: 20px;
+                    margin-right: 3rem;
                     cursor: pointer;
                   }
                   .delete {
@@ -206,6 +204,7 @@ FaCheckSquare {
         border: none;
         color: $white;
         padding: 10px;
+
       }
     }
   }
@@ -391,8 +390,33 @@ FaCheckSquare {
           border-radius: 5px;
           color: $white;
           padding: 10px;
+
         }
       }
     }
   }
 }
+.clear-cart {
+  margin-top: 1rem;
+  margin-left: 26.5rem;
+  border: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  width: 100%;
+  .delete {
+    border: none;
+    background-color: $primary-color;
+    color: $white;
+    font-size: 1.5rem;
+    padding: 1rem;
+    border-radius: 5px;
+    display: flex;
+    cursor: pointer;
+  }
+  .deleteIcon {
+    font-size: 2rem;
+    margin-right: 1rem;
+    cursor: pointer;
+  }
+}

src/pages/Products.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable */
+import React, { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../store/store";
+import { fetchProducts } from "../store/features/product/productSlice";
+import Product from "../components/product/Product";
+import Sample from "../components/layout/Sample";
+import { PuffLoader } from "react-spinners";
+import { Meta } from "../components/Meta";
+import { toast } from "react-toastify";
+import { Navigate, useNavigate } from "react-router-dom";
+import { createCart, getUserCarts } from "../store/features/carts/cartSlice";
+
+const ProductsPage: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate()
+  const [cartResponseData, setCartResponseData] = useState<any>(null)
+  const { products, isError, isSuccess, isLoading, message } = useAppSelector(
+    (state: any) => state.products
+  );
+  useEffect(() => {
+    dispatch(fetchProducts());
+  }, [dispatch]);
+
+  const handleAddProductToCart = async (productId: string, quantity = 1) => {
+    try {
+      const response = await dispatch(
+        createCart({ productId, quantity })
+      ).unwrap();
+
+      if (response.data) {
+        toast.success(response.message);
+        const updatedResponse = await dispatch(getUserCarts()).unwrap();
+        setCartResponseData(updatedResponse.data);
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error: any) {
+      if (error === "Not authorized") {
+        localStorage.setItem("pendingCartProduct", productId);
+        toast.error("Please login first");
+        navigate("/login");
+      } else {
+        toast.error("Something went wrong. Please try again later.");
+      }
+    }
+  };
+  useEffect(() => {
+    const checkProductToCartPending = async () => {
+      const pendingProduct = localStorage.getItem("pendingCartProduct");
+      if (pendingProduct) {
+        try {
+          await handleAddProductToCart(pendingProduct, 1);
+          localStorage.removeItem("pendingCartProduct");
+        } catch (error) {
+          console.error("Failed to add product to cart:", error);
+        }
+      }
+    };
+
+    checkProductToCartPending();
+  }, []);
+
+  return (
+    <>
+      <Meta title="Home - E-Commerce Ninjas" />
+      <Sample />
+      <div className="landing-container">
+        {isLoading ? (
+          <div className="loader">
+            <PuffLoader color="#ff6d18" size={300} loading={isLoading} />
+          </div>
+        ) : isError ? (
+          <div className="error-message">
+            <p>{message || "Something went wrong. Please try again later."}</p>
+          </div>
+        ) : (
+          <div>
+            <div className="head">
+              <h1>All products</h1>
+            </div>
+            <div className="product-list">
+              {isSuccess &&
+                Array.isArray(products) &&
+                products?.map((product: any) => (
+                  <Product
+                    key={product.id}
+                    id={product.id}
+                    images={product.images}
+                    name={product.name}
+                    price={`$${product.price}`}
+                    stock={Number(product.quantity)}
+                    description={product.description}
+                    discount={Number(product.discount.replace("%", ""))}
+                  />
+                ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default ProductsPage;