Manually add orders
parent
bd6dd194d6
commit
f739d7a5fb
@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import ActionBar from '~/components/admin/actionBar'
|
||||
import {FormController, Input, Button} from '~/components/form'
|
||||
import Router from 'next/router'
|
||||
|
||||
OrderAddress.getInitialProps = async ({ctx}) => {
|
||||
const {data: order} = await ctx.axios.get(`/api/orders/${ctx.query.uuid}`)
|
||||
return {order}
|
||||
}
|
||||
|
||||
export default function OrderAddress({order}) {
|
||||
function afterSave(order) {
|
||||
Router.push(`/admin/orders/new/${order.uuid}/payment`)
|
||||
}
|
||||
|
||||
const {address} = order;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActionBar title="Set Address" actions={[
|
||||
{label: 'Cancel', url: `/admin/orders`}
|
||||
]}/>
|
||||
<FormController url={`/api/orders/manual/${order.uuid}/address`} afterSubmit={afterSave}>
|
||||
<Input initialValue={address?.name} name="name" validate={value=>value.length > 0}/>
|
||||
<Input initialValue={address?.street1} label="Street (line 1)" name="street1" validate={value=>value.length > 0}/>
|
||||
<Input initialValue={address?.street2} label="Street (line 2)" name="street2"/>
|
||||
<Input initialValue={address?.city} label="City" name="city" validate={value=>value.length > 0}/>
|
||||
<Input initialValue={address?.state} label="State / Province" name="state" validate={value=>value.length > 0}/>
|
||||
<Input initialValue={address?.zip} label="Postal Code" name="zip" validate={value=>value.length > 0}/>
|
||||
<Input initialValue={address?.country} label="Country" name="country" validate={value=>value.length > 0}/>
|
||||
<Button type="submit">Save Address</Button>
|
||||
</FormController>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,108 @@
|
||||
import React, {useState} from 'react'
|
||||
import Router from 'next/router'
|
||||
import axios from 'axios'
|
||||
import ActionBar from '~/components/admin/actionBar'
|
||||
import {Button, FormController, Input} from '~/components/form'
|
||||
import OrderSummary from '~/components/orderSummary'
|
||||
|
||||
import styles from '../../../../store/checkout/style.module.css'
|
||||
|
||||
ManualOrderPayment.getInitialProps = async ({ctx}) => {
|
||||
const {data: order} = await ctx.axios.get(`/api/orders/${ctx.query.uuid}`)
|
||||
return {order}
|
||||
}
|
||||
|
||||
export default function ManualOrderPayment({order}) {
|
||||
const [recipientEmail, setRecipientEmail] = useState('')
|
||||
const [orderNote, setOrderNote] = useState('')
|
||||
|
||||
const validToSubmit = recipientEmail.length > 0 && orderNote.length > 0
|
||||
|
||||
const currentTransaction = order
|
||||
.transactions.find(transaction => (
|
||||
transaction.payment_state === 'started'
|
||||
))
|
||||
|
||||
const {item_total_price, shipping_price, tax_price, coupon_effective_discount} = currentTransaction
|
||||
const {free_shipping} = currentTransaction.coupon || {}
|
||||
const total_price =
|
||||
(item_total_price && shipping_price)
|
||||
? item_total_price + (free_shipping ? 0 : shipping_price) + tax_price - (coupon_effective_discount || 0)
|
||||
: null
|
||||
|
||||
const formatMoney = money => {
|
||||
if (money === undefined || money === null) return null;
|
||||
|
||||
return '$' + (money / 100).toFixed(2)
|
||||
}
|
||||
|
||||
async function markPaid() {
|
||||
await axios.post(`/api/orders/manual/${order.uuid}/payment`, {
|
||||
recipientEmail,
|
||||
reason: orderNote
|
||||
})
|
||||
|
||||
Router.push('/admin/orders')
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActionBar title="Set Payment" actions={[
|
||||
{label: 'Edit address', url: `/admin/orders/new/${order.uuid}/address`},
|
||||
{label: 'Cancel', url: `/admin/orders`}
|
||||
]}/>
|
||||
|
||||
<OrderSummary order={order} />
|
||||
|
||||
<FormController>
|
||||
<Input label="Recipient email" name="email" validate={value=>value.length > 0} onChange={setRecipientEmail} />
|
||||
<Input label="Order explanation" name="explanation" validate={value=>value.length > 0} onChange={setOrderNote} />
|
||||
</FormController>
|
||||
|
||||
<div className={styles.checkoutSection}>
|
||||
<h3>Price Total:</h3>
|
||||
<div className={styles.horizContainer}>
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
{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>
|
||||
))}
|
||||
{coupon_effective_discount > 0 && (
|
||||
<tr>
|
||||
<td>Coupon:</td>
|
||||
<td>- {formatMoney(coupon_effective_discount)}</td>
|
||||
</tr>
|
||||
)}
|
||||
<tr className={free_shipping ? 'strikethrough' : undefined}>
|
||||
<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 style={{textDecoration: 'line-through'}}>{formatMoney(total_price) || '-'}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style={{opacity: .6}}>(Paid by admin)</td>
|
||||
<td style={{fontWeight: 'bold'}}>{formatMoney(0) || '-'}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className={styles.paymentButtons}>
|
||||
<Button enabled={validToSubmit} onClick={markPaid}>Complete Order</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
import React, {useReducer} from 'react'
|
||||
import Router from 'next/router'
|
||||
import axios from 'axios'
|
||||
import ActionBar from '~/components/admin/actionBar'
|
||||
import Table from '~/components/table'
|
||||
import {Button} from '~/components/form'
|
||||
|
||||
ManualOrder.getInitialProps = async ({ctx}) => {
|
||||
const {data: items} = await ctx.axios.get('/api/items?showUnpublished=true')
|
||||
return {items}
|
||||
}
|
||||
|
||||
export default function ManualOrder({items}) {
|
||||
const [itemState, dispatch] = useReducer(itemCountReducer, {})
|
||||
const totalNumber = Object.values(itemState).reduce((a,b) => (b+a), 0)
|
||||
|
||||
const add = (item) => () => dispatch({type: 'add', item: item.uuid})
|
||||
const subtract = (item) => () => dispatch({type: 'subtract', item: item.uuid})
|
||||
const remove = (item) => () => dispatch({type: 'remove', item: item.uuid})
|
||||
const clear = () => dispatch({type: 'clear'})
|
||||
|
||||
async function createOrder(){
|
||||
const items = Object.keys(itemState)
|
||||
.map(uuid => ({ uuid, count: itemState[uuid] }))
|
||||
|
||||
const {data: order} = await axios.put(`/api/orders/manual`, {items})
|
||||
|
||||
Router.push(`/admin/orders/new/${order.uuid}/address`)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActionBar title="New Order" actions={[
|
||||
{label: 'Cancel', url: `/admin/orders`}
|
||||
]}/>
|
||||
<Table
|
||||
columns={[
|
||||
{name: 'Name', extractor: item => item.name},
|
||||
{name: 'Price', extractor: item => `$${(item.price_cents / 100).toFixed(2)}`},
|
||||
{name: 'Number in stock', extractor: item => item.number_in_stock},
|
||||
{name: 'Number in order', extractor: item => (
|
||||
<span style={{display: 'flex', flexDirection: 'row', width: 120, justifyContent: 'space-between', alignItems: 'center'}}>
|
||||
<Button enabled={itemState[item.uuid] > 0} style={{width: 30}} onClick={subtract(item)}>-</Button>
|
||||
{itemState[item.uuid] || 0}
|
||||
<Button enabled={(itemState[item.uuid] || 0) < item.number_in_stock} style={{width: 30}} onClick={add(item)}>+</Button>
|
||||
</span>
|
||||
)},
|
||||
{name: 'Actions', extractor: item => (
|
||||
<span>
|
||||
<button className="buttonLink" onClick={remove(item)}>Remove all</button>
|
||||
</span>
|
||||
)}
|
||||
]}
|
||||
// Map in an id property so the table can use array.map
|
||||
rows={items.map(item => ({id: item.uuid, ...item}))}
|
||||
/>
|
||||
<p style={{textAlign: 'center'}}>
|
||||
<button className="buttonLink" onClick={clear}>Reset order</button>
|
||||
</p>
|
||||
<p style={{maxWidth: 400, margin: '0 auto'}}>
|
||||
<Button enabled={totalNumber > 0} onClick={createOrder}>Create Order</Button>
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function itemCountReducer(state, action) {
|
||||
switch(action.type) {
|
||||
case 'add':
|
||||
if (state[action.item])
|
||||
return {...state, [action.item]: state[action.item] + 1}
|
||||
else
|
||||
return {...state, [action.item]: 1}
|
||||
case 'subtract':
|
||||
if (state[action.item])
|
||||
return {...state, [action.item]: state[action.item] - 1}
|
||||
else
|
||||
return state
|
||||
case 'remove':
|
||||
const newState = {...state}
|
||||
delete newState[action.item]
|
||||
return newState;
|
||||
case 'clear':
|
||||
return {};
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue