From 42bf4b31aebffa28fe3dc3bfb17a1833d93736ce Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Thu, 5 Dec 2019 16:18:50 +0100
Subject: [PATCH] Allow user add lists

[MAILPOET-2452]
---
 .../blocks/segment_select/edit.jsx            | 47 +++++++++++++++++--
 views/form/editor.html                        |  1 +
 2 files changed, 45 insertions(+), 3 deletions(-)

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 3bd5ce3047..5fa80c929d 100644
--- a/assets/js/src/form_editor/blocks/segment_select/edit.jsx
+++ b/assets/js/src/form_editor/blocks/segment_select/edit.jsx
@@ -4,12 +4,40 @@ import {
   PanelBody,
   TextControl,
   CheckboxControl,
+  SelectControl,
+  BaseControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
 const SegmentSelectEdit = ({ attributes, setAttributes }) => {
+  const allSegments = useSelect(
+    (select) => select('mailpoet-form-editor').getAllAvailableSegments(),
+    []
+  );
+
+  const segmentsListToBeAdded = allSegments.map((segment) => ({
+    label: segment.name,
+    value: segment.id,
+  }))
+    .filter((segment) => !attributes.values.find((s) => s.id === segment.value));
+
+  const addSegment = (segmentId) => {
+    const segment = allSegments.find((s) => s.id === segmentId);
+    setAttributes({
+      values: [
+        ...attributes.values,
+        {
+          name: segment.name,
+          isChecked: false,
+          id: segmentId,
+        },
+      ],
+    });
+  };
+
   const inspectorControls = (
     <InspectorControls>
       <Panel>
@@ -20,6 +48,19 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
             data-automation-id="settings_first_name_label_input"
             onChange={(label) => (setAttributes({ label }))}
           />
+          {segmentsListToBeAdded.length ? (
+            <SelectControl
+              label={`${MailPoet.I18n.t('blockSegmentSelectListLabel')}:`}
+              options={[
+                {
+                  label: MailPoet.I18n.t('settingsPleaseSelectList'),
+                  value: null,
+                },
+                ...segmentsListToBeAdded,
+              ]}
+              onChange={addSegment}
+            />
+          ) : null}
         </PanelBody>
       </Panel>
     </InspectorControls>
@@ -42,9 +83,9 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      <p>
-        {attributes.label}
-      </p>
+      <BaseControl
+        label={attributes.label}
+      />
       {renderValues()}
     </>
   );
diff --git a/views/form/editor.html b/views/form/editor.html
index f42fb974a9..2c5913d9a2 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -50,6 +50,7 @@
   'blockLastNameDescription': __('Allow your subscribers to select which list(s) they want to subscribe to.'),
   'blockSegmentSelectLabel': __('Select list(s):'),
   'blockSegmentSelectNoLists': __('Please select at least one list'),
+  'blockSegmentSelectListLabel': __('Select the segment that you want to add'),
   'blockEmail': __('Email'),
   'blockEmailDescription': __('Input field used to catch subscribers’ email addresses.'),
   'blockSubmit': __('Submit button'),