1 files changed, 54 insertions, 6 deletions
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index a715483..603aae5 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -3,8 +3,46 @@ import { Query } from 'react-apollo';
 import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 import { SINGLE_ORDER_QUERY } from '../queries';
 import formatMoney from '../lib/formatMoney';
+import Dump from './Dump';
+
+const OrderStyles = styled.div`
+  max-width: 1000px;
+  margin: 0 auto;
+  border: 1px solid ${props => props.theme.offWhite};
+  box-shadow: ${props => props.theme.bs};
+  padding: 2rem;
+  border-top: 10px solid red;
+  & > p {
+    display: grid;
+    grid-template-columns: 1fr 5fr;
+    margin: 0;
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    span {
+      padding: 1rem;
+      &:first-child {
+        font-weight: 900;
+        text-align: right;
+      }
+    }
+  }
+  .order-item {
+    border-bottom: 1px solid ${props => props.theme.offWhite};
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    align-items: center;
+    grid-gap: 2rem;
+    margin: 2rem 0;
+    padding-bottom: 2rem;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+`;
 
 class Order extends Component {
   static propTypes = {
@@ -18,10 +56,11 @@ class Order extends Component {
           if (loading) return <p>Loading...</p>;
           if (!order || error) return <p>No Order Found!</p>;
           return (
-            <div>
+            <OrderStyles>
               <Head>
                 <title>Sick Fits - Order {order.id}</title>
               </Head>
+              <Dump order={order} />
               <p>
                 <span>Order Id:</span>
                 <span>{order.id}</span>
@@ -38,17 +77,26 @@ class Order extends Component {
                 <span>Order Total</span>
                 <span>{formatMoney(order.total)}</span>
               </p>
-              <p>You Bought {order.items.length} items in this order</p>
+              <p>
+                <span>Item Count</span>
+                <span>{order.items.length}</span>
+              </p>
               <div className="items">
                 {order.items.map(item => (
                   <div className="order-item" key={item.id}>
-                    <h2>
-                      {item.quantity} OF {item.title}
-                    </h2>
+                    <img src={item.image} alt={item.title} />
+                    <div className="item-details">
+                      <h2> {item.title} </h2>
+                      <p>Qty: {item.quantity}</p>
+                      <p>Each: {formatMoney(item.price)}</p>
+                      <p>Subtotal: {formatMoney(item.price * item.quantity)}</p>
+                      <p>SubTotal: {item.description}</p>
+                      <p>{item.description}</p>
+                    </div>
                   </div>
                 ))}
               </div>
-            </div>
+            </OrderStyles>
           );
         }}
       </Query>