512 lines
19 KiB
TypeScript
512 lines
19 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { Link, useNavigate } from "react-router-dom";
|
|
import { useAuth } from "../contexts/AuthContext";
|
|
import { rentalAPI, conditionCheckAPI } from "../services/api";
|
|
import { getImageUrl } from "../services/uploadService";
|
|
import { Rental, ConditionCheck } from "../types";
|
|
import ReviewItemModal from "../components/ReviewModal";
|
|
import RentalCancellationModal from "../components/RentalCancellationModal";
|
|
import ConditionCheckModal from "../components/ConditionCheckModal";
|
|
import ConditionCheckViewerModal from "../components/ConditionCheckViewerModal";
|
|
|
|
const Renting: React.FC = () => {
|
|
// Helper function to format time
|
|
const formatTime = (timeString?: string) => {
|
|
if (!timeString || timeString.trim() === "") return "";
|
|
try {
|
|
const [hour, minute] = timeString.split(":");
|
|
const hourNum = parseInt(hour);
|
|
const hour12 = hourNum === 0 ? 12 : hourNum > 12 ? hourNum - 12 : hourNum;
|
|
const period = hourNum < 12 ? "AM" : "PM";
|
|
return `${hour12}:${minute} ${period}`;
|
|
} catch (error) {
|
|
return "";
|
|
}
|
|
};
|
|
|
|
// Helper function to format date and time together
|
|
const formatDateTime = (dateTimeString: string) => {
|
|
const date = new Date(dateTimeString);
|
|
return date
|
|
.toLocaleDateString("en-US", {
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
})
|
|
.replace(",", "");
|
|
};
|
|
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [rentals, setRentals] = useState<Rental[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showReviewModal, setShowReviewModal] = useState(false);
|
|
const [selectedRental, setSelectedRental] = useState<Rental | null>(null);
|
|
const [showCancelModal, setShowCancelModal] = useState(false);
|
|
const [rentalToCancel, setRentalToCancel] = useState<Rental | null>(null);
|
|
const [showConditionCheckModal, setShowConditionCheckModal] = useState(false);
|
|
const [conditionCheckData, setConditionCheckData] = useState<{
|
|
rental: Rental;
|
|
checkType: string;
|
|
} | null>(null);
|
|
const [availableChecks, setAvailableChecks] = useState<any[]>([]);
|
|
const [conditionChecks, setConditionChecks] = useState<ConditionCheck[]>([]);
|
|
const [showConditionCheckViewer, setShowConditionCheckViewer] =
|
|
useState(false);
|
|
const [selectedConditionCheck, setSelectedConditionCheck] =
|
|
useState<ConditionCheck | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchRentals();
|
|
fetchAvailableChecks();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (rentals.length > 0) {
|
|
fetchConditionChecks();
|
|
}
|
|
}, [rentals]);
|
|
|
|
const fetchRentals = async () => {
|
|
try {
|
|
const response = await rentalAPI.getRentals();
|
|
setRentals(response.data || []);
|
|
} catch (err: any) {
|
|
setError(err.response?.data?.message || "Failed to fetch rentals");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const fetchAvailableChecks = async () => {
|
|
try {
|
|
const response = await conditionCheckAPI.getAvailableChecks();
|
|
const checks = Array.isArray(response.data.availableChecks)
|
|
? response.data.availableChecks
|
|
: [];
|
|
setAvailableChecks(checks);
|
|
} catch (err: any) {
|
|
console.error("Failed to fetch available checks:", err);
|
|
setAvailableChecks([]);
|
|
}
|
|
};
|
|
|
|
const fetchConditionChecks = async () => {
|
|
try {
|
|
// Fetch condition checks for all rentals
|
|
const allChecks: any[] = [];
|
|
for (const rental of rentals) {
|
|
try {
|
|
const response = await conditionCheckAPI.getConditionChecks(
|
|
rental.id
|
|
);
|
|
const checks = Array.isArray(response.data.conditionChecks)
|
|
? response.data.conditionChecks
|
|
: [];
|
|
allChecks.push(...checks);
|
|
} catch (err) {
|
|
// Continue even if one rental fails
|
|
console.error(`Failed to fetch checks for rental ${rental.id}:`, err);
|
|
}
|
|
}
|
|
setConditionChecks(allChecks);
|
|
} catch (err: any) {
|
|
console.error("Failed to fetch condition checks:", err);
|
|
setConditionChecks([]);
|
|
}
|
|
};
|
|
|
|
const handleCancelClick = (rental: Rental) => {
|
|
setRentalToCancel(rental);
|
|
setShowCancelModal(true);
|
|
};
|
|
|
|
const handleCancellationComplete = (updatedRental: Rental) => {
|
|
// Update the rental in the list
|
|
setRentals((prev) =>
|
|
prev.map((rental) =>
|
|
rental.id === updatedRental.id ? updatedRental : rental
|
|
)
|
|
);
|
|
setShowCancelModal(false);
|
|
setRentalToCancel(null);
|
|
};
|
|
|
|
const handleReviewClick = (rental: Rental) => {
|
|
setSelectedRental(rental);
|
|
setShowReviewModal(true);
|
|
};
|
|
|
|
const handleReviewSuccess = () => {
|
|
fetchRentals();
|
|
alert("Thank you for your review!");
|
|
};
|
|
|
|
const handleConditionCheck = (rental: Rental, checkType: string) => {
|
|
setConditionCheckData({ rental, checkType });
|
|
setShowConditionCheckModal(true);
|
|
};
|
|
|
|
const handleConditionCheckSuccess = () => {
|
|
fetchAvailableChecks();
|
|
fetchConditionChecks();
|
|
};
|
|
|
|
const handleViewConditionCheck = (check: ConditionCheck) => {
|
|
setSelectedConditionCheck(check);
|
|
setShowConditionCheckViewer(true);
|
|
};
|
|
|
|
const getAvailableChecksForRental = (rentalId: string) => {
|
|
if (!Array.isArray(availableChecks)) return [];
|
|
return availableChecks.filter(
|
|
(check) =>
|
|
check.rentalId === rentalId &&
|
|
(check.checkType === "rental_start_renter" ||
|
|
check.checkType === "rental_end_renter")
|
|
);
|
|
};
|
|
|
|
const getCompletedChecksForRental = (rentalId: string) => {
|
|
if (!Array.isArray(conditionChecks)) return [];
|
|
return conditionChecks.filter(
|
|
(check) =>
|
|
check.rentalId === rentalId &&
|
|
(check.checkType === "rental_start_renter" ||
|
|
check.checkType === "rental_end_renter")
|
|
);
|
|
};
|
|
|
|
// Filter rentals - show only active rentals (declined go to history)
|
|
// Use displayStatus for filtering as it includes computed "active" status
|
|
const renterActiveRentals = rentals.filter((r) =>
|
|
["pending", "confirmed", "active"].includes(r.displayStatus || r.status)
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="container mt-5">
|
|
<div className="text-center">
|
|
<div className="spinner-border" role="status">
|
|
<span className="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="container mt-5">
|
|
<div className="alert alert-danger" role="alert">
|
|
{error}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="container mt-4">
|
|
<h1>Rentals</h1>
|
|
|
|
{renterActiveRentals.length === 0 ? (
|
|
<div className="text-center py-5">
|
|
<h5 className="text-muted">No Active Rental Requests</h5>
|
|
<p className="text-muted">
|
|
You don't have any rental requests at the moment.
|
|
</p>
|
|
<Link to="/items" className="btn btn-primary">
|
|
Browse Items to Rent
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="row">
|
|
{renterActiveRentals.map((rental) => (
|
|
<div key={rental.id} className="col-md-6 col-lg-4 mb-4">
|
|
<Link
|
|
to={rental.item ? `/items/${rental.item.id}` : "#"}
|
|
className="text-decoration-none"
|
|
onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
const target = e.target as HTMLElement;
|
|
if (!rental.item || target.closest("button")) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
>
|
|
<div
|
|
className="card h-100"
|
|
style={{ cursor: rental.item ? "pointer" : "default" }}
|
|
>
|
|
{rental.item?.imageFilenames &&
|
|
rental.item.imageFilenames[0] && (
|
|
<img
|
|
src={getImageUrl(rental.item.imageFilenames[0], 'thumbnail')}
|
|
className="card-img-top"
|
|
alt={rental.item.name}
|
|
onError={(e) => {
|
|
const target = e.currentTarget;
|
|
if (!target.dataset.fallback && rental.item) {
|
|
target.dataset.fallback = 'true';
|
|
target.src = getImageUrl(rental.item.imageFilenames[0], 'original');
|
|
}
|
|
}}
|
|
style={{
|
|
height: "200px",
|
|
objectFit: "contain",
|
|
backgroundColor: "#f8f9fa",
|
|
}}
|
|
/>
|
|
)}
|
|
<div className="card-body">
|
|
<h5 className="card-title text-dark">
|
|
{rental.item ? rental.item.name : "Item Unavailable"}
|
|
</h5>
|
|
|
|
<div className="mb-2">
|
|
<span
|
|
className={`badge ${
|
|
(rental.displayStatus || rental.status) === "active"
|
|
? "bg-success"
|
|
: (rental.displayStatus || rental.status) === "pending"
|
|
? "bg-warning"
|
|
: (rental.displayStatus || rental.status) === "confirmed"
|
|
? "bg-info"
|
|
: (rental.displayStatus || rental.status) === "declined"
|
|
? "bg-secondary"
|
|
: "bg-danger"
|
|
}`}
|
|
>
|
|
{(rental.displayStatus || rental.status) === "pending"
|
|
? "Awaiting Owner Approval"
|
|
: (rental.displayStatus || rental.status) === "confirmed"
|
|
? "Confirmed & Paid"
|
|
: (rental.displayStatus || rental.status) === "declined"
|
|
? "Declined by Owner"
|
|
: (rental.displayStatus || rental.status).charAt(0).toUpperCase() +
|
|
(rental.displayStatus || rental.status).slice(1)}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="mb-1 text-dark">
|
|
<strong>Rental Period:</strong>
|
|
<br />
|
|
<strong>Start:</strong>{" "}
|
|
{formatDateTime(rental.startDateTime)}
|
|
<br />
|
|
<strong>End:</strong> {formatDateTime(rental.endDateTime)}
|
|
</p>
|
|
|
|
<p className="mb-1 text-dark">
|
|
<strong>Total:</strong> ${rental.totalAmount}
|
|
</p>
|
|
|
|
{rental.owner && (
|
|
<p className="mb-1 text-dark">
|
|
<strong>Owner:</strong>{" "}
|
|
<span
|
|
onClick={() => navigate(`/users/${rental.ownerId}`)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
{rental.owner.firstName} {rental.owner.lastName}
|
|
</span>
|
|
</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 === "declined" && rental.declineReason && (
|
|
<div className="alert alert-warning mt-2 mb-1 p-2 small">
|
|
<strong>Decline reason:</strong> {rental.declineReason}
|
|
</div>
|
|
)}
|
|
|
|
{rental.status === "cancelled" && (
|
|
<>
|
|
{rental.refundAmount !== undefined && (
|
|
<div className="alert alert-info mt-2 mb-1 p-2 small">
|
|
<strong>
|
|
<i className="bi bi-arrow-return-left me-1"></i>
|
|
Refund:
|
|
</strong>{" "}
|
|
${rental.refundAmount?.toFixed(2) || "0.00"}
|
|
{rental.refundProcessedAt && (
|
|
<small className="d-block text-muted mt-1">
|
|
Processed:{" "}
|
|
{new Date(
|
|
rental.refundProcessedAt
|
|
).toLocaleDateString()}
|
|
</small>
|
|
)}
|
|
{rental.refundReason && (
|
|
<small className="d-block mt-1">
|
|
{rental.refundReason}
|
|
</small>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
<div className="d-flex flex-column gap-2 mt-3">
|
|
<div className="d-flex gap-2">
|
|
{((rental.displayStatus || rental.status) === "pending" ||
|
|
(rental.displayStatus || rental.status) === "confirmed") && (
|
|
<button
|
|
className="btn btn-sm btn-danger"
|
|
onClick={() => handleCancelClick(rental)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
)}
|
|
{(rental.displayStatus || rental.status) === "active" &&
|
|
!rental.itemRating &&
|
|
!rental.itemReviewSubmittedAt && (
|
|
<button
|
|
className="btn btn-sm btn-primary"
|
|
onClick={() => handleReviewClick(rental)}
|
|
>
|
|
Review
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Condition Check Status */}
|
|
{getCompletedChecksForRental(rental.id).length > 0 && (
|
|
<div className="mb-2">
|
|
{getCompletedChecksForRental(rental.id).map(
|
|
(check) => (
|
|
<button
|
|
key={`${rental.id}-${check.checkType}-status`}
|
|
className="btn btn-link text-success small p-0 text-decoration-none d-block"
|
|
onClick={() => handleViewConditionCheck(check)}
|
|
>
|
|
{check.checkType === "rental_start_renter"
|
|
? "Rental Start Condition Noted"
|
|
: "Rental End Condition Noted"}
|
|
<small className="text-muted ms-2">
|
|
{new Date(
|
|
check.createdAt
|
|
).toLocaleDateString()}
|
|
</small>
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Condition Check Buttons */}
|
|
{getAvailableChecksForRental(rental.id).map((check) => (
|
|
<button
|
|
key={`${rental.id}-${check.checkType}`}
|
|
className="btn btn-sm btn-outline-primary"
|
|
onClick={() =>
|
|
handleConditionCheck(rental, check.checkType)
|
|
}
|
|
>
|
|
<i className="bi bi-camera me-2" />
|
|
{check.checkType === "rental_start_renter"
|
|
? "Submit Rental Start Condition"
|
|
: "Submit Rental End Condition"}
|
|
</button>
|
|
))}
|
|
|
|
{/* Review Status */}
|
|
{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>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Review Modal */}
|
|
{selectedRental && (
|
|
<ReviewItemModal
|
|
show={showReviewModal}
|
|
onClose={() => {
|
|
setShowReviewModal(false);
|
|
setSelectedRental(null);
|
|
}}
|
|
rental={selectedRental}
|
|
onSuccess={handleReviewSuccess}
|
|
/>
|
|
)}
|
|
|
|
{rentalToCancel && (
|
|
<RentalCancellationModal
|
|
show={showCancelModal}
|
|
onHide={() => {
|
|
setShowCancelModal(false);
|
|
setRentalToCancel(null);
|
|
}}
|
|
rental={rentalToCancel}
|
|
onCancellationComplete={handleCancellationComplete}
|
|
/>
|
|
)}
|
|
|
|
{/* Condition Check Modal */}
|
|
{conditionCheckData && (
|
|
<ConditionCheckModal
|
|
show={showConditionCheckModal}
|
|
onHide={() => {
|
|
setShowConditionCheckModal(false);
|
|
setConditionCheckData(null);
|
|
}}
|
|
rentalId={conditionCheckData.rental.id}
|
|
checkType={conditionCheckData.checkType}
|
|
itemName={conditionCheckData.rental.item?.name || "Item"}
|
|
onSuccess={handleConditionCheckSuccess}
|
|
/>
|
|
)}
|
|
|
|
{/* Condition Check Viewer Modal */}
|
|
<ConditionCheckViewerModal
|
|
show={showConditionCheckViewer}
|
|
onHide={() => {
|
|
setShowConditionCheckViewer(false);
|
|
setSelectedConditionCheck(null);
|
|
}}
|
|
conditionCheck={selectedConditionCheck}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Renting;
|