Add woocommerce email customizer field

[MAILPOET-2708]

assets/css/src/components-plugin/_settings.scss

@@ -141,10 +141,6 @@
     margin-left: 2em;
   }
 
-  .mailpoet_woocommerce_editor_button {
-    margin-top: 10px;
-  }
-
   @include breakpoint-max-width(782px) {
     .form-table th {
       width: auto;

assets/css/src/settings.scss

@@ -40,4 +40,8 @@
 
 .mailpoet-settings-grid .mailpoet_error_item:before {
   content: '✗ ';
+}
+
+.mailpoet-settings-grid .mailpoet_woocommerce_editor_button {
+  margin-top: 10px;
 }

assets/js/src/common/functions/change_handlers.ts

@@ -3,6 +3,10 @@ import { ChangeEvent } from 'react';
 type Setter = (value: string) => any
 type Event = ChangeEvent<any>
 
-export const onChange = (setter: Setter) => (e: Event) => setter(e.target.value);
+export function onChange(setter: Setter) {
+  return (e: Event) => setter(e.target.value);
+}
 
-export const onToggle = (setter: Setter) => (e: Event) => setter(e.target.checked ? '1' : '0');
+export function onToggle(setter: Setter, falseValue: string = '0') {
+  return (e: Event) => setter(e.target.checked ? '1' : falseValue);
+}

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function WooCommerce() {
-  return <p>WooCommerce!</p>;
-}

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { t, onToggle } from 'common/functions';
+import { Label, Inputs } from 'settings/components';
+import { useSetting, useAction } from 'settings/store/hooks';
+
+export default function EmailCustomizer() {
+  const [enabled, setEnabled] = useSetting('woocommerce', 'use_mailpoet_editor');
+  const [newsletterId] = useSetting('woocommerce', 'transactional_email_id');
+  const openWoocommerceCustomizer = useAction('openWoocommerceCustomizer');
+  const openEditor = () => openWoocommerceCustomizer(newsletterId);
+  return (
+    <>
+      <Label
+        title={t('wcCustomizerTitle')}
+        description={t('wcCustomizerDescription')}
+        htmlFor="mailpoet_wc_customizer"
+      />
+      <Inputs>
+        <input
+          type="checkbox"
+          id="mailpoet_wc_customizer"
+          data-automation-id="mailpoet_wc_customizer"
+          checked={enabled === '1'}
+          onChange={onToggle(setEnabled, '')}
+        />
+        <br />
+        <button type="button" className="button-secondary mailpoet_woocommerce_editor_button" onClick={openEditor}>
+          {t('openTemplateEditor')}
+        </button>
+      </Inputs>
+    </>
+  );
+}

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

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

assets/js/src/settings/store/actions.ts

@@ -10,6 +10,24 @@ export function setErrorFlag(value: boolean): Action {
   return { type: 'SET_ERROR_FLAG', value };
 }
 
+export function* openWoocommerceCustomizer(newsletterId?: string) {
+  let id = newsletterId;
+  if (!id) {
+    const { res, success, error } = yield {
+      type: 'CALL_API',
+      endpoint: 'settings',
+      action: 'set',
+      data: { 'woocommerce.use_mailpoet_editor': 1 },
+    };
+    if (!success) {
+      return { type: 'SAVE_FAILED', error };
+    }
+    id = res.data.woocommerce.transactional_email_id;
+  }
+  window.location.href = `?page=mailpoet-newsletter-editor&id=${id}`;
+  return null;
+}
+
 export function* saveSettings() {
   yield { type: 'SAVE_STARTED' };
   const data = select(STORE_NAME).getSettings();

assets/js/src/settings/store/normalize_settings.ts

@@ -136,6 +136,7 @@ export default function normalizeSettings(data: any): Settings {
       body: text,
     }),
     woocommerce: asObject({
+      use_mailpoet_editor: disabledRadio,
       transactional_email_id: text,
       optin_on_checkout: asObject({
         enabled: enabledRadio,

assets/js/src/settings/store/types.ts

@@ -136,6 +136,7 @@ export type Settings = {
     body: string
   }
   woocommerce: {
+    use_mailpoet_editor: '1' | ''
     transactional_email_id: string,
     optin_on_checkout: {
       enabled: '1' | ''