Reorder form setting options [MAILPOET-3162]

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx

@@ -24,7 +24,6 @@ const BelowPostsSettings = () => {
       />
       {isActive && (
         <>
-          <PlacementSettings settingsPlacementKey="belowPosts" />
           <SizeSettings
             label={MailPoet.I18n.t('formSettingsWidth')}
             value={formSettings.formPlacement.belowPosts.styles.width}
@@ -38,6 +37,7 @@ const BelowPostsSettings = () => {
               changeFormSettings(assocPath('formPlacement.belowPosts.styles.width', width, formSettings))
             )}
           />
+          <PlacementSettings settingsPlacementKey="belowPosts" />
         </>
       )}
     </>

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx

@@ -29,16 +29,6 @@ const FixedBarSettings = () => {
       {isActive && (
         <>
           <hr />
-          <PlacementSettings settingsPlacementKey="fixedBar" />
-          <SelectControl
-            label={MailPoet.I18n.t('formPlacementDelay')}
-            value={formSettings.formPlacement.fixedBar.delay}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.delay', __, formSettings)])}
-            options={delayValues.map((delayValue) => ({
-              value: delayValue,
-              label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
-            }))}
-          />
           <RadioControl
             label={MailPoet.I18n.t('formPlacementPlacementPosition')}
             selected={formSettings.formPlacement.fixedBar.position}
@@ -61,7 +51,17 @@ const FixedBarSettings = () => {
               changeFormSettings(assocPath('formPlacement.fixedBar.styles.width', width, formSettings))
             )}
           />
+          <PlacementSettings settingsPlacementKey="fixedBar" />
           <AnimationSettings settingsPlacementKey="fixedBar" />
+          <SelectControl
+            label={MailPoet.I18n.t('formPlacementDelay')}
+            value={formSettings.formPlacement.fixedBar.delay}
+            onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.delay', __, formSettings)])}
+            options={delayValues.map((delayValue) => ({
+              value: delayValue,
+              label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
+            }))}
+          />
         </>
       )}
     </>

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx

@@ -30,7 +30,21 @@ const PopUpSettings = () => {
       {isActive && (
         <>
           <hr />
+          <SizeSettings
+            label={MailPoet.I18n.t('formSettingsWidth')}
+            value={formSettings.formPlacement.popup.styles.width}
+            minPixels={200}
+            maxPixels={1200}
+            minPercents={10}
+            maxPercents={100}
+            defaultPixelValue={560}
+            defaultPercentValue={100}
+            onChange={(width) => (
+              changeFormSettings(assocPath('formPlacement.popup.styles.width', width, formSettings))
+            )}
+          />
           <PlacementSettings settingsPlacementKey="popup" />
+          <AnimationSettings settingsPlacementKey="popup" />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.popup.delay}
@@ -49,20 +63,6 @@ const PopUpSettings = () => {
               onChange={compose([changeFormSettings, assocPath('formPlacement.popup.exitIntentEnabled', __, formSettings)])}
             />
           </div>
-          <SizeSettings
-            label={MailPoet.I18n.t('formSettingsWidth')}
-            value={formSettings.formPlacement.popup.styles.width}
-            minPixels={200}
-            maxPixels={1200}
-            minPercents={10}
-            maxPercents={100}
-            defaultPixelValue={560}
-            defaultPercentValue={100}
-            onChange={(width) => (
-              changeFormSettings(assocPath('formPlacement.popup.styles.width', width, formSettings))
-            )}
-          />
-          <AnimationSettings settingsPlacementKey="popup" />
         </>
       )}
     </>

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx

@@ -29,16 +29,6 @@ const SlideInSettings = () => {
       {isActive && (
         <>
           <hr />
-          <PlacementSettings settingsPlacementKey="slideIn" />
-          <SelectControl
-            label={MailPoet.I18n.t('formPlacementDelay')}
-            value={formSettings.formPlacement.slideIn.delay}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.delay', __, formSettings)])}
-            options={delayValues.map((delayValue) => ({
-              value: delayValue,
-              label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
-            }))}
-          />
           <RadioControl
             label={MailPoet.I18n.t('formPlacementPlacementPosition')}
             selected={formSettings.formPlacement.slideIn.position}
@@ -61,7 +51,17 @@ const SlideInSettings = () => {
               changeFormSettings(assocPath('formPlacement.slideIn.styles.width', width, formSettings))
             )}
           />
+          <PlacementSettings settingsPlacementKey="slideIn" />
           <AnimationSettings settingsPlacementKey="slideIn" />
+          <SelectControl
+            label={MailPoet.I18n.t('formPlacementDelay')}
+            value={formSettings.formPlacement.slideIn.delay}
+            onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.delay', __, formSettings)])}
+            options={delayValues.map((delayValue) => ({
+              value: delayValue,
+              label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', delayValue),
+            }))}
+          />
         </>
       )}
     </>