import React from 'react'
import Router from 'next/router'
import Link from 'next/link'
import axios from 'axios'
import Head from 'next/head'
import useCart, {useSetCart} from '~/hooks/useCart'
import {FormController, Input, Button} from '~/components/form'
import Table from '~/components/table'
export default function Cart(){
const cart = useCart()
const setCart = useSetCart()
const numItems = (cart?.items) ? cart.items.length : 0
const allInStock = !cart?.items?.some(item => !item.item.number_in_stock || item.item.number_in_stock < 1)
const allHaveEnough = !cart?.items?.some(item => item.count > item.item.number_in_stock)
const handleRemove = id => async ev => {
if(ev) ev.preventDefault()
const {data} = await axios.post(`/api/cart/remove/${id}`)
setCart(data)
}
// We can't let the form controller do this as it shouldn't actually pass a body
const handleCreateTransaction = async () => {
await axios.put(`/api/orders`)
Router.push('/store/checkout')
}
return (
<>
Cart
Cart
{
numItems > 0
? (
<>
{row.item.name}
{(!row.item.number_in_stock || row.item.number_in_stock < 1) && Out of stock}
{(row.item.number_in_stock > 0 && row.count > row.item.number_in_stock) && Not enough in stock}
)},
{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 =>
}
]}
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),
''
]}
/>
// Empty cart table
:
}
{(()=>{
if(!(cart?.items?.length))
return
if(!allInStock)
return
if(!allHaveEnough)
return
return
})()}
)
}