You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
2.1 KiB
JavaScript
39 lines
2.1 KiB
JavaScript
4 years ago
|
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>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|