opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(billing): refactor pricing footer to conditionally display tax information based on category

This commit is contained in:
CodingOnStar 2025-10-10 10:00:29 +08:00
parent 97b5d4bba1
commit 8d2b5c5464
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/app/components/billing/pricing/footer.tsx
View File

@ -2,24 +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 '.'
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-between border-x border-divider-accent p-6'>
<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'>
{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='ml-auto flex h-fit items-center gap-x-1 text-saas-dify-blue-accessible'>
<Link
href={pricingPageURL}
className='system-md-regular'

11
web/app/components/billing/pricing/index.tsx
View File

@ -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>