[AFP-47 Shaphen Pangburn]: Show discount details on produc details modal

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

@@ -29,6 +29,16 @@ export default class ProductDetails extends Component {
                             <p>Free Delivery: <span>Everywhere!</span></p>
                             <p>Get it by: <span>Never!</span></p>
                         </div>
+                        {
+                            this.props.product.promo ? 
+                            <div>
+                                <p id="prod-details-promo-percentage">This is currently { this.props.product.promo }% off!</p>
+                                <p id="prod-details-promo-discount-number">Buy now for ${ this.props.discount }</p>
+                                <p id="prod-details-promo-original-price">Normally: ${ this.props.product.price }</p>
+                            </div>
+                            :
+                            ""
+                        }
                         <input type="number" id="prod-details-quantity" placeholder="Quantity" />
                         <button id="prod-details-add-to-cart">
                             Add to Cart

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

@@ -22,6 +22,7 @@ export default class ProductItem extends Component {
     }
     
     render() {
+        let discount = this.calculateDiscount(this.props.item.price, this.props.item.promo)
         return (
             <div className="product-item">
                 <div id="more-details-img-box">
@@ -41,7 +42,7 @@ export default class ProductItem extends Component {
                         ${ this.props.item.price }
                         </p>
                         <p id="promo-show-text">
-                        ${ this.calculateDiscount(this.props.item.price, this.props.item.promo) }
+                        ${ discount }
                         </p>
                     </div> : "$" + this.props.item.price }
                 </div>
@@ -79,7 +80,7 @@ export default class ProductItem extends Component {
                         }
                       }}
                 >
-                    <ProductDetails product={ this.props.item } />
+                    <ProductDetails product={ this.props.item } discount={ discount } />
                 </Modal>
             </div>
         )

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

@@ -304,6 +304,20 @@
     background-color: rgb(207, 205, 205);
 }
 
+#prod-details-promo-percentage,
+#prod-details-promo-discount-number {
+    font-size: 16px;
+    text-align: center;
+    color: green;
+}
+
+#prod-details-promo-original-price {
+    text-align: center;
+    font-size: 14px;
+    opacity: 0.7;
+    margin-bottom: 10px;
+}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;