refund confirmation

This commit is contained in:
jackiettran
2025-09-04 18:02:01 -04:00
parent 1b3c8a9691
commit bbab991e31
3 changed files with 154 additions and 64 deletions

View File

@@ -52,8 +52,8 @@ const MyRentals: React.FC = () => {
const handleCancellationComplete = (updatedRental: Rental) => {
// Update the rental in the list
setRentals(prev =>
prev.map(rental =>
setRentals((prev) =>
prev.map((rental) =>
rental.id === updatedRental.id ? updatedRental : rental
)
);
@@ -155,15 +155,22 @@ const MyRentals: React.FC = () => {
: "bg-danger"
}`}
>
{rental.status === "pending"
{rental.status === "pending"
? "Awaiting Owner Approval"
: rental.status === "confirmed"
? "Confirmed & Paid"
: rental.status.charAt(0).toUpperCase() + rental.status.slice(1)
}
: rental.status.charAt(0).toUpperCase() +
rental.status.slice(1)}
</span>
</div>
{rental.status === "pending" && (
<div className="alert alert-info mt-2 mb-2 p-2 small">
You'll only be charged if the owner approves your
request.
</div>
)}
<p className="mb-1 text-dark">
<strong>Rental Period:</strong>
<br />
@@ -185,14 +192,6 @@ const MyRentals: React.FC = () => {
</p>
)}
{rental.status === "pending" && (
<div className="alert alert-info mt-2 mb-2 p-2 small">
<i className="bi bi-clock me-2"></i>
<strong>Awaiting Approval:</strong> Your payment method is saved.
You'll only be charged if the owner approves your request.
</div>
)}
{rental.renterPrivateMessage &&
rental.renterReviewVisible && (
<div className="alert alert-info mt-2 mb-2 p-2 small">
@@ -222,11 +221,16 @@ const MyRentals: React.FC = () => {
${rental.refundAmount?.toFixed(2) || "0.00"}
{rental.refundProcessedAt && (
<small className="d-block text-muted mt-1">
Processed: {new Date(rental.refundProcessedAt).toLocaleDateString()}
Processed:{" "}
{new Date(
rental.refundProcessedAt
).toLocaleDateString()}
</small>
)}
{rental.refundReason && (
<small className="d-block mt-1">{rental.refundReason}</small>
<small className="d-block mt-1">
{rental.refundReason}
</small>
)}
</div>
)}
@@ -234,7 +238,8 @@ const MyRentals: React.FC = () => {
)}
<div className="d-flex gap-2 mt-3">
{(rental.status === "pending" || rental.status === "confirmed") && (
{(rental.status === "pending" ||
rental.status === "confirmed") && (
<button
className="btn btn-sm btn-danger"
onClick={() => handleCancelClick(rental)}