payment with card to card

2026-06-15 12:18:25 +03:30
parent 1dd639c0b1
commit 22e443cf7b
7 changed files with 221 additions and 200 deletions
@@ -0,0 +1,67 @@
+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