chore: chat block events (#5725)

Also add go to integration event

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);

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,
 		});
 

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,

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);
 	};
 

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 (
 		<div className="onboarding-module-steps">
 			<div className="steps-container">
@@ -493,19 +470,26 @@ Thanks
 					>
 						Back
 					</Button>
-
 					<Button onClick={handleNext} type="primary" icon={<ArrowRightOutlined />}>
 						{current < lastStepIndex ? 'Continue to next step' : 'Done'}
 					</Button>
-
+					<LaunchChatSupport
-					<Button
+						attributes={{
-						className="periscope-btn"
+							dataSource: selectedDataSource?.id,
-						onClick={handleFacingIssuesClick}
+							framework: selectedFramework,
-						danger
+							environment: selectedEnvironment,
-						icon={<HelpCircle size={14} />}
+							module: activeStep?.module?.id,
-					>
+							step: activeStep?.step?.id,
-						Facing issues sending data to SigNoz?
+							screen: 'Onboarding',
-					</Button>
+						}}
+						eventName="Onboarding V2: Facing Issues Sending Data to SigNoz"
+						message={onboardingHelpMessage(
+							selectedDataSource?.name || '',
+							activeStep?.module?.id,
+						)}
+						buttonText="Facing issues sending data to SigNoz?"
+						onHoverText="Click here to get help with sending data to SigNoz"
+					/>
 				</div>
 			</div>
 		</div>

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`,
+			source: `help & support`,
-			page: '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