diff --git a/assets/js/src/form_editor/blocks/custom_field_delete.jsx b/assets/js/src/form_editor/blocks/custom_field_delete.jsx
new file mode 100644
index 0000000000..be9f9590f6
--- /dev/null
+++ b/assets/js/src/form_editor/blocks/custom_field_delete.jsx
@@ -0,0 +1,50 @@
+import React, { useLayoutEffect } from 'react';
+import {
+ Button,
+} from '@wordpress/components';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const CustomFieldDelete = ({
+ isBusy,
+ displayConfirm,
+ onDeleteClick,
+ onDeleteConfirm,
+}) => {
+ useLayoutEffect(() => {
+ if (displayConfirm) {
+ const result = window.confirm(MailPoet.I18n.t('customFieldDeleteConfirm'));// eslint-disable-line no-alert
+ if (result) {
+ onDeleteConfirm();
+ }
+ }
+ });
+
+ return (
+
+ );
+};
+
+CustomFieldDelete.propTypes = {
+ isBusy: PropTypes.bool,
+ displayConfirm: PropTypes.bool,
+ onDeleteClick: PropTypes.func,
+ onDeleteConfirm: PropTypes.func,
+};
+
+CustomFieldDelete.defaultProps = {
+ isBusy: false,
+ displayConfirm: false,
+ onDeleteClick: () => {},
+ onDeleteConfirm: () => {},
+};
+
+export default CustomFieldDelete;
diff --git a/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx b/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
index 07a4165162..f187626547 100644
--- a/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
+++ b/assets/js/src/form_editor/blocks/custom_text/custom_field_settings.jsx
@@ -7,11 +7,16 @@ import {
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
+import CustomFieldDelete from '../custom_field_delete.jsx';
+
const CustomFieldSettings = ({
mandatory,
validate,
isSaving,
onSave,
+ displayCustomFieldDeleteConfirm,
+ onCustomFieldDeleteClick,
+ onCustomFieldDeleteConfirm,
}) => {
const [localMandatory, setLocalMandatory] = useState(mandatory);
const [localValidate, setLocalValidate] = useState(validate);
@@ -31,6 +36,12 @@ const CustomFieldSettings = ({
>
{MailPoet.I18n.t('customFieldSaveCTA')}
+
{},
+ onCustomFieldDeleteConfirm: () => {},
};
export default CustomFieldSettings;
diff --git a/assets/js/src/form_editor/blocks/custom_text/edit.jsx b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
index f57941c2fc..5df05400ad 100644
--- a/assets/js/src/form_editor/blocks/custom_text/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_text/edit.jsx
@@ -18,7 +18,11 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[]
);
- const { saveCustomField } = useDispatch('mailpoet-form-editor');
+ const displayCustomFieldDeleteConfirm = useSelect(
+ (sel) => sel('mailpoet-form-editor').getDisplayCustomFieldDeleteConfirm(),
+ []
+ );
+ const { saveCustomField, onCustomFieldDeleteClick, onCustomFieldDeleteConfirm } = useDispatch('mailpoet-form-editor');
const inspectorControls = (
@@ -45,6 +49,9 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
}),
});
}}
+ displayCustomFieldDeleteConfirm={displayCustomFieldDeleteConfirm}
+ onCustomFieldDeleteClick={onCustomFieldDeleteClick}
+ onCustomFieldDeleteConfirm={onCustomFieldDeleteConfirm}
/>
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
index 3c1d40c1d1..677e4a5c9c 100644
--- a/assets/js/src/form_editor/store/actions.jsx
+++ b/assets/js/src/form_editor/store/actions.jsx
@@ -20,6 +20,12 @@ export function changeFormName(name) {
};
}
+export function onCustomFieldDeleteClick() {
+ return {
+ type: 'CUSTOM_FIELD_DELETE_CLICK',
+ };
+}
+
export function changeFormStyles(styles) {
return {
type: 'CHANGE_FORM_STYLES',
diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx
index 7919286fa7..393c58788f 100644
--- a/assets/js/src/form_editor/store/reducer.jsx
+++ b/assets/js/src/form_editor/store/reducer.jsx
@@ -13,6 +13,7 @@ import changeFormBlocks from './reducers/change_form_blocks.jsx';
import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
import saveCustomFieldFailed from './reducers/save_custom_field_failed.jsx';
import saveCustomFieldStarted from './reducers/save_custom_field_started.jsx';
+import customFieldDeleteClick from './reducers/custom_field_delete_click.jsx';
const saveFormStarted = saveFormStartedFactory(MailPoet);
@@ -32,6 +33,7 @@ export default (defaultState) => (state = defaultState, action) => {
case 'SWITCH_SIDEBAR_TAB': return switchSidebarTab(state, action);
case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);
+ case 'CUSTOM_FIELD_DELETE_CLICK': return customFieldDeleteClick(state, action);
default:
return state;
}
diff --git a/assets/js/src/form_editor/store/reducers/custom_field_delete_click.jsx b/assets/js/src/form_editor/store/reducers/custom_field_delete_click.jsx
new file mode 100644
index 0000000000..902ae51203
--- /dev/null
+++ b/assets/js/src/form_editor/store/reducers/custom_field_delete_click.jsx
@@ -0,0 +1,4 @@
+export default (state) => ({
+ ...state,
+ displayCustomFieldDeleteConfirm: true,
+});
diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx
index 2a4668d527..5870e97dac 100644
--- a/assets/js/src/form_editor/store/selectors.jsx
+++ b/assets/js/src/form_editor/store/selectors.jsx
@@ -32,6 +32,9 @@ export default {
getIsCustomFieldSaving(state) {
return state.isCustomFieldSaving;
},
+ getDisplayCustomFieldDeleteConfirm(state) {
+ return state.displayCustomFieldDeleteConfirm;
+ },
getDismissibleNotices(state) {
return state.notices.filter((notice) => notice.isDismissible === true);
},
diff --git a/views/form/editor.html b/views/form/editor.html
index 124bc2f9d2..1257808a86 100644
--- a/views/form/editor.html
+++ b/views/form/editor.html
@@ -51,6 +51,8 @@
'customFieldsBlocksCategory': __('Custom Fields'),
'customFieldNumberOfLines': __('Number of lines'),
'customFieldSaveCTA': _x('Update custom field', 'Text on the save button'),
+ 'customFieldDeleteCTA': _x('Delete this custom field', 'Text on the delete button'),
+ 'customFieldDeleteConfirm': __('This field will be deleted for all your subscribers. Are you sure?'),
'customFieldDateType': __('Type of date'),
'customFieldDateFormat': __('Order'),
'customFieldDefaultToday': __('Preselect today’s date'),