Cart page, app passes cart update
parent
30c6ae98a4
commit
9ce70cefe2
@ -0,0 +1,33 @@
|
||||
import styles from './table.module.css'
|
||||
|
||||
export default function Table({columns, rows, foot}) {
|
||||
return (
|
||||
<table className={styles.table}>
|
||||
<thead>
|
||||
<tr>
|
||||
{columns.map(column=>
|
||||
<th key={column.name}>{column.name}</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map(row=>
|
||||
<tr key={row.id} className={row.class}>
|
||||
{columns.map(column=>
|
||||
<td key={column.name}>{column.extractor(row)}</td>
|
||||
)}
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
{foot && <tfoot>
|
||||
<tr>
|
||||
{foot.map((item, i) =>
|
||||
<th key={i}>
|
||||
{item}
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
</tfoot>}
|
||||
</table>
|
||||
)
|
||||
}
|
@ -0,0 +1,24 @@
|
||||
.table {
|
||||
width: calc(100% - 100px);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-collapse: collapse;
|
||||
border: solid 1px gray;
|
||||
}
|
||||
|
||||
.table td, .table th {
|
||||
border-top: solid 1px gray;
|
||||
border-bottom: solid 1px gray;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 5px 15px;
|
||||
font-family: 'Cormorant SC',serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 15px;
|
||||
}
|
@ -1,18 +1,51 @@
|
||||
import React, {useState} from 'react'
|
||||
import React from 'react'
|
||||
import axios from 'axios'
|
||||
import Head from 'next/head'
|
||||
|
||||
// import styles from './cart.module.css'
|
||||
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)
|
||||
}
|
||||
|
||||
// TODO: Cart page
|
||||
export default function Cart({cart}){
|
||||
return (
|
||||
<>
|
||||
<Head><title>Cart</title></Head>
|
||||
<div>
|
||||
<pre>
|
||||
{JSON.stringify(cart, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
Loading…
Reference in New Issue