chore: support Zendesk widget (#25517)

web/app/components/base/ga/index.tsx

@@ -24,7 +24,7 @@ const GA: FC<IGAProps> = ({
   if (IS_CE_EDITION)
     return null
 
-  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') : ''
+  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
 
   return (
     <>
@@ -32,7 +32,7 @@ const GA: FC<IGAProps> = ({
         strategy="beforeInteractive"
         async
         src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       ></Script>
       <Script
         id="ga-init"
@@ -44,14 +44,14 @@ gtag('js', new Date());
 gtag('config', '${gaIdMaps[gaType]}');
           `,
         }}
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       >
       </Script>
       {/* Cookie banner */}
       <Script
         id="cookieyes"
         src='https://cdn-cookieyes.com/client_data/2a645945fcae53f8e025a2b1/script.js'
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       ></Script>
     </>
 

web/app/components/base/zendesk/index.tsx

@@ -0,0 +1,21 @@
+import { memo } from 'react'
+import { type UnsafeUnwrappedHeaders, headers } from 'next/headers'
+import Script from 'next/script'
+import { IS_CE_EDITION, ZENDESK_WIDGET_KEY } from '@/config'
+
+const Zendesk = () => {
+  if (IS_CE_EDITION || !ZENDESK_WIDGET_KEY)
+    return null
+
+  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
+
+  return (
+    <Script
+      nonce={nonce ?? undefined}
+      id="ze-snippet"
+      src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+    />
+  )
+}
+
+export default memo(Zendesk)

web/app/components/base/zendesk/utils.ts

@@ -0,0 +1,23 @@
+import { IS_CE_EDITION } from '@/config'
+
+export type ConversationField = {
+  id: string,
+  value: any,
+}
+
+declare global {
+  // eslint-disable-next-line ts/consistent-type-definitions
+  interface Window {
+    zE?: (
+      command: string,
+      value: string,
+      payload?: ConversationField[] | string | string[] | (() => any),
+      callback?: () => any,
+    ) => void;
+  }
+}
+
+export const setZendeskConversationFields = (fields: ConversationField[], callback?: () => any) => {
+  if (!IS_CE_EDITION && window.zE)
+    window.zE('messenger:set', 'conversationFields', fields, callback)
+}

web/app/layout.tsx

@@ -3,6 +3,7 @@ import type { Viewport } from 'next'
 import I18nServer from './components/i18n-server'
 import BrowserInitializer from './components/browser-initializer'
 import SentryInitializer from './components/sentry-initializer'
+import Zendesk from './components/base/zendesk'
 import { getLocaleOnServer } from '@/i18n-config/server'
 import { TanstackQueryInitializer } from '@/context/query-client'
 import { ThemeProvider } from 'next-themes'
@@ -48,6 +49,12 @@ const LocaleLayout = async ({
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_JINAREADER]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_JINAREADER,
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_FIRECRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_FIRECRAWL,
     [DatasetAttr.DATA_PUBLIC_ENABLE_WEBSITE_WATERCRAWL]: process.env.NEXT_PUBLIC_ENABLE_WEBSITE_WATERCRAWL,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_WIDGET_KEY]: process.env.NEXT_PUBLIC_ZENDESK_WIDGET_KEY,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_ENVIRONMENT,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_VERSION,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_EMAIL,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_WORKSPACE_ID,
+    [DatasetAttr.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN]: process.env.NEXT_PUBLIC_ZENDESK_FIELD_ID_PLAN,
   }
 
   return (
@@ -89,6 +96,7 @@ const LocaleLayout = async ({
           </BrowserInitializer>
         </ThemeProvider>
         <RoutePrefixHandle />
+        <Zendesk />
       </body>
     </html>
   )