diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-03-28 15:22:34 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-03-28 15:22:34 -0400 |
| commit | 65c524251d49ade9d44a62337f3c1c1fed6eedd0 (patch) | |
| tree | d504ba9cea8d89bbde4b2e809fddb048bd660548 /frontend/components/Order.js | |
| parent | a1fd7eb33bb08610aaf381a64b7f963cd98bfdaa (diff) | |
Permissions
Diffstat (limited to 'frontend/components/Order.js')
| -rw-r--r-- | frontend/components/Order.js | 60 |
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> |