payment confirmation for renter after rental request approval, first listing celebration email, removed burstprotection for google places autocomplete, renamed email templates

backend/models/Rental.js

@@ -108,6 +108,15 @@ const Rental = sequelize.define("Rental", {
   stripePaymentIntentId: {
     type: DataTypes.STRING,
   },
+  paymentMethodBrand: {
+    type: DataTypes.STRING,
+  },
+  paymentMethodLast4: {
+    type: DataTypes.STRING,
+  },
+  chargedAt: {
+    type: DataTypes.DATE,
+  },
   deliveryMethod: {
     type: DataTypes.ENUM("pickup", "delivery"),
     defaultValue: "pickup",

backend/routes/items.js

@@ -225,16 +225,37 @@ router.post("/", authenticateToken, requireVerifiedEmail, async (req, res) => {
         {
           model: User,
           as: "owner",
-          attributes: ["id", "username", "firstName", "lastName"],
+          attributes: ["id", "username", "firstName", "lastName", "email", "stripeConnectedAccountId"],
         },
       ],
     });
 
+    // Check if this is the owner's first listing
+    const ownerItemCount = await Item.count({
+      where: { ownerId: req.user.id }
+    });
+
+    // If first listing, send celebration email
+    if (ownerItemCount === 1) {
+      try {
+        const emailService = require("../services/emailService");
+        await emailService.sendFirstListingCelebrationEmail(
+          itemWithOwner.owner,
+          itemWithOwner
+        );
+        console.log(`First listing celebration email sent to owner ${req.user.id}`);
+      } catch (emailError) {
+        // Log but don't fail the item creation
+        console.error('Failed to send first listing celebration email:', emailError.message);
+      }
+    }
+
     const reqLogger = logger.withRequestId(req.id);
     reqLogger.info("Item created", {
       itemId: item.id,
       ownerId: req.user.id,
-      itemName: req.body.name
+      itemName: req.body.name,
+      isFirstListing: ownerItemCount === 1
     });
 
     res.status(201).json(itemWithOwner);

backend/routes/maps.js

@@ -69,7 +69,6 @@ const handleServiceError = (error, res, req) => {
 router.post(
   "/places/autocomplete",
   authenticateToken,
-  rateLimiter.burstProtection,
   rateLimiter.placesAutocomplete,
   validateInput,
   async (req, res) => {
@@ -150,7 +149,6 @@ router.post(
 router.post(
   "/geocode",
   authenticateToken,
-  rateLimiter.burstProtection,
   rateLimiter.geocoding,
   validateInput,
   async (req, res) => {

backend/routes/rentals.js

@@ -404,6 +404,9 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
             status: "confirmed",
             paymentStatus: "paid",
             stripePaymentIntentId: paymentResult.paymentIntentId,
+            paymentMethodBrand: paymentResult.paymentMethod?.brand || null,
+            paymentMethodLast4: paymentResult.paymentMethod?.last4 || null,
+            chargedAt: paymentResult.chargedAt || new Date(),
           });
 
           const updatedRental = await Rental.findByPk(rental.id, {
@@ -423,7 +426,58 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
           });
 
           // Send confirmation emails
-          await emailService.sendRentalConfirmationEmails(updatedRental);
+          // Send approval confirmation to owner with Stripe reminder
+          try {
+            await emailService.sendRentalApprovalConfirmationEmail(updatedRental);
+            const reqLogger = logger.withRequestId(req.id);
+            reqLogger.info("Rental approval confirmation sent to owner", {
+              rentalId: updatedRental.id,
+              ownerId: updatedRental.ownerId,
+            });
+          } catch (emailError) {
+            const reqLogger = logger.withRequestId(req.id);
+            reqLogger.error("Failed to send rental approval confirmation email to owner", {
+              error: emailError.message,
+              rentalId: updatedRental.id,
+              ownerId: updatedRental.ownerId,
+            });
+          }
+
+          // Send rental confirmation to renter with payment receipt
+          try {
+            const renter = await User.findByPk(updatedRental.renterId, {
+              attributes: ["email", "firstName"],
+            });
+            if (renter) {
+              const renterNotification = {
+                type: "rental_confirmed",
+                title: "Rental Confirmed",
+                message: `Your rental of "${updatedRental.item.name}" has been confirmed.`,
+                rentalId: updatedRental.id,
+                userId: updatedRental.renterId,
+                metadata: { rentalStart: updatedRental.startDateTime },
+              };
+              await emailService.sendRentalConfirmation(
+                renter.email,
+                renterNotification,
+                updatedRental,
+                renter.firstName,
+                true // isRenter = true to show payment receipt
+              );
+              const reqLogger = logger.withRequestId(req.id);
+              reqLogger.info("Rental confirmation sent to renter", {
+                rentalId: updatedRental.id,
+                renterId: updatedRental.renterId,
+              });
+            }
+          } catch (emailError) {
+            const reqLogger = logger.withRequestId(req.id);
+            reqLogger.error("Failed to send rental confirmation email to renter", {
+              error: emailError.message,
+              rentalId: updatedRental.id,
+              renterId: updatedRental.renterId,
+            });
+          }
 
           res.json(updatedRental);
           return;
@@ -464,7 +518,58 @@ router.put("/:id/status", authenticateToken, async (req, res) => {
         });
 
         // Send confirmation emails
-        await emailService.sendRentalConfirmationEmails(updatedRental);
+        // Send approval confirmation to owner (for free rentals, no Stripe reminder shown)
+        try {
+          await emailService.sendRentalApprovalConfirmationEmail(updatedRental);
+          const reqLogger = logger.withRequestId(req.id);
+          reqLogger.info("Rental approval confirmation sent to owner", {
+            rentalId: updatedRental.id,
+            ownerId: updatedRental.ownerId,
+          });
+        } catch (emailError) {
+          const reqLogger = logger.withRequestId(req.id);
+          reqLogger.error("Failed to send rental approval confirmation email to owner", {
+            error: emailError.message,
+            rentalId: updatedRental.id,
+            ownerId: updatedRental.ownerId,
+          });
+        }
+
+        // Send rental confirmation to renter
+        try {
+          const renter = await User.findByPk(updatedRental.renterId, {
+            attributes: ["email", "firstName"],
+          });
+          if (renter) {
+            const renterNotification = {
+              type: "rental_confirmed",
+              title: "Rental Confirmed",
+              message: `Your rental of "${updatedRental.item.name}" has been confirmed.`,
+              rentalId: updatedRental.id,
+              userId: updatedRental.renterId,
+              metadata: { rentalStart: updatedRental.startDateTime },
+            };
+            await emailService.sendRentalConfirmation(
+              renter.email,
+              renterNotification,
+              updatedRental,
+              renter.firstName,
+              true // isRenter = true (for free rentals, shows "no payment required")
+            );
+            const reqLogger = logger.withRequestId(req.id);
+            reqLogger.info("Rental confirmation sent to renter", {
+              rentalId: updatedRental.id,
+              renterId: updatedRental.renterId,
+            });
+          }
+        } catch (emailError) {
+          const reqLogger = logger.withRequestId(req.id);
+          reqLogger.error("Failed to send rental confirmation email to renter", {
+            error: emailError.message,
+            rentalId: updatedRental.id,
+            renterId: updatedRental.renterId,
+          });
+        }
 
         res.json(updatedRental);
         return;
@@ -958,6 +1063,40 @@ router.post("/:id/mark-return", authenticateToken, async (req, res) => {
           actualReturnDateTime: actualReturnDateTime || rental.endDateTime,
           notes: notes || null,
         });
+
+        // Fetch full rental details with associations for email
+        const rentalWithDetails = await Rental.findByPk(rentalId, {
+          include: [
+            { model: Item, as: "item" },
+            {
+              model: User,
+              as: "owner",
+              attributes: ["id", "username", "firstName", "lastName"],
+            },
+            {
+              model: User,
+              as: "renter",
+              attributes: ["id", "username", "firstName", "lastName"],
+            },
+          ],
+        });
+
+        // Send completion emails to both renter and owner
+        try {
+          await emailService.sendRentalCompletionEmails(rentalWithDetails);
+          const reqLogger = logger.withRequestId(req.id);
+          reqLogger.info("Rental completion emails sent", {
+            rentalId,
+            ownerId: rental.ownerId,
+            renterId: rental.renterId,
+          });
+        } catch (emailError) {
+          const reqLogger = logger.withRequestId(req.id);
+          reqLogger.error("Failed to send rental completion emails", {
+            error: emailError.message,
+            rentalId,
+          });
+        }
         break;
 
       case "damaged":

backend/services/emailService.js

@@ -33,20 +33,24 @@ class EmailService {
 
     try {
       const templateFiles = [
-        "conditionCheckReminder.html",
+        "conditionCheckReminderToUser.html",
-        "rentalConfirmation.html",
+        "rentalConfirmationToUser.html",
-        "emailVerification.html",
+        "emailVerificationToUser.html",
-        "passwordReset.html",
+        "passwordResetToUser.html",
-        "passwordChanged.html",
+        "passwordChangedToUser.html",
-        "lateReturnCS.html",
+        "lateReturnToCS.html",
-        "damageReportCS.html",
+        "damageReportToCS.html",
-        "lostItemCS.html",
+        "lostItemToCS.html",
-        "rentalRequest.html",
+        "rentalRequestToOwner.html",
-        "rentalRequestConfirmation.html",
+        "rentalRequestConfirmationToRenter.html",
-        "rentalCancellationConfirmation.html",
+        "rentalCancellationConfirmationToUser.html",
-        "rentalCancellationNotification.html",
+        "rentalCancellationNotificationToUser.html",
-        "rentalDeclined.html",
+        "rentalDeclinedToRenter.html",
-        "payoutReceived.html",
+        "rentalApprovalConfirmationToOwner.html",
+        "rentalCompletionThankYouToRenter.html",
+        "rentalCompletionCongratsToOwner.html",
+        "payoutReceivedToOwner.html",
+        "firstListingCelebrationToOwner.html",
       ];
 
       for (const templateFile of templateFiles) {
@@ -222,7 +226,7 @@ class EmailService {
     `;
 
     const templates = {
-      conditionCheckReminder: baseTemplate.replace(
+      conditionCheckReminderToUser: baseTemplate.replace(
         "{{content}}",
         `
         <h2>{{title}}</h2>
@@ -233,7 +237,7 @@ class EmailService {
       `
       ),
 
-      rentalConfirmation: baseTemplate.replace(
+      rentalConfirmationToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -245,7 +249,7 @@ class EmailService {
       `
       ),
 
-      emailVerification: baseTemplate.replace(
+      emailVerificationToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -257,7 +261,7 @@ class EmailService {
       `
       ),
 
-      passwordReset: baseTemplate.replace(
+      passwordResetToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -270,7 +274,7 @@ class EmailService {
       `
       ),
 
-      passwordChanged: baseTemplate.replace(
+      passwordChangedToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -282,7 +286,7 @@ class EmailService {
       `
       ),
 
-      rentalRequest: baseTemplate.replace(
+      rentalRequestToOwner: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{ownerName}},</p>
@@ -298,7 +302,7 @@ class EmailService {
       `
       ),
 
-      rentalRequestConfirmation: baseTemplate.replace(
+      rentalRequestConfirmationToRenter: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{renterName}},</p>
@@ -314,7 +318,7 @@ class EmailService {
       `
       ),
 
-      rentalCancellationConfirmation: baseTemplate.replace(
+      rentalCancellationConfirmationToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -328,7 +332,7 @@ class EmailService {
       `
       ),
 
-      rentalCancellationNotification: baseTemplate.replace(
+      rentalCancellationNotificationToUser: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{recipientName}},</p>
@@ -343,7 +347,7 @@ class EmailService {
       `
       ),
 
-      payoutReceived: baseTemplate.replace(
+      payoutReceivedToOwner: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{ownerName}},</p>
@@ -363,7 +367,7 @@ class EmailService {
       `
       ),
 
-      rentalDeclined: baseTemplate.replace(
+      rentalDeclinedToRenter: baseTemplate.replace(
         "{{content}}",
         `
         <p>Hi {{renterName}},</p>
@@ -384,6 +388,60 @@ class EmailService {
         <p>If you have any questions or concerns, please don't hesitate to contact our support team.</p>
       `
       ),
+
+      rentalApprovalConfirmationToOwner: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{ownerName}},</p>
+        <h2>You've Approved the Rental Request!</h2>
+        <p>You've successfully approved the rental request for <strong>{{itemName}}</strong>.</p>
+        <h3>Rental Details</h3>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Renter:</strong> {{renterName}}</p>
+        <p><strong>Start Date:</strong> {{startDate}}</p>
+        <p><strong>End Date:</strong> {{endDate}}</p>
+        <p><strong>Your Earnings:</strong> \${{payoutAmount}}</p>
+        {{stripeSection}}
+        <h3>What's Next?</h3>
+        <ul>
+          <li>Coordinate with the renter on pickup details</li>
+          <li>Take photos of the item's condition before handoff</li>
+          <li>Provide any care instructions or usage tips</li>
+        </ul>
+        <p><a href="{{rentalDetailsUrl}}" class="button">View Rental Details</a></p>
+      `
+      ),
+
+      rentalCompletionThankYouToRenter: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{renterName}},</p>
+        <h2>Thank You for Returning On Time!</h2>
+        <p>You've successfully returned <strong>{{itemName}}</strong> on time. On-time returns like yours help build trust in the RentAll community!</p>
+        <h3>Rental Summary</h3>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Rental Period:</strong> {{startDate}} to {{endDate}}</p>
+        <p><strong>Returned On:</strong> {{returnedDate}}</p>
+        {{reviewSection}}
+        <p><a href="{{browseItemsUrl}}" class="button">Browse Available Items</a></p>
+      `
+      ),
+
+      rentalCompletionCongratsToOwner: baseTemplate.replace(
+        "{{content}}",
+        `
+        <p>Hi {{ownerName}},</p>
+        <h2>Congratulations on Completing a Rental!</h2>
+        <p><strong>{{itemName}}</strong> has been successfully returned on time. Great job!</p>
+        <h3>Rental Summary</h3>
+        <p><strong>Item:</strong> {{itemName}}</p>
+        <p><strong>Renter:</strong> {{renterName}}</p>
+        <p><strong>Rental Period:</strong> {{startDate}} to {{endDate}}</p>
+        {{earningsSection}}
+        {{stripeSection}}
+        <p><a href="{{myListingsUrl}}" class="button">View My Listings</a></p>
+      `
+      ),
     };
 
     return (
@@ -409,7 +467,7 @@ class EmailService {
     };
 
     const htmlContent = this.renderTemplate(
-      "conditionCheckReminder",
+      "conditionCheckReminderToUser",
       variables
     );
 
@@ -424,7 +482,8 @@ class EmailService {
     userEmail,
     notification,
     rental,
-    recipientName = null
+    recipientName = null,
+    isRenter = false
   ) {
     const itemName = rental?.item?.name || "Unknown Item";
 
@@ -439,9 +498,77 @@ class EmailService {
       endDate: rental?.endDateTime
         ? new Date(rental.endDateTime).toLocaleDateString()
         : "Not specified",
+      isRenter: isRenter,
     };
 
-    const htmlContent = this.renderTemplate("rentalConfirmation", variables);
+    // Add payment information if this is for the renter and rental has payment info
+    let paymentSection = "";
+    if (isRenter) {
+      const totalAmount = parseFloat(rental.totalAmount) || 0;
+      const isPaidRental = totalAmount > 0 && rental.paymentStatus === 'paid';
+
+      if (isPaidRental) {
+        // Format payment method display
+        let paymentMethodDisplay = "Payment method on file";
+        if (rental.paymentMethodBrand && rental.paymentMethodLast4) {
+          const brandCapitalized = rental.paymentMethodBrand.charAt(0).toUpperCase() +
+                                   rental.paymentMethodBrand.slice(1);
+          paymentMethodDisplay = `${brandCapitalized} ending in ${rental.paymentMethodLast4}`;
+        }
+
+        const chargedAtFormatted = rental.chargedAt
+          ? new Date(rental.chargedAt).toLocaleString("en-US", {
+              dateStyle: "medium",
+              timeStyle: "short"
+            })
+          : new Date().toLocaleString("en-US", {
+              dateStyle: "medium",
+              timeStyle: "short"
+            });
+
+        // Build payment receipt section HTML
+        paymentSection = `
+            <h2>Payment Receipt</h2>
+            <div class="success-box">
+                <div class="icon">💳</div>
+                <p><strong>Payment Successful</strong></p>
+                <p>Your payment has been processed. This email serves as your receipt.</p>
+            </div>
+            <table class="info-table">
+                <tr>
+                    <th>Amount Charged</th>
+                    <td><strong>$${totalAmount.toFixed(2)}</strong></td>
+                </tr>
+                <tr>
+                    <th>Payment Method</th>
+                    <td>${paymentMethodDisplay}</td>
+                </tr>
+                <tr>
+                    <th>Transaction ID</th>
+                    <td style="font-family: monospace; font-size: 12px;">${rental.stripePaymentIntentId || "N/A"}</td>
+                </tr>
+                <tr>
+                    <th>Transaction Date</th>
+                    <td>${chargedAtFormatted}</td>
+                </tr>
+            </table>
+            <p style="font-size: 13px; color: #6c757d; margin-top: 10px;">
+                <strong>Note:</strong> Keep this email for your records. You can use the transaction ID above if you need to contact support about this payment.
+            </p>
+        `;
+      } else if (totalAmount === 0) {
+        // Free rental message
+        paymentSection = `
+            <div class="success-box">
+                <p><strong>No Payment Required:</strong> This is a free rental.</p>
+            </div>
+        `;
+      }
+    }
+
+    variables.paymentSection = paymentSection;
+
+    const htmlContent = this.renderTemplate("rentalConfirmationToUser", variables);
 
     // Use clear, transactional subject line with item name
     const subject = `Rental Confirmation - ${itemName}`;
@@ -458,7 +585,7 @@ class EmailService {
       verificationUrl: verificationUrl,
     };
 
-    const htmlContent = this.renderTemplate("emailVerification", variables);
+    const htmlContent = this.renderTemplate("emailVerificationToUser", variables);
 
     return await this.sendEmail(
       user.email,
@@ -476,7 +603,7 @@ class EmailService {
       resetUrl: resetUrl,
     };
 
-    const htmlContent = this.renderTemplate("passwordReset", variables);
+    const htmlContent = this.renderTemplate("passwordResetToUser", variables);
 
     return await this.sendEmail(
       user.email,
@@ -497,7 +624,7 @@ class EmailService {
       timestamp: timestamp,
     };
 
-    const htmlContent = this.renderTemplate("passwordChanged", variables);
+    const htmlContent = this.renderTemplate("passwordChangedToUser", variables);
 
     return await this.sendEmail(
       user.email,
@@ -554,7 +681,7 @@ class EmailService {
       approveUrl: approveUrl,
     };
 
-    const htmlContent = this.renderTemplate("rentalRequest", variables);
+    const htmlContent = this.renderTemplate("rentalRequestToOwner", variables);
 
     return await this.sendEmail(
       owner.email,
@@ -608,7 +735,7 @@ class EmailService {
     };
 
     const htmlContent = this.renderTemplate(
-      "rentalRequestConfirmation",
+      "rentalRequestConfirmationToRenter",
       variables
     );
 
@@ -678,7 +805,7 @@ class EmailService {
     };
 
     const htmlContent = this.renderTemplate(
-      "rentalDeclined",
+      "rentalDeclinedToRenter",
       variables
     );
 
@@ -730,7 +857,7 @@ class EmailService {
       earningsDashboardUrl: earningsDashboardUrl,
     };
 
-    const htmlContent = this.renderTemplate("payoutReceived", variables);
+    const htmlContent = this.renderTemplate("payoutReceivedToOwner", variables);
 
     return await this.sendEmail(
       owner.email,
@@ -874,7 +1001,7 @@ class EmailService {
         };
 
         const confirmationHtml = this.renderTemplate(
-          "rentalCancellationConfirmation",
+          "rentalCancellationConfirmationToUser",
           confirmationVariables
         );
 
@@ -910,7 +1037,7 @@ class EmailService {
         };
 
         const notificationHtml = this.renderTemplate(
-          "rentalCancellationNotification",
+          "rentalCancellationNotificationToUser",
           notificationVariables
         );
 
@@ -965,7 +1092,7 @@ class EmailService {
       await this.sendTemplateEmail(
         process.env.CUSTOMER_SUPPORT_EMAIL,
         "Late Return Detected - Action Required",
-        "lateReturnCS",
+        "lateReturnToCS",
         {
           rentalId: rental.id,
           itemName: rental.item.name,
@@ -1027,7 +1154,7 @@ class EmailService {
       await this.sendTemplateEmail(
         process.env.CUSTOMER_SUPPORT_EMAIL,
         "Damage Report Filed - Action Required",
-        "damageReportCS",
+        "damageReportToCS",
         {
           rentalId: rental.id,
           itemName: rental.item.name,
@@ -1086,7 +1213,7 @@ class EmailService {
       await this.sendTemplateEmail(
         process.env.CUSTOMER_SUPPORT_EMAIL,
         "Lost Item Claim Filed - Action Required",
-        "lostItemCS",
+        "lostItemToCS",
         {
           rentalId: rental.id,
           itemName: rental.item.name,
@@ -1153,7 +1280,8 @@ class EmailService {
             owner.email,
             ownerNotification,
             rental,
-            owner.firstName
+            owner.firstName,
+            false // isRenter = false for owner
           );
           if (ownerResult.success) {
             console.log(
@@ -1181,7 +1309,8 @@ class EmailService {
             renter.email,
             renterNotification,
             rental,
-            renter.firstName
+            renter.firstName,
+            true // isRenter = true for renter (enables payment receipt)
           );
           if (renterResult.success) {
             console.log(
@@ -1210,6 +1339,391 @@ class EmailService {
 
     return results;
   }
+
+  async sendFirstListingCelebrationEmail(owner, item) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+
+    const variables = {
+      ownerName: owner.firstName || "there",
+      itemName: item.name,
+      itemId: item.id,
+      viewItemUrl: `${frontendUrl}/items/${item.id}`,
+    };
+
+    const htmlContent = this.renderTemplate(
+      "firstListingCelebrationToOwner",
+      variables
+    );
+
+    const subject = `🎉 Congratulations! Your first item is live on RentAll`;
+
+    return await this.sendEmail(owner.email, subject, htmlContent);
+  }
+
+  async sendRentalApprovalConfirmationEmail(rental) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+
+    // Fetch owner details
+    const owner = await User.findByPk(rental.ownerId, {
+      attributes: ["email", "firstName", "lastName", "stripeConnectedAccountId"],
+    });
+
+    // Fetch renter details
+    const renter = await User.findByPk(rental.renterId, {
+      attributes: ["firstName", "lastName"],
+    });
+
+    if (!owner || !renter) {
+      console.error(
+        "Owner or renter not found for rental approval confirmation email"
+      );
+      return { success: false, error: "User not found" };
+    }
+
+    // Determine if Stripe setup is needed
+    const hasStripeAccount = !!owner.stripeConnectedAccountId;
+    const totalAmount = parseFloat(rental.totalAmount) || 0;
+    const payoutAmount = parseFloat(rental.payoutAmount) || 0;
+    const platformFee = parseFloat(rental.platformFee) || 0;
+
+    // Build payment message
+    const isPaidRental = totalAmount > 0;
+    let paymentMessage = "";
+    if (isPaidRental) {
+      paymentMessage = "their payment has been processed successfully.";
+    } else {
+      paymentMessage = "this is a free rental (no payment required).";
+    }
+
+    // Build earnings section (only for paid rentals)
+    let earningsSection = "";
+    if (isPaidRental) {
+      earningsSection = `
+            <h2>Your Earnings</h2>
+            <table class="info-table">
+                <tr>
+                    <th>Total Rental Amount</th>
+                    <td>\$${totalAmount.toFixed(2)}</td>
+                </tr>
+                <tr>
+                    <th>Platform Fee (20%)</th>
+                    <td>-\$${platformFee.toFixed(2)}</td>
+                </tr>
+                <tr>
+                    <th>Your Payout</th>
+                    <td class="highlight">\$${payoutAmount.toFixed(2)}</td>
+                </tr>
+            </table>
+      `;
+    }
+
+    // Build conditional Stripe section based on Stripe status
+    let stripeSection = "";
+    if (!hasStripeAccount && isPaidRental) {
+      // Only show Stripe setup reminder for paid rentals
+      stripeSection = `
+            <div class="warning-box">
+                <p><strong>⚠️ Action Required: Set Up Your Earnings Account</strong></p>
+                <p>To receive your payout of <strong>\$${payoutAmount.toFixed(2)}</strong> when this rental completes, you need to set up your earnings account.</p>
+            </div>
+            <h2>Set Up Earnings to Get Paid</h2>
+            <div class="info-box">
+                <p><strong>Why set up now?</strong></p>
+                <ul>
+                    <li><strong>Automatic payouts</strong> when rentals complete</li>
+                    <li><strong>Secure transfers</strong> directly to your bank account</li>
+                    <li><strong>Track all earnings</strong> in one dashboard</li>
+                    <li><strong>Fast deposits</strong> (typically 2-3 business days)</li>
+                </ul>
+                <p>Setup only takes about 5 minutes and you only need to do it once.</p>
+            </div>
+            <p style="text-align: center;">
+                <a href="${frontendUrl}/earnings" class="button">Set Up Earnings Account Now</a>
+            </p>
+            <p style="text-align: center; font-size: 14px; color: #856404;">
+                <strong>Important:</strong> Without earnings setup, you won't receive payouts automatically when rentals complete.
+            </p>
+      `;
+    } else if (hasStripeAccount && isPaidRental) {
+      stripeSection = `
+            <div class="success-box">
+                <p><strong>✓ Earnings Account Active</strong></p>
+                <p>Your earnings account is set up. You'll automatically receive \$${payoutAmount.toFixed(2)} when this rental completes.</p>
+                <p><a href="${frontendUrl}/earnings" style="color: #155724; text-decoration: underline;">View your earnings dashboard →</a></p>
+            </div>
+      `;
+    }
+
+    // Format delivery method for display
+    const deliveryMethodDisplay = rental.deliveryMethod === "delivery" ? "Delivery" : "Pickup";
+
+    const variables = {
+      ownerName: owner.firstName || "there",
+      itemName: rental.item?.name || "your item",
+      renterName: `${renter.firstName} ${renter.lastName}`.trim() || "The renter",
+      startDate: rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      endDate: rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified",
+      deliveryMethod: deliveryMethodDisplay,
+      paymentMessage: paymentMessage,
+      earningsSection: earningsSection,
+      stripeSection: stripeSection,
+      rentalDetailsUrl: `${frontendUrl}/my-listings?rentalId=${rental.id}`,
+    };
+
+    const htmlContent = this.renderTemplate(
+      "rentalApprovalConfirmationToOwner",
+      variables
+    );
+
+    const subject = `Rental Approved - ${rental.item?.name || "Your Item"}`;
+
+    return await this.sendEmail(owner.email, subject, htmlContent);
+  }
+
+  async sendRentalCompletionEmails(rental) {
+    const frontendUrl = process.env.FRONTEND_URL || "http://localhost:3000";
+    const results = {
+      renterEmailSent: false,
+      ownerEmailSent: false,
+    };
+
+    try {
+      // Fetch owner details with Stripe info
+      const owner = await User.findByPk(rental.ownerId, {
+        attributes: ["email", "firstName", "lastName", "stripeConnectedAccountId"],
+      });
+
+      // Fetch renter details
+      const renter = await User.findByPk(rental.renterId, {
+        attributes: ["email", "firstName", "lastName"],
+      });
+
+      if (!owner || !renter) {
+        console.error(
+          "Owner or renter not found for rental completion emails"
+        );
+        return { success: false, error: "User not found" };
+      }
+
+      // Format dates
+      const startDate = rental.startDateTime
+        ? new Date(rental.startDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified";
+      const endDate = rental.endDateTime
+        ? new Date(rental.endDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : "Not specified";
+      const returnedDate = rental.actualReturnDateTime
+        ? new Date(rental.actualReturnDateTime).toLocaleString("en-US", {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })
+        : endDate;
+
+      // Check if renter has already submitted a review
+      const hasReviewed = !!rental.itemReviewSubmittedAt;
+
+      // Build review section for renter email
+      let reviewSection = "";
+      if (!hasReviewed) {
+        reviewSection = `
+            <h2>Share Your Experience</h2>
+            <div class="info-box">
+                <p><strong>Help the community by leaving a review!</strong></p>
+                <p>Your feedback helps other renters make informed decisions and supports quality listings on RentAll.</p>
+                <ul>
+                    <li>How was the item's condition?</li>
+                    <li>Was the owner responsive and helpful?</li>
+                    <li>Would you rent this item again?</li>
+                </ul>
+            </div>
+            <p style="text-align: center;">
+                <a href="${frontendUrl}/my-rentals?rentalId=${rental.id}&action=review" class="button">Leave a Review</a>
+            </p>
+        `;
+      } else {
+        reviewSection = `
+            <div class="success-box">
+                <p><strong>✓ Thank You for Your Review!</strong></p>
+                <p>Your feedback has been submitted and helps strengthen the RentAll community.</p>
+            </div>
+        `;
+      }
+
+      // Send email to renter
+      try {
+        const renterVariables = {
+          renterName: renter.firstName || "there",
+          itemName: rental.item?.name || "the item",
+          ownerName: owner.firstName || "the owner",
+          startDate: startDate,
+          endDate: endDate,
+          returnedDate: returnedDate,
+          reviewSection: reviewSection,
+          browseItemsUrl: `${frontendUrl}/`,
+        };
+
+        const renterHtmlContent = this.renderTemplate(
+          "rentalCompletionThankYouToRenter",
+          renterVariables
+        );
+
+        const renterResult = await this.sendEmail(
+          renter.email,
+          `Thank You for Returning "${rental.item?.name || "Item"}" On Time!`,
+          renterHtmlContent
+        );
+
+        if (renterResult.success) {
+          console.log(
+            `Rental completion thank you email sent to renter: ${renter.email}`
+          );
+          results.renterEmailSent = true;
+        } else {
+          console.error(
+            `Failed to send rental completion email to renter (${renter.email}):`,
+            renterResult.error
+          );
+        }
+      } catch (emailError) {
+        console.error(
+          `Failed to send rental completion email to renter (${renter.email}):`,
+          emailError.message
+        );
+      }
+
+      // Prepare owner email
+      const hasStripeAccount = !!owner.stripeConnectedAccountId;
+      const totalAmount = parseFloat(rental.totalAmount) || 0;
+      const payoutAmount = parseFloat(rental.payoutAmount) || 0;
+      const platformFee = parseFloat(rental.platformFee) || 0;
+      const isPaidRental = totalAmount > 0;
+
+      // Build earnings section for owner (only for paid rentals)
+      let earningsSection = "";
+      if (isPaidRental) {
+        earningsSection = `
+            <h2>Your Earnings</h2>
+            <table class="info-table">
+                <tr>
+                    <th>Total Rental Amount</th>
+                    <td>\$${totalAmount.toFixed(2)}</td>
+                </tr>
+                <tr>
+                    <th>Platform Fee (20%)</th>
+                    <td>-\$${platformFee.toFixed(2)}</td>
+                </tr>
+                <tr>
+                    <th>Your Payout</th>
+                    <td class="highlight">\$${payoutAmount.toFixed(2)}</td>
+                </tr>
+            </table>
+            <p style="font-size: 14px; color: #6c757d;">
+                Your earnings will be automatically transferred to your account when the rental period ends and any dispute windows close.
+            </p>
+        `;
+      }
+
+      // Build Stripe section for owner
+      let stripeSection = "";
+      if (!hasStripeAccount && isPaidRental) {
+        // Show Stripe setup reminder for paid rentals
+        stripeSection = `
+            <div class="warning-box">
+                <p><strong>⚠️ Action Required: Set Up Your Earnings Account</strong></p>
+                <p>To receive your payout of <strong>\$${payoutAmount.toFixed(2)}</strong>, you need to set up your earnings account.</p>
+            </div>
+            <h2>Set Up Earnings to Get Paid</h2>
+            <div class="info-box">
+                <p><strong>Why set up now?</strong></p>
+                <ul>
+                    <li><strong>Automatic payouts</strong> when the rental period ends</li>
+                    <li><strong>Secure transfers</strong> directly to your bank account</li>
+                    <li><strong>Track all earnings</strong> in one dashboard</li>
+                    <li><strong>Fast deposits</strong> (typically 2-3 business days)</li>
+                </ul>
+                <p>Setup only takes about 5 minutes and you only need to do it once.</p>
+            </div>
+            <p style="text-align: center;">
+                <a href="${frontendUrl}/earnings" class="button">Set Up Earnings Account Now</a>
+            </p>
+            <p style="text-align: center; font-size: 14px; color: #856404;">
+                <strong>Important:</strong> Without earnings setup, you won't receive payouts automatically.
+            </p>
+        `;
+      } else if (hasStripeAccount && isPaidRental) {
+        stripeSection = `
+            <div class="success-box">
+                <p><strong>✓ Earnings Account Active</strong></p>
+                <p>Your earnings account is set up. You'll automatically receive \$${payoutAmount.toFixed(2)} when the rental period ends.</p>
+                <p><a href="${frontendUrl}/earnings" style="color: #155724; text-decoration: underline;">View your earnings dashboard →</a></p>
+            </div>
+        `;
+      }
+
+      // Send email to owner
+      try {
+        const ownerVariables = {
+          ownerName: owner.firstName || "there",
+          itemName: rental.item?.name || "your item",
+          renterName: `${renter.firstName} ${renter.lastName}`.trim() || "The renter",
+          startDate: startDate,
+          endDate: endDate,
+          returnedDate: returnedDate,
+          earningsSection: earningsSection,
+          stripeSection: stripeSection,
+          myListingsUrl: `${frontendUrl}/my-listings`,
+        };
+
+        const ownerHtmlContent = this.renderTemplate(
+          "rentalCompletionCongratsToOwner",
+          ownerVariables
+        );
+
+        const ownerResult = await this.sendEmail(
+          owner.email,
+          `Rental Complete - ${rental.item?.name || "Your Item"}`,
+          ownerHtmlContent
+        );
+
+        if (ownerResult.success) {
+          console.log(
+            `Rental completion congratulations email sent to owner: ${owner.email}`
+          );
+          results.ownerEmailSent = true;
+        } else {
+          console.error(
+            `Failed to send rental completion email to owner (${owner.email}):`,
+            ownerResult.error
+          );
+        }
+      } catch (emailError) {
+        console.error(
+          `Failed to send rental completion email to owner (${owner.email}):`,
+          emailError.message
+        );
+      }
+    } catch (error) {
+      console.error("Error sending rental completion emails:", error);
+    }
+
+    return results;
+  }
 }
 
 module.exports = new EmailService();

backend/services/stripeService.js

@@ -123,14 +123,48 @@ class StripeService {
         payment_method: paymentMethodId,
         customer: customerId, // Include customer ID
         confirm: true, // Automatically confirm the payment
+        off_session: true, // Indicate this is an off-session payment
         return_url: `${process.env.FRONTEND_URL || 'http://localhost:3000'}/payment-complete`,
         metadata,
+        expand: ['charges.data.payment_method_details'], // Expand to get payment method details
       });
 
+      // Extract payment method details from charges
+      const charge = paymentIntent.charges?.data?.[0];
+      const paymentMethodDetails = charge?.payment_method_details;
+
+      // Build payment method info object
+      let paymentMethod = null;
+      if (paymentMethodDetails) {
+        const type = paymentMethodDetails.type;
+        if (type === 'card') {
+          paymentMethod = {
+            type: 'card',
+            brand: paymentMethodDetails.card?.brand || 'card',
+            last4: paymentMethodDetails.card?.last4 || '****',
+          };
+        } else if (type === 'us_bank_account') {
+          paymentMethod = {
+            type: 'bank',
+            brand: 'bank_account',
+            last4: paymentMethodDetails.us_bank_account?.last4 || '****',
+          };
+        } else {
+          paymentMethod = {
+            type: type || 'unknown',
+            brand: type || 'payment',
+            last4: null,
+          };
+        }
+      }
+
       return {
         paymentIntentId: paymentIntent.id,
         status: paymentIntent.status,
         clientSecret: paymentIntent.client_secret,
+        paymentMethod: paymentMethod,
+        chargedAt: new Date(paymentIntent.created * 1000), // Convert Unix timestamp to Date
+        amountCharged: amount, // Original amount in dollars
       };
     } catch (error) {
       console.error("Error charging payment method:", error);
@@ -162,9 +196,6 @@ class StripeService {
         mode: 'setup',
         ui_mode: 'embedded',
         redirect_on_completion: 'never',
-        setup_intent_data: {
-          usage: 'off_session'
-        },
         metadata: {
           type: 'payment_method_setup',
           ...metadata

backend/templates/emails/firstListingCelebrationToOwner.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Your First Listing is Live!</title>
+    <style>
+        /* Reset styles */
+        body, table, td, p, a, li, blockquote {
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+        table, td {
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* Base styles */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100% !important;
+            min-width: 100%;
+            height: 100%;
+            background-color: #f8f9fa;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #212529;
+        }
+
+        /* Container */
+        .email-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Header - Celebration purple gradient */
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .logo {
+            font-size: 32px;
+            font-weight: 700;
+            color: #ffffff;
+            text-decoration: none;
+            letter-spacing: -1px;
+        }
+
+        .tagline {
+            color: #e9ecef;
+            font-size: 16px;
+            margin-top: 8px;
+            font-weight: 600;
+        }
+
+        /* Content */
+        .content {
+            padding: 40px 30px;
+        }
+
+        .content h1 {
+            font-size: 28px;
+            font-weight: 600;
+            margin: 0 0 20px 0;
+            color: #212529;
+        }
+
+        .content h2 {
+            font-size: 22px;
+            font-weight: 600;
+            margin: 30px 0 15px 0;
+            color: #495057;
+        }
+
+        .content p {
+            margin: 0 0 16px 0;
+            color: #6c757d;
+            line-height: 1.6;
+        }
+
+        .content strong {
+            color: #495057;
+        }
+
+        /* Celebration box */
+        .celebration-box {
+            background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+            border-left: 4px solid #667eea;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .celebration-box p {
+            margin: 0 0 8px 0;
+            color: #495057;
+        }
+
+        .celebration-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .celebration-icon {
+            font-size: 32px;
+            margin-bottom: 10px;
+        }
+
+        /* Button */
+        .button {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: #ffffff !important;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 6px;
+            font-weight: 600;
+            margin: 20px 0;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        /* Success box */
+        .success-box {
+            background-color: #d4edda;
+            border-left: 4px solid #28a745;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .success-box p {
+            margin: 0;
+            color: #155724;
+        }
+
+        /* Info box */
+        .info-box {
+            background-color: #e7f3ff;
+            border-left: 4px solid #667eea;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .info-box p {
+            margin: 0 0 10px 0;
+            color: #004085;
+        }
+
+        .info-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-box ul {
+            margin: 10px 0;
+            padding-left: 20px;
+            color: #004085;
+        }
+
+        .info-box li {
+            margin-bottom: 5px;
+        }
+
+        /* Item highlight */
+        .item-highlight {
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            padding: 20px;
+            margin: 20px 0;
+            text-align: center;
+        }
+
+        .item-highlight .item-name {
+            font-size: 20px;
+            font-weight: 600;
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #f8f9fa;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .footer p {
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        .footer a {
+            color: #667eea;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        /* Responsive */
+        @media only screen and (max-width: 600px) {
+            .email-container {
+                margin: 0;
+                border-radius: 0;
+            }
+
+            .header, .content, .footer {
+                padding: 20px;
+            }
+
+            .logo {
+                font-size: 28px;
+            }
+
+            .content h1 {
+                font-size: 24px;
+            }
+
+            .content h2 {
+                font-size: 20px;
+            }
+
+            .button {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            .item-highlight .item-name {
+                font-size: 18px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="email-container">
+        <div class="header">
+            <div class="logo">RentAll</div>
+            <div class="tagline">🎉 Your First Listing is Live!</div>
+        </div>
+
+        <div class="content">
+            <p>Hi {{ownerName}},</p>
+
+            <h1>Congratulations! You're Now a RentAll Host!</h1>
+
+            <p>Your first item is officially live and ready to be rented. This is an exciting milestone!</p>
+
+            <div class="item-highlight">
+                <div class="celebration-icon">🎊</div>
+                <div class="item-name">{{itemName}}</div>
+                <p style="color: #6c757d; margin-top: 10px;">
+                    <a href="{{viewItemUrl}}" class="button">View Your Listing</a>
+                </p>
+            </div>
+
+            <div class="celebration-box">
+                <p><strong>What happens next?</strong></p>
+                <ul style="margin: 10px 0; padding-left: 20px;">
+                    <li>Your listing is now searchable by renters</li>
+                    <li>You'll receive email notifications for rental requests</li>
+                    <li>You can approve or decline requests based on your availability</li>
+                    <li>Payments are processed securely through Stripe</li>
+                </ul>
+            </div>
+
+            <h2>Tips for Success</h2>
+            <ul>
+                <li><strong>Respond quickly:</strong> Fast responses lead to more bookings</li>
+                <li><strong>Keep photos updated:</strong> Great photos attract more renters</li>
+                <li><strong>Be clear about condition:</strong> Take photos at pickup and return</li>
+                <li><strong>Communicate well:</strong> Clear communication = happy renters</li>
+                <li><strong>Maintain availability:</strong> Keep your calendar up to date</li>
+            </ul>
+
+            <div class="success-box">
+                <p><strong>🌟 Pro Tip:</strong> Hosts who respond within 1 hour get 3x more bookings!</p>
+            </div>
+
+            <p>We're excited to have you as part of the RentAll community. If you have any questions, our support team is here to help.</p>
+
+            <p><strong>Happy hosting!</strong><br>
+            The RentAll Team</p>
+        </div>
+
+        <div class="footer">
+            <p><strong>RentAll</strong></p>
+            <p>Building a community of sharing and trust</p>
+            <p>This email was sent because you created your first listing on RentAll.</p>
+            <p>If you have any questions, please contact our support team.</p>
+            <p>&copy; 2024 RentAll. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

backend/templates/emails/rentalApprovalConfirmationToOwner.html

@@ -0,0 +1,357 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Rental Request Approved</title>
+    <style>
+        /* Reset styles */
+        body, table, td, p, a, li, blockquote {
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+        table, td {
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* Base styles */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100% !important;
+            min-width: 100%;
+            height: 100%;
+            background-color: #f8f9fa;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #212529;
+        }
+
+        /* Container */
+        .email-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .logo {
+            font-size: 32px;
+            font-weight: 700;
+            color: #ffffff;
+            text-decoration: none;
+            letter-spacing: -1px;
+        }
+
+        .tagline {
+            color: #d4edda;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+
+        /* Content */
+        .content {
+            padding: 40px 30px;
+        }
+
+        .content h1 {
+            font-size: 24px;
+            font-weight: 600;
+            margin: 0 0 20px 0;
+            color: #212529;
+        }
+
+        .content h2 {
+            font-size: 20px;
+            font-weight: 600;
+            margin: 30px 0 15px 0;
+            color: #495057;
+        }
+
+        .content p {
+            margin: 0 0 16px 0;
+            color: #6c757d;
+            line-height: 1.6;
+        }
+
+        .content strong {
+            color: #495057;
+        }
+
+        .content ul {
+            margin: 0 0 16px 0;
+            padding-left: 20px;
+            color: #6c757d;
+        }
+
+        .content li {
+            margin-bottom: 8px;
+        }
+
+        /* Button */
+        .button {
+            display: inline-block;
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: #ffffff !important;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 6px;
+            font-weight: 600;
+            margin: 20px 0;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
+        }
+
+        /* Success box */
+        .success-box {
+            background-color: #d4edda;
+            border-left: 4px solid #28a745;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .success-box p {
+            margin: 0;
+            color: #155724;
+        }
+
+        .success-box .icon {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        /* Info box */
+        .info-box {
+            background-color: #d1ecf1;
+            border-left: 4px solid #17a2b8;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .info-box p {
+            margin: 0 0 12px 0;
+            color: #0c5460;
+        }
+
+        .info-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-box strong {
+            color: #0c5460;
+        }
+
+        .info-box ul {
+            margin: 12px 0 0 0;
+            padding-left: 20px;
+            color: #0c5460;
+        }
+
+        .info-box li {
+            margin-bottom: 8px;
+        }
+
+        /* Warning box */
+        .warning-box {
+            background-color: #fff3cd;
+            border-left: 4px solid #ffc107;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .warning-box p {
+            margin: 0;
+            color: #856404;
+        }
+
+        .warning-box strong {
+            color: #856404;
+        }
+
+        /* Info table */
+        .info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+
+        .info-table th,
+        .info-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #dee2e6;
+        }
+
+        .info-table th {
+            background-color: #e9ecef;
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .info-table td {
+            color: #6c757d;
+        }
+
+        .info-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .info-table .highlight {
+            font-size: 18px;
+            font-weight: 700;
+            color: #28a745;
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #f8f9fa;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .footer p {
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        .footer a {
+            color: #667eea;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        /* Responsive */
+        @media only screen and (max-width: 600px) {
+            .email-container {
+                margin: 0;
+                border-radius: 0;
+            }
+
+            .header, .content, .footer {
+                padding: 20px;
+            }
+
+            .logo {
+                font-size: 28px;
+            }
+
+            .content h1 {
+                font-size: 22px;
+            }
+
+            .button {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            .info-table th,
+            .info-table td {
+                padding: 10px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="email-container">
+        <div class="header">
+            <div class="logo">RentAll</div>
+            <div class="tagline">Rental Request Approved</div>
+        </div>
+
+        <div class="content">
+            <p>Hi {{ownerName}},</p>
+
+            <h1>You've Approved the Rental Request!</h1>
+
+            <div class="success-box">
+                <div class="icon">✓</div>
+                <p><strong>Great news!</strong> You've successfully approved the rental request for <strong>{{itemName}}</strong>.</p>
+            </div>
+
+            <p>The renter has been notified and {{paymentMessage}}</p>
+
+            <h2>Rental Details</h2>
+            <table class="info-table">
+                <tr>
+                    <th>Item</th>
+                    <td>{{itemName}}</td>
+                </tr>
+                <tr>
+                    <th>Renter</th>
+                    <td>{{renterName}}</td>
+                </tr>
+                <tr>
+                    <th>Start Date</th>
+                    <td>{{startDate}}</td>
+                </tr>
+                <tr>
+                    <th>End Date</th>
+                    <td>{{endDate}}</td>
+                </tr>
+                <tr>
+                    <th>Delivery Method</th>
+                    <td>{{deliveryMethod}}</td>
+                </tr>
+            </table>
+
+            {{earningsSection}}
+
+            {{stripeSection}}
+
+            <h2>What's Next?</h2>
+            <ul>
+                <li><strong>Before pickup:</strong> Coordinate with the renter on exact pickup time and location</li>
+                <li><strong>Take photos:</strong> Document the item's condition before handoff</li>
+                <li><strong>Share instructions:</strong> Provide any care instructions or usage tips</li>
+                <li><strong>Stay in touch:</strong> Be available to answer questions during the rental</li>
+                <li><strong>At return:</strong> Inspect the item and confirm its condition</li>
+            </ul>
+
+            <p style="text-align: center;">
+                <a href="{{rentalDetailsUrl}}" class="button">View Rental Details</a>
+            </p>
+
+            <p>Thank you for being part of the RentAll community!</p>
+        </div>
+
+        <div class="footer">
+            <p><strong>RentAll</strong></p>
+            <p>This is a transactional email confirming your rental approval. You received this message because you approved a rental request on our platform.</p>
+            <p>If you have any questions, please contact our support team.</p>
+            <p>&copy; 2024 RentAll. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

backend/templates/emails/rentalCompletionCongratsToOwner.html

@@ -0,0 +1,372 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Rental Complete - Congratulations!</title>
+    <style>
+        /* Reset styles */
+        body, table, td, p, a, li, blockquote {
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+        table, td {
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* Base styles */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100% !important;
+            min-width: 100%;
+            height: 100%;
+            background-color: #f8f9fa;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #212529;
+        }
+
+        /* Container */
+        .email-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .logo {
+            font-size: 32px;
+            font-weight: 700;
+            color: #ffffff;
+            text-decoration: none;
+            letter-spacing: -1px;
+        }
+
+        .tagline {
+            color: #d4edda;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+
+        /* Content */
+        .content {
+            padding: 40px 30px;
+        }
+
+        .content h1 {
+            font-size: 24px;
+            font-weight: 600;
+            margin: 0 0 20px 0;
+            color: #212529;
+        }
+
+        .content h2 {
+            font-size: 20px;
+            font-weight: 600;
+            margin: 30px 0 15px 0;
+            color: #495057;
+        }
+
+        .content p {
+            margin: 0 0 16px 0;
+            color: #6c757d;
+            line-height: 1.6;
+        }
+
+        .content strong {
+            color: #495057;
+        }
+
+        .content ul {
+            margin: 0 0 16px 0;
+            padding-left: 20px;
+            color: #6c757d;
+        }
+
+        .content li {
+            margin-bottom: 8px;
+        }
+
+        /* Button */
+        .button {
+            display: inline-block;
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: #ffffff !important;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 6px;
+            font-weight: 600;
+            margin: 20px 0;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
+        }
+
+        /* Success box */
+        .success-box {
+            background-color: #d4edda;
+            border-left: 4px solid #28a745;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .success-box p {
+            margin: 0 0 12px 0;
+            color: #155724;
+        }
+
+        .success-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .success-box .icon {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        .success-box strong {
+            color: #155724;
+        }
+
+        .success-box a {
+            color: #155724;
+            text-decoration: underline;
+        }
+
+        /* Info box */
+        .info-box {
+            background-color: #d1ecf1;
+            border-left: 4px solid #17a2b8;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .info-box p {
+            margin: 0 0 12px 0;
+            color: #0c5460;
+        }
+
+        .info-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-box strong {
+            color: #0c5460;
+        }
+
+        .info-box ul {
+            margin: 12px 0 0 0;
+            padding-left: 20px;
+            color: #0c5460;
+        }
+
+        .info-box li {
+            margin-bottom: 8px;
+        }
+
+        /* Warning box */
+        .warning-box {
+            background-color: #fff3cd;
+            border-left: 4px solid #ffc107;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .warning-box p {
+            margin: 0 0 12px 0;
+            color: #856404;
+        }
+
+        .warning-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .warning-box strong {
+            color: #856404;
+        }
+
+        /* Info table */
+        .info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+
+        .info-table th,
+        .info-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #dee2e6;
+        }
+
+        .info-table th {
+            background-color: #e9ecef;
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .info-table td {
+            color: #6c757d;
+        }
+
+        .info-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        .info-table .highlight {
+            font-size: 18px;
+            font-weight: 700;
+            color: #28a745;
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #f8f9fa;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .footer p {
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        .footer a {
+            color: #667eea;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        /* Responsive */
+        @media only screen and (max-width: 600px) {
+            .email-container {
+                margin: 0;
+                border-radius: 0;
+            }
+
+            .header, .content, .footer {
+                padding: 20px;
+            }
+
+            .logo {
+                font-size: 28px;
+            }
+
+            .content h1 {
+                font-size: 22px;
+            }
+
+            .button {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            .info-table th,
+            .info-table td {
+                padding: 10px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="email-container">
+        <div class="header">
+            <div class="logo">RentAll</div>
+            <div class="tagline">Rental Complete</div>
+        </div>
+
+        <div class="content">
+            <p>Hi {{ownerName}},</p>
+
+            <h1>Congratulations on Completing a Rental!</h1>
+
+            <div class="success-box">
+                <div class="icon">✓</div>
+                <p><strong>Rental Complete:</strong> <strong>{{itemName}}</strong> has been successfully returned on time.</p>
+                <p>Great job maintaining your item and providing excellent service to the renter!</p>
+            </div>
+
+            <h2>Rental Summary</h2>
+            <table class="info-table">
+                <tr>
+                    <th>Item</th>
+                    <td>{{itemName}}</td>
+                </tr>
+                <tr>
+                    <th>Renter</th>
+                    <td>{{renterName}}</td>
+                </tr>
+                <tr>
+                    <th>Rental Period</th>
+                    <td>{{startDate}} to {{endDate}}</td>
+                </tr>
+                <tr>
+                    <th>Returned On</th>
+                    <td>{{returnedDate}}</td>
+                </tr>
+            </table>
+
+            {{earningsSection}}
+
+            {{stripeSection}}
+
+            <h2>Tips for Future Rentals</h2>
+            <ul>
+                <li><strong>Maintain your items:</strong> Keep them clean and in good condition</li>
+                <li><strong>Update availability:</strong> Keep your calendar current</li>
+                <li><strong>Respond quickly:</strong> Fast responses lead to more bookings</li>
+                <li><strong>Set competitive pricing:</strong> Browse similar items to optimize your rates</li>
+                <li><strong>Build your reputation:</strong> Consistent quality earns great reviews</li>
+            </ul>
+
+            <h2>List More Items</h2>
+            <p>Have more items sitting idle? Turn them into income! List camping gear, tools, party supplies, sports equipment, or anything else that others might need.</p>
+
+            <p style="text-align: center;">
+                <a href="{{myListingsUrl}}" class="button">View My Listings</a>
+            </p>
+
+            <p>Thank you for being an excellent host on RentAll!</p>
+        </div>
+
+        <div class="footer">
+            <p><strong>RentAll</strong></p>
+            <p>This email confirms the successful completion of your rental. You received this message because you marked an item as returned on our platform.</p>
+            <p>If you have any questions, please contact our support team.</p>
+            <p>&copy; 2024 RentAll. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

backend/templates/emails/rentalCompletionThankYouToRenter.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Thank You for Returning On Time!</title>
+    <style>
+        /* Reset styles */
+        body, table, td, p, a, li, blockquote {
+            -webkit-text-size-adjust: 100%;
+            -ms-text-size-adjust: 100%;
+        }
+        table, td {
+            mso-table-lspace: 0pt;
+            mso-table-rspace: 0pt;
+        }
+        img {
+            -ms-interpolation-mode: bicubic;
+        }
+
+        /* Base styles */
+        body {
+            margin: 0;
+            padding: 0;
+            width: 100% !important;
+            min-width: 100%;
+            height: 100%;
+            background-color: #f8f9fa;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #212529;
+        }
+
+        /* Container */
+        .email-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Header */
+        .header {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            padding: 40px 30px;
+            text-align: center;
+        }
+
+        .logo {
+            font-size: 32px;
+            font-weight: 700;
+            color: #ffffff;
+            text-decoration: none;
+            letter-spacing: -1px;
+        }
+
+        .tagline {
+            color: #d4edda;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+
+        /* Content */
+        .content {
+            padding: 40px 30px;
+        }
+
+        .content h1 {
+            font-size: 24px;
+            font-weight: 600;
+            margin: 0 0 20px 0;
+            color: #212529;
+        }
+
+        .content h2 {
+            font-size: 20px;
+            font-weight: 600;
+            margin: 30px 0 15px 0;
+            color: #495057;
+        }
+
+        .content p {
+            margin: 0 0 16px 0;
+            color: #6c757d;
+            line-height: 1.6;
+        }
+
+        .content strong {
+            color: #495057;
+        }
+
+        .content ul {
+            margin: 0 0 16px 0;
+            padding-left: 20px;
+            color: #6c757d;
+        }
+
+        .content li {
+            margin-bottom: 8px;
+        }
+
+        /* Button */
+        .button {
+            display: inline-block;
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+            color: #ffffff !important;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 6px;
+            font-weight: 600;
+            margin: 20px 0;
+            text-align: center;
+            transition: all 0.3s ease;
+        }
+
+        .button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
+        }
+
+        /* Success box */
+        .success-box {
+            background-color: #d4edda;
+            border-left: 4px solid #28a745;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .success-box p {
+            margin: 0 0 12px 0;
+            color: #155724;
+        }
+
+        .success-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .success-box .icon {
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+
+        /* Info box */
+        .info-box {
+            background-color: #d1ecf1;
+            border-left: 4px solid #17a2b8;
+            padding: 20px;
+            margin: 20px 0;
+            border-radius: 0 6px 6px 0;
+        }
+
+        .info-box p {
+            margin: 0 0 12px 0;
+            color: #0c5460;
+        }
+
+        .info-box p:last-child {
+            margin-bottom: 0;
+        }
+
+        .info-box strong {
+            color: #0c5460;
+        }
+
+        /* Info table */
+        .info-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background-color: #f8f9fa;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+
+        .info-table th,
+        .info-table td {
+            padding: 15px;
+            text-align: left;
+            border-bottom: 1px solid #dee2e6;
+        }
+
+        .info-table th {
+            background-color: #e9ecef;
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .info-table td {
+            color: #6c757d;
+        }
+
+        .info-table tr:last-child td {
+            border-bottom: none;
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #f8f9fa;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e9ecef;
+        }
+
+        .footer p {
+            margin: 0 0 10px 0;
+            font-size: 14px;
+            color: #6c757d;
+        }
+
+        .footer a {
+            color: #667eea;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+
+        /* Responsive */
+        @media only screen and (max-width: 600px) {
+            .email-container {
+                margin: 0;
+                border-radius: 0;
+            }
+
+            .header, .content, .footer {
+                padding: 20px;
+            }
+
+            .logo {
+                font-size: 28px;
+            }
+
+            .content h1 {
+                font-size: 22px;
+            }
+
+            .button {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+            }
+
+            .info-table th,
+            .info-table td {
+                padding: 10px;
+                font-size: 14px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="email-container">
+        <div class="header">
+            <div class="logo">RentAll</div>
+            <div class="tagline">Rental Complete</div>
+        </div>
+
+        <div class="content">
+            <p>Hi {{renterName}},</p>
+
+            <h1>Thank You for Returning On Time!</h1>
+
+            <div class="success-box">
+                <div class="icon">✓</div>
+                <p><strong>Rental Complete:</strong> You've successfully returned <strong>{{itemName}}</strong> on time.</p>
+                <p>On-time returns like yours help build trust in the RentAll community. Thank you!</p>
+            </div>
+
+            <h2>Rental Summary</h2>
+            <table class="info-table">
+                <tr>
+                    <th>Item</th>
+                    <td>{{itemName}}</td>
+                </tr>
+                <tr>
+                    <th>Owner</th>
+                    <td>{{ownerName}}</td>
+                </tr>
+                <tr>
+                    <th>Rental Period</th>
+                    <td>{{startDate}} to {{endDate}}</td>
+                </tr>
+                <tr>
+                    <th>Returned On</th>
+                    <td>{{returnedDate}}</td>
+                </tr>
+            </table>
+
+            {{reviewSection}}
+
+            <h2>Keep Renting!</h2>
+            <p>Explore thousands of items available for rent in your area. From tools to camping gear, party supplies to photography equipment - find what you need, when you need it.</p>
+
+            <p style="text-align: center;">
+                <a href="{{browseItemsUrl}}" class="button">Browse Available Items</a>
+            </p>
+
+            <p>Thank you for being a valued member of the RentAll community!</p>
+        </div>
+
+        <div class="footer">
+            <p><strong>RentAll</strong></p>
+            <p>This email confirms the successful completion of your rental. You received this message because you recently returned a rented item on our platform.</p>
+            <p>If you have any questions, please contact our support team.</p>
+            <p>&copy; 2024 RentAll. All rights reserved.</p>
+        </div>
+    </div>
+</body>
+</html>

backend/templates/emails/rentalConfirmationToUser.html

@@ -251,6 +251,8 @@
                 </tr>
             </table>
 
+            {{paymentSection}}
+
             <h2>What's next?</h2>
             <ul>
                 <li><strong>Before pickup:</strong> You'll receive a reminder to take condition photos</li>

frontend/src/services/placesService.ts

@@ -29,6 +29,8 @@ export interface AutocompletePrediction {
 
 class PlacesService {
   private sessionToken: string | null = null;
+  private debounceTimer: NodeJS.Timeout | null = null;
+  private abortController: AbortController | null = null;
 
   /**
    * Generate a new session token for cost optimization
@@ -41,7 +43,7 @@ class PlacesService {
   }
 
   /**
-   * Get autocomplete predictions for a query
+   * Get autocomplete predictions for a query (debounced)
    */
   async getAutocompletePredictions(
     input: string,
@@ -55,14 +57,54 @@ class PlacesService {
       return [];
     }
 
+    // Clear existing debounce timer
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+
+    // Cancel any pending request
+    if (this.abortController) {
+      this.abortController.abort();
+    }
+
+    // Return a promise that resolves after debounce delay
+    return new Promise((resolve, reject) => {
+      this.debounceTimer = setTimeout(async () => {
+        try {
+          const predictions = await this.makeAutocompleteRequest(
+            input.trim(),
+            options
+          );
+          resolve(predictions);
+        } catch (error) {
+          reject(error);
+        }
+      }, 300); // 300ms debounce delay
+    });
+  }
+
+  /**
+   * Make the actual autocomplete API request
+   */
+  private async makeAutocompleteRequest(
+    input: string,
+    options?: {
+      types?: string[];
+      componentRestrictions?: { country: string };
+      bounds?: any;
+    }
+  ): Promise<AutocompletePrediction[]> {
     // Generate new session token if not exists
     if (!this.sessionToken) {
       this.sessionToken = this.generateSessionToken();
     }
 
+    // Create new abort controller for this request
+    this.abortController = new AbortController();
+
     try {
       const response = await mapsAPI.placesAutocomplete({
-        input: input.trim(),
+        input: input,
         types: options?.types || ["address"],
         componentRestrictions: options?.componentRestrictions,
         sessionToken: this.sessionToken || undefined,
@@ -77,6 +119,11 @@ class PlacesService {
 
       return [];
     } catch (error: any) {
+      // Don't throw error if request was aborted (user is still typing)
+      if (error.name === "AbortError" || error.code === "ERR_CANCELED") {
+        return [];
+      }
+
       console.error("Error fetching place predictions:", error.message);
       if (error.response?.status === 429) {
         throw new Error("Too many requests. Please slow down.");