dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
+++ b/dify/web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx
@@ -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)
--- a/dify/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
+++ b/dify/web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx
@@ -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)
--- a/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.tsx
+++ b/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/index.tsx
@@ -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)
--- a/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.tsx
+++ b/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.tsx
@@ -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)
--- a/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
+++ b/dify/web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx
@@ -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)