Add delay settings

[MAILPOET-2741]

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 = () => {
           />
         </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>
   );
 };

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

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

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

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

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

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