jyapayne/dify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: SaaS price plan frontend (#1683)

Browse source 
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
This commit is contained in:
Joel 2023-12-03 22:10:16 +08:00 • committed by GitHub
commit 75a6122173
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
73 changed files with 2919 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web/app/components/header/account-setting/members-page/index.tsx
View file

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