Add PHPMail fields

[MAILPOET-2693]

assets/css/src/settings.scss

@@ -43,6 +43,10 @@
     margin: 0px 3px;
     font-weight: bold;
   }
+
+  .mailpoet_emails_per_second_warning {
+    color: #d54e21;
+  }
 }
 
 .mailpoet_woocommerce_editor_button {

assets/js/src/settings/pages/send_with/other/other_sending_methods.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
+import { useSetting } from 'settings/store/hooks';
 import SendingMethod from './sending_method';
 import SPF from './spf';
 import TestSending from './test_sending';
 import ActivateOrCancel from './activate_or_cancel';
+import PHPMailFields from './php_mail_fields';
 
 export default function OtherSendingMethods() {
+  const [method] = useSetting('mta', 'method');
   return (
     <div className="mailpoet-settings-grid">
       <SendingMethod />
-
+      {method === 'PHPMail' && <PHPMailFields />}
       <SPF />
       <TestSending />
       <ActivateOrCancel />

assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { Label, Inputs } from 'settings/components';
+import { t, onChange } from 'common/functions';
+import { useSetting } from 'settings/store/hooks';
+import SendingFrequency from './sending_frequency';
+
+export default function PHPMailFields() {
+  const [hostName, setHostName] = useSetting('web_host');
+  const host = hosts[hostName];
+  return (
+    <>
+      <Label title={t('yourHost')} htmlFor="mailpoet_web_host" />
+      <Inputs>
+        <select id="mailpoet_web_host" value={hostName} onChange={onChange(setHostName)}>
+          {Object.values(hosts).map((h) => <option key={h.name} value={h.name}>{h.label}</option>)}
+        </select>
+      </Inputs>
+      <SendingFrequency recommendedEmails={host.emails} recommendedInterval={host.interval} />
+    </>
+  );
+}
+
+const hosts = {
+  manual: {
+    name: 'manual', label: t('notListed'), emails: '25', interval: '5',
+  },
+  '1and1': {
+    name: '1and1', label: '1and1', emails: '30', interval: '5',
+  },
+  bluehost: {
+    name: 'bluehost', label: 'BlueHost', emails: '70', interval: '30',
+  },
+  df: {
+    name: 'df', label: 'Df.eu', emails: '115', interval: '15',
+  },
+  dreamhost: {
+    name: 'dreamhost', label: 'DreamHost', emails: '25', interval: '15',
+  },
+  free: {
+    name: 'free', label: 'Free.fr', emails: '18', interval: '15',
+  },
+  froghost: {
+    name: 'froghost', label: 'FrogHost.com', emails: '490', interval: '30',
+  },
+  godaddy: {
+    name: 'godaddy', label: 'GoDaddy', emails: '5', interval: '30',
+  },
+  goneo: {
+    name: 'goneo', label: 'Goneo', emails: '60', interval: '15',
+  },
+  googleapps: {
+    name: 'googleapps', label: 'Google Apps', emails: '20', interval: '60',
+  },
+  greengeeks: {
+    name: 'greengeeks', label: 'GreenGeeks', emails: '45', interval: '30',
+  },
+  hawkhost: {
+    name: 'hawkhost', label: 'Hawkhost.com', emails: '500', interval: '15',
+  },
+  hivetec: {
+    name: 'hivetec', label: 'Hivetec', emails: '20', interval: '15',
+  },
+  hostgator: {
+    name: 'hostgator', label: 'Host Gator', emails: '115', interval: '15',
+  },
+  hosting2go: {
+    name: 'hosting2go', label: 'Hosting 2GO', emails: '45', interval: '15',
+  },
+  hostmonster: {
+    name: 'hostmonster', label: 'Host Monster', emails: '115', interval: '15',
+  },
+  infomaniak: {
+    name: 'infomaniak', label: 'Infomaniak', emails: '20', interval: '15',
+  },
+  justhost: {
+    name: 'justhost', label: 'JustHost', emails: '70', interval: '30',
+  },
+  laughingsquid: {
+    name: 'laughingsquid', label: 'Laughing Squid', emails: '20', interval: '15',
+  },
+  lunarpages: {
+    name: 'lunarpages', label: 'Lunarpages', emails: '19', interval: '15',
+  },
+  mediatemple: {
+    name: 'mediatemple', label: 'Media Temple', emails: '115', interval: '15',
+  },
+  netfirms: {
+    name: 'netfirms', label: 'Netfirms', emails: '200', interval: '60',
+  },
+  netissime: {
+    name: 'netissime', label: 'Netissime', emails: '100', interval: '15',
+  },
+  one: {
+    name: 'one', label: 'One.com', emails: '100', interval: '15',
+  },
+  ovh: {
+    name: 'ovh', label: 'OVH', emails: '50', interval: '15',
+  },
+  phpnet: {
+    name: 'phpnet', label: 'PHPNet', emails: '15', interval: '15',
+  },
+  planethoster: {
+    name: 'planethoster', label: 'PlanetHoster', emails: '90', interval: '30',
+  },
+  rochen: {
+    name: 'rochen', label: 'Rochen', emails: '40', interval: '15',
+  },
+  site5: {
+    name: 'site5', label: 'Site5', emails: '40', interval: '15',
+  },
+  siteground: {
+    name: 'siteground', label: 'Siteground', emails: '95', interval: '15',
+  },
+  synthesis: {
+    name: 'synthesis', label: 'Synthesis', emails: '250', interval: '15',
+  },
+  techark: {
+    name: 'techark', label: 'Techark', emails: '60', interval: '15',
+  },
+  vexxhost: {
+    name: 'vexxhost', label: 'Vexxhost', emails: '60', interval: '15',
+  },
+  vps: {
+    name: 'vps', label: 'VPS.net', emails: '90', interval: '30',
+  },
+  webcity: {
+    name: 'webcity', label: 'Webcity', emails: '19', interval: '15',
+  },
+  westhost: {
+    name: 'westhost', label: 'Westhost', emails: '225', interval: '15',
+  },
+  wpwebhost: {
+    name: 'wpwebhost', label: 'Wpwebhost.com', emails: '95', interval: '30',
+  },
+};

assets/js/src/settings/pages/send_with/other/sending_frequency.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import ReactStringReplace from 'react-string-replace';
+
+import { Label, Inputs } from 'settings/components';
+import { t, onChange } from 'common/functions';
+import { useSetting } from 'settings/store/hooks';
+
+const MINUTES_PER_DAY = 1440;
+const SECONDS_PER_DAY = 86400;
+
+type Props = {
+  recommendedEmails: string
+  recommendedInterval: string
+}
+export default function SendingFrequency({ recommendedEmails, recommendedInterval }: Props) {
+  const [frequency, setFrequency] = useSetting('mailpoet_sending_frequency');
+  const [frequencyEmails, setFrequencyEmails] = useSetting('mta', 'frequency', 'emails');
+  const [frequencyInterval, setFrequencyInterval] = useSetting('mta', 'frequency', 'interval');
+  React.useEffect(() => {
+    if (frequency === 'auto') {
+      setFrequencyEmails(recommendedEmails);
+      setFrequencyInterval(recommendedInterval);
+    }
+  }, [frequency, recommendedEmails, recommendedInterval, setFrequencyEmails, setFrequencyInterval]);
+
+  const dailyEmails = Math.floor(
+    (MINUTES_PER_DAY * parseInt(frequencyEmails, 10)) / parseInt(frequencyInterval, 10)
+  );
+  const emailsPerSecond = Math.floor((dailyEmails / SECONDS_PER_DAY) * 10) / 10;
+
+  return (
+    <>
+      <Label title={t('sendingFrequency')} htmlFor="mailpoet_sending_frequency" />
+      <Inputs>
+        <select id="mailpoet_sending_frequency" value={frequency} onChange={onChange(setFrequency)}>
+          <option value="auto">{t('recommendedTitle')}</option>
+          <option value="manual">{t('ownFrequency')}</option>
+        </select>
+        {frequency === 'manual' && (
+          <>
+            <br />
+            <input
+              id="other_frequency_emails"
+              type="number"
+              min="1"
+              max="1000"
+              value={frequencyEmails}
+              onChange={onChange(setFrequencyEmails)}
+            />
+            {' '}
+            {t('emails')}
+            <select id="other_frequency_interval" value={frequencyInterval} onChange={onChange(setFrequencyInterval)}>
+              <option value="1">every minute</option>
+              <option value="2">every 2 minutes</option>
+              <option value="5">every 5 minutes (recommended)</option>
+              <option value="10">every 10 minutes</option>
+              <option value="15">every 15 minutes</option>
+              <option value="30">every 30 minutes</option>
+            </select>
+          </>
+        )}
+        {frequency === 'auto' && (
+          <span>
+            {t('xEmails').replace('%1$s', frequencyEmails)}
+            {' '}
+            {formatInterval(frequencyInterval)}
+            {'. '}
+          </span>
+        )}
+        <span>
+          {ReactStringReplace(
+            t('thatsXEmailsPerDay').replace('%1$s', dailyEmails.toLocaleString()),
+            /<strong>(.*?)<\/strong>/g,
+            (match, i) => <strong key={i}>{match}</strong>
+          )}
+        </span>
+        <br />
+        {emailsPerSecond > 1 && (
+          <>
+            <br />
+            <span className="mailpoet_emails_per_second_warning">
+              {ReactStringReplace(
+                t('thatsXEmailsPerSecond').replace('%1$s', emailsPerSecond.toLocaleString()),
+                /<strong>(.*?)<\/strong>/g,
+                (match, i) => <strong key={i}>{match}</strong>
+              )}
+            </span>
+            <br />
+          </>
+        )}
+        {frequency === 'manual' && (
+          <>
+            <br />
+            <span>
+              {ReactStringReplace(
+                t('frequencyWarning').replace('%1$s', emailsPerSecond.toLocaleString()),
+                /<strong>(.*?)<\/strong>/g,
+                (match, i) => <strong key={i}>{match}</strong>
+              )}
+            </span>
+          </>
+        )}
+      </Inputs>
+    </>
+  );
+}
+
+function formatInterval(minutes: string): string {
+  const value = Math.floor(parseInt(minutes, 10));
+  if (value > 60) return t('everyHours').replace('%1$d', `${value / 60}`);
+  if (value === 60) return t('everyHour');
+  if (value > 1) return t('everyMinutes').replace('%1$d', `${value}`);
+  return t('everyMinute');
+}

views/settings.html

@@ -233,6 +233,13 @@
     'recommended': __('recommended'),
     'ownFrequency': __("I'll set my own frequency"),
     'emails': __('emails'),
+    'xEmails': __('%1$s emails'),
+    'everyMinute': __('every minute'),
+    'everyMinutes': __('every %1$d minutes'),
+    'everyHour': __('every hour'),
+    'everyHours': __('every %1$d hours'),
+    'thatsXEmailsPerDay': __("That's <strong>%1$s emails</strong> per day"),
+    'thatsXEmailsPerSecond': __("That's %1$s emails per second. <strong>We highly recommend to send 1 email per second, at the absolute maximum.</strong> MailPoet needs at least one second to process and send a single email (on most hosts.) <strong>Alternatively, send with MailPoet, which can be up to 50 times faster.</strong>"),
     'frequencyWarning': __('<strong>Warning!</strong> You may break the terms of your web host or provider by sending more than the recommended emails per day. Contact your host if you want to send more.'),
     'smtpHost': __('SMTP Hostname'),
     'smtpHostExample': __('e.g.: smtp.mydomain.com'),