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