feat(payment): add cart FAB, payment page, qty updates, invoice sidebar
This commit is contained in:
Blackbox Agent
@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Header from "@/layouts/header";
|
||||
import Footer from "@/layouts/footer";
|
||||
import CartFab from "@/components/CartFab";
|
||||
import { Providers } from "./providers";
|
||||
|
||||
const geistSans = Geist({
|
||||
@@ -55,6 +56,9 @@ export default function RootLayout({
|
||||
|
||||
{/* Footer always at bottom */}
|
||||
<Footer />
|
||||
|
||||
{/* Global floating cart button */}
|
||||
<CartFab />
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+3
-4
@@ -5,6 +5,7 @@ import Navbar from "@/components/Navbar";
|
||||
import CartProduct from "@/components/CartProduct";
|
||||
import { MENU_CATEGORIES, MOCK_PRODUCTS } from "@/lib/constants";
|
||||
import { useMenu } from "@/lib/menu-context";
|
||||
import { useCart } from "@/lib/cart-context";
|
||||
|
||||
/**
|
||||
* Main page — sidebar + product grid layout.
|
||||
@@ -24,6 +25,7 @@ export default function Home() {
|
||||
/* Shared category state comes from MenuContext so the header mobile menu
|
||||
* and this sidebar always reflect the same selection. */
|
||||
const { activeCategory, setActiveCategory } = useMenu();
|
||||
const { addToCart } = useCart();
|
||||
|
||||
/* Start collapsed (false) so SSR and client initial render match.
|
||||
* useEffect sets the correct value after hydration completes. */
|
||||
@@ -181,10 +183,7 @@ export default function Home() {
|
||||
productName={product.name}
|
||||
price={product.price}
|
||||
description={product.description}
|
||||
onBuy={() => {
|
||||
/* TODO: add to cart logic */
|
||||
console.log("Thêm vào giỏ:", product.name);
|
||||
}}
|
||||
onBuy={() => addToCart(product)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,127 @@
|
||||
"use client";
|
||||
|
||||
import { useCart } from "@/lib/cart-context";
|
||||
|
||||
const formatPrice = (value: number) =>
|
||||
value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });
|
||||
|
||||
export default function PaymentPage() {
|
||||
const {
|
||||
items,
|
||||
totalPrice,
|
||||
increaseQty,
|
||||
decreaseQty,
|
||||
removeFromCart,
|
||||
setQuantity,
|
||||
} = useCart();
|
||||
|
||||
return (
|
||||
<div className="max-w-screen-2xl mx-auto w-full px-4 md:px-6 lg:px-8 py-6 md:py-8">
|
||||
<div className="flex flex-col xl:flex-row gap-6">
|
||||
<section className="flex-1 min-w-0">
|
||||
<div className="rounded-2xl border border-(--color-border-light) bg-card overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-(--color-border-light)">
|
||||
<h1 className="text-lg md:text-xl font-bold text-foreground">Trang thanh toán</h1>
|
||||
</div>
|
||||
|
||||
{items.length === 0 ? (
|
||||
<div className="px-4 py-10 text-center text-(--color-text-muted)">
|
||||
Chưa có sản phẩm nào trong giỏ hàng.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[760px] text-sm">
|
||||
<thead>
|
||||
<tr className="bg-(--color-border-light)/40 text-left">
|
||||
<th className="px-4 py-3 font-semibold">Tên sản phẩm</th>
|
||||
<th className="px-4 py-3 font-semibold">Giá tiền</th>
|
||||
<th className="px-4 py-3 font-semibold">Mô tả</th>
|
||||
<th className="px-4 py-3 font-semibold">Số lượng</th>
|
||||
<th className="px-4 py-3 font-semibold text-right">Xóa</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{items.map((item) => (
|
||||
<tr key={item.id} className="border-t border-(--color-border-light)">
|
||||
<td className="px-4 py-3 font-medium text-foreground">{item.name}</td>
|
||||
<td className="px-4 py-3 text-(--color-primary) font-semibold">
|
||||
{formatPrice(item.price)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-(--color-text-muted) max-w-[280px]">
|
||||
<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="w-8 h-8 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="w-16 h-8 text-center rounded-lg border border-(--color-border) bg-transparent"
|
||||
/>
|
||||
<button
|
||||
onClick={() => increaseQty(item.id)}
|
||||
className="w-8 h-8 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)}
|
||||
className="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors"
|
||||
>
|
||||
<i className="fa-solid fa-trash"></i>
|
||||
<span className="hidden lg:inline">Xóa sản phẩm</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="xl:w-[340px] shrink-0">
|
||||
<div className="sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) bg-card p-4 md:p-5">
|
||||
<h2 className="text-lg font-bold mb-4">Hóa đơn</h2>
|
||||
|
||||
<div className="flex items-center justify-between pb-4 border-b border-(--color-border-light)">
|
||||
<span className="text-(--color-text-muted)">Tổng cộng</span>
|
||||
<span className="text-xl font-bold text-(--color-primary)">{formatPrice(totalPrice)}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 bg-(--color-primary) text-white hover:bg-(--color-primary-dark) transition-colors"
|
||||
type="button"
|
||||
>
|
||||
<i className="fa-solid fa-money-bill-wave"></i>
|
||||
<span className="hidden lg:inline">Tiền mặt</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-2 rounded-xl px-3 py-2.5 border border-(--color-border) text-foreground hover:bg-(--color-border-light) transition-colors"
|
||||
type="button"
|
||||
>
|
||||
<i className="fa-solid fa-qrcode"></i>
|
||||
<span className="hidden lg:inline">QR Code</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+6
-1
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { MenuProvider } from "@/lib/menu-context";
|
||||
import { CartProvider } from "@/lib/cart-context";
|
||||
|
||||
/**
|
||||
* Client-side providers wrapper.
|
||||
@@ -8,5 +9,9 @@ import { MenuProvider } from "@/lib/menu-context";
|
||||
* with client context providers without becoming a client component itself.
|
||||
*/
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
return <MenuProvider>{children}</MenuProvider>;
|
||||
return (
|
||||
<MenuProvider>
|
||||
<CartProvider>{children}</CartProvider>
|
||||
</MenuProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user