Add transactional emails field

[MAILPOET-2680]

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

@@ -3,6 +3,7 @@ import BounceAddress from './bounce_address';
 import TaskScheduler from './task_scheduler';
 import Roles from './roles';
 import Tracking from './tracking';
+import Transactional from './transactional';
 
 export default function Advanced() {
   return (
@@ -11,6 +12,7 @@ export default function Advanced() {
       <TaskScheduler />
       <Roles />
       <Tracking />
+      <Transactional />
     </div>
   );
 }

assets/js/src/settings/pages/advanced/transactional.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { t, onChange } from 'common/functions';
+import { useSetting } from 'settings/store/hooks';
+import { Label, Inputs } from 'settings/components';
+
+export default function Transactional() {
+  const [enabled, setEnabled] = useSetting('send_transactional_emails');
+
+  return (
+    <>
+      <Label
+        title={t('transactionalTitle')}
+        description={(
+          <>
+            {t('transactionalDescription')}
+            {' '}
+            <a
+              href="https://kb.mailpoet.com/article/292-choose-how-to-send-your-wordpress-websites-emails"
+              data-beacon-article="5ddbf92504286364bc9228c5"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {t('transactionalLink')}
+            </a>
+          </>
+        )}
+        htmlFor=""
+      />
+      <Inputs>
+        <input
+          type="radio"
+          id="transactional-enabled"
+          value="1"
+          checked={enabled === '1'}
+          onChange={onChange(setEnabled)}
+        />
+        <label htmlFor="transactional-enabled">
+          {t('transactionalCurrentMethod')}
+        </label>
+        <br />
+        <input
+          type="radio"
+          id="transactional-disabled"
+          value=""
+          checked={enabled === ''}
+          onChange={onChange(setEnabled)}
+        />
+        <label htmlFor="transactional-disabled">
+          {t('transactionalWP')}
+        </label>
+      </Inputs>
+    </>
+  );
+}