From 74eef5e300daeb2fbed908b8808d4c7b09a063f7 Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Wed, 1 Apr 2020 04:21:42 +0200
Subject: [PATCH] Add woocommerce email customizer field

[MAILPOET-2708]
---
 .../css/src/components-plugin/_settings.scss  |  4 ---
 assets/css/src/settings.scss                  |  4 +++
 .../src/common/functions/change_handlers.ts   |  8 +++--
 assets/js/src/settings/pages/woo_commerce.tsx |  5 ---
 .../pages/woo_commerce/email_customizer.tsx   | 33 +++++++++++++++++++
 .../src/settings/pages/woo_commerce/index.tsx | 12 +++++++
 assets/js/src/settings/store/actions.ts       | 18 ++++++++++
 .../src/settings/store/normalize_settings.ts  |  1 +
 assets/js/src/settings/store/types.ts         |  1 +
 9 files changed, 75 insertions(+), 11 deletions(-)
 delete mode 100644 assets/js/src/settings/pages/woo_commerce.tsx
 create mode 100644 assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
 create mode 100644 assets/js/src/settings/pages/woo_commerce/index.tsx

diff --git a/assets/css/src/components-plugin/_settings.scss b/assets/css/src/components-plugin/_settings.scss
index 374d3a5935..aa1b61c16e 100644
--- a/assets/css/src/components-plugin/_settings.scss
+++ b/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;
diff --git a/assets/css/src/settings.scss b/assets/css/src/settings.scss
index 70594afbe9..36ad3ff148 100644
--- a/assets/css/src/settings.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/assets/js/src/common/functions/change_handlers.ts b/assets/js/src/common/functions/change_handlers.ts
index 9bde4fab24..2dd8ec5765 100644
--- a/assets/js/src/common/functions/change_handlers.ts
+++ b/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);
+}
diff --git a/assets/js/src/settings/pages/woo_commerce.tsx b/assets/js/src/settings/pages/woo_commerce.tsx
deleted file mode 100644
index 3cd6aa581b..0000000000
--- a/assets/js/src/settings/pages/woo_commerce.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function WooCommerce() {
-  return <p>WooCommerce!</p>;
-}
diff --git a/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx b/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
new file mode 100644
index 0000000000..884d390d91
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/assets/js/src/settings/pages/woo_commerce/index.tsx b/assets/js/src/settings/pages/woo_commerce/index.tsx
new file mode 100644
index 0000000000..21691e4d9b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/assets/js/src/settings/store/actions.ts b/assets/js/src/settings/store/actions.ts
index d13d60b45e..afe8e5556f 100644
--- a/assets/js/src/settings/store/actions.ts
+++ b/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();
diff --git a/assets/js/src/settings/store/normalize_settings.ts b/assets/js/src/settings/store/normalize_settings.ts
index 6abf6f7b51..60283499d8 100644
--- a/assets/js/src/settings/store/normalize_settings.ts
+++ b/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,
diff --git a/assets/js/src/settings/store/types.ts b/assets/js/src/settings/store/types.ts
index 313e2b137c..17840fe770 100644
--- a/assets/js/src/settings/store/types.ts
+++ b/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' | ''