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.
52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
import React from 'react'
|
|
import axios from 'axios'
|
|
import Head from 'next/head'
|
|
|
|
import {FormController, Input, Button} from '~/components/form'
|
|
import Table from '~/components/table'
|
|
|
|
export default function Cart({cart, setCart}){
|
|
const handleRemove = id => async ev => {
|
|
if(ev) ev.preventDefault()
|
|
|
|
const {data} = await axios.post(`/api/cart/remove/${id}`)
|
|
setCart(data)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Head><title>Cart</title></Head>
|
|
<>
|
|
<h2>Cart</h2>
|
|
<Table
|
|
columns={[
|
|
{name: 'Item', extractor: row => row.item.name},
|
|
{name: 'Quantity in Cart', extractor: row => row.count},
|
|
{name: 'Price Each', extractor: row => '$' + (row.item.price_cents / 100).toFixed(2)},
|
|
{name: 'Total Price', extractor: row => '$' + (row.count * row.item.price_cents / 100).toFixed(2)},
|
|
{name: '', extractor: row =>
|
|
<button className="buttonLink" onClick={handleRemove(row.item.uuid)}>Remove</button>
|
|
}
|
|
]}
|
|
rows={cart?.items?.map(row=>({
|
|
...row,
|
|
id: row.item.uuid
|
|
}))}
|
|
foot={[
|
|
'Total:',
|
|
cart?.items.map(r=>r.count).reduce((a,b) => (a+b), 0) || 0,
|
|
'',
|
|
'$' + ((cart?.items.map(r=>r.count * r.item.price_cents).reduce((a,b) => (a+b), 0) || 0) / 100).toFixed(2),
|
|
''
|
|
]}
|
|
/>
|
|
|
|
<FormController>
|
|
<Input label="Coupon Code" type="text" name="coupon"/>
|
|
<Button enabled={!!(cart?.items?.length)} type="submit">Proceed to Checkout</Button>
|
|
</FormController>
|
|
</>
|
|
</>
|
|
)
|
|
}
|