diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx new file mode 100644 index 0000000000..57f278f339 --- /dev/null +++ b/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 = ({ 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 ( + <> +
+ { + onChange( + assign(item, { value: option.value, operator: 'equals' }) + ); + }} + automationId="segment-wordpress-role" + /> + + ); +}; diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx index 6058fcafd0..5d31e4f299 100644 --- a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx +++ b/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 = ({ onChange, item }) => { @@ -59,7 +62,12 @@ export const MailPoetCustomFields: React.FunctionComponent = ({ 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" diff --git a/views/segments.html b/views/segments.html index 828dbd63f6..6d93e3f4fc 100644 --- a/views/segments.html +++ b/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'),