diff --git a/assets/js/src/form_editor/blocks/segment_select/edit.jsx b/assets/js/src/form_editor/blocks/segment_select/edit.jsx
index af0a2a59da..508256355d 100644
--- a/assets/js/src/form_editor/blocks/segment_select/edit.jsx
+++ b/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,
diff --git a/assets/js/src/form_editor/blocks/segment_select/settings.jsx b/assets/js/src/form_editor/blocks/segment_select/settings.jsx
index 5b424fb859..b981219c57 100644
--- a/assets/js/src/form_editor/blocks/segment_select/settings.jsx
+++ b/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) => (
+
+ ));
+};
+
+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 (
-
- {segmentsListToBeAdded.length ? (
-
+
- ) : null}
+
+
+
+ {segmentsListToBeAdded.length ? (
+
+ ) : null}
+
@@ -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,