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}