Disable save button until something changed

[MAILPOET-2592]

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')}

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')}

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')}

assets/js/src/form_editor/blocks/custom_radio/settings_preview.jsx

@@ -81,7 +81,7 @@ const PreviewItem = ({
     >
       <input
         type="radio"
-        onChange={(event) => onCheck(value.id, event.target.value)}
+        onChange={(event) => onCheck(value.id, event.target.checked)}
         key={`check-${value.id}`}
       />
       <input

assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx

@@ -26,7 +26,7 @@ const CustomFieldSettings = ({
           validate: localValidate,
         })}
         isBusy={isSaving}
-        disabled={isSaving}
+        disabled={isSaving || (localMandatory === mandatory && localValidate === validate)}
         className="button-on-top"
       >
         {MailPoet.I18n.t('customFieldSaveCTA')}