Update transactional emails label

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

@@ -1,11 +1,20 @@
 import React from 'react';
+import ReactStringReplace from 'react-string-replace';
 
 import { t, onChange } from 'common/functions';
-import { useSetting } from 'settings/store/hooks';
 import { Label, Inputs } from 'settings/components';
+import { useSetting, useSelector } from 'settings/store/hooks';
 
 export default function Transactional() {
+  const [provider] = useSetting('smtp_provider');
+  const isMssActive = useSelector('isMssActive')();
   const [enabled, setEnabled] = useSetting('send_transactional_emails');
+  let methodLabel;
+  if (isMssActive) methodLabel = 'MailPoet Sending Service';
+  else if (provider === 'manual') methodLabel = 'SMTP';
+  else if (provider === 'SendGrid') methodLabel = 'SendGrid';
+  else if (provider === 'AmazonSES') methodLabel = 'Amazon SES';
+  else if (provider === 'server') methodLabel = t('hostOption');
 
   return (
     <>
@@ -36,7 +45,23 @@ export default function Transactional() {
           onChange={onChange(setEnabled)}
         />
         <label htmlFor="transactional-enabled">
-          {t('transactionalCurrentMethod')}
+          {t('transactionalCurrentMethod').replace('%1$s', methodLabel)}
+          <br />
+          <span className="mailpoet-note">
+            {ReactStringReplace(t('transactionalMssNote'),
+              /\[link\](.*?)\[\/link\]/,
+              (text) => (
+                <a
+                  key={text}
+                  href="https://kb.mailpoet.com/article/292-choose-how-to-send-your-wordpress-websites-emails#attachments"
+                  rel="noopener noreferrer"
+                  data-beacon-article="5ddbf92504286364bc9228c5"
+                  target="_blank"
+                >
+                  {text}
+                </a>
+              ))}
+          </span>
         </label>
         <br />
         <input