Active state for form placement component

[MAILPOET-2738]

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