From 6a2bf8dcad912a79b68c49e850c6d736d6cd6669 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Mon, 12 Apr 2021 12:19:38 +0200
Subject: [PATCH] Add operator field

[MAILPOET-3224]
---
 .../email_opens_absolute_count.tsx            | 53 +++++++++++++++----
 assets/js/src/segments/dynamic/types.ts       |  1 +
 views/segments.html                           |  2 +
 3 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
index a226a6f631..95d8b3856f 100644
--- a/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
+++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
@@ -1,22 +1,57 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { assign, compose, find } from 'lodash/fp';
+
+import { Grid } from 'common/grid';
+import MailPoet from 'mailpoet';
 
 import {
   EmailFormItem,
-  OnFilterChange,
+  OnFilterChange, SelectOption,
 } from '../types';
+import Select from '../../../common/form/react_select/react_select';
 
 interface Props {
   onChange: OnFilterChange;
   item: EmailFormItem;
 }
 
+const moreLessOptions = [
+  {
+    label: MailPoet.I18n.t('moreThan'),
+    value: 'more',
+  },
+  {
+    label: MailPoet.I18n.t('lessThan'),
+    value: 'less',
+  },
+];
+
 export const EmailOpensAbsoluteCountFields: React.FunctionComponent<Props> = ({
   onChange,
   item,
-}) => (
-  <>
-    <div className="mailpoet-form-field">
-      {item.name}
-    </div>
-  </>
-);
+}) => {
+  useEffect(() => {
+    if (item.operator === undefined) {
+      onChange(assign(item, { operator: 'more' }));
+    }
+  }, [onChange, item, item.operator]);
+
+  return (
+    <>
+      <Grid.CenteredRow>
+        <div className="mailpoet-form-field">
+          <div className="mailpoet-form-input mailpoet-form-select" data-automation-id="segment-email">
+            <Select
+              options={moreLessOptions}
+              value={find(['value', item.operator], moreLessOptions)}
+              onChange={(option: SelectOption): void => compose([
+                onChange,
+                assign(item),
+              ])({ operator: option.value })}
+            />
+          </div>
+        </div>
+      </Grid.CenteredRow>
+    </>
+  );
+};
diff --git a/assets/js/src/segments/dynamic/types.ts b/assets/js/src/segments/dynamic/types.ts
index 673ffdad7d..d7554ec498 100644
--- a/assets/js/src/segments/dynamic/types.ts
+++ b/assets/js/src/segments/dynamic/types.ts
@@ -41,6 +41,7 @@ export interface EmailFormItem extends FormItem {
   action?: string;
   newsletter_id?: string;
   link_id?: string;
+  operator?: string,
 }
 
 export type AnyFormItem = WordpressRoleFormItem | WooCommerceFormItem | EmailFormItem;
diff --git a/views/segments.html b/views/segments.html
index d39aad0461..d510bda7f2 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -135,6 +135,8 @@
     'selectUserRolePlaceholder': __('Select user role'),
     'emailActionOpened': _x('opened', 'Dynamic segment creation: when newsletter was opened'),
     'emailActionOpensAbsoluteCount': __('# of opens'),
+    'moreThan': __('more than'),
+    'lessThan': __('less than'),
     'emailActionNotOpened': _x('not opened', 'Dynamic segment creation: when newsletter was not opened'),
     'emailActionClicked': _x('clicked', 'Dynamic segment creation: when a newsletter link was clicked'),
     'emailActionNotClicked': _x('not clicked', 'Dynamic segment creation: when a newsletter link was not clicked'),