From e0f26934e85d7f26f5872007182b3820a36b3b8c Mon Sep 17 00:00:00 2001
From: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Date: Fri, 15 May 2026 11:41:17 +0000
Subject: [PATCH] chore: update

---
 app/(main)/payment/page.tsx                   |  9 +---
 .../molecules/cards/PaymentSummaryCard.tsx    | 45 ++++++++++++++++++-
 lib/cart-context.tsx                          |  2 +
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/app/(main)/payment/page.tsx b/app/(main)/payment/page.tsx
index a466e18..7fdb687 100644
--- a/app/(main)/payment/page.tsx
+++ b/app/(main)/payment/page.tsx
@@ -2,7 +2,6 @@
 
 import Button from "@/components/atoms/buttons/Button";
 import PaymentSummaryCard from "@/components/molecules/cards/PaymentSummaryCard";
-import { useAuth } from "@/lib/auth-context";
 import { useCart } from "@/lib/cart-context";
 import { useManager } from "@/lib/manager-context";
 import { MenuItemEntity } from "@/lib/types";
@@ -20,7 +19,7 @@ export default function PaymentPage() {
     removeFromCart,
     setQuantity,
   } = useCart();
-  const { user } = useAuth();
+
   const { products } = useManager();
 
   const findProduct = (id: string): MenuItemEntity =>
@@ -80,7 +79,6 @@ export default function PaymentPage() {
                           quantity,
                         }) => {
                           const { name, description } = findProduct(id);
-
                           return (
                             <tr
                               key={id}
@@ -100,24 +98,20 @@ export default function PaymentPage() {
                                   <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={`Decrease quantity of ${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="Enter quantity"
                                   />
                                   <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={`Increase quantity of ${name}`}
                                   >
                                     +
                                   </button>
@@ -129,7 +123,6 @@ export default function PaymentPage() {
                                   variant="danger"
                                   size="md"
                                   style="payment"
-                                  aria-label={`Remove ${name} from cart`}
                                 >
                                   Delete product
                                 </Button>
diff --git a/components/molecules/cards/PaymentSummaryCard.tsx b/components/molecules/cards/PaymentSummaryCard.tsx
index 8866122..3276088 100644
--- a/components/molecules/cards/PaymentSummaryCard.tsx
+++ b/components/molecules/cards/PaymentSummaryCard.tsx
@@ -1,6 +1,7 @@
 import { formatPrice } from "@/app/(main)/payment/page";
 import Button from "@/components/atoms/buttons/Button";
 import { ReviewModal } from "@/components/organisms/modals";
+import { useCart } from "@/lib/cart-context";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -12,7 +13,9 @@ export default function PaymentSummaryCard({
   backHref,
   eateryId,
 }: PaymentSummaryCardProps) {
+  const { cart } = useCart();
   const [isReviewOpen, setIsReviewOpen] = useState(false);
+  const [isQrModalOpen, setIsQrModalOpen] = useState(false);
   const handlePayment = () => {
     if (isCustomer) {
       setIsReviewOpen(true);
@@ -43,7 +46,9 @@ export default function PaymentSummaryCard({
 
           <Button
             style="payment"
-            onClick={handlePayment}
+            onClick={() => {
+              setIsQrModalOpen(true);
+            }}
             icon="fa-solid fa-qrcode"
             size="md"
             variant="secondary"
@@ -71,6 +76,44 @@ export default function PaymentSummaryCard({
         onClose={() => setIsReviewOpen(false)}
         eateryId={eateryId}
       />
+
+      {isQrModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm">
+          <div className="animate-in fade-in zoom-in w-full max-w-sm rounded-3xl bg-white p-6 text-center shadow-2xl duration-300">
+            <h2 className="mb-4 text-xl font-bold">Scan to Pay</h2>
+
+            {cart.paymentQrUrl ? (
+              <div className="mb-4 rounded-2xl bg-gray-100 p-4">
+                <img
+                  src={cart.paymentQrUrl}
+                  alt="Payment QR Code"
+                  className="mx-auto h-auto w-full"
+                />
+              </div>
+            ) : (
+              <div className="p-10 text-gray-400">QR Code not available</div>
+            )}
+
+            <p className="mb-6 text-sm text-gray-500">
+              Total:{" "}
+              <span className="font-bold text-black">
+                {formatPrice(totalPrice)}
+              </span>
+            </p>
+
+            <Button
+              onClick={() => {
+                setIsQrModalOpen(false);
+                setIsReviewOpen(true);
+              }}
+              variant="secondary"
+              className="w-full"
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      )}
     </aside>
   );
 }
diff --git a/lib/cart-context.tsx b/lib/cart-context.tsx
index 81d86a4..76078c9 100644
--- a/lib/cart-context.tsx
+++ b/lib/cart-context.tsx
@@ -18,6 +18,7 @@ interface CartContextValue {
   items: CartItemEntity[];
   totalItems: number;
   totalPrice: number;
+  cart: CartEntity;
   eateryId: string | undefined;
   addToCart: (product: CartItemEntity) => void;
   increaseQty: (id: string) => void;
@@ -216,6 +217,7 @@ export function CartProvider({ children }: { children: React.ReactNode }) {
       removeFromCart,
       setQuantity,
       removeCart,
+      cart,
     }),
     [cart?.items, cart?.totalAmount, cart?.eateryId],
   );