feat: update pricing (#1749)

2023-12-13 16:41:40 +08:00
parent 5beb298e47
commit b5b20234e9
6 changed files with 95 additions and 12 deletions
--- a/web/app/components/billing/config.ts
+++ b/web/app/components/billing/config.ts
@@ -13,9 +13,11 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
    modelProviders: supportModelProviders,
    teamMembers: 1,
    buildApps: 10,
-    vectorSpace: 10,
+    vectorSpace: 5,
    documentProcessingPriority: Priority.standard,
    logHistory: 30,
+    messageRequest: 500,
+    annotatedResponse: 10,
  },
  professional: {
    level: 2,
@@ -26,6 +28,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
    vectorSpace: 200,
    documentProcessingPriority: Priority.priority,
    logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: 2000,
  },
  team: {
    level: 3,
@@ -36,6 +40,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
    vectorSpace: 1000,
    documentProcessingPriority: Priority.topPriority,
    logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: 5000,
  },
  enterprise: {
    level: 4,
@@ -46,6 +52,8 @@ export const ALL_PLANS: Record<Plan, PlanInfo> = {
    vectorSpace: NUM_INFINITE,
    documentProcessingPriority: Priority.topPriority,
    logHistory: NUM_INFINITE,
+    messageRequest: NUM_INFINITE,
+    annotatedResponse: NUM_INFINITE,
  },
 }

--- a/web/app/components/billing/pricing/plan-item.tsx
+++ b/web/app/components/billing/pricing/plan-item.tsx
@@ -6,7 +6,9 @@ import cn from 'classnames'
 import { Plan } from '../type'
 import { ALL_PLANS, NUM_INFINITE, contactSalesUrl } from '../config'
 import Toast from '../../base/toast'
+import TooltipPlus from '../../base/tooltip-plus'
 import { PlanRange } from './select-plan-range'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 import { useAppContext } from '@/context/app-context'
 import { fetchSubscriptionUrls } from '@/service/billing'

@@ -16,10 +18,21 @@ type Props = {
  planRange: PlanRange
 }

-const KeyValue = ({ label, value }: { label: string; value: string | number | JSX.Element }) => {
+const KeyValue = ({ label, value, tooltip }: { label: string; value: string | number | JSX.Element; tooltip?: string }) => {
  return (
    <div className='mt-3.5 leading-[125%] text-[13px] font-medium'>
-      <div className='text-gray-500'>{label}</div>
+      <div className='flex items-center text-gray-500 space-x-1'>
+        <div>{label}</div>
+        {tooltip && (
+          <TooltipPlus
+            popupContent={
+              <div className='w-[200px]'>{tooltip}</div>
+            }
+          >
+            <HelpCircle className='w-3 h-3 text-gray-400' />
+          </TooltipPlus>
+        )}
+      </div>
      <div className='mt-0.5 text-gray-900'>{value}</div>
    </div>
  )
@@ -84,7 +97,33 @@ const PlanItem: FC<Props> = ({
      case Plan.sandbox:
        return t('billing.plansCommon.supportItems.communityForums')
      case Plan.professional:
-        return t('billing.plansCommon.supportItems.emailSupport')
+        return (
+          <div>
+            <div>{t('billing.plansCommon.supportItems.emailSupport')}</div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div>+ {t('billing.plansCommon.supportItems.logoChange')}</div>
+              <div>{comingSoon}</div>
+            </div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div className='flex items-center'>
+                +
+                <div className='mr-0.5'>&nbsp;{t('billing.plansCommon.supportItems.ragAPIRequest')}</div>
+                <TooltipPlus
+                  popupContent={
+                    <div className='w-[200px]'>{t('billing.plansCommon.ragAPIRequestTooltip')}</div>
+                  }
+                >
+                  <HelpCircle className='w-3 h-3 text-gray-400' />
+                </TooltipPlus>
+              </div>
+              <div>{comingSoon}</div>
+            </div>
+            <div className='mt-3.5 flex items-center space-x-1'>
+              <div>+ {t('billing.plansCommon.supportItems.agentModel')}</div>
+              <div>{comingSoon}</div>
+            </div>
+          </div>
+        )
      case Plan.team:
        return (
          <div>
@@ -94,7 +133,7 @@ const PlanItem: FC<Props> = ({
              <div>{comingSoon}</div>
            </div>
            <div className='mt-3.5 flex items-center space-x-1'>
-              <div>+ {t('billing.plansCommon.supportItems.personalizedSupport')}</div>
+              <div>+ {t('billing.plansCommon.supportItems.SSOAuthentication')}</div>
              <div>{comingSoon}</div>
            </div>
          </div>
@@ -103,9 +142,6 @@ const PlanItem: FC<Props> = ({
        return (
          <div>
            <div>{t('billing.plansCommon.supportItems.personalizedSupport')}</div>
-            <div className='mt-3.5 flex items-center space-x-1'>
-              <div>+ {t('billing.plansCommon.supportItems.dedicatedAPISupport')}</div>
-            </div>
            <div className='mt-3.5 flex items-center space-x-1'>
              <div>+ {t('billing.plansCommon.supportItems.customIntegration')}</div>
            </div>
@@ -149,11 +185,11 @@ const PlanItem: FC<Props> = ({
    }
  }
  return (
-    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex flex-col min-w-[290px] w-[290px] h-[712px] rounded-xl')}>
+    <div className={cn(isMostPopularPlan ? 'bg-[#0086C9] p-0.5' : 'pt-7', 'flex flex-col min-w-[290px] w-[290px] rounded-xl')}>
      {isMostPopularPlan && (
        <div className='flex items-center h-7 justify-center leading-[12px] text-xs font-medium text-[#F5F8FF]'>{t('billing.plansCommon.mostPopular')}</div>
      )}
-      <div className={cn(style[plan].bg, 'grow px-6 pt-6 rounded-[10px]')}>
+      <div className={cn(style[plan].bg, 'grow px-6 py-6 rounded-[10px]')}>
        <div className={cn(style[plan].title, 'mb-1 leading-[125%] text-lg font-semibold')}>{t(`${i18nPrefix}.name`)}</div>
        <div className={cn(isFreePlan ? 'text-[#FB6514]' : 'text-gray-500', 'mb-4 h-8 leading-[125%] text-[13px] font-normal')}>{t(`${i18nPrefix}.description`)}</div>

@@ -201,11 +237,22 @@ const PlanItem: FC<Props> = ({
        <KeyValue
          label={t('billing.plansCommon.vectorSpace')}
          value={planInfo.vectorSpace === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : (planInfo.vectorSpace >= 1000 ? `${planInfo.vectorSpace / 1000}G` : `${planInfo.vectorSpace}MB`)}
+          tooltip={t('billing.plansCommon.vectorSpaceBillingTooltip') as string}
        />
        <KeyValue
          label={t('billing.plansCommon.documentProcessingPriority')}
          value={t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`) as string}
        />
+        <KeyValue
+          label={t('billing.plansCommon.messageRequest.title')}
+          value={planInfo.messageRequest === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.messageRequest} ${t('billing.plansCommon.messageRequest.unit')}`}
+          tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
+        />
+        <KeyValue
+          label={t('billing.plansCommon.annotatedResponse.title')}
+          value={planInfo.annotatedResponse === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.annotatedResponse}`}
+          tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
+        />
        <KeyValue
          label={t('billing.plansCommon.logsHistory')}
          value={planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}`}
--- a/web/app/components/billing/type.ts
+++ b/web/app/components/billing/type.ts
@@ -19,6 +19,8 @@ export type PlanInfo = {
  vectorSpace: number
  documentProcessingPriority: Priority
  logHistory: number
+  messageRequest: number
+  annotatedResponse: number
 }

 export type UsagePlanInfo = Pick<PlanInfo, 'vectorSpace' | 'buildApps' | 'teamMembers'>