chore: update

app/(main)/payment/page.tsx

@@ -9,8 +9,8 @@ import { useManager } from "@/lib/manager-context";
 import { MenuItemEntity } from "@/lib/types";
 import { useState } from "react";
 
-const formatPrice = (value: number) =>
+export const formatPrice = (value?: number) =>
-  value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });
+  (value ?? 0).toLocaleString("vi-VN", { style: "currency", currency: "VND" });
 
 export default function PaymentPage() {
   const {
@@ -42,7 +42,7 @@ export default function PaymentPage() {
                 </h1>
               </div>
 
-              {items.length === 0 ? (
+              {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>
@@ -72,7 +72,7 @@ export default function PaymentPage() {
                       </tr>
                     </thead>
                     <tbody>
-                      {items.map(
+                      {items?.map(
                         ({
                           productId: id,
                           priceAtTimeOfAdding: price,

components/molecules/cards/PaymentSummaryCard.tsx

@@ -1,3 +1,4 @@
+import { formatPrice } from "@/app/(main)/payment/page";
 import Button from "@/components/atoms/buttons/Button";
 import { ReviewModal } from "@/components/organisms/modals";
 import Link from "next/link";
@@ -5,9 +6,6 @@ import { useState } from "react";
 
 import type { PaymentSummaryCardProps } from "./Card.types";
 
-const formatPrice = (value: number) =>
-  value.toLocaleString("vi-VN", { style: "currency", currency: "VND" });
-
 export default function PaymentSummaryCard({
   totalPrice,
   isCustomer = false,

components/molecules/cards/ProductCard.tsx

@@ -38,7 +38,7 @@ export default function ProductCard({
         </div>
         {/* Product image */}
         <Image
-          src={image}
+          src={image || "/"}
           alt={imageAlt}
           fill
           className="z-1 object-cover"

components/organisms/product-grid/ProductGrid.tsx

@@ -2,9 +2,9 @@
 
 import { ProductCard } from "@/components/molecules/cards";
 import { useCart } from "@/lib/cart-context";
+import { useManager } from "@/lib/manager-context";
 
 import type { ProductGridProps } from "./ProductGrid.types";
-import { useManager } from "@/lib/manager-context";
 
 export default function ProductGrid({
   searchQuery = "",
@@ -31,17 +31,19 @@ export default function ProductGrid({
       {/* ── Product grid ── */}
       {filteredProducts.length > 0 ? (
         <div className={`grid gap-4 ${gridCols}`}>
-          {filteredProducts.map((product) => (
+          {filteredProducts.map(
-            <ProductCard
+            ({ id, imageUrl, name, price, description }) => (
-              key={product.id}
+              <ProductCard
-              image={product.imageUrl}
+                key={id}
-              imageAlt={product.name}
+                image={imageUrl}
-              productName={product.name}
+                imageAlt={name}
-              price={product.price}
+                productName={name}
-              description={product.description}
+                price={price}
-              onBuy={() => addToCart(product)}
+                description={description}
-            />
+                onBuy={() => addToCart({ productId: id!, quantity: 1 })}
-          ))}
+              />
+            ),
+          )}
         </div>
       ) : (
         /* Empty state */

lib/cart-context.tsx

@@ -1,131 +1,193 @@
 "use client";
 
+import { gql } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 
-import { CartItemEntity, MenuItemEntity } from "./types";
+import { cartClient, eateryClient } from "./apollo-clients";
+import {
+  CartEntity,
+  CartItemEntity,
+  addMenuItemMutation,
+  allEateriesQuery,
+  createCartMutation,
+  getCartQuery,
+} from "./types";
 
 interface CartContextValue {
   items: CartItemEntity[];
   totalItems: number;
   totalPrice: number;
-  addToCart: (product: MenuItemEntity) => void;
+  addToCart: (product: CartItemEntity) => void;
   increaseQty: (id: string) => void;
   decreaseQty: (id: string) => void;
   removeFromCart: (id: string) => void;
   setQuantity: (id: string, quantity: number) => void;
 }
 
-const STORAGE_KEY = "coffee-shop-cart";
+const CART_ID = "cartId";
 const CartContext = createContext<CartContextValue | null>(null);
 
+const GET_CART_ITEMS = gql`
+  query getCart($cartId: String!) {
+    getCart(cartId: $cartId) {
+      Id
+      userId
+      eateryId
+      items {
+        productId
+        quantity
+        priceAtTimeOfAdding
+        subTotal
+      }
+      totalAmount
+      paymentQrUrl
+    }
+  }
+`;
+
+const GET_EATERY = gql`
+  query GetEateryMenu {
+    allEateries {
+      id
+    }
+  }
+`;
+
+const CREATE_CART = gql`
+  mutation createCart($eateryId: String!) {
+    createCart(eateryId: $eateryId)
+  }
+`;
+
+const ADD_ITEM = gql`
+  mutation addItem(
+    $cartId: String!
+    $menuItemId: String!
+    $quantity: BigInteger!
+  ) {
+    addItem(cartId: $cartId, menuItemId: $menuItemId, quantity: $quantity) {
+      Id
+      userId
+      eateryId
+      items {
+        productId
+        quantity
+        priceAtTimeOfAdding
+        subTotal
+      }
+      totalAmount
+      paymentQrUrl
+    }
+  }
+`;
+
 export function CartProvider({ children }: { children: React.ReactNode }) {
-  const [items, setItems] = useState<CartItemEntity[]>([]);
+  const [cart, setCart] = useState<CartEntity>(null!);
+  const [cartId, setCartId] = useState<string | null>(null);
+
+  const { data: eateryData } = useQuery<allEateriesQuery>(GET_EATERY, {
+    client: eateryClient,
+  });
+
+  const [createCart] = useMutation<createCartMutation>(CREATE_CART, {
+    client: cartClient,
+  });
+
+  const { data, loading, error } = useQuery<getCartQuery>(GET_CART_ITEMS, {
+    client: cartClient,
+    variables: { cartId },
+    skip: !cartId,
+  });
+
+  const [addMenuItem] = useMutation<addMenuItemMutation>(ADD_ITEM, {
+    client: cartClient,
+  });
 
   useEffect(() => {
-    try {
+    const createCartFunc = async () => {
-      const raw = localStorage.getItem(STORAGE_KEY);
+      if (eateryData && eateryData.allEateries?.length > 0) {
-      if (!raw) return;
+        try {
-      const parsed = JSON.parse(raw) as CartItemEntity[];
+          const firstEateryId = eateryData.allEateries[0].id;
-      if (Array.isArray(parsed)) {
+          const { data: mutationResult } = await createCart({
-        setItems(parsed.filter((i) => i && i.productId && i.quantity > 0));
+            variables: { eateryId: firstEateryId },
+          });
+
+          const newCartId = mutationResult!.createCart;
+          if (newCartId) {
+            localStorage.setItem(CART_ID, newCartId);
+            setCartId(newCartId);
+          }
+        } catch (err) {
+          console.error("Lỗi khi tạo giỏ hàng:", err);
+        }
       }
-    } catch {
+    };
-      localStorage.removeItem(STORAGE_KEY);
+
+    if (error) createCartFunc();
+    else {
+      const localCartId = localStorage.getItem(CART_ID);
+      if (localCartId) setCartId(localCartId);
     }
-  }, []);
+  }, [eateryData, createCart, data, loading]);
 
   useEffect(() => {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
+    if (data?.getCart) setCart(data.getCart);
-  }, [items]);
+  }, [data]);
 
-  const addToCart = (product: MenuItemEntity) => {
+  const addToCart = async (product: CartItemEntity) => {
-    setItems((prev) => {
+    if (!cartId) return;
-      const index = prev.findIndex((i) => i.productId === product.id);
-      if (index === -1) {
-        return [
-          ...prev,
-          {
-            productId: product.id!,
-            name: product.name,
-            description: product.description,
-            priceAtTimeOfAdding: product.price,
-            quantity: 1,
-          },
-        ];
-      }
 
-      const next = [...prev];
+    const { data: result } = await addMenuItem({
-      next[index] = { ...next[index], quantity: next[index].quantity + 1 };
+      variables: {
-      return next;
+        cartId,
+        menuItemId: product.productId!,
+        quantity: product.quantity,
+      },
     });
+
+    if (result) setCart(result.addItem);
   };
 
-  const increaseQty = (id: string) => {
+  const setQuantity = async (id: string, quantity: number) => {
-    setItems((prev) =>
+    if (!cartId) return;
-      prev.map((item) =>
+
-        item.productId === id ? { ...item, quantity: item.quantity + 1 } : item,
+    const { data: result } = await addMenuItem({
-      ),
+      variables: {
-    );
+        cartId,
+        menuItemId: id,
+        quantity,
+      },
+    });
+
+    if (result) setCart(result.addItem);
   };
 
-  const decreaseQty = (id: string) => {
+  const removeFromCart = (id: string) => setQuantity(id, 0);
-    setItems((prev) =>
-      prev
-        .map((item) =>
-          item.productId === id
-            ? { ...item, quantity: Math.max(0, item.quantity - 1) }
-            : item,
-        )
-        .filter((item) => item.quantity > 0),
-    );
-  };
 
-  const removeFromCart = (id: string) => {
+  const increaseQty = (id: string) =>
-    setItems((prev) => prev.filter((item) => item.productId !== id));
+    setQuantity(id, cart.items.find((i) => i.productId == id)!.quantity + 1);
-  };
 
-  const setQuantity = (id: string, quantity: number) => {
+  const decreaseQty = (id: string) =>
-    const safeQty = Number.isFinite(quantity)
+    setQuantity(id, cart.items.find((i) => i.productId == id)!.quantity - 1);
-      ? Math.max(0, Math.floor(quantity))
-      : 0;
-    if (safeQty === 0) {
-      removeFromCart(id);
-      return;
-    }
-
-    setItems((prev) =>
-      prev.map((item) =>
-        item.productId === id ? { ...item, quantity: safeQty } : item,
-      ),
-    );
-  };
 
   const totalItems = useMemo(
-    () => items.reduce((sum, item) => sum + item.quantity, 0),
+    () => cart?.items.reduce((sum, item) => sum + item.quantity, 0),
-    [items],
+    [cart],
-  );
-
-  const totalPrice = useMemo(
-    () =>
-      items.reduce(
-        (sum, item) => sum + item.priceAtTimeOfAdding * item.quantity,
-        0,
-      ),
-    [items],
   );
 
   const value = useMemo(
     () => ({
-      items,
+      items: cart?.items,
       totalItems,
-      totalPrice,
+      totalPrice: cart?.totalAmount,
       addToCart,
       increaseQty,
       decreaseQty,
       removeFromCart,
       setQuantity,
     }),
-    [items, totalItems, totalPrice],
+    [cart?.items, cart?.totalAmount],
   );
 
   return <CartContext.Provider value={value}>{children}</CartContext.Provider>;

lib/types.ts

@@ -125,6 +125,7 @@ export interface MenuItemEntity {
 export interface ShiftEntity {}
 
 export interface EateryEntity {
+  id: string;
   ownerId: string;
   name: string;
   menuItems: MenuItemEntity[];
@@ -150,10 +151,24 @@ export interface deleteMenuItemMutation {
 export interface CartItemEntity {
   productId: string;
   quantity: number;
-  priceAtTimeOfAdding: number;
+  priceAtTimeOfAdding?: number;
 }
 
 export interface CartEntity {
   Id: string;
   items: CartItemEntity[];
+  totalAmount: number;
+  paymentQrUrl: string;
+}
+
+export interface getCartQuery {
+  getCart: CartEntity;
+}
+
+export interface createCartMutation {
+  createCart: string;
+}
+
+export interface addMenuItemMutation {
+  addItem: CartEntity;
 }