Edited layout of mmddyyyy and time dropdown. Changed algorithm for determining pricing so that it choosest the cheapest option for users
This commit is contained in:
jackiettran
@@ -676,98 +676,92 @@ const ItemDetail: React.FC = () => {
|
||||
<label className="form-label fw-medium mb-2">
|
||||
Start
|
||||
</label>
|
||||
<div className="d-flex gap-2">
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.startDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control form-control-lg w-100"
|
||||
popperProps={{ strategy: "fixed" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<select
|
||||
className="form-select form-select-lg"
|
||||
value={rentalDates.startTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.startDate}
|
||||
>
|
||||
<option value="">Pickup</option>
|
||||
{generateTimeOptions(
|
||||
rentalDates.startDate
|
||||
).map((option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ width: "60%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.startDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control form-control-lg mb-2 w-100"
|
||||
popperProps={{ strategy: "fixed" }}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
className="form-select form-select-lg"
|
||||
style={{ width: "60%" }}
|
||||
value={rentalDates.startTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.startDate}
|
||||
>
|
||||
<option value="">Pickup Time</option>
|
||||
{generateTimeOptions(rentalDates.startDate).map(
|
||||
(option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-medium mb-2">
|
||||
End
|
||||
</label>
|
||||
<div className="d-flex gap-2">
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.endDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={rentalDates.startDate || new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control form-control-lg w-100"
|
||||
popperProps={{ strategy: "fixed" }}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<select
|
||||
className="form-select form-select-lg"
|
||||
value={rentalDates.endTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.endDate}
|
||||
>
|
||||
<option value="">Return</option>
|
||||
{generateTimeOptions(rentalDates.endDate).map(
|
||||
(option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ width: "60%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.endDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={rentalDates.startDate || new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control form-control-lg mb-2 w-100"
|
||||
popperProps={{ strategy: "fixed" }}
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
className="form-select form-select-lg"
|
||||
style={{ width: "60%" }}
|
||||
value={rentalDates.endTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.endDate}
|
||||
>
|
||||
<option value="">Return Time</option>
|
||||
{generateTimeOptions(rentalDates.endDate).map(
|
||||
(option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{rentalDates.startDate &&
|
||||
@@ -802,7 +796,7 @@ const ItemDetail: React.FC = () => {
|
||||
{!isOwner && item.isAvailable && !isAlreadyRenting && (
|
||||
<div className="d-grid">
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
className="btn btn-primary btn-lg"
|
||||
onClick={handleRent}
|
||||
disabled={
|
||||
!rentalDates.startDate ||
|
||||
@@ -819,7 +813,7 @@ const ItemDetail: React.FC = () => {
|
||||
{!isOwner && isAlreadyRenting && (
|
||||
<div className="d-grid">
|
||||
<button
|
||||
className="btn btn-success"
|
||||
className="btn btn-success btn-lg"
|
||||
disabled
|
||||
style={{ opacity: 0.8 }}
|
||||
>
|
||||
@@ -928,96 +922,84 @@ const ItemDetail: React.FC = () => {
|
||||
<label className="form-label fw-medium mb-2">
|
||||
Start
|
||||
</label>
|
||||
<div className="d-flex gap-2">
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.startDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control w-100"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<select
|
||||
className="form-select"
|
||||
value={rentalDates.startTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.startDate}
|
||||
>
|
||||
<option value="">Pickup</option>
|
||||
{generateTimeOptions(rentalDates.startDate).map(
|
||||
(option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ width: "60%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.startDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control mb-2 w-100"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
className="form-select"
|
||||
style={{ width: "60%" }}
|
||||
value={rentalDates.startTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
startTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.startDate}
|
||||
>
|
||||
<option value="">Pickup Time</option>
|
||||
{generateTimeOptions(rentalDates.startDate).map(
|
||||
(option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="form-label fw-medium mb-2">
|
||||
End
|
||||
</label>
|
||||
<div className="d-flex gap-2">
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.endDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={rentalDates.startDate || new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control w-100"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ flex: "1 1 50%" }}>
|
||||
<select
|
||||
className="form-select"
|
||||
value={rentalDates.endTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.endDate}
|
||||
>
|
||||
<option value="">Return</option>
|
||||
{generateTimeOptions(rentalDates.endDate).map(
|
||||
(option) => (
|
||||
<option
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
<div style={{ width: "60%" }}>
|
||||
<DatePicker
|
||||
selected={rentalDates.endDate}
|
||||
onChange={(date: Date | null) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endDate: date,
|
||||
}))
|
||||
}
|
||||
minDate={rentalDates.startDate || new Date()}
|
||||
dateFormat="MM/dd/yyyy"
|
||||
placeholderText="mm/dd/yyyy"
|
||||
className="form-control mb-2 w-100"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
className="form-select"
|
||||
style={{ width: "60%" }}
|
||||
value={rentalDates.endTime}
|
||||
onChange={(e) =>
|
||||
setRentalDates((prev) => ({
|
||||
...prev,
|
||||
endTime: e.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={!rentalDates.endDate}
|
||||
>
|
||||
<option value="">Return Time</option>
|
||||
{generateTimeOptions(rentalDates.endDate).map(
|
||||
(option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{rentalDates.startDate &&
|
||||
|
||||
Reference in New Issue
Block a user