Text changes with earnings

2026-01-07 22:37:41 -05:00
parent 550de32a41
commit 8b9b92d848
3 changed files with 52 additions and 56 deletions
--- a/backend/services/email/domain/RentalFlowEmailService.js
+++ b/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,
      });
    }

--- a/frontend/src/components/StripeConnectOnboarding.tsx
+++ b/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">
+                <div className="row text-center mb-4">
+                  <div className="col-md-4">
+                    <div className="mb-3">
                      <i
-                      className="bi bi-cash-coin"
-                      style={{ fontSize: "3rem" }}
+                        className="bi bi-lightning text-primary"
+                        style={{ fontSize: "2rem" }}
                      ></i>
                    </div>
-                  <h4>Start Receiving Earnings</h4>
-                  <p className="text-muted">
-                    Set up your earnings account to automatically receive
-                    payments
-                  </p>
+                    <h6>Quick Setup</h6>
+                    <small className="text-muted">Takes about 5 minutes</small>
                  </div>
-
-                <div className="row text-center mb-4">
                  <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
-                    </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
+                      Powered by Stripe and trusted by millions
                    </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}>
-                      <ConnectAccountOnboarding
-                        onExit={handleOnboardingExit}
-                      />
+                    <ConnectComponentsProvider
+                      connectInstance={stripeConnectInstance}
+                    >
+                      <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>
            )}
--- a/frontend/src/pages/EarningsDashboard.tsx
+++ b/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
-            charges a 10% Community Upkeep Fee to help keep us running.{" "}
+            Manage your rental earnings and payment setup.{" "}
            <Link to="/faq" target="_blank">
              Calculate what you can earn here
            </Link>{" "}