Add new subscriber notifications

[MAILPOET-2677]

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

@@ -6,6 +6,7 @@ import SubscribeOn from './subscribe_on';
 import ManageSubscription from './manage_subscription';
 import UnsubscribePage from './unsubscribe_page';
 import StatsNotifications from './stats_notifications';
+import NewSubscriberNotifications from './new_subscriber_notifications';
 
 export default function Basics() {
   return (
@@ -24,6 +25,7 @@ export default function Basics() {
       <ManageSubscription />
       <UnsubscribePage />
       <StatsNotifications />
+      <NewSubscriberNotifications />
       <SaveButton />
     </div>
   );

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

@@ -0,0 +1,48 @@
+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 NewSubscriberNotifications() {
+  const [enabled, setEnabled] = useSetting('subscriber_email_notification', 'enabled');
+  const [email, setEmail] = useSetting('subscriber_email_notification', 'address');
+  const setErrorFlag = useAction('setErrorFlag');
+  const hasError = enabled === '1' && email.trim() === '';
+  React.useEffect(() => {
+    setErrorFlag(hasError);
+  }, [hasError, setErrorFlag]);
+
+  return (
+    <>
+      <Label
+        title={t`newSubscriberNotifsTitle`}
+        description={t`newSubscriberNotifsDescription`}
+        htmlFor="subscriber_email_notification-enabled"
+      />
+      <Inputs>
+        <input
+          type="radio"
+          checked={enabled === '1'}
+          value="1"
+          onClick={() => setEnabled('1')}
+        />
+        {t`yes`}
+        {' '}
+        <input
+          type="radio"
+          checked={enabled === ''}
+          value=""
+          onClick={() => setEnabled('')}
+        />
+        {t`no`}
+        <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>
+    </>
+  );
+}

assets/js/src/settings/store/types.ts

@@ -34,7 +34,7 @@ export type Settings = {
     address: string
   }
   subscriber_email_notification: {
-    enabled: '0' | '1'
+    enabled: '' | '1'
     address: string
   }
   // ...

views/settings.html

@@ -71,6 +71,11 @@
     'welcomeAndWcEmails': _x('Welcome Emails and WooCommerce emails', 'Please reuse the current translations of “Welcome Emails”'),
     'pleaseFillEmail': __('Please fill the email address.'),
 
+    'newSubscriberNotifsTitle': __('New subscriber notifications'),
+    'newSubscriberNotifsDescription': __('Enter the email address that should receive notifications when someone subscribes.'),
+    'yes': __('Yes'),
+    'no': __('No'),
+
     '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!'),