Merge branch 'show-out-of-stock-for-products-with-no-available-stock' into 'master'

Show out of stock for products with no available stock

See merge request !17

ecom-web/src/components/Header/header.css

@@ -10,6 +10,7 @@
 
 .header-nav {
     padding-left: 20px;
+    box-shadow: 0px 1px 10px;
 }
 
 /* #nav-home-link {

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-details.jsx

@@ -85,15 +85,18 @@ export default class ProductDetails extends Component {
                         <form className="details-add-cart-and-quantity" onSubmit={ e => this.handleSubmit(e, this.props.product) }>
                             <input 
                                 type="number" 
-                                className="prod-details-quantity" 
+                                className="prod-details-quantity"
+                                id={ this.props.user?.currentUser ? "" : "disabled" }
                                 disabled={ !this.props.user?.currentUser } 
                                 onChange={this.handleChange("orderItemQuantity")}
                                 placeholder="Quantity" 
                                 value={ this.state.orderItemQuantity }
                             />
-                            <button className="prod-details-add-to-cart" disabled={ !this.props.user?.currentUser }>
-                                Add to Cart
-                            </button>
+                            <button 
+                                className="prod-details-add-to-cart" 
+                                id={ this.props.user?.currentUser ? "" : "disabled" }
+                                disabled={ !this.props.user?.currentUser
+                            }>Add to Cart</button>
                             { this.props.user?.currentUser ? "" :<p id="details-please-log-in-notice">Log in to Add to Cart</p>}
                         </form>
                         </div>

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

@@ -83,33 +83,45 @@ export default class ProductItem extends Component {
                     }
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
-                <div id="prod-price">
-                    { this.props.item.promo ? 
-                    <div id="promo-show">
-                        <p id="promo-show-text-original">
-                        ${ this.props.item.price }
-                        </p>
-                        <p id="promo-show-text">
-                        ${ discount }
-                        </p>
-                    </div> : "$" + this.props.item.price }
+                <div className="product-price-promo-quantity-add-cart">
+                    <div className="price-and-promo">
+                        <div id="prod-price">
+                            { this.props.item.promo ? 
+                            <div id="promo-show">
+                                <p id="promo-show-text-original">
+                                ${ this.props.item.price }
+                                </p>
+                                <p id="promo-show-text">
+                                ${ discount }
+                                </p>
+                            </div> : "$" + this.props.item.price }
+                        </div>
+                        { this.props.item.promo ?
+                        <p id="prod-promotion">
+                            { "Save " + this.props.item.promo + "%!"}
+                        </p> : ""}
+                    </div>
+                    <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
+                        { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to <br /> Add to Cart</p>}
+                        <p id="quantity-text">Qty</p>
+                        <input 
+                            className="order-quantity"
+                            id={ this.props.user?.currentUser ? "" : "disabled" }
+                            type="number"
+                            placeholder="Qty"
+                            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"
+                            id={ this.props.user?.currentUser ? "" : "disabled" }
+                        >Add to Cart</button>
+                    </form>
                 </div>
-                { this.props.item.promo ?
-                <p id="prod-promotion">
-                    { "Save " + this.props.item.promo + "% on this item!"}
-                </p> : ""}
-                <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
-                    { this.props.user?.currentUser ? "" :<p id="please-log-in-notice">Log in to Add to Cart</p>}
-                    <input 
-                        className="order-quantity" 
-                        type="number" 
-                        placeholder="Qty"
-                        disabled={ !this.props.user?.currentUser }
-                        onChange={ this.handleChange("orderItemQuantity") }
-                        value = { this.state.orderItemQuantity }
-                    />
-                    <button disabled={ !this.props.user?.currentUser } className="add-to-cart-button">Add to Cart</button>
-                </form>
 
                 <Modal
                     id="product-details-modal"

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

@@ -3,6 +3,7 @@
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
+    background-color: rgb(231, 228, 228);
 }
 
 #product-market-title {
@@ -34,7 +35,23 @@
 }
 
 .no-item {
-    display: none;
+    pointer-events: none;
+    position: relative;
+    width: 330px;
+    height: 335px;
+    margin: 8px;
+    opacity: 0.6;
+}
+
+#out-of-stock {
+    background: white;
+    position: absolute;
+    width: 100%;
+    text-align: center;
+    font-size: 35px;
+    top: 80px;
+    opacity: 0.5;
+    z-index: 50;
 }
 
 .product-item {
@@ -42,14 +59,19 @@
     height: 100%;
     display: flex;
     flex-wrap: wrap;
+    box-shadow: 3px 4px 6px;
+    border-radius: 8px;
+    background-color: white;
     justify-content: center;
     align-items: center;
-    border: 1px solid gray;
+    border: 1px solid lightgray;
     transition: all 0.5s;
 }
 
 .product-item:hover {
     transform: scale(1.03);
+    box-shadow: 5px 6px 10px;
+    border-color: gray;
 }
 
 #prod-img {
@@ -109,10 +131,20 @@
 
 #prod-price {
     font-size: 18px;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 #prod-promotion {
+    font-size: 17px;
     color: red;
+    padding-bottom: 6px;
+}
+
+#quantity-text {
+    padding-top: 4px;
 }
 
 .add-to-cart-button {
@@ -139,6 +171,9 @@
 #promo-show {
     display: flex;
     justify-content: center;
+    margin-top: 5px;
+    padding-top: 2px;
+    height: 24px;
 }
 
 #promo-show-text, #promo-show-text-original {
@@ -166,7 +201,7 @@
     outline: none;
     height: 30px;
     padding: 6px;
-    width: 42px;
+    width: 47px;
     transition: all 0.5s;
 }
 .order-quantity:focus {
@@ -176,15 +211,20 @@
 .add-cart-and-quantity {
     display: flex;
     position: relative;
+    flex-wrap: wrap;
+    width: 50%;
+    justify-content: center;
 }
 
 #please-log-in-notice {
     display: none;
     position: absolute;
-    bottom: 47px;
-    left: 22px;
+    text-align: center;
+    bottom: 50px;
+    width: 80%;
     padding: 3px 10px;
     border-radius: 5px;
+    cursor: default;
     background-color: rgb(248, 76, 76);
 
     animation: fadeInUp;
@@ -408,8 +448,27 @@
     color: red;
 }
 
-input::-webkit-outer-spin-button,
+.product-price-promo-quantity-add-cart {
+    width: 100%;
+    display: flex;
+    background-color: rgba(202, 202, 202, 0.6);
+    padding-top: 9px;
+    margin-bottom: -4px;
+    border-radius: 0px 0px 7px 7px;
+}
+
+.price-and-promo {
+    width: 50%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+#disabled {
+    pointer-events: none;
+}
+
+/* input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
-}
+} */
\ No newline at end of file