Hide checkbox on other placement

[MAILPOET-2873]

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

@@ -8,6 +8,7 @@ type Props = {
   label: string,
   icon: JSX.Element,
   active: boolean,
+  canBeActive?: boolean,
   onClick: () => void,
 }
 
@@ -15,6 +16,7 @@ const FormPlacementOption = ({
   label,
   icon,
   active,
+  canBeActive,
   onClick,
 }: Props) => {
   const [hover, setHover] = useState(false);
@@ -25,7 +27,7 @@ const FormPlacementOption = ({
       className={
         classnames(
           'form-placement-option',
-          { 'form-placement-option-active': active }
+          { 'form-placement-option-active': active && canBeActive }
         )
       }
       onMouseEnter={() => setHover(true)}
@@ -54,11 +56,11 @@ const FormPlacementOption = ({
             {SettingsIcon}
           </div>
           {
-            hover && !active
+            hover && !active && canBeActive
             && <div className="form-placement-settings-oval" />
           }
           {
-            active
+            active && canBeActive
             && (
               <div className="form-placement-settings-check">
                 {CheckIcon}
@@ -81,4 +83,8 @@ const FormPlacementOption = ({
   );
 };
 
+FormPlacementOption.defaultProps = {
+  canBeActive: true,
+};
+
 export default FormPlacementOption;

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

@@ -9,6 +9,7 @@ type Props = {
   children: React.ReactNode,
   onSave: () => void,
   active: boolean,
+  canBeActive?: boolean,
   label: string,
   header?: string,
   description?: string,
@@ -20,6 +21,7 @@ const BelowPages = ({
   label,
   header,
   active,
+  canBeActive,
   onSave,
   children,
   icon,
@@ -37,6 +39,7 @@ const BelowPages = ({
         label={label}
         icon={icon}
         active={active}
+        canBeActive={canBeActive}
         onClick={() => setDisplaySettings(true)}
       />
       {
@@ -70,4 +73,8 @@ const BelowPages = ({
   );
 };
 
+BelowPages.defaultProps = {
+  canBeActive: true,
+};
+
 export default BelowPages;

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

@@ -73,6 +73,7 @@ const Popup = () => {
       header={MailPoet.I18n.t('formPlacementOther')}
       label={MailPoet.I18n.t('formPlacementOtherLabel')}
       icon={Icon}
+      canBeActive={false}
     >
       <p>{addFormWidgetHint}</p>
       <p>{addFormShortcodeHint}</p>