This pull requests removes React Dates library from the codebase. It's an outdated library that uses deprecated React life cycle functions: componentWillReceiveProps & componentWillUpdate. React v17 will remove those functions.
Instead of a datepicker based on React Dates, this includes a custom DatePicker component. The custom picker should look almost the same as the previous one, but there are couple of changes:
Weekdays follow "short" dateStyle syntax for weekdays (given by Intl Web API).
It's possible to select the date range to both direction from the first boundary clicked.
In the past: if you clicked Nov 15th, you could only select one of the following days (or current date with 'day' unit)
With the new picker: if you click Nov 15th, you can also click previous days (in which case, Nov 15th becomes end date for the date range).
There are 2 different input mechanisms:
Primary method: pointer (click input and choose calendar dates)
Secondary method: keyboard
Tab, Arrow keys, Enter, Esc, PageUp, PageDown, Home, End
Note: if you have pointer on top of the calendar, this secondary method won't highlight the range - since pointer is considered the primary method of selecting date(s)
This datepicker change affects several places in code:
When a user filters by date range on search page,
When they book a listing on listing page,
When they pick a week on the availability calendar on EditListingPage,
When they add Availability Exceptions to the default schedule
In addition, this PR also changes the timeSlot handling a bit. Returned timeSlots are processed so that if there are 2 timeSlots back-to-back (1 timeSlot ends with the same timestamp as the next starts) and they have the same seats count, those timeSlots are joined into a single timeSlot.
Background:
The booking calendar fetches timeSlots for each month. For day & night based availability this has worked fine as we only check if day has availability or not. However, there has been an issue with hour-based listings: we haven't had good setup for multi-day bookings with hour-based listings. This is because timeslots.query returns availability between given start and end times - and therefore, separate fetches for each month creates artificial borders which breaks continuous availability.
This makes it easier for customizers to add bookings that take advantage of differently priced time-units with bookings that pan over a long time window.
For example:
Bicycle rental has day price of $100 & hour price $5.
Customer rents it between 3:00 pm on Nov 15, 2024 and 10:00 am on Nov 18, 2024.
Pricing calculation could work like this:
Full days: 3 * $100 per day => $300
Extra hours: 19 * $5 per hour => $95
Total: $395
Note: this scenario assumes that hour-based availability is used with the listing type. The 'day' and 'night' time units reserve the given day (00:00 - 24:00) on the listing's time zone. So, they operate with a bit different availability concept.
Translation changes
"DatePicker.clearButton": "Clear value",
"DatePicker.screenreader.blockedDate": "{date} is not available",
"DatePicker.screenreader.chooseDate": "Choose {date}",
"DatePicker.screenreader.chooseEndDate": "Choose {date} as the end date",
"DatePicker.screenreader.chooseStartDate": "Choose {date} as the start date",
"DatePicker.screenreader.nextMonthButton": "Next month",
"DatePicker.screenreader.previousMonthButton": "Previous month",
"DatePicker.screenreader.selectedDate": "{date} is selected",
"DatePicker.screenreader.selectedEndDate": "{date} is selected as the end date",
"DatePicker.screenreader.selectedStartDate": "{date} is selected as the start date",
"DatePicker.todayButton": "Show today",
Note:
The clearButton and todayButton are not used by default.
DatePicker.screenreader.* are for screenreaders through aria-label attribute (accessibility feature).
These strings should be short (as they are spoken by voice over)
The "date" argument is localized date string with date formatting options: { day: 'numeric', month: 'long' }
(e.g. "October 9")
This pull requests removes React Dates library from the codebase. It's an outdated library that uses deprecated React life cycle functions: componentWillReceiveProps & componentWillUpdate. React v17 will remove those functions.
Instead of a datepicker based on React Dates, this includes a custom DatePicker component. The custom picker should look almost the same as the previous one, but there are couple of changes:
There are 2 different input mechanisms:
This datepicker change affects several places in code:
In addition, this PR also changes the timeSlot handling a bit. Returned timeSlots are processed so that if there are 2 timeSlots back-to-back (1 timeSlot ends with the same timestamp as the next starts) and they have the same seats count, those timeSlots are joined into a single timeSlot.
This makes it easier for customizers to add bookings that take advantage of differently priced time-units with bookings that pan over a long time window.
Translation changes
Note:
{ day: 'numeric', month: 'long' }(e.g. "October 9")