Add fixed bar form settings

[MAILPOET-2740]

assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx

@@ -0,0 +1,95 @@
+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 './fixed_bar_icon';
+
+const delayValues = [0, 15, 30, 60, 120, 180, 240];
+
+const FixedBar = () => {
+  const fixedBarFormDelay = useSelect(
+    (select) => select('mailpoet-form-editor').getFixedBarFormDelay(),
+    []
+  );
+
+  const placeFixedBarFormOnAllPages = useSelect(
+    (select) => select('mailpoet-form-editor').placeFixedBarFormOnAllPages(),
+    []
+  );
+
+  const placeFixedBarFormOnAllPosts = useSelect(
+    (select) => select('mailpoet-form-editor').placeFixedBarFormOnAllPosts(),
+    []
+  );
+  const {
+    setPlaceFixedBarFormOnAllPages,
+    setPlaceFixedBarFormOnAllPosts,
+    setFixedBarFormDelay,
+  } = useDispatch('mailpoet-form-editor');
+
+  const [
+    localPlaceFixedBarFormOnAllPages,
+    setLocalPlaceFixedBarFormOnAllPages,
+  ] = useState(placeFixedBarFormOnAllPages);
+  const [
+    localPlaceFixedBarFormOnAllPosts,
+    setLocalPlaceFixedBarFormOnAllPosts,
+  ] = useState(placeFixedBarFormOnAllPosts);
+  const [
+    localDelay,
+    setLocalDelay,
+  ] = useState(fixedBarFormDelay === undefined ? 15 : fixedBarFormDelay);
+
+  const save = () => {
+    setPlaceFixedBarFormOnAllPages(localPlaceFixedBarFormOnAllPages);
+    setPlaceFixedBarFormOnAllPosts(localPlaceFixedBarFormOnAllPosts);
+    setFixedBarFormDelay(localDelay);
+  };
+
+  return (
+    <FormPlacementSettings
+      active={placeFixedBarFormOnAllPages || placeFixedBarFormOnAllPosts}
+      onSave={save}
+      description={MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}
+      label={MailPoet.I18n.t('placeFixedBarFormOnPages')}
+      icon={Icon}
+    >
+      <div className="mailpoet-toggle-list">
+        <div className="mailpoet-toggle-list-description">
+          {MailPoet.I18n.t('placeFixedBarFormOnPages')}
+        </div>
+        <div className="mailpoet-toggle-list-toggle">
+          <Toggle
+            name="localPlaceFixedBarFormOnAllPages"
+            checked={localPlaceFixedBarFormOnAllPages}
+            onCheck={setLocalPlaceFixedBarFormOnAllPages}
+          />
+        </div>
+        <div className="mailpoet-toggle-list-description">
+          {MailPoet.I18n.t('placeFormBellowAllPosts')}
+        </div>
+        <div className="mailpoet-toggle-list-toggle">
+          <Toggle
+            name="localPlaceFixedBarFormOnAllPosts"
+            checked={localPlaceFixedBarFormOnAllPosts}
+            onCheck={setLocalPlaceFixedBarFormOnAllPosts}
+          />
+        </div>
+      </div>
+      <SelectControl
+        label={MailPoet.I18n.t('formPlacementDelay')}
+        value={localDelay}
+        onChange={setLocalDelay}
+        options={delayValues.map((delayValue) => ({
+          value: delayValue,
+          label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
+        }))}
+      />
+    </FormPlacementSettings>
+  );
+};
+
+export default FixedBar;

assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar_icon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  SVG,
+  Path,
+  Rect,
+  G,
+} from '@wordpress/components';
+
+export default (
+  <SVG width="144" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 120">
+    <defs>
+      <Rect id="fixed_bar_a" x="8" y="24" width="128" height="88" rx="1" />
+    </defs>
+    <G fill="none" fillRule="evenodd">
+      <Path d="M4 0h136a4 4 0 0 1 4 4v112a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z" fill="#FFF" fillRule="nonzero" />
+      <use fill="#FFF" xlinkHref="#a" />
+      <use fillOpacity=".4" fill="#E5E9F8" xlinkHref="#fixed_bar_a" />
+      <Rect fill="#FF5301" fillRule="nonzero" x="98" y="8" width="38" height="8" rx="1" />
+      <Rect fill="#FFE0D0" fillRule="nonzero" x="53" y="8" width="38" height="8" rx="1" />
+      <Rect fill="#FFE0D0" fillRule="nonzero" x="8" y="8" width="38" height="8" rx="1" />
+    </G>
+  </SVG>
+);

assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
 
 import FormPlacementOptionBelowPages from './form_placement_options/below_pages';
 import FormPlacementOptionPopup from './form_placement_options/popup';
+import FormPlacementOptionFixedBar from './form_placement_options/fixed_bar';
 
 const FormPlacementPanel = ({ onToggle, isOpened }) => {
   const [copyAreaContent, setCopyAreaContent] = useState(null);
@@ -99,6 +100,7 @@ const FormPlacementPanel = ({ onToggle, isOpened }) => {
       >
         <div className="form-placement-option-list">
           <FormPlacementOptionBelowPages />
+          <FormPlacementOptionFixedBar />
           <FormPlacementOptionPopup />
         </div>
         <p>{addFormShortcodeHint}</p>

assets/js/src/form_editor/store/actions.jsx

@@ -55,6 +55,27 @@ export function setPopupFormDelay(delay) {
   };
 }
 
+export function setPlaceFixedBarFormOnAllPages(place) {
+  return {
+    type: 'PLACE_FIXED_BAR_FORM_ON_ALL_PAGES',
+    place,
+  };
+}
+
+export function setPlaceFixedBarFormOnAllPosts(place) {
+  return {
+    type: 'PLACE_FIXED_BAR_FORM_ON_ALL_POSTS',
+    place,
+  };
+}
+
+export function setFixedBarFormDelay(delay) {
+  return {
+    type: 'SET_FIXED_BAR_FORM_DELAY',
+    delay,
+  };
+}
+
 export function deleteCustomFieldStarted() {
   return {
     type: 'DELETE_CUSTOM_FIELD_STARTED',

assets/js/src/form_editor/store/map_form_data_after_loading.jsx

@@ -3,6 +3,10 @@ export default function mapFormDataAfterLoading(data) {
   if (Number.isNaN(popupFormDelay)) {
     popupFormDelay = undefined;
   }
+  let fixedBarFormDelay = parseInt(data.settings.fixed_bar_form_delay, 10);
+  if (Number.isNaN(fixedBarFormDelay)) {
+    fixedBarFormDelay = undefined;
+  }
 
   return {
     ...data,
@@ -13,6 +17,9 @@ export default function mapFormDataAfterLoading(data) {
       placePopupFormOnAllPages: data.settings.place_popup_form_on_all_pages === '1',
       placePopupFormOnAllPosts: data.settings.place_popup_form_on_all_posts === '1',
       popupFormDelay,
+      placeFixedBarFormOnAllPages: data.settings.place_fixed_bar_form_on_all_pages === '1',
+      placeFixedBarFormOnAllPosts: data.settings.place_fixed_bar_form_on_all_posts === '1',
+      fixedBarFormDelay,
     },
   };
 }

assets/js/src/form_editor/store/map_form_data_before_saving.jsx

@@ -8,6 +8,9 @@ export default function mapFormDataBeforeSaving(data) {
       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,
+      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,
     },
   };
 }

assets/js/src/form_editor/store/reducer.jsx

@@ -10,6 +10,9 @@ import {
   placePopupFormOnAllPages,
   placePopupFormOnAllPosts,
   setPopupFormDelay,
+  placeFixedBarFormOnAllPosts,
+  placeFixedBarFormOnAllPages,
+  setFixedBarFormDelay,
 } from './reducers/form_placement.jsx';
 import changeFormSettings from './reducers/change_form_settings.jsx';
 import changeFormStyles from './reducers/change_form_styles.jsx';
@@ -64,6 +67,9 @@ export default (defaultState) => (state = defaultState, 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);
+    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);
     default:
       return state;
   }

assets/js/src/form_editor/store/reducers/form_placement.jsx

@@ -20,14 +20,22 @@ export const placePopupFormOnAllPages = formPlacement('placePopupFormOnAllPages'
 
 export const placePopupFormOnAllPosts = formPlacement('placePopupFormOnAllPosts');
 
-export const setPopupFormDelay = (state, action) => ({
+export const placeFixedBarFormOnAllPages = formPlacement('placeFixedBarFormOnAllPages');
+
+export const placeFixedBarFormOnAllPosts = formPlacement('placeFixedBarFormOnAllPosts');
+
+export const formPlacementDelay = curry((delayFormName, state, action) => ({
   ...state,
   hasUnsavedChanges: true,
   formData: {
     ...state.formData,
     settings: {
       ...state.formData.settings,
-      popupFormDelay: action.delay,
+      [delayFormName]: action.delay,
     },
   },
-});
+}));
+
+export const setPopupFormDelay = formPlacementDelay('popupFormDelay');
+
+export const setFixedBarFormDelay = formPlacementDelay('fixedBarFormDelay');

assets/js/src/form_editor/store/selectors.jsx

@@ -49,6 +49,15 @@ export default {
   getPopupFormDelay(state) {
     return state.formData.settings.popupFormDelay;
   },
+  placeFixedBarFormOnAllPages(state) {
+    return state.formData.settings.placeFixedBarFormOnAllPages || false;
+  },
+  placeFixedBarFormOnAllPosts(state) {
+    return state.formData.settings.placeFixedBarFormOnAllPosts || false;
+  },
+  getFixedBarFormDelay(state) {
+    return state.formData.settings.fixedBarFormDelay;
+  },
   getAllAvailableSegments(state) {
     return state.segments;
   },

views/form/editor.html

@@ -59,6 +59,8 @@
   'customCss': _x('Custom CSS', 'A settings section heading'),
   'formSaved': __('Form saved.'),
   'customFieldSaved': __('Custom field saved.'),
+  'placeFixedBarFormOnPages': _x('Fixed bar', 'This is a text on a widget that leads to settings for form placement - form type is fixed bar'),
+  'placeFixedBarFormOnPagesDescription': __('Display your form in a fixed horizontal bar at the top or bottom of posts or pages.'),
   'placePopupFormOnPages': _x('Pop up', 'This is a text on a widget that leads to settings for form placement - form type is pop up, it will be displayed on page in a small modal window'),
   'placePopupFormOnPagesDescription': __('Display your form in a pop up window.'),
   'placeFormBellowPages': _x('Below pages', 'This is a text on a widget that leads to settings for form placement'),