github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-01 18:33:54 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #8359 from overleaf/ta-settings-tracking

Browse source 
Track Settings Page Upgrade Clicks

GitOrigin-RevId: 92c9f595a3b0f1a1cf40816204cabe3e94d36db3
This commit is contained in:
Miguel Serrano 2022-06-10 10:14:00 +02:00 committed by Copybot
parent f510b8808b
commit c2cfa96983
2 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
services/web/frontend/js/features/settings/components/linking/integration-widget.tsx
View file

@ -3,6 +3,11 @@ import { useTranslation } from 'react-i18next'
import AccessibleModal from '../../../../shared/components/accessible-modal' import AccessibleModal from '../../../../shared/components/accessible-modal'
import { Button, Modal } from 'react-bootstrap' import { Button, Modal } from 'react-bootstrap'
import getMeta from '../../../../utils/meta' import getMeta from '../../../../utils/meta'
import { sendMB } from '../../../../infrastructure/event-tracking'
function trackUpgradeClick() {
sendMB('settings-upgrade-click')
}
type IntegrationLinkingWidgetProps = { type IntegrationLinkingWidgetProps = {
logo: ReactNode logo: ReactNode
@ -66,7 +71,6 @@ export function IntegrationLinkingWidget({
<div> <div>
<ActionButton <ActionButton
hasFeature={hasFeature} hasFeature={hasFeature}
upgradePath="/user/subscription/plans"
linked={linked} linked={linked}
handleUnlinkClick={handleUnlinkClick} handleUnlinkClick={handleUnlinkClick}
linkPath={linkPath} linkPath={linkPath}
@ -86,7 +90,6 @@ export function IntegrationLinkingWidget({
type ActionButtonProps = { type ActionButtonProps = {
hasFeature?: boolean hasFeature?: boolean
upgradePath: string
linked?: boolean linked?: boolean
handleUnlinkClick: () => void handleUnlinkClick: () => void
linkPath: string linkPath: string
@ -95,7 +98,6 @@ type ActionButtonProps = {
function ActionButton({ function ActionButton({
hasFeature, hasFeature,
upgradePath,
linked, linked,
handleUnlinkClick, handleUnlinkClick,
linkPath, linkPath,
@ -105,7 +107,11 @@ function ActionButton({
if (!hasFeature) { if (!hasFeature) {
return ( return (
<Button bsStyle="info" href={upgradePath}> <Button
bsStyle="info"
href="/user/subscription/plans"
onClick={trackUpgradeClick}
>
<span className="text-capitalize">{t('upgrade')}</span> <span className="text-capitalize">{t('upgrade')}</span>
</Button> </Button>
) )

20
services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx
View file

@ -1,6 +1,8 @@
import { expect } from 'chai' import { expect } from 'chai'
import sinon from 'sinon'
import { screen, fireEvent, render, waitFor } from '@testing-library/react' import { screen, fireEvent, render, waitFor } from '@testing-library/react'
import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget' import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget'
import * as eventTracking from '../../../../../../frontend/js/infrastructure/event-tracking'
describe('<IntegrationLinkingWidgetTest/>', function () { describe('<IntegrationLinkingWidgetTest/>', function () {
const defaultProps = { const defaultProps = {
@ -15,18 +17,28 @@ describe('<IntegrationLinkingWidgetTest/>', function () {
} }
describe('when the feature is not available', function () { describe('when the feature is not available', function () {
let sendMBSpy: sinon.SinonSpy
beforeEach(function () { beforeEach(function () {
sendMBSpy = sinon.spy(eventTracking, 'sendMB')
render(<IntegrationLinkingWidget {...defaultProps} hasFeature={false} />) render(<IntegrationLinkingWidget {...defaultProps} hasFeature={false} />)
}) })
afterEach(function () {
sendMBSpy.restore()
})
it("should render 'Premium feature' label", function () { it("should render 'Premium feature' label", function () {
screen.getByText('Premium feature') screen.getByText('Premium feature')
}) })
it('should render a link to upgrade the account', function () { it('should render an upgrade link and track clicks', function () {
expect( const upgradeLink = screen.getByRole('link', { name: 'Upgrade' })
screen.getByRole('link', { name: 'Upgrade' }).getAttribute('href') expect(upgradeLink.getAttribute('href')).to.equal(
).to.equal('/user/subscription/plans') '/user/subscription/plans'
)
fireEvent.click(upgradeLink)
expect(sendMBSpy).to.be.calledOnce
expect(sendMBSpy).calledWith('settings-upgrade-click')
}) })
}) })