feat module 6, 7 : [UI] make same space left and right 'add to cart' section, move success alert message under pay now button, add '+' icon section expand/collapse movement

src/components/ProductDetails/ProductDetails.jsx

@@ -45,6 +45,7 @@ const ProductDetails = () => {
   const [variants, setVariants] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [atomeOpen, setAtomeOpen] = useState(false)
+  const [expandedInfoRows, setExpandedInfoRows] = useState({})
   const [alert, setAlert] = useState({ open: false, severity: '', message: '' });
 
   useEffect(() => {
@@ -230,6 +231,37 @@ const ProductDetails = () => {
   const installmentPrice = `${(amount / 3).toFixed(2)} ${currencyCode}`
   // const shortDescriptionHtml = getFirstDescriptionBlock(product?.descriptionHtml)
 
+  const toggleInfoRow = (row) => {
+    setExpandedInfoRows((prevRows) => ({
+      ...prevRows,
+      [row]: !prevRows[row]
+    }))
+  }
+
+  const infoRowSx = (isExpanded) => ({
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    pt: 2,
+    pb: isExpanded ? 5 : 2,
+    borderBottom: "1px solid #DDD",
+    cursor: "pointer",
+    transition: "padding-bottom 0.25s ease-in-out"
+  })
+
+  const emptyInfoPanel = (row) => (
+    // Old empty expanded panel kept for reference:
+    // expandedInfoRows[row] && (
+    //   <Box
+    //     sx={{
+    //       minHeight: 28,
+    //       borderBottom: "1px solid #DDD"
+    //     }}
+    //   />
+    // )
+    null
+  )
+
 
   return (
     <Box sx={{ position: "relative" }}>
@@ -380,24 +412,31 @@ const ProductDetails = () => {
         </Box>
 
 
-        <Box sx={{ display: "flex", alignItems: "stretch", gap: 2 }}>
-          <Box display="flex" alignItems="stretch" sx={{ backgroundColor: "#F4F4F4", height: 48 }}>
+        <Box sx={{ display: "flex", alignItems: "stretch", gap: 1, mb: 4, width: "100%" }}>
+          <Box display="flex" alignItems="stretch" sx={{ backgroundColor: "#F4F4F4", height: 52, width: { xs: 124, sm: 186 } }}>
             <Button
               variant="text"
-              sx={{ minWidth: 80, color: "#000", backgroundColor: "#F4F4F4" }}
+              sx={{
+                minWidth: 36,
+                width: { xs: 36, sm: 56 },
+                p: 0,
+                color: "#000",
+                backgroundColor: "#F4F4F4",
+                borderRadius: 0
+              }}
               disabled={variantSelection?.quantityAvailable <= 0 || quantity === 1}
               onClick={handleDecrement}
             >
-              <RemoveIcon />
+              <RemoveIcon sx={{ fontSize: 18 }} />
             </Button>
 
             <TextField
               value={quantity}
               inputProps={{ readOnly: true, style: { textAlign: 'center' } }}
               sx={{
-                width: 58,
+                width: { xs: 52, sm: 74 },
                 "& .MuiOutlinedInput-root": {
-                  height: 48,
+                  height: 52,
                   borderRadius: 0,
                   backgroundColor: "#F4F4F4",
                   "& fieldset": {
@@ -410,28 +449,40 @@ const ProductDetails = () => {
 
             <Button
               variant="text"
-              sx={{ minWidth: 80, color: "#000", backgroundColor: "#F4F4F4" }}
+              sx={{
+                minWidth: 36,
+                width: { xs: 36, sm: 56 },
+                p: 0,
+                color: "#000",
+                backgroundColor: "#F4F4F4",
+                borderRadius: 0
+              }}
               disabled={variantSelection?.quantityAvailable <= 0 || quantity === variantSelection?.quantityAvailable}
               onClick={handleIncrement}
             >
-              <AddIcon />
+              <AddIcon sx={{ fontSize: 20 }} />
             </Button>
           </Box>
 
           <Button
             onClick={() => { handleCart() }}
             variant="contained"
-            color="primary"
-            fullWidth
             disabled={variantSelection?.quantityAvailable <= 0 || showLoader}
             sx={{
+              flex: 1,
+              minWidth: 0,
+              height: 52,
               backgroundColor: (theme) => theme.palette.primary.main,
               color: "white",
               textTransform: "uppercase",
               borderRadius: 0,
-              fontSize: "0.875rem",
+              fontSize: "0.9rem",
+              fontWeight: 400,
+              whiteSpace: "nowrap",
+              boxShadow: "none",
               "&:hover": {
                 backgroundColor: (theme) => theme.palette.primary.dark,
+                boxShadow: "none"
               },
             }}
           >
@@ -458,6 +509,17 @@ const ProductDetails = () => {
           PAY NOW
         </Button>}
 
+        {alert.open && (
+          <Alert
+            severity={alert.severity}
+            onClose={() => setAlert({ ...alert, open: false })}
+            sx={{ marginTop: 2 }}
+          >
+            <AlertTitle>{alert.severity === 'success' ? 'Success' : 'Error'}</AlertTitle>
+            {alert.message}
+          </Alert>
+        )}
+
         {/*
         {/*
         <Box sx={{ mb: 5 }}>
@@ -490,56 +552,65 @@ const ProductDetails = () => {
           </Box>
 
           {/* Product Details */}
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+          <Box
+            onClick={() => toggleInfoRow("productDetails")}
+            sx={infoRowSx(expandedInfoRows.productDetails)}
+          >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Product Details
             </Typography>
-            <AddIcon sx={{ fontSize: 18 }} />
+            {expandedInfoRows.productDetails ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
+          {emptyInfoPanel("productDetails")}
 
           {/* Material */}
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+          <Box
+            onClick={() => toggleInfoRow("material")}
+            sx={infoRowSx(expandedInfoRows.material)}
+          >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Material
             </Typography>
-            <AddIcon sx={{ fontSize: 18 }} />
+            {expandedInfoRows.material ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
+          {emptyInfoPanel("material")}
 
           {/* Care Instruction */}
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+          <Box
+            onClick={() => toggleInfoRow("careInstruction")}
+            sx={infoRowSx(expandedInfoRows.careInstruction)}
+          >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Care Instruction
             </Typography>
-            <AddIcon sx={{ fontSize: 18 }} />
+            {expandedInfoRows.careInstruction ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
+          {emptyInfoPanel("careInstruction")}
           {/* Shipping Information */}
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+          <Box
+            onClick={() => toggleInfoRow("shippingInformation")}
+            sx={infoRowSx(expandedInfoRows.shippingInformation)}
+          >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Shipping Information
             </Typography>
-            <AddIcon sx={{ fontSize: 18 }} />
+            {expandedInfoRows.shippingInformation ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
+          {emptyInfoPanel("shippingInformation")}
 
           {/* Return & Exchanges */}
-          <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", py: 2, borderBottom: "1px solid #DDD" }}>
+          <Box
+            onClick={() => toggleInfoRow("returnExchanges")}
+            sx={infoRowSx(expandedInfoRows.returnExchanges)}
+          >
             <Typography variant="body2" sx={{ textTransform: "uppercase", fontWeight: "400", fontSize: { xs: "0.875rem", md: "1.1rem" } }}>
               Return & Exchanges
             </Typography>
-            <AddIcon sx={{ fontSize: 18 }} />
+            {expandedInfoRows.returnExchanges ? <RemoveIcon sx={{ fontSize: 18 }} /> : <AddIcon sx={{ fontSize: 18 }} />}
           </Box>
+          {emptyInfoPanel("returnExchanges")}
         </Box>
       </Box>
-      
-      {alert.open && (
-        <Alert
-          severity={alert.severity}
-          onClose={() => setAlert({ ...alert, open: false })}
-          sx={{ marginTop: 2 }}
-        >
-          <AlertTitle>{alert.severity === 'success' ? 'Success' : 'Error'}</AlertTitle>
-          {alert.message}
-        </Alert>
-      )}
 
       {/* Atome Popup */}
       <Dialog