feat module 8 : make the banner clickable and redirect to specific page - banner

src/components/CarouselContainer/CarouselContainer.jsx

@@ -18,46 +18,94 @@ import { Carousel } from 'react-responsive-carousel';
 
 const CarouselContainer = () => {
 
-  const items = [
-    { img_src: mainImage13, alt_name: "Image 13" },
-    { img_src: mainImage11, alt_name: "Image 11" },
-    { img_src: mainImage10, alt_name: "Image 10" },
-    { img_src: mainImage8, alt_name: "Image 8" },
-    { img_src: mainImage6, alt_name: "Image 6" },
-    { img_src: mainImage5, alt_name: "Image 5" },
-    { img_src: mainImage3, alt_name: "Image 3" },
-    { img_src: mainImage4, alt_name: "Image 4" },
-    { img_src: mainImage2, alt_name: "Image 2" },
-    { img_src: mainImage1, alt_name: "Image 1" },
-
-    { img_src: mainImage13, alt_name: "Image 13" },
-    { img_src: mainImage11, alt_name: "Image 11" },
-    { img_src: mainImage10, alt_name: "Image 10" },
-    { img_src: mainImage8, alt_name: "Image 8" },
-    { img_src: mainImage6, alt_name: "Image 6" },
-    { img_src: mainImage5, alt_name: "Image 5" },
-    { img_src: mainImage3, alt_name: "Image 3" },
-    { img_src: mainImage4, alt_name: "Image 4" },
-    { img_src: mainImage2, alt_name: "Image 2" },
-    { img_src: mainImage1, alt_name: "Image 1" },
+  const baseItems = [
+    // Banner click targets. Update productType/title/titles here when changing banner destinations.
+    { img_src: mainImage13, alt_name: "Eid's Time For Love", productType: "Apparel", title: "Eid's Time For Love", titles: ["EID'S TIME FOR LOVE"] },
+    { img_src: mainImage11, alt_name: "ND X Marii for Amber", productType: "Apparel", title: "ND X Marii for Amber", titles: ["ND X MARII FOR AMBER"] },
+    { img_src: mainImage10, alt_name: "Oasis Abaya", productType: "Apparel", title: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
+    { img_src: mainImage8, alt_name: "Somewhere Somehow Someone", productType: "Apparel", title: "Somewhere Somehow Someone", titles: ["SOMEWHERE SOMEHOW SOMEONE"] },
+    { img_src: mainImage6, alt_name: "Oasis Abaya Collection", productType: "Apparel", title: "Oasis abaya", titles: ["OASIS ABAYA COLLECTION", "MIRAGE COLLECTION"] },
+    { img_src: mainImage5, alt_name: "Raya Romantics", productType: "Apparel", title: "Raya Romantics", titles: ["RAYA ROMANTICS COLLECTION 2025"] },
+    // { img_src: mainImage3, alt_name: "Amber Home", productType: "HOME" },
+    { img_src: mainImage3, alt_name: "Amber Home", clickable: false },
+    // { img_src: mainImage4, alt_name: "Amber Beauty Fragrance", productType: "BEAUTY", title: "Fragrances", titles: ["FRAGRANCES"] },
+    { img_src: mainImage4, alt_name: "Amber Beauty Fragrance", clickable: false },
+    { img_src: mainImage2, alt_name: "Amber Beauty Cosmetics", productType: "BEAUTY", title: "Cosmetics", titles: ["COSMETICS"] },
+    { img_src: mainImage1, alt_name: "Amber Apparel", clickable: false },
   ];
 
+  const items = [...baseItems, ...baseItems];
+
+  const navigateToBanner = ({ productType, title, titles, img_src }) => {
+    if (!productType) return;
+
+    sessionStorage.setItem("amber-select-product-type", productType);
+    sessionStorage.removeItem("amber-select-collection");
+    sessionStorage.removeItem("amber-select-collections");
+
+    if (titles?.length > 0) {
+      sessionStorage.setItem("amber-select-collection", JSON.stringify({
+        title,
+        image: {
+          url: img_src
+        }
+      }));
+      sessionStorage.setItem("amber-select-collections", JSON.stringify(titles));
+    }
+
+    window.location.href = "/products";
+  };
+
   return (
 
     <Carousel showStatus={false} autoPlay={true} infiniteLoop={true} interval={5000} showIndicators={false} stopOnHover={false}>
-      {items?.map(({ img_src, alt_name }, index) => (
+      {items?.map((item, index) => (
         <Box
           key={index}
-          component="img"
-          src={img_src}
-          alt={alt_name}
+          onClick={() => {
+            if (item.clickable !== false) navigateToBanner(item);
+          }}
+          onKeyDown={(event) => {
+            if (item.clickable !== false && event.key === "Enter") navigateToBanner(item);
+          }}
+          role={item.clickable === false ? undefined : "button"}
+          tabIndex={item.clickable === false ? undefined : 0}
           sx={{
             width: "100%",
             height: "100%",
-            zIndex: 0,
-            filter:"brightness(0.9)"
+            cursor: item.clickable === false ? "default" : "pointer",
+            outline: "none"
           }}
-        />
+        >
+          {/*
+          Old image-click code:
+          <Box
+            component="img"
+            src={item.img_src}
+            alt={item.alt_name}
+            onClick={() => navigateToBanner(item)}
+            sx={{
+              width: "100%",
+              height: "100%",
+              zIndex: 0,
+              filter: "brightness(0.9)",
+              cursor: item.clickable === false ? "default" : "pointer"
+            }}
+          />
+          */}
+          <Box
+            component="img"
+            src={item.img_src}
+            alt={item.alt_name}
+            sx={{
+              width: "100%",
+              height: "100%",
+              zIndex: 0,
+              filter: "brightness(0.9)",
+              pointerEvents: "none"
+            }}
+          />
+        </Box>
       ))}
     </Carousel>