diff --git a/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx index 07acabab75..f7c9cddcc8 100644 --- a/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx +++ b/assets/js/src/form_editor/blocks/custom_checkbox/custom_field_settings.jsx @@ -28,7 +28,14 @@ const CustomFieldSettings = ({ checkboxLabel: localCheckboxLabel, })} isBusy={isSaving} - disabled={isSaving} + disabled={ + isSaving + || ( + localMandatory === mandatory + && localIsChecked === isChecked + && localCheckboxLabel === checkboxLabel + ) + } className="button-on-top" > {MailPoet.I18n.t('customFieldSaveCTA')} diff --git a/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx index ccf7e42f4a..a5e4a1123a 100644 --- a/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx +++ b/assets/js/src/form_editor/blocks/custom_date/custom_field_settings.jsx @@ -51,7 +51,15 @@ const CustomFieldSettings = ({ defaultToday: localDefaultToday, })} isBusy={isSaving} - disabled={isSaving} + disabled={ + isSaving + || ( + localMandatory === mandatory + && localDefaultToday === defaultToday + && localDateType === dateType + && localDateFormat === dateFormat + ) + } className="button-on-top" > {MailPoet.I18n.t('customFieldSaveCTA')} diff --git a/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx index bf529c3c7e..c431febf02 100644 --- a/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx +++ b/assets/js/src/form_editor/blocks/custom_radio/custom_field_settings.jsx @@ -5,6 +5,7 @@ import { } from '@wordpress/components'; import PropTypes from 'prop-types'; import MailPoet from 'mailpoet'; +import { isEmpty, isEqual, xorWith } from 'lodash'; import SettingsPreview from './settings_preview.jsx'; @@ -15,7 +16,7 @@ const CustomFieldSettings = ({ onSave, }) => { const [localMandatory, setLocalMandatory] = useState(mandatory); - const [localValues, setLocalValues] = useState(values); + const [localValues, setLocalValues] = useState(JSON.parse(JSON.stringify(values))); const update = (value) => { setLocalValues(localValues.map((valueInSelection) => { @@ -42,7 +43,13 @@ const CustomFieldSettings = ({ values: localValues, })} isBusy={isSaving} - disabled={isSaving} + disabled={ + isSaving + || ( + localMandatory === mandatory + && isEmpty(xorWith(values, localValues, isEqual)) + ) + } className="button-on-top" > {MailPoet.I18n.t('customFieldSaveCTA')} diff --git a/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx b/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx index fbff5735aa..91dc9df19a 100644 --- a/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx +++ b/assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx @@ -81,7 +81,7 @@ const PreviewItem = ({ > onCheck(value.id, event.target.value)} + onChange={(event) => onCheck(value.id, event.target.checked)} key={`check-${value.id}`} /> {MailPoet.I18n.t('customFieldSaveCTA')}