payment for rental from renter stripe integration
This commit is contained in:
jackiettran
@@ -45,10 +45,6 @@ const MyRentals: React.FC = () => {
|
||||
const fetchRentals = async () => {
|
||||
try {
|
||||
const response = await rentalAPI.getMyRentals();
|
||||
console.log("MyRentals data from backend:", response.data);
|
||||
if (response.data.length > 0) {
|
||||
console.log("First rental object:", response.data[0]);
|
||||
}
|
||||
setRentals(response.data);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.message || "Failed to fetch rentals");
|
||||
@@ -122,7 +118,9 @@ const MyRentals: React.FC = () => {
|
||||
{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>
|
||||
<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>
|
||||
@@ -130,86 +128,107 @@ const MyRentals: React.FC = () => {
|
||||
) : (
|
||||
<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 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" }}
|
||||
>
|
||||
<div className="card h-100" style={{ cursor: rental.item ? "pointer" : "default" }}>
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<div className="card-body">
|
||||
<h5 className="card-title text-dark">
|
||||
{rental.item ? rental.item.name : "Item Unavailable"}
|
||||
</h5>
|
||||
{rental.item?.images && rental.item.images[0] && (
|
||||
<img
|
||||
src={rental.item.images[0]}
|
||||
className="card-img-top"
|
||||
alt={rental.item.name}
|
||||
style={{ height: "200px", objectFit: "cover" }}
|
||||
/>
|
||||
)}
|
||||
<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.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>
|
||||
{rental.paymentStatus === "paid" && (
|
||||
<span className="badge bg-success ms-2">Paid</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Rental Period:</strong>
|
||||
<br />
|
||||
<strong>Start:</strong> {formatDateTime(rental.startDate, rental.startTime)}
|
||||
<br />
|
||||
<strong>End:</strong> {formatDateTime(rental.endDate, rental.endTime)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Total:</strong> ${rental.totalAmount}
|
||||
</p>
|
||||
|
||||
{rental.owner && (
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Owner:</strong> {rental.owner.firstName} {rental.owner.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>
|
||||
{rental.paymentStatus === "paid" && (
|
||||
<span className="badge bg-success ms-2">Paid</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{rental.renterPrivateMessage && rental.renterReviewVisible && (
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Rental Period:</strong>
|
||||
<br />
|
||||
<strong>Start:</strong>{" "}
|
||||
{formatDateTime(rental.startDate, rental.startTime)}
|
||||
<br />
|
||||
<strong>End:</strong>{" "}
|
||||
{formatDateTime(rental.endDate, rental.endTime)}
|
||||
</p>
|
||||
|
||||
<p className="mb-1 text-dark">
|
||||
<strong>Total:</strong> ${rental.totalAmount}
|
||||
</p>
|
||||
|
||||
{rental.owner && (
|
||||
<p className="mb-1 text-dark">
|
||||
<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>
|
||||
<strong>
|
||||
<i className="bi bi-envelope-fill me-1"></i>Private
|
||||
Note from Owner:
|
||||
</strong>
|
||||
<br />
|
||||
{rental.renterPrivateMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rental.status === "cancelled" && rental.rejectionReason && (
|
||||
{rental.status === "cancelled" &&
|
||||
rental.rejectionReason && (
|
||||
<div className="alert alert-warning mt-2 mb-1 p-2 small">
|
||||
<strong>Rejection reason:</strong> {rental.rejectionReason}
|
||||
<strong>Rejection reason:</strong>{" "}
|
||||
{rental.rejectionReason}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "pending" && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleCancelClick(rental.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{rental.status === "active" && !rental.itemRating && !rental.itemReviewSubmittedAt && (
|
||||
<div className="d-flex gap-2 mt-3">
|
||||
{rental.status === "pending" && (
|
||||
<button
|
||||
className="btn btn-sm btn-danger"
|
||||
onClick={() => handleCancelClick(rental.id)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
{rental.status === "active" &&
|
||||
!rental.itemRating &&
|
||||
!rental.itemReviewSubmittedAt && (
|
||||
<button
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={() => handleReviewClick(rental)}
|
||||
@@ -217,30 +236,33 @@ const MyRentals: React.FC = () => {
|
||||
Review
|
||||
</button>
|
||||
)}
|
||||
{rental.itemReviewSubmittedAt && !rental.itemReviewVisible && (
|
||||
{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 && (
|
||||
{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>
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -275,4 +297,4 @@ const MyRentals: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default MyRentals;
|
||||
export default MyRentals;
|
||||
|
||||
Reference in New Issue
Block a user