Allow only selected pages or all pages

[MAILPOET-3120]

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ToggleControl } from '@wordpress/components';
-import { assocPath, compose, __ } from 'lodash/fp';
+import {
+  assocPath,
+  compose,
+  __,
+  cond,
+  identity,
+} from 'lodash/fp';
 import Selection from 'form/fields/selection.jsx';
 
 type Props = {
@@ -25,28 +31,34 @@ const PlacementSettings = ({ settingsPlacementKey }: Props) => {
       <ToggleControl
         label={MailPoet.I18n.t('placeFormOnAllPages')}
         checked={formSettings.formPlacement[settingsPlacementKey].pages.all}
-        onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, __, formSettings)])}
+        onChange={(newValue) => {
+          compose([
+            changeFormSettings,
+            assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, newValue),
+            cond([
+              [() => newValue, assocPath(`formPlacement.${settingsPlacementKey}.pages.selected`, [])], // if enabled clear selected pages
+              [() => !newValue, identity], // if disabled do nothing
+            ]),
+          ])(formSettings);
+        }}
       />
       <Selection
         item={{
-          pages: formSettings.formPlacement[settingsPlacementKey].pages.selected,
-        }}
-        onValueChange={(e) => {
-          changeFormSettings(
-            assocPath(
-              `formPlacement.${settingsPlacementKey}.pages.selected`,
-              e.target.value,
-              formSettings
-            )
-          );
+          id: formSettings.formPlacement[settingsPlacementKey].pages.selected.join(),
         }}
+        onValueChange={(e) => compose([
+          changeFormSettings,
+          assocPath(`formPlacement.${settingsPlacementKey}.pages.selected`, e.target.value),
+          assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, false), // disable all if some pages are selected
+        ])(formSettings)}
         field={{
           id: 'pages',
           name: 'pages',
           values: pages,
           multiple: true,
           placeholder: MailPoet.I18n.t('selectPage'),
-          getLabel: (seg) => seg.name,
+          getLabel: (page) => page.name,
+          selected: () => formSettings.formPlacement[settingsPlacementKey].pages.selected,
         }}
       />
       <ToggleControl