Text changes with earnings

backend/services/email/domain/RentalFlowEmailService.js

@@ -67,7 +67,8 @@ class RentalFlowEmailService {
 
       const variables = {
         ownerName: owner.firstName,
-        renterName: `${renter.firstName} ${renter.lastName}`.trim() || "A renter",
+        renterName:
+          `${renter.firstName} ${renter.lastName}`.trim() || "A renter",
         itemName: rental.item?.name || "your item",
         startDate: rental.startDateTime
           ? new Date(rental.startDateTime).toLocaleString("en-US", {
@@ -227,15 +228,15 @@ class RentalFlowEmailService {
             <table class="info-table">
                 <tr>
                     <th>Total Rental Amount</th>
-                    <td>\\$${totalAmount.toFixed(2)}</td>
+                    <td>$${totalAmount.toFixed(2)}</td>
                 </tr>
                 <tr>
                     <th>Community Upkeep Fee (10%)</th>
-                    <td>-\\$${platformFee.toFixed(2)}</td>
+                    <td>-$${platformFee.toFixed(2)}</td>
                 </tr>
                 <tr>
                     <th>Your Payout</th>
-                    <td class="highlight">\\$${payoutAmount.toFixed(2)}</td>
+                    <td class="highlight">$${payoutAmount.toFixed(2)}</td>
                 </tr>
             </table>
       `;
@@ -248,7 +249,7 @@ class RentalFlowEmailService {
         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(
+                <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>
@@ -274,7 +275,7 @@ class RentalFlowEmailService {
         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(
+                <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>
@@ -323,7 +324,10 @@ class RentalFlowEmailService {
         htmlContent
       );
     } catch (error) {
-      console.error("Failed to send rental approval confirmation email:", error);
+      console.error(
+        "Failed to send rental approval confirmation email:",
+        error
+      );
       return { success: false, error: error.message };
     }
   }
@@ -1002,7 +1006,7 @@ class RentalFlowEmailService {
           error: emailError.message,
           stack: emailError.stack,
           renterEmail: renter.email,
-          rentalId: rental.id
+          rentalId: rental.id,
         });
       }
 
@@ -1021,15 +1025,15 @@ class RentalFlowEmailService {
             <table class="info-table">
                 <tr>
                     <th>Total Rental Amount</th>
-                    <td>\\$${totalAmount.toFixed(2)}</td>
+                    <td>$${totalAmount.toFixed(2)}</td>
                 </tr>
                 <tr>
                     <th>Community Upkeep Fee (10%)</th>
-                    <td>-\\$${platformFee.toFixed(2)}</td>
+                    <td>-$${platformFee.toFixed(2)}</td>
                 </tr>
                 <tr>
                     <th>Your Payout</th>
-                    <td class="highlight">\\$${payoutAmount.toFixed(2)}</td>
+                    <td class="highlight">$${payoutAmount.toFixed(2)}</td>
                 </tr>
             </table>
             <p style="font-size: 14px; color: #6c757d;">
@@ -1045,7 +1049,7 @@ class RentalFlowEmailService {
         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(
+                <p>To receive your payout of <strong>$${payoutAmount.toFixed(
                   2
                 )}</strong>, you need to set up your earnings account.</p>
             </div>
@@ -1071,7 +1075,7 @@ class RentalFlowEmailService {
         stripeSection = `
             <div class="success-box">
                 <p><strong>✓ Payout Initiated</strong></p>
-                <p>Your earnings of <strong>\\$${payoutAmount.toFixed(
+                <p>Your earnings of <strong>$${payoutAmount.toFixed(
                   2
                 )}</strong> have been transferred to your Stripe account.</p>
                 <p style="font-size: 14px; margin-top: 10px;">Funds typically reach your bank within 2-7 business days.</p>
@@ -1122,14 +1126,14 @@ class RentalFlowEmailService {
           error: emailError.message,
           stack: emailError.stack,
           ownerEmail: owner.email,
-          rentalId: rental.id
+          rentalId: rental.id,
         });
       }
     } catch (error) {
       logger.error("Error sending rental completion emails", {
         error: error.message,
         stack: error.stack,
-        rentalId: rental?.id
+        rentalId: rental?.id,
       });
     }
 

frontend/src/components/StripeConnectOnboarding.tsx

@@ -46,7 +46,8 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
             colorBackground: "#ffffff",
             colorText: "#212529",
             colorDanger: "#dc3545",
-            fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+            fontFamily:
+              "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
             fontSizeBase: "20px",
             borderRadius: "8px",
             spacingUnit: "4px",
@@ -120,11 +121,17 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
       tabIndex={-1}
     >
-      <div className={`modal-dialog ${step === "onboarding" ? "modal-xl" : "modal-lg"}`}>
+      <div
+        className={`modal-dialog ${
+          step === "onboarding" ? "modal-xl" : "modal-lg"
+        }`}
+      >
         <div className="modal-content">
           <div className="modal-header">
             <h5 className="modal-title">
-              {step === "onboarding" ? "Complete Your Earnings Setup" : "Set Up Earnings"}
+              {step === "onboarding"
+                ? "Complete Your Earnings Setup"
+                : "Start Receiving Earnings"}
             </h5>
             <button
               type="button"
@@ -136,21 +143,17 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
           <div className="modal-body">
             {step === "start" && (
               <>
-                <div className="text-center mb-4">
-                  <div className="text-primary mb-3">
-                    <i
-                      className="bi bi-cash-coin"
-                      style={{ fontSize: "3rem" }}
-                    ></i>
-                  </div>
-                  <h4>Start Receiving Earnings</h4>
-                  <p className="text-muted">
-                    Set up your earnings account to automatically receive
-                    payments
-                  </p>
-                </div>
-
                 <div className="row text-center mb-4">
+                  <div className="col-md-4">
+                    <div className="mb-3">
+                      <i
+                        className="bi bi-lightning text-primary"
+                        style={{ fontSize: "2rem" }}
+                      ></i>
+                    </div>
+                    <h6>Quick Setup</h6>
+                    <small className="text-muted">Takes about 5 minutes</small>
+                  </div>
                   <div className="col-md-4">
                     <div className="mb-3">
                       <i
@@ -160,19 +163,7 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
                     </div>
                     <h6>Secure</h6>
                     <small className="text-muted">
-                      Powered by Stripe, trusted by millions
+                      Powered by Stripe and trusted by millions
-                    </small>
-                  </div>
-                  <div className="col-md-4">
-                    <div className="mb-3">
-                      <i
-                        className="bi bi-clock text-primary"
-                        style={{ fontSize: "2rem" }}
-                      ></i>
-                    </div>
-                    <h6>Instant Payouts</h6>
-                    <small className="text-muted">
-                      Transferred when rentals complete
                     </small>
                   </div>
                   <div className="col-md-4">
@@ -196,8 +187,6 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
                   <ul className="mb-0">
                     <li>Verify your identity securely</li>
                     <li>Provide bank account details for deposits</li>
-                    <li>The setup process takes about 5 minutes</li>
-                    <li>Receive payouts instantly when rentals complete</li>
                   </ul>
                 </div>
 
@@ -225,17 +214,20 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
               <>
                 {!stripeConnectInstance ? (
                   <div className="text-center py-5">
-                    <div className="spinner-border text-primary mb-3" role="status">
+                    <div
+                      className="spinner-border text-primary mb-3"
+                      role="status"
+                    >
                       <span className="visually-hidden">Loading...</span>
                     </div>
                     <h5>Loading onboarding form...</h5>
                   </div>
                 ) : (
                   <div style={{ minHeight: "500px" }}>
-                    <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
+                    <ConnectComponentsProvider
-                      <ConnectAccountOnboarding
+                      connectInstance={stripeConnectInstance}
-                        onExit={handleOnboardingExit}
+                    >
-                      />
+                      <ConnectAccountOnboarding onExit={handleOnboardingExit} />
                     </ConnectComponentsProvider>
                   </div>
                 )}
@@ -278,7 +270,8 @@ const StripeConnectOnboarding: React.FC<StripeConnectOnboardingProps> = ({
             {step === "onboarding" && stripeConnectInstance && (
               <div className="w-100">
                 <small className="text-muted">
-                  <i className="bi bi-lock"></i> Your information is securely processed by Stripe
+                  <i className="bi bi-lock"></i> Your information is securely
+                  processed by Stripe
                 </small>
               </div>
             )}

frontend/src/pages/EarningsDashboard.tsx

@@ -130,10 +130,9 @@ const EarningsDashboard: React.FC = () => {
     <div className="container mt-4">
       <div className="row">
         <div className="col-12">
-          <h1>My Earnings</h1>
+          <h1>Earnings</h1>
           <p className="text-muted">
-            Manage your rental earnings and payment setup. Community Rentals
+            Manage your rental earnings and payment setup.{" "}
-            charges a 10% Community Upkeep Fee to help keep us running.{" "}
             <Link to="/faq" target="_blank">
               Calculate what you can earn here
             </Link>{" "}