Coupons admin pages

pages/admin/coupons/index.js

@@ -0,0 +1,57 @@
+import React, {useState} from 'react'
+import router from 'next/router'
+import {DateTime} from 'luxon'
+import {Icon} from '@rmwc/icon'
+
+import {Button} from '@rmwc/button'
+import ActionBar from '~/components/admin/actionBar'
+import Table from '~/components/table'
+
+Coupons.getInitialProps = async ({ctx}) => {
+  const {data: coupons} = await ctx.axios.get('/api/coupons')
+  return {coupons}
+}
+
+export default function Coupons({coupons}) {
+  return (
+    <>
+      <ActionBar title="Coupons">
+        <Button outlined onClick={()=>router.push('/admin/coupons/new')}>Create New Coupon</Button>
+      </ActionBar>
+      <Table
+        columns={[
+          {name: 'Code', extractor: coupon => coupon.code},
+          {name: 'Valid Until', extractor: coupon => DateTime.fromISO(coupon.valid_until).setZone('local').toFormat('LLL dd, yyyy')},
+          {name: 'Free Shipping', extractor: coupon => coupon.free_shipping ? <Icon icon="check"/> : null},
+          {name: 'Number of Allowed Uses', extractor: coupon => coupon.number_allowed_uses},
+          {name: 'Discount Type', extractor: coupon => getDiscount(coupon).type},
+          {name: 'Discount Value', extractor: coupon => getDiscount(coupon).value}
+        ]}
+        // Map in an id property so the table can use array.map
+        rows={coupons.map(coupon => ({id: coupon.uuid, ...coupon}))}
+      />
+    </>
+  )
+}
+
+function getDiscount(coupon) {
+  if(coupon.flat_discount_cents)
+    return {type: 'Flat discount', value: formatMoney(parseInt(coupon.flat_discount_cents, 10))}
+
+  if(coupon.percent_discount)
+    return {type: 'Percent discount', value: coupon.percent_discount + '%'}
+
+  if(coupon.per_sock_discount_cents)
+    return {type: 'Per sock discount', value: formatMoney(parseInt(coupon.per_sock_discount_cents, 10))}
+
+  if(coupon.number_of_socks_free)
+    return {type: 'Free socks', value: coupon.number_of_socks_free + ` pair${coupon.number_of_socks_free !== 1 ? 's' : ''}`}
+
+  return {type: 'No Discount', value: null}
+}
+
+const formatMoney = money => {
+  if (money === undefined || money === null) return null;
+
+  return '$' + (money / 100).toFixed(2)
+}

pages/admin/coupons/new.js

@@ -0,0 +1,38 @@
+import {useState} from 'react'
+import router from 'next/router'
+
+import {DateTime} from 'luxon'
+import ActionBar from '~/components/admin/actionBar'
+import {FormController, Dropdown, Input, IntegerInput, DecimalInput, DateInput, Button, Checkbox} from '~/components/form'
+
+export default function NewCoupon() {
+  const afterCreate = (coupon) => {
+    router.push(`/admin/coupons`)
+  }
+
+  const [couponType, setType] = useState('flat')
+
+  return (
+    <>
+      <ActionBar title="Create New Coupon"/>
+      <FormController url="/api/coupons" afterSubmit={afterCreate}>
+        <Input label="Code" name="code"/>
+        <p style={{marginTop: '-14px', opacity: .6}}>(Leave blank for random code)</p>
+        <DateInput label="Valid Through" name="valid_until" validate={date => !!date} minDate={new Date()} transform={date => DateTime.fromISO(date).plus({hours: 24}).toISO()}/>
+        <Checkbox label="Free Shipping" name="free_shipping" hint="Yes" />
+        <IntegerInput label="Number of Allowed Uses" initialValue={1} name="number_allowed_uses" />
+        <Dropdown isValid={true} label="Discount Type" initialValue="flat_discount" onChange={ev => setType(ev.target.value)}>
+          <option value="flat">Dollars Off Total</option>
+          <option value="percent">Percent of Total</option>
+          <option value="per_sock">Dollars Off Per Sock</option>
+          <option value="num_free">Free Socks</option>
+        </Dropdown>
+        <DecimalInput hidden={couponType !== 'flat'} label="Total Discount" name="flat_discount_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
+        <IntegerInput hidden={couponType !== 'percent'} label="Percentage" maximum={100} name="percent_discount" initialValue={10} />
+        <DecimalInput hidden={couponType !== 'per_sock'} label="Discount Per Sock" name="per_sock_discount" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
+        <IntegerInput hidden={couponType !== 'num_free'} label="Number of Free Socks" name="number_of_socks_free" initialValue={1} />
+        <Button type="submit">Create</Button>
+      </FormController>
+    </>
+  )
+}