368 lines
14 KiB
JavaScript
368 lines
14 KiB
JavaScript
import { useState, useEffect, useRef } from 'react';
|
|
import Head from 'next/head';
|
|
import { useRouter } from 'next/router';
|
|
import Layout from "../components/ui/Layout";
|
|
import { Card, CardHeader, CardContent, CardTitle } from "../components/ui/components";
|
|
|
|
export default function TrackingPage() {
|
|
const router = useRouter();
|
|
const [trackingNumber, setTrackingNumber] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [trackingData, setTrackingData] = useState(null);
|
|
|
|
// Use ref to keep track of if the component is mounted
|
|
const isMounted = useRef(true);
|
|
|
|
// Handle tracking number from URL query parameter
|
|
useEffect(() => {
|
|
if (router.query.number) {
|
|
setTrackingNumber(router.query.number);
|
|
fetchTrackingData(router.query.number);
|
|
}
|
|
|
|
return () => {
|
|
isMounted.current = false;
|
|
};
|
|
}, [router.query.number]);
|
|
|
|
// Copy text to clipboard function
|
|
const copyToClipboard = (text) => {
|
|
navigator.clipboard.writeText(text).catch(err => {
|
|
console.error('Failed to copy text: ', err);
|
|
});
|
|
};
|
|
|
|
// Format date to Polish locale
|
|
const formatDate = (dateString) => {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString('pl-PL', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit'
|
|
});
|
|
};
|
|
|
|
// Get country flag emoji
|
|
const getCountryFlag = (countryCode) => {
|
|
const flags = {
|
|
'PL': '🇵🇱',
|
|
'DE': '🇩🇪',
|
|
'FR': '🇫🇷',
|
|
'GB': '🇬🇧',
|
|
'US': '🇺🇸',
|
|
'IT': '🇮🇹',
|
|
'ES': '🇪🇸',
|
|
'NL': '🇳🇱',
|
|
'BE': '🇧🇪',
|
|
'CZ': '🇨🇿',
|
|
'SK': '🇸🇰',
|
|
'AT': '🇦🇹',
|
|
'CH': '🇨🇭'
|
|
};
|
|
return flags[countryCode] || '🌍';
|
|
};
|
|
|
|
// Validate tracking number format
|
|
const isValidTrackingNumber = (number) => {
|
|
return number && number.length >= 13 && /^[0-9A-Z]+$/.test(number.replace(/\s/g, ''));
|
|
};
|
|
|
|
// No longer needed - removed map-related function
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (trackingNumber) {
|
|
fetchTrackingData(trackingNumber);
|
|
}
|
|
};
|
|
|
|
// Fetch tracking data from API
|
|
const fetchTrackingData = async (number) => {
|
|
if (!number) {
|
|
setError('Proszę wprowadzić numer przesyłki.');
|
|
return;
|
|
}
|
|
|
|
if (!isValidTrackingNumber(number)) {
|
|
setError('Nieprawidłowy format numeru przesyłki. Numer powinien zawierać tylko cyfry i litery.');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setError('');
|
|
setTrackingData(null);
|
|
|
|
const apiKey =
|
|
"GI42fpjWMcTGI2oY0DAN4IulxR3QZy8+XhA2oPE17HB6P5JA+BTvuY5gIH0imCa2ZmH/vieaE66A/bRnSlsh3RIWVPHPtR5qVflsHx2mBtDAnzWFBmzZeDg8zVIPIPRN7TyM/SzqHDkt5IdfnRDRXKO5p/Bc/1Jpj0JpNKs+NTk=.RjcxMEEwRjI3NjA1QURGMjNCNzc4NTVGOTY0NkQ0RTA5NDQ4NTgxNzE2RTNEREFGMTkwNkU2QjlFRTlEMzEzRg==.443a0acd4c7d4417b55e1ae9e755d91a";
|
|
const url = `https://uss.poczta-polska.pl/uss/v2.0/tracking/checkmailex?language=PL&number=${number}&addPostOfficeInfo=true&events=true&states=true`;
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
Accept: "application/json",
|
|
"Content-Type": "application/json",
|
|
api_key: apiKey,
|
|
},
|
|
});
|
|
|
|
if (!response.ok) {
|
|
if (response.status === 404) {
|
|
throw new Error('Nie znaleziono przesyłki o podanym numerze.');
|
|
} else if (response.status === 403) {
|
|
throw new Error('Brak autoryzacji do API. Skontaktuj się z administratorem.');
|
|
} else {
|
|
throw new Error(`Błąd serwera: ${response.status}. Spróbuj ponownie później.`);
|
|
}
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data.mailInfo) {
|
|
throw new Error('Brak danych o przesyłce. Sprawdź numer i spróbuj ponownie.');
|
|
}
|
|
|
|
if (isMounted.current) {
|
|
setTrackingData(data);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching tracking data:", error);
|
|
if (isMounted.current) {
|
|
setError(error.message || 'Wystąpił błąd podczas pobierania danych. Sprawdź połączenie internetowe i spróbuj ponownie.');
|
|
}
|
|
} finally {
|
|
if (isMounted.current) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Create a comprehensive timeline combining states and events
|
|
const getTimeline = (mailInfo) => {
|
|
if (!mailInfo) return [];
|
|
|
|
const timeline = [];
|
|
|
|
// Add states to timeline
|
|
if (mailInfo.states) {
|
|
mailInfo.states.forEach(state => {
|
|
timeline.push({
|
|
type: 'state',
|
|
data: state,
|
|
time: new Date(state.time)
|
|
});
|
|
});
|
|
}
|
|
|
|
// Add events to timeline
|
|
if (mailInfo.events) {
|
|
mailInfo.events.forEach(event => {
|
|
timeline.push({
|
|
type: 'event',
|
|
data: event,
|
|
time: new Date(event.time)
|
|
});
|
|
});
|
|
}
|
|
|
|
// Sort timeline by time (oldest first)
|
|
return timeline.sort((a, b) => a.time - b.time);
|
|
};
|
|
|
|
// Handle button click for copying tracking number
|
|
const handleCopy = () => {
|
|
if (trackingData?.mailInfo?.number) {
|
|
copyToClipboard(trackingData.mailInfo.number);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout title="Śledzenie przesyłek">
|
|
<div className="p-6 max-w-7xl mx-auto">
|
|
{/* Page Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
|
Śledzenie przesyłek
|
|
</h1>
|
|
<p className="text-gray-600">
|
|
Sprawdź status przesyłki
|
|
</p>
|
|
</div>
|
|
|
|
{/* Input Card */}
|
|
<Card className="mb-6">
|
|
<CardHeader className="border-b bg-gray-50">
|
|
<CardTitle>Wyszukiwanie przesyłki</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<form onSubmit={handleSubmit} className="flex flex-wrap gap-4">
|
|
<input
|
|
type="text"
|
|
value={trackingNumber}
|
|
onChange={(e) => setTrackingNumber(e.target.value)}
|
|
placeholder="Wprowadź numer przesyłki (np. 00659007734210841438)"
|
|
maxLength="50"
|
|
className="flex-1 min-w-[250px] block rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors p-2.5 border"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? 'Wyszukiwanie...' : 'Szukaj'}
|
|
</button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{loading && (
|
|
<div className="flex items-center justify-center p-4 mb-6">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
|
<span className="ml-3 text-blue-600 font-medium">Pobieranie danych...</span>
|
|
</div>
|
|
)}
|
|
|
|
{error && (
|
|
<div className="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-lg">
|
|
<p>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{trackingData && trackingData.mailInfo && (
|
|
<>
|
|
{/* Package Information Card */}
|
|
<Card className="mb-6">
|
|
<CardHeader className="border-b bg-gray-50">
|
|
<CardTitle>Dane przesyłki</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="font-semibold text-gray-700 min-w-[140px]">Numer przesyłki:</span>
|
|
<span className="text-gray-900">{trackingData.mailInfo.number}</span>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="ml-2 text-xs border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-2 py-1 rounded transition-colors"
|
|
>
|
|
Kopiuj
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center">
|
|
<span className="font-semibold text-gray-700 min-w-[140px]">Typ przesyłki:</span>
|
|
<span className="text-gray-900">{trackingData.mailInfo.typeOfMailName}</span>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center">
|
|
<span className="font-semibold text-gray-700 min-w-[140px]">Doręczono:</span>
|
|
<span className={`px-3 py-1 rounded-full text-sm font-medium ${
|
|
trackingData.mailInfo.finished
|
|
? 'bg-green-100 text-green-800'
|
|
: 'bg-yellow-100 text-yellow-800'
|
|
}`}>
|
|
{trackingData.mailInfo.finished ? "✓ Tak" : "⏳ Nie"}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 mt-4 pt-4 border-t border-gray-200">
|
|
<div className="flex items-center gap-2 bg-gray-50 px-4 py-3 rounded-lg">
|
|
<span className="text-gray-700">🏁 Nadanie:</span>
|
|
<span className="font-medium">
|
|
{getCountryFlag(trackingData.mailInfo.dispatchCountryCode)} {trackingData.mailInfo.dispatchCountryName}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 bg-gray-50 px-4 py-3 rounded-lg">
|
|
<span className="text-gray-700">🎯 Doręczenie:</span>
|
|
<span className="font-medium">
|
|
{getCountryFlag(trackingData.mailInfo.recipientCountryCode)} {trackingData.mailInfo.recipientCountryName}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Package History Card */}
|
|
<Card>
|
|
<CardHeader className="border-b bg-gray-50">
|
|
<CardTitle>Historia przesyłki</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-6">
|
|
{getTimeline(trackingData.mailInfo).length > 0 ? (
|
|
<div className="relative pl-8 border-l-2 border-blue-500 ml-4">
|
|
{getTimeline(trackingData.mailInfo).map((item, index) => {
|
|
if (item.type === 'state') {
|
|
// Find related events for this state
|
|
const relatedEvents = trackingData.mailInfo.events ?
|
|
trackingData.mailInfo.events.filter(event =>
|
|
event.state && event.state.code === item.data.code
|
|
) : [];
|
|
|
|
return (
|
|
<div key={`state-${index}`} className="mb-8 relative">
|
|
<div className="absolute -left-[29px] w-6 h-6 bg-blue-600 rounded-full border-4 border-white"></div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 mb-3">
|
|
<div className="font-medium text-blue-700">📦 {item.data.name}</div>
|
|
<div className="text-sm text-gray-600 mt-1">🕒 {formatDate(item.data.time)}</div>
|
|
</div>
|
|
{relatedEvents.map((event, eventIndex) => (
|
|
<div key={`related-event-${eventIndex}`} className="ml-4 bg-blue-50 rounded-lg p-4 mb-3 border-l-4 border-blue-400">
|
|
<div className="font-medium text-blue-800">📋 {event.name}</div>
|
|
<div className="text-sm text-gray-600 mt-1">🕒 {formatDate(event.time)}</div>
|
|
{event.postOffice && event.postOffice.description && (
|
|
<div className="mt-2 text-sm bg-white p-2 rounded border border-gray-200">
|
|
📍 {event.postOffice.description.city}, {event.postOffice.description.street} {event.postOffice.description.houseNumber}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
} else if (item.type === 'event') {
|
|
// Only show standalone events (not linked to states)
|
|
const isLinkedToState = trackingData.mailInfo.states &&
|
|
trackingData.mailInfo.states.some(state =>
|
|
item.data.state && item.data.state.code === state.code
|
|
);
|
|
|
|
if (!isLinkedToState) {
|
|
return (
|
|
<div key={`event-${index}`} className="mb-8 relative">
|
|
<div className="absolute -left-[29px] w-6 h-6 bg-gray-400 rounded-full border-4 border-white"></div>
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
|
|
<div className="font-medium text-gray-700">📋 {item.data.name}</div>
|
|
<div className="text-sm text-gray-600 mt-1">🕒 {formatDate(item.data.time)}</div>
|
|
{item.data.postOffice && item.data.postOffice.description && (
|
|
<div className="mt-2 text-sm bg-gray-50 p-2 rounded border border-gray-200">
|
|
📍 {item.data.postOffice.description.city}, {item.data.postOffice.description.street} {item.data.postOffice.description.houseNumber}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
}
|
|
return null;
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 bg-gray-50 rounded-lg">
|
|
<p className="text-gray-600">Brak dostępnych informacji o historii przesyłki</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|