overleaf/services/web/frontend/js/features/settings/components/leavers-survey-alert.tsx
Rebeka Dekany f78e619d87 Merge pull request #18331 from overleaf/rd-bs5-renaming
[web ] Bootstrap 5 - rename the wrapper components and restructure

GitOrigin-RevId: 7a76903df81cd546e9e469f24c4f203ea6a61672
2024-05-16 08:05:31 +00:00

71 lines
1.8 KiB
TypeScript

import { useEffect } from 'react'
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'
import OLNotification from '@/features/ui/components/ol/ol-notification'
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 (
<OLNotification
type="info"
content={
<>
<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>
</>
}
isDismissible
onDismiss={handleDismiss}
className="mb-0"
/>
)
}