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">
-        {MailPoet.I18n.t('placeFormBellowAllPages')}
+    <>
+      <div className="mailpoet-toggle-list">
+        <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">
-        <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>
+      <SizeSettings
+        label={MailPoet.I18n.t('formSettingsWidth')}
+        value={formSettings.belowPostStyles.width}
+        minPixels={200}
+        maxPixels={1200}
+        minPercents={10}
+        maxPercents={100}
+        defaultPixelValue={560}
+        defaultPercentValue={100}
+        onChange={(width) => (
+          updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
+        )}
+      />
+    </>
   );
 };
 

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