[AFP-48 Shaphen Pangburn]: Disable Add to Cart button animations and display...

[AFP-48 Shaphen Pangburn]: Disable Add to Cart button animations and display out of Stock for products with no available stock

ecom-web/src/components/checkout/checkout-container.jsx

 import { connect } from 'react-redux';
-import Checkout from './checkout';
+import Checkout from './checkout.js';
 
 const mSTP = state => ({
 
@@ -8,5 +8,4 @@ const mSTP = state => ({
 const mDTP = dispatch => ({
   
 });
-
 export default connect(mSTP, mDTP)(Checkout);
\ No newline at end of file

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

@@ -102,6 +102,7 @@ export default class ProductItem extends Component {
                     { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to Add to Cart</p>}
                     <input 
                         className="order-quantity"
+                        id={ this.props.user?.currentUser ? "" : "disabled" }
                         type="number"
                         placeholder="Qty"
                         disabled={ !this.props.user?.currentUser }
@@ -110,7 +111,11 @@ export default class ProductItem extends Component {
                         min="1"
                         max="99"
                     />
-                    <button disabled={ !this.props.user?.currentUser } className="add-to-cart-button">Add to Cart</button>
+                    <button 
+                        disabled={ !this.props.user?.currentUser } 
+                        className="add-to-cart-button"
+                        id={ this.props.user?.currentUser ? "" : "disabled" }
+                    >Add to Cart</button>
                 </form>
 
                 <Modal

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

@@ -38,8 +38,8 @@ export default class ProductMarket extends Component {
         <div className="products-container">
           {this.props.products.map(prod => {
             return (
-              <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> }
+              <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 } 

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

@@ -39,14 +39,17 @@
     width: 330px;
     height: 335px;
     margin: 8px;
-    opacity: 0.4;
+    opacity: 0.6;
 }
 
 #out-of-stock {
+    background: white;
     position: absolute;
+    width: 100%;
+    text-align: center;
     font-size: 35px;
     top: 80px;
-    left: 48px;
+    opacity: 0.5;
     z-index: 50;
 }
 
@@ -421,6 +424,10 @@
     color: red;
 }
 
+#disabled {
+    pointer-events: none;
+}
+
 /* input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;