Create a component for custom field

[MAILPOET-3220]

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

@@ -9,6 +9,7 @@ import {
 } from '../types';
 import { WordpressRoleFields } from './subscriber_wordpress_role';
 import { SubscribedDateFields, SubscribedDateOperator } from './subscriber_subscribed_date';
+import { MailPoetCustomFields } from './subscriber_mailpoet_custom_field';
 
 export function validateSubscriber(formItems: WordpressRoleFormItem): boolean {
   if ((!formItems.action) || (formItems.action === SubscriberActionTypes.WORDPRESS_ROLE)) {
@@ -35,6 +36,7 @@ export function validateSubscriber(formItems: WordpressRoleFormItem): boolean {
 }
 
 export const SubscriberSegmentOptions = [
+  { value: SubscriberActionTypes.MAILPOET_CUSTOM_FIELD, label: MailPoet.I18n.t('mailpoetCustomField'), group: SegmentTypes.WordPressRole },
   { value: SubscriberActionTypes.SUBSCRIBED_DATE, label: MailPoet.I18n.t('subscribedDate'), group: SegmentTypes.WordPressRole },
   { value: SubscriberActionTypes.WORDPRESS_ROLE, label: MailPoet.I18n.t('segmentsSubscriber'), group: SegmentTypes.WordPressRole },
 ];
@@ -42,6 +44,7 @@ export const SubscriberSegmentOptions = [
 const componentsMap = {
   [SubscriberActionTypes.WORDPRESS_ROLE]: WordpressRoleFields,
   [SubscriberActionTypes.SUBSCRIBED_DATE]: SubscribedDateFields,
+  [SubscriberActionTypes.MAILPOET_CUSTOM_FIELD]: MailPoetCustomFields,
 };
 
 interface Props {

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { assign, find } from 'lodash/fp';
+import MailPoet from 'mailpoet';
+
+import Select from 'common/form/react_select/react_select';
+import { SegmentFormData } from '../segment_form_data';
+
+import {
+  WordpressRoleFormItem,
+  OnFilterChange,
+  SelectOption,
+} from '../types';
+
+interface Props {
+  onChange: OnFilterChange;
+  item: WordpressRoleFormItem;
+}
+
+export const MailPoetCustomFields: React.FunctionComponent<Props> = ({ onChange, item }) => {
+  const options = SegmentFormData.customFieldsList.map((currentValue) => ({
+    value: currentValue.id.toString(),
+    label: currentValue.name,
+  }));
+
+  return (
+    <Select
+      isFullWidth
+      placeholder={MailPoet.I18n.t('selectUserRolePlaceholder')}
+      options={options}
+      value={
+        find(
+          (option) => {
+            if (!item.customFieldId) return undefined;
+            return item.customFieldId === option.value;
+          },
+          options
+        )
+      }
+      onChange={(option: SelectOption): void => {
+        const customField = find({ id: Number(option.value) }, SegmentFormData.customFieldsList);
+        if (!customField) return;
+        onChange(assign(item, { customFieldId: option.value, customFieldType: customField.type }));
+      }}
+      automationId="segment-wordpress-role"
+    />
+  );
+};

assets/js/src/segments/dynamic/segment_form_data.ts

@@ -37,7 +37,7 @@ interface SegmentFormDataWindow extends Window {
     type: string;
     params: Record<string, unknown>;
     updated_at: string;
-  }
+  }[];
 
   mailpoet_can_use_woocommerce_subscriptions: boolean;
   mailpoet_woocommerce_currency_symbol: string;

assets/js/src/segments/dynamic/types.ts

@@ -16,6 +16,7 @@ export enum EmailActionTypes {
 }
 
 export enum SubscriberActionTypes {
+  MAILPOET_CUSTOM_FIELD = 'mailpoetCustomField',
   WORDPRESS_ROLE = 'wordpressRole',
   SUBSCRIBED_DATE = 'subscribedDate',
 }
@@ -40,6 +41,7 @@ export interface WordpressRoleFormItem extends FormItem {
   wordpressRole?: string;
   operator?: string;
   value?: string;
+  customFieldId: string;
 }
 
 export interface WooCommerceFormItem extends FormItem {

lib/AdminPages/Pages/Segments.php

@@ -89,7 +89,7 @@ class Segments {
     $data['subscriber_count'] = $this->subscribersFeature->getSubscribersCount();
     $data['has_premium_support'] = $this->subscribersFeature->hasPremiumSupport();
     $data['mss_key_invalid'] = ($this->servicesChecker->isMailPoetAPIKeyValid() === false);
-    $customFields = $this->customFieldsRepository->findAll();
+    $customFields = $this->customFieldsRepository->findBy([], ['name' => 'asc']);
     $data['custom_fields'] = $this->customFieldsResponseBuilder->buildBatch($customFields);
 
     $wpRoles = $this->wp->getEditableRoles();

views/segments.html

@@ -165,6 +165,7 @@
     'segmentsTipLink': __('Read more.'),
     'subscribedDate': __('subscribed date'),
     'segmentsSubscriber': __('WordPress user role'),
+    'mailpoetCustomField': __('MailPoet custom field'),
     'segmentsActiveSubscription': __('has an active subscription'),
     'woocommerceSubscriptions': _x('WooCommerce Subscriptions', 'Dynamic segment creation: User selects this to use any WooCommerce Subscriptions filters'),
     'selectWooSubscription': __('Search subscriptions'),