import { useState , useRef , useEffect } from 'react' ; import { c } from 'ttag' ; import { HOUR } from '@proton/shared/lib/constants' ; import { captureMessage } from '@proton/shared/lib/helpers/sentry' ; import { Severity } from '@sentry/types' ; import TopBanner from './TopBanner' ; import LearnMore from '../../components/link/LearnMore' ; import useApiServerTime from '../../hooks/useApiServerTime' ; const isOutOfSync = ( serverTime ) => { const timeDifference = Math . abs ( serverTime . getTime ( ) - Date . now ( ) ) ; return timeDifference > 24 * HOUR ; } ; const TimeOutOfSyncTopBanner = ( ) => { const [ ignore , setIgnore ] = useState ( false ) ; const serverTime = useApiServerTime ( ) ; const showWarning = ! ignore && serverTime && isOutOfSync ( serverTime ) ; const onceRef = useRef ( false ) ; useEffect ( ( ) => { if ( ! showWarning || onceRef . current ) { return ; } onceRef . current = true ; captureMessage ( 'Client time difference larger than 24 hours' , { level : Severity . Info , extra : { serverTime : serverTime ?. toString ( ) , localTime : new Date ( ) . toString ( ) , } , } ) ; } , [ showWarning ] ) ; if ( ! showWarning ) { return null ; } const learnMore = < LearnMore url = "https://protonmail.com/support/knowledge-base/device-time-warning/" / > ; return ( < TopBanner onClose = { ( ) => setIgnore ( true ) } className = "bg-warning" > { c ( 'Warning' ) . jt `The date and time settings on your device are out of sync. ${ learnMore }` } < /TopBanner>); } ; export default TimeOutOfSyncTopBanner ;