EditListingDescriptionForm uses FieldCustomAttributeSelect

src/containers/EditListingDescriptionForm/EditListingDescriptionForm.helpers.js

@@ -1,47 +0,0 @@
-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.select === 'single' && caCategory.type === 'string';
-
-  // 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

@@ -6,9 +6,8 @@ import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import * as propTypes from '../../util/propTypes';
 import { maxLength, required } from '../../util/validators';
-import { Form, Button, TextInputField } from '../../components';
+import { FieldCustomAttributeSelect, Form, Button, TextInputField } from '../../components';
 
-import { CategorySelectFieldMaybe } from './EditListingDescriptionForm.helpers';
 import css from './EditListingDescriptionForm.css';
 
 const TITLE_MAX_LENGTH = 60;
@@ -86,7 +85,7 @@ const EditListingDescriptionFormComponent = props => {
         validate={[required(descriptionRequiredMessage)]}
       />
 
-      <CategorySelectFieldMaybe form={form} intl={intl} />
+      <FieldCustomAttributeSelect id={`${form}.category`} customAttribute="category" />
 
       <Button
         className={css.submitButton}

src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap

@@ -60,7 +60,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
     <label
       htmlFor="fakeTestForm.category"
     >
-      EditListingDescriptionForm.categoryLabel
+      FieldCustomAttributeSelect.category.label
     </label>
     <select
       className=""
@@ -76,27 +76,27 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
       <option
         value=""
       >
-        EditListingDescriptionForm.categoryPlaceholder
+        FieldCustomAttributeSelect.category.placeholder
       </option>
       <option
         value="road"
       >
-        EditListingDescriptionForm.categoryOption.road
+        FieldCustomAttributeSelect.category.option.road
       </option>
       <option
         value="mountain"
       >
-        EditListingDescriptionForm.categoryOption.mountain
+        FieldCustomAttributeSelect.category.option.mountain
       </option>
       <option
         value="track"
       >
-        EditListingDescriptionForm.categoryOption.track
+        FieldCustomAttributeSelect.category.option.track
       </option>
       <option
         value="other"
       >
-        EditListingDescriptionForm.categoryOption.other
+        FieldCustomAttributeSelect.category.option.other
       </option>
     </select>
   </div>

src/translations/en.json

@@ -104,13 +104,6 @@
   "DateRangeInputField.invalidStartDate": "The start date is not valid",
   "DateRangeInputField.screenReaderInputMessage": "Date input",
   "DateRangeInputField.startDatePlaceholderText": "Add start date",
-  "EditListingDescriptionForm.categoryLabel": "Sauna type",
-  "EditListingDescriptionForm.categoryOption.mountain": "Mountain",
-  "EditListingDescriptionForm.categoryOption.other": "Other",
-  "EditListingDescriptionForm.categoryOption.road": "Road",
-  "EditListingDescriptionForm.categoryOption.track": "Track",
-  "EditListingDescriptionForm.categoryPlaceholder": "Choose the type of your sauna…",
-  "EditListingDescriptionForm.categoryRequired": "You need to select a category for your sauna.",
   "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.",