diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index 7b979c2c3d..9e4ecb9cb7 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -31,6 +31,7 @@ import { ChangeRequestRejectScheduledDialogue, } from './ChangeRequestScheduledDialogs/changeRequestScheduledDialogs'; import { ScheduleChangeRequestDialog } from './ChangeRequestScheduledDialogs/ScheduleChangeRequestDialog'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledAsideBox = styled(Box)(({ theme }) => ({ width: '30%', @@ -100,6 +101,7 @@ export const ChangeRequestOverview: FC = () => { const { isChangeRequestConfiguredForReview } = useChangeRequestsEnabled(projectId); const scheduleChangeRequests = useUiFlag('scheduledConfigurationChanges'); + const { trackEvent } = usePlausibleTracker(); if (!changeRequest) { return null; @@ -109,6 +111,8 @@ export const ChangeRequestOverview: FC = () => { changeRequest.environment, ); + const hasSchedule = Boolean(changeRequest.schedule?.scheduledAt); + const onApplyChanges = async () => { try { await changeState(projectId, Number(id), { @@ -122,12 +126,22 @@ export const ChangeRequestOverview: FC = () => { title: 'Success', text: 'Changes applied', }); + if (hasSchedule) { + trackEvent('scheduled-configuration-changes', { + props: { + action: 'scheduled-applied', + }, + }); + } } catch (error: unknown) { setToastApiError(formatUnknownError(error)); } }; const onScheduleChangeRequest = async (scheduledDate: Date) => { + const plausibleAction = hasSchedule + ? 'scheduled-updated' + : 'scheduled-created'; try { await changeState(projectId, Number(id), { state: 'Scheduled', @@ -141,6 +155,11 @@ export const ChangeRequestOverview: FC = () => { title: 'Success', text: 'Changes scheduled', }); + trackEvent('scheduled-configuration-changes', { + props: { + action: plausibleAction, + }, + }); } catch (error: unknown) { setToastApiError(formatUnknownError(error)); } @@ -193,6 +212,13 @@ export const ChangeRequestOverview: FC = () => { }); refetchChangeRequest(); refetchChangeRequestOpen(); + if (hasSchedule) { + trackEvent('scheduled-configuration-changes', { + props: { + action: 'scheduled-rejected', + }, + }); + } } catch (error: unknown) { setToastApiError(formatUnknownError(error)); } diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index 453c60a5e1..b6f50ea95a 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -51,7 +51,8 @@ export type CustomEvents = | 'project-mode' | 'dependent_features' | 'playground_token_input_used' - | 'search-filter'; + | 'search-filter' + | 'scheduled-configuration-changes'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);