import React , { useEffect , useState } from 'react' ; import { c } from 'ttag' ; import { IMAGE_PROXY_FLAGS , SHOW_IMAGES } from '@proton/shared/lib/constants' ; import SettingsLayoutLeft from '../account/SettingsLayoutLeft' ; import { Info } from '../../components/link' ; import SettingsLayoutRight from '../account/SettingsLayoutRight' ; import RemoteToggle from './RemoteToggle' ; import SettingsLayout from '../account/SettingsLayout' ; import { useFeatures , useMailSettings } from '../../hooks' ; import PreventTrackingToggle from './PreventTrackingToggle' ; import { FeatureCode } from '../features' ; import ProtectionModeSelect from './ProtectionModeSelect' ; const { REMOTE } = SHOW_IMAGES ; const EmailPrivacySection = ( ) => { const [ { ShowImages = REMOTE , ImageProxy = IMAGE_PROXY_FLAGS . PROXY } = { } ] = useMailSettings ( ) ; const [ showImages , setShowImages ] = useState ( ShowImages ) ; const [ , setImageProxy ] = useState ( ImageProxy ) ; const [ { feature : featureSpyTracker } , { feature : featureSpyTrackerIncorporator } ] = useFeatures ( [ FeatureCode . SpyTrackerProtection , FeatureCode . SpyTrackerProtectionIncorporator , ] ) ; useEffect ( ( ) => { setImageProxy ( ImageProxy ) ; } , [ ImageProxy ] ) ; const handleChangeShowImage = ( newValue ) => setShowImages ( newValue ) ; const showSpyTracker = featureSpyTracker ?. Value ; const showProtectionMode = ImageProxy !== IMAGE_PROXY_FLAGS . NONE && featureSpyTrackerIncorporator ?. Value ; return ( < > < SettingsLayout > < SettingsLayoutLeft > < label htmlFor = "remoteToggle" className = "text-semibold" > < span className = "mr0-5" > { c ( 'Label' ) . t `Ask before loading remote content` } < /span> < Info url = "https://protonmail.com/support/knowledge-base/images-by-default/" title = { c ( 'Info' ) . t `Prevents content from the sender's server from loading without your permission.` } / > < /label> < /SettingsLayoutLeft> < SettingsLayoutRight className = "pt0-5" > < RemoteToggle id = "remoteToggle" showImages = { showImages } onChange = { handleChangeShowImage } data - testid = "privacy:remote-content-toggle" / > < /SettingsLayoutRight> < /SettingsLayout> { showSpyTracker && ( < > < SettingsLayout > < SettingsLayoutLeft > < label htmlFor = "preventTrackingToggle" className = "text-semibold" > < span className = "mr0-5" > { c ( 'Label' ) . t `Block email tracking` } < /span> < Info url = "https://protonmail.com/support/email-tracker-protection" title = { c ( 'Info' ) . t `Blocks senders from seeing if and when you opened a message.` } / > < /label> < /SettingsLayoutLeft> < SettingsLayoutRight className = "pt0-5" > < PreventTrackingToggle id = "preventTrackingToggle" preventTracking = { ImageProxy } data - testid = "privacy:prevent-tracking-toggle" / > < /SettingsLayoutRight> < /SettingsLayout> { showProtectionMode && ( < SettingsLayout > < SettingsLayoutLeft > < label htmlFor = "protectiontModeToggle" className = "text-semibold" > < span className = "mr0-5" > { c ( 'Label' ) . t `Protection mode` } < /span> < Info url = "https://protonmail.com/support/email-tracker-protection" title = { c ( 'Info' ) . t `Hides identifying information by loading remote content through a proxy. Option to store content as attachments.` } / > < /label> < /SettingsLayoutLeft> < SettingsLayoutRight className = "pt0-5" > < ProtectionModeSelect id = "protectiontModeToggle" defaultProtectionMode = { ImageProxy } data - testid = "privacy:protect-mode-select" / > < /SettingsLayoutRight> < /SettingsLayout>)} < />)} < />); } ; export default EmailPrivacySection ;