sos-nextjs/pages/store/checkout/complete.js

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.stripe.receipt_email

  return (
    <>
      <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)
}