Basic block structure and checkbox import

[MAILPOET-3920]

assets/js/src/newsletter_block/block.json

@@ -3,8 +3,29 @@
   "name": "mailpoet/newsletter-block",
   "version": "0.1.0",
   "title": "MailPoet Subscribe to Newsletter block",
-  "category": "widgets",
+  "category": "woocommerce",
   "textdomain": "mailpoet",
+  "supports": {
+    "align": false,
+    "html": false,
+    "multiple": false,
+    "reusable": false,
+    "inserter": false
+  },
+  "attributes": {
+    "text": {
+      "type": "string",
+      "required": false
+    },
+    "lock": {
+      "type": "object",
+      "default": {
+        "remove": true,
+        "move": false
+      }
+    }
+  },
+  "parent": ["woocommerce/checkout-contact-information-block"],
   "editorScript": "file:../../../dist/js/newsletter_block/newsletter_block.js",
-  "editorStyle": "file:../../../dist/js/newsletter_block/style-newsletter-block.css"
+  "editorStyle": "file:../../../dist/js/newsletter_block/newsletter_block.css"
 }

assets/js/src/newsletter_block/block.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable react/react-in-jsx-scope */
+const Block = ({ className }: { className: string }): JSX.Element => (
+  <div className={className}>Hello I am a block</div>
+);
+
+export default Block;

assets/js/src/newsletter_block/edit.js

@@ -1,2 +0,0 @@
-import "./style.scss";
-console.log("edit.js");

assets/js/src/newsletter_block/edit.tsx

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable react/react-in-jsx-scope */
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+/* eslint-disable import/no-unresolved */
+import { CheckboxControl } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+export const Edit = ({
+  attributes: { text },
+  setAttributes,
+}: {
+  attributes: { text: string; checkbox: boolean };
+  setAttributes: (attributes: Record<string, unknown>) => void;
+}): JSX.Element => {
+  const blockProps = useBlockProps();
+  const defaultText = 'Hello I am default checkbox text';
+  const currentText = text || defaultText;
+  return (
+    <div {...blockProps}>
+      <div className="wc-block-checkout__newsletter">
+        <CheckboxControl id="subscribe-to-newsletter" checked={false} />
+        <RichText
+          value={currentText}
+          onChange={(value) => setAttributes({ text: value })}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Save = (): JSX.Element => (<div {...useBlockProps.save()} />);

assets/js/src/newsletter_block/editor.scss

@@ -0,0 +1,16 @@
+.wc-block-checkout__newsletter {
+  align-items: flex-start;
+  display: flex;
+  margin: 20px 0;
+  padding-bottom: 4px;
+  padding-top: 4px;
+
+  .block-editor-rich-text__editable {
+    line-height: em(24px);
+    vertical-align: middle;
+  }
+
+  .wc-block-components-checkbox {
+    margin-top: 0;
+  }
+}

assets/js/src/newsletter_block/frontend.js

@@ -1 +0,0 @@
-console.log("frontend.js");

assets/js/src/newsletter_block/frontend.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable import/no-unresolved */
+import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import FrontendBlock from './block';
+
+registerCheckoutBlock({
+  metadata,
+  component: FrontendBlock,
+});

assets/js/src/newsletter_block/index.js

@@ -1,2 +0,0 @@
-import "./edit";
-console.log("index.js");

assets/js/src/newsletter_block/index.tsx

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+/* eslint-disable react/react-in-jsx-scope */
+import { Icon, button } from '@wordpress/icons';
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerBlockType(metadata, {
+  icon: {
+    src: <Icon icon={button} />,
+    foreground: '#7f54b3',
+  },
+  edit: Edit,
+  save: Save,
+});