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)
+}