Create order

src/pages/orders/components/CreateOrderDeliverySection.tsx

@@ -1,8 +1,11 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import type { FormikProps } from 'formik'
 import { useTranslation } from 'react-i18next'
 import Input from '@/components/Input'
 import Textarea from '@/components/Textarea'
+import DefaulModal from '@/components/DefaulModal'
+import LocationInput from '@/pages/settings/components/LocationInput'
+import LocationPicker from '@/pages/settings/components/LocationPicker'
 import { formatPrice } from '@/helpers/func'
 import type { CreateOrderFormValues } from '../hooks/useCreateOrderForm'
 import type { RestaurantPaymentMethod, RestaurantShipmentMethod } from '../hooks/useCreateOrderForm'
@@ -21,6 +24,7 @@ interface CreateOrderDeliverySectionProps {
     onSelectSavedAddress: (address: UserSavedAddress) => void
     onSelectManualAddress: () => void
     onAddressFieldChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void
+    onLocationSelect: (lat: number, lng: number) => void
 }
 
 const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
@@ -35,8 +39,10 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
     onSelectSavedAddress,
     onSelectManualAddress,
     onAddressFieldChange,
+    onLocationSelect,
 }) => {
     const { t } = useTranslation('global')
+    const [isLocationModalOpen, setIsLocationModalOpen] = useState(false)
 
     const getDeliveryLabel = (method: string) => {
         return t(`shipment.${method}`, {
@@ -47,6 +53,14 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
     const isAddressReadOnly =
         selectedAddressId !== null && customerAddresses.length > 0
 
+    const handleMapLocationSelect = (lat: number, lng: number) => {
+        onLocationSelect(lat, lng)
+        setIsLocationModalOpen(false)
+    }
+
+    const latitude = formik.values.userAddress.latitude
+    const longitude = formik.values.userAddress.longitude
+
     return (
         <div className='flex flex-col gap-8'>
             <div className='w-full bg-white rounded-4xl p-8'>
@@ -109,7 +123,7 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
                     )}
                 </div>
 
-                {(isDineIn || isCarDelivery) && (
+                {isDineIn && (
                     <div className='mt-8'>
                         <Input
                             label='شماره میز'
@@ -135,57 +149,36 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
 
                     <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mt-6'>
                         <Input
-                            label='نام گیرنده'
-                            name='userAddress.fullName'
-                            value={formik.values.userAddress.fullName}
+                            label='عنوان آدرس'
+                            name='userAddress.title'
+                            placeholder='مثال: منزل'
+                            value={formik.values.userAddress.title}
                             onChange={onAddressFieldChange}
                             readOnly={isAddressReadOnly}
                         />
                         <Input
-                            label='شماره تماس گیرنده'
+                            label='شماره تماس'
                             name='userAddress.phone'
                             value={formik.values.userAddress.phone}
                             onChange={onAddressFieldChange}
                             readOnly={isAddressReadOnly}
                         />
-                        <Input
-                            label='استان'
-                            name='userAddress.province'
-                            value={formik.values.userAddress.province}
-                            onChange={onAddressFieldChange}
-                            readOnly={isAddressReadOnly}
-                        />
-                        <Input
-                            label='شهر'
-                            name='userAddress.city'
-                            value={formik.values.userAddress.city}
-                            onChange={onAddressFieldChange}
-                            readOnly={isAddressReadOnly}
-                        />
                         <Input
                             label='کد پستی'
                             name='userAddress.postalCode'
                             value={formik.values.userAddress.postalCode}
                             onChange={onAddressFieldChange}
                             readOnly={isAddressReadOnly}
-                        />
-                        <Input
-                            label='عرض جغرافیایی'
-                            type='number'
-                            name='userAddress.latitude'
-                            value={formik.values.userAddress.latitude || ''}
-                            onChange={onAddressFieldChange}
-                            readOnly={isAddressReadOnly}
                             isNotRequired
                         />
-                        <Input
-                            label='طول جغرافیایی'
-                            type='number'
-                            name='userAddress.longitude'
-                            value={formik.values.userAddress.longitude || ''}
-                            onChange={onAddressFieldChange}
-                            readOnly={isAddressReadOnly}
-                            isNotRequired
+                    </div>
+
+                    <div className={isAddressReadOnly ? 'pointer-events-none opacity-60' : ''}>
+                        <LocationInput
+                            label='موقعیت روی نقشه'
+                            latitude={latitude || undefined}
+                            longitude={longitude || undefined}
+                            onClick={() => setIsLocationModalOpen(true)}
                         />
                     </div>
 
@@ -198,6 +191,28 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
                             readOnly={isAddressReadOnly}
                         />
                     </div>
+
+                    <DefaulModal
+                        open={isLocationModalOpen}
+                        close={() => setIsLocationModalOpen(false)}
+                        isHeader={true}
+                        title_header='انتخاب موقعیت روی نقشه'
+                        width={800}
+                    >
+                        <div className='p-4'>
+                            <LocationPicker
+                                initialPosition={
+                                    latitude && longitude
+                                        ? [latitude, longitude]
+                                        : undefined
+                                }
+                                onLocationSelect={handleMapLocationSelect}
+                            />
+                            <div className='mt-4 text-xs text-gray-600 text-center'>
+                                روی نقشه کلیک کنید تا موقعیت را انتخاب کنید
+                            </div>
+                        </div>
+                    </DefaulModal>
                 </div>
             )}
 
@@ -243,6 +258,7 @@ const CreateOrderDeliverySection: FC<CreateOrderDeliverySectionProps> = ({
                         placeholder='توضیحات اضافی برای سفارش...'
                         value={formik.values.description}
                         onChange={formik.handleChange}
+                        isNotRequired
                     />
                 </div>
             </div>