From 5f4a5bb59324a3291a70e253e7f9eed43fc0a5b7 Mon Sep 17 00:00:00 2001
From: Artem Astapenko <3767150+Jamakase@users.noreply.github.com>
Date: Fri, 14 Jan 2022 02:07:10 +0300
Subject: [PATCH] Add workspaceId to intercom custom attributes (#9489)

* Add workspaceId to intercom custom attributes

* Rename to workspace_id
---
 .../services/thirdParty/intercom/index.tsx    |  1 +
 .../thirdParty/intercom/useIntercom.ts        | 30 +++++++++++++++----
 .../CreditsPage/components/CreditsTitle.tsx   |  3 +-
 .../cloud/views/layout/SideBar/SideBar.tsx    |  8 ++---
 .../services/workspaces/WorkspacesService.tsx | 11 +++++--
 5 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/index.tsx

diff --git a/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/index.tsx b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/index.tsx
new file mode 100644
index 0000000000000..b4190eea53d3c
--- /dev/null
+++ b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/index.tsx
@@ -0,0 +1 @@
+export * from "./useIntercom";
diff --git a/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/useIntercom.ts b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/useIntercom.ts
index f60243dd91e5a..b91df12718b0d 100644
--- a/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/useIntercom.ts
+++ b/airbyte-webapp/src/packages/cloud/services/thirdParty/intercom/useIntercom.ts
@@ -1,20 +1,40 @@
 import { useEffect } from "react";
-import { useIntercom as useIntercomProvider } from "react-use-intercom";
+import {
+  useIntercom as useIntercomProvider,
+  IntercomContextValues,
+} from "react-use-intercom";
 
 import { useCurrentUser } from "packages/cloud/services/auth/AuthService";
+import { useAnalytics } from "hooks/services/Analytics";
+
+export const useIntercom = (): IntercomContextValues => {
+  const intercomContextValues = useIntercomProvider();
 
-export const useIntercom = (): void => {
   const user = useCurrentUser();
-  const { boot, shutdown } = useIntercomProvider();
+  const { analyticsContext } = useAnalytics();
 
   useEffect(() => {
-    boot({
+    intercomContextValues.boot({
       email: user.email,
       name: user.name,
       userId: user.userId,
       userHash: user.intercomHash,
+
+      customAttributes: {
+        workspace_id: analyticsContext.workspaceId,
+      },
     });
 
-    return () => shutdown();
+    return () => intercomContextValues.shutdown();
   }, [user]);
+
+  useEffect(() => {
+    intercomContextValues.update({
+      customAttributes: {
+        workspace_id: analyticsContext.workspace_id,
+      },
+    });
+  }, [analyticsContext.workspace_id]);
+
+  return intercomContextValues;
 };
diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsTitle.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsTitle.tsx
index 6b85ee0009764..3e05a421e1fe6 100644
--- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsTitle.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsTitle.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
-import { useIntercom } from "react-use-intercom";
+
+import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
 
 import PageTitle from "components/PageTitle";
 import { Button } from "components/base";
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
index 82fe147a53f3e..a6384e2047c89 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -4,7 +4,8 @@ import { FormattedMessage, FormattedNumber } from "react-intl";
 import { NavLink } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-solid-svg-icons";
-import { useIntercom } from "react-use-intercom";
+
+import { useIntercom } from "packages/cloud/services/thirdParty/intercom";
 
 import { CloudRoutes } from "packages/cloud/cloudRoutes";
 
@@ -26,10 +27,7 @@ import ResourcesPopup, {
   Item,
 } from "views/layout/SideBar/components/ResourcesPopup";
 import { RoutePaths } from "pages/routes";
-import {
-  FeatureItem,
-  WithFeature,
-} from "../../../../../hooks/services/Feature";
+import { FeatureItem, WithFeature } from "hooks/services/Feature";
 
 const CreditsIcon = styled(FontAwesomeIcon)`
   font-size: 21px;
diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
index f6484fb7df244..7b85f2b3b5453 100644
--- a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
+++ b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx
@@ -66,12 +66,17 @@ export const useWorkspaceService = (): Context => {
   return workspaceService;
 };
 
-export const useCurrentWorkspace = (): Workspace => {
+export const useCurrentWorkspaceId = (): string => {
   const { params } = useRouter<unknown, { workspaceId: string }>();
-  const { workspaceId } = params;
+
+  return params.workspaceId;
+};
+
+export const useCurrentWorkspace = (): Workspace => {
+  const workspaceId = useCurrentWorkspaceId();
 
   return useResource(WorkspaceResource.detailShape(), {
-    workspaceId: workspaceId,
+    workspaceId,
   });
 };