From 3dff21e0bebba6df1cad862b9b13c2721078e329 Mon Sep 17 00:00:00 2001
From: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Date: Wed, 30 Apr 2025 14:58:49 +0800
Subject: [PATCH] fix(i18n): add functions to retrieve document and pricing
 page languages (#19142)

---
 web/app/components/billing/pricing/index.tsx   |  8 +++++++-
 .../header/account-dropdown/index.tsx          | 11 ++++-------
 web/context/i18n.ts                            | 12 +++++++++++-
 web/i18n/language.ts                           | 18 ++++++++++++++++++
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 0d4011895b..0516794414 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -15,6 +15,7 @@ import { useProviderContext } from '@/context/provider-context'
 import GridMask from '@/app/components/base/grid-mask'
 import { useAppContext } from '@/context/app-context'
 import classNames from '@/utils/classnames'
+import { useGetPricingPageLanguage } from '@/context/i18n'
 
 type Props = {
   onCancel: () => void
@@ -33,6 +34,11 @@ const Pricing: FC<Props> = ({
 
   useKeyPress(['esc'], onCancel)
 
+  const pricingPageLanguage = useGetPricingPageLanguage()
+  const pricingPageURL = pricingPageLanguage
+    ? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
+    : 'https://dify.ai/pricing#plans-and-features'
+
   return createPortal(
     <div
       className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] bg-background-overlay-backdrop p-4 backdrop-blur-[6px]'
@@ -127,7 +133,7 @@ const Pricing: FC<Props> = ({
           </div>
           <div className='flex items-center justify-center py-4'>
             <div className='flex items-center justify-center gap-x-0.5 rounded-lg px-3 py-2 text-components-button-secondary-accent-text hover:cursor-pointer hover:bg-state-accent-hover'>
-              <Link href='https://dify.ai/pricing#plans-and-features' className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
+              <Link href={pricingPageURL} className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
               <RiArrowRightUpLine className='size-4' />
             </div>
           </div>
diff --git a/web/app/components/header/account-dropdown/index.tsx b/web/app/components/header/account-dropdown/index.tsx
index 66b61d7ec1..df0dd37260 100644
--- a/web/app/components/header/account-dropdown/index.tsx
+++ b/web/app/components/header/account-dropdown/index.tsx
@@ -2,7 +2,7 @@
 import { useTranslation } from 'react-i18next'
 import { Fragment, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { useContext, useContextSelector } from 'use-context-selector'
+import { useContextSelector } from 'use-context-selector'
 import {
   RiAccountCircleLine,
   RiArrowRightUpLine,
@@ -23,13 +23,12 @@ import GithubStar from '../github-star'
 import Support from './support'
 import Compliance from './compliance'
 import PremiumBadge from '@/app/components/base/premium-badge'
-import I18n from '@/context/i18n'
+import { useGetDocLanguage } from '@/context/i18n'
 import Avatar from '@/app/components/base/avatar'
 import { logout } from '@/service/common'
 import AppContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useModalContext } from '@/context/modal-context'
-import { LanguagesSupported } from '@/i18n/language'
 import { LicenseStatus } from '@/types/feature'
 import { IS_CLOUD_EDITION } from '@/config'
 import cn from '@/utils/classnames'
@@ -43,11 +42,11 @@ export default function AppSelector() {
   const [aboutVisible, setAboutVisible] = useState(false)
   const systemFeatures = useContextSelector(AppContext, v => v.systemFeatures)
 
-  const { locale } = useContext(I18n)
   const { t } = useTranslation()
   const { userProfile, langeniusVersionInfo, isCurrentWorkspaceOwner } = useAppContext()
   const { isEducationAccount } = useProviderContext()
   const { setShowAccountSettingModal } = useModalContext()
+  const docLanguage = useGetDocLanguage()
 
   const handleLogout = async () => {
     await logout({
@@ -132,9 +131,7 @@ export default function AppSelector() {
                         className={cn(itemClassName, 'group justify-between',
                           'data-[active]:bg-state-base-hover',
                         )}
-                        href={
-                          locale !== LanguagesSupported[1] ? 'https://docs.dify.ai/' : `https://docs.dify.ai/v/${locale.toLowerCase()}/`
-                        }
+                        href={`https://docs.dify.ai/${docLanguage}/introduction`}
                         target='_blank' rel='noopener noreferrer'>
                         <RiBookOpenLine className='size-4 shrink-0 text-text-tertiary' />
                         <div className='system-md-regular grow px-1 text-text-secondary'>{t('common.userProfile.helpCenter')}</div>
diff --git a/web/context/i18n.ts b/web/context/i18n.ts
index 6db211dd5d..463e01d1c5 100644
--- a/web/context/i18n.ts
+++ b/web/context/i18n.ts
@@ -3,7 +3,7 @@ import {
   useContext,
 } from 'use-context-selector'
 import type { Locale } from '@/i18n'
-import { getLanguage } from '@/i18n/language'
+import { getDocLanguage, getLanguage, getPricingPageLanguage } from '@/i18n/language'
 import { noop } from 'lodash-es'
 
 type II18NContext = {
@@ -24,5 +24,15 @@ export const useGetLanguage = () => {
 
   return getLanguage(locale)
 }
+export const useGetDocLanguage = () => {
+  const { locale } = useI18N()
+
+  return getDocLanguage(locale)
+}
+export const useGetPricingPageLanguage = () => {
+  const { locale } = useI18N()
+
+  return getPricingPageLanguage(locale)
+}
 
 export default I18NContext
diff --git a/web/i18n/language.ts b/web/i18n/language.ts
index c86d31ffa0..87027a7951 100644
--- a/web/i18n/language.ts
+++ b/web/i18n/language.ts
@@ -39,6 +39,24 @@ export const getLanguage = (locale: string) => {
   return LanguagesSupported[0].replace('-', '_')
 }
 
+const DOC_LANGUAGE: Record<string, string> = {
+  'zh-Hans': 'zh-hans',
+  'ja-JP': 'ja-jp',
+  'en-US': 'en',
+}
+
+export const getDocLanguage = (locale: string) => {
+  return DOC_LANGUAGE[locale] || 'en'
+}
+
+const PRICING_PAGE_LANGUAGE: Record<string, string> = {
+  'ja-JP': 'jp',
+}
+
+export const getPricingPageLanguage = (locale: string) => {
+  return PRICING_PAGE_LANGUAGE[locale] || ''
+}
+
 export const NOTICE_I18N = {
   title: {
     en_US: 'Important Notice',