From 7ab66bdb482adc6f8a2016b07fe0c5565afca8a9 Mon Sep 17 00:00:00 2001
From: WTW0313 <twwu@dify.ai>
Date: Mon, 21 Jul 2025 21:23:38 +0800
Subject: [PATCH] feat: update deprecation notice to use mixed translation and
 refactor URL handling

---
 .../plugins/base/deprecation-notice.tsx       | 13 +++++++----
 .../plugin-detail-panel/detail-header.tsx     | 23 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/web/app/components/plugins/base/deprecation-notice.tsx b/web/app/components/plugins/base/deprecation-notice.tsx
index a670bee7cb..d567c3f976 100644
--- a/web/app/components/plugins/base/deprecation-notice.tsx
+++ b/web/app/components/plugins/base/deprecation-notice.tsx
@@ -3,14 +3,16 @@ import type { FC } from 'react'
 import Link from 'next/link'
 import cn from '@/utils/classnames'
 import { RiAlertFill } from '@remixicon/react'
-import { Trans, useTranslation } from 'react-i18next'
+import { Trans } from 'react-i18next'
 import { snakeCase2CamelCase } from '@/utils/format'
+import { useMixedTranslation } from '../marketplace/hooks'
 
 type DeprecationNoticeProps = {
   status: 'deleted' | 'active'
   deprecatedReason: string
   alternativePluginId: string
-  urlPrefix: string
+  alternativePluginURL: string
+  locale?: string
   className?: string
   innerWrapperClassName?: string
   iconWrapperClassName?: string
@@ -23,13 +25,14 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
   status,
   deprecatedReason,
   alternativePluginId,
-  urlPrefix,
+  alternativePluginURL,
+  locale,
   className,
   innerWrapperClassName,
   iconWrapperClassName,
   textClassName,
 }) => {
-  const { t } = useTranslation()
+  const { t } = useMixedTranslation(locale)
 
   const deprecatedReasonKey = useMemo(() => {
     if (!deprecatedReason) return ''
@@ -57,7 +60,7 @@ const DeprecationNotice: FC<DeprecationNoticeProps> = ({
                 components={{
                   CustomLink: (
                     <Link
-                      href={`${urlPrefix}/plugins/${alternativePluginId}`}
+                      href={alternativePluginURL}
                       target='_blank'
                       rel='noopener noreferrer'
                       className='underline'
diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index 0791293e8d..9c31a0b8e1 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -29,11 +29,11 @@ import Toast from '@/app/components/base/toast'
 import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin'
 import { Github } from '@/app/components/base/icons/src/public/common'
 import { uninstallPlugin } from '@/service/plugins'
-import { useGetLanguage } from '@/context/i18n'
+import { useGetLanguage, useI18N } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
-import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
+import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { getMarketplaceUrl } from '@/utils/var'
 import { PluginAuth } from '@/app/components/plugins/plugin-auth'
@@ -57,6 +57,7 @@ const DetailHeader = ({
   const { t } = useTranslation()
   const { theme } = useTheme()
   const locale = useGetLanguage()
+  const { locale: currentLocale } = useI18N()
   const { checkForUpdates, fetchReleases } = useGitHubReleases()
   const { setShowUpdatePluginModal } = useModalContext()
   const { refreshModelProviders } = useProviderContext()
@@ -102,7 +103,7 @@ const DetailHeader = ({
     if (isFromGitHub)
       return `https://github.com/${meta!.repo}`
     if (isFromMarketplace)
-      return getMarketplaceUrl(`/plugins/${author}/${name}`, { theme })
+      return getMarketplaceUrl(`/plugins/${author}/${name}`, { language: currentLocale, theme })
     return ''
   }, [author, isFromGitHub, isFromMarketplace, meta, name, theme])
 
@@ -276,13 +277,15 @@ const DetailHeader = ({
           </ActionButton>
         </div>
       </div>
-      <DeprecationNotice
-        status={status}
-        deprecatedReason={deprecated_reason}
-        alternativePluginId={alternative_plugin_id}
-        urlPrefix={MARKETPLACE_URL_PREFIX}
-        className='mt-3'
-      />
+      {isFromMarketplace && (
+        <DeprecationNotice
+          status={status}
+          deprecatedReason={deprecated_reason}
+          alternativePluginId={alternative_plugin_id}
+          alternativePluginURL={getMarketplaceUrl(`/plugins/${alternative_plugin_id}`, { language: currentLocale, theme })}
+          className='mt-3'
+        />
+      )}
       <Description className='mb-2 mt-3 h-auto' text={description[locale]} descriptionLineRows={2}></Description>
       {
         category === PluginType.tool && (