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 29dfe6fb6c..3a06970bb4 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 @@ -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 (