77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import React from "react";
|
|
|
|
interface EarningsStatusProps {
|
|
hasStripeAccount: boolean;
|
|
onSetupClick: () => void;
|
|
}
|
|
|
|
const EarningsStatus: React.FC<EarningsStatusProps> = ({
|
|
hasStripeAccount,
|
|
onSetupClick,
|
|
}) => {
|
|
// No Stripe account exists
|
|
if (!hasStripeAccount) {
|
|
return (
|
|
<div className="text-center">
|
|
<div className="mb-3">
|
|
<i
|
|
className="bi bi-exclamation-circle text-warning"
|
|
style={{ fontSize: "2.5rem" }}
|
|
></i>
|
|
</div>
|
|
<h6>Earnings Not Set Up</h6>
|
|
<p className="text-muted small mb-3">
|
|
Set up earnings to automatically receive payments when rentals are
|
|
completed.
|
|
</p>
|
|
<button className="btn btn-primary" onClick={onSetupClick}>
|
|
Set Up Earnings
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Account exists and is set up
|
|
return (
|
|
<div className="text-center">
|
|
<div className="mb-3">
|
|
<i
|
|
className="bi bi-check-circle text-success"
|
|
style={{ fontSize: "2.5rem" }}
|
|
></i>
|
|
</div>
|
|
<h6 className="text-success">Earnings Active</h6>
|
|
<p className="text-muted small mb-3">
|
|
Your earnings are set up and working. You'll receive payments
|
|
automatically.
|
|
</p>
|
|
|
|
<div className="small text-start">
|
|
<div className="d-flex justify-content-between mb-1">
|
|
<span>Earnings Enabled:</span>
|
|
<span className="text-success">
|
|
<i className="bi bi-check"></i> Yes
|
|
</span>
|
|
</div>
|
|
<div className="d-flex justify-content-between">
|
|
<span>Status:</span>
|
|
<span className="text-success">
|
|
<i className="bi bi-check"></i> Active
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<button
|
|
className="btn btn-outline-primary btn-sm"
|
|
onClick={() => window.open("https://dashboard.stripe.com", "_blank")}
|
|
>
|
|
<i className="bi bi-box-arrow-up-right"></i> Stripe Dashboard
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EarningsStatus;
|