simple-kiosk-app/components/order.tsx

95 lines
4.7 KiB
TypeScript
Raw Normal View History

2024-04-20 19:58:18 +09:00
"use client";
import { MenuItem } from "@/lib/readCsv";
import { useOrder } from "../hooks/useOrder";
import Menu from "./menu";
import { Button } from "./ui/button";
import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
import { useRouter } from "next/navigation";
import { saveOrderApi } from "@/app/order/action";
export default function Order({
menus,
categories,
}: {
menus: MenuItem[];
categories: string[];
}) {
const { state, dispatch } = useOrder();
const router = useRouter();
return (
<>
<Menu menus={menus} categories={categories} dispatch={dispatch} />
<Drawer>
<DrawerTrigger asChild>
<Button className="w-full mt-2 flex items-center">Order <span className="
ml-1 flex items-center justify-center rounded-full h-6 px-1 text-center bg-background text-foreground">{state.orders.reduce(
(acc, order) => acc + order.quantity, 0)}</span></Button>
</DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle> ?</DrawerTitle>
</DrawerHeader>
<hr className="mx-4"/>
<ul className="flex flex-col gap-2 justify-center m-4">
{state.orders.map(order => (
<li key={`${order.HOT ? "HOT" : "COLD"} ${order.name}`} className="flex items-center">
<span className="w-12">{order.HOT ? "HOT " : "COLD"}</span>
<span className="flex-1">{order.name}</span>
<span className="flex-1"> {order.price * 1000}</span>
<span className="flex-1">{order.quantity}</span>
<span className="flex-1"> {order.price * order.quantity * 1000}</span>
<div className="flex space-x-2">
<Button variant="outline"
className="rounded-full"
onClick={() => dispatch({ type: "ADD_ORDER",
order:{
...order,
quantity: 1
}})} >+1</Button>
<Button variant="outline"
className="rounded-full"
onClick={() => dispatch({ type: "ADD_ORDER",
order: {
...order,
quantity: -1
}})}>-1</Button>
<Button variant="outline" onClick={() => dispatch({ type: "REMOVE_ORDER", order })}></Button>
</div>
</li>
))}
</ul>
<hr className="mx-4" />
<div className="flex mx-4 flex-col items-end">
<span className="text-sm text-muted-foreground"> </span>
<span className="flex-1 text-lg">{state.orders.map(order => order.price * order.quantity)
.reduce((acc, price) => acc + price, 0) * 1000}
</span>
</div>
<DrawerFooter>
<DrawerClose asChild>
<Button onClick={async ()=>{
console.log("order complete", router);
const d = await saveOrderApi(state.orders, "account")
console.log(d);
console.log("a complete", router);
router.push("/");
}}> </Button>
</DrawerClose>
<DrawerClose asChild>
<Button onClick={()=>{
saveOrderApi(state.orders, "cash").then(()=>{
console.log("order complete", router);
router.push("/");
})
}}> </Button>
</DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>
</>
);
}