diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
index d62e666339..5c554bf95a 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
+++ b/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}
{
- hover && !active
+ hover && !active && canBeActive
&&
}
{
- active
+ active && canBeActive
&& (
{CheckIcon}
@@ -81,4 +83,8 @@ const FormPlacementOption = ({
);
};
+FormPlacementOption.defaultProps = {
+ canBeActive: true,
+};
+
export default FormPlacementOption;
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx
index e6c6c51513..b864e47cef 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx
+++ b/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;
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
index 9c0478fc13..a946424cdc 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
+++ b/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}
>
{addFormWidgetHint}
{addFormShortcodeHint}