Allow list pre-check

[MAILPOET-2452]

assets/js/src/form_editor/blocks/segment_select/edit.jsx

@@ -29,6 +29,7 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
         label={attributes.label}
         onLabelChanged={(label) => (setAttributes({ label }))}
         segmentsAddedIntoSelection={attributes.values}
+        setNewSelection={(selection) => setAttributes({ values: selection })}
         addSegmentIntoSelection={(newSegment) => setAttributes({
           values: [
             ...attributes.values,

assets/js/src/form_editor/blocks/segment_select/settings.jsx

@@ -1,20 +1,56 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
+import { partial } from 'lodash';
 import { InspectorControls } from '@wordpress/block-editor';
 import {
+  CheckboxControl,
   Panel,
   PanelBody,
+  PanelRow,
   SelectControl,
   TextControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
+const findSegment = (segments, segmentId) => segments.find((s) => s.id === segmentId);
+
+const Preview = ({ segments, updateSegment }) => {
+  if (segments.length === 0) {
+    return null;
+  }
+
+  const onCheck = (segmentId, isChecked) => {
+    const segment = findSegment(segments, segmentId);
+    segment.isChecked = isChecked;
+    updateSegment(segment);
+  };
+
+  return segments.map((segment) => (
+    <CheckboxControl
+      label={segment.name}
+      checked={!!segment.isChecked}
+      onChange={partial(onCheck, segment.id)}
+      key={segment.id}
+    />
+  ));
+};
+
+Preview.propTypes = {
+  segments: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isChecked: PropTypes.boolean,
+    id: PropTypes.string.isRequired,
+  }).isRequired).isRequired,
+  updateSegment: PropTypes.func.isRequired,
+};
+
 const SegmentSelectSettings = ({
   label,
   onLabelChanged,
   segmentsAddedIntoSelection,
   addSegmentIntoSelection,
+  setNewSelection,
 }) => {
   const allSegments = useSelect(
     (select) => select('mailpoet-form-editor').getAllAvailableSegments(),
@@ -25,10 +61,10 @@ const SegmentSelectSettings = ({
     label: segment.name,
     value: segment.id,
   }))
-    .filter((segment) => !segmentsAddedIntoSelection.find((s) => s.id === segment.value));
+    .filter((segment) => !findSegment(segmentsAddedIntoSelection, segment.value));
 
   const addSegment = (segmentId) => {
-    const segment = allSegments.find((s) => s.id === segmentId);
+    const segment = findSegment(allSegments, segmentId);
     addSegmentIntoSelection({
       name: segment.name,
       isChecked: false,
@@ -36,29 +72,46 @@ const SegmentSelectSettings = ({
     });
   };
 
+  const updateSegment = (segment) => {
+    setNewSelection(segmentsAddedIntoSelection.map((segmentInSelection) => {
+      if (segment.id !== segmentInSelection) {
+        return segmentInSelection;
+      }
+      return segment;
+    }));
+  };
+
   return (
     <InspectorControls>
       <Panel>
         <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
-          <TextControl
-            label={MailPoet.I18n.t('label')}
-            value={label}
-            data-automation-id="settings_first_name_label_input"
-            onChange={onLabelChanged}
-          />
-          {segmentsListToBeAdded.length ? (
-            <SelectControl
-              label={`${MailPoet.I18n.t('blockSegmentSelectListLabel')}:`}
-              options={[
-                {
-                  label: MailPoet.I18n.t('settingsPleaseSelectList'),
-                  value: null,
-                },
-                ...segmentsListToBeAdded,
-              ]}
-              onChange={addSegment}
+          <PanelRow>
+            <TextControl
+              label={MailPoet.I18n.t('label')}
+              value={label}
+              data-automation-id="settings_first_name_label_input"
+              onChange={onLabelChanged}
             />
-          ) : null}
+          </PanelRow>
+          <Preview
+            segments={segmentsAddedIntoSelection}
+            updateSegment={updateSegment}
+          />
+          <PanelRow>
+            {segmentsListToBeAdded.length ? (
+              <SelectControl
+                label={`${MailPoet.I18n.t('blockSegmentSelectListLabel')}:`}
+                options={[
+                  {
+                    label: MailPoet.I18n.t('settingsPleaseSelectList'),
+                    value: null,
+                  },
+                  ...segmentsListToBeAdded,
+                ]}
+                onChange={addSegment}
+              />
+            ) : null}
+          </PanelRow>
         </PanelBody>
       </Panel>
     </InspectorControls>
@@ -69,6 +122,7 @@ SegmentSelectSettings.propTypes = {
   label: PropTypes.string.isRequired,
   onLabelChanged: PropTypes.func.isRequired,
   addSegmentIntoSelection: PropTypes.func.isRequired,
+  setNewSelection: PropTypes.func.isRequired,
   segmentsAddedIntoSelection: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     isChecked: PropTypes.boolean,