Move checkbox settings to custom field settings

[MAILPOET-2592]

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

@@ -10,8 +10,12 @@ const CustomFieldSettings = ({
   mandatory,
   isSaving,
   onSave,
+  isChecked,
+  checkboxLabel,
 }) => {
   const [localMandatory, setLocalMandatory] = useState(mandatory);
+  const [localIsChecked, setLocalIsChecked] = useState(isChecked);
+  const [localCheckboxLabel, setLocalCheckboxLabel] = useState(checkboxLabel);
 
   return (
     <div className="custom-field-settings">
@@ -20,6 +24,8 @@ const CustomFieldSettings = ({
         isDefault
         onClick={() => onSave({
           mandatory: localMandatory,
+          isChecked: localIsChecked,
+          checkboxLabel: localCheckboxLabel,
         })}
         isBusy={isSaving}
         disabled={isSaving}
@@ -32,6 +38,17 @@ const CustomFieldSettings = ({
         checked={localMandatory}
         onChange={setLocalMandatory}
       />
+      <div>
+        <input
+          type="checkbox"
+          checked={localIsChecked}
+          onChange={(event) => setLocalIsChecked(!!event.target.checked)}
+        />
+        <input
+          value={localCheckboxLabel}
+          onChange={(event) => setLocalCheckboxLabel(event.target.value)}
+        />
+      </div>
     </div>
   );
 };
@@ -40,11 +57,15 @@ CustomFieldSettings.propTypes = {
   mandatory: PropTypes.bool,
   onSave: PropTypes.func.isRequired,
   isSaving: PropTypes.bool,
+  isChecked: PropTypes.bool,
+  checkboxLabel: PropTypes.string,
 };
 
 CustomFieldSettings.defaultProps = {
   mandatory: false,
   isSaving: false,
+  isChecked: false,
+  checkboxLabel: '',
 };
 
 export default CustomFieldSettings;

assets/js/src/form_editor/blocks/custom_checkbox/edit.jsx

@@ -47,15 +47,25 @@ const CustomCheckboxEdit = ({ attributes, setAttributes }) => {
           <CustomFieldSettings
             mandatory={attributes.mandatory}
             isSaving={isSaving}
+            isChecked={isChecked()}
+            checkboxLabel={getCheckboxLabel()}
             onSave={(params) => saveCustomField({
               customFieldId: attributes.customFieldId,
               data: {
                 params: {
                   required: params.mandatory ? '1' : undefined,
+                  values: [{
+                    is_checked: params.isChecked ? '1' : undefined,
+                    value: params.checkboxLabel,
+                  }],
                 },
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,
+                values: [{
+                  isChecked: params.isChecked,
+                  name: params.checkboxLabel,
+                }],
               }),
             })}
           />
@@ -74,25 +84,6 @@ const CustomCheckboxEdit = ({ attributes, setAttributes }) => {
             checked={!attributes.hideLabel}
             onChange={(hideLabel) => (setAttributes({ hideLabel: !hideLabel }))}
           />
-          <input
-            type="checkbox"
-            checked={isChecked()}
-            onChange={(event) => setAttributes({
-              values: [{
-                name: getCheckboxLabel(),
-                checked: !!event.target.checked,
-              }],
-            })}
-          />
-          <input
-            value={getCheckboxLabel()}
-            onChange={(event) => setAttributes({
-              values: [{
-                name: event.target.value,
-                checked: isChecked(),
-              }],
-            })}
-          />
         </PanelBody>
       </Panel>
     </InspectorControls>