79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
||
import { getCart } from "@/lib/api/cart";
|
||
import { requireSession } from "@/lib/auth/session";
|
||
import { CartItemRow } from "@/components/customer/cart-item-row";
|
||
import { ClearCartButton } from "@/components/customer/clear-cart-button";
|
||
import { Button } from "@/components/ui/button";
|
||
|
||
export default async function CartPage() {
|
||
await requireSession("/cart");
|
||
const cart = await getCart();
|
||
const hasBlockedGroup = cart.groups.some((g) => !g.meets_minimum_order);
|
||
|
||
if (cart.groups.length === 0) {
|
||
return (
|
||
<main className="mx-auto flex w-full max-w-2xl flex-1 flex-col items-center justify-center gap-3 px-4 py-16 text-center">
|
||
<p className="text-muted-foreground">سبد خرید شما خالی است.</p>
|
||
<Link href="/">
|
||
<Button variant="outline">مشاهده فروشگاهها</Button>
|
||
</Link>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<main className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-6 px-4 py-6">
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-lg font-bold">سبد خرید</h1>
|
||
<ClearCartButton />
|
||
</div>
|
||
|
||
{cart.groups.map((group) => (
|
||
<section key={group.store.uuid} className="flex flex-col gap-2 rounded-2xl border border-border p-4">
|
||
<Link href={`/stores/${group.store.uuid}`} className="font-medium">
|
||
{group.store.name}
|
||
</Link>
|
||
|
||
<div className="divide-y divide-border">
|
||
{group.items.map((item) => (
|
||
<CartItemRow key={item.uuid} item={item} />
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex flex-col gap-1 border-t border-border pt-2 text-sm">
|
||
<div className="flex justify-between text-muted-foreground">
|
||
<span>جمع کالاها</span>
|
||
<span>{group.items_subtotal.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<div className="flex justify-between text-muted-foreground">
|
||
<span>هزینه ارسال</span>
|
||
<span>{group.delivery_fee.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<div className="flex justify-between font-semibold">
|
||
<span>مجموع</span>
|
||
<span>{group.total.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
</div>
|
||
|
||
{!group.meets_minimum_order && (
|
||
<p className="rounded-lg bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||
حداقل مبلغ سفارش برای این فروشگاه رعایت نشده است.
|
||
</p>
|
||
)}
|
||
</section>
|
||
))}
|
||
|
||
<div className="sticky bottom-4 flex flex-col gap-2 rounded-2xl border border-border bg-background p-4 shadow-lg">
|
||
<div className="flex justify-between font-semibold">
|
||
<span>مبلغ قابل پرداخت</span>
|
||
<span>{cart.grand_total.toLocaleString("fa-IR")} تومان</span>
|
||
</div>
|
||
<Link href={hasBlockedGroup ? "#" : "/checkout"} aria-disabled={hasBlockedGroup}>
|
||
<Button size="lg" className="w-full" disabled={hasBlockedGroup}>
|
||
ادامه و ثبت سفارش
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|