mirror of https://github.com/langgenius/dify.git
feat: refactor billing plans components and add new PlanItem structure with tooltip support
This commit is contained in:
twwu
parent
8e88765261
commit
ac456c1a95
|
|
@ -6,6 +6,9 @@ import Header from './header'
|
|||
import PlanSwitcher from './plan-switcher'
|
||||
import { PlanRange } from './plan-switcher/plan-range-switcher'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Plans from './plans'
|
||||
// import { useTranslation } from 'react-i18next'
|
||||
// import { RiArrowRightUpLine, RiCloseLine, RiCloudFill, RiTerminalBoxFill } from '@remixicon/react'
|
||||
// import Link from 'next/link'
|
||||
|
|
@ -13,9 +16,7 @@ import { useKeyPress } from 'ahooks'
|
|||
// import TabSlider from '../../base/tab-slider'
|
||||
// import PlanItem from './plan-item'
|
||||
// import SelfHostedPlanItem from './self-hosted-plan-item'
|
||||
// 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'
|
||||
|
||||
|
|
@ -29,9 +30,9 @@ const Pricing: FC<PricingProps> = ({
|
|||
onCancel,
|
||||
}) => {
|
||||
// const { t } = useTranslation()
|
||||
// const { plan } = useProviderContext()
|
||||
// const { isCurrentWorkspaceManager } = useAppContext()
|
||||
// const canPay = isCurrentWorkspaceManager
|
||||
const { plan } = useProviderContext()
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const canPay = isCurrentWorkspaceManager
|
||||
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
|
||||
|
||||
const [currentCategory, setCurrentCategory] = useState<Category>('cloud')
|
||||
|
|
@ -56,93 +57,13 @@ const Pricing: FC<PricingProps> = ({
|
|||
currentPlanRange={planRange}
|
||||
onChangePlanRange={setPlanRange}
|
||||
/>
|
||||
|
||||
{/* <div
|
||||
className='fixed right-7 top-7 z-[1001] flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'
|
||||
onClick={onCancel}
|
||||
>
|
||||
<RiCloseLine className='size-5 text-components-button-tertiary-text' />
|
||||
</div>
|
||||
<GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
|
||||
<div className='flex flex-col items-center px-8 pb-7 pt-12'>
|
||||
<div className='title-5xl-bold mb-2 text-text-primary'>
|
||||
{t('billing.plansCommon.title')}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>
|
||||
<span>{t('billing.plansCommon.freeTrialTipPrefix')}</span>
|
||||
<span className='text-gradient font-semibold'>{t('billing.plansCommon.freeTrialTip')}</span>
|
||||
<span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-auto w-[1152px]'>
|
||||
<div className='flex h-[64px] items-center justify-between py-2'>
|
||||
<TabSlider
|
||||
value={currentPlan}
|
||||
className='inline-flex'
|
||||
options={[
|
||||
{
|
||||
value: 'cloud',
|
||||
text: <div className={
|
||||
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
|
||||
currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
|
||||
<RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>,
|
||||
},
|
||||
{
|
||||
value: 'self',
|
||||
text: <div className={
|
||||
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
|
||||
currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
|
||||
<RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>,
|
||||
}]}
|
||||
onChange={v => setCurrentPlan(v)} />
|
||||
|
||||
{currentPlan === 'cloud' && <SelectPlanRange
|
||||
value={planRange}
|
||||
onChange={setPlanRange}
|
||||
/>}
|
||||
</div>
|
||||
<div className='pb-8 pt-3'>
|
||||
<div className='flex flex-nowrap justify-center gap-x-4'>
|
||||
{currentPlan === 'cloud' && <>
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.sandbox}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.professional}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.team}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>}
|
||||
{currentPlan === 'self' && <>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.community}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.premium}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.enterprise}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Plans
|
||||
plan={plan}
|
||||
currentPlan={currentCategory}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
{/* <GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
|
||||
<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={pricingPageURL} className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
|
||||
|
|
|
|||
|
|
@ -1,235 +0,0 @@
|
|||
'use client'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiApps2Line, RiBook2Line, RiBrain2Line, RiChatAiLine, RiFileEditLine, RiFolder6Line, RiGroupLine, RiHardDrive3Line, RiHistoryLine, RiProgress3Line, RiQuestionLine, RiSeoLine, RiTerminalBoxLine } from '@remixicon/react'
|
||||
import type { BasicPlan } from '../type'
|
||||
import { Plan } from '../type'
|
||||
import { ALL_PLANS, NUM_INFINITE } from '../config'
|
||||
import Toast from '../../base/toast'
|
||||
import Tooltip from '../../base/tooltip'
|
||||
import Divider from '../../base/divider'
|
||||
import { ArCube1, Group2, Keyframe, SparklesSoft } from '../../base/icons/src/public/billing'
|
||||
import { PlanRange } from './select-plan-range'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
|
||||
type Props = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; tooltip?: ReactNode }) => {
|
||||
return (
|
||||
<div className='flex text-text-tertiary'>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
{icon}
|
||||
</div>
|
||||
<div className='system-sm-regular ml-2 mr-0.5 text-text-primary'>{label}</div>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
asChild
|
||||
popupContent={tooltip}
|
||||
popupClassName='w-[200px]'
|
||||
>
|
||||
<div className='flex size-4 items-center justify-center'>
|
||||
<RiQuestionLine className='text-text-quaternary' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const priceClassName = 'leading-[125%] text-[28px] font-bold text-text-primary'
|
||||
const style = {
|
||||
[Plan.sandbox]: {
|
||||
icon: <ArCube1 className='size-7 text-text-primary' />,
|
||||
description: 'text-util-colors-gray-gray-600',
|
||||
btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary',
|
||||
btnDisabledStyle: 'bg-components-button-secondary-bg-disabled hover:bg-components-button-secondary-bg-disabled border-components-button-secondary-border-disabled text-components-button-secondary-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
icon: <Keyframe className='size-7 text-util-colors-blue-brand-blue-brand-600' />,
|
||||
description: 'text-util-colors-blue-brand-blue-brand-600',
|
||||
btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-components-button-primary-border text-components-button-primary-text',
|
||||
btnDisabledStyle: 'bg-components-button-primary-bg-disabled hover:bg-components-button-primary-bg-disabled border-components-button-primary-border-disabled text-components-button-primary-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
icon: <Group2 className='size-7 text-util-colors-indigo-indigo-600' />,
|
||||
description: 'text-util-colors-indigo-indigo-600',
|
||||
btnStyle: 'bg-components-button-indigo-bg hover:bg-components-button-indigo-bg-hover border border-components-button-primary-border text-components-button-primary-text',
|
||||
btnDisabledStyle: 'bg-components-button-indigo-bg-disabled hover:bg-components-button-indigo-bg-disabled border-components-button-indigo-border-disabled text-components-button-primary-text-disabled',
|
||||
},
|
||||
}
|
||||
const PlanItem: FC<Props> = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const isMostPopularPlan = plan === Plan.professional
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
const isYear = planRange === PlanRange.yearly
|
||||
const isCurrent = plan === currentPlan
|
||||
const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const btnText = (() => {
|
||||
if (isCurrent)
|
||||
return t('billing.plansCommon.currentPlan')
|
||||
|
||||
return ({
|
||||
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
|
||||
[Plan.professional]: t('billing.plansCommon.getStarted'),
|
||||
[Plan.team]: t('billing.plansCommon.getStarted'),
|
||||
})[plan]
|
||||
})()
|
||||
|
||||
const handleGetPayUrl = async () => {
|
||||
if (loading)
|
||||
return
|
||||
|
||||
if (isPlanDisabled)
|
||||
return
|
||||
|
||||
if (isFreePlan)
|
||||
return
|
||||
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
|
||||
// Adb Block additional tracking block the gtag, so we need to redirect directly
|
||||
window.location.href = res.url
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className={cn('flex w-[373px] flex-col rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn p-6',
|
||||
isMostPopularPlan ? 'border-effects-highlight shadow-lg backdrop-blur-[5px]' : 'hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]',
|
||||
)}>
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
{style[plan].icon}
|
||||
<div className='flex items-center'>
|
||||
<div className='grow text-lg font-semibold uppercase leading-[125%] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{isMostPopularPlan && <div className='ml-1 flex shrink-0 items-center justify-center rounded-full border-[0.5px] bg-price-premium-badge-background px-1 py-[3px] text-components-premium-badge-grey-text-stop-0 shadow-xs'>
|
||||
<div className='pl-0.5'>
|
||||
<SparklesSoft className='size-3' />
|
||||
</div>
|
||||
<span className='system-2xs-semibold-uppercase bg-price-premium-text-background bg-clip-text px-0.5 text-transparent'>{t('billing.plansCommon.mostPopular')}</span>
|
||||
</div>}
|
||||
</div>
|
||||
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
<div className='my-5'>
|
||||
{/* Price */}
|
||||
{isFreePlan && (
|
||||
<div className={priceClassName}>{t('billing.plansCommon.free')}</div>
|
||||
)}
|
||||
{!isFreePlan && (
|
||||
<div className='flex items-end'>
|
||||
<div className={priceClassName}>${isYear ? planInfo.price * 10 : planInfo.price}</div>
|
||||
<div className='ml-1 flex flex-col'>
|
||||
{isYear && <div className='text-[14px] font-normal italic leading-[14px] text-text-warning'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
|
||||
<div className='text-[14px] font-normal leading-normal text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn('flex h-[42px] items-center justify-center rounded-full px-5 py-3',
|
||||
style[plan].btnStyle,
|
||||
isPlanDisabled && style[plan].btnDisabledStyle,
|
||||
isPlanDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
{btnText}
|
||||
</div>
|
||||
<div className='mt-6 flex flex-col gap-y-3'>
|
||||
<KeyValue
|
||||
icon={<RiChatAiLine />}
|
||||
label={isFreePlan
|
||||
? t('billing.plansCommon.messageRequest.title', { count: planInfo.messageRequest })
|
||||
: t('billing.plansCommon.messageRequest.titlePerMonth', { count: planInfo.messageRequest })}
|
||||
tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiBrain2Line />}
|
||||
label={t('billing.plansCommon.modelProviders')}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiFolder6Line />}
|
||||
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiGroupLine />}
|
||||
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiApps2Line />}
|
||||
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<KeyValue
|
||||
icon={<RiBook2Line />}
|
||||
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
|
||||
tooltip={t('billing.plansCommon.documentsTooltip') as string}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiHardDrive3Line />}
|
||||
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
|
||||
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
|
||||
/>
|
||||
|
||||
<KeyValue
|
||||
icon={<RiSeoLine />}
|
||||
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
|
||||
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiTerminalBoxLine />}
|
||||
label={
|
||||
planInfo.apiRateLimit === NUM_INFINITE ? `${t('billing.plansCommon.unlimitedApiRate')}`
|
||||
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}`
|
||||
}
|
||||
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? null : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiProgress3Line />}
|
||||
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<KeyValue
|
||||
icon={<RiFileEditLine />}
|
||||
label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })}
|
||||
tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
|
||||
/>
|
||||
<KeyValue
|
||||
icon={<RiHistoryLine />}
|
||||
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PlanItem)
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react'
|
||||
import type { BasicPlan } from '../../type'
|
||||
import { Plan } from '../../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[Plan.sandbox]: {
|
||||
btnClassname: 'bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover text-text-primary',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
btnClassname: 'bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover text-text-primary-on-surface',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
btnClassname: 'bg-saas-background-inverted hover:bg-saas-background-inverted-hover text-background-default',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: BasicPlan
|
||||
isPlanDisabled: boolean
|
||||
btnText: string
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
isPlanDisabled,
|
||||
btnText,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
disabled={isPlanDisabled}
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan].btnClassname,
|
||||
isPlanDisabled && BUTTON_CLASSNAME[plan].btnDisabledClassname,
|
||||
isPlanDisabled && 'cursor-not-allowed',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<span className='grow text-start'>{btnText}</span>
|
||||
{!isPlanDisabled && <RiArrowRightLine className='size-5 shrink-0' />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { BasicPlan } from '../../type'
|
||||
import { Plan } from '../../type'
|
||||
import { ALL_PLANS } from '../../config'
|
||||
import Toast from '../../../base/toast'
|
||||
import { PlanRange } from '../select-plan-range'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
import List from './list'
|
||||
import Button from './button'
|
||||
|
||||
const ICON_MAP = {
|
||||
[Plan.sandbox]: <div className='size-[60px] bg-black' />,
|
||||
[Plan.professional]: <div className='size-[60px] bg-black' />,
|
||||
[Plan.team]: <div className='size-[60px] bg-black' />,
|
||||
}
|
||||
|
||||
type PlanItemProps = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const PlanItem: FC<PlanItemProps> = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const isMostPopularPlan = plan === Plan.professional
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
const isYear = planRange === PlanRange.yearly
|
||||
const isCurrent = plan === currentPlan
|
||||
const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const btnText = useMemo(() => {
|
||||
if (isCurrent)
|
||||
return t('billing.plansCommon.currentPlan')
|
||||
|
||||
return ({
|
||||
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
|
||||
[Plan.professional]: t('billing.plansCommon.startBuilding'),
|
||||
[Plan.team]: t('billing.plansCommon.getStarted'),
|
||||
})[plan]
|
||||
}, [isCurrent, plan, t])
|
||||
|
||||
const handleGetPayUrl = async () => {
|
||||
if (loading)
|
||||
return
|
||||
|
||||
if (isPlanDisabled)
|
||||
return
|
||||
|
||||
if (isFreePlan)
|
||||
return
|
||||
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
|
||||
// Adb Block additional tracking block the gtag, so we need to redirect directly
|
||||
window.location.href = res.url
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className='flex min-w-0 grow flex-col pb-3'>
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className='flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{ICON_MAP[plan]}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='flex items-center gap-x-2.5'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{
|
||||
isMostPopularPlan && (
|
||||
<div className='flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1'>
|
||||
<span className='system-2xs-semibold-uppercase text-text-primary-on-surface'>
|
||||
{t('billing.plansCommon.mostPopular')}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mb-8 mt-4 flex items-end gap-x-2'>
|
||||
{/* Price */}
|
||||
{isFreePlan && (
|
||||
<span className='title-4xl-semi-bold text-text-primary'>{t('billing.plansCommon.free')}</span>
|
||||
)}
|
||||
{!isFreePlan && (
|
||||
<>
|
||||
{isYear && <span className='title-4xl-semi-bold text-text-quaternary line-through'>${planInfo.price * 12}</span>}
|
||||
<span className='title-4xl-semi-bold text-text-primary'>${isYear ? planInfo.price * 10 : planInfo.price}</span>
|
||||
<span className='system-md-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
isPlanDisabled={isPlanDisabled}
|
||||
btnText={btnText}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PlanItem)
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import React from 'react'
|
||||
import { type BasicPlan, Plan } from '../../../type'
|
||||
import Item from './item'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ALL_PLANS, NUM_INFINITE } from '../../../config'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type ListProps = {
|
||||
plan: BasicPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-2.5 p-6'>
|
||||
<Item
|
||||
label={isFreePlan
|
||||
? t('billing.plansCommon.messageRequest.title', { count: planInfo.messageRequest })
|
||||
: t('billing.plansCommon.messageRequest.titlePerMonth', { count: planInfo.messageRequest })}
|
||||
tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
|
||||
tooltip={t('billing.plansCommon.documentsTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
|
||||
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
|
||||
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
planInfo.apiRateLimit === NUM_INFINITE ? `${t('billing.plansCommon.unlimitedApiRate')}`
|
||||
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}`
|
||||
}
|
||||
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })}
|
||||
tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.modelProviders')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react'
|
||||
import Tooltip from './tooltip'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
tooltip,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center'>
|
||||
<span className='system-sm-regular ml-2 mr-0.5 grow text-text-primary'>{label}</span>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
content={tooltip}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React from 'react'
|
||||
import { RiInfoI } from '@remixicon/react'
|
||||
|
||||
type TooltipProps = {
|
||||
content: string
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
content,
|
||||
}: TooltipProps) => {
|
||||
return (
|
||||
<div className='group relative z-10 size-[18px] overflow-visible'>
|
||||
<div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
|
||||
{content}
|
||||
</div>
|
||||
<div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
|
||||
<RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tooltip)
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import Divider from '@/app/components/base/divider'
|
||||
import { type BasicPlan, Plan, type UsagePlanInfo } from '../../type'
|
||||
import PlanItem from '../plan-item'
|
||||
import type { PlanRange } from '../plan-switcher/plan-range-switcher'
|
||||
|
||||
type PlansProps = {
|
||||
plan: {
|
||||
type: BasicPlan
|
||||
usage: UsagePlanInfo
|
||||
total: UsagePlanInfo
|
||||
}
|
||||
currentPlan: string
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const Plans = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
canPay,
|
||||
}: PlansProps) => {
|
||||
return (
|
||||
<div className='flex w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className='flex max-w-[1680px] grow border-x border-divider-accent'>
|
||||
{
|
||||
currentPlan === 'cloud' && (
|
||||
<>
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.sandbox}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.professional}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<PlanItem
|
||||
currentPlan={plan.type}
|
||||
plan={Plan.team}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
// currentPlan === 'self' && <>
|
||||
// <SelfHostedPlanItem
|
||||
// plan={SelfHostedPlan.community}
|
||||
// planRange={planRange}
|
||||
// canPay={canPay}
|
||||
// />
|
||||
// <SelfHostedPlanItem
|
||||
// plan={SelfHostedPlan.premium}
|
||||
// planRange={planRange}
|
||||
// canPay={canPay}
|
||||
// />
|
||||
// <SelfHostedPlanItem
|
||||
// plan={SelfHostedPlan.enterprise}
|
||||
// planRange={planRange}
|
||||
// canPay={canPay}
|
||||
// />
|
||||
// </>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plans
|
||||
|
|
@ -43,6 +43,7 @@ const translation = {
|
|||
contractSales: 'Contact sales',
|
||||
contractOwner: 'Contact team manager',
|
||||
startForFree: 'Start for Free',
|
||||
startBuilding: 'Start Building',
|
||||
getStarted: 'Get Started',
|
||||
contactSales: 'Contact Sales',
|
||||
talkToSales: 'Talk to Sales',
|
||||
|
|
@ -110,17 +111,17 @@ const translation = {
|
|||
sandbox: {
|
||||
name: 'Sandbox',
|
||||
for: 'Free Trial of Core Capabilities',
|
||||
description: 'Free Trial of Core Capabilities',
|
||||
description: 'Try core features for free.',
|
||||
},
|
||||
professional: {
|
||||
name: 'Professional',
|
||||
for: 'For Independent Developers/Small Teams',
|
||||
description: 'For Independent Developers/Small Teams',
|
||||
description: 'For independent developers & small teams ready to build production AI applications.',
|
||||
},
|
||||
team: {
|
||||
name: 'Team',
|
||||
for: 'For Medium-sized Teams',
|
||||
description: 'For Medium-sized Teams',
|
||||
description: 'For medium-sized teams requiring collaboration and higher throughput.',
|
||||
},
|
||||
community: {
|
||||
name: 'Community',
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ const translation = {
|
|||
contractSales: '联系销售',
|
||||
contractOwner: '联系团队管理员',
|
||||
startForFree: '免费开始',
|
||||
startBuilding: '开始构建',
|
||||
getStarted: '立即开始',
|
||||
contactSales: '联系销售',
|
||||
talkToSales: '联系销售',
|
||||
|
|
@ -109,17 +110,17 @@ const translation = {
|
|||
sandbox: {
|
||||
name: 'Sandbox',
|
||||
for: '核心能力的免费试用',
|
||||
description: '核心功能免费试用',
|
||||
description: '免费试用核心功能。',
|
||||
},
|
||||
professional: {
|
||||
name: 'Professional',
|
||||
for: '适合独立开发者或小团队',
|
||||
description: '对于独立开发者/小团队',
|
||||
description: '适合准备构建生产级 AI 应用的独立开发者和小团队。',
|
||||
},
|
||||
team: {
|
||||
name: 'Team',
|
||||
for: '适合中等规模的团队',
|
||||
description: '对于中型团队',
|
||||
description: '适合需要协作和更高吞吐量的中等规模团队。',
|
||||
},
|
||||
community: {
|
||||
name: 'Community',
|
||||
|
|
|
|||
Loading…
Reference in New Issue