order confirmation page uses order component to display order details

ecom-web/src/actions/checkout_actions.js

@@ -4,7 +4,7 @@ import { sendOrderPost } from './../util/order-api';
 
 export const SEND_USER_ORDER = "SEND_USER_ORDER"
 
-const sendUserOrder = (orderConfirmationResponse) => ({
+export const sendUserOrder = (orderConfirmationResponse) => ({
     type: SEND_USER_ORDER,
     payload: orderConfirmationResponse
 })

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

+main {
+    margin: 0 auto;
+    max-width: 1080px;
+}
+
+#order-confirmation-header {
+    font-size: 40px;
+    text-align: center;
+    padding: 10px;
+}
\ No newline at end of file

ecom-web/src/components/order-confirmation/order-confirmation.jsx

+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Redirect } from 'react-router';
+
+import {sendUserOrder} from '../../actions/checkout_actions'
+import Order from '../order-history/Order';
+import './order-confirmation.css'
+
+const OrderConfirmation = () => {
+
+    const dispatch = useDispatch();
+    const {orderResponse} = useSelector(state => state.orderStatus);
+
+    useEffect(()=>{
+        return () => dispatch(sendUserOrder({}));
+    },[])
+
+    const orderPlaced = new Date(orderResponse.orderCreatedAt);
+
+
+
+    if (!orderResponse.id) return (<Redirect to="/product-market" />) //once we have flow from place order page, this can be uncommented
+    return (
+        <main>
+            <h1 id="order-confirmation-header">Thanks for your order!</h1>
+            <Order order={orderResponse} />
+
+        </main>
+        
+    );
+}
+
+export default OrderConfirmation;
\ No newline at end of file

ecom-web/src/components/root.js

@@ -7,6 +7,7 @@ import ShoppingCartContainer from './shopping-cart/shopping-cart-container';
 import CheckoutContianer from './checkout/checkout-container';
 import Header from './Header/header-container'
 import OrderHistory from './order-history/order-history';
+import OrderConfirmation from './order-confirmation/order-confirmation';
 
 const Root = ({ store }) => (
   <Provider store={ store }>
@@ -24,6 +25,7 @@ const Root = ({ store }) => (
         <Route path="/cart" component={ ShoppingCartContainer } />
         <Route path="/checkout" component={ CheckoutContianer } />
         <Route path="/orders" component={ OrderHistory } />
+        <Route path="/order-confirmation" component= {OrderConfirmation} />
       </Switch>
     </BrowserRouter>
   </Provider>

ecom-web/src/reducers/order_reducer.js

@@ -3,7 +3,31 @@ import { LOGOUT_USER } from '../actions/session_actions';
 import {SEND_USER_ORDER} from './../actions/checkout_actions'
 
 const initialState = {
-    orderResponse: {},
+    //this will be empty object once we have checkout flow, rn just for conf page building / logic
+    orderResponse: {
+        "id": "609c0005dd97fc4c9e0f8e63",
+        "customerId": "104109244866071991182",
+        "customerEmailAddress": "ccottier@nisum.com",
+        "orderTrackingCode": "N/A",
+        "orderStatus": "RECEIVED",
+        "orderCreatedAt": 1.620836357923E12,
+        "orderUpdatedAt": 1.620836357923E12,
+        "orderItems": [
+            {
+                "itemName": "Green T-Shirt",
+                "itemId": "AFP-1",
+                "itemQuantity": 500,
+                "itemPrice": 9.9,
+                "itemSku": "AFP-1"
+            }
+        ],
+        "customerAddress": {
+            "street": "Grand",
+            "city": "chicago",
+            "state": "IL",
+            "zip": "90210"
+        }
+    },
     orderHistory: []
 }