From 40ea2f39af91b6e5b084d935fac0616b801f7926 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Mon, 12 Apr 2021 10:49:10 +0200
Subject: [PATCH] Add a component for # of opens

[MAILPOET-3224]
---
 .../dynamic_segments_filters/email.tsx        | 28 +++++++++++++++----
 .../email_opens_absolute_count.tsx            | 22 +++++++++++++++
 views/segments.html                           |  1 +
 3 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx

diff --git a/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx b/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
index 324b58328d..878c42910b 100644
--- a/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
+++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
@@ -9,8 +9,10 @@ import {
 } from '../types';
 
 import { EmailStatisticsFields } from './email_statistics';
+import { EmailOpensAbsoluteCountFields } from './email_opens_absolute_count';
 
 export const EmailSegmentOptions = [
+  { value: 'opensAbsoluteCount', label: MailPoet.I18n.t('emailActionOpensAbsoluteCount'), group: SegmentTypes.Email },
   { value: 'opened', label: MailPoet.I18n.t('emailActionOpened'), group: SegmentTypes.Email },
   { value: 'notOpened', label: MailPoet.I18n.t('emailActionNotOpened'), group: SegmentTypes.Email },
   { value: 'clicked', label: MailPoet.I18n.t('emailActionClicked'), group: SegmentTypes.Email },
@@ -33,9 +35,23 @@ interface Props {
   item: EmailFormItem;
 }
 
-export const EmailFields: React.FunctionComponent<Props> = ({ onChange, item }) => (
-  <EmailStatisticsFields
-    item={item}
-    onChange={onChange}
-  />
-);
+const componentsMap = {
+  [EmailActionTypes.OPENS_ABSOLUTE_COUNT]: EmailOpensAbsoluteCountFields,
+  [EmailActionTypes.CLICKED]: EmailStatisticsFields,
+  [EmailActionTypes.NOT_CLICKED]: EmailStatisticsFields,
+  [EmailActionTypes.OPENED]: EmailStatisticsFields,
+  [EmailActionTypes.NOT_OPENED]: EmailStatisticsFields,
+};
+
+export const EmailFields: React.FunctionComponent<Props> = ({ onChange, item }) => {
+  const Component = componentsMap[item.action];
+
+  if (!Component) return null;
+
+  return (
+    <Component
+      item={item}
+      onChange={onChange}
+    />
+  );
+};
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
new file mode 100644
index 0000000000..a226a6f631
--- /dev/null
+++ b/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  EmailFormItem,
+  OnFilterChange,
+} from '../types';
+
+interface Props {
+  onChange: OnFilterChange;
+  item: EmailFormItem;
+}
+
+export const EmailOpensAbsoluteCountFields: React.FunctionComponent<Props> = ({
+  onChange,
+  item,
+}) => (
+  <>
+    <div className="mailpoet-form-field">
+      {item.name}
+    </div>
+  </>
+);
diff --git a/views/segments.html b/views/segments.html
index 3e53ce4e54..d39aad0461 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -134,6 +134,7 @@
     'selectActionPlaceholder': __('Select action'),
     'selectUserRolePlaceholder': __('Select user role'),
     'emailActionOpened': _x('opened', 'Dynamic segment creation: when newsletter was opened'),
+    'emailActionOpensAbsoluteCount': __('# of opens'),
     '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'),