diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx index 0112130..228dd42 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx +++ b/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 }), - ...(carAddress && { carAddress }), + ...(isCourierDelivery && selectedAddressId && { addressId: selectedAddressId }), + ...(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) { diff --git a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx b/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx index d498513..56d80d7 100644 --- a/src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx +++ b/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 (
diff --git a/src/app/[name]/(Profile)/profile/address/new/page.tsx b/src/app/[name]/(Profile)/profile/address/new/page.tsx index ba69c2d..7b15fa1 100644 --- a/src/app/[name]/(Profile)/profile/address/new/page.tsx +++ b/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([]); const [initialPositionSet, setInitialPositionSet] = useState(false); - const getInitialMapCenter = (): [number, number] => { - if (editMode && address) { - return [address.latitude, address.longitude]; - } - return [ - Number(params?.get('lat')) || 35.6892, - Number(params?.get('lon')) || 51.3890 - ]; - }; + const restaurant = aboutData?.data; - 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() {
`; - setMarkers([ - { - position: mapCenter, + const restaurantPosition: [number, number] | null = + restaurant?.latitude && restaurant?.longitude + ? [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 (
@@ -157,12 +179,23 @@ function OrderTrackingPage() { initialPosition={mapCenter} zoom={14} markers={markers} + serviceArea={restaurant?.serviceArea || null} onPositionSelect={handlePositionSelect} onZoomChange={handleZoomChange} onClick={handleMapClick} />
+ {hasServiceArea && ( +
+
+

+ محدوده سرویس‌دهی روی نقشه با رنگ آبی مشخص شده است +

+
+
+ )} +
; + 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 = ({ initialPosition, zoom = 13, markers = [], + serviceArea, onPositionSelect, onZoomChange, onClick, @@ -293,6 +300,20 @@ const CustomMap: React.FC = ({ url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> + {/* Service Area Polygon */} + {serviceArea && serviceArea.coordinates && serviceArea.coordinates.length > 0 && ( + [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) => (