fix product history and suggestion

src/components/Loader/Loader.jsx

@@ -38,7 +38,7 @@ const Loader = () => {
             height: 25,
           }} />
 
-        <div class="loader" style={{marginLeft:"20px"}}></div>
+        <div className="loader" style={{marginLeft:"20px"}}></div>
       </Box>
     </Box>
   );

src/components/ProductHistoryList/ProductHistoryList.jsx

@@ -1,63 +1,105 @@
 import { useState, useEffect } from 'react';
-import { Box, Typography, IconButton, Pagination } from '@mui/material';
+import { Box, Typography, IconButton, Pagination, Button } from '@mui/material';
 import { useSelector, useDispatch } from 'react-redux';
-import { fetchProductsHistory } from '../../redux/slices/productSlice';
 
 import Grid from '@mui/material/Grid2';
 
 const ProductHistoryList = () => {
 
-  const products = useSelector((state) => state.products.productsHistory.data) // state.store.initialState.data
-  const dispatch = useDispatch()
+  const products = useSelector((state) => state.products.products.data); // only used as referenced
+  const [filterProducts, setFilterProducts] = useState([])
 
-  useEffect(() => {
+  useEffect(()=>{ 
 
-    if (localStorage.getItem('amber-product-history')) {
+    if (products.length > 0 && localStorage.getItem('amber-product-history')) {
 
-      let productIDList = JSON.parse(localStorage.getItem('amber-product-history'))
+      const productHandleList = JSON.parse(localStorage.getItem('amber-product-history')) || []
+      const selectedProducts = products.filter(({ handle }) => productHandleList.includes(handle) ) || []
 
-      dispatch(fetchProductsHistory(productIDList))
+      setFilterProducts(selectedProducts)
 
     }
 
-  }, [])
+  }, [products])
 
-  // useEffect(()=>{ 
-  //   console.log(products) 
-  // }, [products])
-
-  const renderProduct = (id, img_url, title, price, currency) => {
+  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc, selected = false) => {
 
     return (
-      <Grid item size={{ xs: 12, md: 2 }}>
-        <Box
-          onClick={()=>{ window.location.href = `/products/${id}` }}
-          sx={{
-            overflow: 'hidden',
-            position: 'relative',
-            cursor: 'pointer'
-          }}
-        >
-          <img
-            src={img_url}
-            alt={title}
-            style={{
-              width: '100%',
-              aspectRatio: '4 / 4',
-              objectPosition:"top center",
-              objectFit: 'cover',
+      <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
+
+        <a href={`/products/${handle}`} style={{ textDecoration: "none", color: "#000" }}>
+          <Box
+            sx={{
+              overflow: 'hidden',
+              position: 'relative',
+              cursor: 'pointer'
             }}
-          />
-
-          <Box sx={{ py: 5 }}>
-            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
-              {title}
-            </Typography>
-            <Typography variant="h6" >
-              {`${currency} ${parseFloat(price).toFixed(2)}`}
-            </Typography>
+
+          >
+            <img
+              src={img_url}
+              alt={title}
+              style={{
+                width: '100%',
+                aspectRatio: '3 / 4',
+                objectFit: 'cover',
+                objectPosition: 'top center'
+              }}
+            />
+
+            {(selected) && <Button
+              sx={{
+                position: "absolute",
+                top: {
+                  xs: 0,
+                  sm: 0,
+                  md: 10,
+                  lg: 20
+                },
+                left: {
+                  xs: 0,
+                  sm: 0,
+                  md: 10,
+                  lg: 20
+                },
+                boxShadow: 0,
+                fontSize: 10
+              }}
+              variant="contained">
+              NEW
+            </Button>}
+
+            <Box sx={{ pb: 3, pt: 1, width: "90%" }}>
+              <Typography variant="body2" sx={{
+                fontWeight: "100", fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                }
+              }}>
+                {collection_name}
+              </Typography>
+              <Typography variant="body2" sx={{
+                fontWeight: "400", fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                }
+              }}>
+                {title}
+              </Typography>
+              <Typography variant="body2" sx={{
+                fontWeight: "100", fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                }
+              }}>
+                {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
+              </Typography>
+            </Box>
           </Box>
-        </Box>
+        </a>
       </Grid>
     )
 
@@ -67,18 +109,20 @@ const ProductHistoryList = () => {
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {products.map(( product, index) => {
+        {filterProducts.map((product, index) => {
 
-            let {id, title, compareAtPriceRange, images, collections} = product
-            let price = compareAtPriceRange.maxVariantPrice.amount
-            let currency = compareAtPriceRange.maxVariantPrice.currencyCode
-            let img_url = images.nodes[0]?.url
+          let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants, selected } = product
 
-            // ID
-            const parts = id.split('/');
-            let prodID = parts[parts.length - 1];
+          let minPrice = minVariantPrice.amount
+          let minPriceCurrency = minVariantPrice.currencyCode
+          let maxPrice = maxVariantPrice.amount
+          let maxPriceCurrency = maxVariantPrice.currencyCode
+          let img_url = images[0]?.url
+          let collection_name = collections[0]?.title
 
-            return renderProduct(prodID, img_url, title, price, currency)
+          if (index < 4) {
+            return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "", selected)
+          }
 
         })}
       </Grid>

src/components/ProductList/ProductList.jsx

@@ -1,252 +1,277 @@
-import { useEffect, useState } from 'react';
-import { Box, Typography, Button, FormControl, Select, MenuItem, InputBase } from '@mui/material';
-import Grid from '@mui/material/Grid2';
+import { useEffect, useState } from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  FormControl,
+  Select,
+  MenuItem,
+  InputBase,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
 import { styled } from "@mui/material";
 //REDUX
-import { useSelector, useDispatch } from 'react-redux';
-import { fetchProducts } from '../../redux/slices/productSlice';
+import { useSelector, useDispatch } from "react-redux";
+import { fetchProducts } from "../../redux/slices/productSlice";
+import { useNavigate } from "react-router-dom";
 
 //UTIL FUNCTION
 function getAllTags(data) {
   const products = data || [];
-  const allTags = products.flatMap(product => product.tags);
+  const allTags = products.flatMap((product) => product.tags);
   const uniqueTags = [...new Set(allTags)];
   return uniqueTags;
 }
 
 function getAllCollection(data) {
   const products = data || [];
-  const allCollection = products.flatMap(product => product.collections);
+  const allCollection = products.flatMap((product) => product.collections);
   const uniqueCollection = Array.from(
-    new Map(allCollection.map(item => [item?.title, item])).values()
+    new Map(allCollection.map((item) => [item?.title, item])).values()
   );
   return uniqueCollection;
 }
 
 const BootstrapInput = styled(InputBase)(({ theme }) => ({
-  'label + &': {
+  "label + &": {
     marginTop: theme.spacing(3),
   },
-  '& .MuiInputBase-input': {
-    position: 'relative',
+  "& .MuiInputBase-input": {
+    position: "relative",
     backgroundColor: "#2E2E2E",
-    border: '1px solid #ced4da',
+    border: "1px solid #ced4da",
     color: "#FFF",
     fontSize: 13,
-    padding: '5px 0',
-    paddingRight: '50px !important',
+    padding: "5px 0",
+    paddingRight: "50px !important",
     paddingLeft: "10px",
-    transition: theme.transitions.create(['border-color', 'box-shadow']),
-    '&:focus': {
+    transition: theme.transitions.create(["border-color", "box-shadow"]),
+    "&:focus": {
       borderRadius: 4,
-      borderColor: '#80bdff',
-      boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)',
+      borderColor: "#80bdff",
+      boxShadow: "0 0 0 0.2rem rgba(0,123,255,.25)",
     },
   },
-  '& .MuiSvgIcon-root': {
-    color: "#FFF !important"
+  "& .MuiSvgIcon-root": {
+    color: "#FFF !important",
   },
 }));
 
 const ProductList = ({ size = 99999 }) => {
-
-  const products = useSelector((state) => state.products.products.data) // only used as referenced
-  const [filteredProducts, setFilteredProducts] = useState([]) // this one is the actual data to be rendered
-  const [tagFilterOption, setTagFilterOption] = useState([])
-  const [collectionFilterOption, setCollectionFilterOption] = useState([])
+  const products = useSelector((state) => state.products.products.data); // only used as referenced
+  const [filteredProducts, setFilteredProducts] = useState([]); // this one is the actual data to be rendered
+  const [tagFilterOption, setTagFilterOption] = useState([]);
+  const [collectionFilterOption, setCollectionFilterOption] = useState([]);
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   //filter
-  const [tags, setTags] = useState('all');
-  const [collection, setCollection] = useState('all');
-  const [sort, setSort] = useState('new')
+  const [tags, setTags] = useState("all");
+  const [collection, setCollection] = useState("all");
+  const [sort, setSort] = useState("new");
 
   useEffect(() => {
-
-    dispatch(fetchProducts())
-
-  }, [])
-
+    dispatch(fetchProducts());
+  }, []);
 
   useEffect(() => {
-
-    console.log("Products: ", products)
+    console.log("Products: ", products);
 
     if (products.length > 0) {
-
-      let newFilteredProducts = filterProducts()
-      setFilteredProducts([])
+      let newFilteredProducts = filterProducts();
+      setFilteredProducts([]);
       setTimeout(() => {
-        setFilteredProducts(newFilteredProducts)
+        setFilteredProducts(newFilteredProducts);
       }, 100);
 
       const tagList = getAllTags(newFilteredProducts);
       setTagFilterOption(tagList);
 
-
       // Filter will only exist if the user haven't click on collection
-      if (!sessionStorage.getItem('amber-select-collection')) {
+      if (!sessionStorage.getItem("amber-select-collection")) {
         const collectionList = getAllCollection(newFilteredProducts);
         setCollectionFilterOption(collectionList);
       } else {
-        const selectedColletion = JSON.parse(sessionStorage.getItem('amber-select-collection'))
-        setCollection(selectedColletion?.title)
+        const selectedColletion = JSON.parse(
+          sessionStorage.getItem("amber-select-collection")
+        );
+        setCollection(selectedColletion?.title);
       }
-
     }
-
-
-  }, [products])
-
+  }, [products]);
 
   useEffect(() => {
-
-    let newFilteredProducts = filterProducts()
-    setFilteredProducts([])
+    let newFilteredProducts = filterProducts();
+    setFilteredProducts([]);
     setTimeout(() => {
-      setFilteredProducts(newFilteredProducts)
+      setFilteredProducts(newFilteredProducts);
     }, 100);
-
-
-  }, [tags, collection, sort])
+  }, [tags, collection, sort]);
 
   const filterProducts = () => {
-
     if (products?.length > 0) {
-
-      let productType = sessionStorage.getItem('amber-select-product-type')
+      let productType = sessionStorage.getItem("amber-select-product-type");
 
       let newFilteredProducts = products.filter(
         (product) => product.productType === productType
       );
 
       // Tags
-      newFilteredProducts = newFilteredProducts.filter(
-        (product) => {
-          if (tags == 'all') {
-            return product.productType === productType
-          } else {
-            return product.productType === productType && product.tags.includes(tags)
-          }
-
+      newFilteredProducts = newFilteredProducts.filter((product) => {
+        if (tags == "all") {
+          return product.productType === productType;
+        } else {
+          return (
+            product.productType === productType && product.tags.includes(tags)
+          );
         }
-      );
+      });
 
       // Collection
-      newFilteredProducts = newFilteredProducts.filter(
-        (product) => {
-
-          if (collection == 'all') {
-            return product.productType === productType
-          } else {
-            return product.productType === productType && product.collections.some(data => data?.title === collection)
-          }
-
+      newFilteredProducts = newFilteredProducts.filter((product) => {
+        if (collection == "all") {
+          return product.productType === productType;
+        } else {
+          return (
+            product.productType === productType &&
+            product.collections.some((data) => data?.title === collection)
+          );
         }
-      );
+      });
 
       if (sort === "title") {
-        newFilteredProducts = newFilteredProducts.sort((a, b) => a.title.localeCompare(b.title));
+        newFilteredProducts = newFilteredProducts.sort((a, b) =>
+          a.title.localeCompare(b.title)
+        );
       } else if (sort === "new") {
-        newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+        newFilteredProducts = newFilteredProducts.sort(
+          (a, b) => new Date(b.createdAt) - new Date(a.createdAt)
+        );
       } else if (sort === "old") {
-        newFilteredProducts = newFilteredProducts.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+        newFilteredProducts = newFilteredProducts.sort(
+          (a, b) => new Date(a.createdAt) - new Date(b.createdAt)
+        );
       }
 
-      return newFilteredProducts
-
+      return newFilteredProducts;
     }
 
-    return []
-
-  }
+    return [];
+  };
 
   const handleChange = (event) => {
     //setInput({ ...input, [event.target.name]: event.target.value });
   };
 
-  const renderProduct = (handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, extra_desc, selected = false) => {
-
+  const renderProduct = (
+    handle,
+    img_url,
+    title,
+    collection_name,
+    minPrice,
+    minPriceCurrency,
+    maxPrice,
+    maxPriceCurrency,
+    extra_desc,
+    selected = false
+  ) => {
     return (
-      <Grid className="animate__animated animate__fadeIn" item size={{ xs: 6, sm: 6, md: 3 }}>
-
-        <a href={`/products/${handle}`} style={{ textDecoration: "none", color: "#000" }}>
-          <Box
-            sx={{
-              overflow: 'hidden',
-              position: 'relative',
-              cursor: 'pointer'
+      <Grid
+        className="animate__animated animate__fadeIn"
+        item
+        size={{ xs: 6, sm: 6, md: 3 }}
+      >
+        <Box
+          sx={{
+            overflow: "hidden",
+            position: "relative",
+            cursor: "pointer",
+          }}
+          onClick={()=>{
+            navigate(`/products/${handle}`)
+          }}
+        >
+          <img
+            src={img_url}
+            alt={title}
+            style={{
+              width: "100%",
+              aspectRatio: "3 / 4",
+              objectFit: "cover",
+              objectPosition: "top center",
             }}
+          />
 
-          >
-            <img
-              src={img_url}
-              alt={title}
-              style={{
-                width: '100%',
-                aspectRatio: '3 / 4',
-                objectFit: 'cover',
-                objectPosition: 'top center'
-              }}
-            />
-
-            {(selected) && <Button
+          {selected && (
+            <Button
               sx={{
                 position: "absolute",
                 top: {
                   xs: 0,
                   sm: 0,
                   md: 10,
-                  lg: 20
+                  lg: 20,
                 },
                 left: {
                   xs: 0,
                   sm: 0,
                   md: 10,
-                  lg: 20
+                  lg: 20,
                 },
                 boxShadow: 0,
-                fontSize: 10
+                fontSize: 10,
               }}
-              variant="contained">
+              variant="contained"
+            >
               NEW
-            </Button>}
+            </Button>
+          )}
 
-            <Box sx={{ pb: 3, pt: 1, width: "90%" }}>
-              <Typography variant="body2" sx={{
-                fontWeight: "100", fontSize: {
+          <Box sx={{ pb: 3, pt: 1, width: "90%" }}>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
                   xs: "0.875rem",
                   sm: "0.875rem",
                   md: "1.1rem",
-                }
-              }}>
-                {collection_name}
-              </Typography>
-              <Typography variant="body2" sx={{
-                fontWeight: "400", fontSize: {
+                },
+              }}
+            >
+              {collection_name}
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "400",
+                fontSize: {
                   xs: "0.875rem",
                   sm: "0.875rem",
                   md: "1.1rem",
-                }
-              }}>
-                {title}
-              </Typography>
-              <Typography variant="body2" sx={{
-                fontWeight: "100", fontSize: {
+                },
+              }}
+            >
+              {title}
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
                   xs: "0.875rem",
                   sm: "0.875rem",
                   md: "1.1rem",
-                }
-              }}>
-                {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
-              </Typography>
-            </Box>
+                },
+              }}
+            >
+              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
+            </Typography>
           </Box>
-        </a>
+        </Box>
       </Grid>
-    )
-
-  }
+    );
+  };
 
   return (
     <>
@@ -260,90 +285,127 @@ const ProductList = ({ size = 99999 }) => {
             xs: "column",
             sm: "row",
             md: "row",
-            lg: "row"
+            lg: "row",
           },
           alignItems: "center",
           backgroundColor: "background.black",
           color: "white",
           px: 2, // Add padding around the box
-          my: 4
+          my: 4,
         }}
       >
         {/* Left Side: Page Title */}
-        <Typography variant="body2" sx={{ fontSize: 10, mt: { xs: 1, sm: 1, md: 0 } }}>
+        <Typography
+          variant="body2"
+          sx={{ fontSize: 10, mt: { xs: 1, sm: 1, md: 0 } }}
+        >
           {`${filteredProducts.length} Item`}
         </Typography>
 
         {/* Right Side: Option Inputs */}
-        <Box sx={{
-          display: "flex", gap: 2, flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", py: {
-            xs: 2,
-            sm: 2,
-            md: 0
-          }
-        }}>
-
-          {(tagFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Tag</Typography>
-            <Select
-              value={tags}
-              onChange={(event) => {
-                setTags(event.target.value);
-              }}
-              sx={{
-                '& .MuiSelect-select': {
-                  border: "none"
-                }
-              }}
-              input={<BootstrapInput />}
-              name="type"
+        <Box
+          sx={{
+            display: "flex",
+            gap: 2,
+            flexDirection: "row",
+            flexWrap: "wrap",
+            justifyContent: "space-between",
+            py: {
+              xs: 2,
+              sm: 2,
+              md: 0,
+            },
+          }}
+        >
+          {tagFilterOption.length > 0 && (
+            <FormControl
+              sx={{ m: 1, display: "flex", flexDirection: "row" }}
+              variant="standard"
             >
-              <MenuItem value={'all'}>All</MenuItem>
-              {tagFilterOption?.map((data) => (<MenuItem value={data}>{data}</MenuItem>))}
-            </Select>
-          </FormControl>}
-
-          {(collectionFilterOption.length > 0) && <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Collection</Typography>
-            <Select
-              value={collection}
-              onChange={(event) => {
-                setCollection(event.target.value);
-              }}
-              sx={{
-                '& .MuiSelect-select': {
-                  border: "none"
-                }
-              }}
-              input={<BootstrapInput />}
-              name="type"
+              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
+                Tag
+              </Typography>
+              <Select
+                value={tags}
+                onChange={(event) => {
+                  setTags(event.target.value);
+                }}
+                sx={{
+                  "& .MuiSelect-select": {
+                    border: "none",
+                  },
+                }}
+                input={<BootstrapInput />}
+                name="type"
+              >
+                <MenuItem value={"all"}>All</MenuItem>
+                {tagFilterOption?.map((data) => (
+                  <MenuItem value={data}>{data}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+
+          {collectionFilterOption.length > 0 && (
+            <FormControl
+              sx={{ m: 1, display: "flex", flexDirection: "row" }}
+              variant="standard"
             >
-              <MenuItem value={'all'}>All</MenuItem>
-              {collectionFilterOption?.map(({ title }) => (<MenuItem value={title}>{title}</MenuItem>))}
-            </Select>
-          </FormControl>}
-
-          <FormControl sx={{ m: 1, display: "flex", flexDirection: "row" }} variant="standard">
-            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>Sort</Typography>
+              <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
+                Collection
+              </Typography>
+              <Select
+                value={collection}
+                onChange={(event) => {
+                  setCollection(event.target.value);
+                }}
+                sx={{
+                  "& .MuiSelect-select": {
+                    border: "none",
+                  },
+                }}
+                input={<BootstrapInput />}
+                name="type"
+              >
+                <MenuItem value={"all"}>All</MenuItem>
+                {collectionFilterOption?.map(({ title }) => (
+                  <MenuItem value={title}>{title}</MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          )}
+
+          <FormControl
+            sx={{ m: 1, display: "flex", flexDirection: "row" }}
+            variant="standard"
+          >
+            <Typography variant="body2" sx={{ mr: 1, my: "auto" }}>
+              Sort
+            </Typography>
             <Select
               value={sort}
               onChange={(event) => {
                 setSort(event.target.value);
               }}
               sx={{
-                '& .MuiSelect-select': {
-                  border: "none"
-                }
+                "& .MuiSelect-select": {
+                  border: "none",
+                },
               }}
               input={<BootstrapInput />}
               name="sort"
             >
-              <MenuItem defaultValue value={'title'}>Title</MenuItem>
-              <MenuItem defaultValue value={'new'}>Newest</MenuItem>
-              <MenuItem defaultValue value={'old'}>Oldest</MenuItem>
+              <MenuItem defaultValue value={"title"}>
+                Title
+              </MenuItem>
+              <MenuItem defaultValue value={"new"}>
+                Newest
+              </MenuItem>
+              <MenuItem defaultValue value={"old"}>
+                Oldest
+              </MenuItem>
             </Select>
           </FormControl>
-
         </Box>
       </Box>
 
@@ -351,20 +413,39 @@ const ProductList = ({ size = 99999 }) => {
       <Box sx={{ mb: 5 }}>
         <Grid container spacing={0.5} columns={12}>
           {filteredProducts.map((product, index) => {
-
-            let { handle, title, images, collections, minVariantPrice, maxVariantPrice, productType, variants, selected } = product
-
-            let minPrice = minVariantPrice.amount
-            let minPriceCurrency = minVariantPrice.currencyCode
-            let maxPrice = maxVariantPrice.amount
-            let maxPriceCurrency = maxVariantPrice.currencyCode
-            let img_url = images[0]?.url
-            let collection_name = collections[0]?.title
+            let {
+              handle,
+              title,
+              images,
+              collections,
+              minVariantPrice,
+              maxVariantPrice,
+              productType,
+              variants,
+              selected,
+            } = product;
+
+            let minPrice = minVariantPrice.amount;
+            let minPriceCurrency = minVariantPrice.currencyCode;
+            let maxPrice = maxVariantPrice.amount;
+            let maxPriceCurrency = maxVariantPrice.currencyCode;
+            let img_url = images[0]?.url;
+            let collection_name = collections[0]?.title;
 
             if (index < size) {
-              return renderProduct(handle, img_url, title, collection_name, minPrice, minPriceCurrency, maxPrice, maxPriceCurrency, "", selected)
+              return renderProduct(
+                handle,
+                img_url,
+                title,
+                collection_name,
+                minPrice,
+                minPriceCurrency,
+                maxPrice,
+                maxPriceCurrency,
+                "",
+                selected
+              );
             }
-
           })}
         </Grid>
       </Box>

src/components/ProductSuggestion/ProductSuggestion.jsx

@@ -1,16 +1,18 @@
-import {useState, useEffect} from 'react';
+import { useState, useEffect } from 'react';
 import { Box, Typography, Button } from '@mui/material';
 import { useSelector } from 'react-redux';
-
 import Grid from '@mui/material/Grid2';
+import { useNavigate } from "react-router-dom";
 
 const ProductSuggestion = () => {
 
   const [suggestProducts, setSuggestProducts] = useState([]);
-  const products = useSelector((state) => state.products.productsHistory.data);
+  const products = useSelector((state) => state.products.products.data);
+
+  const navigate = useNavigate();
 
   useEffect(() => {
-    if (products && products.length > 0) {
+    if (products.length > 0) {
       const getRandomProducts = (arr, num) => {
         const shuffled = [...arr].sort(() => 0.5 - Math.random());
         return shuffled.slice(0, num);
@@ -21,57 +23,153 @@ const ProductSuggestion = () => {
     }
   }, [products]);
 
-  const renderProduct = (id, img_url, title, price, currency) => {
+  const renderProduct = (
+    handle,
+    img_url,
+    title,
+    collection_name,
+    minPrice,
+    minPriceCurrency,
+    maxPrice,
+    maxPriceCurrency,
+    extra_desc,
+    selected = false
+  ) => {
     return (
-      <Grid item size={{ xs: 12, md: 3 }}>
+      <Grid
+        className="animate__animated animate__fadeIn"
+        item
+        size={{ xs: 6, sm: 6, md: 3 }}
+      >
         <Box
-          onClick={() => { window.location.href = `/products/${id}` }}
           sx={{
-            overflow: 'hidden',
-            position: 'relative',
-            cursor: 'pointer'
+            overflow: "hidden",
+            position: "relative",
+            cursor: "pointer",
+          }}
+          onClick={() => {
+            navigate(`/products/${handle}`)
           }}
         >
           <img
             src={img_url}
             alt={title}
             style={{
-              width: '100%',
-              aspectRatio: '4 / 4',
-              objectPosition:"top center",
-              objectFit: 'cover',
+              width: "100%",
+              aspectRatio: "3 / 4",
+              objectFit: "cover",
+              objectPosition: "top center",
             }}
           />
 
-          <Box sx={{ py: 5 }}>
-            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+          {selected && (
+            <Button
+              sx={{
+                position: "absolute",
+                top: {
+                  xs: 0,
+                  sm: 0,
+                  md: 10,
+                  lg: 20,
+                },
+                left: {
+                  xs: 0,
+                  sm: 0,
+                  md: 10,
+                  lg: 20,
+                },
+                boxShadow: 0,
+                fontSize: 10,
+              }}
+              variant="contained"
+            >
+              NEW
+            </Button>
+          )}
+
+          <Box sx={{ pb: 3, pt: 1, width: "90%" }}>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                },
+              }}
+            >
+              {collection_name}
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "400",
+                fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                },
+              }}
+            >
               {title}
             </Typography>
-            <Typography variant="h6" >
-              {`${currency} ${parseFloat(price).toFixed(2)}`}
+            <Typography
+              variant="body2"
+              sx={{
+                fontWeight: "100",
+                fontSize: {
+                  xs: "0.875rem",
+                  sm: "0.875rem",
+                  md: "1.1rem",
+                },
+              }}
+            >
+              {`${minPriceCurrency} ${parseFloat(minPrice).toFixed(2)}`}
             </Typography>
           </Box>
         </Box>
       </Grid>
-    )
-  }
+    );
+  };
 
 
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
         {suggestProducts.map((product, index) => {
- 
-          let {id, title, compareAtPriceRange, images, collections} = product
-          let price = compareAtPriceRange.maxVariantPrice.amount
-          let currency = compareAtPriceRange.maxVariantPrice.currencyCode
-          let img_url = images.nodes[0]?.url
 
-          // ID
-          const parts = id.split('/');
-          let prodID = parts[parts.length - 1];
+          let {
+            handle,
+            title,
+            images,
+            collections,
+            minVariantPrice,
+            maxVariantPrice,
+            productType,
+            variants,
+            selected,
+          } = product;
+
+          let minPrice = minVariantPrice.amount;
+          let minPriceCurrency = minVariantPrice.currencyCode;
+          let maxPrice = maxVariantPrice.amount;
+          let maxPriceCurrency = maxVariantPrice.currencyCode;
+          let img_url = images[0]?.url;
+          let collection_name = collections[0]?.title;
 
-          return renderProduct(prodID, img_url, title, price, currency)
+          return renderProduct(
+            handle,
+            img_url,
+            title,
+            collection_name,
+            minPrice,
+            minPriceCurrency,
+            maxPrice,
+            maxPriceCurrency,
+            "",
+            selected
+          );
         })}
       </Grid>
     </Box>

src/pages/Products/Product.jsx

@@ -87,7 +87,7 @@ const Product = () => {
           YOU MAY ALSO LIKE
         </Typography>
 
-        {/* <ProductSuggestion /> */}
+        <ProductSuggestion />
 
       </Box>
 
@@ -101,7 +101,7 @@ const Product = () => {
           RECENTLY VIEWED
         </Typography>
 
-        {/* <ProductHistoryList /> */}
+        <ProductHistoryList />
 
       </Box>
 

src/redux/slices/productSlice.js

@@ -61,16 +61,6 @@ export const fetchProductsByTags = createAsyncThunk(
   }
 )
 
-export const fetchProductsHistory = createAsyncThunk(
-  'product/fetchProductsHistory',
-  async (productIDList) => {
-
-    const idsQuery = productIDList.map(id => `id:${id}`).join(" OR ");
-    const response = await ProductService.getProducts(6, "TITLE", idsQuery)
-    return response
-
-  }
-)
 
 export const productSlice = createSlice({
   name: 'product',
@@ -129,19 +119,6 @@ export const productSlice = createSlice({
         state.products.data = [];
         state.products.error = action.error.message;
       })
-      .addCase(fetchProductsHistory.pending, (state) => {
-        state.productsHistory.status = 'loading';
-        state.productsHistory.error = null;
-      })
-      .addCase(fetchProductsHistory.fulfilled, (state, action) => {
-        state.productsHistory.status = 'succeeded';
-        state.productsHistory.data = action.payload
-      })
-      .addCase(fetchProductsHistory.rejected, (state, action) => {
-        state.productsHistory.status = 'failed';
-        state.productsHistory.data = [];
-        state.productsHistory.error = action.error.message;
-      })
   }
 });