From e3acf45ba0f9a31bbdfb3dc78e8c2017240f6046 Mon Sep 17 00:00:00 2001 From: jackiettran <41605212+jackiettran@users.noreply.github.com> Date: Tue, 30 Dec 2025 17:35:48 -0500 Subject: [PATCH] fixed sticky bottom pricing card for mobile --- frontend/public/index.html | 2 +- frontend/src/App.css | 3 +- frontend/src/pages/ItemDetail.tsx | 229 +++++++++++++++++++++++++++++- 3 files changed, 230 insertions(+), 4 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index fe060ef..8103c45 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -3,7 +3,7 @@ - + {
Replacement Cost: ${item.replacementCost}
+ + {/* Mobile Pricing Card - shown inline on mobile */} +
+
+
+ {(() => { + const hasAnyPositivePrice = + (item.pricePerHour !== undefined && + Number(item.pricePerHour) > 0) || + (item.pricePerDay !== undefined && + Number(item.pricePerDay) > 0) || + (item.pricePerWeek !== undefined && + Number(item.pricePerWeek) > 0) || + (item.pricePerMonth !== undefined && + Number(item.pricePerMonth) > 0); + + const hasAnyZeroPrice = + (item.pricePerHour !== undefined && + Number(item.pricePerHour) === 0) || + (item.pricePerDay !== undefined && + Number(item.pricePerDay) === 0) || + (item.pricePerWeek !== undefined && + Number(item.pricePerWeek) === 0) || + (item.pricePerMonth !== undefined && + Number(item.pricePerMonth) === 0); + + if (!hasAnyPositivePrice && hasAnyZeroPrice) { + return ( +
+

Free to Borrow

+
+ ); + } + + return ( + <> + {item.pricePerHour !== undefined && + Number(item.pricePerHour) > 0 && ( +
+

+ ${Math.floor(Number(item.pricePerHour))}/Hour +

+
+ )} + {item.pricePerDay !== undefined && + Number(item.pricePerDay) > 0 && ( +
+

+ ${Math.floor(Number(item.pricePerDay))}/Day +

+
+ )} + {item.pricePerWeek !== undefined && + Number(item.pricePerWeek) > 0 && ( +
+

+ ${Math.floor(Number(item.pricePerWeek))}/Week +

+
+ )} + {item.pricePerMonth !== undefined && + Number(item.pricePerMonth) > 0 && ( +
+

+ ${Math.floor(Number(item.pricePerMonth))}/Month +

+
+ )} + + ); + })()} + + {/* Rental Period Selection - Only show for non-owners */} + {!isOwner && item.isAvailable && !isAlreadyRenting && ( + <> +
+
+
+ +
+ + handleDateTimeChange( + "startDate", + e.target.value + ) + } + min={new Date().toLocaleDateString()} + style={{ flex: "1 1 50%" }} + /> + +
+
+ +
+ +
+ + handleDateTimeChange("endDate", e.target.value) + } + min={ + rentalDates.startDate || + new Date().toLocaleDateString() + } + style={{ flex: "1 1 50%" }} + /> + +
+
+ + {rentalDates.startDate && rentalDates.endDate && ( +
+ {costLoading ? ( +
+ + Calculating... + +
+ ) : costError ? ( + {costError} + ) : totalCost > 0 ? ( + Total: ${totalCost} + ) : null} +
+ )} +
+ + )} + + {/* Action Buttons */} + {!isOwner && item.isAvailable && !isAlreadyRenting && ( +
+ +
+ )} + {!isOwner && isAlreadyRenting && ( +
+ +
+ )} +
+
+
- {/* Right Side - Sticky Pricing Card */} -
+ {/* Right Side - Sticky Pricing Card (hidden on mobile, shown on desktop) */} +