diff --git a/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx b/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx index b361f725c3..67353f8ba2 100644 --- a/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx +++ b/frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx @@ -7,6 +7,7 @@ import { useNotifications } from 'hooks/useNotifications'; import { CreditCard, X } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useMutation } from 'react-query'; +import { useLocation } from 'react-router-dom'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout'; import { License } from 'types/api/licenses/def'; @@ -57,11 +58,11 @@ export default function ChatSupportGateway(): JSX.Element { onError: handleBillingOnError, }, ); - + const { pathname } = useLocation(); const handleAddCreditCard = (): void => { logEvent('Add Credit card modal: Clicked', { source: `intercom icon`, - page: '', + page: pathname, }); updateCreditCard({ @@ -79,7 +80,7 @@ export default function ChatSupportGateway(): JSX.Element { onClick={(): void => { logEvent('Disabled Chat Support: Clicked', { source: `intercom icon`, - page: '', + page: pathname, }); setIsAddCreditCardModalOpen(true); diff --git a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx b/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx index c568a7e82b..eb0659cfb1 100644 --- a/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx +++ b/frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx @@ -13,6 +13,7 @@ import { defaultTo } from 'lodash-es'; import { CreditCard, HelpCircle, X } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useMutation } from 'react-query'; +import { useLocation } from 'react-router-dom'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout'; import { License } from 'types/api/licenses/def'; @@ -47,6 +48,7 @@ function LaunchChatSupport({ false, ); + const { pathname } = useLocation(); const isPremiumChatSupportEnabled = useFeatureFlags(FeatureKeys.PREMIUM_SUPPORT)?.active || false; @@ -65,6 +67,11 @@ function LaunchChatSupport({ const handleFacingIssuesClick = (): void => { if (showAddCreditCardModal) { + logEvent('Disabled Chat Support: Clicked', { + source: `facing issues button`, + page: pathname, + ...attributes, + }); setIsAddCreditCardModalOpen(true); } else { logEvent(eventName, attributes); @@ -105,7 +112,7 @@ function LaunchChatSupport({ const handleAddCreditCard = (): void => { logEvent('Add Credit card modal: Clicked', { source: `facing issues button`, - page: '', + page: pathname, ...attributes, }); diff --git a/frontend/src/components/LaunchChatSupport/util.ts b/frontend/src/components/LaunchChatSupport/util.ts index b99a31e970..8b610b11cc 100644 --- a/frontend/src/components/LaunchChatSupport/util.ts +++ b/frontend/src/components/LaunchChatSupport/util.ts @@ -41,6 +41,21 @@ I need help with managing alerts. Thanks`; +export const onboardingHelpMessage = ( + dataSourceName: string, + moduleId: string, +): string => `Hi Team, + +I am facing issues sending data to SigNoz. Here are my application details + +Data Source: ${dataSourceName} +Framework: +Environment: +Module: ${moduleId} + +Thanks +`; + export const alertHelpMessage = ( alertDef: AlertDef, ruleId: number, diff --git a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx index 138aac775c..f2f7028bdc 100644 --- a/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx +++ b/frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx @@ -131,6 +131,11 @@ export default function DataSource(): JSX.Element { }; const goToIntegrationsPage = (): void => { + logEvent('Onboarding V2: Go to integrations', { + module: selectedModule?.id, + dataSource: selectedDataSource?.name, + framework: selectedFramework, + }); history.push(ROUTES.INTEGRATIONS); }; diff --git a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx index ae74930d57..f9efa061f7 100644 --- a/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx +++ b/frontend/src/container/OnboardingContainer/common/ModuleStepsContainer/ModuleStepsContainer.tsx @@ -11,13 +11,15 @@ import { } from '@ant-design/icons'; import { Button, Space, Steps, Typography } from 'antd'; import logEvent from 'api/common/logEvent'; +import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport'; +import { onboardingHelpMessage } from 'components/LaunchChatSupport/util'; import ROUTES from 'constants/routes'; import { stepsMap } from 'container/OnboardingContainer/constants/stepsConfig'; import { DataSourceType } from 'container/OnboardingContainer/Steps/DataSource/DataSource'; import { hasFrameworks } from 'container/OnboardingContainer/utils/dataSourceUtils'; import history from 'lib/history'; import { isEmpty, isNull } from 'lodash-es'; -import { HelpCircle, UserPlus } from 'lucide-react'; +import { UserPlus } from 'lucide-react'; import { SetStateAction, useState } from 'react'; import { useOnboardingContext } from '../../context/OnboardingContext'; @@ -381,31 +383,6 @@ export default function ModuleStepsContainer({ history.push('/'); }; - const handleFacingIssuesClick = (): void => { - logEvent('Onboarding V2: Facing Issues Sending Data to SigNoz', { - dataSource: selectedDataSource?.id, - framework: selectedFramework, - environment: selectedEnvironment, - module: activeStep?.module?.id, - step: activeStep?.step?.id, - }); - - const message = `Hi Team, - -I am facing issues sending data to SigNoz. Here are my application details - -Data Source: ${selectedDataSource?.name} -Framework: -Environment: -Module: ${activeStep?.module?.id} - -Thanks -`; - if (window.Intercom) { - window.Intercom('showNewMessage', message); - } - }; - return (
@@ -493,19 +470,26 @@ Thanks > Back - - - +
diff --git a/frontend/src/pages/Support/Support.tsx b/frontend/src/pages/Support/Support.tsx index ad13c3993d..0dbd7a9526 100644 --- a/frontend/src/pages/Support/Support.tsx +++ b/frontend/src/pages/Support/Support.tsx @@ -20,7 +20,7 @@ import { } from 'lucide-react'; import { useEffect, useState } from 'react'; import { useMutation } from 'react-query'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { ErrorResponse, SuccessResponse } from 'types/api'; import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout'; import { License } from 'types/api/licenses/def'; @@ -105,6 +105,7 @@ export default function Support(): JSX.Element { false, ); + const { pathname } = useLocation(); const handleChannelWithRedirects = (url: string): void => { window.open(url, '_blank'); }; @@ -181,8 +182,8 @@ export default function Support(): JSX.Element { const handleAddCreditCard = (): void => { logEvent('Add Credit card modal: Clicked', { - source: `chat`, - page: 'support', + source: `help & support`, + page: pathname, }); updateCreditCard({ @@ -194,6 +195,10 @@ export default function Support(): JSX.Element { const handleChat = (): void => { if (showAddCreditCardModal) { + logEvent('Disabled Chat Support: Clicked', { + source: `help & support`, + page: pathname, + }); setIsAddCreditCardModalOpen(true); } else if (window.Intercom) { // eslint-disable-next-line @typescript-eslint/ban-ts-comment