Add stats notifications

[MAILPOET-2677]

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>
+    </>
+  );
+}