feat module 6, 7 : smooth the product info section collapse movement

src/components/ProductDetails/ProductDetails.jsx

@@ -9,7 +9,8 @@ import {
   IconButton,
   Drawer,
   InputBase,
-  Tooltip
+  Tooltip,
+  Collapse
 } from "@mui/material";
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -359,7 +360,6 @@ const ProductDetails = () => {
 
   const toggleInfoRow = (row) => {
     setExpandedInfoRows((prevRows) => ({
-      ...prevRows,
       [row]: !prevRows[row]
     }))
   }
@@ -382,6 +382,20 @@ const ProductDetails = () => {
     transition: "padding-bottom 0.25s ease-in-out"
   })
 
+  const infoPanelSx = {
+    borderBottom: "1px solid #DDD"
+  }
+
+  const infoPanelContentSx = {
+    color: "text.secondary",
+    fontSize: {
+      xs: "0.875rem",
+      md: "1rem"
+    },
+    lineHeight: 1.6,
+    pb: 2.5
+  }
+
   const materialMetafield = product?.metafields?.material
   const careInstructionMetafield = product?.metafields?.care_instruction
   const shippingInformationMetafield = product?.metafields?.shipping_information
@@ -394,127 +408,76 @@ const ProductDetails = () => {
 
   // Renders Shopify product metafield custom.material inside the Material row.
   const materialPanel = (
-    <Box
-      sx={{
-        maxHeight: expandedInfoRows.material ? 600 : 0,
-        overflow: "hidden",
-        borderBottom: "1px solid #DDD",
-        transition: "max-height 0.25s ease-in-out"
-      }}
-    >
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.material)} timeout="auto">
       <Box
         sx={{
-          color: "text.secondary",
+          ...infoPanelContentSx,
           minHeight: materialMetafield?.value ? 0 : 28,
-          fontSize: {
-            xs: "0.875rem",
-            md: "1rem"
-          },
-          lineHeight: 1.6
         }}
       >
         {renderShopifyRichText(materialMetafield?.value)}
       </Box>
+      </Collapse>
     </Box>
   )
 
   // Renders Shopify product metafield custom.care_instruction inside the Care Instruction row.
   const careInstructionPanel = (
-    <Box
-      sx={{
-        maxHeight: expandedInfoRows.careInstruction ? 600 : 0,
-        overflow: "hidden",
-        borderBottom: "1px solid #DDD",
-        transition: "max-height 0.25s ease-in-out"
-      }}
-    >
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.careInstruction)} timeout="auto">
       <Box
         sx={{
-          color: "text.secondary",
+          ...infoPanelContentSx,
           minHeight: careInstructionMetafield?.value ? 0 : 28,
-          fontSize: {
-            xs: "0.875rem",
-            md: "1rem"
-          },
-          lineHeight: 1.6
         }}
       >
         {renderShopifyRichText(careInstructionMetafield?.value)}
       </Box>
+      </Collapse>
     </Box>
   )
 
   // Renders Shopify product metafield custom.shipping_information inside the Shipping Information row.
   const shippingInformationPanel = (
-    <Box
-      sx={{
-        maxHeight: expandedInfoRows.shippingInformation ? 600 : 0,
-        overflow: "hidden",
-        borderBottom: "1px solid #DDD",
-        transition: "max-height 0.25s ease-in-out"
-      }}
-    >
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.shippingInformation)} timeout="auto">
       <Box
         sx={{
-          color: "text.secondary",
+          ...infoPanelContentSx,
           minHeight: shippingInformationMetafield?.value ? 0 : 28,
-          fontSize: {
-            xs: "0.875rem",
-            md: "1rem"
-          },
-          lineHeight: 1.6
         }}
       >
         {renderShopifyRichText(shippingInformationMetafield?.value)}
       </Box>
+      </Collapse>
     </Box>
   )
 
   // Renders Shopify product metafield custom.return_exchange inside the Return & Exchanges row.
   const returnExchangesPanel = (
-    <Box
-      sx={{
-        maxHeight: expandedInfoRows.returnExchanges ? 600 : 0,
-        overflow: "hidden",
-        borderBottom: "1px solid #DDD",
-        transition: "max-height 0.25s ease-in-out"
-      }}
-    >
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.returnExchanges)} timeout="auto">
       <Box
         sx={{
-          color: "text.secondary",
+          ...infoPanelContentSx,
           minHeight: returnExchangeMetafield?.value ? 0 : 28,
-          fontSize: {
-            xs: "0.875rem",
-            md: "1rem"
-          },
-          lineHeight: 1.6
         }}
       >
         {renderShopifyRichText(returnExchangeMetafield?.value)}
       </Box>
+      </Collapse>
     </Box>
   )
 
   // Renders Shopify product metafield custom.product_details inside the Product Details row.
   const productDetailsPanel = (
-    <Box
-      sx={{
-        maxHeight: expandedInfoRows.productDetails ? 1200 : 0,
-        overflow: "hidden",
-        borderBottom: "1px solid #DDD",
-        transition: "max-height 0.25s ease-in-out"
-      }}
-    >
+    <Box sx={infoPanelSx}>
+      <Collapse in={Boolean(expandedInfoRows.productDetails)} timeout="auto">
       <Box
         sx={{
-          color: "text.secondary",
+          ...infoPanelContentSx,
           minHeight: productDetailsMetafield?.value ? 0 : 28,
-          fontSize: {
-            xs: "0.875rem",
-            md: "1rem"
-          },
-          lineHeight: 1.6,
           "& > div > *:first-child": {
             borderTop: "none !important",
             marginTop: "0 !important",
@@ -542,6 +505,7 @@ const ProductDetails = () => {
       >
         {renderShopifyRichText(productDetailsMetafield?.value)}
       </Box>
+      </Collapse>
     </Box>
   )