Active state for form placement component

[MAILPOET-2738]

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -1,4 +1,5 @@
 $gutenberg-control-border-color: #7e8993;
+$gutenberg-control-active-color: #ff5301;
 $gutenberg-control-border-color-focus: #007cba;
 $form-placement-option-base-color: #e5e9f8;
 $form-placement-option-text-color: #23282d;
@@ -130,14 +131,24 @@ $form-placement-option-oval-border: #969ca1;
 
 .form-placement-settings-overlay {
   background-color: rgba(0, 0, 0, .3);
-  height: 142px;
+  border-radius: 2px;
+  height: 140px; // width of the parent element minus border on both sides
   left: 0;
   position: absolute;
   top: 0;
-  width: 116px;
+  width: 114px;
   z-index: 3;
 }
 
+.form-placement-option-active {
+  border: solid 2px $gutenberg-control-active-color;
+
+  .form-placement-settings-overlay {
+    height: 138px;
+    width: 112px; // width of the parent element minus border on both sides
+  }
+}
+
 .form-placement-option-label {
   align-items: center;
   color: $form-placement-option-text-color;

assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx

@@ -1,14 +1,28 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
+import { useSelect } from '@wordpress/data';
 
 import FormPlacementOption from './form_placement_option';
 import Icon from './below_pages_icon';
 
-const BelowPages = () => (
-  <FormPlacementOption
-    label={MailPoet.I18n.t('placeFormBellowPages')}
-    icon={Icon}
-  />
-);
+const BelowPages = () => {
+  const placeFormBellowAllPages = useSelect(
+    (select) => select('mailpoet-form-editor').placeFormBellowAllPages(),
+    []
+  );
+
+  const placeFormBellowAllPosts = useSelect(
+    (select) => select('mailpoet-form-editor').placeFormBellowAllPosts(),
+    []
+  );
+
+  return (
+    <FormPlacementOption
+      label={MailPoet.I18n.t('placeFormBellowPages')}
+      icon={Icon}
+      active={placeFormBellowAllPages || placeFormBellowAllPosts}
+    />
+  );
+};
 
 export default BelowPages;

assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx

@@ -6,13 +6,19 @@ import SettingsIcon from './settings_icon';
 type Props = {
   label: string,
   icon: JSX.Element,
+  active: boolean,
 }
 
-const FormPlacementOption = ({ label, icon }: Props) => {
+const FormPlacementOption = ({ label, icon, active }: Props) => {
   const [hover, setHover] = useState(false);
   return (
     <div
-      className="form-placement-option"
+      className={
+        classnames(
+          'form-placement-option',
+          { 'form-placement-option-active': active }
+        )
+      }
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >