sos-nextjs/pages/admin/orders/[id]/ship/tracking.js

import React, {useState} from 'react'
import Router from 'next/router'

import ActionBar from '~/components/admin/actionBar'
import {FormController, DateInput, DecimalInput, Input, Button} from '~/components/form'

EnterTracking.getInitialProps = async ({ctx: {query: {id}}}) => {
  return {uuid: id}
}

export default function EnterTracking({uuid}){
  return (
    <>
      <ActionBar title="Enter Tracking"/>

      <FormController afterSubmit={() => Router.push(`/admin/orders/${uuid}`)} url={`/api/orders/${uuid}/ship/tracking`}>
        <p>Use this to enter tracking information for packages shipped by-hand (via USPS)</p>
        <Input label="Tracking Code" validate={val => val.length > 0} type="text" name="code" hint="Please enter the USPS Tracking code" />
        <DateInput label="Ship Date" placeholder="Today" name="date" maxDate={new Date()} />
        <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
        <Button type="submit">Submit</Button>
      </FormController>
    </>
  )
}