[AFP-48 Shaphen Pangburn]: Add user notice message to log in when hovering add to cart or quantity

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

@@ -46,8 +46,13 @@ 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" placeholder="Quantity" />
-                        <button className="prod-details-add-to-cart">
+                        <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>

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

@@ -7,7 +7,7 @@ export default class ProductItem extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            orderItemQuantity: 0,
+            orderItemQuantity: 1,
             showDetailsModal: false
         }
         this.handleSubmit = this.handleSubmit.bind(this);
@@ -91,11 +91,14 @@ export default class ProductItem extends Component {
                     { "Save " + this.props.item.promo + "% on this item!"}
                 </p> : ""}
                 <form onSubmit={ e => this.handleSubmit(e, this.props.item) } className="add-cart-and-quantity">
+                    <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>
@@ -125,7 +128,11 @@ export default class ProductItem extends Component {
                         }
                       }}
                 >
-                    <ProductDetails product={ this.props.item } discount={ discount } />
+                    <ProductDetails 
+                        product={ this.props.item } 
+                        discount={ discount } 
+                        user={ this.props.user }
+                    />
                 </Modal>
             </div>
         )

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

@@ -175,6 +175,24 @@
 
 .add-cart-and-quantity {
     display: flex;
+    position: relative;
+}
+
+#please-log-in-notice {
+    display: none;
+    position: absolute;
+    bottom: 47px;
+    left: 22px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background-color: rgb(248, 76, 76);
+
+    animation: fadeInUp;
+    animation-duration: 0.5s;
+}
+
+.add-cart-and-quantity:hover #please-log-in-notice {
+    display: block;
 }
 
 #product-details-modal {