fix: final commit (#46)

Co-authored-by: TakahashiNg <83152264+TakahashiNguyen@users.noreply.github.com>
Reviewed-on: #46

components/molecules/cards/PaymentSummaryCard.tsx

@@ -1,6 +1,10 @@
 import { formatPrice } from "@/app/(main)/payment/page";
 import Button from "@/components/atoms/buttons/Button";
 import { ReviewModal } from "@/components/organisms/modals";
+import { cartClient } from "@/lib/apollo-clients";
+import { useCart } from "@/lib/cart-context";
+import { gql } from "@apollo/client";
+import { useMutation } from "@apollo/client/react";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -12,9 +16,10 @@ export default function PaymentSummaryCard({
   backHref,
   eateryId,
 }: PaymentSummaryCardProps) {
+  const { cart,removeCart } = useCart();
   const [isReviewOpen, setIsReviewOpen] = useState(false);
+  const [isQrModalOpen, setIsQrModalOpen] = useState(false);
   const handlePayment = () => {
-    // UI-only: open review modal after "payment"
     if (isCustomer) {
       setIsReviewOpen(true);
     }
@@ -44,7 +49,9 @@ export default function PaymentSummaryCard({
 
           <Button
             style="payment"
-            onClick={handlePayment}
+            onClick={() => {
+              setIsQrModalOpen(true);
+            }}
             icon="fa-solid fa-qrcode"
             size="md"
             variant="secondary"
@@ -52,22 +59,7 @@ export default function PaymentSummaryCard({
             QR Code
           </Button>
 
-          {isCustomer && (
-            <Button
-              style="payment"
-              onClick={handlePayment}
-              icon="fa-solid fa-star"
-              size="md"
-              variant="primary"
-            >
-              Review
-            </Button>
-          )}
-
-          <Link
-            href={backHref || "/"}
-            className={isCustomer ? "" : "col-span-2"}
-          >
+          <Link href={backHref || "/"} className={"col-span-2"}>
             <Button
               style="payment"
               onClick={() => setIsReviewOpen(false)}
@@ -84,9 +76,51 @@ export default function PaymentSummaryCard({
 
       <ReviewModal
         isOpen={isReviewOpen}
-        onClose={() => setIsReviewOpen(false)}
+        onClose={() => {
+          setIsReviewOpen(false);
+
+          removeCart();
+        }}
         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>
   );
 }

components/organisms/modals/ReviewModal.tsx

@@ -29,10 +29,10 @@ export default function ReviewModal({
   if (!isOpen) return null;
 
   const handleSubmit = async () => {
-    if (!user?.id || !eateryId) return;
+    if (!eateryId) return;
 
     const input: CreateReviewInput = {
-      reviewerId: user.id,
+      reviewerId: user?.id || "",
       eateryId,
       rating,
       ...(review.trim() ? { comment: review.trim() } : {}),