diff --git a/packages/shared/src/components/cards/common/ClickbaitShield.tsx b/packages/shared/src/components/cards/common/ClickbaitShield.tsx index 24dc30ae70..e5ee4527bd 100644 --- a/packages/shared/src/components/cards/common/ClickbaitShield.tsx +++ b/packages/shared/src/components/cards/common/ClickbaitShield.tsx @@ -8,6 +8,7 @@ import { useViewSize, ViewSize, useClickbaitTries, + useConditionalFeature, } from '../../../hooks'; import { useLazyModal } from '../../../hooks/useLazyModal'; import { LazyModal } from '../../modals/common/types'; @@ -17,8 +18,13 @@ import { FeedSettingsMenu } from '../../feeds/FeedSettings/types'; import { useAuthContext } from '../../../contexts/AuthContext'; import { webappUrl } from '../../../lib/constants'; import { Tooltip } from '../../tooltip/Tooltip'; +import { featureFeedClickbaitShieldWarning } from '../../../lib/featureManagement'; -export const ClickbaitShield = ({ post }: { post: Post }): ReactElement => { +export const ClickbaitShield = ({ + post, +}: { + post: Post; +}): ReactElement | null => { const { openModal } = useLazyModal(); const { isPlus } = usePlusSubscription(); const { fetchSmartTitle, fetchedSmartTitle, shieldActive } = @@ -27,8 +33,16 @@ export const ClickbaitShield = ({ post }: { post: Post }): ReactElement => { const router = useRouter(); const { user } = useAuthContext(); const { hasUsedFreeTrial, triesLeft } = useClickbaitTries(); + const { value: showWarningShield } = useConditionalFeature({ + feature: featureFeedClickbaitShieldWarning, + shouldEvaluate: !isPlus, + }); if (!isPlus) { + if (!fetchedSmartTitle && !showWarningShield) { + return null; + } + return (