Add EditListingFeaturesForm component

src/config.js

@@ -238,6 +238,43 @@ const exampleCustomAttributes = {
   },
 };
 
+const amenities = [
+  {
+    name: 'towels',
+    text: 'Towels',
+  },
+  {
+    name: 'bathroom',
+    text: 'Bathroom',
+  },
+  {
+    name: 'swimming_pool',
+    text: 'Swimming pool',
+  },
+  {
+    name: 'own_drinks',
+    text: 'Own drinks allowed',
+  },
+  {
+    name: 'jacuzzi',
+    text: 'Jacuzzi',
+  },
+  {
+    name: 'audiovisual_entertainment',
+    text: 'Audiovisual entertainment',
+  },
+  {
+    name: 'barbeque',
+    text: 'Barbeque',
+  },
+  {
+    name: 'own_food_allowed',
+    text: 'Own food allowed',
+  },
+];
+
+const saunatime = { amenities };
+
 // To use the example custom attributes, set the
 // REACT_APP_USE_EXAMPLE_CUSTOM_ATTRIBUTES variable to `true` in the
 // gitignored `.env.development.local` file
@@ -298,6 +335,7 @@ const config = {
   facebookAppId,
   sentryDsn,
   usingSSL,
+  saunatime,
 };
 
 export default config;

src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css

@@ -0,0 +1,34 @@
+@import '../../marketplace.css';
+
+:root {
+  --formMargins: {
+    margin-bottom: 24px;
+
+    @media (--viewportMedium) {
+      margin-bottom: 32px;
+    }
+  }
+}
+
+.root {
+}
+
+.features {
+  @apply --formMargins;
+}
+
+.error {
+  color: var(--failColor);
+}
+
+.submitButton {
+  margin-top: auto;
+  margin-bottom: 24px;
+  flex-shrink: 0;
+
+  @media (--viewportLarge) {
+    display: inline-block;
+    width: 241px;
+    margin-top: 100px;
+  }
+}

src/containers/EditListingFeaturesForm/EditListingFeaturesForm.example.js

@@ -0,0 +1,18 @@
+import EditListingFeaturesForm from './EditListingFeaturesForm';
+
+const initialValueArray = ['towels', 'jacuzzi', 'bathroom'];
+
+export const Amenities = {
+  component: EditListingFeaturesForm,
+  props: {
+    onSubmit: values => console.log('EditListingFeaturesForm submit:', values),
+    initialValues: initialValueArray.reduce((map, value) => {
+      map[value] = true;
+      return map;
+    }, {}),
+    saveActionMsg: 'Save amenities',
+    updated: false,
+    updateInProgress: false,
+  },
+  group: 'forms',
+};

src/containers/EditListingFeaturesForm/EditListingFeaturesForm.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { FormattedMessage } from 'react-intl';
+
+import { propTypes } from '../../util/types';
+import config from '../../config';
+import { Button, FieldGroupCheckbox, Form } from '../../components';
+
+import css from './EditListingFeaturesForm.css';
+
+const EditListingFeaturesFormComponent = props => {
+  const {
+    form,
+    submitting,
+    disabled,
+    rootClassName,
+    className,
+    handleSubmit,
+    saveActionMsg,
+    updated,
+    updateError,
+    updateInProgress,
+  } = props;
+
+  const classes = classNames(rootClassName || css.root, className);
+  const submitReady = updated;
+  const submitInProgress = submitting || updateInProgress;
+  const submitDisabled = disabled || submitInProgress;
+
+  const errorMessage = updateError ? (
+    <p className={css.error}>
+      <FormattedMessage id="EditListingFeaturesForm.updateFailed" />
+    </p>
+  ) : null;
+
+  return (
+    <Form className={classes} onSubmit={handleSubmit}>
+      {errorMessage}
+
+      <FieldGroupCheckbox
+        className={css.features}
+        id={`${form}.amenities`}
+        options={config.saunatime.amenities}
+      />
+
+      <Button
+        className={css.submitButton}
+        type="submit"
+        inProgress={submitInProgress}
+        disabled={submitDisabled}
+        ready={submitReady}
+      >
+        {saveActionMsg}
+      </Button>
+    </Form>
+  );
+};
+
+EditListingFeaturesFormComponent.defaultProps = {
+  rootClassName: null,
+  className: null,
+  updateError: null,
+};
+
+const { bool, func, string } = PropTypes;
+
+EditListingFeaturesFormComponent.propTypes = {
+  ...formPropTypes,
+  rootClassName: string,
+  className: string,
+  handleSubmit: func.isRequired,
+  saveActionMsg: string.isRequired,
+  updated: bool.isRequired,
+  updateError: propTypes.error,
+  updateInProgress: bool.isRequired,
+};
+
+const formName = 'EditListingFeaturesForm';
+
+export default reduxForm({ form: formName })(EditListingFeaturesFormComponent);

src/containers/index.js

@@ -7,6 +7,9 @@ export { default as ContactDetailsPage } from './ContactDetailsPage/ContactDetai
 export {
   default as EditListingDescriptionForm,
 } from './EditListingDescriptionForm/EditListingDescriptionForm';
+export {
+  default as EditListingFeaturesForm,
+} from './EditListingFeaturesForm/EditListingFeaturesForm';
 export {
   default as EditListingLocationForm,
 } from './EditListingLocationForm/EditListingLocationForm';

src/examples.js

@@ -56,6 +56,7 @@ import * as UserCard from './components/UserCard/UserCard.example';
 import * as BookingDatesForm from './containers/BookingDatesForm/BookingDatesForm.example';
 import * as Colors from './containers/StyleguidePage/Colors.example';
 import * as EditListingDescriptionForm from './containers/EditListingDescriptionForm/EditListingDescriptionForm.example';
+import * as EditListingFeaturesForm from './containers/EditListingFeaturesForm/EditListingFeaturesForm.example';
 import * as EditListingLocationForm from './containers/EditListingLocationForm/EditListingLocationForm.example';
 import * as EditListingPhotosForm from './containers/EditListingPhotosForm/EditListingPhotosForm.example';
 import * as EditListingPoliciesForm from './containers/EditListingPoliciesForm/EditListingPoliciesForm.example';
@@ -84,6 +85,7 @@ export {
   CurrencyInputField,
   DateRangeInputField,
   EditListingDescriptionForm,
+  EditListingFeaturesForm,
   EditListingLocationForm,
   EditListingPhotosForm,
   EditListingPoliciesForm,

src/translations/en.json

@@ -119,6 +119,7 @@
   "EditListingDescriptionForm.updateFailed": "Failed to update listing. Please try again.",
   "EditListingDescriptionPanel.createListingTitle": "Add your sauna",
   "EditListingDescriptionPanel.title": "Edit details of {listingTitle}",
+  "EditListingFeaturesForm.updateFailed": "Failed to update listing. Please try again.",
   "EditListingLocationForm.address": "Address",
   "EditListingLocationForm.addressNotRecognized": "We didn't recognize this location. Please try another location.",
   "EditListingLocationForm.addressPlaceholder": "123 Example Street",