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

Skip payment process if item is free to borrow

Browse Source
This commit is contained in:
jackiettran
2025-09-22 22:02:08 -04:00
parent 3e76769a3e
commit 67cc997ddc
7 changed files with 245 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/components/RentalCancellationModal.tsx
View File

@@ -152,7 +152,10 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">
{success ? "Refund Confirmation" : "Cancel Rental"}
{success
? (rental.totalAmount > 0 ? "Refund Confirmation" : "Cancellation Confirmation")
: "Cancel Rental"
}
</h5>
<button
type="button"
@@ -167,22 +170,26 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
<div className="mb-4">
<i className="bi bi-check-circle-fill text-success" style={{ fontSize: '4rem' }}></i>
</div>
<h3 className="text-success mb-3">Refund Processed Successfully!</h3>
<div className="alert alert-success mb-4">
<h5 className="mb-3">
<strong>{formatCurrency(processedRefund.amount)}</strong> has been refunded
</h5>
<div className="small text-muted">
<p className="mb-2">
<i className="bi bi-clock me-2"></i>
Your refund will appear in your payment method within <strong>3-5 business days</strong>
</p>
<p className="mb-0">
<i className="bi bi-credit-card me-2"></i>
Refund will be processed to your original payment method
</p>
<h3 className="text-success mb-3">
{rental.totalAmount > 0 ? 'Refund Processed Successfully!' : 'Rental Cancelled Successfully!'}
</h3>
{rental.totalAmount > 0 && (
<div className="alert alert-success mb-4">
<h5 className="mb-3">
<strong>{formatCurrency(processedRefund.amount)}</strong> has been refunded
</h5>
<div className="small text-muted">
<p className="mb-2">
<i className="bi bi-clock me-2"></i>
Your refund will appear in your payment method within <strong>3-5 business days</strong>
</p>
<p className="mb-0">
<i className="bi bi-credit-card me-2"></i>
Refund will be processed to your original payment method
</p>
</div>
</div>
</div>
)}
<p className="text-muted mb-4">
Thank you for using our platform. We hope you'll rent with us again soon!
</p>
@@ -227,28 +234,30 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
</div>
</div>
<div className="mb-4">
<h5>Refund Information</h5>
<div
className={`alert alert-${getRefundColor(
refundPreview.refundPercentage
)}`}
>
<div className="d-flex justify-content-between align-items-center">
<div>
<strong>Refund Amount:</strong>{" "}
{formatCurrency(refundPreview.refundAmount)}
</div>
<div>
<strong>
{Math.round(refundPreview.refundPercentage * 100)}%
</strong>
{rental.totalAmount > 0 && (
<div className="mb-4">
<h5>Refund Information</h5>
<div
className={`alert alert-${getRefundColor(
refundPreview.refundPercentage
)}`}
>
<div className="d-flex justify-content-between align-items-center">
<div>
<strong>Refund Amount:</strong>{" "}
{formatCurrency(refundPreview.refundAmount)}
</div>
<div>
<strong>
{Math.round(refundPreview.refundPercentage * 100)}%
</strong>
</div>
</div>
<hr />
<small>{refundPreview.reason}</small>
</div>
<hr />
<small>{refundPreview.reason}</small>
</div>
</div>
)}
<form>
<div className="mb-3">
@@ -310,11 +319,13 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
Processing...
</>
) : (
`Cancel with ${
refundPreview.refundAmount > 0
? `Refund ${formatCurrency(refundPreview.refundAmount)}`
: "No Refund"
}`
rental.totalAmount > 0
? `Cancel with ${
refundPreview.refundAmount > 0
? `Refund ${formatCurrency(refundPreview.refundAmount)}`
: "No Refund"
}`
: "Cancel Rental"
)}
</button>
)}