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

layout and styling changes for RentItem

Browse Source
This commit is contained in:
jackiettran
2026-01-01 17:17:02 -05:00
parent fd2312fe47
commit 9e41f328e0
1 changed files with 249 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/pages/RentItem.tsx
View File

@@ -25,7 +25,10 @@ const validateDates = (
// Check if end datetime is after start datetime
if (endDateTime <= startDateTime) {
return { isValid: false, error: "End date/time must be after start date/time" };
return {
isValid: false,
error: "End date/time must be after start date/time",
};
}
return { isValid: true, error: null };
@@ -65,7 +68,9 @@ const RentItem: React.FC = () => {
const [costLoading, setCostLoading] = useState(false);
const [costError, setCostError] = useState<string | null>(null);
const [completed, setCompleted] = useState(false);
const [dateValidationError, setDateValidationError] = useState<string | null>(null);
const [dateValidationError, setDateValidationError] = useState<string | null>(
null
);
const formatDateTime = (date: Date | null) => {
if (!date) return "";
@@ -229,18 +234,19 @@ const RentItem: React.FC = () => {
}
return (
<div className="container mt-5">
<div style={{ backgroundColor: "#F7F9FB", minHeight: "100vh" }}>
<div className="container pt-5">
<div className="row justify-content-center">
<div className="col-md-10">
<h1>Renting {item.name}</h1>
<h1>Complete Your Request</h1>
{/* Email Verification Warning Banner */}
{user && !user.isVerified && (
<div className="alert alert-warning d-flex align-items-center mb-4">
<i className="bi bi-exclamation-triangle-fill me-2"></i>
<div className="flex-grow-1">
<strong>Email verification required.</strong> Verify your email
to book rentals.
<strong>Email verification required.</strong> Verify your
email to book rentals.
</div>
<button
className="btn btn-warning btn-sm ms-3"
@@ -264,14 +270,17 @@ const RentItem: React.FC = () => {
<div className="card-body">
{item.imageFilenames && item.imageFilenames[0] && (
<img
src={getImageUrl(item.imageFilenames[0], 'medium')}
src={getImageUrl(item.imageFilenames[0], "medium")}
alt={item.name}
className="img-fluid rounded mb-3"
onError={(e) => {
const target = e.currentTarget;
if (!target.dataset.fallback) {
target.dataset.fallback = 'true';
target.src = getImageUrl(item.imageFilenames[0], 'original');
target.dataset.fallback = "true";
target.src = getImageUrl(
item.imageFilenames[0],
"original"
);
}
}}
style={{
@@ -298,8 +307,11 @@ const RentItem: React.FC = () => {
<h6>Free to Borrow</h6>
) : (
<>
{item.pricePerHour && Number(item.pricePerHour) > 0 && (
<h6>${Math.floor(Number(item.pricePerHour))}/Hour</h6>
{item.pricePerHour &&
Number(item.pricePerHour) > 0 && (
<h6>
${Math.floor(Number(item.pricePerHour))}/Hour
</h6>
)}
{item.pricePerDay && Number(item.pricePerDay) > 0 && (
<h6>${Math.floor(Number(item.pricePerDay))}/Day</h6>
@@ -352,8 +364,8 @@ const RentItem: React.FC = () => {
{/* Form - appears second on mobile, left side on desktop */}
<div className="col-md-8">
{completed ? (
<div className="card mb-4">
<div className="card-body text-center">
<div className="mb-4">
<div className="text-center">
<div className="alert alert-success">
<i className="bi bi-check-circle-fill display-1 text-success mb-3"></i>
<h3>Rental Request Sent!</h3>
@@ -379,26 +391,14 @@ const RentItem: React.FC = () => {
</div>
</div>
) : (
<div className="card mb-4">
<div className="mb-4">
<div>
<div className="card mb-3">
<div className="card-body">
<h5 className="card-title">
{totalCost === 0
? "Complete Your Borrow Request"
: "Complete Your Rental Request"}
</h5>
{totalCost > 0 && (
<p className="text-muted small mb-3">
Add your payment method to complete your rental request.
You'll only be charged if the owner approves your
request.
</p>
)}
<div className="mb-3">
<label htmlFor="intendedUse" className="form-label">
<h6 className="mb-3">
What will you use this for?{" "}
<span className="text-muted">(Optional)</span>
</label>
</h6>
<textarea
id="intendedUse"
name="intendedUse"
@@ -413,6 +413,7 @@ const RentItem: React.FC = () => {
{formData.intendedUse.length}/500 characters
</div>
</div>
</div>
{dateValidationError ? (
<div className="alert alert-danger">
@@ -452,11 +453,20 @@ const RentItem: React.FC = () => {
</>
) : (
<>
<div className="card mb-3">
<div className="card-body">
<h6 className="mb-3">
Add your payment method to complete your
request. You'll only be charged if the owner
approves your request
</h6>
<EmbeddedStripeCheckout
rentalData={getRentalData()}
onSuccess={() => setCompleted(true)}
onError={(error) => setError(error)}
/>
</div>
</div>
<div className="text-center mt-3">
<button
@@ -490,6 +500,7 @@ const RentItem: React.FC = () => {
/>
)}
</div>
</div>
);
};