Files
Verso/services/web/frontend/js/shared/components/paywall-upgrade-button.tsx
T
Malik GlossopandCopybot fa26367aa9 Merge pull request #33805 from overleaf/mg-ai-paywall-analytics
Add paywall-prompt and paywall-click events to ai paywalls

GitOrigin-RevId: aa7de15a990ad1833e3dda65d5fb50f60bb7c9e3
2026-05-28 08:05:52 +00:00

41 lines
1.1 KiB
TypeScript

import OLButton from '@/shared/components/ol/ol-button'
import getMeta from '@/utils/meta'
import { useEditorAnalytics } from '@/shared/hooks/use-editor-analytics'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
export default function PaywallUpgradeButton({
referrer,
paywallType,
className,
}: {
referrer: string
paywallType: string
className?: string
}) {
const { t } = useTranslation()
const { sendEvent } = useEditorAnalytics()
const user = getMeta('ol-user')
const handleClick = useCallback(() => {
sendEvent('paywall-click', {
upgradeType: user.hasPaidSubscription ? 'add-on' : 'standalone',
'paywall-type': paywallType,
})
}, [sendEvent, user.hasPaidSubscription, paywallType])
return (
<OLButton
variant="premium"
size="sm"
href={`/user/subscription/choose-your-plan?itm_referrer=${referrer}&itm_campaign=${paywallType}`}
target="_blank"
rel="noreferrer"
className={className}
onClick={handleClick}
>
{t('upgrade')}
</OLButton>
)
}