Add stats notifications

[MAILPOET-2677]

assets/css/src/settings.scss

@@ -37,3 +37,7 @@
 .mailpoet-settings-inputs .regular-text p {
   font-size: 14px;
 }
+
+.mailpoet-settings-grid .mailpoet_error_item:before {
+  content: '✗ ';
+}

assets/js/src/settings/pages/basics/index.tsx

@@ -5,6 +5,7 @@ import DefaultSender from './default_sender';
 import SubscribeOn from './subscribe_on';
 import ManageSubscription from './manage_subscription';
 import UnsubscribePage from './unsubscribe_page';
+import StatsNotifications from './stats_notifications';
 
 export default function Basics() {
   return (
@@ -22,6 +23,7 @@ export default function Basics() {
       />
       <ManageSubscription />
       <UnsubscribePage />
+      <StatsNotifications />
       <SaveButton />
     </div>
   );

assets/js/src/settings/pages/basics/stats_notifications.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { t, onToggle, onChange } from 'settings/utils';
+import { useSetting, useAction } from 'settings/store/hooks';
+import { Label, Inputs } from 'settings/components';
+
+export default function StatsNotifications() {
+  const [enabled, setEnabled] = useSetting('stats_notifications', 'enabled');
+  const [automated, setAutomated] = useSetting('stats_notifications', 'automated');
+  const [email, setEmail] = useSetting('stats_notifications', 'address');
+  const setErrorFlag = useAction('setErrorFlag');
+  const hasError = (enabled === '1' || automated === '1') && email.trim() === '';
+  React.useEffect(() => {
+    setErrorFlag(hasError);
+  }, [hasError, setErrorFlag]);
+
+  return (
+    <>
+      <Label
+        title={t`statsNotifsTitle`}
+        description={t`statsNotifsDescription`}
+        htmlFor="stats-enabled"
+      />
+      <Inputs>
+        <input
+          type="checkbox"
+          id="stats-enabled"
+          checked={enabled === '1'}
+          onChange={onToggle(setEnabled)}
+        />
+        <label htmlFor="stats-enabled">{t`newslettersAndPostNotifs`}</label>
+        <br />
+        <input
+          type="checkbox"
+          id="stats-automated"
+          checked={automated === '1'}
+          onChange={onToggle(setAutomated)}
+        />
+        <label htmlFor="stats-automated">{t`welcomeAndWcEmails`}</label>
+        <br />
+        <input type="email" value={email} onChange={onChange(setEmail)} placeholder="me@mydomain.com" />
+        {hasError && (
+          <div className="mailpoet_error_item mailpoet_error">
+            {t`pleaseFillEmail`}
+          </div>
+        )}
+      </Inputs>
+    </>
+  );
+}

views/settings.html

@@ -62,6 +62,15 @@
     'unsubscribeDescription1': __('When your subscribers click the "Unsubscribe" link, they will be directed to this page.'),
     'unsubscribeDescription2': __('If you want to use a custom Unsubscribe page, simply paste this shortcode on to a WordPress page: [mailpoet_manage text="Manage your subscription"]'),
 
+    'statsNotifsTitle': _x('Stats notifications', 'name of a setting to automatically send statistics (newsletter open rate, click rate, etc) by email'),
+    'statsNotifsDescription': _x(
+      'Enter the email address that should receive your newsletter’s stats 24 hours after it has been sent, or every first Monday of the month for Welcome Emails and WooCommerce emails.',
+      'Please reuse the current translations of “Welcome Emails”'
+    ),
+    'newslettersAndPostNotifs': __('Newsletters and Post Notifications'),
+    'welcomeAndWcEmails': _x('Welcome Emails and WooCommerce emails', 'Please reuse the current translations of “Welcome Emails”'),
+    'pleaseFillEmail': __('Please fill the email address.'),
+
     'reinstallConfirmation': __('Are you sure? All of your MailPoet data will be permanently erased (newsletters, statistics, subscribers, etc.).'),
     'announcementHeader': __('Get notified when someone subscribes'),
     'announcementParagraph1': __('It’s been a popular feature request from our users, we hope you get lots of emails about all your new subscribers!'),