create address + fix location restaurant

public/icons/restaurant-marker.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="40" viewBox="0 0 32 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple location pin -->
+  <path d="M16 0C7.163 0 0 7.163 0 16C0 28 16 40 16 40C16 40 32 28 32 16C32 7.163 24.837 0 16 0Z" fill="#EF4444"/>
+</svg>

src/app/[name]/(Dialogs)/order/track/[id]/page.tsx

@@ -32,31 +32,35 @@ function OrderTrackingPage() {
     const router = useRouter();
     const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
 
-    // Example initial position (Tehran)
-    const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
-
     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,
+                    position: mapCenter,
-                    title: 'Restaurant Location',
+                    title: 'موقعیت رستوران',
-                    icon: new L.Icon({
+                    icon: L.divIcon({
-                        iconUrl: '/icons/restaurant-marker.png',
+                        html: iconHtml,
-                        iconSize: [25, 41],
+                        className: 'custom-restaurant-marker',
-                        iconAnchor: [12, 41],
+                        iconSize: [32, 32],
-                        popupAnchor: [1, -34],
+                        iconAnchor: [16, 32],
+                        popupAnchor: [0, -32],
                     })
                 }
             ]);
         };
 
         initializeMarkers();
-    }, [initialPosition]);
+    }, [mapCenter]);
 
 
     const handleZoomChange = (zoom: number) => {

src/app/[name]/(Profile)/profile/address/hooks/useAddressData.ts

@@ -0,0 +1,19 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { createAddress, getAddresses } from "../service/AddressService";
+
+export const useGetAddresses = () => {
+  return useQuery({
+    queryKey: ["addresses"],
+    queryFn: () => getAddresses(),
+  });
+};
+
+export const useCreateAddress = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createAddress,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["addresses"] });
+    },
+  });
+};

src/app/[name]/(Profile)/profile/address/new/components/AddressDetailsModal.tsx

@@ -0,0 +1,72 @@
+import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
+import Button from '@/components/button/PrimaryButton';
+import { AddressDisplay } from './AddressDisplay';
+import { AddressForm } from './AddressForm';
+import { NominatimReverseGeocodingResponse } from '../../types/Types';
+
+interface AddressDetailsModalProps {
+    visible: boolean;
+    selectedAddress: NominatimReverseGeocodingResponse | null;
+    formData: {
+        title: string;
+        addressDetails: string;
+        phone: string;
+        postalCode: string;
+        isDefault: boolean;
+    };
+    isPending: boolean;
+    onClose: () => void;
+    onFormDataChange: (data: Partial<AddressDetailsModalProps['formData']>) => void;
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+
+export const AddressDetailsModal = ({
+    visible,
+    selectedAddress,
+    formData,
+    isPending,
+    onClose,
+    onFormDataChange,
+    onSubmit,
+}: AddressDetailsModalProps) => {
+    return (
+        <AnimatedBottomSheet
+            bgOpacity={0}
+            inDuration={0}
+            blurOpacity={null}
+            noBlur
+            visible={visible}
+            title='آدرس'
+            onClick={onClose}
+            overrideClassName='bg-container!'
+        >
+            <form onSubmit={onSubmit}>
+                <div className='px-4'>
+                    <AddressDisplay selectedAddress={selectedAddress} />
+                    <AddressForm
+                        formData={formData}
+                        selectedAddress={selectedAddress}
+                        onFormDataChange={onFormDataChange}
+                    />
+                    <div className='grid grid-cols-2 gap-4 mt-16'>
+                        <Button
+                            type='submit'
+                            disabled={isPending}
+                        >
+                            {isPending ? 'در حال ثبت...' : 'تایید'}
+                        </Button>
+                        <Button
+                            type='button'
+                            onClick={onClose}
+                            className='bg-disabled! text-foreground!'
+                            disabled={isPending}
+                        >
+                            انصراف
+                        </Button>
+                    </div>
+                </div>
+            </form>
+        </AnimatedBottomSheet>
+    );
+};
+

src/app/[name]/(Profile)/profile/address/new/components/AddressDisplay.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/ui/skeleton';
+import { NominatimReverseGeocodingResponse } from '../../types/Types';
+import { formatSelectedAddress } from '../utils/formatAddress';
+
+interface AddressDisplayProps {
+    selectedAddress: NominatimReverseGeocodingResponse | null;
+}
+
+export const AddressDisplay = ({ selectedAddress }: AddressDisplayProps) => {
+    return (
+        <div className='px-4 mt-2 bg-container'>
+            <span className='text-sm'>
+                {!selectedAddress ? (
+                    <Skeleton className='h-6 w-full' />
+                ) : (
+                    formatSelectedAddress(selectedAddress)
+                )}
+            </span>
+            <hr className='border border-border mt-3 mb-10' />
+        </div>
+    );
+};
+

src/app/[name]/(Profile)/profile/address/new/components/AddressForm.tsx

@@ -0,0 +1,74 @@
+import InputField from '@/components/input/InputField';
+import { NominatimReverseGeocodingResponse } from '../../types/Types';
+
+interface AddressFormProps {
+    formData: {
+        title: string;
+        addressDetails: string;
+        phone: string;
+        postalCode: string;
+        isDefault: boolean;
+    };
+    selectedAddress: NominatimReverseGeocodingResponse | null;
+    onFormDataChange: (data: Partial<AddressFormProps['formData']>) => void;
+}
+
+export const AddressForm = ({
+    formData,
+    selectedAddress,
+    onFormDataChange,
+}: AddressFormProps) => {
+    return (
+        <div className='px-4'>
+            <InputField
+                htmlFor={'addressTitle'}
+                labelText={'عنوان آدرس'}
+                placeholder='مثال: منزل، محل کار ...'
+                className='bg-inherit'
+                value={formData.title}
+                onChange={(e) => onFormDataChange({ title: e.target.value })}
+            />
+            <InputField
+                htmlFor={'addressDetails'}
+                labelText={'جزئیات آدرس'}
+                placeholder='میدان باغ ملی، مجتمع آسمان، واحد 12، پلاک 1234567890'
+                className='bg-inherit mt-8'
+                value={formData.addressDetails}
+                onChange={(e) => onFormDataChange({ addressDetails: e.target.value })}
+            />
+            <InputField
+                htmlFor={'phone'}
+                labelText={'شماره تلفن'}
+                placeholder='09123456789'
+                className='bg-inherit mt-8'
+                value={formData.phone}
+                onChange={(e) => onFormDataChange({ phone: e.target.value })}
+            />
+            <InputField
+                htmlFor={'postalCode'}
+                labelText={'کد پستی'}
+                placeholder={selectedAddress?.address?.postcode || '1234567890'}
+                className='bg-inherit mt-8'
+                value={formData.postalCode || selectedAddress?.address?.postcode || ''}
+                onChange={(e) => onFormDataChange({ postalCode: e.target.value })}
+            />
+            <div className='inline-flex justify-between items-center w-full mt-8'>
+                <label
+                    htmlFor={'isDefault'}
+                    className='text-sm2 px-2 py-0.5 mt-0.5 cursor-pointer'
+                >
+                    تنظیم به عنوان آدرس پیش‌فرض
+                </label>
+                <input
+                    name={'isDefault'}
+                    id={'isDefault'}
+                    className='h-4.5 w-4.5 checked:accent-primary cursor-pointer'
+                    onChange={(e) => onFormDataChange({ isDefault: e.target.checked })}
+                    type='checkbox'
+                    checked={formData.isDefault}
+                />
+            </div>
+        </div>
+    );
+};
+

src/app/[name]/(Profile)/profile/address/new/components/ConfirmPositionModal.tsx

@@ -0,0 +1,40 @@
+import AnimatedBottomSheet from '@/components/bottomsheet/AnimatedBottomSheet';
+import Button from '@/components/button/PrimaryButton';
+
+interface ConfirmPositionModalProps {
+    visible: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+export const ConfirmPositionModal = ({
+    visible,
+    onConfirm,
+    onCancel,
+}: ConfirmPositionModalProps) => {
+    return (
+        <AnimatedBottomSheet
+            bgOpacity={0}
+            inDuration={0}
+            blurOpacity={null}
+            noBlur
+            visible={visible}
+            showCloseButton={false}
+            showTitle={false}
+            overrideClassName='!pt-6 bg-container!'
+        >
+            <div className='grid grid-cols-2 gap-4 px-4'>
+                <Button onClick={onConfirm}>
+                    انتخاب
+                </Button>
+                <Button
+                    onClick={onCancel}
+                    className='bg-disabled! text-foreground!'
+                >
+                    انصراف
+                </Button>
+            </div>
+        </AnimatedBottomSheet>
+    );
+};
+

src/app/[name]/(Profile)/profile/address/new/hooks/useAddressForm.ts

@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { useCreateAddress } from '../../hooks/useAddressData';
+import { toast } from '@/components/Toast';
+import { CreateAddressType, NominatimReverseGeocodingResponse } from '../../types/Types';
+
+interface UseAddressFormProps {
+    selectedPosition: [number, number] | null;
+    selectedAddress: NominatimReverseGeocodingResponse | null;
+    initialPhone?: string;
+}
+
+export const useAddressForm = ({
+    selectedPosition,
+    selectedAddress,
+    initialPhone = '',
+}: UseAddressFormProps) => {
+    const router = useRouter();
+    const { mutate: createAddress, isPending } = useCreateAddress();
+    
+    const [formData, setFormData] = useState({
+        title: '',
+        addressDetails: '',
+        phone: initialPhone,
+        postalCode: '',
+        isDefault: false,
+    });
+
+    const handleFormDataChange = (data: Partial<typeof formData>) => {
+        setFormData((prev) => ({ ...prev, ...data }));
+    };
+
+    const submitAddress = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if (!selectedPosition || !selectedAddress) {
+            toast('لطفا موقعیت را روی نقشه انتخاب کنید', 'error');
+            return;
+        }
+
+        if (!formData.title.trim()) {
+            toast('لطفا عنوان آدرس را وارد کنید', 'error');
+            return;
+        }
+
+        if (!formData.addressDetails.trim()) {
+            toast('لطفا جزئیات آدرس را وارد کنید', 'error');
+            return;
+        }
+
+        if (!formData.phone.trim()) {
+            toast('لطفا شماره تلفن را وارد کنید', 'error');
+            return;
+        }
+
+        const addressData: CreateAddressType = {
+            title: formData.title,
+            address: formData.addressDetails,
+            city: selectedAddress.address.city || selectedAddress.address.district || '',
+            province: selectedAddress.address.province || selectedAddress.address.state || '',
+            postalCode: formData.postalCode || selectedAddress.address.postcode || '',
+            latitude: selectedPosition[0],
+            longitude: selectedPosition[1],
+            phone: formData.phone,
+            isDefault: formData.isDefault,
+        };
+
+        createAddress(addressData, {
+            onSuccess: () => {
+                toast('آدرس با موفقیت ثبت شد', 'success');
+                router.back();
+            },
+            onError: (error) => {
+                const errorMessage = error instanceof Error ? error.message : 'خطا در ثبت آدرس';
+                toast(errorMessage, 'error');
+            },
+        });
+    };
+
+    return {
+        formData,
+        isPending,
+        handleFormDataChange,
+        submitAddress,
+    };
+};
+

src/app/[name]/(Profile)/profile/address/new/page.tsx

@@ -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] = useState<[number, number]>([
-    const [mapCenter, setMapCenter] = useState<[number, number]>([Number(params?.get('lon')) || 35.6892, Number(params?.get('lon')) || 51.3890]);
+        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 { formData, isPending, handleFormDataChange, submitAddress } = useAddressForm({
-    const initialPosition = React.useMemo<[number, number]>(() => [35.6892, 51.3890], []);
+        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,
+                    position: mapCenter,
-                    title: 'Restaurant Location',
+                    title: 'موقعیت رستوران',
-                    icon: new L.Icon({
+                    icon: L.divIcon({
-                        iconUrl: '/icons/restaurant-marker.png',
+                        html: iconHtml,
-                        iconSize: [25, 41],
+                        className: 'custom-restaurant-marker',
-                        iconAnchor: [12, 41],
+                        iconSize: [32, 32],
-                        popupAnchor: [1, -34],
+                        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]);
+            const address = await fetchAddressFromCoordinates(
-            setSelectedAddress(address);
+                selectedPosition[0],
-        }
+                selectedPosition[1]
-    }
-
-    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 data = await response.json();
+            setSelectedAddress(address);
-            return data; // Full formatted address
-        } catch (error) {
-            console.error('Error fetching address:', error);
-            return null;
         }
     };
 
-    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' >
+                <div className='relative w-full h-full'>
-                    <AnimatedBottomSheet
+                    <ConfirmPositionModal
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={null}
-                        noBlur
                         visible={confirmModal}
-                        showCloseButton={false}
+                        onConfirm={toggleDetailsModal}
-                        showTitle={false}
+                        onCancel={toggleConfirmModal}
-                        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>
 
-                    <AnimatedBottomSheet
+                    <AddressDetailsModal
-                        bgOpacity={0}
-                        inDuration={0}
-                        blurOpacity={null}
-                        noBlur
                         visible={detailsModal}
-                        title='آدرس'
+                        selectedAddress={selectedAddress}
-                        onClick={toggleDetailsModal}
+                        formData={formData}
-                        overrideClassName='bg-container!'
+                        isPending={isPending}
-                    >
+                        onClose={toggleDetailsModal}
-                        <form onSubmit={submitAddressAction}>
+                        onFormDataChange={handleFormDataChange}
-                            <div className='px-4'>
+                        onSubmit={submitAddress}
-                                <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>
                 </div>
             </div>
         </div>

src/app/[name]/(Profile)/profile/address/new/utils/fetchAddress.ts

@@ -0,0 +1,18 @@
+import { NominatimReverseGeocodingResponse } from '../../types/Types';
+
+export const fetchAddressFromCoordinates = async (
+    lat: number,
+    lon: number
+): Promise<NominatimReverseGeocodingResponse | null> => {
+    try {
+        const response = await fetch(
+            `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json&addressdetails=1&accept-language=fa`
+        );
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Error fetching address:', error);
+        return null;
+    }
+};
+

src/app/[name]/(Profile)/profile/address/new/utils/formatAddress.ts

@@ -0,0 +1,30 @@
+import { NominatimReverseGeocodingResponse } from '../../types/Types';
+
+export const formatSelectedAddress = (selectedAddress: NominatimReverseGeocodingResponse | null): string => {
+    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 "آدرس یافت نشد";
+        }
+    }
+};
+

src/app/[name]/(Profile)/profile/address/service/AddressService.ts

@@ -0,0 +1,12 @@
+import { api } from "@/lib/api/axiosInstance";
+import { CreateAddressType } from "../types/Types";
+
+export const getAddresses = async () => {
+  const { data } = await api.get("/public/user/addresses");
+  return data;
+};
+
+export const createAddress = async (params: CreateAddressType) => {
+  const { data } = await api.post("/public/user/addresses", params);
+  return data;
+};

src/app/[name]/(Profile)/profile/address/types/Types.ts

@@ -0,0 +1,56 @@
+import type { Icon, DivIcon } from "leaflet";
+
+export type CreateAddressType = {
+  title: string;
+  address: string;
+  city: string;
+  province: string;
+  postalCode: string;
+  latitude: number;
+  longitude: number;
+  phone: string;
+  isDefault: boolean;
+};
+
+export type UpdateAddressType = CreateAddressType & {
+  id: string;
+};
+
+export interface MarkerData {
+  position: [number, number];
+  title: string;
+  icon?: Icon | DivIcon;
+}
+
+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;
+}

src/app/auth/login/service/LoginService.ts

@@ -2,11 +2,11 @@ import { api } from "@/lib/api/axiosInstance";
 import { LoginOTPRequestType, LoginVerifyOTPType } from "../types/Types";
 
 export const loginOTP = async (params: LoginOTPRequestType) => {
-  const { data } = await api.post("/auth/otp/request", params);
+  const { data } = await api.post("/public/auth/otp/request", params);
   return data;
 };
 
 export const loginVerifyOTP = async (params: LoginVerifyOTPType) => {
-  const { data } = await api.post("/auth/otp/verify", params);
+  const { data } = await api.post("/public/auth/otp/verify", params);
   return data;
 };

src/components/map/CustomMap.css

@@ -1,88 +1,123 @@
 .map-google-style {
-    background-color: var(--background);
+  background-color: var(--background);
-    font-family: 'irancell', system-ui, -apple-system, sans-serif;
+  font-family: "irancell", system-ui, -apple-system, sans-serif;
 }
 
 /* Map tiles styling */
 .map-google-style .leaflet-tile-pane {
-    filter: saturate(0.95) contrast(0.95) brightness(1.02);
+  filter: saturate(0.95) contrast(0.95) brightness(1.02);
 }
 
 /* Base font for all map elements */
 .map-google-style,
 .map-google-style .leaflet-container {
-    font-family: 'irancell', system-ui, -apple-system, sans-serif !important;
+  font-family: "irancell", system-ui, -apple-system, sans-serif !important;
 }
 
 /* Improve tile loading appearance */
 .map-google-style .leaflet-tile-loading {
-    opacity: 0;
+  opacity: 0;
-    transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
 }
 
 /* Custom popup style */
 .map-google-style .leaflet-popup-content-wrapper {
-    border-radius: 16px;
+  border-radius: 16px;
-    padding: 0;
+  padding: 0;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08),
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
-                0 2px 4px rgba(0,0,0,0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.08);
+  backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
+  background: rgba(255, 255, 255, 0.95);
-    background: rgba(255, 255, 255, 0.95);
 }
 
 .map-google-style .leaflet-popup-content {
-    margin: 16px 20px;
+  margin: 16px 20px;
-    line-height: 1.6;
+  line-height: 1.6;
-    font-size: 14px;
+  font-size: 14px;
-    color: #1f2937;
+  color: #1f2937;
-    font-weight: 500;
+  font-weight: 500;
-    text-align: right;
+  text-align: right;
 }
 
 .map-google-style .leaflet-popup-tip {
-    background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.08);
+  border: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .map-google-style .leaflet-popup-close-button {
-    padding: 12px !important;
+  padding: 12px !important;
-    color: #6b7280 !important;
+  color: #6b7280 !important;
-    opacity: 0.7;
+  opacity: 0.7;
-    transition: opacity 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .map-google-style .leaflet-popup-close-button:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 /* Marker styles */
 .map-google-style .leaflet-marker-icon,
 .map-google-style .leaflet-marker-shadow {
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    transform-origin: bottom center;
+  transform-origin: bottom center;
 }
 
 .map-google-style .leaflet-marker-icon {
-    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
 }
 
 .map-google-style .leaflet-marker-icon:hover {
-    transform: scale(1.1) translateY(-4px);
+  transform: scale(1.1) translateY(-4px);
-    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
+  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15));
 }
 
 .map-google-style .leaflet-marker-icon:hover + .leaflet-marker-shadow {
-    transform: scale(1.1) translateY(-4px);
+  opacity: 0.8;
-    opacity: 0.6;
+}
+
+/* Custom restaurant marker styles */
+.map-google-style .custom-restaurant-marker {
+  background: transparent !important;
+  border: none !important;
+}
+
+.map-google-style .custom-restaurant-marker img {
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+}
+
+/* Restaurant popup smaller size */
+.map-google-style .restaurant-popup .leaflet-popup-content-wrapper {
+  padding: 8px 25px 8px 12px;
+  position: relative;
+  min-height: 32px;
+}
+
+.map-google-style .restaurant-popup .leaflet-popup-content {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  text-align: right;
+}
+
+.map-google-style .restaurant-popup .leaflet-popup-close-button {
+  position: absolute !important;
+  top: 4px !important;
+  right: 4px !important;
+  padding: 4px 6px !important;
+  font-size: 16px !important;
+  line-height: 1 !important;
+  width: 20px !important;
+  height: 20px !important;
+  text-align: center !important;
+  z-index: 10;
 }
 
 /* Attribution styling */
 .map-google-style .leaflet-control-attribution {
-    display: none;
+  display: none;
-    /* background: rgba(255,255,255,0.9) !important;
+  /* background: rgba(255,255,255,0.9) !important;
     backdrop-filter: blur(8px);
     padding: 6px 12px !important;
     border-radius: 12px;
@@ -95,179 +130,174 @@
 
 /* Zoom controls */
 .map-zoom-controls {
-    position: absolute;
+  position: absolute;
-    right: 20px;
+  right: 20px;
-    bottom: 40px;
+  bottom: 40px;
-    background: var(--background);
+  background: var(--background);
-    border-radius: 16px;
+  border-radius: 16px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08),
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
-                0 2px 4px rgba(0,0,0,0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.08);
+  overflow: hidden;
-    overflow: hidden;
+  backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
+  z-index: 1000;
-    z-index: 1000;
 }
 
 .zoom-button {
-    width: 44px;
+  width: 44px;
-    height: 44px;
+  height: 44px;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    background: transparent;
+  background: transparent;
-    border: none;
+  border: none;
-    cursor: pointer;
+  cursor: pointer;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    color: #4b5563;
+  color: #4b5563;
-    font-size: 22px;
+  font-size: 22px;
-    font-weight: 500;
+  font-weight: 500;
-    -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .zoom-button:first-child {
-    border-bottom: 1px solid rgba(0,0,0,0.08);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 }
 
 .zoom-button:hover {
-    background-color: rgba(59, 130, 246, 0.05);
+  background-color: rgba(59, 130, 246, 0.05);
-    color: #2563eb;
+  color: #2563eb;
 }
 
 .zoom-button:active {
-    background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(59, 130, 246, 0.1);
 }
 
 /* Selected location indicator */
 .selected-location-indicator {
-    position: fixed;
+  position: fixed;
-    bottom: 24px;
+  bottom: 24px;
-    left: 50%;
+  left: 50%;
-    transform: translateX(-50%);
+  transform: translateX(-50%);
-    background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.95);
-    backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
-    padding: 14px 24px;
+  padding: 14px 24px;
-    border-radius: 16px;
+  border-radius: 16px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08),
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
-                0 2px 4px rgba(0,0,0,0.05);
+  border: 1px solid rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.08);
+  color: #1f2937;
-    color: #1f2937;
+  font-size: 14px;
-    font-size: 14px;
+  font-weight: 500;
-    font-weight: 500;
+  line-height: 1.6;
-    line-height: 1.6;
+  max-width: 90%;
-    max-width: 90%;
+  width: auto;
-    width: auto;
+  text-align: center;
-    text-align: center;
+  z-index: 1000;
-    z-index: 1000;
+  animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @keyframes slideUp {
-    from {
+  from {
-        transform: translate(-50%, 100%);
+    transform: translate(-50%, 100%);
-        opacity: 0;
+    opacity: 0;
-    }
+  }
-    to {
+  to {
-        transform: translate(-50%, 0);
+    transform: translate(-50%, 0);
-        opacity: 1;
+    opacity: 1;
-    }
+  }
 }
 
 /* Loading state */
 .map-loading {
-    position: absolute;
+  position: absolute;
-    inset: 0;
+  inset: 0;
-    background: rgba(255, 255, 255, 0.9);
+  background: rgba(255, 255, 255, 0.9);
-    backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
-    z-index: 1000;
+  z-index: 1000;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
 }
 
 /* Container styling */
 .map-container {
-    position: relative;
+  position: relative;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
+  background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
 }
 
 /* Search box styling */
 .map-search-container {
-    position: absolute;
+  position: absolute;
-    top: 20px;
+  top: 20px;
-    left: 50%;
+  left: 50%;
-    transform: translateX(-50%);
+  transform: translateX(-50%);
-    width: 90%;
+  width: 90%;
-    max-width: 480px;
+  max-width: 480px;
-    z-index: 1000;
+  z-index: 1000;
 }
 
 .map-search-input {
-    width: 100%;
+  width: 100%;
-    padding: 14px 20px;
+  padding: 14px 20px;
-    background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.95);
-    border: 1px solid rgba(0,0,0,0.08);
+  border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 16px;
+  border-radius: 16px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.08),
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
-                0 2px 4px rgba(0,0,0,0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-size: 15px;
-    font-size: 15px;
+  font-weight: 500;
-    font-weight: 500;
+  text-align: right;
-    text-align: right;
+  backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
+  color: #1f2937;
-    color: #1f2937;
 }
 
 .map-search-input:focus {
-    box-shadow: 0 6px 24px rgba(0,0,0,0.12),
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
-                0 2px 8px rgba(0,0,0,0.08);
+  border-color: rgba(59, 130, 246, 0.5);
-    border-color: rgba(59, 130, 246, 0.5);
+  background: rgba(255, 255, 255, 0.98);
-    background: rgba(255, 255, 255, 0.98);
 }
 
 .map-search-input::placeholder {
-    color: #6b7280;
+  color: #6b7280;
-    font-weight: 400;
+  font-weight: 400;
 }
 
 .map-search-results {
-    margin-top: 12px;
+  margin-top: 12px;
-    background: var(--container);
+  background: var(--container);
-    border-radius: 16px;
+  border-radius: 16px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.1),
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
-                0 2px 8px rgba(0,0,0,0.05);
+  overflow: hidden;
-    overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.08);
-    border: 1px solid rgba(0,0,0,0.08);
+  backdrop-filter: blur(8px);
-    backdrop-filter: blur(8px);
 }
 
 .map-search-result-item {
-    padding: 14px 20px;
+  padding: 14px 20px;
-    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    border-bottom: 1px solid rgba(0,0,0,0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-    font-size: 13px;
+  font-size: 13px;
-    font-weight: 400;
+  font-weight: 400;
-    color: var(--foreground);
+  color: var(--foreground);
-    cursor: pointer;
+  cursor: pointer;
-    display: block;
+  display: block;
-    width: 100%;
+  width: 100%;
-    text-align: right;
+  text-align: right;
 }
 
 .map-search-result-item:last-child {
-    border-bottom: none;
+  border-bottom: none;
 }
 
 .map-search-result-item:hover {
-    background-color: rgba(59, 130, 246, 0.05);
+  background-color: rgba(59, 130, 246, 0.05);
-    color: #2563eb;
+  color: #2563eb;
 }
 
 [data-theme="dark"] .map-search-result-item:hover {
-    color: var(--disabled-text);
+  color: var(--disabled-text);
 }
 
 .map-search-result-item:active {
-    background-color: rgba(59, 130, 246, 0.1);
+  background-color: rgba(59, 130, 246, 0.1);
 }

src/components/map/CustomMap.tsx

@@ -15,7 +15,7 @@ interface CustomMapProps {
   markers?: Array<{
     position: [number, number];
     title: string;
-    icon?: L.Icon;
+    icon?: L.Icon | L.DivIcon;
   }>;
   onPositionSelect?: (position: [number, number]) => void;
   onZoomChange?: (zoom: number) => void;
@@ -79,6 +79,25 @@ function MarkerUpdater({ markers }: { markers?: CustomMapProps['markers'] }) {
   return null;
 }
 
+// Component to auto-open popup for restaurant marker
+function MarkerWithAutoOpen({ position, icon, title }: { position: [number, number]; icon?: L.Icon | L.DivIcon; title: string }) {
+  const markerRef = React.useRef<L.Marker>(null);
+
+  useEffect(() => {
+    if (markerRef.current && title === 'موقعیت رستوران') {
+      markerRef.current.openPopup();
+    }
+  }, [title]);
+
+  return (
+    <Marker ref={markerRef} position={position} icon={icon}>
+      <Popup className="restaurant-popup">
+        <div className="text-xs font-medium">{title}</div>
+      </Popup>
+    </Marker>
+  );
+}
+
 const CustomMap: React.FC<CustomMapProps> = ({
   initialPosition,
   zoom = 13,
@@ -276,15 +295,12 @@ const CustomMap: React.FC<CustomMapProps> = ({
 
         {/* Custom markers */}
         {markers.map((marker, index) => (
-          <Marker
+          <MarkerWithAutoOpen
             key={`${marker.position}-${index}`}
             position={marker.position}
             icon={marker.icon}
-          >
+            title={marker.title}
-            <Popup>
+          />
-              <div className="text-sm">{marker.title}</div>
-            </Popup>
-          </Marker>
         ))}
 
         {/* Selected position marker */}

src/lib/api/axiosInstance.ts

@@ -27,8 +27,9 @@ const processQueue = (error: unknown, token: string | null = null) => {
 
 // Attach access token to requests
 api.interceptors.request.use((config) => {
-  const state = useAuthStore.getState();
+  const token = localStorage.getItem(
-  const token = state.user?.accessToken;
+    process.env.NEXT_PUBLIC_TOKEN_NAME as string
+  );
 
   if (token) {
     config.headers = config.headers || {};