From e8e05a301be362cfa23a3700bb5c626a9e4e4051 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Lys=C3=BD?= <jan.lysy@automattic.com>
Date: Tue, 22 Jun 2021 15:55:45 +0200
Subject: [PATCH] Move error messages from editor to form component

[MAILPOET-3649]
---
 assets/js/src/segments/dynamic/editor.tsx | 11 +----------
 assets/js/src/segments/dynamic/form.tsx   |  9 +++++++++
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/assets/js/src/segments/dynamic/editor.tsx b/assets/js/src/segments/dynamic/editor.tsx
index ca94a16099..e384e0574f 100644
--- a/assets/js/src/segments/dynamic/editor.tsx
+++ b/assets/js/src/segments/dynamic/editor.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { useRouteMatch, Link } from 'react-router-dom';
 
 import MailPoet from 'mailpoet';
@@ -8,7 +8,6 @@ import Heading from 'common/typography/heading/heading';
 import HideScreenOptions from 'common/hide_screen_options/hide_screen_options';
 import { Form } from './form';
 
-import APIErrorsNotice from '../../notices/api_errors_notice';
 import { createStore } from './store/store';
 
 const Editor: React.FunctionComponent = () => {
@@ -16,11 +15,6 @@ const Editor: React.FunctionComponent = () => {
 
   createStore();
 
-  const errors: string[] = useSelect(
-    (select) => select('mailpoet-dynamic-segments-form').getErrors(),
-    []
-  );
-
   const { pageLoaded } = useDispatch('mailpoet-dynamic-segments-form');
 
   useEffect(() => {
@@ -31,9 +25,6 @@ const Editor: React.FunctionComponent = () => {
     <>
       <Background color="#fff" />
       <HideScreenOptions />
-      {(errors.length > 0 && (
-        <APIErrorsNotice errors={errors.map((error) => ({ message: error }))} />
-      ))}
 
       <Heading level={1} className="mailpoet-title">
         <span>{MailPoet.I18n.t('formPageTitle')}</span>
diff --git a/assets/js/src/segments/dynamic/form.tsx b/assets/js/src/segments/dynamic/form.tsx
index 4ce7ae6982..9e1773c4d9 100644
--- a/assets/js/src/segments/dynamic/form.tsx
+++ b/assets/js/src/segments/dynamic/form.tsx
@@ -15,6 +15,7 @@ import { FormFilterFields } from './form_filter_fields';
 import { isFormValid } from './validator';
 import { MinusIcon } from '../../common/button/icon/minus';
 import plusIcon from '../../common/button/icon/plus';
+import APIErrorsNotice from '../../notices/api_errors_notice';
 
 import {
   FilterRow,
@@ -53,6 +54,11 @@ export const Form: React.FunctionComponent<Props> = ({
     []
   );
 
+  const errors: string[] = useSelect(
+    (select) => select('mailpoet-dynamic-segments-form').getErrors(),
+    []
+  );
+
   const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
 
   return (
@@ -64,6 +70,9 @@ export const Form: React.FunctionComponent<Props> = ({
               {MailPoet.I18n.t('name')}
             </label>
           </Heading>
+          {(errors.length > 0 && (
+            <APIErrorsNotice errors={errors.map((error) => ({ message: error }))} />
+          ))}
           <div className="mailpoet-form-field">
             <Input
               isFullWidth