Studio - only show intercom post-login (#880)

* move Intercom into its own component

* only render intercom for post-login pages

* move intercom into EnforceLoginStatePageWrapper

apps/studio/src/components/AuthWrappers/EnforceLoginStatePageWrapper.tsx

@@ -1,7 +1,9 @@
 import type { PropsWithChildren } from "react"
 import { useMemo } from "react"
 import { useRouter } from "next/router"
+import Intercom from "@intercom/messenger-js-sdk"
 
+import { env } from "~/env.mjs"
 import { useLoginState } from "~/features/auth"
 import { SIGN_IN } from "~/lib/routes"
 import { callbackUrlSchema } from "~/schemas/url"
@@ -46,6 +48,13 @@ export const EnforceLoginStatePageWrapper = ({
   const { hasLoginStateFlag } = useLoginState()
 
   if (hasLoginStateFlag) {
+    // Initialize Intercom
+    if (env.NEXT_PUBLIC_INTERCOM_APP_ID) {
+      Intercom({
+        app_id: env.NEXT_PUBLIC_INTERCOM_APP_ID,
+      })
+    }
+
     return <>{children}</>
   }
 

apps/studio/src/pages/_app.tsx

@@ -8,7 +8,6 @@ import { Skeleton, Stack } from "@chakra-ui/react"
 import { datadogRum } from "@datadog/browser-rum"
 import { GrowthBook } from "@growthbook/growthbook"
 import { GrowthBookProvider } from "@growthbook/growthbook-react"
-import Intercom from "@intercom/messenger-js-sdk"
 import { ThemeProvider } from "@opengovsg/design-system-react"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import { ErrorBoundary } from "react-error-boundary"
@@ -59,12 +58,6 @@ void gb.init({
 })
 
 const MyApp = ((props: AppPropsWithAuthAndLayout) => {
-  if (env.NEXT_PUBLIC_INTERCOM_APP_ID) {
-    Intercom({
-      app_id: env.NEXT_PUBLIC_INTERCOM_APP_ID,
-    })
-  }
-
   return (
     <EnvProvider env={env}>
       <LoginStateProvider>