87 lines
2.4 KiB
TypeScript
87 lines
2.4 KiB
TypeScript
import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react'
|
|
import getMeta from '@/utils/meta'
|
|
import * as eventTracking from '@/infrastructure/event-tracking'
|
|
import TimeoutMessageAfterPaywallDismissal from './timeout-message-after-paywall-dismissal'
|
|
import { UpgradePrompt } from '@/shared/components/upgrade-prompt'
|
|
|
|
const studentRoles = [
|
|
'High-school student',
|
|
'Undergraduate student',
|
|
"Master's student (e.g. MSc, MA)",
|
|
'Doctoral student (e.g. PhD, MD, EngD)',
|
|
]
|
|
|
|
type Segmentation = Record<
|
|
string,
|
|
string | number | boolean | undefined | unknown | any
|
|
>
|
|
|
|
interface TimeoutUpgradePaywallPromptProps {
|
|
setIsShowingPrimary: Dispatch<SetStateAction<boolean>>
|
|
}
|
|
|
|
function TimeoutUpgradePaywallPrompt({
|
|
setIsShowingPrimary,
|
|
}: TimeoutUpgradePaywallPromptProps) {
|
|
const odcRole = getMeta('ol-odcRole')
|
|
const planPrices = getMeta('ol-paywallPlans')
|
|
const isStudent = useMemo(() => studentRoles.includes(odcRole), [odcRole])
|
|
|
|
const [isPaywallDismissed, setIsPaywallDismissed] = useState<boolean>(false)
|
|
|
|
function sendPaywallEvent(event: string, segmentation?: Segmentation) {
|
|
eventTracking.sendMB(event, {
|
|
'paywall-type': 'compile-timeout',
|
|
'paywall-version': 'primary',
|
|
...segmentation,
|
|
})
|
|
}
|
|
|
|
function onClose() {
|
|
sendPaywallEvent('paywall-dismiss')
|
|
setIsPaywallDismissed(true)
|
|
setIsShowingPrimary(false)
|
|
}
|
|
|
|
function onClickInfoLink() {
|
|
sendPaywallEvent('paywall-info-click', { content: 'plans' })
|
|
}
|
|
|
|
function onClickPaywall() {
|
|
sendPaywallEvent('paywall-click', {
|
|
plan: isStudent ? 'student' : 'collaborator',
|
|
})
|
|
}
|
|
|
|
useEffect(() => {
|
|
sendPaywallEvent('paywall-prompt', {
|
|
plan: isStudent ? 'student' : 'collaborator',
|
|
})
|
|
setIsShowingPrimary(true)
|
|
}, [isStudent, setIsShowingPrimary])
|
|
|
|
return (
|
|
<div>
|
|
{!isPaywallDismissed ? (
|
|
<UpgradePrompt
|
|
title="Unlock more compile time"
|
|
summary="Your project took too long to compile and timed out."
|
|
onClose={onClose}
|
|
planPricing={{
|
|
student: planPrices?.student,
|
|
standard: planPrices?.collaborator,
|
|
}}
|
|
itmCampaign="compile-timeout"
|
|
isStudent={isStudent}
|
|
onClickInfoLink={onClickInfoLink}
|
|
onClickPaywall={onClickPaywall}
|
|
/>
|
|
) : (
|
|
<TimeoutMessageAfterPaywallDismissal />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default TimeoutUpgradePaywallPrompt
|