FieldCustomAttributeSelect

src/components/FieldCustomAttributeSelect/FieldCustomAttributeSelect.css

@@ -0,0 +1,4 @@
+@import '../../marketplace.css';
+
+.root {
+}

src/components/FieldCustomAttributeSelect/FieldCustomAttributeSelect.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { string } from 'prop-types';
+import { intlShape, injectIntl } from 'react-intl';
+import classNames from 'classnames';
+import config from '../../config';
+import { required } from '../../util/validators';
+import { SelectField } from '../../components';
+
+import css from './FieldCustomAttributeSelect.css';
+
+const FieldCustomAttributeSelect = props => {
+  const { className, rootClassName, id, customAttribute, intl } = props;
+
+  // Does custom attribute 'customAttribute' exists in current marketplace configuration
+  const ca = config.customAttributes && config.customAttributes[customAttribute];
+  const isSingleChoice = ca && ca.select === 'single' && ca.type === 'string';
+
+  // If custom attribute config for given 'customAttribute' doesn't exist, don't print SelectField
+  if (!isSingleChoice) {
+    return null;
+  }
+
+  const caLabel = intl.formatMessage({ id: `FieldCustomAttributeSelect.${customAttribute}.label` });
+  const caPlaceholder = intl.formatMessage({
+    id: `FieldCustomAttributeSelect.${customAttribute}.placeholder`,
+  });
+  const caRequired = required(
+    intl.formatMessage({
+      id: `FieldCustomAttributeSelect.${customAttribute}.required`,
+    })
+  );
+
+  const classes = classNames(rootClassName || css.root, className);
+
+  return (
+    <SelectField
+      className={classes}
+      name={customAttribute}
+      id={id}
+      label={caLabel}
+      validate={caRequired}
+    >
+      <option value="">{caPlaceholder}</option>
+      {ca.values.map(c => (
+        <option key={c} value={c}>
+          {intl.formatMessage({ id: `FieldCustomAttributeSelect.${customAttribute}.option.${c}` })}
+        </option>
+      ))}
+    </SelectField>
+  );
+};
+
+FieldCustomAttributeSelect.defaultProps = {
+  className: null,
+  rootClassName: null,
+};
+
+FieldCustomAttributeSelect.propTypes = {
+  className: string,
+  rootClassName: string,
+  id: string.isRequired,
+  customAttribute: string.isRequired,
+
+  // From react-intl
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FieldCustomAttributeSelect);

src/components/index.js

@@ -27,6 +27,9 @@ export { default as EditListingWizard } from './EditListingWizard/EditListingWiz
 export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
 export { default as ExternalLink } from './ExternalLink/ExternalLink';
 export { default as FilterPanel } from './FilterPanel/FilterPanel';
+export {
+  default as FieldCustomAttributeSelect,
+} from './FieldCustomAttributeSelect/FieldCustomAttributeSelect';
 export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
 export { default as Footer } from './Footer/Footer';
 export { default as Form } from './Form/Form';

src/translations/en.json

@@ -184,6 +184,13 @@
   "EnquiryForm.messageRequired": "A message is required",
   "EnquiryForm.sendEnquiryError": "Whoops, something went wrong. Please try again.",
   "EnquiryForm.submitButtonText": "Send enquiry",
+  "FieldCustomAttributeSelect.category.label": "Sauna type",
+  "FieldCustomAttributeSelect.category.option.mountain": "Mountain",
+  "FieldCustomAttributeSelect.category.option.other": "Other",
+  "FieldCustomAttributeSelect.category.option.road": "Road",
+  "FieldCustomAttributeSelect.category.option.track": "Track",
+  "FieldCustomAttributeSelect.category.placeholder": "Choose the type of your sauna…",
+  "FieldCustomAttributeSelect.category.required": "You need to select a category for your sauna.",
   "FieldReviewRating.star1": "Bad experience - 1 star",
   "FieldReviewRating.star2": "Not so nice - 2 stars",
   "FieldReviewRating.star3": "OK - 3 stars",