create address + fix location restaurant
This commit is contained in:
hamid zarghami
@@ -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>
|
||||
|
After Width: | Height: | Size: 248 B |
@@ -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,
|
||||
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 handleZoomChange = (zoom: number) => {
|
||||
|
||||
@@ -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"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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 "آدرس یافت نشد";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
};
|
||||
|
||||
+184
-154
@@ -1,88 +1,123 @@
|
||||
.map-google-style {
|
||||
background-color: var(--background);
|
||||
font-family: 'irancell', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--background);
|
||||
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;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Custom popup style */
|
||||
.map-google-style .leaflet-popup-content-wrapper {
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08),
|
||||
0 2px 4px rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.map-google-style .leaflet-popup-content {
|
||||
margin: 16px 20px;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
margin: 16px 20px;
|
||||
line-height: 1.6;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.map-google-style .leaflet-popup-tip {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 4px 16px 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;
|
||||
color: #6b7280 !important;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s ease;
|
||||
padding: 12px !important;
|
||||
color: #6b7280 !important;
|
||||
opacity: 0.7;
|
||||
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);
|
||||
transform-origin: bottom center;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
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);
|
||||
filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
|
||||
transform: scale(1.1) translateY(-4px);
|
||||
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.6;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
/* background: rgba(255,255,255,0.9) !important;
|
||||
display: none;
|
||||
/* 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;
|
||||
right: 20px;
|
||||
bottom: 40px;
|
||||
background: var(--background);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08),
|
||||
0 2px 4px rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 40px;
|
||||
background: var(--background);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
backdrop-filter: blur(8px);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.zoom-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #4b5563;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
color: #4b5563;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
-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);
|
||||
color: #2563eb;
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
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;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 14px 24px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08),
|
||||
0 2px 4px rgba(0,0,0,0.05);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
max-width: 90%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: fixed;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 14px 24px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
color: #1f2937;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
max-width: 90%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translate(-50%, 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
from {
|
||||
transform: translate(-50%, 100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.map-loading {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Container styling */
|
||||
.map-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, #e5e7eb 0%, #f3f4f6 100%);
|
||||
}
|
||||
|
||||
/* Search box styling */
|
||||
.map-search-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 90%;
|
||||
max-width: 480px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.map-search-input {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08),
|
||||
0 2px 4px rgba(0,0,0,0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
backdrop-filter: blur(8px);
|
||||
color: #1f2937;
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-align: right;
|
||||
backdrop-filter: blur(8px);
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.map-search-input:focus {
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.12),
|
||||
0 2px 8px rgba(0,0,0,0.08);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.map-search-input::placeholder {
|
||||
color: #6b7280;
|
||||
font-weight: 400;
|
||||
color: #6b7280;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.map-search-results {
|
||||
margin-top: 12px;
|
||||
background: var(--container);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.1),
|
||||
0 2px 8px rgba(0,0,0,0.05);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
margin-top: 12px;
|
||||
background: var(--container);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.map-search-result-item {
|
||||
padding: 14px 20px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 14px 20px;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: var(--foreground);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
width: 100%;
|
||||
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);
|
||||
color: #2563eb;
|
||||
background-color: rgba(59, 130, 246, 0.05);
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-sm">{marker.title}</div>
|
||||
</Popup>
|
||||
</Marker>
|
||||
title={marker.title}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Selected position marker */}
|
||||
|
||||
@@ -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 = state.user?.accessToken;
|
||||
const token = localStorage.getItem(
|
||||
process.env.NEXT_PUBLIC_TOKEN_NAME as string
|
||||
);
|
||||
|
||||
if (token) {
|
||||
config.headers = config.headers || {};
|
||||
|
||||
Reference in New Issue
Block a user