order detail + change status in all state

2025-12-20 14:33:19 +03:30
parent 566c4cb97b
commit de8815f0d8
13 changed files with 1065 additions and 300 deletions
@@ -0,0 +1,150 @@
+import type { FC } from 'react'
+import type { Order } from '../types/Types'
+import { PaymentStatusEnum } from '../enum/Enum'
+import { OrderStatus } from '../enum/Enum'
+import { formatPrice, formatFaNumber } from '@/helpers/func'
+
+interface PaymentInfoProps {
+    order: Order
+    getPaymentStatusColor: (status: string) => string
+    getPaymentStatusTextColor: (status: string) => string
+    getPaymentStatusText: (status: string) => string
+}
+
+const PaymentInfo: FC<PaymentInfoProps> = ({
+    order,
+    getPaymentStatusColor,
+    getPaymentStatusTextColor,
+    getPaymentStatusText
+}) => {
+    const paymentStatus = order.paymentStatus || (order.status === OrderStatus.PAID ? PaymentStatusEnum.Paid : PaymentStatusEnum.Pending)
+
+    return (
+        <div className='w-[330px] h-fit bg-white rounded-4xl p-8'>
+            <div className='flex justify-between items-center'>
+                <div className='font-light'>
+                    اطلاعات پرداخت
+                </div>
+
+                <div className='flex gap-1.5 items-center'>
+                    <div className={`size-2 rounded-full ${getPaymentStatusColor(paymentStatus)}`}></div>
+                    <div className={`text-[13px] ${getPaymentStatusTextColor(paymentStatus)}`}>
+                        {getPaymentStatusText(paymentStatus)}
+                    </div>
+                </div>
+            </div>
+
+            <div className='mt-10'>
+                <div className='flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                    <div className='text-description'>
+                        نوع پرداخت
+                    </div>
+                    <div>{order.paymentMethod?.description || '-'}</div>
+                </div>
+
+                {order.paymentMethod?.gateway && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            درگاه پرداخت
+                        </div>
+                        <div>{order.paymentMethod.gateway}</div>
+                    </div>
+                )}
+
+                {order.paymentMethod?.merchantId && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            شناسه مرchant
+                        </div>
+                        <div className='font-mono text-xs'>{order.paymentMethod.merchantId}</div>
+                    </div>
+                )}
+
+                {order.paymentId && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            شناسه پرداخت
+                        </div>
+                        <div className='font-mono text-xs'>{order.paymentId}</div>
+                    </div>
+                )}
+
+                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                    <div className='text-description'>
+                        جمع آیتم‌ها
+                    </div>
+                    <div>{formatPrice(order.subTotal)}</div>
+                </div>
+
+                {order.itemsDiscount > 0 && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            تخفیف آیتم‌ها
+                        </div>
+                        <div className='text-green-600'>-{formatPrice(order.itemsDiscount)}</div>
+                    </div>
+                )}
+
+                {order.couponDiscount > 0 && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            تخفیف کوپن
+                        </div>
+                        <div className='text-green-600'>-{formatPrice(order.couponDiscount)}</div>
+                    </div>
+                )}
+
+                {order.totalDiscount > 0 && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description font-medium'>
+                            جمع تخفیف‌ها
+                        </div>
+                        <div className='text-green-600 font-medium'>-{formatPrice(order.totalDiscount)}</div>
+                    </div>
+                )}
+
+                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                    <div className='text-description'>
+                        هزینه ارسال
+                    </div>
+                    <div>{formatPrice(order.deliveryFee)}</div>
+                </div>
+
+                {order.deliveryMethod?.minOrderPrice && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            حداقل سفارش
+                        </div>
+                        <div>{formatPrice(order.deliveryMethod.minOrderPrice)}</div>
+                    </div>
+                )}
+
+                {order.tax > 0 && (
+                    <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                        <div className='text-description'>
+                            مالیات
+                        </div>
+                        <div>{formatPrice(order.tax)}</div>
+                    </div>
+                )}
+
+                <div className='flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4'>
+                    <div className='text-description'>
+                        تعداد آیتم‌ها
+                    </div>
+                    <div>{formatFaNumber(order.totalItems)}</div>
+                </div>
+
+                <div className='flex mt-4 text-[13px] font-bold justify-between items-center'>
+                    <div>
+                        مبلغ کل
+                    </div>
+                    <div>{formatPrice(order.total)}</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PaymentInfo
+