117 lines
6.5 KiB
TypeScript
117 lines
6.5 KiB
TypeScript
import { type FC } from 'react'
|
||
import { useParams } from 'react-router-dom'
|
||
import { useGetRequestDetails } from './hooks/useRequestData'
|
||
import TicketSection from './components/TicketSection'
|
||
import placeholderProductImage from '@/assets/images/placeholder-product.svg'
|
||
|
||
const RequestDetail: FC = () => {
|
||
|
||
const { id } = useParams()
|
||
const { data } = useGetRequestDetails(id!)
|
||
|
||
return (
|
||
<div className="w-full min-h-screen bg-[#eceef6] p-6">
|
||
{/* Header Section */}
|
||
<div className="flex items-start justify-between mb-6">
|
||
<div className="text-sm text-[#8C90A3]">
|
||
درخواست #{data?.data?.requestNumber}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Information Section */}
|
||
<div className="bg-white rounded-2xl p-6 mb-6">
|
||
<div className='flex justify-between items-center'>
|
||
<h2 className="text-lg font-light mb-6">اطلاعات درخواست</h2>
|
||
</div>
|
||
<div className='flex flex-col gap-10'>
|
||
{
|
||
data?.data?.items?.map((item) => {
|
||
const productImage = item.product?.images?.[0]
|
||
|
||
return (
|
||
<div key={item.product.id}>
|
||
<div className="flex items-center gap-6">
|
||
{/* Product Image */}
|
||
<div className='size-[86px] rounded-lg overflow-hidden bg-gray-100'>
|
||
<img
|
||
src={productImage || placeholderProductImage}
|
||
alt={item.product?.title ?? 'محصول'}
|
||
className='size-full object-cover'
|
||
onError={(e) => {
|
||
e.currentTarget.src = placeholderProductImage
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
{/* Order Details */}
|
||
<div className="flex-1 flex gap-20 pr-10">
|
||
<div className='flex items-center gap-2'>
|
||
<div className="text-xs text-desc">عنوان:</div>
|
||
<div className="text-sm font-medium text-black">{item.product.title}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Order Description */}
|
||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||
<div className="text-sm font-medium mb-2 text-desc">شرح درخواست:</div>
|
||
<p className="text-sm font-light text-black leading-6">
|
||
{item.description || '—'}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Attributes from field */}
|
||
{item.attributes?.length ? (
|
||
<>
|
||
<div className='font-bold mb-5 mt-7'>ویژگیها</div>
|
||
<div className='flex flex-col gap-3'>
|
||
{item.attributes.map((attr) => (
|
||
<div className='flex gap-3 items-center' key={attr.fieldId}>
|
||
<div className='text-sm text-gray-500'>{attr.field?.name}:</div>
|
||
<div className='text-sm -mt-px'>{attr.value ?? '—'}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</>
|
||
) : null}
|
||
|
||
{/* Attachments */}
|
||
{item.attachments?.length ? (
|
||
<div className="mt-6 pt-6 border-t border-dashed border-desc">
|
||
<div className="text-sm font-medium mb-3 text-desc">پیوستها:</div>
|
||
<div className="flex flex-wrap gap-4">
|
||
{item.attachments.map((att) => (
|
||
att.type === 'voice' ? (
|
||
<div key={att.url} className="flex items-center gap-2 p-3 bg-[#f5f6fa] rounded-xl">
|
||
<audio controls src={att.url} className="max-w-[240px] h-9" />
|
||
</div>
|
||
) : (
|
||
<a
|
||
key={att.url}
|
||
href={att.url}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="block size-20 rounded-lg overflow-hidden border border-desc hover:opacity-90"
|
||
>
|
||
<img src={att.url} alt="پیوست" className="size-full object-cover" />
|
||
</a>
|
||
)
|
||
))}
|
||
</div>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Bottom Section - White Card */}
|
||
<TicketSection />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default RequestDetail
|