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
|
|
@ -308,249 +308,249 @@ const OrderDetailPage = () => {
|
||||||
</div>
|
</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-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="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 justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div className="p-2 bg-blue-100 dark:bg-blue-900 rounded-lg">
|
<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" />
|
<Package className="h-5 w-5 text-blue-600 dark:text-blue-300" />
|
||||||
</div>
|
|
||||||
<SectionTitle>اطلاعات سفارش</SectionTitle>
|
|
||||||
</div>
|
</div>
|
||||||
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(order?.status || 'pending')}`}>
|
<SectionTitle>اطلاعات سفارش</SectionTitle>
|
||||||
{getStatusText(order?.status || 'pending')}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${getStatusColor(order?.status || 'pending')}`}>
|
||||||
|
{getStatusText(order?.status || 'pending')}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="p-6">
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="p-6">
|
||||||
<div>
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شماره سفارش</h4>
|
<div>
|
||||||
<p className="text-gray-600 dark:text-gray-400">#{order?.order_number || 'نامشخص'}</p>
|
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">شماره سفارش</h4>
|
||||||
</div>
|
<p className="text-gray-600 dark:text-gray-400">#{order?.order_number || 'نامشخص'}</p>
|
||||||
<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>
|
||||||
{order?.notes && (
|
<div>
|
||||||
<div className="mt-6">
|
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">تاریخ ثبت</h4>
|
||||||
<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>
|
||||||
<p className="text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
|
</div>
|
||||||
{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 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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{order?.notes && (
|
||||||
|
<div className="mt-6">
|
||||||
{/* آیتمهای سفارش */}
|
<h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">یادداشت</h4>
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
<p className="text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-700 p-3 rounded-lg">
|
||||||
<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">
|
{order.notes}
|
||||||
<div className="flex items-center gap-3">
|
</p>
|
||||||
<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>
|
||||||
|
)}
|
||||||
|
</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>
|
||||||
<div className="p-0">
|
</div>
|
||||||
{order?.items && order.items.length > 0 ? (
|
<div className="p-0">
|
||||||
<div className="space-y-4">
|
{order?.items && order.items.length > 0 ? (
|
||||||
{order.items.map((item) => {
|
<div className="space-y-4">
|
||||||
const baseWeight = (item.weight ?? 0) as number;
|
{order.items.map((item) => {
|
||||||
const weightGr = Math.round(baseWeight * 1000);
|
const baseWeight = (item.weight ?? 0) as number;
|
||||||
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
|
const weightGr = Math.round(baseWeight * 1000);
|
||||||
const imageUrl = item.image_url || item.product_image;
|
const formatFa = (n: number) => new Intl.NumberFormat('fa-IR').format(n);
|
||||||
return (
|
const imageUrl = item.image_url || item.product_image;
|
||||||
<div key={item.id} className="px-4 md:px-6 py-3">
|
return (
|
||||||
<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 key={item.id} className="px-4 md:px-6 py-3">
|
||||||
<div className="flex items-start justify-between gap-4">
|
<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 gap-3 min-w-0 flex-1">
|
<div className="flex items-start justify-between gap-4">
|
||||||
{imageUrl && (
|
<div className="flex items-start gap-3 min-w-0 flex-1">
|
||||||
<div className="shrink-0">
|
{imageUrl && (
|
||||||
<img
|
<div className="shrink-0">
|
||||||
src={resolveImageUrl(imageUrl)}
|
<img
|
||||||
alt={item.product_name || 'محصول'}
|
src={resolveImageUrl(imageUrl)}
|
||||||
className="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-600"
|
alt={item.product_name || 'محصول'}
|
||||||
onError={(e) => {
|
className="w-16 h-16 md:w-20 md:h-20 rounded-lg object-cover border border-gray-200 dark:border-gray-600"
|
||||||
const target = e.target as HTMLImageElement;
|
onError={(e) => {
|
||||||
target.style.display = 'none';
|
const target = e.target as HTMLImageElement;
|
||||||
}}
|
target.style.display = 'none';
|
||||||
/>
|
}}
|
||||||
</div>
|
/>
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
|
<div className="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
|
||||||
{item.product_name || `محصول شناسه: ${item.product_id}`}
|
{item.product_name || `محصول شناسه: ${item.product_id}`}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
|
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
|
||||||
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
|
{item.product_variant_name || `واریانت شناسه: ${item.product_variant_id}`}
|
||||||
</div>
|
|
||||||
</div>
|
</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>
|
||||||
<div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
|
<div className="text-left shrink-0">
|
||||||
<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-xs text-gray-500 dark:text-gray-400">جمع</div>
|
||||||
<div className="text-[11px] 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 className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</div>
|
</div>
|
||||||
</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="mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||||
<div className="text-[11px] text-gray-500 dark:text-gray-400">وزن (گرم)</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-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
|
<div className="text-[11px] text-gray-500 dark:text-gray-400">تعداد</div>
|
||||||
</div>
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(item.quantity || 0)}</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>
|
||||||
<div className="flex items-center justify-between">
|
<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-[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 className="text-sm font-medium text-gray-900 dark:text-gray-100">{formatFa(weightGr)}</div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
})}
|
);
|
||||||
</div>
|
})}
|
||||||
) : (
|
</div>
|
||||||
<p className="text-gray-500 dark:text-gray-400 text-center py-6">
|
) : (
|
||||||
محصولی در این سفارش یافت نشد
|
<p className="text-gray-500 dark:text-gray-400 text-center py-6">
|
||||||
</p>
|
محصولی در این سفارش یافت نشد
|
||||||
)}
|
</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>
|
</div>
|
||||||
|
<div className="p-6 space-y-4 overflow-hidden">
|
||||||
{/* اطلاعات پرداخت */}
|
<div className="flex items-center justify-between text-base gap-2">
|
||||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
<span className="text-gray-800 dark:text-gray-200 shrink-0">جمع اقلام</span>
|
||||||
<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">
|
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.net_total || 0)}</span>
|
||||||
<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>
|
||||||
<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">
|
<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="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="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order.base_gold_price)}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between text-base gap-2">
|
)}
|
||||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">مالیات</span>
|
<div className="flex items-center justify-between text-base gap-2">
|
||||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.vat_total || 0)}</span>
|
<span className="text-gray-800 dark:text-gray-200 shrink-0">هزینه ارسال</span>
|
||||||
</div>
|
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order?.shipping_total || 0)}</span>
|
||||||
{order?.base_gold_price !== undefined && (
|
</div>
|
||||||
<div className="flex items-center justify-between text-base gap-2">
|
{(order?.discount_total || 0) > 0 && (
|
||||||
<span className="text-gray-800 dark:text-gray-200 shrink-0">قیمت پایه طلا</span>
|
<div className="flex justify-between text-green-600 dark:text-green-400 gap-2">
|
||||||
<span className="font-medium text-gray-900 dark:text-gray-100 break-all text-left">{formatCurrency(order.base_gold_price)}</span>
|
<span className="shrink-0">تخفیف کل</span>
|
||||||
</div>
|
<span className="font-medium break-all text-left">-{formatCurrency(order?.discount_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>
|
||||||
|
)}
|
||||||
|
<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="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
|
||||||
<div className="space-y-2">
|
<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">
|
<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-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'
|
<span className="text-gray-900 dark:text-gray-100 break-words text-left">{formatPaymentType((data as any).payments[0].payment_type)}</span>
|
||||||
? '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>
|
</div>
|
||||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments.length > 0 && (
|
)}
|
||||||
<div className="flex items-center justify-between text-base gap-2">
|
{order?.invoice_id && (
|
||||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">روش پرداخت</span>
|
<div className="flex items-start justify-between text-base gap-2">
|
||||||
<span className="text-gray-900 dark:text-gray-100 break-words text-left">{formatPaymentType((data as any).payments[0].payment_type)}</span>
|
<span className="text-gray-700 dark:text-gray-200 shrink-0">شماره فاکتور</span>
|
||||||
</div>
|
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{order.invoice_id}</span>
|
||||||
)}
|
</div>
|
||||||
{order?.invoice_id && (
|
)}
|
||||||
<div className="flex items-start justify-between text-base gap-2">
|
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.transaction_id && (
|
||||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شماره فاکتور</span>
|
<div className="flex items-start justify-between text-base gap-2">
|
||||||
<span className="font-mono text-gray-900 dark:text-gray-100 break-all text-left text-sm">{order.invoice_id}</span>
|
<span className="text-gray-700 dark:text-gray-200 shrink-0">شناسه تراکنش</span>
|
||||||
</div>
|
<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]?.transaction_id && (
|
)}
|
||||||
<div className="flex items-start justify-between text-base gap-2">
|
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.image_urls?.length > 0 && (
|
||||||
<span className="text-gray-700 dark:text-gray-200 shrink-0">شناسه تراکنش</span>
|
<div className="flex items-center justify-between text-base gap-2">
|
||||||
<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>
|
<span className="text-gray-700 dark:text-gray-200 shrink-0">رسید پرداخت</span>
|
||||||
</div>
|
<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" />
|
||||||
{Array.isArray((data as any)?.payments) && (data as any)?.payments[0]?.image_urls?.length > 0 && (
|
</a>
|
||||||
<div className="flex items-center justify-between text-base gap-2">
|
</div>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue