sos-nextjs/pages/admin/orders/index.js

import React from 'react'
import Router from 'next/router'
import ActionBar from '~/components/admin/actionBar'
import Table from '~/components/table'
import {DateTime} from 'luxon'

Orders.getInitialProps = async ({ctx}) => {
  const {data: orders} = await ctx.axios.get('/api/orders/all')
  return {orders}
}

export default function Orders({orders}){
  const unshippedOrders = orders.filter(order => !order.delivery)
  const shippedOrders = orders.filter(order => order.delivery).reverse()

  return (
    <>
      <ActionBar title="Orders" actions={[
        {label: 'Add Manual Order', url: `/admin/orders/new`}
      ]}/>
      <h4>Unsent:</h4>
      <Table
        columns={[
          {name: 'Purchased', extractor: getPurchaseTime},
          {name: 'Items', extractor: getNumberItems},
          {name: 'Price', extractor: getItemPrice},
          {name: 'Shipping', extractor: getShippingEstimate},
          {name: 'Amount Paid', extractor: getAmountPaid},
          {name: '', extractor: row =>
            <button className="buttonLink" onClick={() => Router.push(`/admin/orders/${row.id}`)}>Details</button>
          }
        ]}
        rows={unshippedOrders.map(order => ({id: order.uuid, ...order}))}
      />

      <h4>Sent:</h4>
      <Table
        columns={[
          {name: 'Purchased', extractor: getPurchaseTime},
          {name: 'Items', extractor: getNumberItems},
          {name: 'Price', extractor: getItemPrice},
          {name: 'Shipping', extractor: getActualShipping},
          {name: 'Amount Paid', extractor: getAmountPaid},
          {name: '', extractor: row =>
            <button className="buttonLink" onClick={() => Router.push(`/admin/orders/${row.id}`)}>Details</button>
          }
        ]}
        rows={shippedOrders.map(order => ({id: order.uuid, ...order}))}
      />
    </>
  )
}

function getPurchaseTime(order){
  const mostRecentTransaction = order.transactions.sort(sortTransactions)[0]
  const time = parsePaymentTime(mostRecentTransaction)

  return time.setZone('local').toFormat('LLLL dd, h:mm a')
}

function getNumberItems(order){
  return order.transactions.map(transaction =>
    transaction.cart.items.map(item => item.count)
  ).flat().reduce((a,b)=>(a+b))
}

function getItemPrice(order){
  return formatMoney(order.transactions.map(transaction => transaction.item_total_price)
    .reduce((a,b)=>(a+b)))
}

function getShippingEstimate(order){
  return formatMoney(order.transactions.map(transaction => transaction.shipping_price)
    .reduce((a,b)=>(a+b)))
}

function getActualShipping(order) {
  if(order.delivery.price_cents)
    return formatMoney(order.delivery.price_cents)
  return 'N/A'
}

function getAmountPaid(order){
  return formatMoney(order.transactions.map(({payments}) => payments
      .filter(payment => payment.type !== 'admin_granted')
      .map(payment => payment.value_cents))
    .flat()
    .reduce((a,b)=>(a+b), 0))
}

function parsePaymentTime({payments}){
  for(const payment of payments) {
    if(typeof payment.time === 'string')
      payment.time = DateTime.fromISO(payment.time)
  }

  payments.sort((a,b) => b.time.diff(a.time))
  return payments[0].time
}

function sortTransactions(a,b){
  const timeA = parsePaymentTime(a)
  const timeB = parsePaymentTime(b)

  return timeB.diff(timeA).as('seconds')
}

const formatMoney = money => {
  if (money === undefined || money === null) return null;

  return '$' + (money / 100).toFixed(2)
}