Merge branch 'master' of https://gitlab.mynisum.com/ascend/ecommerce-maven...

Merge branch 'master' of https://gitlab.mynisum.com/ascend/ecommerce-maven into AFP45-Display-User-Cart-And-Update-Items-Within

Pulling UI changes into this branch

ecom-service/deployment.yaml

@@ -14,13 +14,18 @@ spec:
     spec:
       containers:
         - name: afp-ecom-api-container
-          image: nexus.mynisum.com/afp-ecom-api:11
+          image: nexus.mynisum.com/afp-ecom-api:13
           imagePullPolicy: Always
           ports:
             - containerPort: 8084
           env:
             - name: PORT
               value: "8080"
+            - name: MONGOCONNECTION
+              valueFrom:
+                secretKeyRef:
+                  name: mongodb-secret
+                  key: spring.data.mongodb.uri
       imagePullSecrets:
         - name: registry-creds
 

ecom-service/src/main/resources/application.properties

-spring.data.mongodb.uri=mongodb+srv://ecom:ecom@e-commerce-db-cluster.va815.mongodb.net/e-commerce-db?retryWrites=true&w=majority
 spring.data.mongodb.database=e-commerce-db
 security.enable-csrf=false
 server.port=8080

ecom-web/src/actions/cart_actions.js

@@ -19,4 +19,4 @@ export const updateUserCart = (updatedCart, userEmail) => dispatch => ApiUtil.up
     .then(cart => dispatch(receiveUserCart(cart)));
 
 export const createUserCart = newCart => dispatch => ApiUtil.createCart(newCart)
-    .then(res => res.json)
+    .then(res => res.json)
\ No newline at end of file

ecom-web/src/components/Header/header-cart-container.js

+import { connect } from 'react-redux';
+import HeaderCart from './header-cart';
+
+const mSTP = state => ({
+
+});
+
+const mDTP = dispatch => ({
+    
+});
+
+export default connect(mSTP, mDTP)(HeaderCart);
\ No newline at end of file

ecom-web/src/components/Header/header-cart.jsx

+import React, { Component } from 'react'
+import './header.css';
+
+export default class HeaderCart extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div>
+                Cart
+            </div>
+        )
+    }
+}
\ No newline at end of file

ecom-web/src/components/Header/header-container.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import Header from './header';
 
 const mSTP = state => ({
-
+    user: state.user
 });
 
 const mDTP = dispatch => ({

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

-.order-history-nav,
+/* .order-history-nav,
 .products-nav,
 #nav-bar-text,
 .cart-nav {
@@ -6,19 +6,18 @@
     padding-top: 11px;
     padding-bottom: 10px;
     color: white;
-}
+} */
 
-.nav-home {
-    color: white;
-    font-size: 20px;
-    margin-left: 10px;
+.header-nav {
+    padding-left: 20px;
+    box-shadow: 0px 1px 10px;
 }
 
-#nav-home-link {
+/* #nav-home-link {
     margin-bottom: 3px;
+} */
+
+.nav-bar-text {
+    padding-right: 20px;
 }
 
-#nav-bar-text {
-    opacity: 0.6;
-    cursor: default;
-}
\ No newline at end of file

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

 import React, { Component } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
-// import NavDropdown from 'react-bootstrap/NavDropdown'
+import NavDropdown from 'react-bootstrap/NavDropdown'
 import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
+import HeaderCart from './header-cart-container'
 
 import './header.css';
 
 export default class Header extends Component {
     constructor(props) {
-    super(props)
-    this.state = {}
+        super(props)
+        this.state = {}
     }
 
     render() {
+        let userName
+        if(!!this.props.user?.currentUser){
+            userName = this.props.user.currentUser.firstName
+        }else{
+            userName = "Guest"
+        }
+
         return (
             <div>
-                <Navbar collapseOnSelect expand="lg" bg="primary" variant="dark">
+                <Navbar className = "header-nav" collapseOnSelect expand="sm" bg="light">
+                    <Navbar.Brand>Ascend Ecommerce</Navbar.Brand>
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-                    <NavLink to="/product-market" id="nav-home-link"><span className="nav-home">Ascend Ecommerce</span></NavLink>
                     <Navbar.Collapse id="responsive-navbar-nav">
-                        <Nav >
-                            <Navbar.Text id="nav-bar-text">
-                                Hello Guest!
-                            </Navbar.Text>
+                        <Nav className="mr-auto">
+                            <Nav.Link to="/product-market" id="nav-home-link">Home</Nav.Link>
+                            <Nav.Link to="/product-market">Products</Nav.Link>
                         </Nav>
-                        <NavLink to="/product-market"><span className="products-nav">Products</span></NavLink>
-                        <NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
-                        <NavLink to="/cart"><span className="cart-nav">Cart</span></NavLink>
                         <Nav className="ms-auto">
-                            <Session />
+                            {!this.props.user?.currentUser ? 
+                                <Navbar.Text className="nav-bar-text">Hello Guest</Navbar.Text> :
+                                <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown">
+                                    <NavDropdown.Item ><NavLink to="/orders">Order History</NavLink></NavDropdown.Item>
+                                </NavDropdown>
+                            }
+                            <Session className="nav-bar-text"/>
+                            <HeaderCart className="nav-bar-text"/>
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>

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/reducers/cart_reducer.js

@@ -15,4 +15,4 @@ const cartReducer = (state = initialState, action) => {
     }
 }
 
-export default cartReducer;
+export default cartReducer;
\ No newline at end of file

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