Checkbox implementation and refactor naming structure

[MAILPOET-3920]

assets/js/src/marketing_optin_block/attributes.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+const { defaultText } = getSetting('mailpoet_data');
+export default {
+  text: {
+    type: 'string',
+    default: defaultText,
+  },
+};

assets/js/src/marketing_optin_block/block.json

@@ -1,8 +1,8 @@
 {
   "apiVersion": 2,
-  "name": "mailpoet/newsletter-block",
+  "name": "mailpoet/marketing-optin-block",
   "version": "0.1.0",
-  "title": "MailPoet Subscribe to Newsletter block",
+  "title": "MailPoet Marketing Opt-in",
   "category": "woocommerce",
   "textdomain": "mailpoet",
   "supports": {
@@ -22,8 +22,6 @@
     }
   },
   "parent": ["woocommerce/checkout-contact-information-block"],
-  "script": "file:../../../dist/js/newsletter_block/newsletter_block_frontend.js",
-  "style": "file:../../../dist/js/newsletter_block/newsletter_block.css",
-  "editorScript": "file:../../../dist/js/newsletter_block/newsletter_block.js",
-  "editorStyle": "file:../../../dist/js/newsletter_block/newsletter_block.css"
+  "editorScript": "file:../../../dist/js/marketing_optin_block/marketing-optin-block.js",
+  "editorStyle": "file:../../../dist/js/marketing_optin_block/marketing-optin-block.css"
 }

assets/js/src/marketing_optin_block/block.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable import/no-unresolved */
+
+/**
+ * External dependencies
+ */
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
+import { useState, useEffect } from '@wordpress/element';
+import { getSetting } from '@woocommerce/settings';
+
+const { optinEnabled, defaultText, defaultStatus } = getSetting('mailpoet_data');
+
+const Block = (
+  {
+    text,
+    checkoutExtensionData,
+  }: {
+    text: string,
+    checkoutExtensionData: {
+      setExtensionData: (namespace: string, key: string, value: unknown) => void
+    }
+  }
+): JSX.Element => {
+  const [checked, setChecked] = useState(defaultStatus);
+  const { setExtensionData } = checkoutExtensionData || {};
+  useEffect(() => {
+    if (optinEnabled && setExtensionData) {
+      setExtensionData('mailpoet', 'optin', checked);
+    }
+  }, [checked, setExtensionData]);
+
+  if (!optinEnabled) {
+    return null;
+  }
+
+  return (
+    <CheckboxControl
+      checked={checked}
+      onChange={setChecked}
+    >
+      {/* eslint-disable-next-line react/no-danger */}
+      <span dangerouslySetInnerHTML={{
+        __html: text || defaultText,
+      }}
+      />
+    </CheckboxControl>
+  );
+};
+
+export default Block;

assets/js/src/marketing_optin_block/edit.tsx

@@ -16,34 +16,32 @@ import { Icon, megaphone } from '@wordpress/icons';
  */
 import './editor.scss';
 
-const adminUrl = getSetting('adminUrl');
-const { newsletterEnabled, newsletterDefaultText } = getSetting('mailpoet_data');
+const adminUrl = getSetting('adminUrl') as string;
+const { optinEnabled, defaultText } = getSetting('mailpoet_data');
 
-const EmptyState = () => {
-  return (
-    <Placeholder
-      icon={<Icon icon={megaphone} />}
-      label={__('Marketing opt-in', 'automatewoo')}
-      className="wp-block-mailpoet-newsletter-block-placeholder"
+const EmptyState = (): JSX.Element => (
+  <Placeholder
+    icon={<Icon icon={megaphone} />}
+    label={__('Marketing opt-in', 'mailpoet')}
+    className="wp-block-mailpoet-newsletter-block-placeholder"
+  >
+    <span className="wp-block-mailpoet-newsletter-block-placeholder__description">
+      {__(
+        'MailPoet marketing opt-in would be shown here if enabled. You can enable from the settings page.',
+        'mailpoet'
+      )}
+    </span>
+    <Button
+      isPrimary
+      href={`${adminUrl}admin.php?page=mailpoet-settings#/woocommerce`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="wp-block-mailpoet-newsletter-block-placeholder__button"
     >
-      <span className="wp-block-mailpoet-newsletter-block-placeholder__description">
-        {__(
-          'MailPoet marketing opt in would be shown here, you can enable from AutomateWoo settings page.',
-          'mailpoet'
-        )}
-      </span>
-      <Button
-        isPrimary
-        href={`${adminUrl}admin.php?page=mailpoet-settings#/woocommerce`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="wp-block-mailpoet-newsletter-block-placeholder__button"
-      >
-        {__('Enable opt-in for Checkout', 'automatewoo')}
-      </Button>
-    </Placeholder>
-  );
-};
+      {__('Enable opt-in for Checkout', 'mailpoet')}
+    </Button>
+  </Placeholder>
+);
 
 export const Edit = ({
   attributes: { text },
@@ -53,10 +51,10 @@ export const Edit = ({
   setAttributes: (attributes: Record<string, unknown>) => void;
 }): JSX.Element => {
   const blockProps = useBlockProps();
-  const currentText = text || newsletterDefaultText;
+  const currentText = text || defaultText;
   return (
     <div {...blockProps}>
-      {newsletterEnabled ? (
+      {!optinEnabled ? (
         <>
           <div className="wc-block-checkout__newsletter">
             <CheckboxControl id="subscribe-to-newsletter" checked={false} />

assets/js/src/newsletter_block/attributes.js

@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { getSetting } from "@woocommerce/settings";
-
-const { newsletterDefaultText } = getSetting("mailpoet_data");
-export default {
-  text: {
-    type: "string",
-    default: newsletterDefaultText,
-  },
-};

assets/js/src/newsletter_block/block.tsx

@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { useState, useEffect } from '@wordpress/element';
-import { getSetting } from '@woocommerce/settings';
-
-const { newsletterEnabled, newsletterDefaultText } = getSetting('mailpoet_data');
-
-const Block = ({ text, checkoutExtensionData }) => {
-  const [checked, setChecked] = useState(false);
-  const { setExtensionData } = checkoutExtensionData || {};
-  useEffect(() => {
-    if (newsletterEnabled && setExtensionData) {
-      setExtensionData('mailpoet', 'optin', checked);
-    }
-  }, [checked, setExtensionData]);
-
-  if (!newsletterEnabled) {
-    return null;
-  }
-
-  return (
-    <CheckboxControl
-      label={text || newsletterDefaultText}
-      checked={checked}
-      onChange={setChecked}
-    />
-  );
-};
-
-export default Block;

assets/js/src/newsletter_block/style.scss

@@ -1,3 +0,0 @@
-body {
-  background: red;
-}