10% community upkeep fee with explanations throughout

backend/services/emailService.js

@@ -362,7 +362,7 @@ class EmailService {
         <p><strong>Transfer ID:</strong> {{stripeTransferId}}</p>
         <h3>Earnings Breakdown</h3>
         <p><strong>Rental Amount:</strong> \${{totalAmount}}</p>
-        <p><strong>Platform Fee (20%):</strong> -\${{platformFee}}</p>
+        <p><strong>Community Upkeep Fee (10%):</strong> -\${{platformFee}}</p>
         <p style="font-size: 18px; color: #28a745;"><strong>Your Earnings:</strong> \${{payoutAmount}}</p>
         <p>Funds are typically available in your bank account within 2-3 business days.</p>
         <p><a href="{{earningsDashboardUrl}}" class="button">View Earnings Dashboard</a></p>
@@ -1468,7 +1468,7 @@ class EmailService {
                     <td>\$${totalAmount.toFixed(2)}</td>
                 </tr>
                 <tr>
-                    <th>Platform Fee (20%)</th>
+                    <th>Community Upkeep Fee (10%)</th>
                     <td>-\$${platformFee.toFixed(2)}</td>
                 </tr>
                 <tr>
@@ -1687,7 +1687,7 @@ class EmailService {
                     <td>\$${totalAmount.toFixed(2)}</td>
                 </tr>
                 <tr>
-                    <th>Platform Fee (20%)</th>
+                    <th>Community Upkeep Fee (10%)</th>
                     <td>-\$${platformFee.toFixed(2)}</td>
                 </tr>
                 <tr>

backend/templates/emails/payoutReceivedToOwner.html

@@ -372,7 +372,7 @@
             <td class="breakdown-amount">${{totalAmount}}</td>
           </tr>
           <tr>
-            <td class="breakdown-label">Platform Fee (20%)</td>
+            <td class="breakdown-label">Community Upkeep Fee (10%)</td>
             <td class="breakdown-amount">-${{platformFee}}</td>
           </tr>
           <tr class="breakdown-earnings">

backend/utils/feeCalculator.js

@@ -1,6 +1,6 @@
 class FeeCalculator {
   static calculateRentalFees(totalAmount) {
-    const platformFeeRate = 0.2;
+    const platformFeeRate = 0.1;
 
     const platformFee = totalAmount * platformFeeRate;
 
@@ -15,7 +15,7 @@ class FeeCalculator {
   static formatFeesForDisplay(fees) {
     return {
       totalAmount: `$${fees.totalAmount.toFixed(2)}`,
-      platformFee: `$${fees.platformFee.toFixed(2)} (20%)`,
+      platformFee: `$${fees.platformFee.toFixed(2)} (10%)`,
       totalCharge: `$${fees.totalChargedAmount.toFixed(2)}`,
       ownerPayout: `$${fees.payoutAmount.toFixed(2)}`,
     };

frontend/src/App.tsx

@@ -26,6 +26,7 @@ import ItemRequestDetail from './pages/ItemRequestDetail';
 import CreateItemRequest from './pages/CreateItemRequest';
 import MyRequests from './pages/MyRequests';
 import EarningsDashboard from './pages/EarningsDashboard';
+import FAQ from './pages/FAQ';
 import PrivateRoute from './components/PrivateRoute';
 import axios from 'axios';
 import './App.css';
@@ -182,6 +183,7 @@ const AppContent: React.FC = () => {
               </PrivateRoute>
             }
           />
+          <Route path="/faq" element={<FAQ />} />
             </Routes>
           </main>
           <Footer />

frontend/src/components/Footer.tsx

@@ -28,6 +28,10 @@ const Footer: React.FC = () => {
               About
             </Link>
             <span className="text-white-50">•</span>
+            <Link to="/faq" className="text-decoration-none text-white-50 mx-2">
+              FAQ
+            </Link>
+            <span className="text-white-50">•</span>
             <Link to="/contact" className="text-decoration-none text-white-50 mx-2">
               Contact
             </Link>

frontend/src/components/PricingForm.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 interface PricingFormProps {
   pricePerHour: number | string;
@@ -62,9 +63,19 @@ const PricingForm: React.FC<PricingFormProps> = ({
       <div className="card-body">
         <h5 className="card-title">Pricing</h5>
         <p className="text-muted small mb-3">
-          {showAdvancedPricing
+          {showAdvancedPricing ? (
-            ? "Set multiple pricing tiers for flexible rental rates."
+            "Set multiple pricing tiers for flexible rental rates."
-            : "Set your primary pricing rate, or use Advanced Pricing for multiple tiers."}
+          ) : (
+            <>
+              Set your pricing rate. You can use Advanced Pricing for multiple
+              pricing tiers. Community Rentals charges a 10% Community Upkeep
+              Fee to help keep us running.{" "}
+              <Link to="/faq" target="_blank">
+                Calculate what you can earn here.
+              </Link>
+              .
+            </>
+          )}
         </p>
 
         {/* Pricing Unit Dropdown - Only show when advanced pricing is OFF */}
@@ -125,7 +136,8 @@ const PricingForm: React.FC<PricingFormProps> = ({
         {showAdvancedPricing && (
           <div className="border rounded p-3 mb-3 bg-light">
             <p className="text-muted small mb-3">
-              Set multiple pricing tiers. Check the boxes for the tiers you want to use.
+              Set multiple pricing tiers. Check the boxes for the tiers you want
+              to use.
             </p>
             {advancedPricingOptions.map(([key, { field, label, value }]) => (
               <div className="mb-3" key={key}>

frontend/src/pages/EarningsDashboard.tsx

@@ -106,7 +106,12 @@ const EarningsDashboard: React.FC = () => {
         <div className="col-12">
           <h1>My Earnings</h1>
           <p className="text-muted">
-            Manage your rental earnings and payment setup
+            Manage your rental earnings and payment setup. Community Rentals
+            charges a 10% Community Upkeep Fee to help keep us running.{" "}
+            <Link to="/faq" target="_blank">
+              Calculate what you can earn here.
+            </Link>
+            .
           </p>
         </div>
       </div>
@@ -266,8 +271,8 @@ const EarningsDashboard: React.FC = () => {
                 </strong>
               </div>
               <div className="d-flex justify-content-between">
-                <span>Platform Fee:</span>
+                <span>Community Upkeep Fee:</span>
-                <strong>20%</strong>
+                <strong>10%</strong>
               </div>
             </div>
           </div>

frontend/src/pages/FAQ.tsx

@@ -0,0 +1,384 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+
+interface FAQItem {
+  question: string;
+  answer: string | React.ReactNode;
+}
+
+interface FAQSection {
+  title: string;
+  items: FAQItem[];
+}
+
+const FAQ: React.FC = () => {
+  const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({
+    earnings: true, // Open earnings section by default
+  });
+  const [openQuestions, setOpenQuestions] = useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const toggleSection = (sectionId: string) => {
+    setOpenSections((prev) => ({ ...prev, [sectionId]: !prev[sectionId] }));
+  };
+
+  const toggleQuestion = (questionId: string) => {
+    setOpenQuestions((prev) => ({ ...prev, [questionId]: !prev[questionId] }));
+  };
+
+  const faqSections: { id: string; section: FAQSection }[] = [
+    {
+      id: "earnings",
+      section: {
+        title: "Earnings & Fees",
+        items: [
+          {
+            question: "How much does it cost to list items on the platform?",
+            answer:
+              "Listing items is completely free! We only charge a Community Upkeep Fee when your item is successfully rented.",
+          },
+          {
+            question: "What is the Community Upkeep Fee?",
+            answer: (
+              <div>
+                <p>
+                  We charge a <strong>10% Community Upkeep Fee</strong> on
+                  rental amounts to keep Community Rentals running!
+                </p>
+                <p className="mb-2">This fee covers:</p>
+                <ul className="mb-3">
+                  <li>Platform maintenance and improvements</li>
+                  <li>Customer support for renters and owners</li>
+                  <li>Secure payment processing</li>
+                  <li>Trust and safety features</li>
+                </ul>
+                <div className="bg-light rounded p-3 mb-3">
+                  <h6 className="text-primary mb-2">Example Calculation</h6>
+                  <div className="d-flex justify-content-between mb-1">
+                    <span>Rental amount:</span>
+                    <span className="fw-bold">$100.00</span>
+                  </div>
+                  <div className="d-flex justify-content-between mb-1">
+                    <span>Community Upkeep Fee (10%):</span>
+                    <span className="text-danger">-$10.00</span>
+                  </div>
+                  <hr className="my-2" />
+                  <div className="d-flex justify-content-between">
+                    <span className="fw-bold">You earn:</span>
+                    <span className="fw-bold text-success">$90.00</span>
+                  </div>
+                </div>
+                <p className="small text-muted">
+                  <strong>Payout Timeline:</strong> Earnings are processed within 2 business
+                  days after the rental is completed. Make sure your Stripe account is set
+                  up to receive payouts.
+                </p>
+              </div>
+            ),
+          },
+          {
+            question: "When will I receive my earnings?",
+            answer:
+              "Earnings are typically processed within 2 business days after a rental is completed. The exact timing depends on your Stripe account settings and your bank's processing times.",
+          },
+          {
+            question: "How do I set up my account to receive payments?",
+            answer: (
+              <div>
+                <p>
+                  To receive payments, you need to connect a Stripe account:
+                </p>
+                <ol>
+                  <li>
+                    Go to your <Link to="/earnings">Earnings Dashboard</Link>
+                  </li>
+                  <li>
+                    Click on "Set Up Earnings" or "Connect Stripe Account"
+                  </li>
+                  <li>Follow the Stripe onboarding process</li>
+                  <li>
+                    Provide your bank account details and required information
+                  </li>
+                </ol>
+                <p>
+                  Once your Stripe account is verified, you'll automatically
+                  receive payouts for completed rentals.
+                </p>
+              </div>
+            ),
+          },
+          {
+            question: "Can I see a breakdown of my earnings?",
+            answer: (
+              <div>
+                Yes! Visit your <Link to="/earnings">Earnings Dashboard</Link>{" "}
+                to see:
+                <ul>
+                  <li>Total earnings across all rentals</li>
+                  <li>
+                    Pending earnings (rentals completed but not yet paid out)
+                  </li>
+                  <li>
+                    Completed payouts (money already sent to your account)
+                  </li>
+                  <li>Detailed earnings history for each rental</li>
+                </ul>
+              </div>
+            ),
+          },
+        ],
+      },
+    },
+    {
+      id: "renting",
+      section: {
+        title: "For Renters",
+        items: [
+          {
+            question: "How do I rent an item?",
+            answer: (
+              <div>
+                <ol>
+                  <li>
+                    Browse available items on the{" "}
+                    <Link to="/items">Items page</Link>
+                  </li>
+                  <li>Click on an item to view details</li>
+                  <li>Select your desired rental dates and times</li>
+                  <li>Choose pickup or in-place use (if available)</li>
+                  <li>Review the cost and submit your rental request</li>
+                  <li>Wait for the owner to accept your request</li>
+                  <li>Once accepted, you'll receive a confirmation email</li>
+                </ol>
+              </div>
+            ),
+          },
+          {
+            question: "What payment methods are accepted?",
+            answer:
+              "We accept all major credit and debit cards through our secure payment processor, Stripe. Payment is processed when the owner accepts your rental request.",
+          },
+          {
+            question: "Can I cancel a rental?",
+            answer:
+              "You can request to cancel a rental by contacting the item owner through the messaging system. Cancellation policies and refunds are determined by the owner.",
+          },
+          {
+            question: "What if an item is damaged during my rental?",
+            answer:
+              "If an item is damaged during your rental period, you may be responsible for repair or replacement costs up to the replacement value listed on the item. We recommend taking photos before and after use and communicating any issues immediately with the owner.",
+          },
+          {
+            question: "How do I contact the item owner?",
+            answer: (
+              <div>
+                You can message the item owner through our{" "}
+                <Link to="/messages">messaging system</Link>. Once you've
+                submitted a rental request or are actively renting an item,
+                you'll have access to direct messaging with the owner.
+              </div>
+            ),
+          },
+        ],
+      },
+    },
+    {
+      id: "listing",
+      section: {
+        title: "For Owners",
+        items: [
+          {
+            question: "What items can I list for rent?",
+            answer:
+              "You can list most items including tools, equipment, recreational gear, electronics, and more. Items must be in good working condition and safe to use. Prohibited items include weapons, hazardous materials, and illegal items.",
+          },
+          {
+            question: "How do I create a listing?",
+            answer: (
+              <div>
+                <ol>
+                  <li>
+                    Click <Link to="/create-item">"List an Item"</Link> in the
+                    navigation
+                  </li>
+                  <li>Upload photos of your item (up to 5 images)</li>
+                  <li>Provide a clear title and detailed description</li>
+                  <li>Set your location and delivery options</li>
+                  <li>Define your availability hours</li>
+                  <li>Set your pricing (hourly, daily, weekly, or monthly)</li>
+                  <li>Add any rules or requirements</li>
+                  <li>Submit your listing for review</li>
+                </ol>
+              </div>
+            ),
+          },
+          {
+            question: "How do I set my pricing?",
+            answer:
+              "When creating or editing a listing, you can set prices for different time periods (hour, day, week, or month). The platform will show you exactly how much you'll earn after the 10% Community Upkeep Fee. You can also use Advanced Pricing to offer multiple pricing tiers.",
+          },
+          {
+            question: "Can I edit my listing after it's published?",
+            answer: (
+              <div>
+                Yes! Go to <Link to="/owning">My Listings</Link>, find your
+                item, and click "Edit" to update details, pricing, availability,
+                or photos at any time.
+              </div>
+            ),
+          },
+          {
+            question: "How do I manage rental requests?",
+            answer: (
+              <div>
+                Visit your <Link to="/owning">My Listings</Link> page to see
+                pending rental requests. You can accept or decline requests
+                based on your availability and preferences.
+              </div>
+            ),
+          },
+        ],
+      },
+    },
+    {
+      id: "account",
+      section: {
+        title: "Account & Settings",
+        items: [
+          {
+            question: "How do I create an account?",
+            answer:
+              'Click "Sign Up" in the top navigation and create an account using your email address or Google account. You\'ll need to verify your email address to complete registration.',
+          },
+          {
+            question: "How do I update my profile?",
+            answer: (
+              <div>
+                Go to your <Link to="/profile">Profile page</Link> to update
+                your name, email, phone number, profile picture, and bio.
+              </div>
+            ),
+          },
+          {
+            question: "Is my personal information secure?",
+            answer:
+              "Yes, we take security seriously. All payment processing is handled by Stripe, a PCI-compliant payment processor. Your financial information is encrypted and never stored on our servers.",
+          },
+          {
+            question: "How do I delete my account?",
+            answer:
+              "To delete your account, please contact our support team. Note that you must complete or cancel all active rentals before account deletion.",
+          },
+        ],
+      },
+    },
+    {
+      id: "safety",
+      section: {
+        title: "Safety & Trust",
+        items: [
+          {
+            question: "How does the platform ensure safety?",
+            answer: (
+              <div>
+                We maintain safety through:
+                <ul>
+                  <li>User verification and profile reviews</li>
+                  <li>Secure payment processing through Stripe</li>
+                  <li>Direct messaging for clear communication</li>
+                  <li>Replacement cost protection for owners</li>
+                  <li>Community guidelines and terms of service</li>
+                </ul>
+              </div>
+            ),
+          },
+          {
+            question: "What if I have a dispute with another user?",
+            answer:
+              "We encourage users to communicate directly to resolve issues. If you cannot reach a resolution, please contact our support team with details about the dispute.",
+          },
+          {
+            question: "Are items insured?",
+            answer:
+              "The platform does not provide insurance. Owners should consider their own insurance coverage for their items. Renters may be liable for damage up to the replacement cost listed on the item.",
+          },
+        ],
+      },
+    },
+  ];
+
+  return (
+    <div className="container mt-4 mb-5">
+      <div className="row justify-content-center">
+        <div className="col-lg-10">
+          <div className="text-center mb-5">
+            <h1 className="display-4">Frequently Asked Questions</h1>
+            <p className="lead text-muted">
+              Find answers to common questions about using our platform
+            </p>
+          </div>
+
+          {faqSections.map(({ id, section }) => (
+            <div key={id} className="card mb-3">
+              <div className="card-header bg-primary text-white">
+                <button
+                  className="btn btn-link text-white text-decoration-none w-100 text-start p-0"
+                  onClick={() => toggleSection(id)}
+                >
+                  <h5 className="mb-0">
+                    {section.title}
+                    <span className="float-end">
+                      {openSections[id] ? "▼" : "▶"}
+                    </span>
+                  </h5>
+                </button>
+              </div>
+
+              {openSections[id] && (
+                <div className="card-body">
+                  {section.items.map((item, index) => {
+                    const questionId = `${id}-${index}`;
+                    return (
+                      <div key={questionId} className="mb-3">
+                        <button
+                          className="btn btn-link text-decoration-none w-100 text-start p-0"
+                          onClick={() => toggleQuestion(questionId)}
+                        >
+                          <h6 className="text-dark mb-2">
+                            {openQuestions[questionId] ? "▼" : "▶"}{" "}
+                            {item.question}
+                          </h6>
+                        </button>
+
+                        {openQuestions[questionId] && (
+                          <div className="ms-4 text-muted">{item.answer}</div>
+                        )}
+
+                        {index < section.items.length - 1 && <hr />}
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ))}
+
+          <div className="card bg-light mt-5">
+            <div className="card-body text-center">
+              <h5>Still have questions?</h5>
+              <p className="text-muted">
+                Can't find what you're looking for? We're here to help!
+              </p>
+              <Link to="/contact" className="btn btn-primary">
+                Contact Support
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FAQ;