[AFP-48 Shaphen Pangburn]: add user login notice logic to product details modal

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

@@ -5,6 +5,24 @@ export default class ProductDetails extends Component {
         super(props)
         this.state = {}
     }
+
+    handleSubmit(e, product) {
+        e.preventDefault();
+        const newCart = Object.assign({}, {
+            userId: this.props.user.currentUser.email,
+            cartItems: JSON.parse(JSON.stringify(this.props.cart)) // JSON.parse/stringify will deep-dup the object
+        })
+        const newCartItem = {
+            productRef: {
+                id: product.sku,
+                sku: product.sku,
+                upc: product.upc,
+            },
+            quantity: parseInt(this.state.orderItemQuantity)
+        }
+        newCart.cartItems.push(newCartItem);
+        this.props.addToCart(newCart, this.props.user.currentUser.email);
+    }
     
     render() {
         return (
@@ -46,16 +64,19 @@ export default class ProductDetails extends Component {
                             :
                             <p id="prod-details-original-price">Price: ${ this.props.product.price }</p>
                         }
-                        <input 
-                            type="number" 
-                            className="prod-details-quantity" 
-                            disabled={ !this.props.user?.currentUser } 
-                            placeholder="Quantity" 
-                        />
-                        <button className="prod-details-add-to-cart" disabled={ !this.props.user?.currentUser }>
-                            Add to Cart
-                        </button>
-                    </div>
+                        <form className="details-add-cart-and-quantity" onSubmit={ e => this.handleSubmit(e, this.props.product) }>
+                            <input 
+                                type="number" 
+                                className="prod-details-quantity" 
+                                disabled={ !this.props.user?.currentUser } 
+                                placeholder="Quantity" 
+                            />
+                            <button className="prod-details-add-to-cart" 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>
                 </div>
             </div>
         )

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

@@ -132,6 +132,7 @@ export default class ProductItem extends Component {
                         product={ this.props.item } 
                         discount={ discount } 
                         user={ this.props.user }
+                        addToCart={ this.props.addToCart }
                     />
                 </Modal>
             </div>

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

@@ -296,11 +296,31 @@
 }
 
 #product-details-condenser {
+    position: relative;
     height: 48%;
     width: 100%;
     margin: 148px 0px 0px 20px;
 }
 
+#details-please-log-in-notice {
+    display: none;
+    position: absolute;
+    text-align: center;
+    width: 190px;
+    bottom: 86px;
+    left: 3px;
+    padding: 3px 10px;
+    border-radius: 5px;
+    background-color: rgb(248, 76, 76);
+
+    animation: fadeInUp;
+    animation-duration: 0.5s;
+}
+
+.details-add-cart-and-quantity:hover #details-please-log-in-notice {
+    display: block;
+}
+
 #prod-details-shipping {
     height: 95px;
     display: flex;
@@ -334,6 +354,10 @@
     width: 100%;
 }
 
+.details-add-to-cart-and-quantity {
+    position: relative;
+}
+
 .prod-details-quantity {
     border: 1px dotted rgba(0,0,0,0.3);
     border-radius: 5px;