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

import Link from 'next/link'
import Router from 'next/router'
import styles from './style.module.css'
import {Icon} from '@rmwc/icon'
import {Input, Button} from '~/components/form'
import useUser from '~/hooks/useUser'

// TODO: Load previous addresses
CheckoutSummary.getInitialProps = async function({ctx: {axios}}){
  const {data: order} = await axios.get(`/api/orders/current`)
  return {order}
}

export default function CheckoutSummary({order}){
  const user = useUser();

  const currentTransaction = order
    .transactions.find(transaction => (
      transaction.payment_state === 'started'
    ))

  const {item_total_price, shipping_price, tax_price} = currentTransaction

  const shippingPrice = shipping_price ? '$' + (shipping_price / 100) : null
  const total_price = 
      (item_total_price && shipping_price && tax_price)
        ? '$' + (item_total_price + shippingPrice + tax_price - coupon_effective_discount)
        : null

  return (
    <>
      <h2>Checkout</h2>
      <div className={styles.checkoutSection}>
        <h3>Address</h3>
        <div className={styles.horizContainer}>
          {
            user
              ?(
                <div style={{textAlign: 'center'}}>
                  <p>
                    TODO: Load previous addresses
                  </p>
                </div>
              ):(
                <div style={{textAlign: 'center'}}>
                  <p>
                    <Link href="/login"><a>Log in</a></Link> to use your<br/>saved addresses
                  </p>
                </div>
              )
          }
          <span className={styles.horizDivider}>
            OR
          </span>
          <div>
            <Button style={{width: '100px'}} onClick={()=>Router.push('/store/checkout/address')}>Input Address</Button>
          </div>
        </div>
      </div>
      <div className={styles.checkoutSection}>
        <h3>Coupon (optional)</h3>
        <div className={styles.horizContainer} style={{maxWidth:'400px', margin: '0 auto'}}>
          <Input label="" name="coupon" />
          <div style={{maxWidth: '120px', marginLeft: '8px'}}>
            <Button outline>Save Coupon</Button>
          </div>
        </div>
      </div>
      <div className={styles.checkoutSection}>
        <h3>Total</h3>
        <div className={styles.horizContainer}>
          <div>
            <table>
              {currentTransaction.cart.items.map(({uuid, count, item}) => (
                <tr key={uuid}>
                  <td>{item.name} ({count}):</td>
                  <td>${count * item.price_cents / 100}</td>
                </tr>
              ))}
              <tr>
                <td>Shipping:</td>
                <td>{shippingPrice || '-'}</td>
              </tr>
              {tax_price && (
                <tr>
                  <td>Sales tax:</td>
                <td>${tax_price / 100}</td>
                </tr>
              )}
              <tr>
                <td>Total:</td>
                <td>{total_price || '-'}</td>
              </tr>
            </table>
          </div>
          <div className={styles.paymentButtons}>
            {total_price || true && (
              <>
                <Button outline>Pay with Card</Button>
                <Button outline>Pay with Paypal</Button>
              </>
            )}
          </div>
        </div>
      </div>
    </>
  )
}