Fix custom fields label saving for checkbox

[MAILPOET-3926]

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   BaseControl,
-  Button,
+  Button, TextControl,
   ToggleControl,
 } from '@wordpress/components';
 import { isEmpty } from 'lodash';
@@ -10,6 +10,7 @@ import MailPoet from 'mailpoet';
 import CustomFieldDelete from '../custom_field_delete.jsx';
 
 const CustomFieldSettings = ({
+  label,
   mandatory,
   isSaving,
   onSave,
@@ -19,20 +20,23 @@ const CustomFieldSettings = ({
   onCustomFieldDelete,
   onChange,
 }) => {
+  const [localLabel, setLocalLabel] = useState(label);
   const [localMandatory, setLocalMandatory] = useState(mandatory);
   const [localIsChecked, setLocalIsChecked] = useState(isChecked);
   const [localCheckboxLabel, setLocalCheckboxLabel] = useState(checkboxLabel);
 
   const hasUnsavedChanges = localMandatory !== mandatory
     || localIsChecked !== isChecked
+    || localLabel !== label
     || localCheckboxLabel !== checkboxLabel;
 
   const localData = useMemo(() => ({
     mandatory: localMandatory,
     isChecked: localIsChecked,
+    label: localLabel,
     checkboxLabel: localCheckboxLabel,
     isValid: !isEmpty(localCheckboxLabel),
-  }), [localMandatory, localIsChecked, localCheckboxLabel]);
+  }), [localLabel, localMandatory, localIsChecked, localCheckboxLabel]);
 
   useEffect(() => {
     onChange(localData, hasUnsavedChanges);
@@ -40,6 +44,12 @@ const CustomFieldSettings = ({
 
   return (
     <div className="custom-field-settings">
+      <TextControl
+        label={MailPoet.I18n.t('label')}
+        value={localLabel}
+        data-automation-id="settings_custom_text_label_input"
+        onChange={setLocalLabel}
+      />
       <ToggleControl
         label={MailPoet.I18n.t('blockMandatory')}
         checked={localMandatory}
@@ -80,6 +90,7 @@ const CustomFieldSettings = ({
 };
 
 CustomFieldSettings.propTypes = {
+  label: PropTypes.string,
   mandatory: PropTypes.bool,
   onSave: PropTypes.func,
   isSaving: PropTypes.bool,
@@ -91,6 +102,7 @@ CustomFieldSettings.propTypes = {
 };
 
 CustomFieldSettings.defaultProps = {
+  label: '',
   mandatory: false,
   onSave: null,
   isSaving: false,

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

@@ -3,7 +3,6 @@ import React from 'react';
 import {
   Panel,
   PanelBody,
-  TextControl,
   ToggleControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -56,6 +55,7 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
       <Panel>
         <PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
           <CustomFieldSettings
+            label={attributes.label}
             mandatory={attributes.mandatory}
             isSaving={isSaving}
             isChecked={isChecked()}
@@ -67,6 +67,7 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
               },
               onFinish: () => setAttributes({
                 mandatory: params.mandatory,
+                label: params.label,
                 values: [{
                   isChecked: params.isChecked,
                   name: params.checkboxLabel,
@@ -84,12 +85,6 @@ const CustomCheckboxEdit = ({ attributes, setAttributes, clientId }) => {
       </Panel>
       <Panel>
         <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
-          <TextControl
-            label={MailPoet.I18n.t('label')}
-            value={attributes.label}
-            data-automation-id="settings_custom_text_label_input"
-            onChange={(label) => (setAttributes({ label }))}
-          />
           <ToggleControl
             label={MailPoet.I18n.t('displayLabel')}
             checked={!attributes.hideLabel}

assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx

@@ -2,6 +2,7 @@ function mapFormDataToParams(fieldType, data) {
   switch (fieldType) {
     case 'checkbox':
       return {
+        label: data.label,
         required: data.mandatory ? '1' : '',
         values: [{
           is_checked: data.isChecked ? '1' : '',
@@ -10,6 +11,7 @@ function mapFormDataToParams(fieldType, data) {
       };
     case 'date':
       return {
+        label: data.label,
         required: data.mandatory ? '1' : '',
         date_type: data.dateType,
         date_format: data.dateFormat,