fix: intercom zindex (#24096)

apps/ui-playground/app/global.css

@@ -636,10 +636,6 @@ select:focus {
   @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
 }
 
-.intercom-lightweight-app  {
-  @apply z-40 !important;
-}
-
 @import "../../web/styles/tokens.css";
 
 @layer base {
@@ -1027,10 +1023,6 @@ select:focus {
   @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
 }
 
-.intercom-lightweight-app  {
-  @apply z-40 !important;
-}
-
 .prose :where(a:not([data-card])):not(:where([class~="not-prose"] *)) {
   text-decoration: none;
 }

apps/web/package.json

@@ -138,7 +138,7 @@
     "react-select": "^5.7.0",
     "react-timezone-select": "^1.4.0",
     "react-turnstile": "^1.1.3",
-    "react-use-intercom": "1.5.1",
+    "react-use-intercom": "^5.5.0",
     "recoil": "^0.7.7",
     "remove-markdown": "^0.5.0",
     "retell-client-js-sdk": "^2.0.0",

apps/web/styles/globals.css

@@ -640,10 +640,6 @@ select:focus {
   @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
 }
 
-.intercom-lightweight-app {
-  @apply z-40 !important;
-}
-
 [data-radix-popper-content-wrapper] {
   border: none;
 }

packages/features/ee/support/lib/intercom/useIntercom.ts

@@ -1,4 +1,4 @@
-// eslint-disable-next-line no-restricted-imports
+ 
 import { noop } from "lodash";
 import { useEffect } from "react";
 import type { IntercomBootProps, IntercomProps } from "react-use-intercom";
@@ -13,7 +13,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
 
-// eslint-disable-next-line turbo/no-undeclared-env-vars
+ 
 export const isInterComEnabled = z.string().min(1).safeParse(process.env.NEXT_PUBLIC_INTERCOM_APP_ID).success;
 
 const useIntercomHook = isInterComEnabled
@@ -57,6 +57,7 @@ export const useIntercom = () => {
       ...(data && data?.email && { email: data.email }),
       ...(data && data?.id && { userId: data.id }),
       createdAt: String(dayjs(data?.createdDate).unix()),
+      zIndex: 10,
       ...(userHash && { userHash }),
       hideDefaultLauncher: isMobile,
       customAttributes: {
@@ -104,6 +105,7 @@ export const useIntercom = () => {
       createdAt: String(dayjs(data?.createdDate).unix()),
       ...(userHash && { userHash }),
       hideDefaultLauncher: isMobile,
+      zIndex: 10,
       customAttributes: {
         //keys should be snake cased
         user_name: data?.username,
@@ -183,7 +185,6 @@ export const useBootIntercom = () => {
       };
       window.dispatchEvent(new Event("support:ready"));
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, statsData, hasPaidPlan, isTieredSupportEnabled]);
 };
 

yarn.lock

@@ -4363,7 +4363,7 @@ __metadata:
     react-select: ^5.7.0
     react-timezone-select: ^1.4.0
     react-turnstile: ^1.1.3
-    react-use-intercom: 1.5.1
+    react-use-intercom: ^5.5.0
     recoil: ^0.7.7
     remove-markdown: ^0.5.0
     retell-client-js-sdk: ^2.0.0
@@ -41237,13 +41237,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-use-intercom@npm:1.5.1":
-  version: 1.5.1
-  resolution: "react-use-intercom@npm:1.5.1"
+"react-use-intercom@npm:^5.5.0":
+  version: 5.5.0
+  resolution: "react-use-intercom@npm:5.5.0"
   peerDependencies:
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 34f502f037bf93a3b1a9ead9d4380e7bfebd36d85e79ee2f92f14bdcea0b6d709f74e1344ef39d50016ec29c9414075fdb93efb1ad736ede91fa435f83aa3156
+  checksum: 2f81068f6ff414aca7afc83d03a4b99bebcb446b970a558d4fad174420371aad2cdb801e246896f37156a6266c6a34c01dde83a3ae80c761aa1f46eaedf763af
+  languageName: node
+  linkType: hard
+
+"react-use-measure@npm:^2.1.1":
+  version: 2.1.7
+  resolution: "react-use-measure@npm:2.1.7"
+  peerDependencies:
+    react: ">=16.13"
+    react-dom: ">=16.13"
+  peerDependenciesMeta:
+    react-dom:
+      optional: true
+  checksum: 5f00c14cf50b0710cdbd27b63a005be20283099d2fa2723a97f3a1cf0b2daedddd67249520c21e49e95348f56428689f3229c343dcb9ed37da58f9c227d29bee
   languageName: node
   linkType: hard