Add missing list check and error notices

[MAILPOET-2455]

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -25,3 +25,13 @@
     }
   }
 }
+
+.mailpoet-form-missing-lists {
+  .select2-selection {
+    border-color: red;
+  }
+
+  .mailpoet-form-lists-error {
+    color: red;
+  }
+}

assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx

@@ -26,6 +26,11 @@ export default () => {
     []
   );
 
+  const missingListError = useSelect(
+    (select) => select('mailpoet-form-editor').getNotice('missing-lists'),
+    []
+  );
+
   const { changeFormSettings } = useDispatch('mailpoet-form-editor');
 
   const onSegmentsChange = (e) => {
@@ -59,10 +64,17 @@ export default () => {
   const selectedSegments = settings.segments
     ? segments.filter((seg) => (settings.segments.includes(seg.id.toString())))
     : [];
+  const shouldDisplayMissingListError = missingListError && !selectedSegments.length;
   return (
     <Panel>
       <PanelBody title={MailPoet.I18n.t('formSettings')}>
-        <BaseControl label={MailPoet.I18n.t('settingsListLabel')}>
+        <BaseControl
+          label={MailPoet.I18n.t('settingsListLabel')}
+          className={shouldDisplayMissingListError ? 'mailpoet-form-missing-lists' : null}
+        >
+          {shouldDisplayMissingListError ? (
+            <span className="mailpoet-form-lists-error">{MailPoet.I18n.t('settingsPleaseSelectList')}</span>
+          ) : null }
           <Selection
             item={{
               segments: selectedSegments,

assets/js/src/form_editor/store/controls.jsx

@@ -6,9 +6,14 @@ export default {
     if (select('mailpoet-form-editor').getIsFormSaving()) {
       return;
     }
-    dispatch('mailpoet-form-editor').saveFormStarted();
-    const formData = select('mailpoet-form-editor').getFormData();
     dispatch('mailpoet-form-editor').removeNotice('save-form');
+    const formData = select('mailpoet-form-editor').getFormData();
+    if (!formData.settings.segments || formData.settings.segments.length === 0) {
+      dispatch('mailpoet-form-editor').addDismissibleNotice(MailPoet.I18n.t('settingsPleaseSelectList'), 'error', 'missing-lists');
+      return;
+    }
+    dispatch('mailpoet-form-editor').saveFormStarted();
+    dispatch('mailpoet-form-editor').removeNotice('missing-lists');
     MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
       endpoint: 'forms',

assets/js/src/form_editor/store/selectors.jsx

@@ -32,4 +32,7 @@ export default {
   getNonDismissibleNotices(state) {
     return state.notices.filter((notice) => notice.isDismissible === false);
   },
+  getNotice(state, id) {
+    return state.notices.find((notice) => notice.id === id);
+  },
 };