Add checkout opt-in fields

[MAILPOET-2708]

assets/js/src/settings/pages/woo_commerce/checkout_optin.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { t, onToggle, onChange } from 'common/functions';
+import { Label, Inputs } from 'settings/components';
+import { useSetting, useAction } from 'settings/store/hooks';
+
+export default function CheckoutOptin() {
+  const [enabled, setEnabled] = useSetting('woocommerce', 'optin_on_checkout', 'enabled');
+  const [message, setMessage] = useSetting('woocommerce', 'optin_on_checkout', 'message');
+  const setErrorFlag = useAction('setErrorFlag');
+  const emptyMessage = message.trim() === '';
+  React.useEffect(() => {
+    setErrorFlag(emptyMessage);
+  }, [emptyMessage, setErrorFlag]);
+
+  return (
+    <>
+      <Label
+        title={t('wcOptinTitle')}
+        description={t('wcOptinDescription')}
+        htmlFor="mailpoet_wc_checkout_optin"
+      />
+      <Inputs>
+        <input
+          type="checkbox"
+          id="mailpoet_wc_checkout_optin"
+          data-automation-id="mailpoet_wc_checkout_optin"
+          checked={enabled === '1'}
+          onChange={onToggle(setEnabled, '')}
+        />
+      </Inputs>
+      {enabled === '1' && (
+        <>
+          <Label
+            title={t('wcOptinMsgTitle')}
+            description={t('wcOptinMsgDescription')}
+            htmlFor="mailpoet_wc_checkout_optin_message"
+          />
+          <Inputs>
+            <input
+              type="text"
+              id="mailpoet_wc_checkout_optin_message"
+              data-automation-id="mailpoet_wc_checkout_optin_message"
+              value={message}
+              onChange={onChange(setMessage)}
+              placeholder={t('wcOptinMsgPlaceholder')}
+            />
+            <br />
+            {emptyMessage && (
+              <span className="mailpoet_error_item mailpoet_error">
+                {t('wcOptinMsgCannotBeEmpty')}
+              </span>
+            )}
+          </Inputs>
+        </>
+      )}
+    </>
+  );
+}

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { SaveButton } from 'settings/components';
 import EmailCustomizer from './email_customizer';
+import CheckoutOptin from './checkout_optin';
 
 export default function WooCommerce() {
   return (
     <div className="mailpoet-settings-grid">
       <EmailCustomizer />
+      <CheckoutOptin />
       <SaveButton />
     </div>
   );