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

payment for rental from renter stripe integration

Browse Source
This commit is contained in:
jackiettran
2025-08-27 19:46:27 -04:00
parent 601e11b7e8
commit 38346bec27
13 changed files with 1090 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -71,7 +71,7 @@ const ItemDetail: React.FC = () => {
startDate: rentalDates.startDate,
startTime: rentalDates.startTime,
endDate: rentalDates.endDate,
endTime: rentalDates.endTime
endTime: rentalDates.endTime,
});
navigate(`/items/${id}/rent?${params.toString()}`);
};
@@ -115,75 +115,74 @@ const ItemDetail: React.FC = () => {
let availableAfter = "00:00";
let availableBefore = "23:59";
console.log('generateTimeOptions called with:', {
itemId: item?.id,
selectedDate,
hasItem: !!item
});
// Determine time constraints only if we have both item and a valid selected date
if (item && selectedDate && selectedDate.trim() !== "") {
const date = new Date(selectedDate);
const dayName = date.toLocaleDateString('en-US', { weekday: 'long' }).toLowerCase() as
'sunday' | 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday';
console.log('Date analysis:', {
selectedDate,
dayName,
specifyTimesPerDay: item.specifyTimesPerDay,
hasWeeklyTimes: !!item.weeklyTimes,
globalAvailableAfter: item.availableAfter,
globalAvailableBefore: item.availableBefore
});
const dayName = date
.toLocaleDateString("en-US", { weekday: "long" })
.toLowerCase() as
| "sunday"
| "monday"
| "tuesday"
| "wednesday"
| "thursday"
| "friday"
| "saturday";
// Use day-specific times if available
if (item.specifyTimesPerDay && item.weeklyTimes && item.weeklyTimes[dayName]) {
if (
item.specifyTimesPerDay &&
item.weeklyTimes &&
item.weeklyTimes[dayName]
) {
const dayTimes = item.weeklyTimes[dayName];
availableAfter = dayTimes.availableAfter;
availableBefore = dayTimes.availableBefore;
console.log('Using day-specific times:', { availableAfter, availableBefore });
console.log("Using day-specific times:", {
availableAfter,
availableBefore,
});
}
// Otherwise use global times
else if (item.availableAfter && item.availableBefore) {
availableAfter = item.availableAfter;
availableBefore = item.availableBefore;
console.log('Using global times:', { availableAfter, availableBefore });
} else {
console.log('No time constraints found, using default 24-hour availability');
console.log(
"No time constraints found, using default 24-hour availability"
);
}
} else {
console.log('Missing item or selectedDate, using default 24-hour availability');
}
for (let hour = 0; hour < 24; hour++) {
const time24 = `${hour.toString().padStart(2, "0")}:00`;
// Ensure consistent format for comparison (normalize to HH:MM)
const normalizedAvailableAfter = availableAfter.length === 5 ? availableAfter : availableAfter + ":00";
const normalizedAvailableBefore = availableBefore.length === 5 ? availableBefore : availableBefore + ":00";
const normalizedAvailableAfter =
availableAfter.length === 5 ? availableAfter : availableAfter + ":00";
const normalizedAvailableBefore =
availableBefore.length === 5
? availableBefore
: availableBefore + ":00";
// Check if this time is within the available range
if (time24 >= normalizedAvailableAfter && time24 <= normalizedAvailableBefore) {
if (
time24 >= normalizedAvailableAfter &&
time24 <= normalizedAvailableBefore
) {
const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
const period = hour < 12 ? "AM" : "PM";
const time12 = `${hour12}:00 ${period}`;
options.push({ value: time24, label: time12 });
}
}
console.log('Time filtering results:', {
availableAfter,
availableBefore,
optionsGenerated: options.length,
firstFewOptions: options.slice(0, 3)
});
// If no options are available, return at least one option to prevent empty dropdown
if (options.length === 0) {
console.log('No valid time options found, showing Not Available');
console.log("No valid time options found, showing Not Available");
options.push({ value: "00:00", label: "Not Available" });
}
return options;
};
@@ -197,24 +196,35 @@ const ItemDetail: React.FC = () => {
const validateAndAdjustTime = (date: string, currentTime: string) => {
if (!date) return currentTime;
const availableOptions = generateTimeOptions(item, date);
if (availableOptions.length === 0) return currentTime;
// If current time is not in available options, use the first available time
const isCurrentTimeValid = availableOptions.some(option => option.value === currentTime);
const isCurrentTimeValid = availableOptions.some(
(option) => option.value === currentTime
);
return isCurrentTimeValid ? currentTime : availableOptions[0].value;
};
const adjustedStartTime = validateAndAdjustTime(rentalDates.startDate, rentalDates.startTime);
const adjustedEndTime = validateAndAdjustTime(rentalDates.endDate || rentalDates.startDate, rentalDates.endTime);
const adjustedStartTime = validateAndAdjustTime(
rentalDates.startDate,
rentalDates.startTime
);
const adjustedEndTime = validateAndAdjustTime(
rentalDates.endDate || rentalDates.startDate,
rentalDates.endTime
);
// Update state if times have changed
if (adjustedStartTime !== rentalDates.startTime || adjustedEndTime !== rentalDates.endTime) {
setRentalDates(prev => ({
if (
adjustedStartTime !== rentalDates.startTime ||
adjustedEndTime !== rentalDates.endTime
) {
setRentalDates((prev) => ({
...prev,
startTime: adjustedStartTime,
endTime: adjustedEndTime
endTime: adjustedEndTime,
}));
}
}, [item, rentalDates.startDate, rentalDates.endDate]);
@@ -473,21 +483,40 @@ const ItemDetail: React.FC = () => {
className="form-control"
value={rentalDates.startDate}
onChange={(e) =>
handleDateTimeChange("startDate", e.target.value)
handleDateTimeChange(
"startDate",
e.target.value
)
}
min={new Date().toISOString().split("T")[0]}
style={{ flex: '1 1 50%' }}
style={{ flex: "1 1 50%" }}
/>
<select
className="form-select"
value={rentalDates.startTime}
onChange={(e) =>
handleDateTimeChange("startTime", e.target.value)
handleDateTimeChange(
"startTime",
e.target.value
)
}
style={{ flex: "1 1 50%" }}
disabled={
!!(
rentalDates.startDate &&
generateTimeOptions(
item,
rentalDates.startDate
).every(
(opt) => opt.label === "Not Available"
)
)
}
style={{ flex: '1 1 50%' }}
disabled={!!(rentalDates.startDate && generateTimeOptions(item, rentalDates.startDate).every(opt => opt.label === "Not Available"))}
>
{generateTimeOptions(item, rentalDates.startDate).map((option) => (
{generateTimeOptions(
item,
rentalDates.startDate
).map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
@@ -510,7 +539,7 @@ const ItemDetail: React.FC = () => {
rentalDates.startDate ||
new Date().toISOString().split("T")[0]
}
style={{ flex: '1 1 50%' }}
style={{ flex: "1 1 50%" }}
/>
<select
className="form-select"
@@ -518,10 +547,24 @@ const ItemDetail: React.FC = () => {
onChange={(e) =>
handleDateTimeChange("endTime", e.target.value)
}
style={{ flex: '1 1 50%' }}
disabled={!!((rentalDates.endDate || rentalDates.startDate) && generateTimeOptions(item, rentalDates.endDate || rentalDates.startDate).every(opt => opt.label === "Not Available"))}
style={{ flex: "1 1 50%" }}
disabled={
!!(
(rentalDates.endDate ||
rentalDates.startDate) &&
generateTimeOptions(
item,
rentalDates.endDate || rentalDates.startDate
).every(
(opt) => opt.label === "Not Available"
)
)
}
>
{generateTimeOptions(item, rentalDates.endDate || rentalDates.startDate).map((option) => (
{generateTimeOptions(
item,
rentalDates.endDate || rentalDates.startDate
).map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>