fix location restaurant + show service area in new address

src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx

@@ -94,8 +94,8 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
             description: description || '',
             deliveryMethodId: storeDeliveryType,
             paymentMethodId: paymentType,
-            ...(selectedAddressId && !isDeliveryCar && { addressId: selectedAddressId }),
+            ...(isCourierDelivery && selectedAddressId && { addressId: selectedAddressId }),
-            ...(carAddress && { carAddress }),
+            ...(isDeliveryCar && carAddress && { carAddress }),
         };
 
         saveAllMethod(saveAllMethodData, {
@@ -113,7 +113,7 @@ export const SummarySection = ({ cartModal, onToggleCartModal, deliveryType }: S
                 if (paymentType && paymentType !== '0') {
                     orderData.paymentMethodId = paymentType;
                 }
-                if (selectedAddressId && !isDeliveryCar) {
+                if (isCourierDelivery && selectedAddressId) {
                     orderData.addressId = selectedAddressId;
                 }
                 if (tableNumber > 0) {

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

@@ -71,13 +71,18 @@ function OrderDetailInex() {
         }
     }, [cartItems?.data?.paymentMethodId, setPaymentType, setIsSelectedPayment]);
 
+    const selectedDeliveryMethod = useMemo(() => {
+        if (!shipmentMethod?.data || !deliveryType) return null;
+        return shipmentMethod.data.find((item) => item.id === deliveryType);
+    }, [shipmentMethod?.data, deliveryType]);
+
     useEffect(() => {
-        if (cartItems?.data?.addressId) {
+        if (cartItems?.data?.addressId && selectedDeliveryMethod?.method === 'deliveryCourier') {
             const addressId = cartItems.data.addressId;
             setIsSelectedAddress(true);
             setSelectedAddressId(addressId ?? null);
         }
-    }, [cartItems?.data?.addressId, setIsSelectedAddress, setSelectedAddressId]);
+    }, [cartItems?.data?.addressId, setIsSelectedAddress, setSelectedAddressId, selectedDeliveryMethod]);
 
     useEffect(() => {
         if (cartItems?.data?.coupon?.couponCode && cartItems.data.couponDiscount > 0) {
@@ -85,11 +90,6 @@ function OrderDetailInex() {
         }
     }, [cartItems?.data?.coupon?.couponCode, cartItems?.data?.couponDiscount]);
 
-    const selectedDeliveryMethod = useMemo(() => {
-        if (!shipmentMethod?.data || !deliveryType) return null;
-        return shipmentMethod.data.find((item) => item.id === deliveryType);
-    }, [shipmentMethod?.data, deliveryType]);
-
     return (
         <div className='h-full bg-inherit flex flex-col gap-5'>
             <CheckoutHeader />

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

@@ -11,6 +11,7 @@ import { AddressDetailsModal } from './components/AddressDetailsModal';
 import { useAddressForm } from './hooks/useAddressForm';
 import { fetchAddressFromCoordinates } from './utils/fetchAddress';
 import { useGetAddressById } from '../hooks/useAddressData';
+import { useGetAbout } from '@/app/[name]/(Main)/about/hooks/useAboutData';
 
 const CustomMap = dynamic(
     () => import('@/components/map/CustomMap'),
@@ -24,6 +25,7 @@ function OrderTrackingPage() {
     const editMode = !!id;
 
     const { data: addressResponse, isLoading: isLoadingAddress } = useGetAddressById(id);
+    const { data: aboutData } = useGetAbout();
     const address = addressResponse?.data;
     const user = useAuthStore((state) => state.user);
     const [selectedPosition, setSelectedPosition] = useState<[number, number] | null>(null);
@@ -31,17 +33,12 @@ function OrderTrackingPage() {
     const [markers, setMarkers] = useState<MarkerData[]>([]);
     const [initialPositionSet, setInitialPositionSet] = useState(false);
 
-    const getInitialMapCenter = (): [number, number] => {
+    const restaurant = aboutData?.data;
-        if (editMode && address) {
-            return [address.latitude, address.longitude];
-        }
-        return [
-            Number(params?.get('lat')) || 35.6892,
-            Number(params?.get('lon')) || 51.3890
-        ];
-    };
 
-    const [mapCenter, setMapCenter] = useState<[number, number]>(getInitialMapCenter());
+    const [mapCenter, setMapCenter] = 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();
 
@@ -53,10 +50,17 @@ function OrderTrackingPage() {
         addressData: address || null,
     });
 
+    useEffect(() => {
+        if (editMode && address) {
+            setMapCenter([address.latitude, address.longitude]);
+        } else if (restaurant?.latitude && restaurant?.longitude) {
+            setMapCenter([restaurant.latitude, restaurant.longitude]);
+        }
+    }, [editMode, address, restaurant]);
+
     useEffect(() => {
         if (editMode && address && !initialPositionSet) {
             const position: [number, number] = [address.latitude, address.longitude];
-            setMapCenter(position);
             setSelectedPosition(position);
             setInitialPositionSet(true);
 
@@ -69,6 +73,7 @@ function OrderTrackingPage() {
         }
     }, [editMode, address, initialPositionSet, setDetailsModal]);
 
+
     useEffect(() => {
         const initializeMarkers = async () => {
             const L = (await import('leaflet')).default;
@@ -79,9 +84,16 @@ function OrderTrackingPage() {
                 </div>
             `;
 
-            setMarkers([
+            const restaurantPosition: [number, number] | null =
-                {
+                restaurant?.latitude && restaurant?.longitude
-                    position: mapCenter,
+                    ? [restaurant.latitude, restaurant.longitude]
+                    : null;
+
+            const markersToSet: MarkerData[] = [];
+
+            if (restaurantPosition) {
+                markersToSet.push({
+                    position: restaurantPosition,
                     title: 'موقعیت رستوران',
                     icon: L.divIcon({
                         html: iconHtml,
@@ -90,12 +102,14 @@ function OrderTrackingPage() {
                         iconAnchor: [20, 40],
                         popupAnchor: [0, -40],
                     })
-                }
+                });
-            ]);
+            }
+
+            setMarkers(markersToSet);
         };
 
         initializeMarkers();
-    }, [mapCenter]);
+    }, [restaurant]);
 
     const handlePositionSelect = (position: [number, number]) => {
         setSelectedPosition((prev) => {
@@ -150,6 +164,14 @@ function OrderTrackingPage() {
         );
     }
 
+    if (!restaurant) {
+        return null
+    }
+
+    const hasServiceArea = restaurant?.serviceArea &&
+        restaurant.serviceArea.coordinates &&
+        restaurant.serviceArea.coordinates.length > 0;
+
     return (
         <div className="fixed inset-0 bg-gray-50">
             <div className="absolute inset-0">
@@ -157,12 +179,23 @@ function OrderTrackingPage() {
                     initialPosition={mapCenter}
                     zoom={14}
                     markers={markers}
+                    serviceArea={restaurant?.serviceArea || null}
                     onPositionSelect={handlePositionSelect}
                     onZoomChange={handleZoomChange}
                     onClick={handleMapClick}
                 />
             </div>
 
+            {hasServiceArea && (
+                <div className="absolute top-4 left-4 right-4 z-[1000] max-w-sm">
+                    <div className="bg-blue-50/90 border border-blue-200 rounded-lg p-3 shadow-sm">
+                        <p className="text-xs text-blue-800">
+                            محدوده سرویس‌دهی روی نقشه با رنگ آبی مشخص شده است
+                        </p>
+                    </div>
+                </div>
+            )}
+
             <div className="absolute bottom-0 left-0 right-0 z-[1000]">
                 <div className='relative w-full h-full'>
                     <ConfirmPositionModal

src/components/map/CustomMap.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup, useMap, useMapEvents, Polygon } from 'react-leaflet';
 import L from 'leaflet';
 import { Skeleton } from '@/components/ui/skeleton';
 import 'leaflet/dist/leaflet.css';
@@ -9,6 +9,11 @@ import './CustomMap.css';
 import { ActiveSearchbox } from '../input/ActiveSearchbox';
 
 // Define types for our props
+interface ServiceArea {
+  type: "Polygon";
+  coordinates: number[][][];
+}
+
 interface CustomMapProps {
   initialPosition: [number, number];
   zoom?: number;
@@ -17,6 +22,7 @@ interface CustomMapProps {
     title: string;
     icon?: L.Icon | L.DivIcon;
   }>;
+  serviceArea?: ServiceArea | null;
   onPositionSelect?: (position: [number, number]) => void;
   onZoomChange?: (zoom: number) => void;
   onClick?: (event: L.LeafletMouseEvent) => void;
@@ -102,6 +108,7 @@ const CustomMap: React.FC<CustomMapProps> = ({
   initialPosition,
   zoom = 13,
   markers = [],
+  serviceArea,
   onPositionSelect,
   onZoomChange,
   onClick,
@@ -293,6 +300,20 @@ const CustomMap: React.FC<CustomMapProps> = ({
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
 
+        {/* Service Area Polygon */}
+        {serviceArea && serviceArea.coordinates && serviceArea.coordinates.length > 0 && (
+          <Polygon
+            positions={serviceArea.coordinates[0].map(coord => [coord[1], coord[0]] as [number, number])}
+            pathOptions={{
+              color: '#3b82f6',
+              fillColor: '#3b82f6',
+              fillOpacity: 0.2,
+              weight: 2,
+              interactive: false,
+            }}
+          />
+        )}
+
         {/* Custom markers */}
         {markers.map((marker, index) => (
           <MarkerWithAutoOpen