chore: update support channels (#27188)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

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

@@ -10,11 +10,21 @@ const Zendesk = () => {
   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}`}
-    />
+    <>
+      <Script
+        nonce={nonce ?? undefined}
+        id="ze-snippet"
+        src={`https://static.zdassets.com/ekr/snippet.js?key=${ZENDESK_WIDGET_KEY}`}
+      />
+      <Script nonce={nonce ?? undefined} id="ze-init">{`
+        (function () {
+          window.addEventListener('load', function () {
+            if (window.zE)
+              window.zE('messenger', 'hide')
+          })
+        })()
+      `}</Script>
+    </>
   )
 }
 

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

@@ -21,3 +21,13 @@ export const setZendeskConversationFields = (fields: ConversationField[], callba
   if (!IS_CE_EDITION && window.zE)
     window.zE('messenger:set', 'conversationFields', fields, callback)
 }
+
+export const setZendeskWidgetVisibility = (visible: boolean) => {
+  if (!IS_CE_EDITION && window.zE)
+    window.zE('messenger', visible ? 'show' : 'hide')
+}
+
+export const toggleZendeskWindow = (open: boolean) => {
+  if (!IS_CE_EDITION && window.zE)
+    window.zE('messenger', open ? 'open' : 'close')
+}

web/app/components/header/account-dropdown/index.tsx

@@ -68,7 +68,7 @@ export default function AppSelector() {
     <div className="">
       <Menu as="div" className="relative inline-block text-left">
         {
-          ({ open }) => (
+          ({ open, close }) => (
             <>
               <MenuButton className={cn('inline-flex items-center rounded-[20px] p-0.5 hover:bg-background-default-dodge', open && 'bg-background-default-dodge')}>
                 <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
@@ -142,7 +142,7 @@ export default function AppSelector() {
                           <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
                         </Link>
                       </MenuItem>
-                      <Support />
+                      <Support closeAccountDropdown={close} />
                       {IS_CLOUD_EDITION && isCurrentWorkspaceOwner && <Compliance />}
                     </div>
                     <div className='p-1'>

web/app/components/header/account-dropdown/support.tsx

@@ -1,23 +1,25 @@
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
-import { RiArrowRightSLine, RiArrowRightUpLine, RiDiscordLine, RiFeedbackLine, RiMailSendLine, RiQuestionLine } from '@remixicon/react'
+import { RiArrowRightSLine, RiArrowRightUpLine, RiChatSmile2Line, RiDiscordLine, RiFeedbackLine, RiQuestionLine } from '@remixicon/react'
 import { Fragment } from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
-import { mailToSupport } from '../utils/util'
 import cn from '@/utils/classnames'
 import { useProviderContext } from '@/context/provider-context'
 import { Plan } from '@/app/components/billing/type'
-import { useAppContext } from '@/context/app-context'
+import { toggleZendeskWindow } from '@/app/components/base/zendesk/utils'
 
-export default function Support() {
+type SupportProps = {
+  closeAccountDropdown: () => void
+}
+
+export default function Support({ closeAccountDropdown }: SupportProps) {
   const itemClassName = `
   flex items-center w-full h-9 pl-3 pr-2 text-text-secondary system-md-regular
   rounded-lg hover:bg-state-base-hover cursor-pointer gap-1
 `
   const { t } = useTranslation()
   const { plan } = useProviderContext()
-  const { userProfile, langGeniusVersionInfo } = useAppContext()
-  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
+  const hasDedicatedChannel = plan.type !== Plan.sandbox
 
   return <Menu as="div" className="relative h-full w-full">
     {
@@ -48,17 +50,17 @@ export default function Support() {
               )}
             >
               <div className="px-1 py-1">
-                {canEmailSupport && <MenuItem>
-                  <a
-                    className={cn(itemClassName, 'group justify-between',
-                      'data-[active]:bg-state-base-hover',
-                    )}
-                    href={mailToSupport(userProfile.email, plan.type, langGeniusVersionInfo.current_version)}
-                    target='_blank' rel='noopener noreferrer'>
-                    <RiMailSendLine className='size-4 shrink-0 text-text-tertiary' />
-                    <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.emailSupport')}</div>
-                    <RiArrowRightUpLine className='size-[14px] shrink-0 text-text-tertiary' />
-                  </a>
+                {hasDedicatedChannel && <MenuItem>
+                  <button
+                    className={cn(itemClassName, 'group justify-between text-left data-[active]:bg-state-base-hover')}
+                    onClick={() => {
+                      toggleZendeskWindow(true)
+                      closeAccountDropdown()
+                    }}
+                  >
+                    <RiChatSmile2Line className='size-4 shrink-0 text-text-tertiary' />
+                    <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.contactUs')}</div>
+                  </button>
                 </MenuItem>}
                 <MenuItem>
                   <Link