feat module 6, 7 : move product description from top to product details

src/components/ProductDetails/ProductDetails.jsx

@@ -319,6 +319,54 @@ const ProductDetails = () => {
     null
   )
 
+  const productDetailsPanel = (
+    <Box
+      sx={{
+        maxHeight: expandedInfoRows.productDetails ? 1200 : 0,
+        overflow: "hidden",
+        borderBottom: expandedInfoRows.productDetails ? "1px solid #DDD" : "none",
+        transition: "max-height 0.25s ease-in-out"
+      }}
+    >
+      <Box
+        sx={{
+          pb: 3,
+          color: "text.secondary",
+          fontSize: {
+            xs: "0.875rem",
+            md: "1rem"
+          },
+          lineHeight: 1.6,
+          "& > div > *:first-child": {
+            borderTop: "none !important",
+            marginTop: "0 !important",
+            paddingTop: "0 !important"
+          },
+          "& hr:first-child": {
+            display: "none"
+          },
+          "& p": {
+            mt: 0,
+            mb: 1.5
+          },
+          "& ul": {
+            pl: 2.5,
+            mt: 0,
+            mb: 2
+          },
+          "& li": {
+            mb: 0.5
+          },
+          "& strong, & b": {
+            fontWeight: 700
+          }
+        }}
+      >
+        <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
+      </Box>
+    </Box>
+  )
+
 
   return (
     <Box sx={{ position: "relative" }}>
@@ -340,16 +388,15 @@ const ProductDetails = () => {
             {product?.title}
           </Typography>
 
+          {/*
+          Old product description position kept for reference.
+          Product details now display inside the PRODUCT DETAILS accordion section.
           <Box sx={{ mb: 3 }}>
-            {/*
-            <Typography variant="body1" sx={{ fontWeight: "400", color: "#000" }}>
-              Description
-            </Typography>
-            */}
             <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
               <div dangerouslySetInnerHTML={{ __html: product?.descriptionHtml }}></div>
             </Typography>
           </Box>
+          */}
 
           <Typography
             variant="body2"
@@ -628,14 +675,17 @@ const ProductDetails = () => {
           {/* Product Details */}
           <Box
             onClick={() => toggleInfoRow("productDetails")}
-            sx={infoRowSx(expandedInfoRows.productDetails)}
+            sx={{
+              ...infoRowSx(expandedInfoRows.productDetails),
+              borderBottom: expandedInfoRows.productDetails ? "none" : "1px solid #DDD"
+            }}
           >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Product Details
             </Typography>
             {expandedInfoRows.productDetails ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
-          {emptyInfoPanel("productDetails")}
+          {productDetailsPanel}
 
           {/* Material */}
           <Box