From 264865eda679d0175a5419e2d2ae34d577b30071 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Tue, 8 Sep 2020 10:23:42 +0200
Subject: [PATCH] Allow only selected pages or all pages

[MAILPOET-3120]
---
 .../settings_panels/placement_settings.tsx    | 38 ++++++++++++-------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
index 481f028f1e..b46bb81f84 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
+++ b/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