Custom attributes: EditListingDescriptionForm can ask category

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.helpers.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import config from '../../config';
+import { required } from '../../util/validators';
+import { SelectField } from '../../components';
+
+import css from './EditListingDescriptionForm.css';
+
+export const CategorySelectFieldMaybe = props => {
+  const { form, intl } = props;
+
+  // Does custom attribute 'category' exists in current marketplace configuration
+  const caCategory = config.customAttributes && config.customAttributes.category;
+  const isSingleChoiceCategory = caCategory && caCategory.type === 'singleChoice';
+
+  // If custom attribute for category doesn't exist, don't print SelectField
+  if (!isSingleChoiceCategory) {
+    return null;
+  }
+
+  const categoryLabel = intl.formatMessage({ id: 'EditListingDescriptionForm.categoryLabel' });
+  const categoryPlaceholder = intl.formatMessage({
+    id: 'EditListingDescriptionForm.categoryPlaceholder',
+  });
+  const categoryRequired = required(
+    intl.formatMessage({
+      id: 'EditListingDescriptionForm.categoryRequired',
+    })
+  );
+
+  return (
+    <SelectField
+      className={css.selectCategory}
+      name="category"
+      id={`${form}.category`}
+      label={categoryLabel}
+      validate={categoryRequired}
+    >
+      <option value="">{categoryPlaceholder}</option>
+      {caCategory.values.map(c => (
+        <option key={c} value={c}>
+          {intl.formatMessage({ id: `EditListingDescriptionForm.categoryOption.${c}` })}
+        </option>
+      ))}
+    </SelectField>
+  );
+};

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js

@@ -8,6 +8,7 @@ import * as propTypes from '../../util/propTypes';
 import { maxLength, required } from '../../util/validators';
 import { Form, Button, TextInputField } from '../../components';
 
+import { CategorySelectFieldMaybe } from './EditListingDescriptionForm.helpers';
 import css from './EditListingDescriptionForm.css';
 
 const TITLE_MAX_LENGTH = 60;
@@ -85,6 +86,8 @@ const EditListingDescriptionFormComponent = props => {
         validate={[required(descriptionRequiredMessage)]}
       />
 
+      <CategorySelectFieldMaybe form={form} intl={intl} />
+
       <Button
         className={css.submitButton}
         type="submit"

src/translations/en.json

@@ -104,6 +104,13 @@
   "DateRangeInputField.invalidStartDate": "The start date is not valid",
   "DateRangeInputField.screenReaderInputMessage": "Date input",
   "DateRangeInputField.startDatePlaceholderText": "Add start date",
+  "EditListingDescriptionForm.categoryLabel": "Sauna type",
+  "EditListingDescriptionForm.categoryPlaceholder": "Choose the type of your sauna…",
+  "EditListingDescriptionForm.categoryRequired": "You need to select a category for your sauna.",
+  "EditListingDescriptionForm.categoryOption.road": "Road",
+  "EditListingDescriptionForm.categoryOption.mountain": "Mountain",
+  "EditListingDescriptionForm.categoryOption.other": "Other",
+  "EditListingDescriptionForm.categoryOption.track": "Track",
   "EditListingDescriptionForm.description": "Describe your sauna",
   "EditListingDescriptionForm.descriptionPlaceholder": "How many people can fit at once? Does the sauna come with towels?",
   "EditListingDescriptionForm.descriptionRequired": "A description is required.",