overleaf/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx

66 lines
1.7 KiB
TypeScript
Raw Normal View History

import { useEffect } from 'react'
import { Alert } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import usePersistedState from '../../../shared/hooks/use-persisted-state'
import { useUserEmailsContext } from '../context/user-email-context'
import { sendMB } from '../../../infrastructure/event-tracking'
function sendMetrics(segmentation: 'view' | 'click' | 'close') {
sendMB('institutional-leavers-survey-notification', { type: segmentation })
}
export function LeaversSurveyAlert() {
const { t } = useTranslation()
const {
showInstitutionalLeaversSurveyUntil,
setShowInstitutionalLeaversSurveyUntil,
} = useUserEmailsContext()
const [hide, setHide] = usePersistedState(
'hideInstitutionalLeaversSurvey',
false,
true
)
function handleDismiss() {
setShowInstitutionalLeaversSurveyUntil(0)
setHide(true)
sendMetrics('close')
}
function handleLinkClick() {
sendMetrics('click')
}
const shouldDisplay =
!hide && Date.now() <= showInstitutionalLeaversSurveyUntil
useEffect(() => {
if (shouldDisplay) {
sendMetrics('view')
}
}, [shouldDisplay])
if (!shouldDisplay) {
return null
}
return (
<Alert className="mb-0" bsStyle="info" onDismiss={handleDismiss}>
<p>
<strong>{t('limited_offer')}</strong>
{`: ${t('institutional_leavers_survey_notification')} `}
<a
href="https://docs.google.com/forms/d/e/1FAIpQLSfYdeeoY5p1d31r5iUx1jw0O-Gd66vcsBi_Ntu3lJRMjV2EJA/viewform"
target="_blank"
rel="noopener noreferrer"
onClick={handleLinkClick}
>
{t('take_short_survey')}
</a>
</p>
</Alert>
)
}