From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/billing/plan/index.tsx | 170 ++++++++++++++++++++++++++------------------------------
1 files changed, 79 insertions(+), 91 deletions(-)
diff --git a/app/components/billing/plan/index.tsx b/app/components/billing/plan/index.tsx
index 7badb36..baf4110 100644
--- a/app/components/billing/plan/index.tsx
+++ b/app/components/billing/plan/index.tsx
@@ -2,28 +2,35 @@
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
-import { useRouter } from 'next/navigation'
-import {
- RiBook2Line,
- RiBox3Line,
- RiFileEditLine,
- RiGraduationCapLine,
- RiGroup3Line,
- RiGroupLine,
- RiSquareLine,
-} from '@remixicon/react'
-import { Plan, SelfHostedPlan } from '../type'
+import { Plan } from '../type'
import VectorSpaceInfo from '../usage-info/vector-space-info'
import AppsInfo from '../usage-info/apps-info'
import UpgradeBtn from '../upgrade-btn'
+import { User01 } from '../../base/icons/src/vender/line/users'
+import { MessageFastPlus } from '../../base/icons/src/vender/line/communication'
+import { FileUpload } from '../../base/icons/src/vender/line/files'
+import cn from '@/utils/classnames'
import { useProviderContext } from '@/context/provider-context'
-import { useAppContext } from '@/context/app-context'
-import Button from '@/app/components/base/button'
import UsageInfo from '@/app/components/billing/usage-info'
-import VerifyStateModal from '@/app/education-apply/verify-state-modal'
-import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
-import { useEducationVerify } from '@/service/use-education'
-import { useModalContextSelector } from '@/context/modal-context'
+
+const typeStyle = {
+ [Plan.sandbox]: {
+ textClassNames: 'text-gray-900',
+ bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #EAECF0',
+ },
+ [Plan.professional]: {
+ textClassNames: 'text-[#026AA2]',
+ bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0F2FE',
+ },
+ [Plan.team]: {
+ textClassNames: 'text-[#3538CD]',
+ bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #E0EAFF',
+ },
+ [Plan.enterprise]: {
+ textClassNames: 'text-[#DC6803]',
+ bg: 'linear-gradient(113deg, rgba(255, 255, 255, 0.51) 3.51%, rgba(255, 255, 255, 0.00) 111.71%), #FFEED3',
+ },
+}
type Props = {
loc: string
@@ -33,9 +40,7 @@
loc,
}) => {
const { t } = useTranslation()
- const router = useRouter()
- const { userProfile } = useAppContext()
- const { plan, enableEducationPlan, isEducationAccount } = useProviderContext()
+ const { plan } = useProviderContext()
const {
type,
} = plan
@@ -45,92 +50,75 @@
total,
} = plan
- const [showModal, setShowModal] = React.useState(false)
- const { mutateAsync } = useEducationVerify()
- const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
- const handleVerify = () => {
- mutateAsync().then((res) => {
- localStorage.removeItem(EDUCATION_VERIFYING_LOCALSTORAGE_ITEM)
- router.push(`/education-apply?token=${res.token}`)
- setShowAccountSettingModal(null)
- }).catch(() => {
- setShowModal(true)
- })
- }
+ const isInHeader = loc === 'header'
+
return (
- <div className='rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
- <div className='p-6 pb-2'>
- {plan.type === Plan.sandbox && (
- <RiBox3Line className='h-7 w-7 text-text-primary'/>
- )}
- {plan.type === Plan.professional && (
- <RiSquareLine className='h-7 w-7 rotate-90 text-util-colors-blue-brand-blue-brand-600'/>
- )}
- {plan.type === Plan.team && (
- <RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
- )}
- {(plan.type as any) === SelfHostedPlan.enterprise && (
- <RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
- )}
- <div className='mt-1 flex items-center'>
- <div className='grow'>
- <div className='mb-1 flex items-center gap-1'>
- <div className='system-md-semibold-uppercase text-text-primary'>{t(`billing.plans.${type}.name`)}</div>
- <div className='system-2xs-medium-uppercase rounded-[5px] border border-divider-deep px-1 py-0.5 text-text-tertiary'>{t('billing.currentPlan')}</div>
- </div>
- <div className='system-xs-regular text-util-colors-gray-gray-600'>{t(`billing.plans.${type}.for`)}</div>
+ <div
+ className='rounded-xl border border-white select-none'
+ style={{
+ background: typeStyle[type].bg,
+ boxShadow: '5px 7px 12px 0px rgba(0, 0, 0, 0.06)',
+ }}
+ >
+ <div className='flex justify-between px-6 py-5 items-center'>
+ <div>
+ <div
+ className='leading-[18px] text-xs font-normal opacity-70'
+ style={{
+ color: 'rgba(0, 0, 0, 0.64)',
+ }}
+ >
+ {t('billing.currentPlan')}
</div>
- <div className='flex shrink-0 items-center gap-1'>
- {enableEducationPlan && !isEducationAccount && (
- <Button variant='ghost' onClick={handleVerify}>
- <RiGraduationCapLine className='mr-1 h-4 w-4'/>
- {t('education.toVerified')}
- </Button>
- )}
- {(plan.type as any) !== SelfHostedPlan.enterprise && (
- <UpgradeBtn
- className='shrink-0'
- isPlain={type === Plan.team}
- isShort
- loc={loc}
- />
- )}
+ <div className={cn(typeStyle[type].textClassNames, 'leading-[125%] text-lg font-semibold uppercase')}>
+ {t(`billing.plans.${type}.name`)}
</div>
</div>
+ {(!isInHeader || (isInHeader && type !== Plan.sandbox)) && (
+ <UpgradeBtn
+ className='flex-shrink-0'
+ isPlain={type !== Plan.sandbox}
+ loc={loc}
+ />
+ )}
</div>
+
{/* Plan detail */}
- <div className='grid grid-cols-3 content-start gap-1 p-2'>
- <AppsInfo />
+ <div className='rounded-xl bg-white px-6 py-3'>
+
<UsageInfo
- Icon={RiGroupLine}
- name={t('billing.usagePage.teamMembers')}
+ className='py-3'
+ Icon={User01}
+ name={t('billing.plansCommon.teamMembers')}
usage={usage.teamMembers}
total={total.teamMembers}
/>
+ <AppsInfo className='py-3' />
+ <VectorSpaceInfo className='py-3' />
<UsageInfo
- Icon={RiBook2Line}
- name={t('billing.usagePage.documentsUploadQuota')}
- usage={usage.documentsUploadQuota}
- total={total.documentsUploadQuota}
- />
- <VectorSpaceInfo />
- <UsageInfo
- Icon={RiFileEditLine}
- name={t('billing.usagePage.annotationQuota')}
+ className='py-3'
+ Icon={MessageFastPlus}
+ name={t('billing.plansCommon.annotationQuota')}
usage={usage.annotatedResponse}
total={total.annotatedResponse}
/>
-
+ <UsageInfo
+ className='py-3'
+ Icon={FileUpload}
+ name={t('billing.plansCommon.documentsUploadQuota')}
+ usage={usage.documentsUploadQuota}
+ total={total.documentsUploadQuota}
+ />
+ {isInHeader && type === Plan.sandbox && (
+ <UpgradeBtn
+ className='flex-shrink-0 my-3'
+ isFull
+ size='lg'
+ isPlain={type !== Plan.sandbox}
+ loc={loc}
+ />
+ )}
</div>
- <VerifyStateModal
- showLink
- email={userProfile.email}
- isShow={showModal}
- title={t('education.rejectTitle')}
- content={t('education.rejectContent')}
- onConfirm={() => setShowModal(false)}
- onCancel={() => setShowModal(false)}
- />
</div>
)
}
--
Gitblit v1.8.0