create address + fix location restaurant

2025-11-27 09:47:14 +03:30
parent b3716d8602
commit fa7f95df43
17 changed files with 711 additions and 368 deletions
@@ -2,93 +2,66 @@

 import { useSearchParams } from 'next/navigation';
 import React, { useState, useEffect } from 'react';
-import type { Icon } from 'leaflet';
 import dynamic from 'next/dynamic';
-import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
-import Button from '@/components/button/PrimaryButton';
-import InputField from '@/components/input/InputField';
-import { Skeleton } from '@/components/ui/skeleton';
 import useToggle from '@/hooks/helpers/useToggle';
+import { useAuthStore } from '@/zustand/authStore';
+import { MarkerData, NominatimReverseGeocodingResponse } from '../types/Types';
+import { ConfirmPositionModal } from './components/ConfirmPositionModal';
+import { AddressDetailsModal } from './components/AddressDetailsModal';
+import { useAddressForm } from './hooks/useAddressForm';
+import { fetchAddressFromCoordinates } from './utils/fetchAddress';

 const CustomMap = dynamic(
    () => import('@/components/map/CustomMap'),
-    { ssr: false } // Leaflet requires browser APIs
+    { ssr: false }
 );

-export interface MarkerData {
-    position: [number, number];
-    title: string;
-    icon?: Icon;
-}
-
-export interface NominatimReverseGeocodingResponse {
-    place_id: number
-    licence: string
-    osm_type: string
-    osm_id: number
-    lat: string
-    lon: string
-    class: string
-    type: string
-    place_rank: number
-    importance: number
-    addresstype: string
-    name: string
-    display_name: string
-    address: NominatimReverseGeocodingResponseAddress
-    boundingbox: string[]
-}
-
-export interface NominatimReverseGeocodingResponseAddress {
-    road: string
-    neighbourhood: string
-    suburb: string
-    city: string
-    district: string
-    county: string
-    province: string
-    "ISO3166-2-lvl4": string
-    postcode: string
-    country: string
-    state: string
-    country_code: string
-}
-
 function OrderTrackingPage() {
    const params = useSearchParams();
+    const user = useAuthStore((state) => state.user);
    const [selectedPosition, setSelectedPosition] = useState<[number, number] | null>(null);
    const [selectedAddress, setSelectedAddress] = useState<NominatimReverseGeocodingResponse | null>(null);
    const [markers, setMarkers] = useState<MarkerData[]>([]);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
+    const [mapCenter] = useState<[number, number]>([
+        Number(params?.get('lat')) || 35.6892,
+        Number(params?.get('lon')) || 51.3890
+    ]);
    const { state: confirmModal, toggle: toggleConfirmModal, set: setConfirmModal } = useToggle();
    const { state: detailsModal, toggle: _toggleDetailsModal, set: setDetailsModal } = useToggle();

-    // Example initial position (Tehran)
-    const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
+    const { formData, isPending, handleFormDataChange, submitAddress } = useAddressForm({
+        selectedPosition,
+        selectedAddress,
+        initialPhone: user?.number || '',
+    });

    useEffect(() => {
-        // Initialize markers on the client side
        const initializeMarkers = async () => {
-            // Dynamic import of Leaflet on the client side
            const L = (await import('leaflet')).default;

+            const iconHtml = `
+                <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                    <img src="/icons/restaurant-marker.svg" alt="موقعیت رستوران" style="width: 24px; height: 30px; display: block;" />
+                </div>
+            `;
+
            setMarkers([
                {
-                    position: initialPosition,
-                    title: 'Restaurant Location',
-                    icon: new L.Icon({
-                        iconUrl: '/icons/restaurant-marker.png',
-                        iconSize: [25, 41],
-                        iconAnchor: [12, 41],
-                        popupAnchor: [1, -34],
+                    position: mapCenter,
+                    title: 'موقعیت رستوران',
+                    icon: L.divIcon({
+                        html: iconHtml,
+                        className: 'custom-restaurant-marker',
+                        iconSize: [32, 32],
+                        iconAnchor: [16, 32],
+                        popupAnchor: [0, -32],
                    })
                }
            ]);
        };

        initializeMarkers();
-    }, [initialPosition]);
+    }, [mapCenter]);

    const handlePositionSelect = (position: [number, number]) => {
        setSelectedPosition((prev) => {
@@ -100,8 +73,6 @@ function OrderTrackingPage() {
        });
        setConfirmModal(position && true);
        setDetailsModal(false);
-        // You can handle the selected position here
-        console.log('Selected position:', position);
    };

    const handleZoomChange = (zoom: number) => {
@@ -112,7 +83,6 @@ function OrderTrackingPage() {
        console.log('Map clicked at:', e.latlng);
    };

-
    const toggleDetailsModal = async () => {
        if (!selectedPosition) {
            setConfirmModal(false);
@@ -122,59 +92,16 @@ function OrderTrackingPage() {
        setConfirmModal(false);
        _toggleDetailsModal();
        if (!detailsModal) {
-            const address = await fetchAddressFromCoordinates(selectedPosition[0], selectedPosition[1]);
-            setSelectedAddress(address);
-        }
-    }
-
-    const fetchAddressFromCoordinates = async (lat: unknown, lon: unknown) => {
-        try {
-            const response = await fetch(
-                `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&addressdetails=1&accept-language=fa`
+            const address = await fetchAddressFromCoordinates(
+                selectedPosition[0],
+                selectedPosition[1]
            );
-            const data = await response.json();
-            return data; // Full formatted address
-        } catch (error) {
-            console.error('Error fetching address:', error);
-            return null;
+            setSelectedAddress(address);
        }
    };

-    const submitAddressAction = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        const formData = new FormData(e.currentTarget);
-        console.log(formData);
-    }
-
-    const getSelectedAddress = () => {
-        if (!selectedAddress) {
-            return "آدرس یافت نشد"
-        }
-        try {
-            return [
-                selectedAddress.address.state ?? selectedAddress.address.province,
-                selectedAddress.address.city,
-                selectedAddress.address.neighbourhood,
-                !selectedAddress.address.road.startsWith('میدان') &&
-                    !selectedAddress.address.road.startsWith('بلوار') &&
-                    !selectedAddress.address.road.startsWith('خیابان') &&
-                    !selectedAddress.address.road.startsWith('کوچه') ?
-                    selectedAddress.type === 'secondary' ? `بلوار ${selectedAddress.address.road}` :
-                        selectedAddress.type === 'tertiary' ? `خیابان ${selectedAddress.address.road}` :
-                            selectedAddress.type === 'residential' ? `کوچه ${selectedAddress.address.road}` :
-                                selectedAddress.address.road : selectedAddress.address.road
-            ].filter(x => x).join('، ')
-        } catch {
-            if (selectedAddress.display_name)
-                return selectedAddress.display_name;
-            else 
-                return "آدرس یافت نشد"
-        }
-    }
-
    return (
        <div className="fixed inset-0 bg-gray-50">
-
            <div className="absolute inset-0">
                <CustomMap
                    initialPosition={mapCenter}
@@ -186,93 +113,23 @@ function OrderTrackingPage() {
                />
            </div>

-            {/* {selectedPosition && (
-                <div className="selected-location-indicator">
-                    <p className="font-iran">موقعیت انتخاب شده: {selectedPosition[0].toFixed(4)}, {selectedPosition[1].toFixed(4)}</p>
-                </div>
-            )} */}
-
            <div className="absolute bottom-0 left-0 right-0 z-[1000]">
-                <div className='relative w-full h-full' >
-                    <AnimatedBottomSheet
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={null}
-                        noBlur
+                <div className='relative w-full h-full'>
+                    <ConfirmPositionModal
                        visible={confirmModal}
-                        showCloseButton={false}
-                        showTitle={false}
-                        overrideClassName='!pt-6 bg-container!'
-                    >
-                        <div className='grid grid-cols-2 gap-4 px-4'>
-                            <Button
-                                onClick={toggleDetailsModal}
-                            >
-                                انتخاب
-                            </Button>
-                            <Button
-                                onClick={toggleConfirmModal}
-                                className='bg-disabled! text-foreground!'
-                            >
-                                انصراف
-                            </Button>
-                        </div>
-                    </AnimatedBottomSheet>
+                        onConfirm={toggleDetailsModal}
+                        onCancel={toggleConfirmModal}
+                    />

-                    <AnimatedBottomSheet
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={null}
-                        noBlur
+                    <AddressDetailsModal
                        visible={detailsModal}
-                        title='آدرس'
-                        onClick={toggleDetailsModal}
-                        overrideClassName='bg-container!'
-                    >
-                        <form onSubmit={submitAddressAction}>
-                            <div className='px-4'>
-                                <div className='px-4 mt-2 bg-container'>
-                                    <span className='text-sm'>
-                                        {!selectedAddress ?
-                                            <Skeleton
-                                                className='h-6 w-full'
-                                            />
-                                            :
-                                            getSelectedAddress()
-                                        }
-                                    </span>
-                                    <hr className='border border-border mt-3 mb-10 ' />
-                                    <InputField
-                                        htmlFor={'addressTitle'}
-                                        labelText={'عنوان آدرس'}
-                                        placeholder='مثال: منزل، محل کار ...'
-                                        className='bg-inherit'
-                                        onChange={() => { }}
-                                    />
-                                    <InputField
-                                        htmlFor={'addressDetails'}
-                                        labelText={'جزئیات آدرس'}
-                                        placeholder='میدان باغ ملی، مجتمع آسمان، واحد 12، پلاک 1234567890'
-                                        className='bg-inherit mt-8'
-                                        onChange={() => { }}
-                                    />
-                                </div>
-                                <div className='grid grid-cols-2 gap-4 mt-16'>
-                                    <Button
-                                        type='submit'>
-                                        تایید
-                                    </Button>
-                                    <Button
-                                        type='button'
-                                        onClick={toggleDetailsModal}
-                                        className='bg-disabled! text-foreground!'
-                                    >
-                                        انصراف
-                                    </Button>
-                                </div>
-                            </div>
-                        </form>
-                    </AnimatedBottomSheet>
+                        selectedAddress={selectedAddress}
+                        formData={formData}
+                        isPending={isPending}
+                        onClose={toggleDetailsModal}
+                        onFormDataChange={handleFormDataChange}
+                        onSubmit={submitAddress}
+                    />
                </div>
            </div>
        </div>