feat: added channel subscription block

package.json

@@ -25,6 +25,63 @@
       "pre-commit": "lint-staged"
     }
   },
+  "stylelint": {
+    "extends": [
+      "stylelint-config-idiomatic-order"
+    ],
+    "plugins": [
+      "stylelint-prettier"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.scss"
+        ],
+        "customSyntax": "postcss-scss"
+      },
+      {
+        "files": [
+          "**/*.less"
+        ],
+        "customSyntax": "postcss-less"
+      },
+      {
+        "files": [
+          "**/*.overrides"
+        ],
+        "customSyntax": "postcss-less"
+      }
+    ],
+    "rules": {
+      "prettier/prettier": true,
+      "rule-empty-line-before": [
+        "always-multi-line",
+        {
+          "except": [
+            "first-nested"
+          ],
+          "ignore": [
+            "after-comment"
+          ]
+        }
+      ]
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "npx eslint --max-warnings=0 --fix",
+      "npx prettier --single-quote --write"
+    ],
+    "src/**/*.{css,less}": [
+      "npx stylelint --fix"
+    ],
+    "src/**/*.scss": [
+      "npx stylelint --fix --customSyntax postcss-scss"
+    ],
+    "src/**/*.overrides": [
+      "npx stylelint --fix --syntax less"
+    ]
+  },
   "prettier": {
     "singleQuote": true,
     "trailingComma": "all"
@@ -34,7 +91,18 @@
     "@commitlint/config-conventional": "^12.1.4",
     "@plone/scripts": "*",
     "@release-it/conventional-changelog": "^2.0.1",
+    "stylelint": "15.11.0",
+    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-prettier": "4.0.2",
     "husky": "^6.0.0",
-    "release-it": "^14.10.1"
+    "release-it": "^14.10.1",
+    "jest-css-modules": "^2.1.0",
+    "@babel/eslint-parser": "7.23.3",
+    "@babel/plugin-proposal-export-default-from": "7.18.10"
+  },
+  "peerDependencies": {
+    "@plone/volto": ">=16.0.0-alpha.38",
+    "design-comuni-plone-theme": "*",
+    "design-reack-kit": "*"
   }
 }

src/components/Blocks/NewsletterSubscribe/Background.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cx from 'classnames';
+import { addAppURL, flattenToAppURL } from '@plone/volto/helpers';
+
+const Background = ({ data, children }) => {
+  return (
+    <div
+      className={cx('block-content', {
+        'full-width': data.showFullWidth,
+        'with-bg': data.background?.[0],
+      })}
+    >
+      {data.background?.[0] && (
+        <div
+          className="background-image"
+          style={{
+            backgroundImage: `url(${data.background[0]?.image_field ? flattenToAppURL(data.background[0]['@id'] + '/' + data.background[0].image_scales?.[data.background[0].image_field][0].download) : addAppURL(data.background[0]?.['@id'])})`,
+          }}
+        ></div>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Background;

src/components/Blocks/NewsletterSubscribe/Edit.jsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
+import { Container } from 'design-react-kit';
+import { SidebarPortal } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
+import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
+import Sidebar from 'volto-newsletter/components/Blocks/NewsletterSubscribe/Sidebar';
+import Background from 'volto-newsletter/components/Blocks/NewsletterSubscribe/Background';
+import SubscribeButton from 'volto-newsletter/components/Blocks/NewsletterSubscribe/SubscribeButton';
+import './NewsletterSubscribe.scss';
+
+const messages = defineMessages({
+  text: {
+    id: 'Insert text…',
+    defaultMessage: 'Insert text…',
+  },
+  selectChannel: {
+    id: 'Newsletter Block: Select a channel from right sidebar',
+    defaultMessage: 'Blocco Newsletter Block: Seleziona un canale dalla barra a destra',
+  },
+  unsubscribable_channel: {
+    id: 'Newsletter Block: unsubscribable_channel',
+    defaultMessage: 'In canale selezionato non è sottoscrivibile.',
+  },
+});
+
+const Edit = (props) => {
+  const { data, block, selected, ...otherProps } = props;
+  const intl = useIntl();
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(props, 'text');
+
+  const dispatch = useDispatch();
+  const channelID = data.channel?.[0] ? flattenToAppURL(data.channel[0]['@id']) : null;
+  const channel = useSelector((state) => state.content.subrequests['channel_' + channelID]?.data);
+  console.log(channel);
+  useEffect(() => {
+    //load channel data
+    if (!channel && channelID) {
+      dispatch(getContent(channelID, null, 'channel_' + channelID));
+    }
+  }, [data.channel]);
+
+  return (
+    <>
+      {channel && channel.is_subscribable ? (
+        <div className="public-ui" tabIndex="-1">
+          <Background data={data}>
+            <Container className="px-md-4 block-text-content">
+              <div className="title">
+                <TextEditorWidget
+                  {...otherProps}
+                  data={data}
+                  fieldName="title"
+                  selected={selectedField === 'title'}
+                  block={block}
+                  placeholder={intl.formatMessage(messages.text)}
+                  setSelected={setSelectedField}
+                  focusNextField={() => {
+                    setSelectedField('text');
+                  }}
+                />
+              </div>
+              <div className="text">
+                <TextEditorWidget
+                  {...otherProps}
+                  showToolbar={true}
+                  data={data}
+                  block={block}
+                  fieldName="text"
+                  selected={selectedField === 'text'}
+                  placeholder={intl.formatMessage(messages.text)}
+                  setSelected={setSelectedField}
+                  focusPrevField={() => {
+                    setSelectedField('title');
+                  }}
+                />
+              </div>
+              <SubscribeButton channel={channel} data={data} inEditMode={true} />
+            </Container>
+          </Background>
+        </div>
+      ) : channel && !channel.is_subscribable ? (
+        <div className="edit-infos">{intl.formatMessage(messages.unsubscribable_channel)}</div>
+      ) : (
+        <div className="edit-infos">{intl.formatMessage(messages.selectChannel)}</div>
+      )}
+      <SidebarPortal selected={selected}>
+        <Sidebar {...props} />
+      </SidebarPortal>
+    </>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Edit.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  id: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+};
+
+export default Edit;

src/components/Blocks/NewsletterSubscribe/NewsletterSubscribe.scss

@@ -0,0 +1,93 @@
+.block.newsletter-subscribe {
+  .edit-infos {
+    font-style: italic;
+    text-align: center;
+    padding: 1rem;
+  }
+  .block-content {
+    position: relative;
+    height: auto;
+    padding: 2.5rem 0;
+    text-align: center;
+    background-color: var(--bs-gray-600);
+    color: var(--bs-white);
+    z-index: 0;
+
+    &.with-bg {
+      color: var(--bs-white);
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      a {
+        color: var(--bs-white);
+      }
+    }
+
+    @media (max-width: 992px) {
+      /*lg breakpoint*/
+      padding: 2rem 1rem;
+    }
+  }
+
+  .background-image {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    &:after {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(#000, 0.65);
+      content: '';
+      left: 0;
+      top: 0;
+    }
+  }
+
+  .title,
+  .text {
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+
+    h1:last-child,
+    h2:last-child,
+    h3:last-child,
+    h4:last-child,
+    h5:last-child {
+      margin-bottom: 0;
+    }
+
+    h1:first-child,
+    h2:first-child,
+    h3:first-child,
+    h4:first-child,
+    h5:first-child {
+      margin-top: 0;
+    }
+  }
+  .block-text-content {
+    z-index: 0;
+  }
+
+  .slate-editor {
+    [data-slate-placeholder='true'] {
+      opacity: 0.7 !important;
+    }
+  }
+
+  .title,
+  .text {
+    margin-bottom: 2rem;
+  }
+}