From 3a5aa4587c45530e678fd3f7bc1de6774ed68e38 Mon Sep 17 00:00:00 2001
From: Coding On Star <447357187@qq.com>
Date: Fri, 10 Oct 2025 15:34:56 +0800
Subject: [PATCH] feat(billing): add tax information tooltips in pricing footer
 (#26705)

Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
---
 web/app/components/billing/pricing/footer.tsx | 12 +++++++++++-
 web/app/components/billing/pricing/index.tsx  | 11 ++++++++---
 web/i18n/en-US/billing.ts                     |  2 ++
 web/i18n/ja-JP/billing.ts                     |  2 ++
 web/i18n/zh-Hans/billing.ts                   |  2 ++
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/app/components/billing/pricing/footer.tsx b/web/app/components/billing/pricing/footer.tsx
index 4e3cdfee3d..fd713eb3da 100644
--- a/web/app/components/billing/pricing/footer.tsx
+++ b/web/app/components/billing/pricing/footer.tsx
@@ -2,19 +2,29 @@ import React from 'react'
 import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
+import { type Category, CategoryEnum } from '.'
+import cn from '@/utils/classnames'
 
 type FooterProps = {
   pricingPageURL: string
+  currentCategory: Category
 }
 
 const Footer = ({
   pricingPageURL,
+  currentCategory,
 }: FooterProps) => {
   const { t } = useTranslation()
 
   return (
     <div className='flex min-h-16 w-full justify-center border-t border-divider-accent px-10'>
-      <div className='flex max-w-[1680px] grow justify-end border-x border-divider-accent p-6'>
+      <div className={cn('flex max-w-[1680px] grow border-x border-divider-accent p-6', currentCategory === CategoryEnum.CLOUD ? 'justify-between' : 'justify-end') }>
+        {currentCategory === CategoryEnum.CLOUD && (
+          <div className='flex flex-col text-text-tertiary'>
+            <span className='system-xs-regular'>{t('billing.plansCommon.taxTip')}</span>
+            <span className='system-xs-regular'>{t('billing.plansCommon.taxTipSecond')}</span>
+          </div>
+        )}
         <span className='flex h-fit items-center gap-x-1 text-saas-dify-blue-accessible'>
           <Link
             href={pricingPageURL}
diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx
index 98072ec7c5..8b678ab272 100644
--- a/web/app/components/billing/pricing/index.tsx
+++ b/web/app/components/billing/pricing/index.tsx
@@ -13,7 +13,12 @@ import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
 import { NoiseBottom, NoiseTop } from './assets'
 
-export type Category = 'cloud' | 'self'
+export enum CategoryEnum {
+  CLOUD = 'cloud',
+  SELF = 'self',
+}
+
+export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
 
 type PricingProps = {
   onCancel: () => void
@@ -25,7 +30,7 @@ const Pricing: FC<PricingProps> = ({
   const { plan } = useProviderContext()
   const { isCurrentWorkspaceManager } = useAppContext()
   const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
-  const [currentCategory, setCurrentCategory] = useState<Category>('cloud')
+  const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
   const canPay = isCurrentWorkspaceManager
 
   useKeyPress(['esc'], onCancel)
@@ -57,7 +62,7 @@ const Pricing: FC<PricingProps> = ({
           planRange={planRange}
           canPay={canPay}
         />
-        <Footer pricingPageURL={pricingPageURL} />
+        <Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory}/>
         <div className='absolute -bottom-12 left-0 right-0 -z-10'>
           <NoiseBottom />
         </div>
diff --git a/web/i18n/en-US/billing.ts b/web/i18n/en-US/billing.ts
index 72cf9a3fca..9169631281 100644
--- a/web/i18n/en-US/billing.ts
+++ b/web/i18n/en-US/billing.ts
@@ -37,6 +37,8 @@ const translation = {
     save: 'Save ',
     free: 'Free',
     annualBilling: 'Bill Annually Save {{percent}}%',
+    taxTip: 'All subscription prices (monthly/annual) exclude applicable taxes (e.g., VAT, sales tax).',
+    taxTipSecond: 'If your region has no applicable tax requirements, no tax will appear in your checkout, and you won’t be charged any additional fees for the entire subscription term.',
     comparePlanAndFeatures: 'Compare plans & features',
     priceTip: 'per workspace/',
     currentPlan: 'Current Plan',
diff --git a/web/i18n/ja-JP/billing.ts b/web/i18n/ja-JP/billing.ts
index 426687da6c..6dbff60d5a 100644
--- a/web/i18n/ja-JP/billing.ts
+++ b/web/i18n/ja-JP/billing.ts
@@ -36,6 +36,8 @@ const translation = {
     save: '節約 ',
     free: '無料',
     annualBilling: '年次請求',
+    taxTip: 'すべてのサブスクリプション料金（月額／年額）は、適用される税金（例：消費税、付加価値税）を含みません。',
+    taxTipSecond: 'お客様の地域に適用税がない場合、チェックアウト時に税金は表示されず、サブスクリプション期間中に追加料金が請求されることもありません。',
     comparePlanAndFeatures: 'プランと機能を比較する',
     priceTip: 'ワークスペース/',
     currentPlan: '現在のプラン',
diff --git a/web/i18n/zh-Hans/billing.ts b/web/i18n/zh-Hans/billing.ts
index 96ba7970c8..00a7dd909a 100644
--- a/web/i18n/zh-Hans/billing.ts
+++ b/web/i18n/zh-Hans/billing.ts
@@ -36,6 +36,8 @@ const translation = {
     save: '节省',
     free: '免费',
     annualBilling: '按年计费节省 {{percent}}%',
+    taxTip: '所有订阅价格（按月/按年）均不含适用税费（如增值税、销售税）。',
+    taxTipSecond: '如果您所在地区无适用税费要求，结账时将不会显示税费，且在整个订阅周期内您都无需支付任何额外费用。',
     comparePlanAndFeatures: '对比套餐 & 功能特性',
     priceTip: '每个团队空间/',
     currentPlan: '当前计划',