Add a component for select custom fields

[MAILPOET-3220]

assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  assign,
+  find,
+} from 'lodash/fp';
+
+import MailPoet from 'mailpoet';
+import ReactSelect from 'common/form/react_select/react_select';
+
+import {
+  WordpressRoleFormItem,
+  OnFilterChange, SelectOption,
+} from '../../types';
+import { SegmentFormData } from '../../segment_form_data';
+
+interface Props {
+  onChange: OnFilterChange;
+  item: WordpressRoleFormItem;
+}
+
+interface ParamsType {
+  values?: {
+    value: string;
+  }[];
+}
+
+export const RadioSelect: React.FunctionComponent<Props> = ({ onChange, item }) => {
+  const customField = find({ id: Number(item.customFieldId) }, SegmentFormData.customFieldsList);
+  if (!customField) return null;
+  const params = (customField.params as ParamsType);
+  if (!params || !Array.isArray(params.values)) return null;
+
+  const options = params.values.map((currentValue) => ({
+    value: currentValue.value,
+    label: currentValue.value,
+  }));
+
+  return (
+    <>
+      <div className="mailpoet-gap" />
+      <ReactSelect
+        isFullWidth
+        placeholder={MailPoet.I18n.t('selectValue')}
+        options={options}
+        value={
+          item.value ? { value: item.value, label: item.value } : null
+        }
+        onChange={(option: SelectOption): void => {
+          onChange(
+            assign(item, { value: option.value, operator: 'equals' })
+          );
+        }}
+        automationId="segment-wordpress-role"
+      />
+    </>
+  );
+};

assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx

@@ -6,6 +6,7 @@ import ReactSelect from 'common/form/react_select/react_select';
 
 import { SegmentFormData } from '../segment_form_data';
 import { Text } from './custom_fields/text';
+import { RadioSelect } from './custom_fields/select';
 
 import {
   WordpressRoleFormItem,
@@ -30,6 +31,8 @@ interface Props {
 const componentsMap = {
   [CustomFieldsTypes.TEXT]: Text,
   [CustomFieldsTypes.TEXTAREA]: Text,
+  [CustomFieldsTypes.RADIO]: RadioSelect,
+  [CustomFieldsTypes.SELECT]: RadioSelect,
 };
 
 export const MailPoetCustomFields: React.FunctionComponent<Props> = ({ onChange, item }) => {
@@ -59,7 +62,12 @@ export const MailPoetCustomFields: React.FunctionComponent<Props> = ({ onChange,
           const customField = find({ id: Number(option.value) }, SegmentFormData.customFieldsList);
           if (!customField) return;
           onChange(
-            assign(item, { customFieldId: option.value, customFieldType: customField.type })
+            assign(item, {
+              customFieldId: option.value,
+              customFieldType: customField.type,
+              operator: undefined,
+              value: undefined,
+            })
           );
         }}
         automationId="segment-wordpress-role"

views/segments.html

@@ -151,6 +151,7 @@
     'equals': __('equals'),
     'contains': __('contains'),
     'value': __('value'),
+    'selectValue': __('Select value'),
 
     'before': _x('before', 'Meaning: "Subscriber subscribed before Aprile"'),
     'after': _x('after', 'Meaning: "Subscriber subscribed after April'),