diff --git a/apps/dashboard/src/config/index.ts b/apps/dashboard/src/config/index.ts index e985895bf07..4652c12943d 100644 --- a/apps/dashboard/src/config/index.ts +++ b/apps/dashboard/src/config/index.ts @@ -25,3 +25,5 @@ export const SEGMENT_KEY = import.meta.env.VITE_SEGMENT_KEY; export const MIXPANEL_KEY = import.meta.env.VITE_MIXPANEL_KEY; export const LEGACY_DASHBOARD_URL = import.meta.env.VITE_LEGACY_DASHBOARD_URL; + +export const NEW_DASHBOARD_FEEDBACK_FORM_URL = import.meta.env.VITE_NEW_DASHBOARD_FEEDBACK_FORM_URL; diff --git a/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts b/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts index 3562ff85424..09223b304c7 100644 --- a/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts +++ b/apps/dashboard/src/hooks/use-new-dashboard-opt-in.ts @@ -1,9 +1,12 @@ -import { LEGACY_DASHBOARD_URL } from '@/config'; +import { LEGACY_DASHBOARD_URL, NEW_DASHBOARD_FEEDBACK_FORM_URL } from '@/config'; +import { useTelemetry } from '@/hooks/use-telemetry'; +import { TelemetryEvent } from '@/utils/telemetry'; import { useUser } from '@clerk/clerk-react'; import { NewDashboardOptInStatusEnum } from '@novu/shared'; export function useNewDashboardOptIn() { const { user } = useUser(); + const track = useTelemetry(); const updateUserOptInStatus = (status: NewDashboardOptInStatusEnum) => { if (!user) return; @@ -24,25 +27,27 @@ export function useNewDashboardOptIn() { const redirectToLegacyDashboard = () => { optOut(); + + if (NEW_DASHBOARD_FEEDBACK_FORM_URL) { + window.open(NEW_DASHBOARD_FEEDBACK_FORM_URL, '_blank'); + } + window.location.href = LEGACY_DASHBOARD_URL || window.location.origin + '/legacy'; }; const optIn = () => { + track(TelemetryEvent.NEW_DASHBOARD_OPT_IN); updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_IN); }; const optOut = () => { + track(TelemetryEvent.NEW_DASHBOARD_OPT_OUT); updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_OUT); }; - const dismiss = () => { - updateUserOptInStatus(NewDashboardOptInStatusEnum.DISMISSED); - }; - return { optIn, optOut, - dismiss, status: getCurrentOptInStatus(), redirectToLegacyDashboard, }; diff --git a/apps/dashboard/src/utils/telemetry.ts b/apps/dashboard/src/utils/telemetry.ts index 98ffb208012..e137e19fb8d 100644 --- a/apps/dashboard/src/utils/telemetry.ts +++ b/apps/dashboard/src/utils/telemetry.ts @@ -1,3 +1,5 @@ export enum TelemetryEvent { SUBSCRIBERS_LINK_CLICKED = 'Subscribers link clicked - [Left navigation]', + NEW_DASHBOARD_OPT_OUT = 'New dashboard opt-out', + NEW_DASHBOARD_OPT_IN = 'New dashboard opt-in', } diff --git a/apps/web/src/hooks/useNewDashboardOptIn.ts b/apps/web/src/hooks/useNewDashboardOptIn.ts index 8f84f78af6a..0ad203d8f8d 100644 --- a/apps/web/src/hooks/useNewDashboardOptIn.ts +++ b/apps/web/src/hooks/useNewDashboardOptIn.ts @@ -1,9 +1,11 @@ import { useUser } from '@clerk/clerk-react'; import { NewDashboardOptInStatusEnum } from '@novu/shared'; import { NEW_DASHBOARD_URL } from '../config'; +import { useSegment } from '../components/providers/SegmentProvider'; export function useNewDashboardOptIn() { const { user } = useUser(); + const segment = useSegment(); const updateUserOptInStatus = (status: NewDashboardOptInStatusEnum) => { if (!user) return; @@ -27,20 +29,17 @@ export function useNewDashboardOptIn() { }; const optIn = () => { + segment.track('New dashboard opt-in'); updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_IN); }; - const optOut = () => { - updateUserOptInStatus(NewDashboardOptInStatusEnum.OPTED_OUT); - }; - const dismiss = () => { + segment.track('New dashboard opt-in dismissed'); updateUserOptInStatus(NewDashboardOptInStatusEnum.DISMISSED); }; return { optIn, - optOut, dismiss, status: getCurrentOptInStatus(), redirectToNewDashboard,