[AFP-47 Shaphen Pangburn]: Fix console errors and add styling to quantity input

ecom-web/src/components/checkout/PaymentMethod.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function PaymentMethod() {
     return (

ecom-web/src/components/checkout/ReviewOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ReviewOrder() {
     return (

ecom-web/src/components/checkout/ShippingAddress.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function ShippingAddress() {
     return (

ecom-web/src/components/checkout/SubmitOrder.js

-import React, {useState, useEffect} from 'react'
+// import React, {useState, useEffect} from 'react'
 
 export default function SubmitOrder() {
     return (

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

-import React, {useState, useEffect} from 'react'
-import ShippingAddress from './ShippingAddress.js'
-import PaymentMethod from './PaymentMethod.js'
-import ReviewOrder from './ReviewOrder.js'
-import SubmitOrder from './SubmitOrder.js'
+// import React, {useState, useEffect} from 'react'
+// import ShippingAddress from './ShippingAddress.js'
+// import PaymentMethod from './PaymentMethod.js'
+// import ReviewOrder from './ReviewOrder.js'
+// import SubmitOrder from './SubmitOrder.js'
 
 
 export default function checkout() {

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

 import React, { Component } from 'react'
+import '../../resources/stylesheets/product-market.css';
 
 export default class ProductItem extends Component {
     constructor(props) {
@@ -14,7 +15,7 @@ export default class ProductItem extends Component {
         return (
             <div className="product-item">
                 <div id="more-details-img-box">
-                    <img id="prod-img" src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } />
+                    <img id="prod-img" alt="" src={ this.props.item.productImageUrl ? this.props.item.productImageUrl : "-no photo-" } />
                     <p id="more-details-text">More Details</p>
                 </div>
                 <p id="prod-name">{ this.props.item.productName }</p>
@@ -37,7 +38,7 @@ export default class ProductItem extends Component {
                     <input id="order-quantity" type="number" placeholder="Qty" />
                     <span id="add-to-cart-button">Add to Cart</span>
                 </div>
-                </div>
+            </div>
         )
     }
 }

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

@@ -3,8 +3,8 @@ import ProductMarket from './product-market';
 import { fetchProducts, fetchPromotions } from '../../actions/product_actions';
 
 const mSTP = state => ({
-    products: state.market.products,
-    promotions: state.market.promotions,
+  products: state.market.products,
+  promotions: state.market.promotions,
 });
 
 const mDTP = dispatch => ({

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

+import React, { Component } from 'react'
 import ProductItem from './product-item'
 import '../../resources/stylesheets/product-market.css';
 import '../../resources/stylesheets/reset.css';
 
-import React, { Component } from 'react'
 
 export default class ProductMarket extends Component {
   constructor(props) {
@@ -34,12 +34,13 @@ export default class ProductMarket extends Component {
           {this.props.products.map(prod => {
             return (
               <div className="product-item-container" key={ prod.sku }>
-                { prod.productName ?
+                { prod.productName ? 
                   <ProductItem item={ prod }/>
                   : 
                   <div className="product-item">
                     <p id="prod-not-available">This Product is No Longer Available</p>
-                  </div> }
+                  </div> 
+                }
               </div>
             )
           })}

ecom-web/src/components/shopping-cart/CartItem.js

@@ -14,7 +14,7 @@ export default function CartItem(props) {
 
             {/* Left image div */}
             <div id="productImageContainer">
-                <img className="productImage" src={props.productInfo.productImageUrl} />
+                <img className="productImage" alt="" src={props.productInfo.productImageUrl} />
             </div>
 
             {/* Name and Product details */}

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

@@ -146,6 +146,15 @@
     padding: 6px;
 }
 
+#order-quantity {
+    border: 1px dotted rgba(0,0,0,0.3);
+    outline: none;
+    transition: all 0.5s;
+}
+#order-quantity:focus {
+    border: 1px solid black;
+}
+
 .add-cart-and-quantity {
     display: flex;
 }