Sick Fits - Order {order.id}

import { Component } from 'react'; 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 = { id: PropTypes.string.isRequired, }; render() { return ( {({ data: { order }, error, loading }) => { if (loading) return

Loading...

; if (!order || error) return

No Order Found!

; return ( Sick Fits - Order {order.id}

Order Id: {order.id}

Charge {order.charge}

Date {format(order.createdAt, 'MMMM D, YYYY h:mm A')}

Order Total {formatMoney(order.total)}

Item Count {order.items.length}

{order.items.map(item => (

{item.title}

{item.title}

Qty: {item.quantity}

Each: {formatMoney(item.price)}

Subtotal: {formatMoney(item.price * item.quantity)}

SubTotal: {item.description}

{item.description}

))}

); }} ); } } export default Order;