feat module 8 : change redirect page for image AMBER HOME

src/components/ProductType/ProductType.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { Box, Button, Typography } from '@mui/material';
 
-const ProductType = ({ title, img_url }) => {
+const getProductTypeValue = (title = "") => {
+  return title?.trim()?.toUpperCase() === "ESSENTIALS" ? "BEAUTY" : title;
+}
+
+const ProductType = ({ title, img_url, clickable = true }) => {
+  const productTypeValue = getProductTypeValue(title);
+
   return (
     <Box
       sx={{
@@ -29,15 +35,25 @@ const ProductType = ({ title, img_url }) => {
           alignItems: 'center',
           color: '#fff', // Text and button color for visibility
           transition: "all 0.5s ease-in-out",
+          cursor: clickable ? 'pointer' : 'default',
           ":hover":{
             backgroundColor: 'rgba(0, 0, 0, 0.5)'
           }
         }}
-        onClick={() => {
-          sessionStorage.setItem('amber-select-product-type', title)
+        // onClick={() => {
+        //   sessionStorage.setItem('amber-select-product-type', title)
+        //   sessionStorage.removeItem('amber-select-collection')
+        //   window.location.href = '/products'
+        // }}
+        onClick={clickable ? () => {
+          sessionStorage.setItem('amber-select-product-type', productTypeValue)
           sessionStorage.removeItem('amber-select-collection')
+          sessionStorage.removeItem('amber-select-collections')
+          if (title?.trim()?.toUpperCase() === "ESSENTIALS") {
+            sessionStorage.setItem('amber-select-collections', JSON.stringify(["COSMETICS", "HAND & BODY LOTION"]))
+          }
           window.location.href = '/products'
-        }}
+        } : undefined}
       >
         {/* <Typography variant="h5" gutterBottom sx={{ fontWeight: "600", letterSpacing: 7, marginRight:"-0.4em" }}>
           {title?.toUpperCase()}

src/pages/Home.jsx

@@ -80,7 +80,8 @@ const Home = () => {
               <ProductType title={'Essentials'} img_url={AmberBeautyWallpaper}/>
             </Grid>
             <Grid size={{xs:12, md:6}}>
-              <ProductType title={'HOME'} img_url={AmberHomeWallpaper} />
+              {/* <ProductType title={'HOME'} img_url={AmberHomeWallpaper} /> */}
+              <ProductType title={'Essentials'} img_url={AmberHomeWallpaper} />
             </Grid>
           </Grid>
         </Box>