feat: init pylon and deprecate intercom (#8059)

frontend/example.env

@@ -1,7 +1,7 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
 FRONTEND_API_ENDPOINT="http://localhost:8080/"
-INTERCOM_APP_ID="intercom-app-id"
+PYLON_APP_ID="pylon-app-id"
 APPCUES_APP_ID="appcess-app-id"
 
 CI="1"

frontend/public/locales/en-GB/services.json

@@ -1,3 +1,3 @@
 {
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support or "
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via chat support or "
 }

frontend/public/locales/en/services.json

@@ -1,3 +1,3 @@
 {
-	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via Intercom support or "
+	"rps_over_100": "You are sending data at more than 100 RPS, your ingestion  may be rate limited. Please reach out to us via chat support or "
 }

frontend/src/AppRoutes/index.tsx

@@ -215,13 +215,13 @@ function App(): JSX.Element {
 
 	useEffect(() => {
 		if (pathname === ROUTES.ONBOARDING) {
-			window.Intercom('update', {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				hide_default_launcher: true,
+			// @ts-ignore
-			});
+			window.Pylon('hideChatBubble');
 		} else {
-			window.Intercom('update', {
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-				hide_default_launcher: false,
+			// @ts-ignore
-			});
+			window.Pylon('showChatBubble');
 		}
 	}, [pathname]);
 
@@ -256,11 +256,13 @@ function App(): JSX.Element {
 				!showAddCreditCardModal &&
 				(isCloudUser || isEnterpriseSelfHostedUser)
 			) {
-				window.Intercom('boot', {
+				window.pylon = {
-					app_id: process.env.INTERCOM_APP_ID,
+					chat_settings: {
-					email: user?.email || '',
+						app_id: process.env.PYLON_APP_ID,
-					name: user?.displayName || '',
+						email: user.email,
-				});
+						name: user.displayName,
+					},
+				};
 			}
 		}
 	}, [

frontend/src/api/utils.ts

@@ -15,13 +15,5 @@ export const Logout = (): void => {
 	deleteLocalStorageKey(LOCALSTORAGE.QUICK_FILTERS_SETTINGS_ANNOUNCEMENT);
 	window.dispatchEvent(new CustomEvent('LOGOUT'));
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-ignore
-	if (window && window.Intercom) {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		window.Intercom('shutdown');
-	}
-
 	history.push(ROUTES.LOGIN);
 };

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -93,7 +93,7 @@
 			padding: 4px;
 			margin: 0;
 
-			// this is to offset intercom icon
+			// this is to offset chat support icon
 			padding-right: 72px;
 
 			.ant-pagination-item {

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -2,7 +2,7 @@ import { Button, Modal, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
-import { CreditCard, X } from 'lucide-react';
+import { CreditCard, MessageSquareText, X } from 'lucide-react';
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
@@ -49,7 +49,7 @@ export default function ChatSupportGateway(): JSX.Element {
 
 	const handleAddCreditCard = (): void => {
 		logEvent('Add Credit card modal: Clicked', {
-			source: `intercom icon`,
+			source: `chat support icon`,
 			page: pathname,
 		});
 
@@ -65,20 +65,14 @@ export default function ChatSupportGateway(): JSX.Element {
 					className="chat-support-gateway-btn"
 					onClick={(): void => {
 						logEvent('Disabled Chat Support: Clicked', {
-							source: `intercom icon`,
+							source: `chat support icon`,
 							page: pathname,
 						});
 
 						setIsAddCreditCardModalOpen(true);
 					}}
 				>
-					<svg
+					<MessageSquareText size={24} />
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 28 32"
-						className="chat-support-gateway-btn-icon"
-					>
-						<path d="M28 32s-4.714-1.855-8.527-3.34H3.437C1.54 28.66 0 27.026 0 25.013V3.644C0 1.633 1.54 0 3.437 0h21.125c1.898 0 3.437 1.632 3.437 3.645v18.404H28V32zm-4.139-11.982a.88.88 0 00-1.292-.105c-.03.026-3.015 2.681-8.57 2.681-5.486 0-8.517-2.636-8.571-2.684a.88.88 0 00-1.29.107 1.01 1.01 0 00-.219.708.992.992 0 00.318.664c.142.128 3.537 3.15 9.762 3.15 6.226 0 9.621-3.022 9.763-3.15a.992.992 0 00.317-.664 1.01 1.01 0 00-.218-.707z" />
-					</svg>
 				</Button>
 			</div>
 

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -24,7 +24,7 @@ export interface LaunchChatSupportProps {
 	buttonText?: string;
 	className?: string;
 	onHoverText?: string;
-	intercomMessageDisabled?: boolean;
+	chatMessageDisabled?: boolean;
 }
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
@@ -35,7 +35,7 @@ function LaunchChatSupport({
 	buttonText = '',
 	className = '',
 	onHoverText = '',
-	intercomMessageDisabled = false,
+	chatMessageDisabled = false,
 }: LaunchChatSupportProps): JSX.Element | null {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 	const { notifications } = useNotifications();
@@ -111,8 +111,10 @@ function LaunchChatSupport({
 			setIsAddCreditCardModalOpen(true);
 		} else {
 			logEvent(eventName, attributes);
-			if (window.Intercom && !intercomMessageDisabled) {
+			if (window.pylon && !chatMessageDisabled) {
-				window.Intercom('showNewMessage', defaultTo(message, ''));
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-ignore
+				window.Pylon('showNewMessage', defaultTo(message, ''));
 			}
 		}
 	};
@@ -220,7 +222,7 @@ LaunchChatSupport.defaultProps = {
 	buttonText: '',
 	className: '',
 	onHoverText: '',
-	intercomMessageDisabled: false,
+	chatMessageDisabled: false,
 };
 
 export default LaunchChatSupport;

frontend/src/container/GeneralSettingsCloud/GeneralSettingsCloud.tsx

@@ -9,7 +9,7 @@ export default function GeneralSettingsCloud(): JSX.Element {
 			<Info size={16} />
 			<Typography.Text>
 				Please <a href="mailto:cloud-support@signoz.io"> email us </a> or connect
-				with us via intercom support to change the retention period.
+				with us via chat support to change the retention period.
 			</Typography.Text>
 		</Card>
 	);

frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss

@@ -201,7 +201,7 @@
 			padding: 16px;
 			margin: 0;
 
-			// this is to offset intercom icon till we improve the design
+			// this is to offset chat support icon till we improve the design
 			right: 20px;
 
 			.ant-pagination-item {

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/entityEvents.styles.scss

@@ -173,7 +173,7 @@
 		padding: 16px;
 		margin: 0;
 
-		// this is to offset intercom icon till we improve the design
+		// this is to offset chat support icon till we improve the design
 		padding-right: 72px;
 
 		.ant-pagination-item {

frontend/src/container/InfraMonitoringK8s/InfraMonitoringK8s.styles.scss

@@ -447,7 +447,7 @@
 			padding: 16px;
 			margin: 0;
 
-			// this is to offset intercom icon till we improve the design
+			// this is to offset chat support icon till we improve the design
 			padding-right: 72px;
 
 			.ant-pagination-item {

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -199,7 +199,7 @@
 			padding: 16px;
 			margin: 0;
 
-			// this is to offset intercom icon till we improve the design
+			// this is to offset chat support icon till we improve the design
 			right: 20px;
 
 			.ant-pagination-item {

frontend/src/index.html.ejs

@@ -59,40 +59,30 @@
 		<div id="root"></div>
 
 		<script>
-			//Set your APP_ID
+			const PYLON_APP_ID = '<%= htmlWebpackPlugin.options.PYLON_APP_ID %>';
-			const APP_ID = '<%= htmlWebpackPlugin.options.INTERCOM_APP_ID %>';
-
 			(function() {
-				var w = window;
+				var e = window;
-				var ic = w.Intercom;
+				var t = document;
-				if (typeof ic === 'function') {
+				var n = function() {
-					ic('reattach_activator');
+					n.e(arguments);
-					ic('update', w.intercomSettings);
-				} else {
-					var d = document;
-					var i = function () {
-						i.c(arguments);
 				};
-					i.q = [];
+				n.q = [];
-					i.c = function (args) {
+				n.e = function(e) {
-						i.q.push(args);
+					n.q.push(e);
 				};
-					w.Intercom = i;
+				e.Pylon = n;
-					var l = function () {
+				var r = function() {
-						var s = d.createElement('script');
+					var e = t.createElement("script");
-						s.type = 'text/javascript';
+					e.setAttribute("type", "text/javascript");
-						s.async = true;
+					e.setAttribute("async", "true");
-						s.src = 'https://widget.intercom.io/widget/' + APP_ID;
+					e.setAttribute("src", "https://widget.usepylon.com/widget/" + PYLON_APP_ID);
-						var x = d.getElementsByTagName('script')[0];
+					var n = t.getElementsByTagName("script")[0];
-						x.parentNode.insertBefore(s, x);
+					n.parentNode.insertBefore(e, n);
 				};
-					if (document.readyState === 'complete') {
+				if (t.readyState === "complete") {
-						l();
+					r();
-					} else if (w.attachEvent) {
+				} else if (e.addEventListener) {
-						w.attachEvent('onload', l);
+					e.addEventListener("load", r, false);
-					} else {
-						w.addEventListener('load', l, false);
-					}
 				}
 			})();
 		</script>

frontend/src/pages/Support/Support.tsx

@@ -155,10 +155,10 @@ export default function Support(): JSX.Element {
 				page: pathname,
 			});
 			setIsAddCreditCardModalOpen(true);
-		} else if (window.Intercom) {
+		} else if (window.pylon) {
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
-			window.Intercom('show');
+			window.Pylon('show');
 		}
 	};
 

frontend/src/typings/window.ts

@@ -3,7 +3,7 @@ import { compose, Store } from 'redux';
 declare global {
 	interface Window {
 		store: Store;
-		Intercom: any;
+		pylon: any;
 		Appcues: Record<string, any>;
 		__REDUX_DEVTOOLS_EXTENSION_COMPOSE__: typeof compose;
 	}

frontend/webpack.config.js

@@ -20,7 +20,7 @@ const styleLoader = 'style-loader';
 const plugins = [
 	new HtmlWebpackPlugin({
 		template: 'src/index.html.ejs',
-		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+		PYLON_APP_ID: process.env.PYLON_APP_ID,
 		APPCUES_APP_ID: process.env.APPCUES_APP_ID,
 		POSTHOG_KEY: process.env.POSTHOG_KEY,
 		USERPILOT_KEY: process.env.USERPILOT_KEY,
@@ -39,7 +39,7 @@ const plugins = [
 			NODE_ENV: process.env.NODE_ENV,
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			WEBSOCKET_API_ENDPOINT: process.env.WEBSOCKET_API_ENDPOINT,
-			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+			PYLON_APP_ID: process.env.PYLON_APP_ID,
 			APPCUES_APP_ID: process.env.APPCUES_APP_ID,
 			POSTHOG_KEY: process.env.POSTHOG_KEY,
 			USERPILOT_KEY: process.env.USERPILOT_KEY,

frontend/webpack.config.prod.js

@@ -25,7 +25,7 @@ const styleLoader = 'style-loader';
 const plugins = [
 	new HtmlWebpackPlugin({
 		template: 'src/index.html.ejs',
-		INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+		PYLON_APP_ID: process.env.PYLON_APP_ID,
 		APPCUES_APP_ID: process.env.APPCUES_APP_ID,
 		POSTHOG_KEY: process.env.POSTHOG_KEY,
 		USERPILOT_KEY: process.env.USERPILOT_KEY,
@@ -49,7 +49,7 @@ const plugins = [
 		'process.env': JSON.stringify({
 			FRONTEND_API_ENDPOINT: process.env.FRONTEND_API_ENDPOINT,
 			WEBSOCKET_API_ENDPOINT: process.env.WEBSOCKET_API_ENDPOINT,
-			INTERCOM_APP_ID: process.env.INTERCOM_APP_ID,
+			PYLON_APP_ID: process.env.PYLON_APP_ID,
 			APPCUES_APP_ID: process.env.APPCUES_APP_ID,
 			POSTHOG_KEY: process.env.POSTHOG_KEY,
 			USERPILOT_KEY: process.env.USERPILOT_KEY,