refund confirmation

frontend/src/components/EmbeddedStripeCheckout.tsx

@@ -24,10 +24,15 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
   const [clientSecret, setClientSecret] = useState<string>("");
   const [creating, setCreating] = useState(false);
   const [sessionId, setSessionId] = useState<string>("");
+  const hasCreatedSession = useRef(false);
 
   const createCheckoutSession = useCallback(async () => {
+    // Prevent multiple session creations
+    if (hasCreatedSession.current) return;
+    
     try {
       setCreating(true);
+      hasCreatedSession.current = true;
       
       const response = await stripeAPI.createSetupCheckoutSession({
         rentalData
@@ -36,6 +41,7 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
       setClientSecret(response.data.clientSecret);
       setSessionId(response.data.sessionId);
     } catch (error: any) {
+      hasCreatedSession.current = false; // Reset on error so it can be retried
       onError(
         error.response?.data?.error || "Failed to create checkout session"
       );
@@ -113,6 +119,7 @@ const EmbeddedStripeCheckout: React.FC<EmbeddedStripeCheckoutProps> = ({
   return (
     <div id="embedded-checkout">
       <EmbeddedCheckoutProvider
+        key={clientSecret} // Force remount if clientSecret changes
         stripe={stripePromise}
         options={{
           clientSecret,

frontend/src/components/RentalCancellationModal.tsx

@@ -22,6 +22,12 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
   const [processing, setProcessing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [reason, setReason] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [processedRefund, setProcessedRefund] = useState<{
+    amount: number;
+    refundId?: string;
+  } | null>(null);
+  const [updatedRental, setUpdatedRental] = useState<Rental | null>(null);
 
   useEffect(() => {
     if (show && rental) {
@@ -52,8 +58,19 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
       setError(null);
 
       const response = await rentalAPI.cancelRental(rental.id, reason.trim());
-      onCancellationComplete(response.data.rental);
-      onHide();
+      
+      // Store refund details for confirmation screen
+      setProcessedRefund({
+        amount: refundPreview.refundAmount,
+        refundId: response.data.rental.stripeRefundId
+      });
+      
+      // Store updated rental data for later callback
+      setUpdatedRental(response.data.rental);
+      
+      // Show success confirmation instead of closing immediately
+      setSuccess(true);
+      // Don't call onCancellationComplete here - wait until user clicks "Done"
     } catch (error: any) {
       setError(error.response?.data?.error || "Failed to cancel rental");
     } finally {
@@ -61,6 +78,24 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     }
   };
 
+  const handleClose = () => {
+    // Call parent callback with updated rental data if we have it
+    if (updatedRental) {
+      onCancellationComplete(updatedRental);
+    }
+    
+    // Reset all states when closing
+    setRefundPreview(null);
+    setLoading(false);
+    setProcessing(false);
+    setError(null);
+    setReason("");
+    setSuccess(false);
+    setProcessedRefund(null);
+    setUpdatedRental(null);
+    onHide();
+  };
+
   const formatCurrency = (amount: number | string | undefined) => {
     const numAmount = Number(amount) || 0;
     return `$${numAmount.toFixed(2)}`;
@@ -75,19 +110,19 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
   const handleBackdropClick = useCallback(
     (e: React.MouseEvent) => {
       if (e.target === e.currentTarget) {
-        onHide();
+        handleClose();
       }
     },
-    [onHide]
+    [handleClose]
   );
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === "Escape") {
-        onHide();
+        handleClose();
       }
     },
-    [onHide]
+    [handleClose]
   );
 
   useEffect(() => {
@@ -116,31 +151,60 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
       <div className="modal-dialog modal-lg modal-dialog-centered">
         <div className="modal-content">
           <div className="modal-header">
-            <h5 className="modal-title">Cancel Rental</h5>
+            <h5 className="modal-title">
+              {success ? "Refund Confirmation" : "Cancel Rental"}
+            </h5>
             <button
               type="button"
               className="btn-close"
-              onClick={onHide}
+              onClick={handleClose}
               aria-label="Close"
             ></button>
           </div>
           <div className="modal-body">
-            {loading && (
+            {success && processedRefund ? (
               <div className="text-center py-4">
-                <div className="spinner-border me-2" role="status">
-                  <span className="visually-hidden">Loading...</span>
+                <div className="mb-4">
+                  <i className="bi bi-check-circle-fill text-success" style={{ fontSize: '4rem' }}></i>
                 </div>
-                Calculating refund...
+                <h3 className="text-success mb-3">Refund Processed Successfully!</h3>
+                <div className="alert alert-success mb-4">
+                  <h5 className="mb-3">
+                    <strong>{formatCurrency(processedRefund.amount)}</strong> has been refunded
+                  </h5>
+                  <div className="small text-muted">
+                    <p className="mb-2">
+                      <i className="bi bi-clock me-2"></i>
+                      Your refund will appear in your payment method within <strong>3-5 business days</strong>
+                    </p>
+                    <p className="mb-0">
+                      <i className="bi bi-credit-card me-2"></i>
+                      Refund will be processed to your original payment method
+                    </p>
+                  </div>
+                </div>
+                <p className="text-muted mb-4">
+                  Thank you for using our platform. We hope you'll rent with us again soon!
+                </p>
               </div>
-            )}
+            ) : (
+              <>
+                {loading && (
+                  <div className="text-center py-4">
+                    <div className="spinner-border me-2" role="status">
+                      <span className="visually-hidden">Loading...</span>
+                    </div>
+                    Calculating refund...
+                  </div>
+                )}
 
-            {error && (
-              <div className="alert alert-danger mb-3" role="alert">
-                {error}
-              </div>
-            )}
+                {error && (
+                  <div className="alert alert-danger mb-3" role="alert">
+                    {error}
+                  </div>
+                )}
 
-            {refundPreview && !loading && (
+                {refundPreview && !loading && (
               <>
                 <div className="mb-4">
                   <h5>Rental Details</h5>
@@ -206,41 +270,55 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
                 </form>
               </>
             )}
+            </>
+            )}
           </div>
           <div className="modal-footer">
-            <button
-              type="button"
-              className="btn btn-secondary"
-              onClick={onHide}
-              disabled={processing}
-            >
-              Keep Rental
-            </button>
-            {refundPreview && (
+            {success ? (
               <button
                 type="button"
-                className="btn btn-danger"
-                onClick={handleCancel}
-                disabled={processing || loading}
+                className="btn btn-primary btn-lg"
+                onClick={handleClose}
               >
-                {processing ? (
-                  <>
-                    <div
-                      className="spinner-border spinner-border-sm me-2"
-                      role="status"
-                    >
-                      <span className="visually-hidden">Loading...</span>
-                    </div>
-                    Processing...
-                  </>
-                ) : (
-                  `Cancel with ${
-                    refundPreview.refundAmount > 0
-                      ? `Refund ${formatCurrency(refundPreview.refundAmount)}`
-                      : "No Refund"
-                  }`
-                )}
+                Done
               </button>
+            ) : (
+              <>
+                <button
+                  type="button"
+                  className="btn btn-secondary"
+                  onClick={handleClose}
+                  disabled={processing}
+                >
+                  Keep Rental
+                </button>
+                {refundPreview && (
+                  <button
+                    type="button"
+                    className="btn btn-danger"
+                    onClick={handleCancel}
+                    disabled={processing || loading}
+                  >
+                    {processing ? (
+                      <>
+                        <div
+                          className="spinner-border spinner-border-sm me-2"
+                          role="status"
+                        >
+                          <span className="visually-hidden">Loading...</span>
+                        </div>
+                        Processing...
+                      </>
+                    ) : (
+                      `Cancel with ${
+                        refundPreview.refundAmount > 0
+                          ? `Refund ${formatCurrency(refundPreview.refundAmount)}`
+                          : "No Refund"
+                      }`
+                    )}
+                  </button>
+                )}
+              </>
             )}
           </div>
         </div>