Add listings with multiple seats

import {
  InlineTextButton,
  IconClose,
  FieldSelect,
  FieldCheckbox,
  FieldTextInput, // add this row
} from '../../../../../components';

const TimeRangeHidden = (props) => {
  const { name, value, onChange, intl } = props;
  return (
    <div>
      <div className={css.formRowHidden}>
        <FieldHidden name={`${name}.startTime`} />
        <FieldHidden name={`${name}.endTime`} />
      </div>
      <FieldTextInput
        name={`${name}.seats`}
        type="number"
        initialValue={value.seats}
        placeholder={intl.formatMessage({
          id: 'EditListingAvailabilityPlanForm.seatsPlaceholder',
        })}
        min="1"
        onChange={onChange}
      />
    </div>
  );
};

  <FieldCheckbox
    key={checkboxName}
    id={checkboxName}
    name="activePlanDays"
    useSuccessColor
    label={intl.formatMessage({
      id: `EditListingAvailabilityPlanForm.dayOfWeek.${dayOfWeek}`,
    })}
    value={dayOfWeek}
    onChange={e => {
      const isChecked = e.target.checked;
 
      // 'day' and 'night' units use full days
      if (useFullDays) {
        if (isChecked) {
          // /** Replace this: **/
          formApi.mutators.push(dayOfWeek, { startTime: '00:00', endTime: '24:00' });
          // /** with this: **/
          formApi.mutators.push(dayOfWeek, {
            startTime: '00:00',
            endTime: '24:00',
            seats: 1,
          });
        } else {
          formApi.mutators.remove(dayOfWeek, 0);
        }

{
  startTime: '00:00',
  endTime: '24:00',
  seats: 1,
}

    /** Replace this **/
    <TimeRangeHidden name={name} key={name} />
    /** with this **/
    <TimeRangeHidden
      name={name}
      key={name}
      intl={intl}
      value={entries[0]}
      onChange={e => {
        const { value } = e.currentTarget;
        const { values } = formApi.getState();
        const currentPlan = values[dayOfWeek][0];
        formApi.mutators.update(dayOfWeek, 0, { ...currentPlan, seats: value });
      }}
    />

...
"EditListingAvailabilityPlanForm.seatsPlaceholder": "Select seats...",
"EditListingAvailabilityPanel.WeeklyCalendar.available": "Available ({seats})",
"EditListingAvailabilityExceptionForm.seatsLabel": "Available seats",
"EditListingAvailabilityExceptionForm.seatsPlaceholder": "Select available seats...",
"BookingDatesForm.seatsTitle": "Choose number of seats",
"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}}",
...

// Create entries from submit values
const createEntriesFromSubmitValues = (values) =>
  WEEKDAYS.reduce((allEntries, dayOfWeek) => {
    const dayValues = values[dayOfWeek] || [];
    const dayEntries = dayValues.map((dayValue) => {
      const { startTime, endTime } = dayValue;
      // Note: This template doesn't support seats yet.
      return startTime && endTime
        ? {
            dayOfWeek,
            seats: 1,
            startTime,
            endTime: endTime === '24:00' ? '00:00' : endTime,
          }
        : null;
    });
 
    return allEntries.concat(dayEntries.filter((e) => !!e));
  }, []);

const createEntriesFromSubmitValues = values =>
  WEEKDAYS.reduce((allEntries, dayOfWeek) => {
    const dayValues = values[dayOfWeek] || [];
    const dayEntries = dayValues.map(dayValue => {
-     const { startTime, endTime } = dayValue;
+     const { startTime, endTime, seats } = dayValue;
+     const seatsValue = seats ? seats : 0;
 
      // Note: This template doesn't support seats yet.
      return startTime && endTime
        ? {
            dayOfWeek,
-           seats: 1,
+           seats: seatsValue,
            startTime,
            endTime: endTime === '24:00' ? '00:00' : endTime,
          }
        : null;
    });
 
    return allEntries.concat(dayEntries.filter(e => !!e));
  }, []);

// Create initial entry mapping for form's initial values
const createEntryDayGroups = (entries = {}) => {
  // Collect info about which days are active in the availability plan form:
  let activePlanDays = [];
  return entries.reduce((groupedEntries, entry) => {
-   const { startTime, endTime: endHour, dayOfWeek } = entry;
+   const { startTime, endTime: endHour, seats, dayOfWeek } = entry;
    const dayGroup = groupedEntries[dayOfWeek] || [];
    activePlanDays = activePlanDays.includes(dayOfWeek)
      ? activePlanDays
      : [...activePlanDays, dayOfWeek];
    return {
      ...groupedEntries,
      [dayOfWeek]: [
        ...dayGroup,
        {
          startTime,
          endTime: endHour === '00:00' ? '24:00' : endHour,
+         seats,
        },
      ],
      activePlanDays,
    };
  }, {});
};

// Component that renders an entry in the availability plan (weekly schedule)
const PlanEntry = ({ date, entry, useFullDays, isDaily, timeZone, intl, ...rest }) => {
  const isAvailable = entry.seats > 0;
  const availabilityInfo = isAvailable ? (
    <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.available" />
  ) : (
    <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.notAvailable" />
  );
 
  return (
    <div className={css.planEntry} {...rest}>
      <div
        className={classNames(css.availabilityDot, {
          [css.isAvailable]: entry.seats > 0,
        })}
      />
      {useFullDays ? (
        availabilityInfo
      ) : (
...

  const isAvailable = entry.seats > 0;
  const availabilityInfo = isAvailable ? (
-   <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.available" />
+   <FormattedMessage
+     id="EditListingAvailabilityPanel.WeeklyCalendar.available"
+     values={{ seats: entry.seats }}
+   />
 
  ) : (
    <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.notAvailable" />
  );

import {
  FieldTextInput, // add this row
  Form,
  H3,
  PrimaryButton,
} from '../../../../../components';

const formState = formApi.getState();
const isAvailable = formState.values.availability === 'available';
 
const seatsSelectionMaybe = isAvailable ? (
  <FieldTextInput
    className={css.seats}
    id="seats"
    name="seats"
    type="number"
    min="1"
    label={intl.formatMessage({
      id: 'EditListingAvailabilityExceptionForm.seatsLabel',
    })}
    placeholder={intl.formatMessage({
      id: 'EditListingAvailabilityExceptionForm.seatsPlaceholder',
    })}
  />
) : null;

.seats {
  margin-top: 24px;
}

…
          timeZone={timeZone}
          values={values}
        />
      )}
+     {seatsSelectionMaybe}
    </div>
    <div className={css.submitButton}>
…

// Save exception click handler
const saveException = (values) => {
  const {
    availability,
    exceptionStartTime,
    exceptionEndTime,
    exceptionRange,
  } = values;
 
  // TODO: add proper seat handling
  const seats = availability === 'available' ? 1 : 0;
 
  // Exception date/time range is given through FieldDateRangeInput or
  // separate time fields.
  const range = useFullDays
    ? {
        start: exceptionRange?.startDate,
        end: exceptionRange?.endDate,
      }
    : {
        start: timestampToDate(exceptionStartTime),
        end: timestampToDate(exceptionEndTime),
      };
 
  const params = {
    listingId: listing.id,
    seats,
    ...range,
  };
 
  return onAddAvailabilityException(params)
    .then(() => {
      setIsEditExceptionsModalOpen(false);
    })
    .catch((e) => {
      // Don't close modal if there was an error
    });
};

  // Save exception click handler
  const saveException = values => {
    const {
      availability,
      exceptionStartTime,
      exceptionEndTime,
      exceptionRange,
      seats: rawSeats,
    } = values;
 
    const seats = availability === 'available' ? rawSeats : 0;
...

// Component that renders all the ExceptionEntry components that allow availability (seats > 0)
const AvailableExceptionsInfo = ({
  availableExceptions,
  useFullDays,
  isDaily,
  timeZone,
  onDeleteAvailabilityException,
}) => {
  const hasAvailableExceptions = availableExceptions.length > 0;
  return hasAvailableExceptions ? (
    <>
      <Heading as="h6" rootClassName={css.exceptionsSubtitle}>
        <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.available" />
      </Heading>
      {availableExceptions.map((exception) => {
        return (
          <ExceptionEntry
            key={exception.id.uuid}
            exception={exception}
            timeZone={timeZone}
            useFullDays={useFullDays}
            isDaily={isDaily}
            onDeleteAvailabilityException={
              onDeleteAvailabilityException
            }
          />
        );
      })}
    </>
  ) : null;
};

// Component that renders all the ExceptionEntry components that allow availability (seats > 0)
const AvailableExceptionsInfo = ({
  availableExceptions,
  useFullDays,
  isDaily,
  timeZone,
  onDeleteAvailabilityException,
}) => {
  const hasAvailableExceptions = availableExceptions.length > 0;
+ const seats = hasAvailableExceptions ? availableExceptions[0].attributes.seats : null;
 
  return hasAvailableExceptions ? (
    <>
      <Heading as="h6" rootClassName={css.exceptionsSubtitle}>
-       <FormattedMessage id="EditListingAvailabilityPanel.WeeklyCalendar.available" />
+       <FormattedMessage
+         id="EditListingAvailabilityPanel.WeeklyCalendar.available"
+         values={{ seats }}
        />
      </Heading>

import { generateMonths } from '../../../util/generators';
 
/**
 * Return an array of timeslots for the months between start date and end date
 * @param {*} monthlyTimeSlots
 * @param {*} startDate
 * @param {*} endDate
 * @param {*} timeZone
 * @returns
 */
const pickBookingMonthTimeSlots = (
  monthlyTimeSlots,
  startDate,
  endDate,
  timeZone
) => {
  // The generateMonths generator returns the first day of each month that is spanned
  // by the time range between start date and end date.
  const monthsInRange = generateMonths(startDate, endDate, timeZone);
 
  return monthsInRange.reduce((timeSlots, firstOfMonth) => {
    return [
      ...timeSlots,
      ...pickMonthlyTimeSlots(monthlyTimeSlots, firstOfMonth, timeZone),
    ];
  }, []);
};
 
// Get the time slot for a booking duration that has the least seats
const getMinSeatsTimeSlot = (
  monthlyTimeSlots,
  timeZone,
  startDate,
  endDate
) => {
  const timeSlots = pickBookingMonthTimeSlots(
    monthlyTimeSlots,
    startDate,
    endDate,
    timeZone
  );
 
  // Determine the timeslots that fall between start date and end date
  const bookingTimeslots = timeSlots.filter((ts) => {
    const { start, end } = ts.attributes;
    return (
      // booking start date falls within time slot
      (start < startDate && end > startDate) ||
      // whole time slot is within booking period
      (start >= startDate && end <= endDate) ||
      // booking end date falls within time slot
      (start < endDate && end > endDate)
    );
  });
 
  // Return the timeslot with the least seats in the booking period
  return bookingTimeslots.reduce((minSeats, ts) => {
    if (!minSeats?.seats) {
      return ts.attributes;
    }
 
    return ts.attributes.seats < minSeats.seats
      ? ts.attributes
      : minSeats;
  }, {});
};

const handleFormSpyChange =
  (
    listingId,
    isOwnListing,
    fetchLineItemsInProgress,
    onFetchTransactionLineItems
  ) =>
  (formValues) => {
    const { seats, bookingDates } = formValues.values;
 
    const { startDate, endDate } = bookingDates ? bookingDates : {};
 
    if (startDate && endDate && !fetchLineItemsInProgress) {
      onFetchTransactionLineItems({
        orderData: {
          bookingStart: startDate,
          bookingEnd: endDate,
          seats: parseInt(seats, 10),
        },
        listingId,
        isOwnListing,
      });
    }
  };

      render={fieldRenderProps => {
        const {
          endDatePlaceholder,
          startDatePlaceholder,
          formId,
+         form: formApi,
          handleSubmit,
          intl,
          lineItemUnitType,
          values,
          monthlyTimeSlots,
          lineItems,
          fetchLineItemsError,
          onFetchTimeSlots,
        } = fieldRenderProps;
...

const getSeatsArray = () => {
  const formState = formApi.getState();
  const { bookingDates } = formState.values;
 
  if (!bookingDates) {
    return null;
  }
 
  const minSeatsTimeSlot = getMinSeatsTimeSlot(
    monthlyTimeSlots,
    timeZone,
    bookingDates.startDate,
    bookingDates.endDate
  );
 
  // Return an array of the seat options a customer
  // can pick for the time range
  return Array(minSeatsTimeSlot.seats)
    .fill()
    .map((_, i) => i + 1);
};

      <FieldDateRangeInput
        className={css.bookingDates}
...
        disabled={fetchLineItemsInProgress}
        onClose={event =>
          setCurrentMonth(getStartOf(event?.startDate ?? startOfToday, 'month', timeZone))
        }
+       seatsArray={getSeatsArray()}
+       seatsLabel={intl.formatMessage({ id: 'BookingDatesForm.seatsTitle' })}
      />

import { FieldSelect, ValidationError } from '../../components';

  render() {
    /* eslint-disable no-unused-vars */
    const {
      className,
	...
      onFocusedInputChange,
+     seatsArray,
+ 	  seatsLabel,
      ...rest
    } = this.props;

const seatsSelectionMaybe =
  seatsArray?.length > 1 ? (
    <FieldSelect name="seats" id="seats" label={seatsLabel}>
      {seatsArray.map((s) => (
        <option value={s} key={s}>
          {s}
        </option>
      ))}
    </FieldSelect>
  ) : null;

    return (
      <div className={classes}>
        {label}
        <DateRangeInput {...inputProps} />
        <ValidationError className={errorClasses} fieldMeta={meta} />
+       {seatsSelectionMaybe}
      </div>
    );

/**
 * Calculate units based on days or nights between given bookingDates. Returns units and seats.
 *
 * @param {*} orderData should contain booking dates and seats
 * @param {*} code should be either 'line-item/day' or 'line-item/night'
 */
const getDateRangeUnitsSeatsLineItems = (orderData, code) => {
  const { bookingStart, bookingEnd, seats } = orderData;
 
  const units =
    bookingStart && bookingEnd
      ? calculateQuantityFromDates(bookingStart, bookingEnd, code)
      : null;
 
  return { units, seats, extraLineItems: [] };
};

  // Here "extra line-items" means line-items that are tied to unit type
  // E.g. by default, "shipping-fee" is tied to 'item' aka buying products.
  const quantityAndExtraLineItems =
    unitType === 'item'
      ? getItemQuantityAndLineItems(orderData, publicData, currency)
      : unitType === 'hour'
      ? getHourQuantityAndLineItems(orderData)
+     : ['day', 'night'].includes(unitType) && !!orderData.seats
+     ? getDateRangeUnitsSeatsLineItems(orderData, code)
      : ['day', 'night'].includes(unitType)
      ? getDateRangeQuantityAndLineItems(orderData, code)
      : {};

- 	const { quantity, extraLineItems } = quantityAndExtraLineItems;
+   const { quantity, units, seats, extraLineItems } = quantityAndExtraLineItems;
 
  // Throw error if there is no quantity information given
- if (!quantity) {
+ if (!quantity && !(units && seats)) {
    const message = `Error: transition should contain quantity information:
-      stockReservationQuantity, quantity, or bookingStart & bookingEnd (if "line-item/day" or "line-item/night" is used)`;
+      stockReservationQuantity, quantity, units & seats, or bookingStart & bookingEnd (if "line-item/day" or "line-item/night" is used)`;
    const error = new Error(message);
    error.status = 400;
    error.statusText = message;
    error.data = {};
    throw error;
  }
 
+ // A booking line item can have either quantity, or units and seats. Add the
+ // correct values depending on whether units and seats exist.
+ const quantityOrSeats = !!units && !!seats ? { units, seats } : { quantity };

  const order = {
    code,
    unitPrice,
- 	quantity,
+   ...quantityOrSeats,
    includeFor: ['customer', 'provider'],
  };

/** Replace this **/
const quantity = unitPurchase ? unitPurchase.quantity.toString() : null;
/** with this **/
const quantity = unitPurchase?.units
  ? unitPurchase.units.toString()
  : unitPurchase?.quantity
    ? unitPurchase.quantity.toString()
    : null;

+ const message = unitPurchase?.seats > 1
+   ? (<FormattedMessage id={`${translationKey}Seats`} values={{ unitPrice, quantity, seats: unitPurchase.seats }} />)
+   : (<FormattedMessage id={translationKey} values={{ unitPrice, quantity }} />)
 
  return quantity && total ? (
    <div className={css.lineItem}>
      <span className={css.itemLabel}>
-       <FormattedMessage id={translationKey} values={{ unitPrice, quantity }} />
+       {message}
      </span>
      <span className={css.itemValue}>{total}</span>
    </div>

  const {
    bookingDates,
    bookingStartTime,
    bookingEndTime,
    bookingStartDate, // not relevant (omit)
    bookingEndDate, // not relevant (omit)
    quantity: quantityRaw,
+   seats: seatsRaw,
    deliveryMethod,
    ...otherOrderData
  } = values;

  const quantity = Number.parseInt(quantityRaw, 10);
  const quantityMaybe = Number.isInteger(quantity) ? { quantity } : {};
+ const seats = Number.parseInt(seatsRaw, 10);
+ const seatsMaybe = Number.isInteger(seats) ? { seats } : {};
  const deliveryMethodMaybe = deliveryMethod ? { deliveryMethod } : {};
 
  const initialValues = {
    listing,
    orderData: {
      ...bookingMaybe,
      ...quantityMaybe,
+     ...seatsMaybe,
      ...deliveryMethodMaybe,
      ...otherOrderData,
    },
    confirmPaymentError: null,
  };

const getOrderParams = (pageData, shippingDetails, optionalPaymentParams, config) => {
  const quantity = pageData.orderData?.quantity;
  const quantityMaybe = quantity ? { quantity } : {};
+ const seats = pageData.orderData?.seats;
+ const seatsMaybe = seats ? { seats } : {};
 
  const deliveryMethod = pageData.orderData?.deliveryMethod;
  const deliveryMethodMaybe = deliveryMethod ? { deliveryMethod } : {};
 
...
 
  // These are the order parameters for the first payment-related transition
  // which is either initiate-transition or initiate-transition-after-enquiry
  const orderParams = {
    listingId: pageData?.listing?.id,
    ...deliveryMethodMaybe,
    ...quantityMaybe,
+   ...seatsMaybe,
    ...bookingDatesMaybe(pageData.orderData?.bookingDates),
    ...protectedDataMaybe,
    ...optionalPaymentParams,
  };
  return orderParams;
};