Add position to fixed bar form

[MAILPOET-2740]

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),
         }))}
       />
+      <RadioControl
+        label={MailPoet.I18n.t('formPlacementPlacementPosition')}
+        selected={localPosition}
+        options={[
+          { label: MailPoet.I18n.t('formPlacementPlacementPositionTop'), value: 'top' },
+          { label: MailPoet.I18n.t('formPlacementPlacementPositionBottom'), value: 'bottom' },
+        ]}
+        onChange={setLocalPosition}
+      />
     </FormPlacementSettings>
   );
 };

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

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,
     },
   };
 }

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,
     },
   };
 }

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;
   }

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,
+    },
+  },
+});

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;
   },