[Team]: Fix Add logic to not allow interaction with products that have no available stock

ecom-web/src/components/product-market/product-item.jsx

@@ -107,6 +107,8 @@ export default class ProductItem extends Component {
                         disabled={ !this.props.user?.currentUser }
                         onChange={ this.handleChange("orderItemQuantity") }
                         value = { this.state.orderItemQuantity }
+                        min="1"
+                        max="99"
                     />
                     <button disabled={ !this.props.user?.currentUser } className="add-to-cart-button">Add to Cart</button>
                 </form>

ecom-web/src/components/product-market/product-market.jsx

@@ -38,7 +38,8 @@ export default class ProductMarket extends Component {
         <div className="products-container">
           {this.props.products.map(prod => {
             return (
-              <div className={prod.productName ? "product-item-container" : "no-item"} key={ prod.sku }>
+              <div className={prod.availableStock > 0 ? "product-item-container" : "no-item"} key={ prod.sku }>
+                { prod.availableStock > 0 ? "" : <p id="out-of-stock">- Out of Stock -</p> }
                 { prod.productName ? 
                   <ProductItem 
                     item={ prod } 
@@ -46,7 +47,7 @@ export default class ProductMarket extends Component {
                     user={ this.props.user } 
                     addToCart={ this.props.addCartItem }
                   />
-                  : 
+                  :
                   <div className="product-item">
                     <p id="prod-not-available">This Product is No Longer Available</p>
                   </div> 

ecom-web/src/resources/stylesheets/product-market.css

@@ -34,7 +34,20 @@
 }
 
 .no-item {
-    display: none;
+    pointer-events: none;
+    position: relative;
+    width: 330px;
+    height: 335px;
+    margin: 8px;
+    opacity: 0.4;
+}
+
+#out-of-stock {
+    position: absolute;
+    font-size: 35px;
+    top: 80px;
+    left: 48px;
+    z-index: 50;
 }
 
 .product-item {
@@ -166,7 +179,7 @@
     outline: none;
     height: 30px;
     padding: 6px;
-    width: 42px;
+    width: 47px;
     transition: all 0.5s;
 }
 .order-quantity:focus {
@@ -408,8 +421,8 @@
     color: red;
 }
 
-input::-webkit-outer-spin-button,
+/* input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}
+} */
\ No newline at end of file