overleaf/services/web/frontend/js/features/source-editor/components/grammarly-advert.tsx
Jimmy Domagala-Tang 3617196760 Merge pull request #16419 from overleaf/jdt-fix-grammarly-offer-link
fix the grammarly offer id

GitOrigin-RevId: 996501ebb50b64bd8f9bd46305ba47baa37fee88
2024-01-08 09:05:45 +00:00

104 lines
2.8 KiB
TypeScript

import { useCallback, useEffect, useState } from 'react'
import { Button } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import Notification from '@/shared/components/notification'
import useRemindMeLater from '@/shared/hooks/use-remind-me-later'
import GrammarlyLogo from '@/shared/svgs/grammarly-logo'
import * as eventTracking from '../../../infrastructure/event-tracking'
import useWaitForGrammarlyCheck from '@/shared/hooks/use-wait-for-grammarly-check'
export default function GrammarlyAdvert() {
const [show, setShow] = useState(false)
const { t } = useTranslation()
// grammarly can take some time to load, we should assume its installed and hide until we know for sure
const grammarlyInstalled = useWaitForGrammarlyCheck({ initialState: false })
const { stillDissmissed, remindThemLater, saveDismissed } =
useRemindMeLater('grammarly_advert')
useEffect(() => {
const showGrammarlyAdvert = grammarlyInstalled && !stillDissmissed
if (showGrammarlyAdvert) {
eventTracking.sendMB('grammarly-advert-shown')
setShow(true)
}
}, [stillDissmissed, grammarlyInstalled, setShow])
const handleDismiss = useCallback(() => {
setShow(false)
saveDismissed()
eventTracking.sendMB('grammarly-advert-dismissed')
}, [saveDismissed])
const handleClickClaim = useCallback(() => {
eventTracking.sendMB('promo-click', {
location: 'notification',
name: 'grammarly-advert',
type: 'click',
})
saveDismissed()
setShow(false)
window.open(
'https://grammarly.go2cloud.org/aff_c?offer_id=373&aff_id=142242'
)
}, [saveDismissed])
const handleLater = useCallback(() => {
eventTracking.sendMB('promo-click', {
location: 'notification',
name: 'grammarly-advert',
type: 'pause',
})
setShow(false)
remindThemLater()
}, [remindThemLater])
if (!show) {
return null
}
const actions = (
<div>
<Button
bsStyle={null}
className="btn-secondary"
onClick={handleClickClaim}
>
{t('claim_discount')}
</Button>
<Button className="btn-bg-ghost" bsStyle={null} onClick={handleLater}>
{t('maybe_later')}
</Button>
</div>
)
return (
<Notification
action={actions}
ariaLive="polite"
className="editor-notification ol-overlay"
content={
<div>
<p>
Get 25% off Grammarly Premium with this exclusive offer for Overleaf
users.
</p>
</div>
}
customIcon={
<div>
<GrammarlyLogo width="50" height="50" background="#fff" />
</div>
}
isActionBelowContent
isDismissible
onDismiss={handleDismiss}
title="Love Grammarly? Then you're in luck!"
type="offer"
/>
)
}