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,