710 lines
25 KiB
TypeScript
710 lines
25 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
Box,
|
|||
|
|
Check,
|
|||
|
|
CheckCircle,
|
|||
|
|
CreditCard,
|
|||
|
|
Download,
|
|||
|
|
Home,
|
|||
|
|
MapPin,
|
|||
|
|
Package,
|
|||
|
|
Printer,
|
|||
|
|
Receipt,
|
|||
|
|
Truck,
|
|||
|
|
} from "lucide-react";
|
|||
|
|
import { useState } from "react";
|
|||
|
|
|
|||
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|||
|
|
import { Badge } from "@/components/ui/badge";
|
|||
|
|
import { Button } from "@/components/ui/button";
|
|||
|
|
import { Card, CardContent, CardHeader, CardTitle } 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 StepContent {
|
|||
|
|
title: string;
|
|||
|
|
description: string;
|
|||
|
|
details: { label: string; value: string }[];
|
|||
|
|
icon: "receipt" | "box" | "truck" | "home";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface TimelineStep {
|
|||
|
|
id: string;
|
|||
|
|
label: string;
|
|||
|
|
description: string;
|
|||
|
|
/** ISO 8601 datetime */
|
|||
|
|
date: string;
|
|||
|
|
completed: boolean;
|
|||
|
|
current: boolean;
|
|||
|
|
content: StepContent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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;
|
|||
|
|
estimatedDeliveryFrom: string;
|
|||
|
|
estimatedDeliveryTo?: string;
|
|||
|
|
paymentMethod: PaymentMethod;
|
|||
|
|
timeline: TimelineStep[];
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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 dateTimeFormatter = new Intl.DateTimeFormat("fa-IR", {
|
|||
|
|
year: "numeric",
|
|||
|
|
month: "short",
|
|||
|
|
day: "numeric",
|
|||
|
|
hour: "numeric",
|
|||
|
|
minute: "2-digit",
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const formatOrderDate = (isoDate: string) =>
|
|||
|
|
dateFormatter.format(new Date(isoDate + "T12:00:00"));
|
|||
|
|
|
|||
|
|
const formatStepDate = (isoDateTime: string) =>
|
|||
|
|
dateTimeFormatter.format(new Date(isoDateTime));
|
|||
|
|
|
|||
|
|
const formatDeliveryEstimate = (from: string, to?: string) => {
|
|||
|
|
if (to && to !== from) {
|
|||
|
|
return `${formatOrderDate(from)} تا ${formatOrderDate(to)}`;
|
|||
|
|
}
|
|||
|
|
return formatOrderDate(from);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const formatItemDetails = (details: OrderItem["details"]) => {
|
|||
|
|
if (!details?.length) return null;
|
|||
|
|
return details.map((d) => `${d.label} ${d.value}`).join(" · ");
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const DEFAULT_ORDER: OrderSummaryData = {
|
|||
|
|
orderNumber: "ORD-2024-78432",
|
|||
|
|
orderDate: "2024-12-14",
|
|||
|
|
status: "delivered",
|
|||
|
|
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",
|
|||
|
|
},
|
|||
|
|
timeline: [
|
|||
|
|
{
|
|||
|
|
id: "1",
|
|||
|
|
label: "ثبت سفارش",
|
|||
|
|
description: "سفارش شما دریافت شد",
|
|||
|
|
date: "2024-12-14T14:30:00",
|
|||
|
|
completed: true,
|
|||
|
|
current: false,
|
|||
|
|
content: {
|
|||
|
|
title: "سفارش تأیید شد",
|
|||
|
|
description:
|
|||
|
|
"سفارش شما دریافت شد و ایمیل تأیید ارسال گردید. پرداخت با موفقیت انجام شد.",
|
|||
|
|
icon: "receipt",
|
|||
|
|
details: [
|
|||
|
|
{ label: "شماره سفارش", value: "ORD-2024-78432" },
|
|||
|
|
{ label: "روش پرداخت", value: "کارت بانکی •••• 4242" },
|
|||
|
|
{
|
|||
|
|
label: "آدرس صورتحساب",
|
|||
|
|
value: "خیابان ولیعصر، تهران",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "مجموع سفارش",
|
|||
|
|
value: currencyFormatter.format(484.72),
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2",
|
|||
|
|
label: "آماده‌سازی",
|
|||
|
|
description: "در حال آماده‌سازی اقلام",
|
|||
|
|
date: "2024-12-14T16:15:00",
|
|||
|
|
completed: true,
|
|||
|
|
current: false,
|
|||
|
|
content: {
|
|||
|
|
title: "آماده‌سازی سفارش",
|
|||
|
|
description:
|
|||
|
|
"تیم انبار در حال جمع‌آوری و بسته‌بندی اقلام شماست. قبل از ارسال، کنترل کیفیت انجام می‌شود.",
|
|||
|
|
icon: "box",
|
|||
|
|
details: [
|
|||
|
|
{ label: "انبار", value: "مرکز توزیع تهران" },
|
|||
|
|
{ label: "اقلام بسته‌بندی‌شده", value: "۳ از ۳ قلم" },
|
|||
|
|
{ label: "کنترل کیفیت", value: "تأیید شد" },
|
|||
|
|
{ label: "بسته‌بندی", value: "مواد دوستدار محیط زیست" },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "3",
|
|||
|
|
label: "ارسال‌شده",
|
|||
|
|
description: "در مسیر تحویل",
|
|||
|
|
date: "2024-12-15T09:00:00",
|
|||
|
|
completed: true,
|
|||
|
|
current: false,
|
|||
|
|
content: {
|
|||
|
|
title: "ارسال به مقصد",
|
|||
|
|
description:
|
|||
|
|
"بسته شما در راه است! با شماره رهگیری زیر می‌توانید وضعیت را لحظه‌ای پیگیری کنید.",
|
|||
|
|
icon: "truck",
|
|||
|
|
details: [
|
|||
|
|
{ label: "شرکت حمل", value: "پست پیشتاز" },
|
|||
|
|
{
|
|||
|
|
label: "شماره رهگیری",
|
|||
|
|
value: "1Z999AA10123456784",
|
|||
|
|
},
|
|||
|
|
{ label: "تحویل تقریبی", value: "۱۷ آذر ۱۴۰۳" },
|
|||
|
|
{ label: "موقعیت فعلی", value: "تهران در حال انتقال" },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "4",
|
|||
|
|
label: "تحویل‌شده",
|
|||
|
|
description: "بسته تحویل داده شد",
|
|||
|
|
date: "2024-12-17T11:45:00",
|
|||
|
|
completed: true,
|
|||
|
|
current: true,
|
|||
|
|
content: {
|
|||
|
|
title: "تحویل موفق",
|
|||
|
|
description:
|
|||
|
|
"بسته شما تحویل داده شد! امیدواریم از خرید راضی باشید. ثبت نظر را فراموش نکنید.",
|
|||
|
|
icon: "home",
|
|||
|
|
details: [
|
|||
|
|
{ label: "محل تحویل", value: "درِ ورودی" },
|
|||
|
|
{ label: "تحویل‌گیرنده", value: "ع. محمدی" },
|
|||
|
|
{ label: "زمان تحویل", value: "۱۷ آذر ۱۴۰۳، ساعت ۱۱:۴۵" },
|
|||
|
|
{ label: "عکس تحویل", value: "در بخش رهگیری موجود است" },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
interface OrderSummary4Props {
|
|||
|
|
order?: OrderSummaryData;
|
|||
|
|
className?: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const OrderSummary4 = ({
|
|||
|
|
order = DEFAULT_ORDER,
|
|||
|
|
className,
|
|||
|
|
}: OrderSummary4Props) => {
|
|||
|
|
const [selectedStepIndex, setSelectedStepIndex] = useState(
|
|||
|
|
order.timeline.findIndex((step) => step.current),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const selectStep = (index: number) => {
|
|||
|
|
setSelectedStepIndex(index);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const selectedStep = order.timeline[selectedStepIndex];
|
|||
|
|
const completedSteps = order.timeline.filter((step) => step.completed).length;
|
|||
|
|
const progressPercentage = (completedSteps / order.timeline.length) * 100;
|
|||
|
|
const itemCountLabel =
|
|||
|
|
order.items.length === 1
|
|||
|
|
? "یک قلم"
|
|||
|
|
: `${order.items.length.toLocaleString("fa-IR")} قلم`;
|
|||
|
|
|
|||
|
|
const getStepIcon = (iconType: StepContent["icon"]) => {
|
|||
|
|
switch (iconType) {
|
|||
|
|
case "receipt":
|
|||
|
|
return <Receipt className="size-5" aria-hidden="true" />;
|
|||
|
|
case "box":
|
|||
|
|
return <Box className="size-5" aria-hidden="true" />;
|
|||
|
|
case "truck":
|
|||
|
|
return <Truck className="size-5" aria-hidden="true" />;
|
|||
|
|
case "home":
|
|||
|
|
return <Home className="size-5" aria-hidden="true" />;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const isTrackingDetail = (label: string) =>
|
|||
|
|
label === "شماره رهگیری" || label === "شماره سفارش";
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
dir="rtl"
|
|||
|
|
lang="fa"
|
|||
|
|
className={cn("py-16 md:py-24", className)}
|
|||
|
|
>
|
|||
|
|
<div className="container max-w-3xl">
|
|||
|
|
<div className="mb-8 text-center">
|
|||
|
|
<div className="mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-emerald-500/10">
|
|||
|
|
<CheckCircle
|
|||
|
|
className="size-7 text-emerald-600"
|
|||
|
|
aria-hidden="true"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<h1 className="mb-1 text-xl font-bold tracking-tight md:text-3xl">
|
|||
|
|
از خرید شما سپاسگزاریم!
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
سفارش{" "}
|
|||
|
|
<span className="font-medium" dir="rtl">
|
|||
|
|
{order.orderNumber}
|
|||
|
|
</span>{" "}
|
|||
|
|
· {formatOrderDate(order.orderDate)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Card className="mb-6 shadow-none">
|
|||
|
|
<CardHeader className="pb-2">
|
|||
|
|
<CardTitle className="text-base">وضعیت سفارش</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent>
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<div className="h-2 w-full overflow-hidden rounded-full bg-muted">
|
|||
|
|
<div
|
|||
|
|
className="h-full bg-emerald-500 transition-all duration-500"
|
|||
|
|
style={{ width: `${progressPercentage}%` }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<p className="mt-2 text-xs text-muted-foreground">
|
|||
|
|
{completedSteps === order.timeline.length
|
|||
|
|
? "سفارش تحویل داده شد!"
|
|||
|
|
: `مرحله ${completedSteps.toLocaleString("fa-IR")} از ${order.timeline.length.toLocaleString("fa-IR")}`}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="hidden md:block">
|
|||
|
|
<div className="relative flex justify-between">
|
|||
|
|
{order.timeline.map((step, index) => (
|
|||
|
|
<div
|
|||
|
|
key={step.id}
|
|||
|
|
className={cn(
|
|||
|
|
"flex flex-col items-center text-center",
|
|||
|
|
index === 0 && "items-start text-start",
|
|||
|
|
index === order.timeline.length - 1 &&
|
|||
|
|
"items-end text-end",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => selectStep(index)}
|
|||
|
|
aria-label={`${step.label}، ${formatStepDate(step.date)}`}
|
|||
|
|
aria-current={
|
|||
|
|
selectedStepIndex === index ? "step" : undefined
|
|||
|
|
}
|
|||
|
|
className={cn(
|
|||
|
|
"mb-2 flex size-10 items-center justify-center rounded-full border-2 transition-all hover:scale-110",
|
|||
|
|
step.completed
|
|||
|
|
? "border-emerald-500 bg-emerald-500 text-white"
|
|||
|
|
: "border-muted bg-muted hover:border-emerald-300",
|
|||
|
|
selectedStepIndex === index &&
|
|||
|
|
"ring-2 ring-emerald-500 ring-offset-2 ring-offset-background",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{step.completed ? (
|
|||
|
|
<Check className="size-5" aria-hidden="true" />
|
|||
|
|
) : (
|
|||
|
|
<span className="text-sm font-medium text-muted-foreground">
|
|||
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"text-sm font-medium",
|
|||
|
|
selectedStepIndex === index
|
|||
|
|
? "text-emerald-600"
|
|||
|
|
: step.completed
|
|||
|
|
? "text-foreground"
|
|||
|
|
: "text-muted-foreground",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{step.label}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
|||
|
|
{formatStepDate(step.date)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="md:hidden">
|
|||
|
|
<div className="space-y-3">
|
|||
|
|
{order.timeline.map((step, index) => (
|
|||
|
|
<button
|
|||
|
|
key={step.id}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => selectStep(index)}
|
|||
|
|
aria-label={`${step.label}، ${formatStepDate(step.date)}`}
|
|||
|
|
aria-current={
|
|||
|
|
selectedStepIndex === index ? "step" : undefined
|
|||
|
|
}
|
|||
|
|
className={cn(
|
|||
|
|
"flex w-full gap-3 rounded-lg p-2 text-start transition-colors",
|
|||
|
|
selectedStepIndex === index
|
|||
|
|
? "bg-emerald-500/10"
|
|||
|
|
: "hover:bg-muted",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col items-center">
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"flex size-8 shrink-0 items-center justify-center rounded-full border-2",
|
|||
|
|
step.completed
|
|||
|
|
? "border-emerald-500 bg-emerald-500 text-white"
|
|||
|
|
: "border-muted bg-muted",
|
|||
|
|
selectedStepIndex === index &&
|
|||
|
|
"ring-2 ring-emerald-500 ring-offset-1",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{step.completed ? (
|
|||
|
|
<Check className="size-4" aria-hidden="true" />
|
|||
|
|
) : (
|
|||
|
|
<span className="text-xs font-medium text-muted-foreground">
|
|||
|
|
{(index + 1).toLocaleString("fa-IR")}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{index < order.timeline.length - 1 && (
|
|||
|
|
<div
|
|||
|
|
className={cn(
|
|||
|
|
"mt-1 h-6 w-0.5",
|
|||
|
|
step.completed ? "bg-emerald-500" : "bg-muted",
|
|||
|
|
)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="min-w-0 flex-1 pb-2">
|
|||
|
|
<p
|
|||
|
|
className={cn(
|
|||
|
|
"font-medium",
|
|||
|
|
selectedStepIndex === index
|
|||
|
|
? "text-emerald-600"
|
|||
|
|
: step.completed
|
|||
|
|
? "text-foreground"
|
|||
|
|
: "text-muted-foreground",
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{step.label}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
{step.description}
|
|||
|
|
</p>
|
|||
|
|
<p className="mt-0.5 text-xs text-muted-foreground">
|
|||
|
|
{formatStepDate(step.date)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-6 rounded-lg border bg-muted/30 p-4">
|
|||
|
|
<div className="mb-4 flex items-center gap-3">
|
|||
|
|
<div className="flex size-10 items-center justify-center rounded-full bg-emerald-500/10 text-emerald-600">
|
|||
|
|
{getStepIcon(selectedStep.content.icon)}
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<h3 className="font-semibold">
|
|||
|
|
{selectedStep.content.title}
|
|||
|
|
</h3>
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
{formatStepDate(selectedStep.date)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="mb-4 text-sm text-muted-foreground">
|
|||
|
|
{selectedStep.content.description}
|
|||
|
|
</p>
|
|||
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|||
|
|
{selectedStep.content.details.map((detail) => (
|
|||
|
|
<div
|
|||
|
|
key={detail.label}
|
|||
|
|
className="rounded-md bg-background p-3"
|
|||
|
|
>
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
{detail.label}
|
|||
|
|
</p>
|
|||
|
|
<p
|
|||
|
|
className="text-sm font-medium"
|
|||
|
|
dir={isTrackingDetail(detail.label) ? "ltr" : undefined}
|
|||
|
|
>
|
|||
|
|
{detail.value}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="mb-6 shadow-none">
|
|||
|
|
<CardHeader className="pb-4">
|
|||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|||
|
|
<Package className="size-4" aria-hidden="true" />
|
|||
|
|
{itemCountLabel}
|
|||
|
|
</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-4">
|
|||
|
|
{order.items.map((item, index) => (
|
|||
|
|
<div key={item.id}>
|
|||
|
|
<div className="flex gap-4">
|
|||
|
|
<div className="w-16 shrink-0">
|
|||
|
|
<AspectRatio
|
|||
|
|
ratio={1}
|
|||
|
|
className="overflow-hidden rounded-md bg-muted"
|
|||
|
|
>
|
|||
|
|
<img
|
|||
|
|
src={item.image}
|
|||
|
|
alt={item.name}
|
|||
|
|
className="size-full object-cover"
|
|||
|
|
/>
|
|||
|
|
</AspectRatio>
|
|||
|
|
</div>
|
|||
|
|
<div className="min-w-0 flex-1">
|
|||
|
|
<div className="flex items-start justify-between gap-2">
|
|||
|
|
<div>
|
|||
|
|
<h3 className="text-sm font-medium">{item.name}</h3>
|
|||
|
|
{item.details && (
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
{formatItemDetails(item.details)}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
تعداد: {item.quantity.toLocaleString("fa-IR")}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-sm font-medium tabular-nums">
|
|||
|
|
{currencyFormatter.format(item.price * item.quantity)}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{index < order.items.length - 1 && (
|
|||
|
|
<Separator className="mt-4" />
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<div className="mb-6 grid gap-6 md:grid-cols-2">
|
|||
|
|
<Card className="shadow-none">
|
|||
|
|
<CardHeader className="pb-3">
|
|||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|||
|
|
<MapPin className="size-4" aria-hidden="true" />
|
|||
|
|
تحویل
|
|||
|
|
</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-medium">
|
|||
|
|
{order.shippingAddress.name}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
{order.shippingAddress.street}
|
|||
|
|
</p>
|
|||
|
|
<p className="text-sm text-muted-foreground">
|
|||
|
|
{order.shippingAddress.city}،{" "}
|
|||
|
|
{order.shippingAddress.state} کد پستی{" "}
|
|||
|
|
<span dir="rtl" className="tabular-nums">
|
|||
|
|
{order.shippingAddress.zipCode}
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<Separator />
|
|||
|
|
<div className="flex items-center gap-2 text-sm">
|
|||
|
|
<Truck className="size-4 text-muted-foreground" aria-hidden="true" />
|
|||
|
|
<span>{order.shippingMethod}</span>
|
|||
|
|
</div>
|
|||
|
|
<Badge variant="secondary" className="text-xs">
|
|||
|
|
تحویل تقریبی:{" "}
|
|||
|
|
{formatDeliveryEstimate(
|
|||
|
|
order.estimatedDeliveryFrom,
|
|||
|
|
order.estimatedDeliveryTo,
|
|||
|
|
)}
|
|||
|
|
</Badge>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
|
|||
|
|
<Card className="shadow-none">
|
|||
|
|
<CardHeader className="pb-3">
|
|||
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|||
|
|
<CreditCard className="size-4" aria-hidden="true" />
|
|||
|
|
پرداخت
|
|||
|
|
</CardTitle>
|
|||
|
|
</CardHeader>
|
|||
|
|
<CardContent className="space-y-3">
|
|||
|
|
{order.paymentMethod.type === "card" && (
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<img
|
|||
|
|
src="/block-media/shadcnblocks/block/logos/visa-icon.svg"
|
|||
|
|
alt="ویزا"
|
|||
|
|
className="size-6"
|
|||
|
|
/>
|
|||
|
|
<span className="text-sm" dir="rtl">
|
|||
|
|
•••• {order.paymentMethod.lastFour}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<Separator />
|
|||
|
|
<div className="space-y-1.5 text-sm">
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span className="text-muted-foreground">جمع جزء</span>
|
|||
|
|
<span className="tabular-nums">
|
|||
|
|
{currencyFormatter.format(order.subtotal)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span className="text-muted-foreground">هزینه ارسال</span>
|
|||
|
|
<span className="tabular-nums">
|
|||
|
|
{order.shipping === 0
|
|||
|
|
? "رایگان"
|
|||
|
|
: currencyFormatter.format(order.shipping)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex justify-between">
|
|||
|
|
<span className="text-muted-foreground">مالیات</span>
|
|||
|
|
<span className="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="tabular-nums">
|
|||
|
|
−{currencyFormatter.format(order.discount)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<Separator />
|
|||
|
|
<div className="flex justify-between font-semibold">
|
|||
|
|
<span>مجموع</span>
|
|||
|
|
<span className="tabular-nums">
|
|||
|
|
{currencyFormatter.format(order.total)}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</CardContent>
|
|||
|
|
</Card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap justify-center gap-3">
|
|||
|
|
<Button>
|
|||
|
|
<Package className="me-2 size-4" aria-hidden="true" />
|
|||
|
|
پیگیری سفارش
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="outline">
|
|||
|
|
<Download className="me-2 size-4" aria-hidden="true" />
|
|||
|
|
دانلود رسید
|
|||
|
|
</Button>
|
|||
|
|
<Button variant="ghost">
|
|||
|
|
<Printer className="me-2 size-4" aria-hidden="true" />
|
|||
|
|
چاپ
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<p className="mt-8 text-center text-sm text-muted-foreground">
|
|||
|
|
ایمیل تأیید به{" "}
|
|||
|
|
<span className="font-medium text-foreground" dir="rtl">
|
|||
|
|
{order.email}
|
|||
|
|
</span>{" "}
|
|||
|
|
ارسال شد.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export { OrderSummary4 };
|