diff --git a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx index fc390f1962..e6b1c5ab82 100644 --- a/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx +++ b/services/web/frontend/js/features/group-management/components/add-seats/add-seats.tsx @@ -28,6 +28,7 @@ import { SubscriptionChangePreview, } from '../../../../../../types/subscription/subscription-change-preview' import { MergeAndOverride } from '../../../../../../types/utils' +import { sendMB } from '../../../../infrastructure/event-tracking' export const MAX_NUMBER_OF_USERS = 50 @@ -85,6 +86,17 @@ function AddSeats() { [runAsyncCostSummary] ) + const debouncedTrackUserEnterSeatNumberEvent = useMemo( + () => + debounce((value: number) => { + sendMB('flex-add-users-form', { + action: 'enter-seat-number', + seatNumber: value, + }) + }, 500), + [] + ) + const validateSeats = async (value: string | undefined) => { try { await addSeatsValidationSchema.validate(value) @@ -109,6 +121,7 @@ function AddSeats() { if (isValidSeatsNumber) { const seats = Number(value) + debouncedTrackUserEnterSeatNumberEvent(seats) if (seats > MAX_NUMBER_OF_USERS) { debouncedCostSummaryRequest.cancel() @@ -117,6 +130,7 @@ function AddSeats() { debouncedCostSummaryRequest(seats, controller.signal) } } else { + debouncedTrackUserEnterSeatNumberEvent.cancel() debouncedCostSummaryRequest.cancel() } @@ -138,6 +152,9 @@ function AddSeats() { } if (shouldContactSales) { + sendMB('flex-add-users-form', { + action: 'click-send-request-button', + }) const post = postJSON( '/user/subscription/group/add-users/sales-contact-form', { @@ -149,11 +166,21 @@ function AddSeats() { ) runAsyncSendMailToSales(post).catch(debugConsole.error) } else { + sendMB('flex-add-users-form', { + action: 'click-add-user-button', + }) const post = postJSON('/user/subscription/group/add-users/create', { signal: addSeatsSignal, body: { adding: Number(rawSeats) }, }) - runAsyncAddSeats(post).catch(debugConsole.error) + runAsyncAddSeats(post) + .then(() => { + sendMB('flex-add-users-success') + }) + .catch(() => { + debugConsole.error() + sendMB('flex-add-users-error') + }) } } @@ -259,8 +286,17 @@ function AddSeats() {
]} + components={[ + // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-key + { + sendMB('flex-add-users-form', { + action: 'click-contact-customer-support-link', + }) + }} + />, + ]} />
@@ -313,11 +349,22 @@ function AddSeats() { href="/user/subscription/group/upgrade-subscription" rel="noreferrer noopener" className="me-auto" + onClick={() => { + sendMB('flex-upgrade') + }} > {t('upgrade_my_plan')} )} - diff --git a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx index 26532ccd5d..033733dd58 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/group-settings-button.tsx @@ -7,12 +7,16 @@ import OLTag from '@/features/ui/components/ol/ol-tag' import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher' import { bsVersion } from '@/features/utils/bootstrap-5' import { ManagedGroupSubscription } from '../../../../../../types/subscription/dashboard/subscription' +import { sendMB } from '../../../../infrastructure/event-tracking' function AvailableWithGroupProfessionalBadge() { const { t } = useTranslation() const location = useLocation() const handleUpgradeClick = () => { + sendMB('flex-upgrade', { + location: 'ad-badge', + }) location.assign('/user/subscription/group/upgrade-subscription') } diff --git a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx b/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx index 25794c4567..6db4f68856 100644 --- a/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx +++ b/services/web/frontend/js/features/subscription/components/dashboard/states/active/active-new.tsx @@ -23,6 +23,7 @@ import { import getMeta from '@/utils/meta' import classnames from 'classnames' import SubscriptionRemainder from '@/features/subscription/components/dashboard/states/active/subscription-remainder' +import { sendMB } from '../../../../../../infrastructure/event-tracking' export function ActiveSubscriptionNew({ subscription, @@ -282,13 +283,20 @@ function FlexibleGroupLicensingActions({ + sendMB('flex-upgrade', { location: 'upgrade-plan-button' }) + } > {t('upgrade_plan')} {' '} )} {subscription.plan.membersLimitAddOn === 'additional-license' && ( - + sendMB('flex-add-users')} + > {t('add_more_users')} )}