Jackie/rentall-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stripe webhooks. removed payout cron. webhook for when amount is deposited into bank. More communication about payout timelines

Browse Source
This commit is contained in:
jackiettran
2026-01-03 19:58:23 -05:00
parent 493921b723
commit 76102d48a9
20 changed files with 770 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/src/pages/EarningsDashboard.tsx
View File

@@ -22,7 +22,9 @@ const EarningsDashboard: React.FC = () => {
const [error, setError] = useState<string | null>(null);
const [earningsData, setEarningsData] = useState<EarningsData | null>(null);
const [userProfile, setUserProfile] = useState<User | null>(null);
const [accountStatus, setAccountStatus] = useState<AccountStatus | null>(null);
const [accountStatus, setAccountStatus] = useState<AccountStatus | null>(
null
);
const [showOnboarding, setShowOnboarding] = useState(false);
useEffect(() => {
@@ -75,7 +77,7 @@ const EarningsDashboard: React.FC = () => {
);
const pendingEarnings = completedRentals
.filter((rental: Rental) => rental.payoutStatus === "pending")
.filter((rental: Rental) => rental.bankDepositStatus !== "paid")
.reduce(
(sum: number, rental: Rental) =>
sum + parseFloat(rental.payoutAmount?.toString() || "0"),
@@ -83,7 +85,7 @@ const EarningsDashboard: React.FC = () => {
);
const completedEarnings = completedRentals
.filter((rental: Rental) => rental.payoutStatus === "completed")
.filter((rental: Rental) => rental.bankDepositStatus === "paid")
.reduce(
(sum: number, rental: Rental) =>
sum + parseFloat(rental.payoutAmount?.toString() || "0"),
@@ -231,21 +233,57 @@ const EarningsDashboard: React.FC = () => {
</strong>
</td>
<td>
<span
className={`badge ${
rental.payoutStatus === "completed"
? "bg-success"
: rental.payoutStatus === "failed"
? "bg-danger"
: "bg-secondary"
}`}
>
{rental.payoutStatus === "completed"
? "Paid"
: rental.payoutStatus === "failed"
? "Failed"
: "Pending"}
</span>
{(() => {
// Determine badge based on bank deposit and payout status
let badgeClass = "bg-secondary";
let badgeLabel = "Pending";
let badgeTooltip =
"Waiting for rental to complete or Stripe setup.";
if (rental.bankDepositStatus === "paid") {
badgeClass = "bg-success";
badgeLabel = "Deposited";
badgeTooltip = rental.bankDepositAt
? `Deposited to your bank on ${new Date(
rental.bankDepositAt
).toLocaleDateString()}`
: "Funds deposited to your bank account.";
} else if (
rental.bankDepositStatus === "failed"
) {
badgeClass = "bg-danger";
badgeLabel = "Deposit Failed";
badgeTooltip =
"Bank deposit failed. Please check your Stripe dashboard.";
} else if (
rental.bankDepositStatus === "in_transit"
) {
badgeClass = "bg-info";
badgeLabel = "In Transit to Bank";
badgeTooltip =
"Funds are on their way to your bank.";
} else if (rental.payoutStatus === "completed") {
badgeClass = "bg-info";
badgeLabel = "Transferred to Stripe";
badgeTooltip =
"In your Stripe balance. Bank deposit in 2-7 business days.";
} else if (rental.payoutStatus === "failed") {
badgeClass = "bg-danger";
badgeLabel = "Transfer Failed";
badgeTooltip =
"Transfer failed. We'll retry automatically.";
}
return (
<span
className={`badge ${badgeClass}`}
title={badgeTooltip}
style={{ cursor: "help" }}
>
{badgeLabel}
</span>
);
})()}
</td>
</tr>
))}
@@ -274,7 +312,7 @@ const EarningsDashboard: React.FC = () => {
</div>
{/* Quick Stats */}
<div className="card">
<div className="card mb-4">
<div className="card-header">
<h5 className="mb-0">Quick Stats</h5>
</div>
@@ -301,6 +339,46 @@ const EarningsDashboard: React.FC = () => {
</div>
</div>
</div>
{/* How Payouts Work */}
<div className="card">
<div className="card-header">
<h5 className="mb-0">How Payouts Work</h5>
</div>
<div className="card-body">
<div className="d-flex align-items-start mb-3">
<span className="badge bg-success me-2">1</span>
<div>
<strong>Transfer Initiated</strong>
<p className="mb-0 small text-muted">
Immediate when rental is marked complete
</p>
</div>
</div>
<div className="d-flex align-items-start mb-3">
<span className="badge bg-success me-2">2</span>
<div>
<strong>Funds in Stripe</strong>
<p className="mb-0 small text-muted">
Instant — view in your Stripe dashboard
</p>
</div>
</div>
<div className="d-flex align-items-start">
<span className="badge bg-primary me-2">3</span>
<div>
<strong>Funds in Bank</strong>
<p className="mb-0 small text-muted">
2-7 business days (Stripe's schedule)
</p>
</div>
</div>
<hr />
<p className="small text-muted mb-0">
<Link to="/faq#earnings">Learn more in our FAQ</Link>
</p>
</div>
</div>
</div>
</div>