diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx index b3334095b2..13c7ebd137 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx +++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import MailPoet from 'mailpoet'; -import { SelectControl } from '@wordpress/components'; +import { SelectControl, RadioControl } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import FormPlacementSettings from './form_placement_settings'; @@ -14,6 +14,10 @@ const FixedBar = () => { (select) => select('mailpoet-form-editor').getFixedBarFormDelay(), [] ); + const fixedBarFormPosition = useSelect( + (select) => select('mailpoet-form-editor').getFixedBarFormPosition(), + [] + ); const placeFixedBarFormOnAllPages = useSelect( (select) => select('mailpoet-form-editor').placeFixedBarFormOnAllPages(), @@ -28,6 +32,7 @@ const FixedBar = () => { setPlaceFixedBarFormOnAllPages, setPlaceFixedBarFormOnAllPosts, setFixedBarFormDelay, + setFixedBarFormPosition, } = useDispatch('mailpoet-form-editor'); const [ @@ -42,11 +47,16 @@ const FixedBar = () => { localDelay, setLocalDelay, ] = useState(fixedBarFormDelay === undefined ? 15 : fixedBarFormDelay); + const [ + localPosition, + setLocalPosition, + ] = useState(fixedBarFormPosition === undefined ? 'top' : fixedBarFormPosition); const save = () => { setPlaceFixedBarFormOnAllPages(localPlaceFixedBarFormOnAllPages); setPlaceFixedBarFormOnAllPosts(localPlaceFixedBarFormOnAllPosts); setFixedBarFormDelay(localDelay); + setFixedBarFormPosition(localPosition); }; return ( @@ -88,6 +98,15 @@ const FixedBar = () => { 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 e2539c7044..e0227c9543 100644 --- a/assets/js/src/form_editor/store/actions.jsx +++ b/assets/js/src/form_editor/store/actions.jsx @@ -76,6 +76,13 @@ export function setFixedBarFormDelay(delay) { }; } +export function setFixedBarFormPosition(position) { + return { + type: 'SET_FIXED_BAR_FORM_POSITION', + position, + }; +} + 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 0bd667b498..767b7125c0 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 @@ -20,6 +20,7 @@ export default function mapFormDataAfterLoading(data) { placeFixedBarFormOnAllPages: data.settings.place_fixed_bar_form_on_all_pages === '1', placeFixedBarFormOnAllPosts: data.settings.place_fixed_bar_form_on_all_posts === '1', fixedBarFormDelay, + fixedBarFormPosition: data.settings.fixed_bar_form_position, }, }; } 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 464d726a41..f8fca29c92 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 @@ -11,6 +11,7 @@ export default function mapFormDataBeforeSaving(data) { place_fixed_bar_form_on_all_pages: data.settings.placeFixedBarFormOnAllPages === true ? '1' : '', place_fixed_bar_form_on_all_posts: data.settings.placeFixedBarFormOnAllPosts === true ? '1' : '', fixed_bar_form_delay: data.settings.fixedBarFormDelay, + fixed_bar_form_position: data.settings.fixedBarFormPosition, }, }; } diff --git a/assets/js/src/form_editor/store/reducer.jsx b/assets/js/src/form_editor/store/reducer.jsx index c8e4984e4f..cbda1c77af 100644 --- a/assets/js/src/form_editor/store/reducer.jsx +++ b/assets/js/src/form_editor/store/reducer.jsx @@ -13,6 +13,7 @@ import { placeFixedBarFormOnAllPosts, placeFixedBarFormOnAllPages, setFixedBarFormDelay, + setFixedBarFormPosition, } from './reducers/form_placement.jsx'; import changeFormSettings from './reducers/change_form_settings.jsx'; import changeFormStyles from './reducers/change_form_styles.jsx'; @@ -70,6 +71,7 @@ export default (defaultState) => (state = defaultState, action) => { case 'PLACE_FIXED_BAR_FORM_ON_ALL_PAGES': return placeFixedBarFormOnAllPages(state, action); case 'PLACE_FIXED_BAR_FORM_ON_ALL_POSTS': return placeFixedBarFormOnAllPosts(state, action); case 'SET_FIXED_BAR_FORM_DELAY': return setFixedBarFormDelay(state, action); + case 'SET_FIXED_BAR_FORM_POSITION': return setFixedBarFormPosition(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 e7d70940ad..ac9bbf27b0 100644 --- a/assets/js/src/form_editor/store/reducers/form_placement.jsx +++ b/assets/js/src/form_editor/store/reducers/form_placement.jsx @@ -39,3 +39,15 @@ export const formPlacementDelay = curry((delayFormName, state, action) => ({ export const setPopupFormDelay = formPlacementDelay('popupFormDelay'); export const setFixedBarFormDelay = formPlacementDelay('fixedBarFormDelay'); + +export const setFixedBarFormPosition = (state, action) => ({ + ...state, + hasUnsavedChanges: true, + formData: { + ...state.formData, + settings: { + ...state.formData.settings, + fixedBarFormPosition: action.position, + }, + }, +}); diff --git a/assets/js/src/form_editor/store/selectors.jsx b/assets/js/src/form_editor/store/selectors.jsx index cc03f51cc3..b452855240 100644 --- a/assets/js/src/form_editor/store/selectors.jsx +++ b/assets/js/src/form_editor/store/selectors.jsx @@ -58,6 +58,9 @@ export default { getFixedBarFormDelay(state) { return state.formData.settings.fixedBarFormDelay; }, + getFixedBarFormPosition(state) { + return state.formData.settings.fixedBarFormPosition; + }, getAllAvailableSegments(state) { return state.segments; }, diff --git a/views/form/editor.html b/views/form/editor.html index f0d42092f1..8a455ad016 100644 --- a/views/form/editor.html +++ b/views/form/editor.html @@ -68,6 +68,9 @@ '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'), + 'formPlacementPlacementPosition': _x('Position', 'Placement of a fixed bar form, on top of the page or on the bottom'), + 'formPlacementPlacementPositionTop': _x('top', 'Placement of a fixed bar form, on top of the page or on the bottom'), + 'formPlacementPlacementPositionBottom': _x('bottom', 'Placement of a fixed bar form, on top of the page or on the bottom'), '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].'),