Subchapter 22.17

Rental Duration Picker

Post Detail

Tag Page

Wix Blog

132 more in the appendix

Rental Duration Picker

Raw file

wix/skills

references/bookings/app/components/RentalDurationPicker.jsx

JavaScript67 lines3 KB

1// Rental length picker — pure UI. The options, the selection handler and the priced total all
2// come from useRentalDuration; no data wiring lives here.
3//
4// Renders the step an ordinary service doesn't have: the customer has already picked a START
5// (SlotPicker), and now picks HOW LONG. The running total sits beside the choices because a
6// rental's cost depends on the length — showing only a rate per hour leaves the customer
7// discovering the real number at checkout.
8//
9// Show this only when `rental.isRental` — an appointment or class has no length to choose.
10// Styled with base44 design tokens (shadcn Tailwind classes).
11const optionCls = "py-2.5 px-3 cursor-pointer text-sm font-body border rounded-sm transition-colors";
12const idle

RentalDurationPicker.jsx on GitHub

=

"border-border bg-card text-foreground hover:border-foreground/40"

;

const active = "border-primary bg-primary text-primary-foreground";

/**

* @param {{

* rental: object, // the whole return of useRentalDuration

* startLabel?: string, // e.g. "Fri 4 Sep, 10:00" — what the customer already picked

* }} props

*/

export default function RentalDurationPicker({ rental, startLabel }) {

const { isRental, duration, options, selected, select, price, loading, error } = rental;

if (!isRental) return null;

const unitWord = duration?.unit === "DAY" ? "days" : "hours";

return (

How long{startLabel ? ` from ${startLabel}` : ""}

</p>

{price?.total ? (

<p className="text-sm font-semibold text-foreground">{price.total}</p>

) : selected ? (

<p className="text-sm text-muted-foreground">Pricing…</p>

) : null}

</div>

{loading ? (

<p className="text-sm text-muted-foreground">Loading available {unitWord}…</p>

) : error ? (

<p className="text-sm text-destructive">{error}</p>

) : !options.length ? (

// An empty list is a real answer: this start has no bookable length. Say so, and leave

// the start picker in place so the customer can choose another one.

Nothing available from that start — pick another time.

</p>

) : (

{options.map((option) => (

<button

key={option.localEndDate}

type="button"

aria-pressed={selected?.localEndDate === option.localEndDate}

className={`${optionCls} ${selected?.localEndDate === option.localEndDate ? active : idle}`}

onClick={() => select(option)}

>

{option.label}

</button>

))}

</div>

)}

</div>

);

}