diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx index a42db9e241..5b18f6e67e 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx @@ -1,12 +1,20 @@ import React, { useState } from 'react'; import MailPoet from 'mailpoet'; +import { SelectControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import FormPlacementSettings from './form_placement_settings'; import Toggle from '../../../../common/toggle'; import Icon from './popup_icon'; +const delayValues = [0, 15, 30, 60, 120, 180, 240]; + const Popup = () => { + const popupFormDelay = useSelect( + (select) => select('mailpoet-form-editor').getPopupFormDelay(), + [] + ); + const placePopupFormOnAllPages = useSelect( (select) => select('mailpoet-form-editor').placePopupFormOnAllPages(), [] @@ -16,7 +24,11 @@ const Popup = () => { (select) => select('mailpoet-form-editor').placePopupFormOnAllPosts(), [] ); - const { setPlacePopupFormOnAllPages, setPlacePopupFormOnAllPosts } = useDispatch('mailpoet-form-editor'); + const { + setPlacePopupFormOnAllPages, + setPlacePopupFormOnAllPosts, + setPopupFormDelay, + } = useDispatch('mailpoet-form-editor'); const [ localPlacePopupFormOnAllPages, @@ -26,10 +38,15 @@ const Popup = () => { localPlacePopupFormOnAllPosts, setLocalPlacePopupFormOnAllPosts, ] = useState(placePopupFormOnAllPosts); + const [ + localDelay, + setLocalDelay, + ] = useState(popupFormDelay === undefined ? 15 : popupFormDelay); const save = () => { setPlacePopupFormOnAllPages(localPlacePopupFormOnAllPages); setPlacePopupFormOnAllPosts(localPlacePopupFormOnAllPosts); + setPopupFormDelay(localDelay); }; return ( @@ -62,6 +79,15 @@ const Popup = () => { /> + ({ + value: delayValue, + label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue), + }))} + /> ); }; diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx index 983cd5c8df..61adac52e3 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/assets/js/src/form_editor/store/actions.jsx @@ -48,6 +48,13 @@ export function setPlacePopupFormOnAllPosts(place) { }; } +export function setPopupFormDelay(delay) { + return { + type: 'SET_POPUP_FORM_DELAY', + delay, + }; +} + export function deleteCustomFieldStarted() { return { type: 'DELETE_CUSTOM_FIELD_STARTED', diff --git a/assets/js/src/form_editor/store/map_form_data_after_loading.jsx b/assets/js/src/form_editor/store/map_form_data_after_loading.jsx index 7d4f287e09..925875658e 100644 --- a/assets/js/src/form_editor/store/map_form_data_after_loading.jsx +++ b/assets/js/src/form_editor/store/map_form_data_after_loading.jsx @@ -1,4 +1,9 @@ export default function mapFormDataAfterLoading(data) { + let popupFormDelay = parseInt(data.settings.popup_form_delay, 10); + if (Number.isNaN(popupFormDelay)) { + popupFormDelay = undefined; + } + return { ...data, settings: { @@ -7,6 +12,7 @@ export default function mapFormDataAfterLoading(data) { placeFormBellowAllPosts: data.settings.place_form_bellow_all_posts === '1', placePopupFormOnAllPages: data.settings.place_popup_form_on_all_pages === '1', placePopupFormOnAllPosts: data.settings.place_popup_form_on_all_posts === '1', + popupFormDelay, }, }; } diff --git a/assets/js/src/form_editor/store/map_form_data_before_saving.jsx b/assets/js/src/form_editor/store/map_form_data_before_saving.jsx index 6b33004381..8a351af523 100644 --- a/assets/js/src/form_editor/store/map_form_data_before_saving.jsx +++ b/assets/js/src/form_editor/store/map_form_data_before_saving.jsx @@ -7,6 +7,7 @@ export default function mapFormDataBeforeSaving(data) { place_form_bellow_all_posts: data.settings.placeFormBellowAllPosts === true ? '1' : '', place_popup_form_on_all_pages: data.settings.placePopupFormOnAllPages === true ? '1' : '', place_popup_form_on_all_posts: data.settings.placePopupFormOnAllPosts === true ? '1' : '', + popup_form_delay: data.settings.popupFormDelay, }, }; } diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx index 7e2e07333b..2c07ca5963 100644 --- a/assets/js/src/form_editor/store/reducer.jsx +++ b/assets/js/src/form_editor/store/reducer.jsx @@ -9,6 +9,7 @@ import { placeFormBellowAllPosts, placePopupFormOnAllPages, placePopupFormOnAllPosts, + setPopupFormDelay, } from './reducers/form_placement.jsx'; import changeFormSettings from './reducers/change_form_settings.jsx'; import changeFormStyles from './reducers/change_form_styles.jsx'; @@ -62,6 +63,7 @@ export default (defaultState) => (state = defaultState, action) => { case 'PLACE_FORM_BELLOW_ALL_POSTS': return placeFormBellowAllPosts(state, action); case 'PLACE_POPUP_FORM_ON_ALL_PAGES': return placePopupFormOnAllPages(state, action); case 'PLACE_POPUP_FORM_ON_ALL_POSTS': return placePopupFormOnAllPosts(state, action); + case 'SET_POPUP_FORM_DELAY': return setPopupFormDelay(state, action); default: return state; } diff --git a/assets/js/src/form_editor/store/reducers/form_placement.jsx b/assets/js/src/form_editor/store/reducers/form_placement.jsx index e029efed7f..3141c78e41 100644 --- a/assets/js/src/form_editor/store/reducers/form_placement.jsx +++ b/assets/js/src/form_editor/store/reducers/form_placement.jsx @@ -19,3 +19,15 @@ export const placeFormBellowAllPages = formPlacement('placeFormBellowAllPages'); export const placePopupFormOnAllPages = formPlacement('placePopupFormOnAllPages'); export const placePopupFormOnAllPosts = formPlacement('placePopupFormOnAllPosts'); + +export const setPopupFormDelay = (state, action) => ({ + ...state, + hasUnsavedChanges: true, + formData: { + ...state.formData, + settings: { + ...state.formData.settings, + popupFormDelay: action.delay, + }, + }, +}); diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx index cc8313c962..f66167f28f 100644 --- a/assets/js/src/form_editor/store/selectors.jsx +++ b/assets/js/src/form_editor/store/selectors.jsx @@ -46,6 +46,9 @@ export default { placePopupFormOnAllPosts(state) { return state.formData.settings.placePopupFormOnAllPosts || false; }, + getPopupFormDelay(state) { + return state.formData.settings.popupFormDelay; + }, getAllAvailableSegments(state) { return state.segments; }, diff --git a/views/form/editor.html b/views/form/editor.html index 99a42c5767..41c1dbd12a 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -65,6 +65,8 @@ 'placeFormBellowPagesDescription': __('This form placement allows you to add this form at the end of all the pages or posts, below the content.'), 'placeFormBellowAllPages': _x('Display on all pages', 'This is a text on a switch if a form should be displayed bellow all pages'), 'placeFormBellowAllPosts': _x('Display on all posts', 'This is a text on a switch if a form should be displayed bellow all posts'), + 'formPlacementDelay': _x('Display with a delay of', 'Label on a selection of different times'), + 'formPlacementDelaySeconds': _x('%1s sec', 'times selection should be in the end "30 sec"'), 'formPlacementSave': _x('Save', 'Text on a button to save a form'), 'addFormWidgetHint': __('Add this form to a [link]widget area[/link].'), 'addFormShortcodeHint': __('[link]Use Gutenberg block[/link] available on any page or post. Or use the shortcode [shortcode].'),