Feat/add email support for pro and team (#6533)

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

@@ -8,6 +8,7 @@ import Link from 'next/link'
 import { Menu, Transition } from '@headlessui/react'
 import Indicator from '../indicator'
 import AccountAbout from '../account-about'
+import { mailToSupport } from '../utils/util'
 import WorkplaceSelector from './workplace-selector'
 import classNames from '@/utils/classnames'
 import I18n from '@/context/i18n'
@@ -18,6 +19,9 @@ import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows
 import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
 import { LanguagesSupported } from '@/i18n/language'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+
 export type IAppSelecotr = {
   isMobile: boolean
 }
@@ -34,6 +38,8 @@ export default function AppSelector({ isMobile }: IAppSelecotr) {
   const { t } = useTranslation()
   const { userProfile, langeniusVersionInfo } = useAppContext()
   const { setShowAccountSettingModal } = useModalContext()
+  const { plan } = useProviderContext()
+  const canEmailSupport = plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise
 
   const handleLogout = async () => {
     await logout({
@@ -105,6 +111,15 @@ export default function AppSelector({ isMobile }: IAppSelecotr) {
                         <div>{t('common.userProfile.settings')}</div>
                       </div>
                     </Menu.Item>
+                    {canEmailSupport && <Menu.Item>
+                      <a
+                        className={classNames(itemClassName, 'group justify-between')}
+                        href={mailToSupport(userProfile.email, plan.type, langeniusVersionInfo.current_version)}
+                        target='_blank' rel='noopener noreferrer'>
+                        <div>{t('common.userProfile.emailSupport')}</div>
+                        <ArrowUpRight className='hidden w-[14px] h-[14px] text-gray-500 group-hover:flex' />
+                      </a>
+                    </Menu.Item>}
                     <Menu.Item>
                       <Link
                         className={classNames(itemClassName, 'group justify-between')}

web/app/components/header/utils/util.ts

@@ -0,0 +1,25 @@
+export const generateMailToLink = (email: string, subject?: string, body?: string): string => {
+  let mailtoLink = `mailto:${email}`
+
+  if (subject)
+    mailtoLink += `?subject=${encodeURIComponent(subject)}`
+
+  if (body)
+    mailtoLink += `&body=${encodeURIComponent(body)}`
+
+  return mailtoLink
+}
+
+export const mailToSupport = (account: string, plan: string, version: string) => {
+  const subject = `Technical Support Request ${plan} ${account}`
+  const body = `
+    Please do not remove the following information:
+    -----------------------------------------------
+    Current Plan: ${plan}
+    Account: ${account}
+    Version: ${version}
+    Platform:
+    Problem Description:
+  `
+  return generateMailToLink('support@dify.ai', subject, body)
+}