Seats: availability management, booking flow, search filter

[Gnito]

This PR adds possibility to use multiple seats.
It also changes the UI for weekly calendar on EditListingAvailabilityManagement.

Note: we won't merge this before holiday season is over.

Availability management

The design of the Availability management tab on EditListingWizard is going to change a bit:

Default schedule ("oneSeat"):

Default schedule ("multipleSeats"):

Weekly calendar has a bigger change, we moved towards a single flow of availability slots. I.e. AvailabilityExceptions are shown in the location where they belong to, when compared to plan (default schedule).

Weekly calendar ("oneSeat"):

Weekly calendar ("multipleSeats"):

Booking with seats

If seats are enabled via assets, users can input a number of seats they want to book in transaction processes using the default-booking process.

This introduces major changes to:

• BookingDatesForm
• BookingTimeForm

In addition, smaller changes are introduced to the InboxPage, CheckoutPage and how line items are calculated server side.

If the seatsEnabled parameter evaluates to true, line-item calculations will default to 1 seat (even if no seat value is passed). seatsEnabled evaluates to true if:

const seatsEnabled = [AVAILABILITY_MULTIPLE_SEATS].includes(listingTypeConfig?.availabilityType);

Seats filter

This PR adds new components. There is a new FieldNumberInput component, as well as a new SeatsFilter component that uses FieldNumberInput. The SeatsFilter component has been implemented on both search pages:

• SearchPageWithGrid uses SeatsFilter as a plain component

• SearchPageWithMap uses SeatsFilter as a popup component

This PR also prepares the codebase to use a hosted configuration for seats filtering, once the feature is released in Console.

Translations

New translation keys

  "BookingDatesForm.seatsPlaceholder": "Select...",
  "BookingDatesForm.seatsTitle": "Number of seats",
  "BookingTimeForm.seatsPlaceholder": "Select...",
  "BookingTimeForm.seatsTitle": "Number of seats",
  "EditListingAvailabilityPanel.WeeklyCalendar.exception": "Exception: {exception}",
  "EditListingAvailabilityPanel.WeeklyCalendar.seats": "{seats, plural, one {{seats} seat} other {{seats} seats}}",
  "EditListingAvailabilityPlanForm.selectTime": "Select time",
  "FieldSeatsInput.numberTooBig": "The number must be less than or equal to {max}",
  "FieldSeatsInput.numberTooSmall": "The number must be greater than or equal to {min}",
  "FieldSeatsInput.seatsError": "This field is required",
  "FieldSeatsInput.seatsLabel": "Seats",
  "FieldSeatsInput.seatsPlaceholder": "Seats",
  "FilterComponent.seatsLabel": "Seats",
  "InboxPage.seats": "Number of seats: {seats}",
  "NumberInput.decrementButton": "Decrement the value by one",
  "NumberInput.incrementButton": "Increment the value by one",
  "OrderBreakdown.baseUnitDaySeats": "{unitPrice} x {quantity, number} {quantity, plural, one {day} other {days}} x { seats, number } { seats, plural, one {seat} other {seats} }",
  "OrderBreakdown.baseUnitNightSeats": "{unitPrice} x {quantity, number} {quantity, plural, one {night} other {nights}} x { seats, number } { seats, plural, one {seat} other {seats} }",
  "OrderBreakdown.baseUnitHourSeats": "{unitPrice} x {quantity, number} {quantity, plural, one {hour} other {hours}} x { seats, number } { seats, plural, one {seat} other {seats} }",
  "SeatsFilter.labelSelected":"Seats: {seatCount}",

Note: FieldSeatsInput: min = 0, max is 9007199254740991 aka Number.MAX_SAFE_INTEGER

Deleted translation keys

  "EditListingAvailabilityPanel.WeeklyCalendar.exceptions": "Exceptions",