order detail + change status in all state
This commit is contained in:
hamid zarghami
@@ -0,0 +1,169 @@
|
||||
import { Location, User, Call, Cake, Heart } from 'iconsax-react'
|
||||
import type { FC } from 'react'
|
||||
import type { Order } from '../types/Types'
|
||||
import { formatOptionalDate, formatFaNumber } from '@/helpers/func'
|
||||
|
||||
interface CustomerInfoProps {
|
||||
order: Order
|
||||
}
|
||||
|
||||
const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
|
||||
const customerName = [order.user?.firstName, order.user?.lastName].filter(Boolean).join(' ') || '-'
|
||||
const fullAddress = order.userAddress
|
||||
? `${order.userAddress.province || ''}، ${order.userAddress.city || ''}، ${order.userAddress.address || ''}، کد پستی: ${order.userAddress.postalCode || '-'}`.trim()
|
||||
: '-'
|
||||
|
||||
return (
|
||||
<div className='w-full bg-white rounded-4xl p-8'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='text-lg font-light flex items-center gap-2'>
|
||||
<User color='#000' size={20} />
|
||||
اطلاعات مشتری
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
شماره سفارش:
|
||||
</div>
|
||||
<div>{formatFaNumber(order.orderNumber)}</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>
|
||||
نام مشتری:
|
||||
</div>
|
||||
<div className='flex items-center gap-2'>
|
||||
{order.user?.avatarUrl && (
|
||||
<img
|
||||
src={order.user.avatarUrl}
|
||||
alt={customerName}
|
||||
className='w-8 h-8 rounded-full object-cover'
|
||||
/>
|
||||
)}
|
||||
<span>{customerName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>شماره تماس:</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<Call size={14} />
|
||||
{order.user?.phone || '-'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{order.user?.birthDate && (
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>تاریخ تولد:</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<Cake size={14} />
|
||||
{formatOptionalDate(order.user.birthDate, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{order.user?.marriageDate && (
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>تاریخ ازدواج:</div>
|
||||
<div className='flex items-center gap-1'>
|
||||
<Heart size={14} />
|
||||
{formatOptionalDate(order.user.marriageDate, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>جنسیت:</div>
|
||||
<div>{order.user?.gender ? 'مرد' : 'زن'}</div>
|
||||
</div>
|
||||
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>وضعیت:</div>
|
||||
<div className={`px-2 py-1 rounded text-xs ${order.user?.isActive ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
|
||||
{order.user?.isActive ? 'فعال' : 'غیرفعال'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{order.user?.referrer && (
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>معرف:</div>
|
||||
<div>{order.user.referrer}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{order.userAddress && (
|
||||
<div className='mt-8 space-y-4 text-[13px] font-light'>
|
||||
<div className='flex gap-2 items-start'>
|
||||
<div className='text-description flex items-center gap-1'>
|
||||
<Location size={14} />
|
||||
آدرس کامل:
|
||||
</div>
|
||||
<div className='flex-1'>{fullAddress}</div>
|
||||
</div>
|
||||
|
||||
{order.userAddress.fullName && (
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>نام گیرنده:</div>
|
||||
<div>{order.userAddress.fullName}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className='flex gap-2 items-center'>
|
||||
<div className='text-description'>شماره تماس گیرنده:</div>
|
||||
<div>{order.userAddress.phone || '-'}</div>
|
||||
</div>
|
||||
|
||||
{order.userAddress?.latitude && order.userAddress?.longitude && (
|
||||
<a
|
||||
href={`https://www.google.com/maps?q=${order.userAddress.latitude},${order.userAddress.longitude}`}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='flex gap-1 items-center cursor-pointer text-blue-600 hover:text-blue-800'
|
||||
>
|
||||
<Location size={17} color='#0047FF' />
|
||||
<div className='text-[13px]'>مشاهده روی نقشه</div>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{order.carAddress && (
|
||||
<div className={`${order.userAddress ? 'mt-6 pt-6 border-t' : 'mt-8'} border-dashed border-border`}>
|
||||
<div className='text-description mb-4'>اطلاعات خودرو:</div>
|
||||
<div className='flex flex-wrap gap-y-4 gap-8 text-[13px]'>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>رنگ:</div>
|
||||
<div>{order.carAddress.carColor}</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>مدل:</div>
|
||||
<div>{order.carAddress.carModel}</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>پلاک:</div>
|
||||
<div>{order.carAddress.plateNumber}</div>
|
||||
</div>
|
||||
<div className='flex gap-2'>
|
||||
<div className='text-description'>شماره تماس:</div>
|
||||
<div>{order.carAddress.phone}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CustomerInfo
|
||||
|
||||
Reference in New Issue
Block a user