Đóng gói code ở payment page

app/(main)/payment/page.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { ReviewModal } from "@/components/organisms/modals";
+import Button from "@/components/atoms/buttons/Button";
+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 Link from "next/link";
 import { useState } from "react";
 
 const formatPrice = (value: number) =>
@@ -23,15 +24,8 @@ export default function PaymentPage() {
   const [isReviewOpen, setIsReviewOpen] = useState(false);
   const isCustomer = user?.role === "customer";
 
-  const handlePayment = () => {
-    // UI-only: open review modal after "payment"
-    if (isCustomer) {
-      setIsReviewOpen(true);
-    }
-  };
-
   return (
-    <>
+    <div>
       <div className="mx-auto w-full max-w-screen-2xl px-4 py-6 md:px-6 md:py-8 lg:px-8">
         <div className="flex flex-col gap-6 xl:flex-row">
           <section className="min-w-0 flex-1">
@@ -81,7 +75,7 @@ export default function PaymentPage() {
                             <div className="flex items-center gap-2">
                               <button
                                 onClick={() => decreaseQty(item.id)}
-                                className="h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Giảm số lượng ${item.name}`}
                               >
                                 -
@@ -98,7 +92,7 @@ export default function PaymentPage() {
                               />
                               <button
                                 onClick={() => increaseQty(item.id)}
-                                className="h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
+                                className="inline-flex items-center justify-center h-8 w-8 rounded-lg border border-(--color-border) hover:bg-(--color-border-light)"
                                 aria-label={`Tăng số lượng ${item.name}`}
                               >
                                 +
@@ -106,15 +100,13 @@ export default function PaymentPage() {
                             </div>
                           </td>
                           <td className="px-4 py-3 text-right">
-                            <button
+                            <Button
                               onClick={() => removeFromCart(item.id)}
-                              className="inline-flex items-center justify-center gap-2 rounded-lg bg-red-500 px-3 py-2 text-white transition-colors hover:bg-red-600"
+                              variant="danger"
+                              size="md"
                             >
-                              <i className="fa-solid fa-trash"></i>
+                              Xóa sản phẩm
-                              <span className="hidden lg:inline">
+                            </Button>
-                                Xóa sản phẩm
-                              </span>
-                            </button>
                           </td>
                         </tr>
                       ))}
@@ -125,59 +117,11 @@ export default function PaymentPage() {
             </div>
           </section>
 
-          <aside className="shrink-0 xl:w-85">
+          <PaymentSummaryCard
-            <div className="bg-card sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) p-4 md:p-5">
+            totalPrice={totalPrice}
-              <h2 className="mb-4 text-lg font-bold">Hóa đơn</h2>
+            isCustomer={isCustomer}
-
+            backHref="/"
-              <div className="flex items-center justify-between border-b border-(--color-border-light) pb-4">
+          />
-                <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
-                  onClick={handlePayment}
-                  className="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-(--color-primary) px-3 py-2.5 text-white transition-colors hover:bg-(--color-primary-dark)"
-                  type="button"
-                >
-                  <i className="fa-solid fa-money-bill-wave"></i>
-                  <span className="hidden lg:inline">Tiền mặt</span>
-                </button>
-
-                <button
-                  onClick={handlePayment}
-                  className="text-foreground inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-(--color-border) px-3 py-2.5 transition-colors hover:bg-(--color-border-light)"
-                  type="button"
-                >
-                  <i className="fa-solid fa-qrcode"></i>
-                  <span className="hidden lg:inline">QR Code</span>
-                </button>
-
-                {isCustomer && (
-                  <button
-                    onClick={() => setIsReviewOpen(true)}
-                    className="text-foreground inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl border border-(--color-border) px-3 py-2.5 transition-colors hover:bg-(--color-border-light)"
-                    type="button"
-                  >
-                    <i className="fa-solid fa-star"></i>
-                    <span className="hidden lg:inline">Đánh giá</span>
-                  </button>
-                )}
-
-                <Link href="/" className={isCustomer ? "" : "col-span-2"}>
-                  <button
-                    className="text-foreground inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-(--color-border) px-3 py-2.5 transition-colors hover:bg-(--color-border-light)"
-                    type="button"
-                  >
-                    <i className="fa-solid fa-arrow-rotate-left"></i>
-                    <span className="hidden lg:inline">Quay về</span>
-                  </button>
-                </Link>
-              </div>
-            </div>
-          </aside>
         </div>
       </div>
 
@@ -185,6 +129,6 @@ export default function PaymentPage() {
         isOpen={isReviewOpen}
         onClose={() => setIsReviewOpen(false)}
       />
-    </>
+    </div>
   );
 }

components/atoms/buttons/Button.tsx

@@ -10,10 +10,14 @@ export default function Button({
   disabled = false,
   children,
   className = "",
+  payment = false,
   ...props
 }: ButtonProps) {
   const baseStyles =
     "font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center gap-1.5";
+// h-8 w-8
+  const paymentStyles = 
+  "inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl transition-colors";
 
   const variants = {
     primary:
@@ -34,7 +38,7 @@ export default function Button({
 
   return (
     <button
-      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      className={`${payment ? paymentStyles : baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
       disabled={disabled}
       {...props}
     >

components/atoms/buttons/Button.types.ts

@@ -8,4 +8,5 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children: React.ReactNode;
   className?: string;
+  payment?: boolean;
 }

components/molecules/cards/Card.types.ts

@@ -16,3 +16,10 @@ export interface ShopCardProps {
   image: string;
   onClick?: () => void;
 }
+
+export interface PaymentSummaryCardProps {
+  totalPrice: number;
+  isCustomer: boolean;
+  backHref: string;
+  onPay?: () => void;
+}

components/molecules/cards/PaymentSummaryCard.tsx

@@ -0,0 +1,91 @@
+import Button from "@/components/atoms/buttons/Button";
+import Link from "next/link";
+
+import { ReviewModal } from "@/components/organisms/modals";
+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,
+  backHref,
+}: PaymentSummaryCardProps) {
+
+    const [isReviewOpen, setIsReviewOpen] = useState(false);
+    const handlePayment = () => {
+    // UI-only: open review modal after "payment"
+    if (isCustomer) {
+        setIsReviewOpen(true);
+  }
+};
+  return (
+    <aside className="shrink-0 xl:w-85">
+      <div className="bg-card sticky top-[calc(var(--spacing-header-height)+1rem)] rounded-2xl border border-(--color-border-light) p-4 md:p-5">
+        <h2 className="mb-4 text-lg font-bold">Hóa đơn</h2>
+
+        <div className="flex items-center justify-between border-b border-(--color-border-light) pb-4">
+          <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
+            payment
+            onClick={handlePayment}
+            icon="fa-solid fa-money-bill-wave"
+            size="md"
+            variant="primary"
+          >
+            Tiền mặt
+          </Button>
+
+          <Button
+            payment
+            onClick={handlePayment}
+            icon="fa-solid fa-qrcode"
+            size="md"
+            variant="secondary"
+          >
+            QR Code
+          </Button>
+
+          {isCustomer && (
+            <Button
+              payment
+              onClick={handlePayment}
+              icon="fa-solid fa-star"
+              size="md"
+              variant="primary"
+            >
+              Đánh giá
+            </Button>
+          )}
+
+          <Link href={backHref || "/"}  className={isCustomer ? "" : "col-span-2"}>
+            <Button
+              payment
+              onClick={() => setIsReviewOpen(false)}
+              icon="fa-solid fa-arrow-rotate-left"
+              size="md"
+              variant="secondary"
+              className="w-full"
+            >
+              Quay về
+            </Button>
+          </Link>
+        </div>
+      </div>
+
+      <ReviewModal
+        isOpen={isReviewOpen}
+        onClose={() => setIsReviewOpen(false)}
+      />
+    </aside>
+  );
+}

components/organisms/modals/ReviewModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Caption, Heading, Text, Textarea } from "@/components/atoms";
+import { Button, Heading, Text, Textarea } from "@/components/atoms";
 import { useState } from "react";
 
 import type { ReviewModalProps } from "./Modal.types";