Seats: availability management, booking flow, search filter

server/api-util/lineItems.js

@@ -72,6 +72,14 @@ const getHourQuantityAndLineItems = orderData => {
   return { quantity, extraLineItems: [] };
 };
 
+const getHoursWithSeatsAndLineItems = orderData => {
+  const { bookingStart, bookingEnd, seats } = orderData || {};
+  const units =
+    bookingStart && bookingEnd ? calculateQuantityFromHours(bookingStart, bookingEnd) : null;
+
+  return { units, seats, extraLineItems: [] };
+};
+
 /**
  * Calculate quantity based on days or nights between given bookingDates.
  *
@@ -87,6 +95,13 @@ const getDateRangeQuantityAndLineItems = (orderData, code) => {
   return { quantity, extraLineItems: [] };
 };
 
+const getDateRangeWithSeatsAndLineItems = (orderData, code) => {
+  const { bookingStart, bookingEnd, seats } = orderData;
+  const units =
+    bookingStart && bookingEnd ? calculateQuantityFromDates(bookingStart, bookingEnd, code) : null;
+  return { units, seats, extraLineItems: [] };
+};
+
 /**
  * Returns collection of lineItems (max 50)
  *
@@ -140,18 +155,30 @@ exports.transactionLineItems = (listing, orderData, providerCommission, customer
   const quantityAndExtraLineItems =
     unitType === 'item'
       ? getItemQuantityAndLineItems(orderData, publicData, currency)
+      : unitType === 'hour' && orderData.seats
+      ? getHoursWithSeatsAndLineItems(orderData)
       : unitType === 'hour'
       ? getHourQuantityAndLineItems(orderData)
+      : ['day', 'night'].includes(unitType) && orderData.seats
+      ? getDateRangeWithSeatsAndLineItems(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) {
-    const message = `Error: transition should contain quantity information: 
-      stockReservationQuantity, quantity, or bookingStart & bookingEnd (if "line-item/day" or "line-item/night" is used)`;
+  if (!quantity && !(units && seats)) {
+    const missingFields = [];
+
+    if (!quantity) missingFields.push('quantity');
+    if (!units) missingFields.push('units');
+    if (!seats) missingFields.push('seats');
+
+    const message = `Error: orderData is missing the following information: ${missingFields.join(
+      ', '
+    )}. Quantity or either units & seats is required.`;
+
     const error = new Error(message);
     error.status = 400;
     error.statusText = message;
@@ -169,10 +196,11 @@ exports.transactionLineItems = (listing, orderData, providerCommission, customer
    *
    * By default OrderBreakdown prints line items inside LineItemUnknownItemsMaybe if the lineItem code is not recognized. */
 
+  const quantityOrSeats = !!units && !!seats ? { units, seats } : { quantity };
   const order = {
     code,
     unitPrice,
-    quantity,
+    ...quantityOrSeats,
     includeFor: ['customer', 'provider'],
   };
 

src/components/FieldNumber/FieldNumber.example.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
+import { Button } from '../../components';
+import FieldNumber from './FieldNumber';
+
+const formName = 'Styleguide.FieldNumber.Form';
+
+const FormComponent = props => (
+  <FinalForm
+    {...props}
+    formId={formName}
+    render={fieldRenderProps => {
+      const { form, handleSubmit, onChange, invalid, pristine, submitting } = fieldRenderProps;
+
+      const submitDisabled = invalid || pristine || submitting;
+
+      return (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit(e);
+          }}
+        >
+          <FormSpy onChange={onChange} subscription={{ values: true, dirty: true }} />
+          <FieldNumber
+            id="number-id1"
+            name="number-id1"
+            component="input"
+            label="Select number between 1 and 20"
+            minValue={1}
+            maxValue={20}
+          />
+
+          <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
+            Submit
+          </Button>
+        </form>
+      );
+    }}
+  />
+);
+
+export const Number = {
+  component: FormComponent,
+  props: {
+    onChange: formState => {
+      if (Object.keys(formState.values).length > 0) {
+        console.log('form values changed to:', formState.values);
+      }
+    },
+    onSubmit: values => {
+      console.log('Submit values of FieldNumber: ', values);
+    },
+  },
+  group: 'inputs',
+};

src/components/FieldNumber/FieldNumber.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Field } from 'react-final-form';
+import { injectIntl } from '../../util/reactIntl';
+
+import css from './FieldNumber.module.css';
+
+const decrement = 'decrement';
+const increment = 'increment';
+
+const getIconClasses = props => {
+  const { className, disabled } = props;
+  const classes = classNames(className, css.iconContainer, { [css.disabled]: disabled });
+  const iconClassName = classNames(css.icon, { [css.disabled]: disabled });
+
+  return {
+    classes,
+    iconClassName,
+  };
+};
+
+const IconMinus = props => {
+  const { classes, iconClassName } = getIconClasses(props);
+
+  return (
+    <svg
+      className={classes}
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="6" />
+      <path
+        className={iconClassName}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5 20C11.5 19.4477 11.9477 19 12.5 19H27.5C28.0523 19 28.5 19.4477 28.5 20C28.5 20.5523 28.0523 21 27.5 21H12.5C11.9477 21 11.5 20.5523 11.5 20Z"
+      />
+    </svg>
+  );
+};
+
+const IconPlus = props => {
+  const { classes, iconClassName } = getIconClasses(props);
+
+  return (
+    <svg
+      className={classes}
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="39" height="39" rx="6" />
+      <path
+        className={iconClassName}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20 11.5C20.5523 11.5 21 11.9477 21 12.5V19.0001H27.5C28.0523 19.0001 28.5 19.4478 28.5 20.0001C28.5 20.5524 28.0523 21.0001 27.5 21.0001H21V27.5C21 28.0523 20.5523 28.5 20 28.5C19.4477 28.5 19 28.0523 19 27.5V21.0001H12.5C11.9477 21.0001 11.5 20.5524 11.5 20.0001C11.5 19.4478 11.9477 19.0001 12.5 19.0001H19V12.5C19 11.9477 19.4477 11.5 20 11.5Z"
+      />
+    </svg>
+  );
+};
+
+const NumberInputComponent = props => {
+  const { value: rawValue, onChange } = props.input;
+  const { initialValue, minValue = 0, maxValue, svgClassName, intl } = props;
+  const value =
+    rawValue && rawValue >= minValue
+      ? Number.parseInt(rawValue)
+      : initialValue && initialValue >= minValue
+      ? Number.parseInt(initialValue)
+      : minValue;
+
+  const handleValueChange = event => {
+    const { name } = event.target;
+    if (name === increment) {
+      onChange(value + 1);
+    } else if (name === decrement) {
+      onChange(value - 1);
+    }
+  };
+
+  return (
+    <span className={css.numberInputWrapper}>
+      <button
+        className={css.numberButton}
+        name={decrement}
+        type="button"
+        onClick={handleValueChange}
+        disabled={value <= minValue}
+        title={intl.formatMessage({ id: 'NumberInput.decrementButton' })}
+      >
+        <IconMinus disabled={value <= minValue} className={svgClassName} />
+      </button>
+      <span className={css.numberInput}>{value}</span>
+      <button
+        className={css.numberButton}
+        name={increment}
+        type="button"
+        onClick={handleValueChange}
+        disabled={value >= maxValue}
+        title={intl.formatMessage({ id: 'NumberInput.incrementButton' })}
+      >
+        <IconPlus disabled={value >= maxValue} className={svgClassName} />
+      </button>
+    </span>
+  );
+};
+
+const NumberInput = injectIntl(NumberInputComponent);
+
+/**
+ * Renders a numeric selector with - and + icons
+ * @component
+ * @param {Object} props
+ * @param {string} props.id
+ * @param {string} props.name
+ * @param {string?} props.className
+ * @param {string?} props.rootClassName
+ * @param {string?} props.svgClassName
+ * @param {string?} props.textClassName
+ * @param {string?} props.label
+ * @param {number?} props.maxValue
+ * @param {number?} props.minValue
+ * @returns {JSX.Element} containing a numeric selector field that can be used in a form
+ */
+const FieldNumberComponent = props => {
+  const { rootClassName, className, textClassName, id, name, label } = props;
+
+  const classes = classNames(rootClassName || css.root, className);
+
+  return (
+    <span className={classes}>
+      {label ? (
+        <label htmlFor={id} className={textClassName}>
+          {label}
+        </label>
+      ) : null}
+      <Field name={name}>
+        {fieldRenderProps => {
+          return (
+            <div>
+              <NumberInput {...props} {...fieldRenderProps} />
+            </div>
+          );
+        }}
+      </Field>
+    </span>
+  );
+};
+
+export default FieldNumberComponent;

src/components/FieldNumber/FieldNumber.module.css

@@ -0,0 +1,91 @@
+@import '../../styles/customMediaQueries.css';
+
+.root {
+  position: relative;
+}
+
+.numberInputWrapper {
+  align-self: baseline;
+  height: 40px;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  min-width: 104px;
+}
+
+.numberButton {
+  stroke-width: 1px;
+  border-radius: 10%;
+  fill: var(--colorSecondaryButton);
+  height: 40px;
+  width: 40px;
+  cursor: pointer;
+  display: flex;
+  padding: 0px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+
+  svg {
+    pointer-events: none;
+  }
+}
+
+.numberButton:hover {
+  .iconContainer {
+    stroke: #b8bfd1;
+  }
+}
+
+.numberButton:focus {
+  outline: none;
+
+  .iconContainer {
+    stroke: #b8bfd1;
+  }
+}
+.numberButton:active {
+  .iconContainer {
+    fill: var(--colorGrey50);
+    stroke: #b8bfd1;
+  }
+}
+.numberButton:disabled {
+  cursor: not-allowed;
+
+  .disabled.iconContainer {
+    fill: var(--colorSecondaryButton);
+    stroke: #d8dce6;
+  }
+}
+
+.numberInput {
+  width: 60px;
+  text-align: center;
+  padding: 0px 10px;
+  cursor: default;
+  font-size: 16px;
+  font-weight: var(--fontWeightMedium);
+}
+
+.iconContainer {
+  fill: var(--colorWhite);
+  /* stroke color set to match the color of the input 
+  borders defined in marketplaceDefaults.css  */
+  stroke: #d8dce6;
+  stroke-width: 1px;
+}
+
+.icon {
+  stroke: var(--colorGrey700);
+  fill: var(--colorGrey700);
+}
+
+.disabled {
+  .icon {
+    stroke: var(--colorGrey200);
+    fill: var(--colorGrey200);
+  }
+}