feat: refactor billing plans components to improve structure and add self-hosted plan item button; update pricing layout and translations

web/app/components/billing/pricing/index.tsx

@@ -39,7 +39,7 @@ const Pricing: FC<PricingProps> = ({
       className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
       onClick={e => e.stopPropagation()}
     >
-      <div className='relative grid min-h-[1140px] min-w-[1200px] grid-rows-[1fr_auto_auto_1fr]'>
+      <div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr]'>
         <Header onClose={onCancel} />
         <PlanSwitcher
           currentCategory={currentCategory}

web/app/components/billing/pricing/plan-switcher/index.tsx

@@ -22,6 +22,7 @@ const PlanSwitcher: FC<PlanSwitcherProps> = ({
   onChangePlanRange,
 }) => {
   const { t } = useTranslation()
+  const isCloud = currentCategory === 'cloud'
 
   const tabs = {
     cloud: {
@@ -52,10 +53,12 @@ const PlanSwitcher: FC<PlanSwitcherProps> = ({
             onClick={onChangeCategory}
           />
         </div>
-        <PlanRangeSwitcher
-          value={currentPlanRange}
-          onChange={onChangePlanRange}
-        />
+        {isCloud && (
+          <PlanRangeSwitcher
+            value={currentPlanRange}
+            onChange={onChangePlanRange}
+          />
+        )}
       </div>
     </div>
   )

web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx

@@ -102,8 +102,8 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
             <div className='system-sm-regular text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
           </div>
         </div>
+        {/* Price */}
         <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>
           )}
@@ -111,7 +111,7 @@ const CloudPlanItem: FC<CloudPlanItemProps> = ({
             <>
               {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'>
+              <span className='system-md-regular pb-0.5 text-text-tertiary'>
                 {t('billing.plansCommon.priceTip')}
                 {t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
               </span>

web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.tsx

@@ -12,7 +12,7 @@ const Item = ({
 }: ItemProps) => {
   return (
     <div className='flex items-center'>
-      <span className='system-sm-regular ml-2 mr-0.5 grow text-text-primary'>{label}</span>
+      <span className='system-sm-regular ml-2 mr-0.5 grow text-text-secondary'>{label}</span>
       {tooltip && (
         <Tooltip
           content={tooltip}

web/app/components/billing/pricing/plans/index.tsx

@@ -54,18 +54,14 @@ const Plans = ({
           currentPlan === 'self' && <>
             <SelfHostedPlanItem
               plan={SelfHostedPlan.community}
-              planRange={planRange}
-              canPay={canPay}
             />
+            <Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
             <SelfHostedPlanItem
               plan={SelfHostedPlan.premium}
-              planRange={planRange}
-              canPay={canPay}
             />
+            <Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
             <SelfHostedPlanItem
               plan={SelfHostedPlan.enterprise}
-              planRange={planRange}
-              canPay={canPay}
             />
           </>
         }

web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { SelfHostedPlan } from '../../../type'
+import { AwsMarketplace } from '@/app/components/base/icons/src/public/billing'
+import { RiArrowRightLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+
+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 i18nPrefix = `billing.plans.${plan}`
+  const isPremiumPlan = plan === SelfHostedPlan.premium
+
+  return (
+    <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)

web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx

@@ -1,91 +1,55 @@
 'use client'
-import type { FC, ReactNode } from 'react'
-import React from 'react'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiArrowRightUpLine, RiBrain2Line, RiCheckLine, RiQuestionLine } from '@remixicon/react'
 import { SelfHostedPlan } from '../../../type'
 import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
 import Toast from '../../../../base/toast'
-import Tooltip from '../../../../base/tooltip'
-import { Asterisk, AwsMarketplace, Azure, Buildings, Diamond, GoogleCloud } from '../../../../base/icons/src/public/billing'
-import type { PlanRange } from '../../plan-switcher/plan-range-switcher'
 import cn from '@/utils/classnames'
 import { useAppContext } from '@/context/app-context'
-
-type Props = {
-  plan: SelfHostedPlan
-  planRange: PlanRange
-  canPay: boolean
-}
-
-const KeyValue = ({ label, tooltip, textColor, tooltipIconColor }: { icon: ReactNode; label: string; tooltip?: string; textColor: string; tooltipIconColor: string }) => {
-  return (
-    <div className={cn('flex', textColor)}>
-      <div className='flex size-4 items-center justify-center'>
-        <RiCheckLine />
-      </div>
-      <div className={cn('system-sm-regular ml-2 mr-0.5', textColor)}>{label}</div>
-      {tooltip && (
-        <Tooltip
-          asChild
-          popupContent={tooltip}
-          popupClassName='w-[200px]'
-        >
-          <div className='flex size-4 items-center justify-center'>
-            <RiQuestionLine className={cn(tooltipIconColor)} />
-          </div>
-        </Tooltip>
-      )}
-    </div>
-  )
-}
+import Button from './button'
+import List from './list'
+import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
 
 const style = {
   [SelfHostedPlan.community]: {
-    icon: <Asterisk className='size-7 text-text-primary' />,
-    title: 'text-text-primary',
-    price: 'text-text-primary',
-    priceTip: 'text-text-tertiary',
-    description: 'text-util-colors-gray-gray-600',
-    bg: 'border-effects-highlight-lightmode-off bg-background-section-burn',
+    icon: <div className='size-[60px] bg-black' />,
+    bg: '',
     btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary',
     values: 'text-text-secondary',
     tooltipIconColor: 'text-text-tertiary',
   },
   [SelfHostedPlan.premium]: {
-    icon: <Diamond className='size-7 text-text-warning' />,
-    title: 'text-text-primary',
-    price: 'text-text-primary',
-    priceTip: 'text-text-tertiary',
-    description: 'text-text-warning',
-    bg: 'border-effects-highlight bg-background-section-burn',
+    icon: <div className='size-[60px] bg-black' />,
+    bg: '',
     btnStyle: 'bg-third-party-aws hover:bg-third-party-aws-hover border border-components-button-primary-border text-text-primary-on-surface shadow-xs',
     values: 'text-text-secondary',
     tooltipIconColor: 'text-text-tertiary',
   },
   [SelfHostedPlan.enterprise]: {
-    icon: <Buildings className='size-7 text-text-primary-on-surface' />,
-    title: 'text-text-primary-on-surface',
-    price: 'text-text-primary-on-surface',
-    priceTip: 'text-text-primary-on-surface',
-    description: 'text-text-primary-on-surface',
-    bg: 'border-effects-highlight bg-[#155AEF] text-text-primary-on-surface',
+    icon: <div className='size-[60px] bg-black' />,
+    bg: '',
     btnStyle: 'bg-white/96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
     values: 'text-text-primary-on-surface',
     tooltipIconColor: 'text-text-primary-on-surface',
   },
 }
-const SelfHostedPlanItem: FC<Props> = ({
+
+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 i18nPrefix = `billing.plans.${plan}`
   const isEnterprisePlan = plan === SelfHostedPlan.enterprise
   const { isCurrentWorkspaceManager } = useAppContext()
-  const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
-  const handleGetPayUrl = () => {
+
+  const handleGetPayUrl = useCallback(() => {
     // Only workspace manager can buy plan
     if (!isCurrentWorkspaceManager) {
       Toast.notify({
@@ -106,70 +70,51 @@ const SelfHostedPlanItem: FC<Props> = ({
 
     if (isEnterprisePlan)
       window.location.href = contactSalesUrl
-  }
-  return (
-    <div className={cn(`relative flex w-[374px] flex-col overflow-hidden rounded-2xl
-      border-[0.5px] hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]`, style[plan].bg)}>
-      <div>
-        <div className={cn(isEnterprisePlan ? 'z-1 absolute bottom-0 left-0 right-0 top-0 bg-price-enterprise-background' : '')} >
-        </div>
-        {isEnterprisePlan && <div className='z-15 absolute left-[-90px] top-[-104px] size-[341px] rounded-full bg-[#09328c] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
-        {isEnterprisePlan && <div className='z-15 absolute bottom-[-72px] right-[-40px] size-[341px] rounded-full bg-[#e2eafb] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
-      </div>
-      <div className='relative z-10 min-h-[559px] w-full p-6'>
-        <div className=' flex min-h-[108px] flex-col gap-y-1'>
-          {style[plan].icon}
-          <div className='flex items-center'>
-            <div className={cn('system-md-semibold uppercase leading-[125%]', style[plan].title)}>{t(`${i18nPrefix}.name`)}</div>
-          </div>
-          <div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
-        </div>
-        <div className='my-3'>
-          <div className='flex items-end'>
-            <div className={cn('shrink-0 text-[28px] font-bold leading-[125%]', style[plan].price)}>{t(`${i18nPrefix}.price`)}</div>
-            {!isFreePlan
-              && <span className={cn('ml-2 py-1 text-[14px] font-normal leading-normal', style[plan].priceTip)}>
-                {t(`${i18nPrefix}.priceTip`)}
-              </span>}
-          </div>
-        </div>
+  }, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
 
-        <div
-          className={cn('system-md-semibold flex h-[44px] cursor-pointer items-center justify-center rounded-full px-5 py-3',
-            style[plan].btnStyle)}
-          onClick={handleGetPayUrl}
-        >
-          {t(`${i18nPrefix}.btnText`)}
-          {isPremiumPlan
-            && <>
-              <div className='mx-1 pt-[6px]'>
-                <AwsMarketplace className='h-6' />
-              </div>
-              <RiArrowRightUpLine className='size-4' />
-            </>}
+  return (
+    <div className={cn(
+      'flex flex-1 flex-col',
+      style[plan].bg,
+    )}>
+      <div className='flex flex-col px-5 py-4'>
+        <div className=' flex flex-col gap-y-6 px-1 pt-10'>
+          {style[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>
-        <div className={cn('system-sm-semibold mb-2 mt-6', style[plan].values)}>{t(`${i18nPrefix}.includesTitle`)}</div>
-        <div className='flex flex-col gap-y-3'>
-          {features.map(v =>
-            <KeyValue key={`${plan}-${v}`}
-              textColor={style[plan].values}
-              tooltipIconColor={style[plan].tooltipIconColor}
-              icon={<RiBrain2Line />}
-              label={v}
-            />)}
+        {/* Price */}
+        <div className='mx-1 mb-8 mt-4 flex items-end gap-x-2'>
+          <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>
-        {isPremiumPlan && <div className='mt-[68px]'>
+        <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'>
+            <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'>
+            <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={cn('system-xs-regular mt-2', style[plan].tooltipIconColor)}>{t('billing.plans.premium.comingSoon')}</span>
-        </div>}
-      </div>
+          <span className='system-xs-regular text-text-tertiary'>
+            {t('billing.plans.premium.comingSoon')}
+          </span>
+        </div>
+      )}
     </div>
   )
 }

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import type { SelfHostedPlan } from '@/app/components/billing/type'
+import { 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'>
+        {t(`${i18nPrefix}.includesTitle`)}
+      </div>
+      {features.map(feature =>
+        <Item
+          key={`${plan}-${feature}`}
+          label={feature}
+        />,
+      )}
+    </div>
+  )
+}
+
+export default React.memo(List)

web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx

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

web/i18n/en-US/billing.ts

@@ -126,9 +126,9 @@ const translation = {
     community: {
       name: 'Community',
       for: 'For Individual Users, Small Teams, or Non-commercial Projects',
-      description: 'For Individual Users, Small Teams, or Non-commercial Projects',
+      description: 'For open-source enthusiasts, individual developers, and non-commercial projects',
       price: 'Free',
-      btnText: 'Get Started with Community',
+      btnText: 'Get Started',
       includesTitle: 'Free Features:',
       features: [
         'All Core Features Released Under the Public Repository',
@@ -139,10 +139,10 @@ const translation = {
     premium: {
       name: 'Premium',
       for: 'For Mid-sized Organizations and Teams',
-      description: 'For Mid-sized Organizations and Teams',
+      description: 'For Mid-sized organizations needing deployment flexibility and enhanced support',
       price: 'Scalable',
       priceTip: 'Based on Cloud Marketplace',
-      btnText: 'Get Premium in',
+      btnText: 'Get Premium on',
       includesTitle: 'Everything from Community, plus:',
       comingSoon: 'Microsoft Azure & Google Cloud Support Coming Soon',
       features: [
@@ -155,7 +155,7 @@ const translation = {
     enterprise: {
       name: 'Enterprise',
       for: 'For large-sized Teams',
-      description: 'For Enterprise Require Organization-wide Security, Compliance, Scalability, Control and More Advanced Features',
+      description: 'For enterprise requiring organization-grade security, compliance, scalability, control and custom solutions',
       price: 'Custom',
       priceTip: 'Annual Billing Only',
       btnText: 'Contact Sales',

web/i18n/zh-Hans/billing.ts

@@ -125,7 +125,7 @@ const translation = {
     community: {
       name: 'Community',
       for: '适用于个人用户、小型团队或非商业项目',
-      description: '适用于个人用户、小型团队或非商业项目',
+      description: '适用于开源爱好者、个人开发者以及非商业项目',
       price: '免费',
       btnText: '开始使用',
       includesTitle: '免费功能：',
@@ -138,7 +138,7 @@ const translation = {
     premium: {
       name: 'Premium',
       for: '对于中型组织和团队',
-      description: '对于中型组织和团队',
+      description: '适合需要部署灵活性和增强支持的中型组织和团队',
       price: '可扩展',
       priceTip: '基于云市场',
       btnText: '获得 Premium 版',
@@ -154,7 +154,7 @@ const translation = {
     enterprise: {
       name: 'Enterprise',
       for: '适合大人员规模的团队',
-      description: '对于需要组织范围内的安全性、合规性、可扩展性、控制和更高级功能的企业',
+      description: '适合需要组织级安全性、合规性、可扩展性、控制和定制解决方案的企业',
       price: '定制',
       priceTip: '仅按年计费',
       btnText: '联系销售',