mirror of https://github.com/langgenius/dify.git
feat(billing): add tax information tooltips in pricing footer (#26705)
Co-authored-by: CodingOnStar <hanxujiang@dify.ai>
This commit is contained in:
parent
cf1778e696
commit
3a5aa4587c
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ const translation = {
|
|||
save: '節約 ',
|
||||
free: '無料',
|
||||
annualBilling: '年次請求',
|
||||
taxTip: 'すべてのサブスクリプション料金(月額/年額)は、適用される税金(例:消費税、付加価値税)を含みません。',
|
||||
taxTipSecond: 'お客様の地域に適用税がない場合、チェックアウト時に税金は表示されず、サブスクリプション期間中に追加料金が請求されることもありません。',
|
||||
comparePlanAndFeatures: 'プランと機能を比較する',
|
||||
priceTip: 'ワークスペース/',
|
||||
currentPlan: '現在のプラン',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ const translation = {
|
|||
save: '节省',
|
||||
free: '免费',
|
||||
annualBilling: '按年计费节省 {{percent}}%',
|
||||
taxTip: '所有订阅价格(按月/按年)均不含适用税费(如增值税、销售税)。',
|
||||
taxTipSecond: '如果您所在地区无适用税费要求,结账时将不会显示税费,且在整个订阅周期内您都无需支付任何额外费用。',
|
||||
comparePlanAndFeatures: '对比套餐 & 功能特性',
|
||||
priceTip: '每个团队空间/',
|
||||
currentPlan: '当前计划',
|
||||
|
|
|
|||
Loading…
Reference in New Issue