From 75c22f5f5fc4927abfc528081ac202312ecb2c5d Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Wed, 12 May 2021 14:01:26 +0200
Subject: [PATCH] Create a component for custom field

[MAILPOET-3220]
---
 .../dynamic_segments_filters/subscriber.tsx   |  3 ++
 .../subscriber_mailpoet_custom_field.tsx      | 47 +++++++++++++++++++
 .../src/segments/dynamic/segment_form_data.ts |  2 +-
 assets/js/src/segments/dynamic/types.ts       |  2 +
 lib/AdminPages/Pages/Segments.php             |  2 +-
 views/segments.html                           |  1 +
 6 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx

diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
index 93b0a171aa..f55e74478c 100644
--- a/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
+++ b/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 {
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
new file mode 100644
index 0000000000..911be5c522
--- /dev/null
+++ b/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"
+    />
+  );
+};
diff --git a/assets/js/src/segments/dynamic/segment_form_data.ts b/assets/js/src/segments/dynamic/segment_form_data.ts
index 30958f738e..9dd0d2fe34 100644
--- a/assets/js/src/segments/dynamic/segment_form_data.ts
+++ b/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;
diff --git a/assets/js/src/segments/dynamic/types.ts b/assets/js/src/segments/dynamic/types.ts
index 4a76f140e5..251a1be144 100644
--- a/assets/js/src/segments/dynamic/types.ts
+++ b/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 {
diff --git a/lib/AdminPages/Pages/Segments.php b/lib/AdminPages/Pages/Segments.php
index dc81560614..43cf7370e3 100644
--- a/lib/AdminPages/Pages/Segments.php
+++ b/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();
diff --git a/views/segments.html b/views/segments.html
index 8fd9e32c1d..da6d8b67bc 100644
--- a/views/segments.html
+++ b/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'),