refactor(orders): clean up OrderDetailPage layout and improve code readability
- Standardize formatting and indentation for better readability - Enhance the display of order details, including shipping method and delivery slot - Ensure consistent handling of order properties and conditional rendering - Update payment section to include payment method and transaction details
This commit is contained in:
parent
62c4544897
commit
eac8e9eb08
|
|
@ -94,8 +94,8 @@ const OrderDetailPage = () => {
|
|||
const { mutate: updateStatus, isPending: isUpdating } = useUpdateOrderStatus();
|
||||
const { data: shippingMethods = [] } = useShippingMethods();
|
||||
const order = data?.order;
|
||||
|
||||
const shippingMethod = order?.shipping_method_id
|
||||
|
||||
const shippingMethod = order?.shipping_method_id
|
||||
? shippingMethods.find(method => method.id === order.shipping_method_id)
|
||||
: null;
|
||||
const handleStatusUpdate = () => {
|
||||
|
|
@ -182,8 +182,8 @@ const OrderDetailPage = () => {
|
|||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg border border-gray-200 dark:border-gray-600">
|
||||
<div className="shrink-0">
|
||||
{order.user.avatar ? (
|
||||
<img
|
||||
src={order.user.avatar}
|
||||
<img
|
||||
src={order.user.avatar}
|
||||
alt={`${order.user.first_name} ${order.user.last_name}`}
|
||||
className="h-12 w-12 rounded-full object-cover border-2 border-indigo-200 dark:border-indigo-700"
|
||||
/>
|
||||
|
|
@ -308,249 +308,249 @@ const OrderDetailPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* اطلاعات سفارش */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
||||
<Package className="h-5 w-5 text-blue-600 dark:text-blue-300" />
|
||||
</div>
|
||||
<SectionTitle>اطلاعات سفارش</SectionTitle>
|
||||
{/* اطلاعات سفارش */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
||||
<Package className="h-5 w-5 text-blue-600 dark:text-blue-300" />
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(order?.status || 'pending')}`}>
|
||||
{getStatusText(order?.status || 'pending')}
|
||||
</span>
|
||||
<SectionTitle>اطلاعات سفارش</SectionTitle>
|
||||
</div>
|
||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(order?.status || 'pending')}`}>
|
||||
{getStatusText(order?.status || 'pending')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شماره سفارش</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">#{order?.order_number || 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ ثبت</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.created_at ? formatDate(order.created_at) : 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه فاکتور</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 font-mono">{order?.invoice_id || 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه کاربر</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.user_id || 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ آخرین بروزرسانی</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.updated_at ? formatDate(order.updated_at) : 'نامشخص'}</p>
|
||||
</div>
|
||||
{/* روش حمل و نقل در دادههای فعلی وجود ندارد */}
|
||||
{order?.tracking_number && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">کد رهگیری</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 font-mono">{order.tracking_number}</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.estimated_delivery && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ تحویل تخمینی</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{formatDate(order.estimated_delivery)}</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.shipping_method_id !== undefined && order?.shipping_method_id !== null && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">متد ارسال</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{shippingMethod
|
||||
? shippingMethod.name
|
||||
: shippingMethods.length === 0
|
||||
? `شناسه: ${order.shipping_method_id} (در حال بارگذاری...)`
|
||||
: `شناسه: ${order.shipping_method_id}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.selected_delivery_slot && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">زمان تحویل انتخاب شده</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{typeof order.selected_delivery_slot === 'object'
|
||||
? `${order.selected_delivery_slot.date || ''} ${order.selected_delivery_slot.from_hour || ''}:${order.selected_delivery_slot.to_hour || ''}`
|
||||
: String(order.selected_delivery_slot)
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شماره سفارش</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">#{order?.order_number || 'نامشخص'}</p>
|
||||
</div>
|
||||
{order?.notes && (
|
||||
<div className="mt-6">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">یادداشت</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
|
||||
{order.notes}
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ ثبت</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.created_at ? formatDate(order.created_at) : 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه فاکتور</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 font-mono">{order?.invoice_id || 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شناسه کاربر</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.user_id || 'نامشخص'}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ آخرین بروزرسانی</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{order?.updated_at ? formatDate(order.updated_at) : 'نامشخص'}</p>
|
||||
</div>
|
||||
{/* روش حمل و نقل در دادههای فعلی وجود ندارد */}
|
||||
{order?.tracking_number && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">کد رهگیری</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 font-mono">{order.tracking_number}</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.estimated_delivery && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ تحویل تخمینی</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">{formatDate(order.estimated_delivery)}</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.shipping_method_id !== undefined && order?.shipping_method_id !== null && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">متد ارسال</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{shippingMethod
|
||||
? shippingMethod.name
|
||||
: shippingMethods.length === 0
|
||||
? `شناسه: ${order.shipping_method_id} (در حال بارگذاری...)`
|
||||
: `شناسه: ${order.shipping_method_id}`
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{order?.selected_delivery_slot && (
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">زمان تحویل انتخاب شده</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400">
|
||||
{typeof order.selected_delivery_slot === 'object'
|
||||
? `${order.selected_delivery_slot.date || ''} ${order.selected_delivery_slot.from_hour || ''}:${order.selected_delivery_slot.to_hour || ''}`
|
||||
: String(order.selected_delivery_slot)
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* آیتمهای سفارش */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
|
||||
<Package className="h-5 w-5 text-green-600 dark:text-green-300" />
|
||||
</div>
|
||||
<SectionTitle>محصولات سفارش</SectionTitle>
|
||||
{order?.notes && (
|
||||
<div className="mt-6">
|
||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">یادداشت</h4>
|
||||
<p className="text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
|
||||
{order.notes}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* آیتمهای سفارش */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-green-100 dark:bg-green-900 rounded-lg">
|
||||
<Package className="h-5 w-5 text-green-600 dark:text-green-300" />
|
||||
</div>
|
||||
<SectionTitle>محصولات سفارش</SectionTitle>
|
||||
</div>
|
||||
<div className="p-0">
|
||||
{order?.items && order.items.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{order.items.map((item) => {
|
||||
const baseWeight = (item.weight ?? 0) as number;
|
||||
const weightGr = Math.round(baseWeight * 1000);
|
||||
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
|
||||
const imageUrl = item.image_url || item.product_image;
|
||||
return (
|
||||
<div key={item.id} className="px-4 md:px-6 py-3">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 md:p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 min-w-0 flex-1">
|
||||
{imageUrl && (
|
||||
<div className="shrink-0">
|
||||
<img
|
||||
src={resolveImageUrl(imageUrl)}
|
||||
alt={item.product_name || 'محصول'}
|
||||
className="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-600"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-0">
|
||||
{order?.items && order.items.length > 0 ? (
|
||||
<div className="space-y-4">
|
||||
{order.items.map((item) => {
|
||||
const baseWeight = (item.weight ?? 0) as number;
|
||||
const weightGr = Math.round(baseWeight * 1000);
|
||||
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
|
||||
const imageUrl = item.image_url || item.product_image;
|
||||
return (
|
||||
<div key={item.id} className="px-4 md:px-6 py-3">
|
||||
<div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 md:p-5 shadow-sm">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 min-w-0 flex-1">
|
||||
{imageUrl && (
|
||||
<div className="shrink-0">
|
||||
<img
|
||||
src={resolveImageUrl(imageUrl)}
|
||||
alt={item.product_name || 'محصول'}
|
||||
className="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-600"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement;
|
||||
target.style.display = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
|
||||
{item.product_name || `محصول شناسه: ${item.product_id}`}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
|
||||
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-left shrink-0">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">جمع</div>
|
||||
<div className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">تعداد</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">وزن (گرم)</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600 col-span-2 md:col-span-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">قیمت واحد</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatCurrency(item.unit_price || 0)}</div>
|
||||
</div>
|
||||
<div className="text-left shrink-0">
|
||||
<div className="text-xs text-gray-500 dark:text-gray-400">جمع</div>
|
||||
<div className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100">{formatCurrency(item.total_price || 0)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">تعداد</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">وزن (گرم)</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-50 dark:bg-gray-700/50 px-3 py-2 border border-gray-200 dark:border-gray-600 col-span-2 md:col-span-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">قیمت واحد</div>
|
||||
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatCurrency(item.unit_price || 0)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 dark:text-gray-400 text-center py-6">
|
||||
محصولی در این سفارش یافت نشد
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-500 dark:text-gray-400 text-center py-6">
|
||||
محصولی در این سفارش یافت نشد
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* اطلاعات پرداخت */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-teal-100 dark:bg-teal-900 rounded-lg">
|
||||
<CreditCard className="h-5 w-5 text-teal-600 dark:text-teal-300" />
|
||||
</div>
|
||||
<SectionTitle>پرداخت</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* اطلاعات پرداخت */}
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-600 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-teal-100 dark:bg-teal-900 rounded-lg">
|
||||
<CreditCard className="h-5 w-5 text-teal-600 dark:text-teal-300" />
|
||||
</div>
|
||||
<SectionTitle>پرداخت</SectionTitle>
|
||||
</div>
|
||||
<div className="p-6 space-y-4 overflow-hidden">
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">جمع اقلام</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.net_total || 0)}</span>
|
||||
</div>
|
||||
<div className="p-6 space-y-4 overflow-hidden">
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">مالیات</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.vat_total || 0)}</span>
|
||||
</div>
|
||||
{order?.base_gold_price !== undefined && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">جمع اقلام</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.net_total || 0)}</span>
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">قیمت پایه طلا</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order.base_gold_price)}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">مالیات</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.vat_total || 0)}</span>
|
||||
</div>
|
||||
{order?.base_gold_price !== undefined && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">قیمت پایه طلا</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order.base_gold_price)}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">هزینه ارسال</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.shipping_total || 0)}</span>
|
||||
</div>
|
||||
{(order?.discount_total || 0) > 0 && (
|
||||
<div className="flex justify-between text-green-600 dark:text-green-400 gap-2">
|
||||
<span className="shrink-0">تخفیف کل</span>
|
||||
<span className="font-medium break-all text-left">-{formatCurrency(order?.discount_total || 0)}</span>
|
||||
</div>
|
||||
)}
|
||||
<hr className="border-gray-200 dark:border-gray-700" />
|
||||
<div className="flex items-center justify-between text-lg font-bold gap-2">
|
||||
<span className="text-gray-900 dark:text-gray-100 shrink-0">مجموع نهایی</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.final_total || 0)}</span>
|
||||
)}
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">هزینه ارسال</span>
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.shipping_total || 0)}</span>
|
||||
</div>
|
||||
{(order?.discount_total || 0) > 0 && (
|
||||
<div className="flex justify-between text-green-600 dark:text-green-400 gap-2">
|
||||
<span className="shrink-0">تخفیف کل</span>
|
||||
<span className="font-medium break-all text-left">-{formatCurrency(order?.discount_total || 0)}</span>
|
||||
</div>
|
||||
)}
|
||||
<hr className="border-gray-200 dark:border-gray-700" />
|
||||
<div className="flex items-center justify-between text-lg font-bold gap-2">
|
||||
<span className="text-gray-900 dark:text-gray-100 shrink-0">مجموع نهایی</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.final_total || 0)}</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="space-y-2">
|
||||
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">وضعیت پرداخت</span>
|
||||
<span className={`text-sm font-medium px-2 py-1 rounded-full shrink-0 ${order?.payment_status === 'paid'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||
}`}>
|
||||
{order?.payment_status === 'paid' ? 'پرداخت شده' : 'در انتظار پرداخت'}
|
||||
</span>
|
||||
</div>
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments.length > 0 && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">وضعیت پرداخت</span>
|
||||
<span className={`text-sm font-medium px-2 py-1 rounded-full shrink-0 ${order?.payment_status === 'paid'
|
||||
? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
|
||||
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
|
||||
}`}>
|
||||
{order?.payment_status === 'paid' ? 'پرداخت شده' : 'در انتظار پرداخت'}
|
||||
</span>
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">روش پرداخت</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 break-words text-left">{formatPaymentType((data as any).payments[0].payment_type)}</span>
|
||||
</div>
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments.length > 0 && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">روش پرداخت</span>
|
||||
<span className="text-gray-900 dark:text-gray-100 break-words text-left">{formatPaymentType((data as any).payments[0].payment_type)}</span>
|
||||
</div>
|
||||
)}
|
||||
{order?.invoice_id && (
|
||||
<div className="flex items-start justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شماره فاکتور</span>
|
||||
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{order.invoice_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.transaction_id && (
|
||||
<div className="flex items-start justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شناسه تراکنش</span>
|
||||
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{(data as any).payments[0].transaction_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.image_urls?.length > 0 && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">رسید پرداخت</span>
|
||||
<a href={(data as any).payments[0].image_urls[0]} target="_blank" rel="noreferrer" className="shrink-0">
|
||||
<img src={(data as any).payments[0].image_urls[0]} alt="رسید پرداخت" className="h-14 w-14 rounded-md object-cover border border-gray-200 dark:border-gray-600" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
{order?.invoice_id && (
|
||||
<div className="flex items-start justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شماره فاکتور</span>
|
||||
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{order.invoice_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.transaction_id && (
|
||||
<div className="flex items-start justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شناسه تراکنش</span>
|
||||
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{(data as any).payments[0].transaction_id}</span>
|
||||
</div>
|
||||
)}
|
||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.image_urls?.length > 0 && (
|
||||
<div className="flex items-center justify-between text-base gap-2">
|
||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">رسید پرداخت</span>
|
||||
<a href={(data as any).payments[0].image_urls[0]} target="_blank" rel="noreferrer" className="shrink-0">
|
||||
<img src={(data as any).payments[0].image_urls[0]} alt="رسید پرداخت" className="h-14 w-14 rounded-md object-cover border border-gray-200 dark:border-gray-600" />
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue