reviews and review history
This commit is contained in:
jackiettran
@@ -36,7 +36,8 @@ const MyListings: React.FC = () => {
|
||||
const [error, setError] = useState("");
|
||||
// Owner rental management state
|
||||
const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
|
||||
const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
|
||||
const [selectedRentalForReview, setSelectedRentalForReview] =
|
||||
useState<Rental | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
fetchMyListings();
|
||||
@@ -127,16 +128,19 @@ const MyListings: React.FC = () => {
|
||||
|
||||
const handleCompleteClick = async (rental: Rental) => {
|
||||
try {
|
||||
console.log('Marking rental as completed:', rental.id);
|
||||
console.log("Marking rental as completed:", rental.id);
|
||||
await rentalAPI.markAsCompleted(rental.id);
|
||||
|
||||
|
||||
setSelectedRentalForReview(rental);
|
||||
setShowReviewRenterModal(true);
|
||||
|
||||
|
||||
fetchOwnerRentals();
|
||||
} catch (err: any) {
|
||||
console.error('Error marking rental as completed:', err);
|
||||
alert("Failed to mark rental as completed: " + (err.response?.data?.error || err.message));
|
||||
console.error("Error marking rental as completed:", err);
|
||||
alert(
|
||||
"Failed to mark rental as completed: " +
|
||||
(err.response?.data?.error || err.message)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -145,12 +149,15 @@ const MyListings: React.FC = () => {
|
||||
};
|
||||
|
||||
// Filter owner rentals
|
||||
const allOwnerRentals = ownerRentals.filter((r) =>
|
||||
["pending", "confirmed", "active"].includes(r.status)
|
||||
).sort((a, b) => {
|
||||
const statusOrder = { "pending": 0, "confirmed": 1, "active": 2 };
|
||||
return statusOrder[a.status as keyof typeof statusOrder] - statusOrder[b.status as keyof typeof statusOrder];
|
||||
});
|
||||
const allOwnerRentals = ownerRentals
|
||||
.filter((r) => ["pending", "confirmed", "active"].includes(r.status))
|
||||
.sort((a, b) => {
|
||||
const statusOrder = { pending: 0, confirmed: 1, active: 2 };
|
||||
return (
|
||||
statusOrder[a.status as keyof typeof statusOrder] -
|
||||
statusOrder[b.status as keyof typeof statusOrder]
|
||||
);
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
@@ -167,7 +174,7 @@ const MyListings: React.FC = () => {
|
||||
return (
|
||||
<div className="container mt-4">
|
||||
<div className="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>My Listings</h1>
|
||||
<h1>Owning</h1>
|
||||
<Link to="/create-item" className="btn btn-primary">
|
||||
Add New Item
|
||||
</Link>
|
||||
@@ -184,7 +191,7 @@ const MyListings: React.FC = () => {
|
||||
<div className="mb-5">
|
||||
<h4 className="mb-3">
|
||||
<i className="bi bi-calendar-check me-2"></i>
|
||||
Rental Requests ({allOwnerRentals.length})
|
||||
Rental Requests
|
||||
</h4>
|
||||
<div className="row">
|
||||
{allOwnerRentals.map((rental) => (
|
||||
@@ -205,24 +212,35 @@ const MyListings: React.FC = () => {
|
||||
|
||||
{rental.renter && (
|
||||
<p className="mb-1 text-dark small">
|
||||
<strong>Renter:</strong> {rental.renter.firstName} {rental.renter.lastName}
|
||||
<strong>Renter:</strong> {rental.renter.firstName}{" "}
|
||||
{rental.renter.lastName}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="mb-2">
|
||||
<span className={`badge ${
|
||||
rental.status === "active" ? "bg-success" :
|
||||
rental.status === "pending" ? "bg-warning" :
|
||||
rental.status === "confirmed" ? "bg-info" : "bg-danger"
|
||||
}`}>
|
||||
{rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
|
||||
<span
|
||||
className={`badge ${
|
||||
rental.status === "active"
|
||||
? "bg-success"
|
||||
: rental.status === "pending"
|
||||
? "bg-warning"
|
||||
: rental.status === "confirmed"
|
||||
? "bg-info"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{rental.status.charAt(0).toUpperCase() +
|
||||
rental.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mb-1 text-dark small">
|
||||
<strong>Period:</strong>
|
||||
<br />
|
||||
{formatDateTime(rental.startDate, rental.startTime)} - {formatDateTime(rental.endDate, rental.endTime)}
|
||||
{formatDateTime(
|
||||
rental.startDate,
|
||||
rental.startTime
|
||||
)} - {formatDateTime(rental.endDate, rental.endTime)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark small">
|
||||
@@ -231,7 +249,10 @@ const MyListings: React.FC = () => {
|
||||
|
||||
{rental.itemPrivateMessage && rental.itemReviewVisible && (
|
||||
<div className="alert alert-info mt-2 mb-2 p-2 small">
|
||||
<strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Renter:</strong>
|
||||
<strong>
|
||||
<i className="bi bi-envelope-fill me-1"></i>Private
|
||||
Note from Renter:
|
||||
</strong>
|
||||
<br />
|
||||
{rental.itemPrivateMessage}
|
||||
</div>
|
||||
@@ -254,7 +275,8 @@ const MyListings: React.FC = () => {
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{(rental.status === "active" || rental.status === "confirmed") && (
|
||||
{(rental.status === "active" ||
|
||||
rental.status === "confirmed") && (
|
||||
<button
|
||||
className="btn btn-sm btn-success"
|
||||
onClick={() => handleCompleteClick(rental)}
|
||||
@@ -273,9 +295,9 @@ const MyListings: React.FC = () => {
|
||||
|
||||
<h4 className="mb-3">
|
||||
<i className="bi bi-list-ul me-2"></i>
|
||||
My Items ({listings.length})
|
||||
Listings
|
||||
</h4>
|
||||
|
||||
|
||||
{listings.length === 0 ? (
|
||||
<div className="text-center py-5">
|
||||
<p className="text-muted">You haven't listed any items yet.</p>
|
||||
@@ -325,16 +347,24 @@ const MyListings: React.FC = () => {
|
||||
<div className="mb-3">
|
||||
{(() => {
|
||||
const hasAnyPositivePrice =
|
||||
(item.pricePerHour !== undefined && Number(item.pricePerHour) > 0) ||
|
||||
(item.pricePerDay !== undefined && Number(item.pricePerDay) > 0) ||
|
||||
(item.pricePerWeek !== undefined && Number(item.pricePerWeek) > 0) ||
|
||||
(item.pricePerMonth !== undefined && Number(item.pricePerMonth) > 0);
|
||||
(item.pricePerHour !== undefined &&
|
||||
Number(item.pricePerHour) > 0) ||
|
||||
(item.pricePerDay !== undefined &&
|
||||
Number(item.pricePerDay) > 0) ||
|
||||
(item.pricePerWeek !== undefined &&
|
||||
Number(item.pricePerWeek) > 0) ||
|
||||
(item.pricePerMonth !== undefined &&
|
||||
Number(item.pricePerMonth) > 0);
|
||||
|
||||
const hasAnyZeroPrice =
|
||||
(item.pricePerHour !== undefined && Number(item.pricePerHour) === 0) ||
|
||||
(item.pricePerDay !== undefined && Number(item.pricePerDay) === 0) ||
|
||||
(item.pricePerWeek !== undefined && Number(item.pricePerWeek) === 0) ||
|
||||
(item.pricePerMonth !== undefined && Number(item.pricePerMonth) === 0);
|
||||
(item.pricePerHour !== undefined &&
|
||||
Number(item.pricePerHour) === 0) ||
|
||||
(item.pricePerDay !== undefined &&
|
||||
Number(item.pricePerDay) === 0) ||
|
||||
(item.pricePerWeek !== undefined &&
|
||||
Number(item.pricePerWeek) === 0) ||
|
||||
(item.pricePerMonth !== undefined &&
|
||||
Number(item.pricePerMonth) === 0);
|
||||
|
||||
if (!hasAnyPositivePrice && hasAnyZeroPrice) {
|
||||
return (
|
||||
@@ -351,21 +381,24 @@ const MyListings: React.FC = () => {
|
||||
${item.pricePerDay}/day
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerHour && Number(item.pricePerHour) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerHour}/hour
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerWeek && Number(item.pricePerWeek) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerWeek}/week
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerMonth && Number(item.pricePerMonth) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerMonth}/month
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerHour &&
|
||||
Number(item.pricePerHour) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerHour}/hour
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerWeek &&
|
||||
Number(item.pricePerWeek) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerWeek}/week
|
||||
</div>
|
||||
)}
|
||||
{item.pricePerMonth &&
|
||||
Number(item.pricePerMonth) > 0 && (
|
||||
<div className="text-muted small">
|
||||
${item.pricePerMonth}/month
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
@@ -400,7 +433,6 @@ const MyListings: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Review Modal */}
|
||||
{selectedRentalForReview && (
|
||||
<ReviewRenterModal
|
||||
|
||||
@@ -6,6 +6,8 @@ import { getImageUrl } from "../utils/imageUrl";
|
||||
import AvailabilitySettings from "../components/AvailabilitySettings";
|
||||
import ReviewItemModal from "../components/ReviewModal";
|
||||
import ReviewRenterModal from "../components/ReviewRenterModal";
|
||||
import StarRating from "../components/StarRating";
|
||||
import ReviewDetailsModal from "../components/ReviewDetailsModal";
|
||||
|
||||
const Profile: React.FC = () => {
|
||||
const { user, updateUser, logout } = useAuth();
|
||||
@@ -61,7 +63,7 @@ const Profile: React.FC = () => {
|
||||
zipCode: "",
|
||||
country: "US",
|
||||
});
|
||||
|
||||
|
||||
// Rental history state
|
||||
const [pastRenterRentals, setPastRenterRentals] = useState<Rental[]>([]);
|
||||
const [pastOwnerRentals, setPastOwnerRentals] = useState<Rental[]>([]);
|
||||
@@ -69,7 +71,14 @@ const Profile: React.FC = () => {
|
||||
const [showReviewModal, setShowReviewModal] = useState(false);
|
||||
const [showReviewRenterModal, setShowReviewRenterModal] = useState(false);
|
||||
const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
|
||||
const [selectedRentalForReview, setSelectedRentalForReview] = useState<Rental | null>(null);
|
||||
const [selectedRentalForReview, setSelectedRentalForReview] =
|
||||
useState<Rental | null>(null);
|
||||
const [showReviewDetailsModal, setShowReviewDetailsModal] = useState(false);
|
||||
const [selectedRentalForDetails, setSelectedRentalForDetails] =
|
||||
useState<Rental | null>(null);
|
||||
const [reviewDetailsUserType, setReviewDetailsUserType] = useState<
|
||||
"renter" | "owner"
|
||||
>("renter");
|
||||
|
||||
useEffect(() => {
|
||||
fetchProfile();
|
||||
@@ -212,7 +221,10 @@ const Profile: React.FC = () => {
|
||||
setShowReviewRenterModal(true);
|
||||
fetchRentalHistory(); // Refresh rental history
|
||||
} catch (err: any) {
|
||||
alert("Failed to mark rental as completed: " + (err.response?.data?.error || err.message));
|
||||
alert(
|
||||
"Failed to mark rental as completed: " +
|
||||
(err.response?.data?.error || err.message)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -220,6 +232,20 @@ const Profile: React.FC = () => {
|
||||
fetchRentalHistory(); // Refresh to show updated review status
|
||||
};
|
||||
|
||||
const handleViewReviewDetails = (
|
||||
rental: Rental,
|
||||
userType: "renter" | "owner"
|
||||
) => {
|
||||
setSelectedRentalForDetails(rental);
|
||||
setReviewDetailsUserType(userType);
|
||||
setShowReviewDetailsModal(true);
|
||||
};
|
||||
|
||||
const handleCloseReviewDetails = () => {
|
||||
setShowReviewDetailsModal(false);
|
||||
setSelectedRentalForDetails(null);
|
||||
};
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
|
||||
) => {
|
||||
@@ -787,37 +813,56 @@ const Profile: React.FC = () => {
|
||||
</h5>
|
||||
<div className="row">
|
||||
{pastRenterRentals.map((rental) => (
|
||||
<div key={rental.id} className="col-md-6 col-lg-4 mb-4">
|
||||
<div
|
||||
key={rental.id}
|
||||
className="col-md-6 col-lg-4 mb-4"
|
||||
>
|
||||
<div className="card h-100">
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "150px", objectFit: "cover" }}
|
||||
style={{
|
||||
height: "150px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h6 className="card-title">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
{rental.item
|
||||
? rental.item.name
|
||||
: "Item Unavailable"}
|
||||
</h6>
|
||||
|
||||
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
rental.status === "completed" ? "bg-success" : "bg-danger"
|
||||
rental.status === "completed"
|
||||
? "bg-success"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
|
||||
{rental.status.charAt(0).toUpperCase() +
|
||||
rental.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mb-1 small">
|
||||
<strong>Period:</strong>
|
||||
<br />
|
||||
<strong>Start:</strong> {formatDateTime(rental.startDate, rental.startTime)}
|
||||
<strong>Start:</strong>{" "}
|
||||
{formatDateTime(
|
||||
rental.startDate,
|
||||
rental.startTime
|
||||
)}
|
||||
<br />
|
||||
<strong>End:</strong> {formatDateTime(rental.endDate, rental.endTime)}
|
||||
<strong>End:</strong>{" "}
|
||||
{formatDateTime(
|
||||
rental.endDate,
|
||||
rental.endTime
|
||||
)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 small">
|
||||
@@ -826,51 +871,64 @@ const Profile: React.FC = () => {
|
||||
|
||||
{rental.owner && (
|
||||
<p className="mb-1 small">
|
||||
<strong>Owner:</strong> {rental.owner.firstName} {rental.owner.lastName}
|
||||
<strong>Owner:</strong>{" "}
|
||||
{rental.owner.firstName}{" "}
|
||||
{rental.owner.lastName}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{rental.renterPrivateMessage && rental.renterReviewVisible && (
|
||||
<div className="alert alert-info mt-2 mb-2 p-2 small">
|
||||
<strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Owner:</strong>
|
||||
<br />
|
||||
{rental.renterPrivateMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rental.status === "cancelled" && rental.rejectionReason && (
|
||||
<div className="alert alert-warning mt-2 mb-1 p-2 small">
|
||||
<strong>Rejection reason:</strong> {rental.rejectionReason}
|
||||
</div>
|
||||
)}
|
||||
{rental.status === "cancelled" &&
|
||||
rental.rejectionReason && (
|
||||
<div className="alert alert-warning mt-2 mb-1 p-2 small">
|
||||
<strong>Rejection reason:</strong>{" "}
|
||||
{rental.rejectionReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "completed" && !rental.itemRating && !rental.itemReviewSubmittedAt && (
|
||||
{rental.status === "completed" &&
|
||||
!rental.itemRating &&
|
||||
!rental.itemReviewSubmittedAt && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() =>
|
||||
handleReviewClick(rental)
|
||||
}
|
||||
>
|
||||
Review
|
||||
</button>
|
||||
)}
|
||||
{rental.itemReviewSubmittedAt &&
|
||||
!rental.itemReviewVisible && (
|
||||
<div className="text-info small">
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
Review Submitted
|
||||
</div>
|
||||
)}
|
||||
{((rental.renterPrivateMessage &&
|
||||
rental.renterReviewVisible) ||
|
||||
(rental.itemReviewVisible &&
|
||||
rental.itemRating)) && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleReviewClick(rental)}
|
||||
className="btn btn-sm btn-outline-primary mt-2"
|
||||
onClick={() =>
|
||||
handleViewReviewDetails(
|
||||
rental,
|
||||
"renter"
|
||||
)
|
||||
}
|
||||
>
|
||||
Review
|
||||
View Review Details
|
||||
</button>
|
||||
)}
|
||||
{rental.itemReviewSubmittedAt && !rental.itemReviewVisible && (
|
||||
<div className="text-info small">
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
Review Submitted
|
||||
</div>
|
||||
)}
|
||||
{rental.itemReviewVisible && rental.itemRating && (
|
||||
<div className="text-success small">
|
||||
<i className="bi bi-check-circle-fill me-1"></i>
|
||||
Review Published ({rental.itemRating}/5)
|
||||
</div>
|
||||
)}
|
||||
{rental.status === "completed" && rental.rating && !rental.itemRating && (
|
||||
<div className="text-success small">
|
||||
<i className="bi bi-check-circle-fill me-1"></i>
|
||||
Reviewed ({rental.rating}/5)
|
||||
</div>
|
||||
)}
|
||||
{rental.status === "completed" &&
|
||||
rental.rating &&
|
||||
!rental.itemRating && (
|
||||
<div className="text-success small">
|
||||
<i className="bi bi-check-circle-fill me-1"></i>
|
||||
Reviewed ({rental.rating}/5)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -889,79 +947,102 @@ const Profile: React.FC = () => {
|
||||
</h5>
|
||||
<div className="row">
|
||||
{pastOwnerRentals.map((rental) => (
|
||||
<div key={rental.id} className="col-md-6 col-lg-4 mb-4">
|
||||
<div
|
||||
key={rental.id}
|
||||
className="col-md-6 col-lg-4 mb-4"
|
||||
>
|
||||
<div className="card h-100">
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "150px", objectFit: "cover" }}
|
||||
style={{
|
||||
height: "150px",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h6 className="card-title">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
{rental.item
|
||||
? rental.item.name
|
||||
: "Item Unavailable"}
|
||||
</h6>
|
||||
|
||||
|
||||
{rental.renter && (
|
||||
<p className="mb-1 small">
|
||||
<strong>Renter:</strong> {rental.renter.firstName} {rental.renter.lastName}
|
||||
<strong>Renter:</strong>{" "}
|
||||
{rental.renter.firstName}{" "}
|
||||
{rental.renter.lastName}
|
||||
</p>
|
||||
)}
|
||||
|
||||
|
||||
<div className="mb-2">
|
||||
<span
|
||||
className={`badge ${
|
||||
rental.status === "completed" ? "bg-success" : "bg-danger"
|
||||
rental.status === "completed"
|
||||
? "bg-success"
|
||||
: "bg-danger"
|
||||
}`}
|
||||
>
|
||||
{rental.status.charAt(0).toUpperCase() + rental.status.slice(1)}
|
||||
{rental.status.charAt(0).toUpperCase() +
|
||||
rental.status.slice(1)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="mb-1 small">
|
||||
<strong>Period:</strong>
|
||||
<br />
|
||||
{formatDateTime(rental.startDate, rental.startTime)} - {formatDateTime(rental.endDate, rental.endTime)}
|
||||
{formatDateTime(
|
||||
rental.startDate,
|
||||
rental.startTime
|
||||
)}{" "}
|
||||
-{" "}
|
||||
{formatDateTime(
|
||||
rental.endDate,
|
||||
rental.endTime
|
||||
)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 small">
|
||||
<strong>Total:</strong> ${rental.totalAmount}
|
||||
</p>
|
||||
|
||||
{rental.itemPrivateMessage && rental.itemReviewVisible && (
|
||||
<div className="alert alert-info mt-2 mb-2 p-2 small">
|
||||
<strong><i className="bi bi-envelope-fill me-1"></i>Private Note from Renter:</strong>
|
||||
<br />
|
||||
{rental.itemPrivateMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "completed" && !rental.renterRating && !rental.renterReviewSubmittedAt && (
|
||||
{rental.status === "completed" &&
|
||||
!rental.renterRating &&
|
||||
!rental.renterReviewSubmittedAt && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => {
|
||||
setSelectedRentalForReview(rental);
|
||||
setShowReviewRenterModal(true);
|
||||
}}
|
||||
>
|
||||
Review Renter
|
||||
</button>
|
||||
)}
|
||||
{rental.renterReviewSubmittedAt &&
|
||||
!rental.renterReviewVisible && (
|
||||
<div className="text-info small">
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
Review Submitted
|
||||
</div>
|
||||
)}
|
||||
{((rental.itemPrivateMessage &&
|
||||
rental.itemReviewVisible) ||
|
||||
(rental.renterReviewVisible &&
|
||||
rental.renterRating)) && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => {
|
||||
setSelectedRentalForReview(rental);
|
||||
setShowReviewRenterModal(true);
|
||||
}}
|
||||
className="btn btn-sm btn-outline-primary mt-2"
|
||||
onClick={() =>
|
||||
handleViewReviewDetails(rental, "owner")
|
||||
}
|
||||
>
|
||||
Review Renter
|
||||
View Review Details
|
||||
</button>
|
||||
)}
|
||||
{rental.renterReviewSubmittedAt && !rental.renterReviewVisible && (
|
||||
<div className="text-info small">
|
||||
<i className="bi bi-clock me-1"></i>
|
||||
Review Submitted
|
||||
</div>
|
||||
)}
|
||||
{rental.renterReviewVisible && rental.renterRating && (
|
||||
<div className="text-success small">
|
||||
<i className="bi bi-check-circle-fill me-1"></i>
|
||||
Review Published ({rental.renterRating}/5)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -972,13 +1053,20 @@ const Profile: React.FC = () => {
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{pastRenterRentals.length === 0 && pastOwnerRentals.length === 0 && (
|
||||
<div className="text-center py-5">
|
||||
<i className="bi bi-clock-history text-muted mb-3" style={{ fontSize: "3rem" }}></i>
|
||||
<h5 className="text-muted">No Rental History</h5>
|
||||
<p className="text-muted">Your completed rentals and rental requests will appear here.</p>
|
||||
</div>
|
||||
)}
|
||||
{pastRenterRentals.length === 0 &&
|
||||
pastOwnerRentals.length === 0 && (
|
||||
<div className="text-center py-5">
|
||||
<i
|
||||
className="bi bi-clock-history text-muted mb-3"
|
||||
style={{ fontSize: "3rem" }}
|
||||
></i>
|
||||
<h5 className="text-muted">No Rental History</h5>
|
||||
<p className="text-muted">
|
||||
Your completed rentals and rental requests will appear
|
||||
here.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -1354,6 +1442,16 @@ const Profile: React.FC = () => {
|
||||
onSuccess={handleReviewRenterSuccess}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Review Details Modal */}
|
||||
{selectedRentalForDetails && (
|
||||
<ReviewDetailsModal
|
||||
show={showReviewDetailsModal}
|
||||
onClose={handleCloseReviewDetails}
|
||||
rental={selectedRentalForDetails}
|
||||
userType={reviewDetailsUserType}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user