hamid zarghami
68 lines
2.6 KiB
TypeScript
68 lines
2.6 KiB
TypeScript
import Button from '@/components/Button'
|
||
import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
|
||
import type { FC } from 'react'
|
||
import type { Order } from '../types/Types'
|
||
|
||
interface PaymentVerificationBoxProps {
|
||
order: Order
|
||
isVerifyingPayment: boolean
|
||
onVerifyPayment: () => void
|
||
}
|
||
|
||
const PaymentVerificationBox: FC<PaymentVerificationBoxProps> = ({
|
||
order,
|
||
isVerifyingPayment,
|
||
onVerifyPayment,
|
||
}) => {
|
||
const payment = order.payments?.[0]
|
||
const isCreditCard = order.paymentMethod?.method === PaymentMethodEnum.CreditCard
|
||
const hasDescription = Boolean(payment?.description)
|
||
const hasAttachments = Boolean(payment?.attachments && payment.attachments.length > 0)
|
||
|
||
return (
|
||
<div className='w-[330px] h-fit bg-white rounded-4xl p-8 mt-6'>
|
||
<div className='font-light'>اطلاعات تایید پرداخت</div>
|
||
|
||
<div className='mt-6 space-y-4 text-[13px] font-light'>
|
||
{isCreditCard && hasDescription && (
|
||
<div>
|
||
<div className='text-description mb-2'>توضیحات پرداخت</div>
|
||
<div className='text-gray-700 bg-gray-50 p-3 rounded-lg'>{payment?.description}</div>
|
||
</div>
|
||
)}
|
||
|
||
{isCreditCard && hasAttachments && (
|
||
<div>
|
||
<div className='text-description mb-2'>پیوست پرداخت</div>
|
||
<div className='flex gap-3 flex-wrap'>
|
||
{payment?.attachments?.map((attachment, index) => (
|
||
<a
|
||
key={index}
|
||
href={attachment}
|
||
target='_blank'
|
||
rel='noopener noreferrer'
|
||
>
|
||
<img
|
||
src={attachment}
|
||
alt={`پیوست پرداخت ${index + 1}`}
|
||
className='w-24 h-24 object-cover rounded-xl border border-border'
|
||
/>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<Button
|
||
label='تایید پرداخت'
|
||
onClick={onVerifyPayment}
|
||
isloading={isVerifyingPayment}
|
||
className='bg-green-600 hover:bg-green-700 w-full'
|
||
/>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default PaymentVerificationBox
|