chore: update
This commit is contained in:
TakahashiNg
+70
-54
@@ -5,6 +5,8 @@ import PaymentSummaryCard from "@/components/molecules/cards/PaymentSummaryCard"
|
||||
import ReviewModal from "@/components/organisms/modals/ReviewModal";
|
||||
import { useAuth } from "@/lib/auth-context";
|
||||
import { useCart } from "@/lib/cart-context";
|
||||
import { useManager } from "@/lib/manager-context";
|
||||
import { MenuItemEntity } from "@/lib/types";
|
||||
import { useState } from "react";
|
||||
|
||||
const formatPrice = (value: number) =>
|
||||
@@ -20,6 +22,10 @@ export default function PaymentPage() {
|
||||
setQuantity,
|
||||
} = useCart();
|
||||
const { user } = useAuth();
|
||||
const { products } = useManager();
|
||||
|
||||
const findProduct = (id: string): MenuItemEntity =>
|
||||
products.find((i) => i.id == id)!;
|
||||
|
||||
const [isReviewOpen, setIsReviewOpen] = useState(false);
|
||||
const isCustomer = user?.role === "customer";
|
||||
@@ -66,61 +72,71 @@ export default function PaymentPage() {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr
|
||||
key={item.id}
|
||||
className="border-t border-(--color-border-light)"
|
||||
>
|
||||
<td className="text-foreground px-4 py-3 font-medium">
|
||||
{item.name}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-semibold text-(--color-primary)">
|
||||
{formatPrice(item.price)}
|
||||
</td>
|
||||
<td className="max-w-70 px-4 py-3 text-(--color-text-muted)">
|
||||
<p className="line-clamp-2">{item.description}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => decreaseQty(item.id)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
|
||||
aria-label={`Giảm số lượng ${item.name}`}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={item.quantity}
|
||||
onChange={(e) =>
|
||||
setQuantity(item.id, Number(e.target.value))
|
||||
}
|
||||
className="h-8 w-16 rounded-lg border border-(--color-border) bg-transparent text-center"
|
||||
title="Nhập số lượng"
|
||||
/>
|
||||
<button
|
||||
onClick={() => increaseQty(item.id)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
|
||||
aria-label={`Tăng số lượng ${item.name}`}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<Button
|
||||
onClick={() => removeFromCart(item.id)}
|
||||
variant="danger"
|
||||
size="md"
|
||||
style="payment"
|
||||
aria-label={`Xóa ${item.name} khỏi giỏ hàng`}
|
||||
{items.map(
|
||||
({
|
||||
productId: id,
|
||||
priceAtTimeOfAdding: price,
|
||||
quantity,
|
||||
}) => {
|
||||
const { name, description } = findProduct(id);
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={id}
|
||||
className="border-t border-(--color-border-light)"
|
||||
>
|
||||
Delete product
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<td className="text-foreground px-4 py-3 font-medium">
|
||||
{name}
|
||||
</td>
|
||||
<td className="px-4 py-3 font-semibold text-(--color-primary)">
|
||||
{formatPrice(price)}
|
||||
</td>
|
||||
<td className="max-w-70 px-4 py-3 text-(--color-text-muted)">
|
||||
<p className="line-clamp-2">{description}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => decreaseQty(id)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
|
||||
aria-label={`Giảm số lượng ${name}`}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={quantity}
|
||||
onChange={(e) =>
|
||||
setQuantity(id, Number(e.target.value))
|
||||
}
|
||||
className="h-8 w-16 rounded-lg border border-(--color-border) bg-transparent text-center"
|
||||
title="Nhập số lượng"
|
||||
/>
|
||||
<button
|
||||
onClick={() => increaseQty(id)}
|
||||
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
|
||||
aria-label={`Tăng số lượng ${name}`}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-right">
|
||||
<Button
|
||||
onClick={() => removeFromCart(id)}
|
||||
variant="danger"
|
||||
size="md"
|
||||
style="payment"
|
||||
aria-label={`Xóa ${name} khỏi giỏ hàng`}
|
||||
>
|
||||
Delete product
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, useState } from "react";
|
||||
|
||||
interface MenuContextType {
|
||||
/** Currently selected category id */
|
||||
activeCategory: string;
|
||||
/** Update the active category */
|
||||
setActiveCategory: (id: string) => void;
|
||||
}
|
||||
|
||||
const MenuContext = createContext<MenuContextType>({
|
||||
activeCategory: "all",
|
||||
setActiveCategory: () => {},
|
||||
});
|
||||
|
||||
/**
|
||||
* Provides shared activeCategory state to both the Header (mobile scrollable menu)
|
||||
* and the Navbar sidebar (md+), so both always reflect the same selection.
|
||||
*/
|
||||
export function MenuProvider({ children }: { children: React.ReactNode }) {
|
||||
const [activeCategory, setActiveCategory] = useState("all");
|
||||
|
||||
return (
|
||||
<MenuContext.Provider value={{ activeCategory, setActiveCategory }}>
|
||||
{children}
|
||||
</MenuContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/** Consume the shared menu state anywhere inside MenuProvider */
|
||||
export function useMenu() {
|
||||
return useContext(MenuContext);
|
||||
}
|
||||
Reference in New Issue
Block a user