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

frontend/src/pages/MyListings.tsx

@@ -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

frontend/src/pages/MyRentals.tsx

@@ -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>

frontend/src/pages/Profile.tsx

@@ -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>
                                   )}