dify
This commit is contained in:
@@ -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,133 @@
|
||||
'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 '../../plan-switcher/plan-range-switcher'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
import List from './list'
|
||||
import Button from './button'
|
||||
import { Professional, Sandbox, Team } from '../../assets'
|
||||
|
||||
const ICON_MAP = {
|
||||
[Plan.sandbox]: <Sandbox />,
|
||||
[Plan.professional]: <Professional />,
|
||||
[Plan.team]: <Team />,
|
||||
}
|
||||
|
||||
type CloudPlanItemProps = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const CloudPlanItem: FC<CloudPlanItemProps> = ({
|
||||
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 flex-1 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>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
{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 pb-0.5 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(CloudPlanItem)
|
||||
@@ -0,0 +1,104 @@
|
||||
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={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={
|
||||
planInfo.triggerEvents === NUM_INFINITE
|
||||
? t('billing.plansCommon.triggerEvents.unlimited')
|
||||
: plan === Plan.sandbox
|
||||
? t('billing.plansCommon.triggerEvents.sandbox', { count: planInfo.triggerEvents })
|
||||
: t('billing.plansCommon.triggerEvents.professional', { count: planInfo.triggerEvents })
|
||||
}
|
||||
tooltip={t('billing.plansCommon.triggerEvents.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.startNodes.limited', { count: 2 })
|
||||
: t('billing.plansCommon.startNodes.unlimited')
|
||||
}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.workflowExecution.standard')
|
||||
: plan === Plan.professional
|
||||
? t('billing.plansCommon.workflowExecution.faster')
|
||||
: t('billing.plansCommon.workflowExecution.priority')
|
||||
}
|
||||
tooltip={t('billing.plansCommon.workflowExecution.tooltip') as string}
|
||||
/>
|
||||
<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')}` })}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
planInfo.apiRateLimit === NUM_INFINITE
|
||||
? t('billing.plansCommon.unlimitedApiRate')
|
||||
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}/${t('billing.plansCommon.month')}`
|
||||
}
|
||||
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
/>
|
||||
<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 grow text-text-secondary'>{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)
|
||||
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { type BasicPlan, Plan, SelfHostedPlan, type UsagePlanInfo } from '../../type'
|
||||
import CloudPlanItem from './cloud-plan-item'
|
||||
import type { PlanRange } from '../plan-switcher/plan-range-switcher'
|
||||
import SelfHostedPlanItem from './self-hosted-plan-item'
|
||||
|
||||
type PlansProps = {
|
||||
plan: {
|
||||
type: Plan
|
||||
usage: UsagePlanInfo
|
||||
total: UsagePlanInfo
|
||||
}
|
||||
currentPlan: string
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const Plans = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
canPay,
|
||||
}: PlansProps) => {
|
||||
const currentPlanType: BasicPlan = plan.type === Plan.enterprise ? Plan.team : plan.type
|
||||
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' && (
|
||||
<>
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.sandbox}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.professional}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.team}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
currentPlan === 'self' && <>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.community}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.premium}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.enterprise}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plans
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import { Theme } from '@/types/app'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[SelfHostedPlan.community]: 'text-text-primary bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover',
|
||||
[SelfHostedPlan.premium]: 'text-background-default bg-saas-background-inverted hover:bg-saas-background-inverted-hover',
|
||||
[SelfHostedPlan.enterprise]: 'text-text-primary-on-surface bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover',
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: SelfHostedPlan
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { theme } = useTheme()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const AwsMarketplace = useMemo(() => {
|
||||
return theme === Theme.light ? AwsMarketplaceLight : AwsMarketplaceDark
|
||||
}, [theme])
|
||||
|
||||
return (
|
||||
<button type="button"
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan],
|
||||
isPremiumPlan && 'py-2',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<div className='flex grow items-center gap-x-2'>
|
||||
<span>{t(`${i18nPrefix}.btnText`)}</span>
|
||||
{isPremiumPlan && (
|
||||
<span className='pb-px pt-[7px]'>
|
||||
<AwsMarketplace className='h-6' />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowRightLine className='size-5 shrink-0' />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Button from './button'
|
||||
import List from './list'
|
||||
import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
|
||||
import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
|
||||
|
||||
const STYLE_MAP = {
|
||||
[SelfHostedPlan.community]: {
|
||||
icon: <Community />,
|
||||
bg: '',
|
||||
noise: null,
|
||||
},
|
||||
[SelfHostedPlan.premium]: {
|
||||
icon: <Premium />,
|
||||
bg: 'bg-billing-plan-card-premium-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<PremiumNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
[SelfHostedPlan.enterprise]: {
|
||||
icon: <Enterprise />,
|
||||
bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<EnterpriseNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
type SelfHostedPlanItemProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
|
||||
plan,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === SelfHostedPlan.community
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const isEnterprisePlan = plan === SelfHostedPlan.enterprise
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const handleGetPayUrl = useCallback(() => {
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (isFreePlan) {
|
||||
window.location.href = getStartedWithCommunityUrl
|
||||
return
|
||||
}
|
||||
if (isPremiumPlan) {
|
||||
window.location.href = getWithPremiumUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (isEnterprisePlan)
|
||||
window.location.href = contactSalesUrl
|
||||
}, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-1 flex-col overflow-hidden'>
|
||||
<div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
|
||||
{/* Noise Effect */}
|
||||
{STYLE_MAP[plan].noise}
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className=' flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{STYLE_MAP[plan].icon}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
<div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
<div className='title-4xl-semi-bold shrink-0 text-text-primary'>{t(`${i18nPrefix}.price`)}</div>
|
||||
{!isFreePlan && (
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.priceTip`)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
{isPremiumPlan && (
|
||||
<div className='flex grow flex-col justify-end gap-y-2 p-6 pt-0'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<Azure />
|
||||
</div>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<GoogleCloud />
|
||||
</div>
|
||||
</div>
|
||||
<span className='system-xs-regular text-text-tertiary'>
|
||||
{t('billing.plans.premium.comingSoon')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(SelfHostedPlanItem)
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import type { SelfHostedPlan } from '@/app/components/billing/type'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import Item from './item'
|
||||
|
||||
type ListProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-[10px] p-6'>
|
||||
<div className='system-md-semibold text-text-secondary'>
|
||||
<Trans
|
||||
i18nKey={t(`${i18nPrefix}.includesTitle`)}
|
||||
components={{ highlight: <span className='text-text-warning'></span> }}
|
||||
/>
|
||||
</div>
|
||||
{features.map(feature =>
|
||||
<Item
|
||||
key={`${plan}-${feature}`}
|
||||
label={feature}
|
||||
/>,
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='py-px'>
|
||||
<RiCheckLine className='size-4 shrink-0 text-text-tertiary' />
|
||||
</div>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
Reference in New Issue
Block a user