import { useRef } from 'react' ; import { c } from 'ttag' ; import { FeatureCode , Spotlight , useSpotlightOnFeature , classnames , Href , Tooltip } from '@proton/components' ; import { MessageState } from '../../../logic/messages/messagesTypes' ; import { useMessageTrackers } from '../../../hooks/message/useMessageTrackers' ; import SpyTrackerIcon from './SpyTrackerIcon' ; interface Props { message : MessageState ; className ? : string ; } const ItemSpyTrackerIcon = ( { message , className } ) => { const anchorRef = useRef ( null ) ; const { hasProtection , hasShowImage , numberOfTrackers , needsMoreProtection , title , openSpyTrackerModal } = useMessageTrackers ( { message , } ) ; const { show : showSpotlight , onDisplayed } = useSpotlightOnFeature ( FeatureCode . SpotlightSpyTrackerProtection , numberOfTrackers > 0 ) ; if ( ! hasProtection && hasShowImage && numberOfTrackers === 0 ) { return null ; } return ( < Spotlight originalPlacement = "top-right" show = { showSpotlight } onDisplayed = { onDisplayed } anchorRef = { anchorRef } content = { < > { c ( 'Spotlight' ) . t `To protect your privacy, Proton blocked email trackers in this message` } < br / > < Href url = "https://protonmail.com/support/email-tracker-protection" title = "Tracker protection" > { c ( 'Info' ) . t `Learn more` } < /Href> < />}> < div > { } < Tooltip title = { title } data - testid = "privacy:icon-tooltip" > < div className = { classnames ( [ 'flex' , className ] ) } ref = { anchorRef } > < SpyTrackerIcon numberOfTrackers = { numberOfTrackers } needsMoreProtection = { needsMoreProtection } title = { title } openSpyTrackerModal = { openSpyTrackerModal } / > < /div> < /Tooltip> < /div> < /Spotlight>); } ; export default ItemSpyTrackerIcon ;