From 8b2f5b6433a7c0e4c9ab2d41ae96f5ab2d36e90f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Fri, 10 Sep 2021 10:26:35 +0200
Subject: [PATCH] Add component with privacy protection notice

[MAILPOET-3742]
---
 assets/js/src/segments/dynamic/form.tsx       |  2 +
 .../dynamic/privacy_protection_notice.tsx     | 43 +++++++++++++++++++
 views/segments.html                           |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 assets/js/src/segments/dynamic/privacy_protection_notice.tsx

diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index be9e17d108..db8a8e0adc 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -16,6 +16,7 @@ import { isFormValid } from './validator';
 import { MinusIcon } from '../../common/button/icon/minus';
 import plusIcon from '../../common/button/icon/plus';
 import APIErrorsNotice from '../../notices/api_errors_notice';
+import { PrivacyProtectionNotice } from './privacy_protection_notice';
 
 import {
   FilterRow,
@@ -176,6 +177,7 @@ export const Form: React.FunctionComponent<Props> = ({
         </div>
         <div className="mailpoet-segments-counter-section">
           <SubscribersCounter />
+          <PrivacyProtectionNotice />
         </div>
         <div className="mailpoet-form-actions">
           <Button
diff --git a/assets/js/src/segments/dynamic/privacy_protection_notice.tsx b/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
new file mode 100644
index 0000000000..8efe1a581e
--- /dev/null
+++ b/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import { useSelect } from '@wordpress/data';
+
+import { EmailActionTypes, Segment } from './types';
+
+const PrivacyProtectionNotice: React.FunctionComponent = () => {
+  const segment: Segment = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getSegment(),
+    []
+  );
+
+  const opensActions: string[] = [
+    EmailActionTypes.OPENED,
+    EmailActionTypes.OPENS_ABSOLUTE_COUNT,
+    EmailActionTypes.MACHINE_OPENED,
+    EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT,
+    EmailActionTypes.NOT_OPENED,
+  ];
+
+  let containsOpensFilter = false;
+  segment.filters.forEach((formItem) => {
+    if (opensActions.includes(formItem.action)) {
+      containsOpensFilter = true;
+    }
+  });
+
+  if (!containsOpensFilter) {
+    return (
+      <span />
+    );
+  }
+
+  return (
+    <div className="mailpoet-form-field">
+      <span className="mailpoet-form-notice-message">
+        {(MailPoet.I18n.t('privacyProtectionNotice'))}
+      </span>
+    </div>
+  );
+};
+
+export { PrivacyProtectionNotice };
diff --git a/views/segments.html b/views/segments.html
index 6804126295..b406af0a60 100644
--- a/views/segments.html
+++ b/views/segments.html
@@ -229,5 +229,6 @@
     'subscribersCountWereCalculated': __('Lists and Segments subscribers counts were calculated'),
     'subscribersMinutesAgo': __('minutes ago'),
     'recalculateNow': __('Recalculate now'),
+    'privacyProtectionNotice': __('Due to email privacy protections, some opens may not be tracked. Consider using a different engagement metric.'),
   }) %>
 <% endblock %>