From 83459261fd47f1882f4f32b17c66e288b6b5ba5c Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Fri, 20 Mar 2020 01:21:24 +0100
Subject: [PATCH] Add transactional emails field

[MAILPOET-2680]
---
 .../js/src/settings/pages/advanced/index.tsx  |  2 +
 .../settings/pages/advanced/transactional.tsx | 55 +++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 assets/js/src/settings/pages/advanced/transactional.tsx

diff --git a/assets/js/src/settings/pages/advanced/index.tsx b/assets/js/src/settings/pages/advanced/index.tsx
index eb9676dd2e..c7f99c80fa 100644
--- a/assets/js/src/settings/pages/advanced/index.tsx
+++ b/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>
   );
 }
diff --git a/assets/js/src/settings/pages/advanced/transactional.tsx b/assets/js/src/settings/pages/advanced/transactional.tsx
new file mode 100644
index 0000000000..e5115354c4
--- /dev/null
+++ b/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>
+    </>
+  );
+}