From c1f83247f8f2d18214eb68c5d8a6529d76d5e3c3 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Fri, 15 Nov 2024 10:17:12 +0800 Subject: [PATCH 1/3] move Intercom into its own component --- apps/studio/src/components/Intercom.tsx | 17 +++++++++++++++++ apps/studio/src/pages/_app.tsx | 7 ------- 2 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 apps/studio/src/components/Intercom.tsx diff --git a/apps/studio/src/components/Intercom.tsx b/apps/studio/src/components/Intercom.tsx new file mode 100644 index 000000000..3b003d18a --- /dev/null +++ b/apps/studio/src/components/Intercom.tsx @@ -0,0 +1,17 @@ +import type { ReactNode } from "react" +import Intercom from "@intercom/messenger-js-sdk" + +import { env } from "~/env.mjs" + +interface WithIntercomWrapperProps { + children: ReactNode +} +export const WithIntercomWrapper = ({ children }: WithIntercomWrapperProps) => { + if (env.NEXT_PUBLIC_INTERCOM_APP_ID) { + Intercom({ + app_id: env.NEXT_PUBLIC_INTERCOM_APP_ID, + }) + } + + return children +} diff --git a/apps/studio/src/pages/_app.tsx b/apps/studio/src/pages/_app.tsx index 62784300c..ce7890cdc 100644 --- a/apps/studio/src/pages/_app.tsx +++ b/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 ( From be8c15dc5ed979001729bf567e023b22f20fe720 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Fri, 15 Nov 2024 10:17:29 +0800 Subject: [PATCH 2/3] only render intercom for post-login pages --- apps/studio/src/pages/index.tsx | 5 ++++- .../src/pages/sites/[siteId]/collections/[resourceId].tsx | 5 ++++- .../src/pages/sites/[siteId]/folders/[folderId]/index.tsx | 5 ++++- apps/studio/src/pages/sites/[siteId]/index.tsx | 5 ++++- .../src/pages/sites/[siteId]/links/[linkId]/index.tsx | 5 ++++- .../src/pages/sites/[siteId]/pages/[pageId]/index.tsx | 5 ++++- .../src/pages/sites/[siteId]/pages/[pageId]/settings.tsx | 5 ++++- apps/studio/src/pages/sites/[siteId]/settings.tsx | 7 ++++++- 8 files changed, 34 insertions(+), 8 deletions(-) diff --git a/apps/studio/src/pages/index.tsx b/apps/studio/src/pages/index.tsx index 55bacfebf..02f5f0962 100644 --- a/apps/studio/src/pages/index.tsx +++ b/apps/studio/src/pages/index.tsx @@ -1,5 +1,6 @@ import { Flex, Text } from "@chakra-ui/react" +import { WithIntercomWrapper } from "~/components/Intercom" import { SiteList } from "~/features/dashboard/SiteList" import { type NextPageWithLayout } from "~/lib/types" import { AdminLayout } from "~/templates/layouts/AdminLayout" @@ -17,6 +18,8 @@ const DashboardPage: NextPageWithLayout = () => { ) } -DashboardPage.getLayout = AdminLayout +DashboardPage.getLayout = (page: React.ReactNode) => { + return {AdminLayout(page)} +} export default DashboardPage diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx index a4d579de2..e4fbe3190 100644 --- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx +++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx @@ -13,6 +13,7 @@ import { BiData } from "react-icons/bi" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { folderSettingsModalAtom } from "~/features/dashboard/atoms" import { CollectionBanner } from "~/features/dashboard/components/CollectionBanner" import { CollectionTable } from "~/features/dashboard/components/CollectionTable" @@ -118,7 +119,9 @@ CollectionResourceListPage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} + } /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx index 4a1c28575..9785339f3 100644 --- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx @@ -17,6 +17,7 @@ import { z } from "zod" import type { RouterOutput } from "~/utils/trpc" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { folderSettingsModalAtom } from "~/features/dashboard/atoms" import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal" import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal" @@ -250,7 +251,9 @@ FolderPage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} + } /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx index 7f1b21d9e..04eaaa260 100644 --- a/apps/studio/src/pages/sites/[siteId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/index.tsx @@ -14,6 +14,7 @@ import { BiData, BiFileBlank, BiFolder, BiHomeAlt } from "react-icons/bi" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal" import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal" import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal" @@ -174,7 +175,9 @@ SitePage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} + } /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx index 5e0b72c81..6624ab928 100644 --- a/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx @@ -1,6 +1,7 @@ import { Grid, GridItem } from "@chakra-ui/react" import { z } from "zod" +import { WithIntercomWrapper } from "~/components/Intercom" import { EditCollectionLinkPreview } from "~/features/editing-experience/components/EditLinkPreview" import { LinkEditorDrawer } from "~/features/editing-experience/components/LinkEditorDrawer" import { LinkEditingLayout } from "~/templates/layouts/LinkEditingLayout" @@ -29,6 +30,8 @@ export const EditLink = () => { ) } -EditLink.getLayout = LinkEditingLayout +EditLink.getLayout = (page: React.ReactNode) => { + return {LinkEditingLayout(page)} +} export default EditLink diff --git a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx index e4148a681..fb8424d8f 100644 --- a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx @@ -3,6 +3,7 @@ import { ResourceType } from "~prisma/generated/generatedEnums" import type { NextPageWithLayout } from "~/lib/types" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { EditorDrawerProvider } from "~/contexts/EditorDrawerContext" import EditPageDrawer from "~/features/editing-experience/components/EditPageDrawer" import { EditPagePreview } from "~/features/editing-experience/components/EditPagePreview" @@ -63,7 +64,9 @@ EditPage.getLayout = (page) => { return ( {PageEditingLayout(page)} + } /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx index deb0c951a..5575f63e6 100644 --- a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx +++ b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx @@ -9,6 +9,7 @@ import { z } from "zod" import type { NextPageWithLayout } from "~/lib/types" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { ErrorProvider } from "~/features/editing-experience/components/form-builder/ErrorProvider" import FormBuilder from "~/features/editing-experience/components/form-builder/FormBuilder" import { editPageSchema } from "~/features/editing-experience/schema" @@ -137,7 +138,9 @@ PageSettings.getLayout = (page) => { return ( {PageEditingLayout(page)} + } /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/settings.tsx b/apps/studio/src/pages/sites/[siteId]/settings.tsx index 7afb7e9f2..01edd1e63 100644 --- a/apps/studio/src/pages/sites/[siteId]/settings.tsx +++ b/apps/studio/src/pages/sites/[siteId]/settings.tsx @@ -20,6 +20,7 @@ import { ResourceType } from "~prisma/generated/generatedEnums" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" +import { WithIntercomWrapper } from "~/components/Intercom" import { UnsavedSettingModal } from "~/features/editing-experience/components/UnsavedSettingModal" import { useQueryParse } from "~/hooks/useQueryParse" import { useZodForm } from "~/lib/form" @@ -224,7 +225,11 @@ SiteSettingsPage.getLayout = (page) => { return ( + {AdminSidebarOnlyLayout(page)} + + } /> ) } From ae8a676565d5556633f511e34a69c517586025b6 Mon Sep 17 00:00:00 2001 From: adriangohjw Date: Sun, 17 Nov 2024 02:25:07 +0800 Subject: [PATCH 3/3] move intercom into EnforceLoginStatePageWrapper --- .../EnforceLoginStatePageWrapper.tsx | 9 +++++++++ apps/studio/src/components/Intercom.tsx | 17 ----------------- apps/studio/src/pages/index.tsx | 5 +---- .../sites/[siteId]/collections/[resourceId].tsx | 5 +---- .../sites/[siteId]/folders/[folderId]/index.tsx | 5 +---- apps/studio/src/pages/sites/[siteId]/index.tsx | 5 +---- .../sites/[siteId]/links/[linkId]/index.tsx | 5 +---- .../sites/[siteId]/pages/[pageId]/index.tsx | 5 +---- .../sites/[siteId]/pages/[pageId]/settings.tsx | 5 +---- .../src/pages/sites/[siteId]/settings.tsx | 7 +------ 10 files changed, 17 insertions(+), 51 deletions(-) delete mode 100644 apps/studio/src/components/Intercom.tsx diff --git a/apps/studio/src/components/AuthWrappers/EnforceLoginStatePageWrapper.tsx b/apps/studio/src/components/AuthWrappers/EnforceLoginStatePageWrapper.tsx index 765d61751..2cce04210 100644 --- a/apps/studio/src/components/AuthWrappers/EnforceLoginStatePageWrapper.tsx +++ b/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} } diff --git a/apps/studio/src/components/Intercom.tsx b/apps/studio/src/components/Intercom.tsx deleted file mode 100644 index 3b003d18a..000000000 --- a/apps/studio/src/components/Intercom.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import type { ReactNode } from "react" -import Intercom from "@intercom/messenger-js-sdk" - -import { env } from "~/env.mjs" - -interface WithIntercomWrapperProps { - children: ReactNode -} -export const WithIntercomWrapper = ({ children }: WithIntercomWrapperProps) => { - if (env.NEXT_PUBLIC_INTERCOM_APP_ID) { - Intercom({ - app_id: env.NEXT_PUBLIC_INTERCOM_APP_ID, - }) - } - - return children -} diff --git a/apps/studio/src/pages/index.tsx b/apps/studio/src/pages/index.tsx index 02f5f0962..55bacfebf 100644 --- a/apps/studio/src/pages/index.tsx +++ b/apps/studio/src/pages/index.tsx @@ -1,6 +1,5 @@ import { Flex, Text } from "@chakra-ui/react" -import { WithIntercomWrapper } from "~/components/Intercom" import { SiteList } from "~/features/dashboard/SiteList" import { type NextPageWithLayout } from "~/lib/types" import { AdminLayout } from "~/templates/layouts/AdminLayout" @@ -18,8 +17,6 @@ const DashboardPage: NextPageWithLayout = () => { ) } -DashboardPage.getLayout = (page: React.ReactNode) => { - return {AdminLayout(page)} -} +DashboardPage.getLayout = AdminLayout export default DashboardPage diff --git a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx index e4fbe3190..a4d579de2 100644 --- a/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx +++ b/apps/studio/src/pages/sites/[siteId]/collections/[resourceId].tsx @@ -13,7 +13,6 @@ import { BiData } from "react-icons/bi" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { folderSettingsModalAtom } from "~/features/dashboard/atoms" import { CollectionBanner } from "~/features/dashboard/components/CollectionBanner" import { CollectionTable } from "~/features/dashboard/components/CollectionTable" @@ -119,9 +118,7 @@ CollectionResourceListPage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} - } + page={AdminCmsSidebarLayout(page)} /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx index 9785339f3..4a1c28575 100644 --- a/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/folders/[folderId]/index.tsx @@ -17,7 +17,6 @@ import { z } from "zod" import type { RouterOutput } from "~/utils/trpc" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { folderSettingsModalAtom } from "~/features/dashboard/atoms" import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal" import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal" @@ -251,9 +250,7 @@ FolderPage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} - } + page={AdminCmsSidebarLayout(page)} /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/index.tsx index 04eaaa260..7f1b21d9e 100644 --- a/apps/studio/src/pages/sites/[siteId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/index.tsx @@ -14,7 +14,6 @@ import { BiData, BiFileBlank, BiFolder, BiHomeAlt } from "react-icons/bi" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { DeleteResourceModal } from "~/features/dashboard/components/DeleteResourceModal/DeleteResourceModal" import { FolderSettingsModal } from "~/features/dashboard/components/FolderSettingsModal" import { PageSettingsModal } from "~/features/dashboard/components/PageSettingsModal" @@ -175,9 +174,7 @@ SitePage.getLayout = (page) => { return ( {AdminCmsSidebarLayout(page)} - } + page={AdminCmsSidebarLayout(page)} /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx index 6624ab928..5e0b72c81 100644 --- a/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/links/[linkId]/index.tsx @@ -1,7 +1,6 @@ import { Grid, GridItem } from "@chakra-ui/react" import { z } from "zod" -import { WithIntercomWrapper } from "~/components/Intercom" import { EditCollectionLinkPreview } from "~/features/editing-experience/components/EditLinkPreview" import { LinkEditorDrawer } from "~/features/editing-experience/components/LinkEditorDrawer" import { LinkEditingLayout } from "~/templates/layouts/LinkEditingLayout" @@ -30,8 +29,6 @@ export const EditLink = () => { ) } -EditLink.getLayout = (page: React.ReactNode) => { - return {LinkEditingLayout(page)} -} +EditLink.getLayout = LinkEditingLayout export default EditLink diff --git a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx index fb8424d8f..e4148a681 100644 --- a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx +++ b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/index.tsx @@ -3,7 +3,6 @@ import { ResourceType } from "~prisma/generated/generatedEnums" import type { NextPageWithLayout } from "~/lib/types" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { EditorDrawerProvider } from "~/contexts/EditorDrawerContext" import EditPageDrawer from "~/features/editing-experience/components/EditPageDrawer" import { EditPagePreview } from "~/features/editing-experience/components/EditPagePreview" @@ -64,9 +63,7 @@ EditPage.getLayout = (page) => { return ( {PageEditingLayout(page)} - } + page={PageEditingLayout(page)} /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx index 5575f63e6..deb0c951a 100644 --- a/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx +++ b/apps/studio/src/pages/sites/[siteId]/pages/[pageId]/settings.tsx @@ -9,7 +9,6 @@ import { z } from "zod" import type { NextPageWithLayout } from "~/lib/types" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { ErrorProvider } from "~/features/editing-experience/components/form-builder/ErrorProvider" import FormBuilder from "~/features/editing-experience/components/form-builder/FormBuilder" import { editPageSchema } from "~/features/editing-experience/schema" @@ -138,9 +137,7 @@ PageSettings.getLayout = (page) => { return ( {PageEditingLayout(page)} - } + page={PageEditingLayout(page)} /> ) } diff --git a/apps/studio/src/pages/sites/[siteId]/settings.tsx b/apps/studio/src/pages/sites/[siteId]/settings.tsx index 01edd1e63..7afb7e9f2 100644 --- a/apps/studio/src/pages/sites/[siteId]/settings.tsx +++ b/apps/studio/src/pages/sites/[siteId]/settings.tsx @@ -20,7 +20,6 @@ import { ResourceType } from "~prisma/generated/generatedEnums" import { z } from "zod" import { PermissionsBoundary } from "~/components/AuthWrappers" -import { WithIntercomWrapper } from "~/components/Intercom" import { UnsavedSettingModal } from "~/features/editing-experience/components/UnsavedSettingModal" import { useQueryParse } from "~/hooks/useQueryParse" import { useZodForm } from "~/lib/form" @@ -225,11 +224,7 @@ SiteSettingsPage.getLayout = (page) => { return ( - {AdminSidebarOnlyLayout(page)} - - } + page={AdminSidebarOnlyLayout(page)} /> ) }