cart

2025-08-12 15:35:34 +03:30
parent 92370259c1
commit 418b45fde5
12 changed files with 574 additions and 5 deletions
@@ -0,0 +1,77 @@
+"use client";
+
+import { NumberFormat } from "@/config/func";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { FC } from "react";
+
+type CartSummaryProps = {
+    itemsCount: number;
+    itemsPrice: number;
+    discount: number;
+    total: number;
+    onConfirm?: () => void;
+    confirmHref?: string;
+    confirmLabel?: string;
+    onDownloadInvoice?: () => void;
+    className?: string;
+};
+
+const Row: FC<{ label: string; value: string | number; emphasize?: boolean }> = (
+    { label, value, emphasize }
+) => {
+    return (
+        <div className="flex items-center justify-between text-[#333333]">
+            <div className="text-sm font-light">{label}</div>
+            <div className={emphasize ? "font-semibold" : "font-light"}>
+                {typeof value === "number" ? NumberFormat(value) : value}
+            </div>
+        </div>
+    );
+};
+
+const CartSummary: FC<CartSummaryProps> = (props) => {
+    const { itemsCount, itemsPrice, discount, total, onConfirm, onDownloadInvoice, className, confirmHref, confirmLabel } = props;
+
+    return (
+        <div className={"rounded-2xl border border-border p-6 h-fit bg-[#FAFAFA] " + (className ?? "")}>
+            <div className="flex items-center justify-between">
+                <div className="text-sm text-muted-foreground">تعداد کالاها</div>
+                <div>{NumberFormat(itemsCount)} محصول</div>
+            </div>
+
+            <div className="mt-6 space-y-5">
+                <Row label="قیمت کالاها" value={itemsPrice} />
+                <Row label="تخفیف" value={discount} />
+                <Row label="جمع فاکتور" value={total} emphasize />
+            </div>
+
+            <div className="mt-8 space-y-3">
+                <Button
+                    type="button"
+                    onClick={() => onDownloadInvoice?.()}
+                    className="w-full h-12 rounded-xl bg-[#303030] text-white shadow hover:bg-[#303030]/90"
+                >
+                    دانلود پیش‌فاکتور
+                </Button>
+                <Button
+                    type="button"
+                    onClick={() => !confirmHref && onConfirm?.()}
+                    className="w-full h-12 rounded-xl  text-white"
+                >
+                    {confirmHref ? (
+                        <Link href={confirmHref} className="w-full h-full flex items-center justify-center">
+                            {confirmLabel ?? "تایید و تکمیل سفارش"}
+                        </Link>
+                    ) : (
+                        confirmLabel ?? "تایید و تکمیل سفارش"
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default CartSummary;
+
+