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

Stripe error handling and now you can rent an item for a different time while having an upcoming or active rental

Browse Source
This commit is contained in:
jackiettran
2026-01-10 13:29:09 -05:00
parent 8aea3c38ed
commit 860b6d6160
10 changed files with 178 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
frontend/src/pages/ItemDetail.tsx
View File

@@ -660,9 +660,15 @@ const ItemDetail: React.FC = () => {
})()}
{/* Rental Period Selection - Only show for non-owners */}
{!isOwner && item.isAvailable && !isAlreadyRenting && (
{!isOwner && item.isAvailable && (
<>
<hr />
{isAlreadyRenting && (
<div className="alert alert-warning py-2 mb-3" role="alert">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<small>You already have an active rental for this item</small>
</div>
)}
<div className="text-start">
{dateValidationError && (
<div
@@ -793,7 +799,7 @@ const ItemDetail: React.FC = () => {
)}
{/* Action Buttons */}
{!isOwner && item.isAvailable && !isAlreadyRenting && (
{!isOwner && item.isAvailable && (
<div className="d-grid">
<button
className="btn btn-primary btn-lg"
@@ -810,17 +816,6 @@ const ItemDetail: React.FC = () => {
</button>
</div>
)}
{!isOwner && isAlreadyRenting && (
<div className="d-grid">
<button
className="btn btn-success btn-lg"
disabled
style={{ opacity: 0.8 }}
>
Renting
</button>
</div>
)}
</div>
</div>
</div>
@@ -906,9 +901,15 @@ const ItemDetail: React.FC = () => {
})()}
{/* Rental Period Selection - Only show for non-owners */}
{!isOwner && item.isAvailable && !isAlreadyRenting && (
{!isOwner && item.isAvailable && (
<>
<hr />
{isAlreadyRenting && (
<div className="alert alert-warning py-2 mb-3" role="alert">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<small>You already have an active rental for this item</small>
</div>
)}
<div className="text-start">
{dateValidationError && (
<div
@@ -1031,7 +1032,7 @@ const ItemDetail: React.FC = () => {
)}
{/* Action Buttons */}
{!isOwner && item.isAvailable && !isAlreadyRenting && (
{!isOwner && item.isAvailable && (
<div className="d-grid">
<button
className="btn btn-primary"
@@ -1048,17 +1049,6 @@ const ItemDetail: React.FC = () => {
</button>
</div>
)}
{!isOwner && isAlreadyRenting && (
<div className="d-grid">
<button
className="btn btn-success"
disabled
style={{ opacity: 0.8 }}
>
Renting
</button>
</div>
)}
</div>
</div>
</div>
@@ -1120,30 +1110,20 @@ const ItemDetail: React.FC = () => {
);
})()}
</div>
{isAlreadyRenting ? (
<button
className="btn btn-success"
disabled
style={{ opacity: 0.8 }}
>
Renting
</button>
) : (
<button
className="btn btn-primary btn-lg"
onClick={() => {
const mobilePricingCard = document.getElementById("mobile-pricing-card");
if (mobilePricingCard) {
mobilePricingCard.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}}
>
Check Availability
</button>
)}
<button
className="btn btn-primary btn-lg"
onClick={() => {
const mobilePricingCard = document.getElementById("mobile-pricing-card");
if (mobilePricingCard) {
mobilePricingCard.scrollIntoView({
behavior: "smooth",
block: "start",
});
}
}}
>
Check Availability
</button>
</div>
</div>
)}

5
frontend/src/pages/Renting.tsx
View File

@@ -388,8 +388,9 @@ const Renting: React.FC = () => {
<div className="alert alert-warning py-2 mb-3">
<div className="d-flex align-items-center justify-content-between">
<small>
<strong>Payment issue:</strong> Please update your
payment method so the owner can approve your request.
<strong>Payment issue:</strong>{" "}
{rental.paymentFailedReason ||
"Please update your payment method so the owner can approve your request."}
</small>
<button
className="btn btn-sm btn-warning ms-2"

1
frontend/src/types/index.ts
View File

@@ -158,6 +158,7 @@ export interface Rental {
bankDepositFailureCode?: string;
// Payment failure tracking
paymentFailedNotifiedAt?: string;
paymentFailedReason?: string;
paymentMethodUpdatedAt?: string;
intendedUse?: string;
rating?: number;