Add size settings to placement settings in preview

[MAILPOET-2811]

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

@@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
 import Toggle from 'common/toggle';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { partial } from 'lodash';
+import { SizeSettings } from 'form_editor/components/size_settings';
 
 const BelowPostsSettings = () => {
   const formSettings = useSelect(
@@ -18,28 +19,43 @@ const BelowPostsSettings = () => {
   };
 
   return (
-    <div className="mailpoet-toggle-list">
+    <>
-      <div className="mailpoet-toggle-list-description">
+      <div className="mailpoet-toggle-list">
-        {MailPoet.I18n.t('placeFormBellowAllPages')}
+        <div className="mailpoet-toggle-list-description">
+          {MailPoet.I18n.t('placeFormBellowAllPages')}
+        </div>
+        <div className="mailpoet-toggle-list-toggle">
+          <Toggle
+            name="placeFormBellowAllPages"
+            checked={formSettings.placeFormBellowAllPages || false}
+            onCheck={partial(updateSettings, 'placeFormBellowAllPages')}
+          />
+        </div>
+        <div className="mailpoet-toggle-list-description">
+          {MailPoet.I18n.t('placeFormBellowAllPosts')}
+        </div>
+        <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
+          <Toggle
+            name="placeFormBellowAllPosts"
+            checked={formSettings.placeFormBellowAllPosts || false}
+            onCheck={partial(updateSettings, 'placeFormBellowAllPosts')}
+          />
+        </div>
       </div>
-      <div className="mailpoet-toggle-list-toggle">
+      <SizeSettings
-        <Toggle
+        label={MailPoet.I18n.t('formSettingsWidth')}
-          name="placeFormBellowAllPages"
+        value={formSettings.belowPostStyles.width}
-          checked={formSettings.placeFormBellowAllPages || false}
+        minPixels={200}
-          onCheck={partial(updateSettings, 'placeFormBellowAllPages')}
+        maxPixels={1200}
-        />
+        minPercents={10}
-      </div>
+        maxPercents={100}
-      <div className="mailpoet-toggle-list-description">
+        defaultPixelValue={560}
-        {MailPoet.I18n.t('placeFormBellowAllPosts')}
+        defaultPercentValue={100}
-      </div>
+        onChange={(width) => (
-      <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
+          updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
-        <Toggle
+        )}
-          name="placeFormBellowAllPosts"
+      />
-          checked={formSettings.placeFormBellowAllPosts || false}
+    </>
-          onCheck={partial(updateSettings, 'placeFormBellowAllPosts')}
-        />
-      </div>
-    </div>
   );
 };
 

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

@@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { SelectControl, RadioControl } from '@wordpress/components';
 import { partial } from 'lodash';
+import { SizeSettings } from 'form_editor/components/size_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -68,6 +69,19 @@ const FixedBarSettings = () => {
         ]}
         onChange={partial(updateSettings, 'fixedBarFormPosition')}
       />
+      <SizeSettings
+        label={MailPoet.I18n.t('formSettingsWidth')}
+        value={formSettings.fixedBarStyles.width}
+        minPixels={200}
+        maxPixels={1200}
+        minPercents={10}
+        maxPercents={100}
+        defaultPixelValue={560}
+        defaultPercentValue={100}
+        onChange={(width) => (
+          updateSettings('fixedBarStyles', { ...formSettings.fixedBarStyles, width })
+        )}
+      />
     </>
   );
 };

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

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import ReactStringReplace from 'react-string-replace';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { curry } from 'lodash';
 import { TextareaControl } from '@wordpress/components';
+import { SizeSettings } from 'form_editor/components/size_settings';
 
 const OtherSettings = () => {
   const [copyAreaContent, setCopyAreaContent] = useState(null);
@@ -13,6 +14,18 @@ const OtherSettings = () => {
     []
   );
 
+  const formSettings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+  const { changeFormSettings } = useDispatch('mailpoet-form-editor');
+
+  const updateSettings = (key, value) => {
+    const settings = { ...formSettings };
+    settings[key] = value;
+    changeFormSettings(settings);
+  };
+
   const addFormWidgetHint = ReactStringReplace(
     MailPoet.I18n.t('addFormWidgetHint'),
     /\[link](.*?)\[\/link]/g,
@@ -69,6 +82,19 @@ const OtherSettings = () => {
       <p>{addFormShortcodeHint}</p>
       <p>{addFormPhpIframeHint}</p>
       {getCopyTextArea()}
+      <SizeSettings
+        label={MailPoet.I18n.t('formSettingsWidth')}
+        value={formSettings.otherStyles.width}
+        minPixels={200}
+        maxPixels={1200}
+        minPercents={10}
+        maxPercents={100}
+        defaultPixelValue={200}
+        defaultPercentValue={100}
+        onChange={(width) => (
+          updateSettings('otherStyles', { ...formSettings.otherStyles, width })
+        )}
+      />
     </>
   );
 };

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

@@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
 import { SelectControl } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { partial } from 'lodash';
+import { SizeSettings } from 'form_editor/components/size_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -58,6 +59,19 @@ const PopUpSettings = () => {
           label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
         }))}
       />
+      <SizeSettings
+        label={MailPoet.I18n.t('formSettingsWidth')}
+        value={formSettings.popupStyles.width}
+        minPixels={200}
+        maxPixels={1200}
+        minPercents={10}
+        maxPercents={100}
+        defaultPixelValue={560}
+        defaultPercentValue={100}
+        onChange={(width) => (
+          updateSettings('popupStyles', { ...formSettings.popupStyles, width })
+        )}
+      />
     </>
   );
 };

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

@@ -4,6 +4,7 @@ import Toggle from 'common/toggle';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { SelectControl, RadioControl } from '@wordpress/components';
 import { partial } from 'lodash';
+import { SizeSettings } from 'form_editor/components/size_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -68,6 +69,19 @@ const SlideInSettings = () => {
         ]}
         onChange={partial(updateSettings, 'slideInFormPosition')}
       />
+      <SizeSettings
+        label={MailPoet.I18n.t('formSettingsWidth')}
+        value={formSettings.slideInStyles.width}
+        minPixels={200}
+        maxPixels={1200}
+        minPercents={10}
+        maxPercents={100}
+        defaultPixelValue={560}
+        defaultPercentValue={100}
+        onChange={(width) => (
+          updateSettings('slideInStyles', { ...formSettings.slideInStyles, width })
+        )}
+      />
     </>
   );
 };

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

@@ -0,0 +1,38 @@
+/**
+ * Default values for various settings
+ */
+
+export const belowPostStyles = {
+  width: {
+    unit: 'percent',
+    value: 100,
+  },
+};
+
+export const popupStyles = {
+  width: {
+    unit: 'pixel',
+    value: 560,
+  },
+};
+
+export const fixedBarStyles = {
+  width: {
+    unit: 'percent',
+    value: 100,
+  },
+};
+
+export const otherStyles = {
+  width: {
+    unit: 'percent',
+    value: 100,
+  },
+};
+
+export const slideInStyles = {
+  width: {
+    unit: 'pixel',
+    value: 560,
+  },
+};

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

@@ -1,4 +1,5 @@
 import asNum from './server_value_as_num';
+import * as defaults from './defaults';
 
 export default function mapFormDataAfterLoading(data) {
   return {
@@ -25,6 +26,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 },
     },
   };
 }

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

@@ -23,6 +23,11 @@ export default function mapFormDataBeforeSaving(data) {
       border_color: data.settings.borderColor,
       background_image_url: data.settings.backgroundImageUrl,
       background_image_display: data.settings.backgroundImageDisplay,
+      below_post_styles: data.settings.belowPostStyles,
+      slide_in_styles: data.settings.slideInStyles,
+      fixed_bar_styles: data.settings.fixedBarStyles,
+      popup_styles: data.settings.popupStyles,
+      other_styles: data.settings.otherStyles,
     },
   };
 
@@ -46,6 +51,11 @@ export default function mapFormDataBeforeSaving(data) {
   delete mappedData.settings.borderColor;
   delete mappedData.settings.backgroundImageUrl;
   delete mappedData.settings.backgroundImageDisplay;
+  delete mappedData.settings.belowPostStyles;
+  delete mappedData.settings.slideInStyles;
+  delete mappedData.settings.fixedBarStyles;
+  delete mappedData.settings.popupStyles;
+  delete mappedData.settings.otherStyles;
 
   return mappedData;
 }

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

@@ -76,5 +76,32 @@ describe('Form Data Load Mapper', () => {
       expect(map(mapData).settings).to.have.property('formPadding', 50);
       expect(map(mapData).settings).to.have.property('inputPadding', 20);
     });
+
+    it('Sets default placements styles', () => {
+      expect(map(data).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
+      expect(map(data).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } });
+      expect(map(data).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
+      expect(map(data).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'pixel', value: 560 } });
+      expect(map(data).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 100 } });
+    });
+
+    it('Keeps set placement styles', () => {
+      const mapData = {
+        ...data,
+        settings: {
+          ...data.settings,
+          below_post_styles: { width: { unit: 'percent', value: 101 } },
+          popup_styles: { width: { unit: 'percent', value: 102 } },
+          fixed_bar_styles: { width: { unit: 'percent', value: 103 } },
+          slide_in_styles: { width: { unit: 'percent', value: 104 } },
+          other_styles: { width: { unit: 'percent', value: 105 } },
+        },
+      };
+      expect(map(mapData).settings).to.have.property('belowPostStyles').that.deep.eq({ width: { unit: 'percent', value: 101 } });
+      expect(map(mapData).settings).to.have.property('popupStyles').that.deep.eq({ width: { unit: 'percent', value: 102 } });
+      expect(map(mapData).settings).to.have.property('fixedBarStyles').that.deep.eq({ width: { unit: 'percent', value: 103 } });
+      expect(map(mapData).settings).to.have.property('slideInStyles').that.deep.eq({ width: { unit: 'percent', value: 104 } });
+      expect(map(mapData).settings).to.have.property('otherStyles').that.deep.eq({ width: { unit: 'percent', value: 105 } });
+    });
   });
 });

views/form/editor.html

@@ -62,6 +62,7 @@
   'formSettingsAlignmentRight': _x('right', 'An alignment value for form editor'),
   'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
   'formSettingsApplyToAll': __('Apply styles to all inputs'),
+  'formSettingsWidth': _x('Form width', 'A label for form width settings'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
   'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
   'formPlacement': _x('Form Placement', 'A settings section heading'),