handle max stock

src/components/ProductDetails/ProductDetails.jsx

@@ -166,7 +166,7 @@ const ProductDetails = () => {
   }
 
   const handleIncrement = () => {
-    setQuantity((prevQuantity) => prevQuantity + 1);
+    setQuantity((prevQuantity) => (prevQuantity >= variantSelection.quantityAvailable ? variantSelection.quantityAvailable : prevQuantity + 1));
   };
 
   const handleDecrement = () => {
@@ -195,7 +195,7 @@ const ProductDetails = () => {
           <Typography
             variant="body1"
           >
-            IN STOCK: {`${variantSelection?.quantityAvailable}`}
+            {(variantSelection?.quantityAvailable == 0) ? <span style={{color:"red", fontWeight:"bolder"}}>{`OUT OF STOCK`}</span> : `IN STOCK: ${variantSelection?.quantityAvailable}`}
           </Typography>
         </Box>
 
@@ -241,7 +241,7 @@ const ProductDetails = () => {
               variant="contained"
               color="primary"
               sx={{ width: "35px" }}
-              disabled={variantSelection?.quantityAvailable == 0}
+              disabled={variantSelection?.quantityAvailable == 0 || quantity == 1}
               onClick={handleDecrement}
             >
               <RemoveIcon />
@@ -259,7 +259,7 @@ const ProductDetails = () => {
               variant="contained"
               color="primary"
               sx={{ width: "35px" }}
-              disabled={variantSelection?.quantityAvailable == 0}
+              disabled={variantSelection?.quantityAvailable == 0 || quantity == variantSelection?.quantityAvailable}
               onClick={handleIncrement}
             >
               <AddIcon />