fix: addresses several ui issues in shop (#253)

* fix: only display cartIcon in header at /shop

* fix(style): add radius to shop items in single item view

* fix: remove space character after item URL in shop carousel

* fix: display item categories in their color codes in the cart drawer

* feat: display cart items count besides the cart icon

* refactor: remove redundant style declarations

* feat: display and keep track of cart items count in the cart icon

* feat: display cart count if there's at least one item

* fix: linting issue

* fix: slice product name in ProductCard if len exceeds 15

Author: alvyynm

src/components/Header.jsx

@@ -68,13 +68,15 @@ function Header() {
         {/* mobile menu */}
         <div className="flex gap-4 items-center">
           <div className="flex md:hidden">
-            <button
-              type="button"
-              aria-label="open cart"
-              onClick={() => setOpen(true)}
-            >
-              <CartIcon />
-            </button>
+            {pathname === "/shop" && (
+              <button
+                type="button"
+                aria-label="open cart"
+                onClick={() => setOpen(true)}
+              >
+                <CartIcon />
+              </button>
+            )}
           </div>
           {showNavlinks ? (
             <button

src/components/shop/CartDrawer.jsx

@@ -8,6 +8,7 @@ import { LazyLoadImage } from "react-lazy-load-image-component";
 import { Link, useNavigate } from "react-router-dom";
 import { useDeleteSwag } from "../../hooks/Mutations/shop/useCartSwagg";
 import formatPrice from "../../utilities/formatPrice";
+import { categoryColors } from "../../utilities/utils";
 
 function CartDrawer({ open, setOpen }) {
   const navigate = useNavigate();
@@ -64,6 +65,8 @@ function CartDrawer({ open, setOpen }) {
   const handleDeleteSwag = (cartItemId) => {
     removeSwagFromCart(cartItemId);
     deleteFromLocalStorage(cartItemId);
+    // dispatch custom event to notify cart change
+    window.dispatchEvent(new Event("swagListUpdated"));
   };
 
   const handleCheckout = () => {
@@ -148,7 +151,12 @@ function CartDrawer({ open, setOpen }) {
                                       <div className="flex flex-row justify-between items-center mb-4">
                                         <div className="flex flex-col space-y-2 justify-start">
                                           <div className="flex justify-between">
-                                            <p className="flex justify-between items-center gap-1 font-medium bg-[#FEF3F2] text-[#B42318] text-sm rounded-full px-2 py-1">
+                                            <p
+                                              style={categoryColors(
+                                                cartProduct.category
+                                              )}
+                                              className="flex justify-between items-center gap-1 font-medium bg-[#FEF3F2] text-[#B42318] text-sm rounded-full px-2 py-1"
+                                            >
                                               <CiShoppingTag />
                                               {cartProduct.category}
                                             </p>

src/components/shop/CartIcon.jsx

@@ -1,14 +1,45 @@
+import { useEffect, useState } from "react";
 import { MdAddShoppingCart } from "react-icons/md";
 import SectionWrapper from "./SectionWrapper";
 
 function CartIcon() {
+  const [cartProducts, setCartProducts] = useState(() => {
+    // Initialize state with the value from localStorage if it exists
+    const storedProducts = localStorage.getItem("swagList");
+    return storedProducts ? JSON.parse(storedProducts) : [];
+  });
+
+  useEffect(() => {
+    // Event listener for storage changes in other tabs/windows
+    const handleStorageChange = () => {
+      const storedProducts = localStorage.getItem("swagList");
+      setCartProducts(storedProducts ? JSON.parse(storedProducts) : []);
+    };
+
+    // Listen for "storage" events,  whenever swagList is updated from another tab
+    window.addEventListener("storage", handleStorageChange);
+    // Listen for custom swagListUpdated events, fired whenever swagList is updated
+    window.addEventListener("swagListUpdated", handleStorageChange);
+
+    // Cleanup event listeners on unmount
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("swagListUpdated", handleStorageChange);
+    };
+  }, []);
+
   return (
     <SectionWrapper>
-      <div className="flex justify-end   ">
+      <div className="flex justify-end relative">
         <div className="w-12 md:w-16 h-12 md:h-16 rounded-full p-0.5 md:p-1  bg-white border shadow-lg cursor-pointer">
           <div className="flex w-full h-full p-1.5 md:p-2 rounded-full justify-center items-center bg-green-dark">
             <MdAddShoppingCart color="white" className="h-full w-full" />
           </div>
+          {cartProducts.length > 0 && (
+            <div className="absolute bottom-0 right-0 bg-[#B3261E] text-white text-xs font-medium rounded-full w-5 h-5 flex items-center justify-center">
+              <p>{cartProducts?.length}</p>
+            </div>
+          )}
         </div>
       </div>
     </SectionWrapper>

src/components/shop/ProductCard.jsx

@@ -35,7 +35,9 @@ function ProductCard({ product }) {
         className="flex justify-between pr-1"
       >
         <h3 className="text-md uppercase font-medium text-gray-600">
-          {product.name}
+          {product.name.length > 15
+            ? `${product.name.slice(0, 18)}...`
+            : product.name}
         </h3>
         <div className="p-1 rounded-xl bg-green-dark/10">
           {totalStock > 0 ? (

src/pages/shop/SingleItemPage.jsx

@@ -128,6 +128,8 @@ export default function SingleItemPage() {
       });
       // Add to local storage
       addToLocalStorage();
+      // dispatch custom event to notify cart change
+      window.dispatchEvent(new Event("swagListUpdated"));
 
       // open cart
       setOpen(true);
@@ -177,7 +179,7 @@ export default function SingleItemPage() {
                   key={index}
                   src={image}
                   alt={singleSwag.name}
-                  className={`m-auto min-w-full ${selectedImage === index + 1 ? "block" : "hidden"}`}
+                  className={`m-auto rounded-lg min-w-full ${selectedImage === index + 1 ? "block" : "hidden"}`}
                 />
               ))}
             </div>

src/pages/shop/sections/Banner/Carousal.jsx

@@ -85,7 +85,7 @@ function Carousel() {
           From KES {formatPrice(swagList[selectedIndex]?.price)}
         </p>
         <Link
-          to={`/shop/item/${isSuccess ? swagList[selectedIndex]?.slug : ""} `}
+          to={`/shop/item/${isSuccess ? swagList[selectedIndex]?.slug : ""}`}
           className="text-white font-bold bg-gradient-to-b to-primary from-green-dark py-3 px-4 mb-2 rounded-md"
         >
           Shop Now