Order and OrderItem component. Order history logic and basic display

ecom-web/src/components/order-history/Order.jsx

 import React from 'react';
 import { totalPrice } from '../../util/order_history_util';
+import OrderItem from './OrderItem';
+
 
 const Order = (props) => {
 
@@ -10,21 +12,29 @@ const Order = (props) => {
     const orderPlaced = new Date(order.orderCreatedAt);
 
     return (
-        <div>
-            <p>Order ID: {order.id}</p>
-            <p>Order Status: {order.orderStatus}</p>
-            <p>Order Placed: {orderPlaced.getUTCMonth()}
+        <div className="order">
+            <p><span className="order-field">Order ID:</span> {order.id}</p>
+            <p><span className="order-field">Order Status:</span> {order.orderStatus}</p>
+            <p><span className="order-field">Order Placed:</span> {orderPlaced.getUTCMonth()}
                 /{orderPlaced.getUTCDay()}
                 /{orderPlaced.getUTCFullYear()}
             </p>
             <p>
-                Delivery Address: {`
+            <span className="order-field">Delivery Address:</span> {`
                 ${customerAddress.street},
                 ${customerAddress.city},
                 ${customerAddress.state} ${customerAddress.zip}
                 `}
             </p>
-            <p>Total Price: ${orderTotalPrice}</p>
+            <p><span className="order-field">Items Ordered:</span></p>
+            <div className="products-ordered">
+                {orderItems.map((orderItem, ind) => {
+                    return (
+                        <OrderItem key={ind} orderItem={orderItem} />
+                    )
+                })}
+            </div>
+            <p><span className="order-field">Total Price:</span> ${orderTotalPrice}</p>
 
         </div>
     )

ecom-web/src/components/order-history/OrderItem.jsx

+import React from 'react';
+
+
+const OrderItem = (props) => {
+    const {orderItem} = props;
+    const {itemName, itemPrice, itemQuantity} = orderItem;
+
+    const subTotal = itemQuantity * itemPrice;
+
+
+    return (
+        <div className="order-item">
+            <p>Item: {itemName}</p>
+            <p>Quantity: {itemQuantity}</p>
+            <p>Price Per Unit: ${itemPrice.toFixed(2)}</p>
+            <p>Subtotal: ${subTotal.toFixed(2)}</p>
+        </div>
+    )
+}
+
+export default OrderItem;
\ No newline at end of file

ecom-web/src/components/order-history/order-history.css

@@ -2,3 +2,24 @@ main {
     margin: 0 auto;
     max-width: 1080px;
 }
+
+.order {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    padding: 20px;
+}
+
+.products-ordered {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.order-item {
+    border: 1px solid gray;
+    padding: 5px;
+}
+
+.order-field {
+    font-weight: 600;
+}

ecom-web/src/util/order_history_util.js

 export const totalPrice = (items) => {
     return items.reduce((acc,item) => {
-        return acc + item.itemPrice;
+        return acc + (item.itemPrice * item.itemQuantity);
     }, 0).toFixed(2);
 }
\ No newline at end of file