706 lines
23 KiB
JavaScript
706 lines
23 KiB
JavaScript
"use client";
|
||
|
||
import { useEffect, useState, useCallback, useRef } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { useAuth } from "@/context/AuthContext";
|
||
|
||
const API_BASE = "";
|
||
|
||
const SPECIES_BREEDS = {
|
||
Dog: ["Beagle", "Boxer", "Bulldog", "Chihuahua", "Dachshund", "German Shepherd", "Golden Retriever", "Labrador Retriever", "Poodle", "Rottweiler", "Shih Tzu", "Siberian Husky", "Yorkshire Terrier", "Mixed / Other"],
|
||
Cat: ["Abyssinian", "Bengal", "British Shorthair", "Maine Coon", "Persian", "Ragdoll", "Scottish Fold", "Siamese", "Sphynx", "Mixed / Other"],
|
||
Bird: ["Canary", "Cockatiel", "Cockatoo", "Finch", "Lovebird", "Macaw", "Parakeet", "Parrot", "Other"],
|
||
Rabbit: ["Dutch", "Flemish Giant", "Holland Lop", "Lionhead", "Mini Rex", "Other"],
|
||
Hamster: ["Dwarf", "Roborovski", "Syrian", "Other"],
|
||
"Guinea Pig": ["Abyssinian", "American", "Peruvian", "Teddy", "Other"],
|
||
Reptile: ["Ball Python", "Bearded Dragon", "Blue-tongued Skink", "Corn Snake", "Leopard Gecko", "Other"],
|
||
Fish: ["Angelfish", "Betta", "Cichlid", "Clownfish", "Goldfish", "Guppy", "Tetra", "Other"],
|
||
Other: ["Other"],
|
||
};
|
||
|
||
export default function ProfilePage() {
|
||
const {user, token, loading, logout, refreshUser} = useAuth();
|
||
const router = useRouter();
|
||
const petImageObjectUrlsRef = useRef([]);
|
||
|
||
const [pets, setPets] = useState([]);
|
||
const [loadingPets, setLoadingPets] = useState(false);
|
||
const [orders, setOrders] = useState([]);
|
||
const [loadingOrders, setLoadingOrders] = useState(false);
|
||
const [showForm, setShowForm] = useState(false);
|
||
const [editingPet, setEditingPet] = useState(null);
|
||
const [petName, setPetName] = useState("");
|
||
const [species, setSpecies] = useState("");
|
||
const [breed, setBreed] = useState("");
|
||
const [petAge, setPetAge] = useState("1");
|
||
const [submitting, setSubmitting] = useState(false);
|
||
const [petError, setPetError] = useState(null);
|
||
const [avatarObjectUrl, setAvatarObjectUrl] = useState(null);
|
||
const [profileForm, setProfileForm] = useState({ firstName: "", lastName: "", email: "", phone: "", password: "", confirmPassword: "" });
|
||
const [profileSubmitting, setProfileSubmitting] = useState(false);
|
||
const [profileError, setProfileError] = useState(null);
|
||
const [profileSuccess, setProfileSuccess] = useState(null);
|
||
const [avatarSubmitting, setAvatarSubmitting] = useState(false);
|
||
|
||
const clearPetImageObjectUrls = useCallback(() => {
|
||
for (const objectUrl of petImageObjectUrlsRef.current) {
|
||
URL.revokeObjectURL(objectUrl);
|
||
}
|
||
petImageObjectUrlsRef.current = [];
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!loading && !user) {
|
||
router.replace(`/login?next=${encodeURIComponent("/profile")}`);
|
||
}
|
||
|
||
}, [user, loading, router]);
|
||
|
||
useEffect(() => {
|
||
setProfileForm({
|
||
firstName: user?.firstName || "",
|
||
lastName: user?.lastName || "",
|
||
email: user?.email || "",
|
||
phone: user?.phone || "",
|
||
password: "",
|
||
confirmPassword: "",
|
||
});
|
||
}, [user]);
|
||
|
||
const loadPets = useCallback(async () => {
|
||
if (!token) return;
|
||
setLoadingPets(true);
|
||
|
||
try {
|
||
const response = await fetch(`${API_BASE}/api/v1/my-pets?status=Owned`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`Request failed (${response.status})`);
|
||
}
|
||
|
||
const petData = await response.json();
|
||
clearPetImageObjectUrls();
|
||
|
||
const ownedPets = Array.isArray(petData) ? petData : [];
|
||
|
||
const petsWithResolvedImages = await Promise.all(
|
||
ownedPets.map(async (pet) => {
|
||
if (!pet.imageUrl) return pet;
|
||
try {
|
||
const imageResponse = await fetch(`${API_BASE}${pet.imageUrl}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
|
||
if (!imageResponse.ok) return { ...pet, imageUrl: null };
|
||
|
||
const blob = await imageResponse.blob();
|
||
const objectUrl = URL.createObjectURL(blob);
|
||
petImageObjectUrlsRef.current.push(objectUrl);
|
||
return { ...pet, imageUrl: objectUrl };
|
||
} catch {
|
||
return { ...pet, imageUrl: null };
|
||
}
|
||
})
|
||
);
|
||
|
||
setPets(petsWithResolvedImages);
|
||
}
|
||
|
||
catch {
|
||
}
|
||
|
||
finally {
|
||
setLoadingPets(false);
|
||
}
|
||
}, [token, clearPetImageObjectUrls]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
clearPetImageObjectUrls();
|
||
};
|
||
}, [clearPetImageObjectUrls]);
|
||
|
||
const loadOrders = useCallback(async () => {
|
||
if (!token) return;
|
||
setLoadingOrders(true);
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/sales/my?size=20&sort=saleDate,desc`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
if (!res.ok) return;
|
||
const data = await res.json();
|
||
setOrders(data.content ?? []);
|
||
} catch { } finally {
|
||
setLoadingOrders(false);
|
||
}
|
||
}, [token]);
|
||
|
||
useEffect(() => {
|
||
if (user?.role === "CUSTOMER" || user?.role === "ADMIN") {
|
||
loadPets();
|
||
loadOrders();
|
||
}
|
||
}, [user, loadPets, loadOrders]);
|
||
|
||
useEffect(() => {
|
||
let objectUrl = null;
|
||
|
||
if (user?.avatarUrl && token) {
|
||
fetch(`${API_BASE}${user.avatarUrl}`, {
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
})
|
||
.then((res) => (res.ok ? res.blob() : null))
|
||
.then((blob) => {
|
||
if (blob) {
|
||
objectUrl = URL.createObjectURL(blob);
|
||
setAvatarObjectUrl(objectUrl);
|
||
} else {
|
||
setAvatarObjectUrl(null);
|
||
}
|
||
})
|
||
.catch(() => setAvatarObjectUrl(null));
|
||
} else {
|
||
setAvatarObjectUrl(null);
|
||
}
|
||
|
||
return () => {
|
||
if (objectUrl) URL.revokeObjectURL(objectUrl);
|
||
};
|
||
}, [user?.avatarUrl, token]);
|
||
|
||
function handleLogout() {
|
||
logout();
|
||
router.push("/");
|
||
}
|
||
|
||
async function handleProfileSubmit(e) {
|
||
e.preventDefault();
|
||
setProfileError(null);
|
||
|
||
if (profileForm.password && profileForm.password !== profileForm.confirmPassword) {
|
||
setProfileError("Passwords do not match.");
|
||
return;
|
||
}
|
||
|
||
setProfileSubmitting(true);
|
||
setProfileSuccess(null);
|
||
|
||
const payload = {
|
||
firstName: profileForm.firstName,
|
||
lastName: profileForm.lastName,
|
||
email: profileForm.email,
|
||
phone: profileForm.phone,
|
||
};
|
||
if (profileForm.password) {
|
||
payload.password = profileForm.password;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/auth/me`, {
|
||
method: "PUT",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
body: JSON.stringify(payload),
|
||
});
|
||
|
||
const data = await res.json().catch(() => null);
|
||
if (!res.ok) {
|
||
throw new Error(data?.message || `Request failed (${res.status})`);
|
||
}
|
||
|
||
await refreshUser();
|
||
setProfileForm((prev) => ({ ...prev, password: "", confirmPassword: "" }));
|
||
setProfileSuccess("Profile updated successfully.");
|
||
}
|
||
|
||
catch (err) {
|
||
setProfileError(err.message);
|
||
}
|
||
|
||
finally {
|
||
setProfileSubmitting(false);
|
||
}
|
||
}
|
||
|
||
async function handleAvatarUpload(file) {
|
||
if (!file) {
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append("avatar", file);
|
||
setAvatarSubmitting(true);
|
||
setProfileError(null);
|
||
setProfileSuccess(null);
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
||
method: "POST",
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
body: formData,
|
||
});
|
||
|
||
const data = await res.json().catch(() => null);
|
||
if (!res.ok) {
|
||
throw new Error(data?.message || "Failed to upload avatar");
|
||
}
|
||
|
||
await refreshUser();
|
||
setProfileSuccess(data?.message || "Avatar updated successfully.");
|
||
}
|
||
|
||
catch (err) {
|
||
setProfileError(err.message);
|
||
}
|
||
|
||
finally {
|
||
setAvatarSubmitting(false);
|
||
}
|
||
}
|
||
|
||
async function handleAvatarDelete() {
|
||
setAvatarSubmitting(true);
|
||
setProfileError(null);
|
||
setProfileSuccess(null);
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/auth/me/avatar`, {
|
||
method: "DELETE",
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
|
||
const data = await res.json().catch(() => null);
|
||
if (!res.ok) {
|
||
throw new Error(data?.message || "Failed to delete avatar");
|
||
}
|
||
|
||
await refreshUser();
|
||
setProfileSuccess(data?.message || "Avatar removed successfully.");
|
||
}
|
||
|
||
catch (err) {
|
||
setProfileError(err.message);
|
||
}
|
||
|
||
finally {
|
||
setAvatarSubmitting(false);
|
||
}
|
||
}
|
||
|
||
function openAddForm() {
|
||
setEditingPet(null);
|
||
setPetName("");
|
||
setSpecies("");
|
||
setBreed("");
|
||
setPetAge("1");
|
||
setPetError(null);
|
||
setShowForm(true);
|
||
}
|
||
|
||
function openEditForm(pet) {
|
||
setEditingPet(pet);
|
||
setPetName(pet.petName);
|
||
setSpecies(pet.species);
|
||
setBreed(pet.breed || "");
|
||
setPetAge(pet.petAge != null ? String(pet.petAge) : "1");
|
||
setPetError(null);
|
||
setShowForm(true);
|
||
}
|
||
|
||
function closeForm() {
|
||
setShowForm(false);
|
||
setEditingPet(null);
|
||
setPetError(null);
|
||
}
|
||
|
||
async function handlePetSubmit(e) {
|
||
e.preventDefault();
|
||
setPetError(null);
|
||
setSubmitting(true);
|
||
|
||
const url = editingPet
|
||
? `${API_BASE}/api/v1/my-pets/${editingPet.customerPetId}`
|
||
: `${API_BASE}/api/v1/my-pets`;
|
||
|
||
try {
|
||
const res = await fetch(url, {
|
||
method: editingPet ? "PUT" : "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
Authorization: `Bearer ${token}`,
|
||
},
|
||
body: JSON.stringify({ petName, species, breed: breed || null, petAge: Number(petAge) }),
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => null);
|
||
throw new Error(data?.message || `Request failed (${res.status})`);
|
||
}
|
||
|
||
closeForm();
|
||
loadPets();
|
||
}
|
||
|
||
catch (err) {
|
||
setPetError(err.message);
|
||
}
|
||
|
||
finally {
|
||
setSubmitting(false);
|
||
}
|
||
}
|
||
|
||
async function handleDeletePet(id) {
|
||
if (!confirm("Remove this pet profile?")) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/my-pets/${id}`, {
|
||
method: "DELETE",
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
});
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => null);
|
||
throw new Error(data?.message || `Failed to remove pet (${res.status})`);
|
||
}
|
||
loadPets();
|
||
}
|
||
|
||
catch (err) {
|
||
alert(err.message);
|
||
}
|
||
}
|
||
|
||
async function handleImageUpload(petId, file) {
|
||
const formData = new FormData();
|
||
formData.append("image", file);
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/my-pets/${petId}/image`, {
|
||
method: "POST",
|
||
headers: { Authorization: `Bearer ${token}` },
|
||
body: formData,
|
||
});
|
||
|
||
if (!res.ok) {
|
||
const data = await res.json().catch(() => null);
|
||
alert(data?.message || "Failed to upload image");
|
||
return;
|
||
}
|
||
|
||
loadPets();
|
||
}
|
||
|
||
catch {
|
||
alert("Failed to upload image");
|
||
}
|
||
}
|
||
|
||
if (loading || !user) {
|
||
return <main className="auth-page"><p className="profile-loading">Loading…</p></main>;
|
||
}
|
||
|
||
const displayName = [user.firstName, user.lastName].filter(Boolean).join(" ") || user.username;
|
||
|
||
const fields = [
|
||
{label: "First Name", value: user.firstName || "N/A"},
|
||
{label: "Last Name", value: user.lastName || "N/A"},
|
||
{label: "Username", value: user.username},
|
||
{label: "Email", value: user.email},
|
||
{label: "Phone", value: user.phone || "N/A"},
|
||
...(user.storeName ? [{ label: "Store", value: user.storeName }] : []),
|
||
...(user.role === "CUSTOMER" ? [{ label: "Loyalty Points", value: user.loyaltyPoints ?? 0 }] : []),
|
||
];
|
||
|
||
return (
|
||
<main className="profile-page-layout">
|
||
<div className="profile-card">
|
||
<div className="profile-avatar-circle">
|
||
{avatarObjectUrl ? (
|
||
<img src={avatarObjectUrl} alt={displayName} className="profile-avatar-image" />
|
||
) : (
|
||
displayName.charAt(0).toUpperCase()
|
||
)}
|
||
</div>
|
||
|
||
<h1 className="profile-name">{displayName}</h1>
|
||
<span className="profile-role-badge">{user.role}</span>
|
||
|
||
<dl className="profile-fields">
|
||
{fields.map(({ label, value }) => (
|
||
<div key={label} className="profile-field-row">
|
||
<dt className="profile-field-label">{label}</dt>
|
||
<dd className="profile-field-value">{value}</dd>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
|
||
<form className="profile-update-form" onSubmit={handleProfileSubmit}>
|
||
<h2 className="profile-update-title">Update Profile</h2>
|
||
{profileError && <div className="appt-error">{profileError}</div>}
|
||
{profileSuccess && <div className="appt-success">{profileSuccess}</div>}
|
||
<label className="appt-label">
|
||
First Name
|
||
<input
|
||
className="appt-input"
|
||
type="text"
|
||
value={profileForm.firstName}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, firstName: e.target.value }))}
|
||
maxLength={50}
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
Last Name
|
||
<input
|
||
className="appt-input"
|
||
type="text"
|
||
value={profileForm.lastName}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, lastName: e.target.value }))}
|
||
maxLength={50}
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
Email
|
||
<input
|
||
className="appt-input"
|
||
type="email"
|
||
value={profileForm.email}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, email: e.target.value }))}
|
||
required
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
Phone
|
||
<input
|
||
className="appt-input"
|
||
type="text"
|
||
value={profileForm.phone}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, phone: e.target.value }))}
|
||
maxLength={20}
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
New Password
|
||
<input
|
||
className="appt-input"
|
||
type="password"
|
||
value={profileForm.password}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, password: e.target.value }))}
|
||
minLength={6}
|
||
autoComplete="new-password"
|
||
placeholder="Leave blank to keep current"
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
Confirm New Password
|
||
<input
|
||
className="appt-input"
|
||
type="password"
|
||
value={profileForm.confirmPassword}
|
||
onChange={(e) => setProfileForm((current) => ({ ...current, confirmPassword: e.target.value }))}
|
||
autoComplete="new-password"
|
||
placeholder="Leave blank to keep current"
|
||
/>
|
||
</label>
|
||
<div className="profile-avatar-actions">
|
||
<label className="profile-avatar-upload-btn">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/gif"
|
||
className="profile-pet-upload-input"
|
||
onChange={(e) => {
|
||
handleAvatarUpload(e.target.files?.[0] || null);
|
||
e.target.value = "";
|
||
}}
|
||
/>
|
||
{avatarSubmitting ? "Working..." : user.avatarUrl ? "Change Avatar" : "Upload Avatar"}
|
||
</label>
|
||
{user.avatarUrl && (
|
||
<button type="button" className="profile-pet-delete-btn" onClick={handleAvatarDelete} disabled={avatarSubmitting}>
|
||
Remove Avatar
|
||
</button>
|
||
)}
|
||
</div>
|
||
<button type="submit" className="appt-submit-btn" disabled={profileSubmitting || avatarSubmitting}>
|
||
{profileSubmitting ? "Saving..." : "Save Profile"}
|
||
</button>
|
||
</form>
|
||
|
||
<button type="button" className="auth-submit-btn profile-logout-btn" onClick={handleLogout}>
|
||
Log Out
|
||
</button>
|
||
</div>
|
||
|
||
{(user.role === "CUSTOMER" || user.role === "ADMIN") && (
|
||
<div className="profile-pets-section">
|
||
<div className="profile-pets-header">
|
||
<h2 className="profile-pets-title">My Pets</h2>
|
||
<button type="button" className="profile-pets-add-btn" onClick={openAddForm}>+ Add Pet</button>
|
||
</div>
|
||
|
||
{showForm && (
|
||
<form className="profile-pet-form" onSubmit={handlePetSubmit}>
|
||
<h3 className="profile-pet-form-title">
|
||
{editingPet ? "Edit Pet" : "Add a New Pet"}
|
||
</h3>
|
||
{petError && <div className="appt-error">{petError}</div>}
|
||
<label className="appt-label">
|
||
Name
|
||
<input
|
||
className="appt-input"
|
||
type="text"
|
||
value={petName}
|
||
onChange={(e) => setPetName(e.target.value)}
|
||
required
|
||
maxLength={50}
|
||
/>
|
||
</label>
|
||
<label className="appt-label">
|
||
Species
|
||
<select
|
||
className="appt-select"
|
||
value={species}
|
||
onChange={(e) => { setSpecies(e.target.value); setBreed(""); }}
|
||
required
|
||
>
|
||
<option value="">Select a species...</option>
|
||
{Object.keys(SPECIES_BREEDS).map((s) => (
|
||
<option key={s} value={s}>{s}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="appt-label">
|
||
Breed
|
||
<select
|
||
className="appt-select"
|
||
value={breed}
|
||
onChange={(e) => setBreed(e.target.value)}
|
||
required
|
||
disabled={!species}
|
||
>
|
||
<option value="">{species ? "Select a breed..." : "Select a species first"}</option>
|
||
{(SPECIES_BREEDS[species] || []).map((b) => (
|
||
<option key={b} value={b}>{b}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<label className="appt-label">
|
||
Age (years)
|
||
<select
|
||
className="appt-select"
|
||
value={petAge}
|
||
onChange={(e) => setPetAge(e.target.value)}
|
||
required
|
||
>
|
||
{Array.from({ length: 20 }, (_, i) => i + 1).map((n) => (
|
||
<option key={n} value={n}>{n}</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
<div className="profile-pet-form-actions">
|
||
<button type="submit" className="appt-submit-btn" disabled={submitting}>
|
||
{submitting ? "Saving..." : editingPet ? "Save Changes" : "Add Pet"}
|
||
</button>
|
||
<button type="button" className="profile-pet-cancel-btn" onClick={closeForm}>
|
||
Cancel
|
||
</button>
|
||
</div>
|
||
</form>
|
||
)}
|
||
|
||
{loadingPets ? (
|
||
<p className="appt-loading">Loading pets...</p>
|
||
) : pets.length === 0 && !showForm ? (
|
||
<p className="profile-pets-empty">No pet profiles yet. Add your first pet above!</p>
|
||
) : (
|
||
<div className="profile-pets-grid">
|
||
{pets.map((pet) => (
|
||
<div key={pet.customerPetId} className="profile-pet-card">
|
||
<div className="profile-pet-card-img-area">
|
||
{pet.imageUrl ? (
|
||
<img
|
||
src={pet.imageUrl}
|
||
alt={pet.petName}
|
||
className="profile-pet-card-img"
|
||
/>
|
||
) : (
|
||
<div className="profile-pet-card-placeholder">🐾</div>
|
||
)}
|
||
<label className="profile-pet-upload-label">
|
||
<input
|
||
type="file"
|
||
accept="image/jpeg,image/png,image/gif"
|
||
className="profile-pet-upload-input"
|
||
onChange={(e) => {
|
||
if (e.target.files[0]) handleImageUpload(pet.customerPetId, e.target.files[0]);
|
||
e.target.value = "";
|
||
}}
|
||
/>
|
||
📷
|
||
</label>
|
||
</div>
|
||
<div className="profile-pet-card-info">
|
||
<span className="profile-pet-card-name">{pet.petName}</span>
|
||
<span className="profile-pet-card-detail">{pet.species}</span>
|
||
{pet.breed && <span className="profile-pet-card-detail">{pet.breed}</span>}
|
||
{pet.petAge != null && <span className="profile-pet-card-detail">Age: {pet.petAge === 0 ? "< 1 yr" : `${pet.petAge} yr${pet.petAge !== 1 ? "s" : ""}`}</span>}
|
||
</div>
|
||
<div className="profile-pet-card-actions">
|
||
<button type="button" className="profile-pet-edit-btn" onClick={() => openEditForm(pet)}>Edit</button>
|
||
<button type="button" className="profile-pet-delete-btn" onClick={() => handleDeletePet(pet.customerPetId)}>Remove</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{(user.role === "CUSTOMER" || user.role === "ADMIN") && (
|
||
<div className="profile-pets-section">
|
||
<div className="profile-pets-header">
|
||
<h2 className="profile-pets-title">Order History</h2>
|
||
</div>
|
||
{loadingOrders ? (
|
||
<p className="appt-loading">Loading orders...</p>
|
||
) : orders.length === 0 ? (
|
||
<p className="profile-pets-empty">No orders yet.</p>
|
||
) : (
|
||
<div className="profile-orders-list">
|
||
{orders.map((order) => (
|
||
<div key={order.saleId} className="profile-order-card">
|
||
<div className="profile-order-header">
|
||
<span className="profile-order-date">
|
||
{new Date(order.saleDate).toLocaleDateString([], { year: "numeric", month: "short", day: "numeric" })}
|
||
</span>
|
||
<span className="profile-order-total">${Number(order.totalAmount).toFixed(2)}</span>
|
||
</div>
|
||
<div className="profile-order-meta">
|
||
<span>{order.storeName}</span>
|
||
{order.paymentMethod && <span>{order.paymentMethod}</span>}
|
||
</div>
|
||
{order.items?.length > 0 && (
|
||
<ul className="profile-order-items">
|
||
{order.items.map((item) => (
|
||
<li key={item.saleItemId}>
|
||
<span>{item.productName} × {item.quantity}</span>
|
||
<span className="profile-order-item-price">${(Number(item.unitPrice) * item.quantity).toFixed(2)}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</main>
|
||
);
|
||
}
|