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

frontend/src/components/RentalCancellationModal.tsx

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