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

pricing tiers

Browse Source
This commit is contained in:
jackiettran
2025-11-06 15:54:27 -05:00
parent 9c258177ae
commit 3dca6c803a
14 changed files with 508 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,8 @@ const ItemDetail: React.FC = () => {
endTime: "12:00",
});
const [totalCost, setTotalCost] = useState(0);
const [costLoading, setCostLoading] = useState(false);
const [costError, setCostError] = useState<string | null>(null);
useEffect(() => {
fetchItem();
@@ -83,31 +85,37 @@ const ItemDetail: React.FC = () => {
}));
};
const calculateTotalCost = () => {
const calculateTotalCost = async () => {
if (!item || !rentalDates.startDate || !rentalDates.endDate) {
setTotalCost(0);
return;
}
const startDateTime = new Date(
`${rentalDates.startDate}T${rentalDates.startTime}`
);
const endDateTime = new Date(
`${rentalDates.endDate}T${rentalDates.endTime}`
);
try {
setCostLoading(true);
setCostError(null);
const diffMs = endDateTime.getTime() - startDateTime.getTime();
const diffHours = Math.ceil(diffMs / (1000 * 60 * 60));
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
const startDateTime = new Date(
`${rentalDates.startDate}T${rentalDates.startTime}`
).toISOString();
let cost = 0;
if (item.pricePerHour && diffHours <= 24) {
cost = diffHours * Number(item.pricePerHour);
} else if (item.pricePerDay) {
cost = diffDays * Number(item.pricePerDay);
const endDateTime = new Date(
`${rentalDates.endDate}T${rentalDates.endTime}`
).toISOString();
const response = await rentalAPI.getRentalCostPreview({
itemId: item.id,
startDateTime,
endDateTime,
});
setTotalCost(response.data.baseAmount);
} catch (err: any) {
setCostError(err.response?.data?.error || "Failed to calculate cost");
setTotalCost(0);
} finally {
setCostLoading(false);
}
setTotalCost(cost);
};
const generateTimeOptions = (item: Item | null, selectedDate: string) => {
@@ -458,7 +466,7 @@ const ItemDetail: React.FC = () => {
)}
{item.pricePerMonth !== undefined &&
Number(item.pricePerMonth) > 0 && (
<div className="mb-4">
<div className="mb-2">
<h4>
${Math.floor(Number(item.pricePerMonth))}/Month
</h4>
@@ -571,13 +579,19 @@ const ItemDetail: React.FC = () => {
</div>
</div>
{rentalDates.startDate &&
rentalDates.endDate &&
totalCost > 0 && (
<div className="mb-3 p-2 bg-light rounded text-center">
{rentalDates.startDate && rentalDates.endDate && (
<div className="mb-3 p-2 bg-light rounded text-center">
{costLoading ? (
<div className="spinner-border spinner-border-sm" role="status">
<span className="visually-hidden">Calculating...</span>
</div>
) : costError ? (
<small className="text-danger">{costError}</small>
) : totalCost > 0 ? (
<strong>Total: ${totalCost}</strong>
</div>
)}
) : null}
</div>
)}
</div>
</>
)}