user Addresses

2026-06-23 11:16:25 +03:30
parent 223b1b5e8f
commit 45494d7ae5
9 changed files with 422 additions and 167 deletions
@@ -0,0 +1,81 @@
+import { type FC } from 'react'
+import { Location } from 'iconsax-react'
+import type { UserSavedAddress } from '@/pages/customers/types/Types'
+
+interface CreateOrderAddressSelectorProps {
+    addresses: UserSavedAddress[]
+    selectedAddressId: string | null
+    onSelectAddress: (address: UserSavedAddress) => void
+    onSelectManual: () => void
+}
+
+const CreateOrderAddressSelector: FC<CreateOrderAddressSelectorProps> = ({
+    addresses,
+    selectedAddressId,
+    onSelectAddress,
+    onSelectManual,
+}) => {
+    if (addresses.length === 0) {
+        return null
+    }
+
+    const isManualSelected = selectedAddressId === null
+
+    return (
+        <div className='mb-6'>
+            <div className='text-sm mb-3'>انتخاب آدرس ذخیره‌شده</div>
+            <div className='grid grid-cols-1 sm:grid-cols-2 gap-3'>
+                {addresses.map((address) => {
+                    const isSelected = selectedAddressId === address.id
+                    const location = [address.province, address.city].filter(Boolean).join('، ')
+
+                    return (
+                        <button
+                            key={address.id}
+                            type='button'
+                            onClick={() => onSelectAddress(address)}
+                            className={`text-right p-4 rounded-xl border transition-colors ${
+                                isSelected
+                                    ? 'border-primary bg-primary/5'
+                                    : 'border-border hover:border-primary/40'
+                            }`}
+                        >
+                            <div className='flex items-center justify-between gap-2'>
+                                <div className='text-sm font-medium'>{address.title || 'آدرس'}</div>
+                                {address.isDefault && (
+                                    <span className='text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary'>
+                                        پیش‌فرض
+                                    </span>
+                                )}
+                            </div>
+                            {location && (
+                                <div className='text-xs text-description mt-1'>{location}</div>
+                            )}
+                            <div className='text-xs mt-2 line-clamp-2'>{address.address}</div>
+                        </button>
+                    )
+                })}
+
+                <button
+                    type='button'
+                    onClick={onSelectManual}
+                    className={`text-right p-4 rounded-xl border transition-colors ${
+                        isManualSelected
+                            ? 'border-primary bg-primary/5'
+                            : 'border-border hover:border-primary/40'
+                    }`}
+                >
+                    <div className='flex items-center gap-2 text-sm font-medium'>
+                        <Location size={16} color='#000' />
+                        <span>ورود آدرس جدید</span>
+                    </div>
+                    <div className='text-xs text-description mt-1'>
+                        آدرس را به‌صورت دستی وارد کنید
+                    </div>
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default CreateOrderAddressSelector