diff --git a/assets/css/src/components/formEditor/components/_sidebar.scss b/assets/css/src/components/formEditor/components/_sidebar.scss index a5f0392548..ab3e504214 100644 --- a/assets/css/src/components/formEditor/components/_sidebar.scss +++ b/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; + } +} diff --git a/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx b/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx index f6fcba3584..e751ac7759 100644 --- a/assets/js/src/form_editor/components/form_settings/basic_settings_panel.jsx +++ b/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 ( - + + {shouldDisplayMissingListError ? ( + {MailPoet.I18n.t('settingsPleaseSelectList')} + ) : null } notice.isDismissible === false); }, + getNotice(state, id) { + return state.notices.find((notice) => notice.id === id); + }, };