Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

emails for rental cancelation, rental declined, rental request confirmation, payout received

Browse Source
This commit is contained in:
jackiettran
2025-10-27 13:07:02 -04:00
parent 407c69aa22
commit 502d84a741
17 changed files with 2690 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
frontend/src/components/DeclineRentalModal.tsx Normal file
View File

@@ -0,0 +1,252 @@
import React, { useState, useEffect, useCallback } from "react";
import { rentalAPI } from "../services/api";
import { Rental } from "../types";
interface DeclineRentalModalProps {
show: boolean;
onHide: () => void;
rental: Rental;
onDeclineComplete: (updatedRental: Rental) => void;
}
const DeclineRentalModal: React.FC<DeclineRentalModalProps> = ({
show,
onHide,
rental,
onDeclineComplete,
}) => {
const [processing, setProcessing] = useState(false);
const [error, setError] = useState<string | null>(null);
const [reason, setReason] = useState("");
const [success, setSuccess] = useState(false);
const [updatedRental, setUpdatedRental] = useState<Rental | null>(null);
const handleDecline = async () => {
if (!reason.trim()) {
setError("Please provide a reason for declining this request");
return;
}
try {
setProcessing(true);
setError(null);
const response = await rentalAPI.declineRental(rental.id, reason.trim());
// Store updated rental data for later callback
setUpdatedRental(response.data);
// Show success confirmation
setSuccess(true);
} catch (error: any) {
setError(
error.response?.data?.error || "Failed to decline rental request"
);
} finally {
setProcessing(false);
}
};
const handleClose = () => {
// Call parent callback with updated rental data if we have it
if (updatedRental) {
onDeclineComplete(updatedRental);
}
// Reset all states when closing
setProcessing(false);
setError(null);
setReason("");
setSuccess(false);
setUpdatedRental(null);
onHide();
};
const handleBackdropClick = useCallback(
(e: React.MouseEvent) => {
if (e.target === e.currentTarget && !processing) {
handleClose();
}
},
[handleClose, processing]
);
const handleKeyDown = useCallback(
(e: KeyboardEvent) => {
if (e.key === "Escape" && !processing) {
handleClose();
}
},
[handleClose, processing]
);
useEffect(() => {
if (show) {
document.addEventListener("keydown", handleKeyDown);
document.body.style.overflow = "hidden";
} else {
document.removeEventListener("keydown", handleKeyDown);
document.body.style.overflow = "unset";
}
return () => {
document.removeEventListener("keydown", handleKeyDown);
document.body.style.overflow = "unset";
};
}, [show, handleKeyDown]);
if (!show) return null;
return (
<div
className="modal d-block"
style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
onClick={handleBackdropClick}
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">
{success ? "Request Declined" : "Decline Rental Request"}
</h5>
<button
type="button"
className="btn-close"
onClick={handleClose}
disabled={processing}
aria-label="Close"
></button>
</div>
<div className="modal-body">
{success ? (
<div className="text-center py-4">
<div className="mb-4">
<i
className="bi bi-check-circle-fill text-success"
style={{ fontSize: "4rem" }}
></i>
</div>
<h3 className="text-success mb-3">Request Declined</h3>
<div className="alert alert-info">
<p className="mb-0">
The renter has been notified that their request was
declined.
</p>
</div>
</div>
) : (
<>
<div className="mb-4">
<h6>Rental Details</h6>
<div className="bg-light p-3 rounded">
<p className="mb-2">
<strong>Item:</strong> {rental.item?.name}
</p>
<p className="mb-2">
<strong>Renter:</strong> {rental.renter?.firstName}{" "}
{rental.renter?.lastName}
</p>
<p className="mb-2">
<strong>Start:</strong>{" "}
{new Date(rental.startDateTime).toLocaleString()}
</p>
<p className="mb-0">
<strong>End:</strong>{" "}
{new Date(rental.endDateTime).toLocaleString()}
</p>
</div>
</div>
{error && (
<div className="alert alert-danger mb-3" role="alert">
{error}
</div>
)}
<form
onSubmit={(e) => {
e.preventDefault();
handleDecline();
}}
>
<div className="mb-3">
<label className="form-label">
Reason for Declining{" "}
<span className="text-danger">*</span>
</label>
<textarea
className="form-control"
rows={4}
value={reason}
onChange={(e) => {
setReason(e.target.value);
setError(null);
}}
placeholder="Please explain why you're unable to accept this rental request..."
maxLength={500}
required
disabled={processing}
/>
<div className="form-text text-muted">
{reason.length}/500 characters (Required)
</div>
</div>
<div className="alert alert-warning">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<strong>Note:</strong> The renter will see your reason for
declining. No payment has been processed for this request.
</div>
</form>
</>
)}
</div>
<div className="modal-footer">
{success ? (
<button
type="button"
className="btn btn-primary"
onClick={handleClose}
>
Done
</button>
) : (
<>
<button
type="button"
className="btn btn-secondary"
onClick={handleClose}
disabled={processing}
>
Cancel
</button>
<button
type="button"
className="btn btn-danger"
onClick={handleDecline}
disabled={processing || !reason.trim()}
>
{processing ? (
<>
<div
className="spinner-border spinner-border-sm me-2"
role="status"
>
<span className="visually-hidden">Loading...</span>
</div>
Declining...
</>
) : (
"Submit"
)}
</button>
</>
)}
</div>
</div>
</div>
</div>
);
};
export default DeclineRentalModal;

29
frontend/src/components/RentalCancellationModal.tsx
View File

@@ -39,6 +39,21 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
try {
setLoading(true);
setError(null);
// Check if rental status allows cancellation before making API call
if (rental.status !== "pending" && rental.status !== "confirmed") {
let errorMessage = "This rental cannot be cancelled";
if (rental.status === "active") {
errorMessage = "Cannot cancel rental - the rental period has already started";
} else if (rental.status === "completed") {
errorMessage = "Cannot cancel rental - the rental has already been completed";
} else if (rental.status === "cancelled") {
errorMessage = "This rental has already been cancelled";
}
setError(errorMessage);
return;
}
const response = await rentalAPI.getRefundPreview(rental.id);
setRefundPreview(response.data);
} catch (error: any) {
@@ -53,11 +68,18 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
const handleCancel = async () => {
if (!refundPreview) return;
// Validate reason is provided
const trimmedReason = reason.trim();
if (!trimmedReason) {
setError("Please provide a cancellation reason");
return;
}
try {
setProcessing(true);
setError(null);
const response = await rentalAPI.cancelRental(rental.id, reason.trim());
const response = await rentalAPI.cancelRental(rental.id, trimmedReason);
// Store refund details for confirmation screen
setProcessedRefund({
@@ -262,7 +284,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
<form>
<div className="mb-3">
<label className="form-label">
Cancellation Reason (Optional)
Cancellation Reason <span className="text-danger">*</span>
</label>
<textarea
className="form-control"
@@ -271,6 +293,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
onChange={(e) => setReason(e.target.value)}
placeholder="Please provide a reason for cancellation..."
maxLength={500}
required
/>
<div className="form-text text-muted">
{reason.length}/500 characters
@@ -306,7 +329,7 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
type="button"
className="btn btn-danger"
onClick={handleCancel}
disabled={processing || loading}
disabled={processing || loading || !reason.trim()}
>
{processing ? (
<>

56
frontend/src/pages/MyListings.tsx
View File

@@ -6,6 +6,7 @@ import { Item, Rental } from "../types";
import { rentalAPI, conditionCheckAPI } from "../services/api";
import ReviewRenterModal from "../components/ReviewRenterModal";
import RentalCancellationModal from "../components/RentalCancellationModal";
import DeclineRentalModal from "../components/DeclineRentalModal";
import ConditionCheckModal from "../components/ConditionCheckModal";
import ReturnStatusModal from "../components/ReturnStatusModal";
@@ -51,6 +52,8 @@ const MyListings: React.FC = () => {
useState<Rental | null>(null);
const [showCancelModal, setShowCancelModal] = useState(false);
const [rentalToCancel, setRentalToCancel] = useState<Rental | null>(null);
const [showDeclineModal, setShowDeclineModal] = useState(false);
const [rentalToDecline, setRentalToDecline] = useState<Rental | null>(null);
const [isProcessingPayment, setIsProcessingPayment] = useState<string>("");
const [processingSuccess, setProcessingSuccess] = useState<string>("");
const [showConditionCheckModal, setShowConditionCheckModal] = useState(false);
@@ -179,14 +182,20 @@ const MyListings: React.FC = () => {
}
};
const handleRejectRental = async (rentalId: string) => {
try {
await rentalAPI.updateRentalStatus(rentalId, "cancelled");
fetchOwnerRentals();
} catch (err) {
console.error("Failed to reject rental request:", err);
alert("Failed to reject rental request");
}
const handleDeclineClick = (rental: Rental) => {
setRentalToDecline(rental);
setShowDeclineModal(true);
};
const handleDeclineComplete = (updatedRental: Rental) => {
// Update the rental in the owner rentals list
setOwnerRentals((prev) =>
prev.map((rental) =>
rental.id === updatedRental.id ? updatedRental : rental
)
);
setShowDeclineModal(false);
setRentalToDecline(null);
};
const handleCompleteClick = (rental: Rental) => {
@@ -252,9 +261,7 @@ const MyListings: React.FC = () => {
// Filter owner rentals - exclude cancelled (shown in Rental History)
const allOwnerRentals = ownerRentals
.filter((r) =>
["pending", "confirmed", "active"].includes(r.status)
)
.filter((r) => ["pending", "confirmed", "active"].includes(r.status))
.sort((a, b) => {
const statusOrder = { pending: 0, confirmed: 1, active: 2 };
return (
@@ -408,12 +415,12 @@ const MyListings: React.FC = () => {
Loading...
</span>
</div>
Processing Payment...
Confirming...
</>
) : processingSuccess === rental.id ? (
<>
<i className="bi bi-check-circle me-1"></i>
Payment Success!
Confirmed!
</>
) : (
"Accept"
@@ -421,15 +428,9 @@ const MyListings: React.FC = () => {
</button>
<button
className="btn btn-sm btn-danger"
onClick={() => handleRejectRental(rental.id)}
onClick={() => handleDeclineClick(rental)}
>
Reject
</button>
<button
className="btn btn-sm btn-outline-danger"
onClick={() => handleCancelClick(rental)}
>
Cancel
Decline
</button>
</>
)}
@@ -649,6 +650,19 @@ const MyListings: React.FC = () => {
/>
)}
{/* Decline Modal */}
{rentalToDecline && (
<DeclineRentalModal
show={showDeclineModal}
onHide={() => {
setShowDeclineModal(false);
setRentalToDecline(null);
}}
rental={rentalToDecline}
onDeclineComplete={handleDeclineComplete}
/>
)}
{/* Condition Check Modal */}
{conditionCheckData && (
<ConditionCheckModal

21
frontend/src/pages/MyRentals.tsx
View File

@@ -170,9 +170,9 @@ const MyRentals: React.FC = () => {
);
};
// Filter rentals - only show active rentals (pending, confirmed, active)
// Filter rentals - show active and declined rentals
const renterActiveRentals = rentals.filter((r) =>
["pending", "confirmed", "active"].includes(r.status)
["pending", "confirmed", "declined", "active"].includes(r.status)
);
if (loading) {
@@ -251,6 +251,8 @@ const MyRentals: React.FC = () => {
? "bg-warning"
: rental.status === "confirmed"
? "bg-info"
: rental.status === "declined"
? "bg-secondary"
: "bg-danger"
}`}
>
@@ -258,6 +260,8 @@ const MyRentals: React.FC = () => {
? "Awaiting Owner Approval"
: rental.status === "confirmed"
? "Confirmed & Paid"
: rental.status === "declined"
? "Declined by Owner"
: rental.status.charAt(0).toUpperCase() +
rental.status.slice(1)}
</span>
@@ -295,14 +299,15 @@ const MyRentals: React.FC = () => {
</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.rejectionReason && (
<div className="alert alert-warning mt-2 mb-1 p-2 small">
<strong>Rejection reason:</strong>{" "}
{rental.rejectionReason}
</div>
)}
{rental.refundAmount !== undefined && (
<div className="alert alert-info mt-2 mb-1 p-2 small">
<strong>

8
frontend/src/pages/Profile.tsx
View File

@@ -940,11 +940,11 @@ const Profile: React.FC = () => {
</p>
)}
{rental.status === "cancelled" &&
rental.rejectionReason && (
{rental.status === "declined" &&
rental.declineReason && (
<div className="alert alert-warning mt-2 mb-1 p-2 small">
<strong>Rejection reason:</strong>{" "}
{rental.rejectionReason}
<strong>Decline reason:</strong>{" "}
{rental.declineReason}
</div>
)}

2
frontend/src/services/api.ts
View File

@@ -219,6 +219,8 @@ export const rentalAPI = {
}),
cancelRental: (id: string, reason?: string) =>
api.post(`/rentals/${id}/cancel`, { reason }),
declineRental: (id: string, reason?: string) =>
api.put(`/rentals/${id}/decline`, { reason }),
// Return status marking
markReturn: (
id: string,

4
frontend/src/types/index.ts
View File

@@ -110,10 +110,12 @@ export interface Rental {
status:
| "pending"
| "confirmed"
| "declined"
| "active"
| "completed"
| "cancelled"
| "returned_late"
| "returned_late_and_damaged"
| "damaged"
| "lost";
paymentStatus: "pending" | "paid" | "refunded";
@@ -135,7 +137,7 @@ export interface Rental {
notes?: string;
rating?: number;
review?: string;
rejectionReason?: string;
declineReason?: string;
// New review fields
itemRating?: number;
itemReview?: string;