360 lines
12 KiB
TypeScript
360 lines
12 KiB
TypeScript
import { CheckCircle, MapPin, Package, Receipt, Truck } from "lucide-react";
|
||
|
||
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card, CardContent } from "@/components/ui/card";
|
||
import { Separator } from "@/components/ui/separator";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
interface OrderItem {
|
||
id: string;
|
||
name: string;
|
||
image: string;
|
||
price: number;
|
||
quantity: number;
|
||
details?: { label: string; value: string }[];
|
||
}
|
||
|
||
interface ShippingAddress {
|
||
name: string;
|
||
street: string;
|
||
city: string;
|
||
state: string;
|
||
zipCode: string;
|
||
country: string;
|
||
}
|
||
|
||
interface PaymentMethod {
|
||
type: "card" | "paypal" | "bank";
|
||
lastFour?: string;
|
||
cardBrand?: string;
|
||
email?: string;
|
||
}
|
||
|
||
interface OrderSummaryData {
|
||
orderNumber: string;
|
||
/** ISO 8601 date (YYYY-MM-DD) */
|
||
orderDate: string;
|
||
status: "confirmed" | "processing" | "shipped" | "delivered";
|
||
email: string;
|
||
items: OrderItem[];
|
||
subtotal: number;
|
||
shipping: number;
|
||
tax: number;
|
||
discount?: number;
|
||
total: number;
|
||
shippingAddress: ShippingAddress;
|
||
shippingMethod: string;
|
||
/** ISO 8601 date range for estimated delivery */
|
||
estimatedDeliveryFrom: string;
|
||
estimatedDeliveryTo?: string;
|
||
paymentMethod: PaymentMethod;
|
||
}
|
||
|
||
const currencyFormatter = new Intl.NumberFormat("fa-IR", {
|
||
style: "currency",
|
||
currency: "IRR",
|
||
});
|
||
|
||
const dateFormatter = new Intl.DateTimeFormat("fa-IR", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
});
|
||
|
||
const formatOrderDate = (isoDate: string) =>
|
||
dateFormatter.format(new Date(isoDate + "T12:00:00"));
|
||
|
||
const formatDeliveryEstimate = (from: string, to?: string) => {
|
||
if (to && to !== from) {
|
||
return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
|
||
}
|
||
return formatOrderDate(from);
|
||
};
|
||
|
||
const DEFAULT_ORDER: OrderSummaryData = {
|
||
orderNumber: "ORD-2024-78432",
|
||
orderDate: "2024-12-14",
|
||
status: "confirmed",
|
||
email: "customer@example.com",
|
||
items: [
|
||
{
|
||
id: "1",
|
||
name: "کفش بژ مینیمال",
|
||
image:
|
||
"/block-media/shadcnblocks/block/ecommerce/clothes/Minimalist-Beige-Sneakers-2.png",
|
||
price: 120.0,
|
||
quantity: 1,
|
||
details: [
|
||
{ label: "سایز", value: "42" },
|
||
{ label: "رنگ", value: "بژ" },
|
||
],
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "تاپ آبی گلدوزی",
|
||
image:
|
||
"/block-media/shadcnblocks/block/ecommerce/clothes/Woman-in-Embroidered-Blue-Top-2.png",
|
||
price: 140.0,
|
||
quantity: 2,
|
||
details: [
|
||
{ label: "سایز", value: "M" },
|
||
{ label: "رنگ", value: "آبی" },
|
||
],
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "کلاه فدورا کلاسیک",
|
||
image:
|
||
"/block-media/shadcnblocks/block/ecommerce/accessories/Classic-Fedora-Hat-2.png",
|
||
price: 84.0,
|
||
quantity: 1,
|
||
details: [{ label: "سایز", value: "یک سایز" }],
|
||
},
|
||
],
|
||
subtotal: 484.0,
|
||
shipping: 12.0,
|
||
tax: 38.72,
|
||
discount: 50.0,
|
||
total: 484.72,
|
||
shippingAddress: {
|
||
name: "علی محمدی",
|
||
street: "خیابان ولیعصر، پلاک ۱۲۳۴، واحد ۵",
|
||
city: "تهران",
|
||
state: "تهران",
|
||
zipCode: "1415783114",
|
||
country: "ایران",
|
||
},
|
||
shippingMethod: "ارسال سریع",
|
||
estimatedDeliveryFrom: "2024-12-18",
|
||
estimatedDeliveryTo: "2024-12-20",
|
||
paymentMethod: {
|
||
type: "card",
|
||
lastFour: "4242",
|
||
cardBrand: "Visa",
|
||
},
|
||
};
|
||
|
||
interface OrderSummary3Props {
|
||
order?: OrderSummaryData;
|
||
className?: string;
|
||
}
|
||
|
||
const OrderSummary3 = ({
|
||
order = DEFAULT_ORDER,
|
||
className,
|
||
}: OrderSummary3Props) => {
|
||
return (
|
||
<section
|
||
dir="rtl"
|
||
lang="fa"
|
||
className={cn("py-16 md:py-24", className)}
|
||
>
|
||
<div className="container">
|
||
<div className="mb-12 text-center">
|
||
<div className="mx-auto mb-6 flex size-20 items-center justify-center rounded-full bg-emerald-500">
|
||
<CheckCircle
|
||
className="size-10 text-white"
|
||
strokeWidth={2.5}
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
<h1 className="mb-3 text-xl font-bold tracking-tight md:text-2xll">
|
||
سفارش تأیید شد
|
||
</h1>
|
||
<p className="text-lg text-muted-foreground">
|
||
تأییدیه به{" "}
|
||
<span className="font-semibold text-foreground" dir="rtl">
|
||
{order.email}
|
||
</span>{" "}
|
||
ارسال شد.
|
||
</p>
|
||
</div>
|
||
|
||
<Card className="mb-10 border-2 shadow-none">
|
||
<CardContent className="grid grid-cols-2 divide-x divide-y p-0 md:grid-cols-4 md:divide-y-0">
|
||
<div className="p-5">
|
||
<p className="text-xs font-medium tracking-wider text-muted-foreground">
|
||
شناسه سفارش
|
||
</p>
|
||
<p className="mt-1 text-lg font-bold" dir="rtl">
|
||
{order.orderNumber}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-5">
|
||
<p className="text-xs font-medium tracking-wider text-muted-foreground">
|
||
تاریخ سفارش
|
||
</p>
|
||
<p className="mt-1 text-lg font-bold">
|
||
{formatOrderDate(order.orderDate)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-5">
|
||
<p className="text-xs font-medium tracking-wider text-muted-foreground">
|
||
تحویل
|
||
</p>
|
||
<p className="mt-1 text-lg font-bold">
|
||
{formatDeliveryEstimate(
|
||
order.estimatedDeliveryFrom,
|
||
order.estimatedDeliveryTo,
|
||
)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-5">
|
||
<p className="text-xs font-medium tracking-wider text-muted-foreground">
|
||
پرداخت
|
||
</p>
|
||
<p className="mt-1 text-lg font-bold" dir="rtl">
|
||
{order.paymentMethod.cardBrand} ****
|
||
{order.paymentMethod.lastFour}
|
||
</p>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<div className="mb-10">
|
||
<h2 className="mb-6 text-xl font-bold">اقلام شما</h2>
|
||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||
{order.items.map((item) => (
|
||
<Card
|
||
key={item.id}
|
||
className="overflow-hidden border-2 p-0 shadow-none"
|
||
>
|
||
<AspectRatio ratio={1} className="bg-muted">
|
||
<img
|
||
src={item.image}
|
||
alt={item.name}
|
||
className="size-full object-cover"
|
||
/>
|
||
</AspectRatio>
|
||
<CardContent className="p-5">
|
||
<h3 className="text-lg font-bold">{item.name}</h3>
|
||
{item.details && (
|
||
<p className="mt-1 text-sm text-muted-foreground">
|
||
{item.details.map((d, i) => (
|
||
<span key={d.label}>
|
||
{d.label}: {d.value}
|
||
{i < item.details!.length - 1 && " · "}
|
||
</span>
|
||
))}
|
||
</p>
|
||
)}
|
||
<div className="mt-3 flex items-center justify-between">
|
||
<span className="text-sm text-muted-foreground">
|
||
تعداد: {item.quantity.toLocaleString("fa-IR")}
|
||
</span>
|
||
<span className="text-xl font-bold tabular-nums">
|
||
{currencyFormatter.format(item.price * item.quantity)}
|
||
</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-2 shadow-none">
|
||
<CardContent className="p-6">
|
||
<div className="mb-4 flex items-center gap-3">
|
||
<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
|
||
<MapPin className="size-6 text-primary" aria-hidden="true" />
|
||
</div>
|
||
<h3 className="text-xl font-bold">آدرس ارسال</h3>
|
||
</div>
|
||
<div className="space-y-1 text-muted-foreground">
|
||
<p className="font-semibold text-foreground">
|
||
{order.shippingAddress.name}
|
||
</p>
|
||
<p>{order.shippingAddress.street}</p>
|
||
<p>
|
||
{order.shippingAddress.city}،{" "}
|
||
{order.shippingAddress.state} کد پستی{" "}
|
||
<span dir="rtl" className="tabular-nums">
|
||
{order.shippingAddress.zipCode}
|
||
</span>
|
||
</p>
|
||
<p>{order.shippingAddress.country}</p>
|
||
</div>
|
||
<Separator className="my-4" />
|
||
<div className="flex items-center gap-2 text-sm">
|
||
<Package
|
||
className="size-4 text-muted-foreground"
|
||
aria-hidden="true"
|
||
/>
|
||
<span className="font-medium">{order.shippingMethod}</span>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-2 shadow-none">
|
||
<CardContent className="p-6">
|
||
<div className="mb-4 flex items-center gap-3">
|
||
<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
|
||
<Receipt
|
||
className="size-6 text-primary"
|
||
aria-hidden="true"
|
||
/>
|
||
</div>
|
||
<h3 className="text-xl font-bold">خلاصه سفارش</h3>
|
||
</div>
|
||
<div className="space-y-3">
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">جمع جزء</span>
|
||
<span className="font-medium tabular-nums">
|
||
{currencyFormatter.format(order.subtotal)}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">هزینه ارسال</span>
|
||
<span className="font-medium tabular-nums">
|
||
{order.shipping === 0
|
||
? "رایگان"
|
||
: currencyFormatter.format(order.shipping)}
|
||
</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span className="text-muted-foreground">مالیات</span>
|
||
<span className="font-medium tabular-nums">
|
||
{currencyFormatter.format(order.tax)}
|
||
</span>
|
||
</div>
|
||
{order.discount && order.discount > 0 && (
|
||
<div className="flex justify-between text-emerald-600">
|
||
<span>تخفیف</span>
|
||
<span className="font-medium tabular-nums">
|
||
−{currencyFormatter.format(order.discount)}
|
||
</span>
|
||
</div>
|
||
)}
|
||
<Separator />
|
||
<div className="flex items-center justify-between pt-2">
|
||
<span className="text-xl font-bold">مبلغ پرداختشده</span>
|
||
<span className="text-xl font-bold tabular-nums">
|
||
{currencyFormatter.format(order.total)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="mt-10 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
||
<Button size="lg" className="w-full px-8 sm:w-auto">
|
||
<Truck className="me-2 size-5" aria-hidden="true" />
|
||
پیگیری سفارش
|
||
</Button>
|
||
<Button size="lg" variant="outline" className="w-full px-8 sm:w-auto">
|
||
ادامه خرید
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export { OrderSummary3 };
|