Add default values for form placement settings

[MAILPOET-2811]

assets/js/src/form_editor/components/preview/fixed_bar_settings.tsx

@@ -20,11 +20,6 @@ const FixedBarSettings = () => {
     changeFormSettings(settings);
   };
 
-  const fixedBarFormDelay = formSettings.fixedBarFormDelay === undefined
-    ? 15
-    : formSettings.fixedBarFormDelay;
-  const fixedBarFormPosition = formSettings.fixedBarFormPosition === undefined ? 'top' : formSettings.fixedBarFormPosition;
-
   return (
     <>
       <p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
@@ -41,7 +36,7 @@ const FixedBarSettings = () => {
       />
       <SelectControl
         label={MailPoet.I18n.t('formPlacementDelay')}
-        value={fixedBarFormDelay}
+        value={formSettings.fixedBarFormDelay}
         onChange={partial(updateSettings, 'fixedBarFormDelay')}
         options={delayValues.map((delayValue) => ({
           value: delayValue,
@@ -50,7 +45,7 @@ const FixedBarSettings = () => {
       />
       <RadioControl
         label={MailPoet.I18n.t('formPlacementPlacementPosition')}
-        selected={fixedBarFormPosition}
+        selected={formSettings.fixedBarFormPosition}
         options={[
           { label: MailPoet.I18n.t('formPlacementPlacementPositionTop'), value: 'top' },
           { label: MailPoet.I18n.t('formPlacementPlacementPositionBottom'), value: 'bottom' },

assets/js/src/form_editor/components/preview/popup_settings.tsx

@@ -20,9 +20,6 @@ const PopUpSettings = () => {
     settings[key] = value;
     changeFormSettings(settings);
   };
-  const popupFormDelay = formSettings.popupFormDelay === undefined
-    ? 15
-    : formSettings.popupFormDelay;
 
   return (
     <>
@@ -40,7 +37,7 @@ const PopUpSettings = () => {
       />
       <SelectControl
         label={MailPoet.I18n.t('formPlacementDelay')}
-        value={popupFormDelay}
+        value={formSettings.popupFormDelay}
         onChange={partial(updateSettings, 'popupFormDelay')}
         options={delayValues.map((delayValue) => ({
           value: delayValue,

assets/js/src/form_editor/components/preview/slide_in_settings.tsx

@@ -20,11 +20,6 @@ const SlideInSettings = () => {
     changeFormSettings(settings);
   };
 
-  const slideInFormDelay = formSettings.slideInFormDelay === undefined
-    ? 15
-    : formSettings.slideInFormDelay;
-  const slideInFormPosition = formSettings.slideInFormPosition === undefined ? 'right' : formSettings.slideInFormPosition;
-
   return (
     <>
       <p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
@@ -41,7 +36,7 @@ const SlideInSettings = () => {
       />
       <SelectControl
         label={MailPoet.I18n.t('formPlacementDelay')}
-        value={slideInFormDelay}
+        value={formSettings.slideInFormDelay}
         onChange={partial(updateSettings, 'slideInFormDelay')}
         options={delayValues.map((delayValue) => ({
           value: delayValue,
@@ -50,7 +45,7 @@ const SlideInSettings = () => {
       />
       <RadioControl
         label={MailPoet.I18n.t('formPlacementPlacementPosition')}
-        selected={slideInFormPosition}
+        selected={formSettings.slideInFormPosition}
         options={[
           { label: MailPoet.I18n.t('formPlacementPlacementPositionLeft'), value: 'left' },
           { label: MailPoet.I18n.t('formPlacementPlacementPositionRight'), value: 'right' },

assets/js/src/form_editor/store/defaults.ts

@@ -2,37 +2,52 @@
  * Default values for various settings
  */
 
-export const belowPostStyles = {
+export const belowPostForm = {
+  styles: {
     width: {
       unit: 'percent',
       value: 100,
     },
+  },
 };
 
-export const popupStyles = {
+export const popupForm = {
+  styles: {
     width: {
       unit: 'pixel',
       value: 560,
     },
+  },
+  formDelay: 15,
 };
 
-export const fixedBarStyles = {
+export const fixedBarForm = {
+  styles: {
     width: {
       unit: 'percent',
       value: 100,
     },
+  },
+  position: 'top',
+  formDelay: 15,
 };
 
-export const otherStyles = {
+export const otherForm = {
+  styles: {
     width: {
       unit: 'percent',
       value: 100,
     },
+  },
 };
 
-export const slideInStyles = {
+export const slideInForm = {
+  styles: {
     width: {
       unit: 'pixel',
       value: 560,
     },
+  },
+  position: 'right',
+  formDelay: 15,
 };

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

@@ -10,15 +10,20 @@ 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: asNum(data.settings.popup_form_delay),
+      popupFormDelay: data.settings.popup_form_delay !== undefined
+        ? asNum(data.settings.popup_form_delay) : defaults.popupForm.formDelay,
       placeFixedBarFormOnAllPages: data.settings.place_fixed_bar_form_on_all_pages === '1',
       placeFixedBarFormOnAllPosts: data.settings.place_fixed_bar_form_on_all_posts === '1',
-      fixedBarFormDelay: asNum(data.settings.fixed_bar_form_delay),
-      fixedBarFormPosition: data.settings.fixed_bar_form_position,
+      fixedBarFormDelay: data.settings.fixed_bar_form_delay !== undefined
+        ? asNum(data.settings.fixed_bar_form_delay)
+        : defaults.fixedBarForm.formDelay,
+      fixedBarFormPosition: data.settings.fixed_bar_form_position ?? defaults.fixedBarForm.position,
       placeSlideInFormOnAllPages: data.settings.place_slide_in_form_on_all_pages === '1',
       placeSlideInFormOnAllPosts: data.settings.place_slide_in_form_on_all_posts === '1',
-      slideInFormDelay: asNum(data.settings.slide_in_form_delay),
-      slideInFormPosition: data.settings.slide_in_form_position,
+      slideInFormDelay: data.settings.slide_in_form_delay !== undefined
+        ? asNum(data.settings.slide_in_form_delay)
+        : defaults.slideInForm.formDelay,
+      slideInFormPosition: data.settings.slide_in_form_position ?? defaults.slideInForm.position,
       borderRadius: asNum(data.settings.border_radius),
       borderSize: asNum(data.settings.border_size),
       formPadding: data.settings.form_padding ? asNum(data.settings.form_padding) : 20,
@@ -26,11 +31,11 @@ export default function mapFormDataAfterLoading(data) {
       borderColor: data.settings.border_color,
       backgroundImageUrl: data.settings.background_image_url,
       backgroundImageDisplay: data.settings.background_image_display,
-      belowPostStyles: { ...defaults.belowPostStyles, ...data.settings.below_post_styles },
-      slideInStyles: { ...defaults.slideInStyles, ...data.settings.slide_in_styles },
-      fixedBarStyles: { ...defaults.fixedBarStyles, ...data.settings.fixed_bar_styles },
-      popupStyles: { ...defaults.popupStyles, ...data.settings.popup_styles },
-      otherStyles: { ...defaults.otherStyles, ...data.settings.other_styles },
+      belowPostStyles: { ...defaults.belowPostForm.styles, ...data.settings.below_post_styles },
+      slideInStyles: { ...defaults.slideInForm.styles, ...data.settings.slide_in_styles },
+      fixedBarStyles: { ...defaults.fixedBarForm.styles, ...data.settings.fixed_bar_styles },
+      popupStyles: { ...defaults.popupForm.styles, ...data.settings.popup_styles },
+      otherStyles: { ...defaults.otherForm.styles, ...data.settings.other_styles },
     },
   };
 

tests/javascript/form_editor/store/map_form_data_after_loading.spec.js

@@ -85,6 +85,14 @@ describe('Form Data Load Mapper', () => {
       expect(map(data).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
     });
 
+    it('Sets default delays and positions', () => {
+      expect(map(data).settings).to.have.property('popupFormDelay').eq(15);
+      expect(map(data).settings).to.have.property('fixedBarFormDelay').eq(15);
+      expect(map(data).settings).to.have.property('slideInFormDelay').eq(15);
+      expect(map(data).settings).to.have.property('slideInFormPosition').eq('right');
+      expect(map(data).settings).to.have.property('fixedBarFormPosition').eq('top');
+    });
+
     it('Keeps set placement styles', () => {
       const mapData = {
         ...data,