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, coupon_effective_discount} = currentTransaction
  console.log(tax_price)

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

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

  const total_price =
      (item_total_price && shipping_price && tax_price)
        ? item_total_price + shipping_price + tax_price - (coupon_effective_discount || 0)
        : null

  return (
    <>
      <h2>Checkout</h2>
      <div className={styles.checkoutSection}>
        <h3>Address</h3>
        <div className={styles.horizContainer}>
          {
            order.address
              ? (
                <div>
                  <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>
                  <p style={{marginBottom: '-20px'}}><Link href="/store/checkout/address"><a>(Edit Address)</a></Link></p>
                </div>
              )
              : (
                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 > 1 ? `(${count})` : ''}:</td>
                  <td>{formatMoney(count * item.price_cents)}</td>
                </tr>
              ))}
              <tr>
                <td>Shipping:</td>
                <td>{formatMoney(shipping_price) || '-'}</td>
              </tr>
              {tax_price && (
                <tr>
                  <td>Sales tax:</td>
                <td>{formatMoney(tax_price)}</td>
                </tr>
              )}
              <tr style={{fontWeight: 'bold'}}>
                <td>Total:</td>
                <td>{formatMoney(total_price) || '-'}</td>
              </tr>
            </table>
          </div>
          <div className={styles.paymentButtons}>
            {
              total_price
                ? (
                  <>
                    <Button outline>Pay with Card</Button>
                    <Button outline>Pay with Paypal</Button>
                  </>
                ) : (
                  <div style={{pointerEvents: 'none', opacity: .4}}>
                    <Button disabled outline>Pay with Card</Button>
                    <Button disabled outline>Pay with Paypal</Button>
                  </div>
                )
            }
          </div>
        </div>
      </div>
    </>
  )
}