danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix location restaurant + show service area in new address

Browse Source
This commit is contained in:
hamid zarghami
2025-12-21 10:13:16 +03:30
parent 668172e8ee
commit 4c5e65d71e
4 changed files with 82 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[name]/(Dialogs)/order/checkout/[id]/components/SummarySection.tsx
+3 -3
View File
@@ -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) {
src/app/[name]/(Dialogs)/order/checkout/[id]/page.tsx
+7 -7
View File
@@ -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
+50 -17
View File
@@ -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] => {
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() {
</div>
`;
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 (
<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
+22 -1
View File
@@ -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