feat: SaaS price plan frontend (#1683)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
2023-12-03 22:10:16 +08:00
parent 053102f433
commit 75a6122173
73 changed files with 2919 additions and 266 deletions
--- a/web/app/components/header/account-setting/index.tsx
+++ b/web/app/components/header/account-setting/index.tsx
@@ -2,6 +2,8 @@
 import { useTranslation } from 'react-i18next'
 import { useEffect, useRef, useState } from 'react'
 import cn from 'classnames'
+import { GoldCoin } from '../../base/icons/src/vender/solid/FinanceAndECommerce'
+import { GoldCoin as GoldCoinOutLine } from '../../base/icons/src/vender/line/financeAndECommerce'
 import AccountPage from './account-page'
 import MembersPage from './members-page'
 import IntegrationsPage from './Integrations-page'
@@ -11,6 +13,7 @@ import ApiBasedExtensionPage from './api-based-extension-page'
 import DataSourcePage from './data-source-page'
 import ModelPage from './model-page'
 import s from './index.module.css'
+import BillingPage from '@/app/components/billing/billing-page'
 import Modal from '@/app/components/base/modal'
 import {
  Database03,
@@ -24,6 +27,7 @@ import { Globe01 } from '@/app/components/base/icons/src/vender/line/mapsAndTrav
 import { AtSign, XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useProviderContext } from '@/context/provider-context'

 const iconClassName = `
  w-4 h-4 ml-3 mr-2
@@ -37,12 +41,63 @@ type IAccountSettingProps = {
  onCancel: () => void
  activeTab?: string
 }
+
+type GroupItem = {
+  key: string
+  name: string
+  icon: JSX.Element
+  activeIcon: JSX.Element
+}
+
 export default function AccountSetting({
  onCancel,
  activeTab = 'account',
 }: IAccountSettingProps) {
  const [activeMenu, setActiveMenu] = useState(activeTab)
  const { t } = useTranslation()
+  const { enableBilling } = useProviderContext()
+
+  const workplaceGroupItems = (() => {
+    return [
+      {
+        key: 'provider',
+        name: t('common.settings.provider'),
+        icon: <CubeOutline className={iconClassName} />,
+        activeIcon: <CubeOutline className={iconClassName} />,
+      },
+      {
+        key: 'members',
+        name: t('common.settings.members'),
+        icon: <Users01 className={iconClassName} />,
+        activeIcon: <Users01Solid className={iconClassName} />,
+      },
+      {
+        // Use key false to hide this item
+        key: enableBilling ? 'billing' : false,
+        name: t('common.settings.billing'),
+        icon: <GoldCoinOutLine className={iconClassName} />,
+        activeIcon: <GoldCoin className={iconClassName} />,
+      },
+      {
+        key: 'data-source',
+        name: t('common.settings.dataSource'),
+        icon: <Database03 className={iconClassName} />,
+        activeIcon: <Database03Solid className={iconClassName} />,
+      },
+      {
+        key: 'plugin',
+        name: t('common.settings.plugin'),
+        icon: <PuzzlePiece01 className={iconClassName} />,
+        activeIcon: <PuzzlePiece01Solid className={iconClassName} />,
+      },
+      {
+        key: 'api-based-extension',
+        name: t('common.settings.apiBasedExtension'),
+        icon: <Webhooks className={iconClassName} />,
+        activeIcon: <Webhooks className={iconClassName} />,
+      },
+    ].filter(item => !!item.key) as GroupItem[]
+  })()

  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
@@ -51,38 +106,7 @@ export default function AccountSetting({
    {
      key: 'workspace-group',
      name: t('common.settings.workplaceGroup'),
-      items: [
-        {
-          key: 'members',
-          name: t('common.settings.members'),
-          icon: <Users01 className={iconClassName} />,
-          activeIcon: <Users01Solid className={iconClassName} />,
-        },
-        {
-          key: 'provider',
-          name: t('common.settings.provider'),
-          icon: <CubeOutline className={iconClassName} />,
-          activeIcon: <CubeOutline className={iconClassName} />,
-        },
-        {
-          key: 'data-source',
-          name: t('common.settings.dataSource'),
-          icon: <Database03 className={iconClassName} />,
-          activeIcon: <Database03Solid className={iconClassName} />,
-        },
-        {
-          key: 'plugin',
-          name: t('common.settings.plugin'),
-          icon: <PuzzlePiece01 className={iconClassName} />,
-          activeIcon: <PuzzlePiece01Solid className={iconClassName} />,
-        },
-        {
-          key: 'api-based-extension',
-          name: t('common.settings.apiBasedExtension'),
-          icon: <Webhooks className={iconClassName} />,
-          activeIcon: <Webhooks className={iconClassName} />,
-        },
-      ],
+      items: workplaceGroupItems,
    },
    {
      key: 'account-group',
@@ -175,6 +199,7 @@ export default function AccountSetting({
          <div className='px-4 sm:px-8 pt-2'>
            {activeMenu === 'account' && <AccountPage />}
            {activeMenu === 'members' && <MembersPage />}
+            {activeMenu === 'billing' && <BillingPage />}
            {activeMenu === 'integrations' && <IntegrationsPage />}
            {activeMenu === 'language' && <LanguagePage />}
            {activeMenu === 'provider' && <ModelPage />}
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@@ -15,6 +15,11 @@ import I18n from '@/context/i18n'
 import { useAppContext } from '@/context/app-context'
 import Avatar from '@/app/components/base/avatar'
 import type { InvitationResult } from '@/models/common'
+import LogoEmbededChatHeader from '@/app/components/base/logo/logo-embeded-chat-header'
+import { useProviderContext } from '@/context/provider-context'
+import { Plan } from '@/app/components/billing/type'
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
+import { NUM_INFINITE } from '@/app/components/billing/config'

 dayjs.extend(relativeTime)

@@ -33,20 +38,46 @@ const MembersPage = () => {
  const [invitedModalVisible, setInvitedModalVisible] = useState(false)
  const accounts = data?.accounts || []
  const owner = accounts.filter(account => account.role === 'owner')?.[0]?.email === userProfile.email
+  const { plan, enableBilling } = useProviderContext()
+  const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
+  const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && accounts.length >= plan.total.teamMembers

  return (
    <>
      <div>
        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+          <LogoEmbededChatHeader className='!w-10 !h-10' />
          <div className='grow mx-2'>
            <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
-            <div className='text-xs text-gray-500'>{t('common.userProfile.workspace')}</div>
+            {enableBilling && (
+              <div className='text-xs text-gray-500'>
+                {isNotUnlimitedMemberPlan
+                  ? (
+                    <div className='flex space-x-1'>
+                      <div>{t('billing.plansCommon.member')}{locale === 'en' && accounts.length > 1 && 's'}</div>
+                      <div className='text-gray-700'>{accounts.length}</div>
+                      <div>/</div>
+                      <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
+                    </div>
+                  )
+                  : (
+                    <div className='flex space-x-1'>
+                      <div>{accounts.length}</div>
+                      <div>{t('billing.plansCommon.memberAfter')}{locale === 'en' && accounts.length > 1 && 's'}</div>
+                    </div>
+                  )}
+              </div>
+            )}
+
          </div>
+          {isMemberFull && (
+            <UpgradeBtn className='mr-2' />
+          )}
          <div className={
            `shrink-0 flex items-center py-[7px] px-3 border-[0.5px] border-gray-200
            text-[13px] font-medium text-primary-600 bg-white
-            shadow-xs rounded-lg ${isCurrentWorkspaceManager ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
-          } onClick={() => isCurrentWorkspaceManager && setInviteModalVisible(true)}>
+            shadow-xs rounded-lg ${(isCurrentWorkspaceManager && !isMemberFull) ? 'cursor-pointer' : 'grayscale opacity-50 cursor-default'}`
+          } onClick={() => (isCurrentWorkspaceManager && !isMemberFull) && setInviteModalVisible(true)}>
            <UserPlusIcon className='w-4 h-4 mr-2 ' />
            {t('common.members.invite')}
          </div>
--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@@ -1,22 +1,22 @@
 'use client'
-
+import { useEffect, useRef, useState } from 'react'
 import Link from 'next/link'
+import { useBoolean, useClickAway } from 'ahooks'
 import { useSelectedLayoutSegment } from 'next/navigation'
-import classNames from 'classnames'
-import { useEffect } from 'react'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { useBoolean } from 'ahooks'
+import HeaderBillingBtn from '../billing/header-billing-btn'
 import AccountDropdown from './account-dropdown'
 import AppNav from './app-nav'
 import DatasetNav from './dataset-nav'
 import EnvNav from './env-nav'
 import ExploreNav from './explore-nav'
 import GithubStar from './github-star'
-import s from './index.module.css'
 import { WorkspaceProvider } from '@/context/workspace-context'
 import { useAppContext } from '@/context/app-context'
 import LogoSite from '@/app/components/base/logo/logo-site'
+import PlanComp from '@/app/components/billing/plan'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
+import { useProviderContext } from '@/context/provider-context'

 const navClassName = `
  flex items-center relative mr-0 sm:mr-3 px-3 h-9 rounded-xl
@@ -25,58 +25,72 @@ const navClassName = `
 `

 const Header = () => {
-  const selectedSegment = useSelectedLayoutSegment()
  const { isCurrentWorkspaceManager, langeniusVersionInfo } = useAppContext()
+  const [showUpgradePanel, setShowUpgradePanel] = useState(false)
+  const upgradeBtnRef = useRef<HTMLElement>(null)
+  useClickAway(() => {
+    setShowUpgradePanel(false)
+  }, upgradeBtnRef)
+
+  const selectedSegment = useSelectedLayoutSegment()
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
  const [isShowNavMenu, { toggle, setFalse: hideNavMenu }] = useBoolean(false)
+  const { enableBilling } = useProviderContext()

  useEffect(() => {
    hideNavMenu()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selectedSegment])
-
  return (
-    <>
-      <div className={classNames(
-        s[`header-${langeniusVersionInfo.current_env}`],
-        'flex flex-1 items-center justify-between px-4',
-      )}>
+    <div className='flex flex-1 items-center justify-between px-4'>
+      <div className='flex items-center'>
+        {isMobile && <div
+          className='flex items-center justify-center h-8 w-8 cursor-pointer'
+          onClick={toggle}
+        >
+          <Bars3Icon className="h-4 w-4 text-gray-500" />
+        </div>}
+        {!isMobile && <>
+          <Link href="/apps" className='flex items-center mr-4'>
+            <LogoSite />
+          </Link>
+          <GithubStar />
+        </>}
+      </div>
+      {isMobile && (
+        <div className='flex'>
+          <Link href="/apps" className='flex items-center mr-4'>
+            <LogoSite />
+          </Link>
+          <GithubStar />
+        </div>
+      )}
+      {!isMobile && (
        <div className='flex items-center'>
-          {isMobile && <div
-            className='flex items-center justify-center h-8 w-8 cursor-pointer'
-            onClick={toggle}
-          >
-            <Bars3Icon className="h-4 w-4 text-gray-500" />
-          </div>}
-          {!isMobile && <>
-            <Link href="/apps" className='flex items-center mr-4'>
-              <LogoSite />
-            </Link>
-            <GithubStar />
-          </>}
+          <ExploreNav className={navClassName} />
+          <AppNav />
+          {isCurrentWorkspaceManager && <DatasetNav />}
        </div>
-        {isMobile && (
-          <div className='flex'>
-            <Link href="/apps" className='flex items-center mr-4'>
-              <LogoSite />
-            </Link>
-            <GithubStar />
+      )}
+      <div className='flex items-center flex-shrink-0'>
+        <EnvNav />
+        {enableBilling && (
+          <div className='mr-3 select-none'>
+            <HeaderBillingBtn onClick={() => setShowUpgradePanel(true)} />
+            {showUpgradePanel && (
+              <div
+                ref={upgradeBtnRef as any}
+                className='fixed z-10 top-12 right-1 w-[360px]'
+              >
+                <PlanComp loc='header' />
+              </div>
+            )}
          </div>
        )}
-        {!isMobile && (
-          <div className='flex items-center'>
-            <ExploreNav className={navClassName} />
-            <AppNav />
-            {isCurrentWorkspaceManager && <DatasetNav />}
-          </div>
-        )}
-        <div className='flex items-center flex-shrink-0'>
-          <EnvNav />
-          <WorkspaceProvider>
-            <AccountDropdown isMobile={isMobile} />
-          </WorkspaceProvider>
-        </div>
+        <WorkspaceProvider>
+          <AccountDropdown isMobile={isMobile}/>
+        </WorkspaceProvider>
      </div>
      {(isMobile && isShowNavMenu) && (
        <div className='w-full flex flex-col p-2 gap-y-1'>
@@ -85,7 +99,7 @@ const Header = () => {
          {isCurrentWorkspaceManager && <DatasetNav />}
        </div>
      )}
-    </>
+    </div>
  )
 }
 export default Header