add payment

src/pages/orders/components/CustomerInfo.tsx

@@ -14,7 +14,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
         : '-'
 
     return (
-        <div className='w-full bg-white rounded-4xl p-8'>
+        <div className='w-full bg-white rounded-4xl p-4 sm:p-6 lg: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} />
@@ -22,7 +22,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                 </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='mt-6 sm:mt-8 flex flex-wrap gap-x-8 gap-y-4 sm:gap-x-12 sm:gap-y-7 text-[13px] font-light border-b border-dashed border-border pb-6 sm:pb-8'>
                 <div className='flex gap-2'>
                     <div className='text-description'>
                         شماره سفارش:
@@ -53,46 +53,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                         {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 ? 'فعال' : 'غیرفعال'}
-                    </div>
-                </div>
+ 
 
                 {order.user?.referrer && (
                     <div className='flex gap-2'>
@@ -103,13 +64,13 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
             </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'>
+                <div className='mt-6 sm:mt-8 space-y-4 text-[13px] font-light'>
+                    <div className='flex flex-col sm:flex-row gap-1 sm:gap-2 items-start'>
+                        <div className='text-description flex items-center gap-1 shrink-0'>
                             <Location size={14} />
                             آدرس کامل:
                         </div>
-                        <div className='flex-1'>{fullAddress}</div>
+                        <div className='flex-1 min-w-0 break-words'>{fullAddress}</div>
                     </div>
 
                     {order.userAddress.fullName && (