|
|
|
|
import Head from 'next/head'
|
|
|
|
|
import {DateTime} from 'luxon'
|
|
|
|
|
import Link from 'next/link'
|
|
|
|
|
|
|
|
|
|
import styles from './style.module.css'
|
|
|
|
|
|
|
|
|
|
CheckoutComplete.getInitialProps = async function({ctx: {query: {session_id}, axios}}){
|
|
|
|
|
const {data: orders} = await axios.get('/api/orders')
|
|
|
|
|
|
|
|
|
|
const mostRecentOrder = orders.sort(sortOrders)[0]
|
|
|
|
|
|
|
|
|
|
return {order: mostRecentOrder}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function CheckoutComplete({order}){
|
|
|
|
|
const items = order.transactions.map(transaction => transaction.cart.items).flat()
|
|
|
|
|
const latestTransaction = order.transactions.sort(sortTransactions)[0]
|
|
|
|
|
|
|
|
|
|
let email = null
|
|
|
|
|
|
|
|
|
|
const stripePayment = latestTransaction.payments.find(p => p.stripe !== null)
|
|
|
|
|
if(stripePayment)
|
|
|
|
|
email = stripePayment.recipient_email
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Order Complete | Society of Socks</title>
|
|
|
|
|
</Head>
|
|
|
|
|
<h2>Order Complete</h2>
|
|
|
|
|
<div className={styles.horizContainer}>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>The following items:</h3>
|
|
|
|
|
<table style={{margin: '0 auto'}}>
|
|
|
|
|
<tbody>
|
|
|
|
|
{items.map(({uuid, count, item}) => (
|
|
|
|
|
<tr key={uuid}>
|
|
|
|
|
<td>{count}x</td>
|
|
|
|
|
<td>{item.name}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h3>Will be shipped to:</h3>
|
|
|
|
|
<p style={{margin: 0}}>{order.address.name}</p>
|
|
|
|
|
<p style={{margin: 0}}>{order.address.street1}</p>
|
|
|
|
|
<p style={{margin: 0}}>{order.address.street2}</p>
|
|
|
|
|
<p style={{margin: 0}}>{order.address.city}, {order.address.state}, {order.address.zip}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{
|
|
|
|
|
email
|
|
|
|
|
? (
|
|
|
|
|
<>
|
|
|
|
|
<p>
|
|
|
|
|
Orders typically are shipped within 3-5 business days of purchase. You
|
|
|
|
|
will receive an email with a tracking number when your order ships.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Your tracking number will be sent to: <strong>
|
|
|
|
|
{email}
|
|
|
|
|
</strong>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
If you do not receive an email within 1 week,
|
|
|
|
|
please <Link href="/contact"><a>contact us</a></Link>. In any
|
|
|
|
|
correspondence please be sure to include your order number
|
|
|
|
|
(#{order.number}).
|
|
|
|
|
</p>
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
: (
|
|
|
|
|
<p>
|
|
|
|
|
Orders typically are shipped within 3-5 business days of purchase.
|
|
|
|
|
</p>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
</>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function parsePaymentTime({payments}){
|
|
|
|
|
if(payments.length < 1) return null;
|
|
|
|
|
|
|
|
|
|
let lastPaymentTime = DateTime.fromISO(payments[0].time)
|
|
|
|
|
|
|
|
|
|
for(const payment of payments) {
|
|
|
|
|
const current = DateTime.fromISO(payment.time)
|
|
|
|
|
if(current.diff(lastPaymentTime).as('seconds') > 0)
|
|
|
|
|
lastPaymentTime = current;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return lastPaymentTime
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sortTransactions(a,b){
|
|
|
|
|
const timeA = parsePaymentTime(a)
|
|
|
|
|
const timeB = parsePaymentTime(b)
|
|
|
|
|
|
|
|
|
|
return timeB.diff(timeA).as('seconds')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function sortOrders(a,b){
|
|
|
|
|
const timePaidA = parsePaymentTime(a.transactions.sort(sortTransactions)[0])
|
|
|
|
|
const timePaidB = parsePaymentTime(b.transactions.sort(sortTransactions)[0])
|
|
|
|
|
|
|
|
|
|
return timePaidB.diff(timePaidA).as('seconds')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function formatMoney(money){
|
|
|
|
|
if (money === undefined || money === null) return null;
|
|
|
|
|
|
|
|
|
|
return '$' + (money / 100).toFixed(2)
|
|
|
|
|
}
|
