diff --git a/packages/global/support/wallet/sub/constants.ts b/packages/global/support/wallet/sub/constants.ts index 2345c417a..8f43279c9 100644 --- a/packages/global/support/wallet/sub/constants.ts +++ b/packages/global/support/wallet/sub/constants.ts @@ -53,17 +53,17 @@ export const standardSubLevelMap = { }, [StandardSubLevelEnum.experience]: { label: i18nT('common:support.wallet.subscription.standardSubLevel.experience'), - desc: '', + desc: i18nT('common:support.wallet.subscription.standardSubLevel.experience_desc'), weight: 2 }, [StandardSubLevelEnum.team]: { label: i18nT('common:support.wallet.subscription.standardSubLevel.team'), - desc: '', + desc: i18nT('common:support.wallet.subscription.standardSubLevel.team_desc'), weight: 3 }, [StandardSubLevelEnum.enterprise]: { label: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise'), - desc: '', + desc: i18nT('common:support.wallet.subscription.standardSubLevel.enterprise_desc'), weight: 4 }, [StandardSubLevelEnum.custom]: { @@ -72,3 +72,15 @@ export const standardSubLevelMap = { weight: 5 } }; + +export enum PackageChangeStatusEnum { + buy = 'buy', + renewal = 'renewal', + upgrade = 'upgrade' +} + +export const packagePayTextMap = { + [PackageChangeStatusEnum.buy]: i18nT('common:pay.package_tip.buy'), + [PackageChangeStatusEnum.renewal]: i18nT('common:pay.package_tip.renewal'), + [PackageChangeStatusEnum.upgrade]: i18nT('common:pay.package_tip.upgrade') +}; diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json index 2f88aa20d..4738fb4b9 100644 --- a/packages/web/i18n/en/common.json +++ b/packages/web/i18n/en/common.json @@ -10,6 +10,8 @@ "auto_renew_q": "Will the subscription package automatically renew?", "change_package_a": "When the current package price is greater than the new package, you cannot switch immediately. You will be switched in the form of \"renewal\" after the current package expires.\n\nWhen the current package price is lower than the new package, the system will automatically calculate the remaining balance of the current package, and you can pay the price difference to switch packages.", "change_package_q": "Can I switch subscription plans?", + "check_subscription_a": "Account - personal information - package details - usage. \nYou can view the effective and expiry dates of the packages you own. \nWhen the paid package expires, it will automatically switch to the free version.", + "check_subscription_q": "Where can I check my subscribed plans?", "dataset_compute_a": "1 knowledge base storage is equal to 1 knowledge base index. \nA piece of knowledge base data can contain one or more knowledge base indexes. \nDuring enhanced training, 1 piece of data will generate 5 indexes.", "dataset_compute_q": "How to calculate knowledge base storage?", "dataset_index_a": "Won't. \nHowever, when the knowledge base index exceeds, knowledge base content cannot be inserted and updated.", @@ -17,7 +19,9 @@ "free_user_clean_a": "After free version users (free version without purchasing additional packages) have no usage records for 30 days, the system will automatically clear all knowledge base content under the account.", "free_user_clean_q": "Will the data in the free version be cleared?", "package_overlay_a": "OK. \nEach resource package purchased is independent and will be used stacked within its validity period. \nAI points will be deducted from the resource package that expires first.", - "package_overlay_q": "Can additional resource packs be stacked?" + "package_overlay_q": "Can additional resource packs be stacked?", + "switch_package_a": "The package usage rule is to give priority to more advanced packages. Therefore, if the new package purchased is more advanced than the current package, the new package will take effect immediately: otherwise, the current package will continue to be used.", + "switch_package_q": "Switch subscription plans?" }, "Folder": "Folder", "Login": "Login", @@ -1070,6 +1074,7 @@ }, "extraction_results": "Extract results", "field_name": "Name", + "free": "free", "get_QR_failed": "Failed to obtain QR code", "get_app_failed": "Failed to get app", "get_laf_failed": "Failed to get Laf function list", @@ -1089,6 +1094,7 @@ }, "invalid_variable": "Invalid variable", "is_open": "Opened", + "is_using": "in use", "item_description": "Field description", "item_name": "Field name", "key_repetition": "key duplicate", @@ -1117,6 +1123,11 @@ "notice": "Do not close the page", "old_package_price": "Old package price", "other": "For other amounts, please round up the whole number", + "package_tip": { + "buy": "The package level you purchased is lower than the current package, and the package will take effect after the current package expires. \nYou can check the package usage in Account—Personal Information—Package Details.", + "renewal": "You are renewing your plan. \nYou can check the package usage in Account—Personal Information—Package Details.", + "upgrade": "If the package you purchased is higher than the current package, the package will take effect immediately, and the current package will take effect later. \nYou can check the package usage in Account—Personal Information—Package Details." + }, "to_recharge": "Insufficient balance, please recharge", "wechat": "Please scan the QR code on WeChat to pay:", "yuan": "Yuan" @@ -1205,6 +1216,7 @@ "AI Bonus Points": "AI points", "Expired Time": "End time", "Start Time": "Start time", + "due_date": "Expiration time", "storage": "Storage amount", "type": "Type" }, @@ -1365,10 +1377,18 @@ "standardSubLevel": { "custom": "Customized version", "enterprise": "Enterprise edition", + "enterprise_desc": "Suitable for small and medium-sized enterprises to build knowledge base applications in production environments", "experience": "Experience edition", + "experience_desc": "Unlocks the full functionality of FastGPT", "free": "Free edition", "free desc": "Basic functions can be used for free every month, and the knowledge base will be cleared if there is no usage record for 30 days", - "team": "Team edition" + "team": "Team edition", + "team_desc": "Suitable for small teams to build knowledge base applications and provide external services" + }, + "status": { + "active": "Taking effect", + "expired": "Expired", + "inactive": "To be used" }, "token_compute": "Click to view the online Tokens calculator", "type": { diff --git a/packages/web/i18n/en/user.json b/packages/web/i18n/en/user.json index 534f9633c..d530837d8 100644 --- a/packages/web/i18n/en/user.json +++ b/packages/web/i18n/en/user.json @@ -1,11 +1,24 @@ { "bill": { + "balance": "Balance", "buy_plan": "Buy a package", "buy_standard_plan_success": "Package purchased successfully", + "contact_customer_service": "Contact customer service", + "conversion": "exchange", + "convert_error": "Redemption failed", + "convert_success": "Redemption successful", + "current_token_price": "Current points price", "not_need_invoice": "Balance payment, unable to issue invoice", + "price": "price", "renew_plan": "Renewal package", "standard_valid_tip": "Package usage rules: The system gives priority to using more advanced packages, and the original unused packages will take effect later.", - "valid_time": "Effective time" + "token_expire_1year": "Points are valid for one year", + "tokens": "integral", + "use_balance": "Use balance", + "use_balance_hint": "Due to the system upgrade, the original \"automatic renewal and deduction from balance\" mode has been cancelled, and the balance recharge entrance has been closed. \nYour balance can be used to purchase points", + "valid_time": "Effective time", + "you_can_convert": "You can redeem", + "yuan": "Yuan" }, "bind_inform_account_error": "Abnormal binding notification account", "bind_inform_account_success": "Binding notification account successful", diff --git a/packages/web/i18n/zh/common.json b/packages/web/i18n/zh/common.json index 6b9b383bc..506a13751 100644 --- a/packages/web/i18n/zh/common.json +++ b/packages/web/i18n/zh/common.json @@ -17,14 +17,20 @@ "free_user_clean_a": "免费版团队（免费版且未购买额外套餐）连续 30 天未登录系统，系统会自动清除该团队下所有知识库内容。", "free_user_clean_q": "免费版数据会清除么？", "package_overlay_a": "可以的。每次购买的资源包都是独立的，在其有效期内将会叠加使用。AI积分会优先扣除最先过期的资源包。", - "package_overlay_q": "额外资源包可以叠加么？" + "package_overlay_q": "额外资源包可以叠加么？", + "switch_package_q": "是否切换订阅套餐？", + "switch_package_a": "套餐使用规则为优先使用更高级的套餐，因此，购买的新套餐若比当前套餐更高级，则新套餐立即生效：否则将继续使用当前套餐。", + "check_subscription_q": "在哪里查看已订阅的套餐？", + "check_subscription_a": "账号-个人信息-套餐详情-使用情况。您可以查看所拥有套餐的生效和到期时间。当付费套餐到期后将自动切换免费版。" }, "Folder": "文件夹", "Login": "登录", + "is_using": "正在使用", "Move": "移动", "Name": "名称", "Rename": "重命名", "Resume": "恢复", + "free": "免费", "Running": "运行中", "UnKnow": "未知", "Warning": "提示", @@ -631,8 +637,7 @@ "success": "开始同步" } }, - "training": { - } + "training": {} }, "data": { "Auxiliary Data": "辅助数据", @@ -1119,7 +1124,12 @@ "other": "其他金额，请取整数", "to_recharge": "余额不足，去充值", "wechat": "请微信扫码支付: {{price}}元\n请勿关闭页面", - "yuan": "{{amount}}元" + "yuan": "{{amount}}元", + "package_tip": { + "buy": "您购买的套餐等级低于当前套餐，该套餐将在当前套餐过期后生效。您可在账号—个人信息—套餐详情里，查看套餐使用情况。", + "renewal": "您正在续费套餐。您可在账号—个人信息—套餐详情里，查看套餐使用情况。", + "upgrade": "您购买的套餐等级高于当前套餐，该套餐将即刻生效，当前套餐将延后生效。您可在账号—个人信息—套餐详情里，查看套餐使用情况。" + } }, "permission": { "Collaborator": "协作者", @@ -1204,6 +1214,7 @@ "standard": { "AI Bonus Points": "AI 积分", "Expired Time": "结束时间", + "due_date": "到期时间", "Start Time": "开始时间", "storage": "存储量", "type": "类型" @@ -1320,6 +1331,11 @@ "noBill": "无账单记录~", "no_invoice": "暂无开票记录", "subscription": { + "status": { + "expired": "已过期", + "active": "生效中", + "inactive": "待使用" + }, "AI points": "AI 积分", "AI points click to read tip": "每次调用 AI 模型时，都会消耗一定的 AI 积分（类似于 token）。点击可查看详细计算规则。", "AI points usage": "AI 积分使用量", @@ -1368,7 +1384,10 @@ "experience": "体验版", "free": "免费版", "free desc": "每月均可免费使用基础功能，连续 30 天未登录系统，将会自动清除知识库", - "team": "团队版" + "team": "团队版", + "experience_desc": "可解锁 FastGPT 完整功能", + "team_desc": "适合小团队构建知识库应用并提供对外服务", + "enterprise_desc": "适合中小企业在生产环境构建知识库应用" }, "token_compute": "点击查看在线 Tokens 计算器", "type": { diff --git a/packages/web/styles/theme.ts b/packages/web/styles/theme.ts index 89cc0c30f..6929597cc 100644 --- a/packages/web/styles/theme.ts +++ b/packages/web/styles/theme.ts @@ -680,6 +680,19 @@ export const theme = extendTheme({ 800: '#93370D', 900: '#7A2E0E' }, + adora: { + 25: '#FCFCFF', + 50: '#F0EEFF', + 100: '#E4E1FC', + 200: '#D3CAFF', + 300: '#B6A8FC', + 400: '#9E8DFB', + 500: '#8774EE', + 600: '#6F5DD7', + 700: '#5E4EBD', + 800: '#4E4198', + 900: '#42387D' + }, borderColor: { low: '#E8EBF0', base: '#DFE2EA', diff --git a/projects/app/public/imgs/priceBg.svg b/projects/app/public/imgs/priceBg.svg index 6cd726d12..923fd3a14 100644 --- a/projects/app/public/imgs/priceBg.svg +++ b/projects/app/public/imgs/priceBg.svg @@ -1,117 +1,60 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/projects/app/src/components/support/wallet/QRCodePayModal.tsx b/projects/app/src/components/support/wallet/QRCodePayModal.tsx index ba49eeb9e..af84fd1b5 100644 --- a/projects/app/src/components/support/wallet/QRCodePayModal.tsx +++ b/projects/app/src/components/support/wallet/QRCodePayModal.tsx @@ -74,7 +74,11 @@ const QRCodePayModal = ({ return ( - {tip && {tip}} + {tip && ( + + {tip} + + )} {t('common:pay.wechat', { price: readPrice })} diff --git a/projects/app/src/components/support/wallet/StandardPlanContentList.tsx b/projects/app/src/components/support/wallet/StandardPlanContentList.tsx index fd29a3d35..ad0bb41ad 100644 --- a/projects/app/src/components/support/wallet/StandardPlanContentList.tsx +++ b/projects/app/src/components/support/wallet/StandardPlanContentList.tsx @@ -78,7 +78,7 @@ const StandardPlanContentList = ({ - + {t('common:support.wallet.subscription.function.Max dataset size', { amount: planContent.maxDatasetSize })} @@ -87,7 +87,7 @@ const StandardPlanContentList = ({ - + {t('common:support.wallet.subscription.function.Points', { amount: planContent.totalPoints })} diff --git a/projects/app/src/pages/account/components/Info/ConversionModal.tsx b/projects/app/src/pages/account/components/Info/ConversionModal.tsx index 56c92aafa..24e6112f9 100644 --- a/projects/app/src/pages/account/components/Info/ConversionModal.tsx +++ b/projects/app/src/pages/account/components/Info/ConversionModal.tsx @@ -49,7 +49,9 @@ const ConversionModal = ({ - {t('user:bill.use_balance_hint')} + + {t('user:bill.use_balance_hint')} + @@ -74,7 +76,9 @@ const ConversionModal = ({ {points} {t('user:bill.tokens')} - {t('user:bill.token_expire_1year')} + + {t('user:bill.token_expire_1year')} + @@ -88,7 +92,7 @@ const ConversionModal = ({ > {t('user:bill.conversion')} - + {t('user:bill.contact_customer_service')} diff --git a/projects/app/src/pages/account/components/Info/standardDetailModal.tsx b/projects/app/src/pages/account/components/Info/standardDetailModal.tsx index a6a9175ec..e8ac1801e 100644 --- a/projects/app/src/pages/account/components/Info/standardDetailModal.tsx +++ b/projects/app/src/pages/account/components/Info/standardDetailModal.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { ModalBody, ModalFooter, @@ -11,7 +11,8 @@ import { TableContainer, ModalCloseButton, HStack, - Box + Box, + Flex } from '@chakra-ui/react'; import MyModal from '@fastgpt/web/components/common/MyModal'; import { useTranslation } from 'next-i18next'; @@ -19,16 +20,47 @@ import { useQuery } from '@tanstack/react-query'; import { useLoading } from '@fastgpt/web/hooks/useLoading'; import MyIcon from '@fastgpt/web/components/common/Icon'; import { getTeamPlans } from '@/web/support/user/team/api'; -import { subTypeMap, standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants'; +import { + subTypeMap, + standardSubLevelMap, + SubTypeEnum +} from '@fastgpt/global/support/wallet/sub/constants'; import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type'; import { formatTime2YMDHM } from '@fastgpt/global/common/string/time'; import { useSystemStore } from '@/web/common/system/useSystemStore'; +import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; + +type packageStatus = 'active' | 'inactive' | 'expired'; const StandDetailModal = ({ onClose }: { onClose: () => void }) => { const { t } = useTranslation(); const { Loading } = useLoading(); const { subPlans } = useSystemStore(); - const { data: teamPlans = [], isLoading } = useQuery(['getTeamPlans'], getTeamPlans); + const { data: teamPlans = [], loading: isLoading } = useRequest2( + () => + getTeamPlans().then((res) => { + return [ + ...res.filter((plan) => plan.type === SubTypeEnum.standard), + ...res.filter((plan) => plan.type === SubTypeEnum.extraDatasetSize), + ...res.filter((plan) => plan.type === SubTypeEnum.extraPoints) + ].map((item, index) => { + return { + ...item, + status: + new Date(item.expiredTime).getTime() < new Date().getTime() + ? 'expired' + : item.type === SubTypeEnum.standard + ? index === 0 + ? 'active' + : 'inactive' + : 'active' + }; + }); + }), + { + manual: false + } + ); return ( void }) => { isCentered > - + @@ -48,7 +80,7 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => { - + @@ -61,25 +93,36 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => { surplusPoints = 0, totalPoints = 0, startTime, - expiredTime - }: TeamSubSchema) => { + expiredTime, + status + }) => { const standardPlan = currentSubLevel ? subPlans?.standard?.[currentSubLevel] : undefined; const datasetSize = standardPlan?.maxDatasetSize || currentExtraDatasetSize; + const now = new Date(); return ( - + - - + + ); } @@ -100,14 +143,56 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => {
{t('common:support.standard.storage')} {t('common:support.standard.AI Bonus Points')} {t('user:bill.valid_time')}{t('common:support.standard.Expired Time')}{t('common:support.standard.due_date')}
- - {t(subTypeMap[type]?.label as any)} - {currentSubLevel && - `(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`} + + + + + + {t(subTypeMap[type]?.label as any)} + {currentSubLevel && + `(${t(standardSubLevelMap[currentSubLevel]?.label as any)})`} + + + {datasetSize ? `${datasetSize + t('common:core.dataset.data.group')}` : '-'} @@ -89,8 +132,8 @@ const StandDetailModal = ({ onClose }: { onClose: () => void }) => { ? `${Math.round(totalPoints - surplusPoints)} / ${totalPoints} ${t('common:support.wallet.subscription.point')}` : '-'} {formatTime2YMDHM(startTime)}{formatTime2YMDHM(expiredTime)}{formatTime2YMDHM(startTime)}{formatTime2YMDHM(expiredTime)}
- + - {t('user:bill.standard_valid_tip')} + + {t('user:bill.standard_valid_tip')} + - ); }; +function StatusTag({ status }: { status: packageStatus }) { + const { t } = useTranslation(); + const statusText = useMemo(() => { + return { + inactive: t('common:support.wallet.subscription.status.inactive'), + active: t('common:support.wallet.subscription.status.active'), + expired: t('common:support.wallet.subscription.status.expired') + }; + }, [t]); + const styleMap = useMemo(() => { + return { + inactive: { + color: 'adora.600', + bg: 'adora.50' + }, + active: { + color: 'green.600', + bg: 'green.50' + }, + expired: { + color: 'myGray.700', + bg: 'myGray.100' + } + }; + }, []); + return ( + + {statusText[status]} + + ); +} + export default StandDetailModal; diff --git a/projects/app/src/pages/price/components/ExtraPlan.tsx b/projects/app/src/pages/price/components/ExtraPlan.tsx index f700160e0..a7d03277a 100644 --- a/projects/app/src/pages/price/components/ExtraPlan.tsx +++ b/projects/app/src/pages/price/components/ExtraPlan.tsx @@ -119,15 +119,15 @@ const ExtraPlan = () => { return ( - + {t('common:support.wallet.subscription.Extra plan')} - + {t('common:support.wallet.subscription.Extra plan tip')} @@ -143,12 +143,12 @@ const ExtraPlan = () => { > - + {t('common:support.wallet.subscription.Extra dataset size')} - + {`￥${extraDatasetPrice}/1000` + t('common:core.dataset.data.group')} - + /{t('common:common.month')} @@ -162,12 +162,12 @@ const ExtraPlan = () => { /> - + {t('common:support.wallet.buy_resource')} - + {t('common:support.wallet.subscription.Month amount')} @@ -186,13 +186,13 @@ const ExtraPlan = () => { - + {t('common:common.month')} - + {t('common:support.wallet.subscription.Update extra dataset size')} @@ -219,7 +219,7 @@ const ExtraPlan = () => { - + 000{t('common:core.dataset.data.unit')} @@ -231,6 +231,7 @@ const ExtraPlan = () => { variant={'primaryGhost'} isLoading={loading} onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)} + color={'primary.700'} > {t('common:support.wallet.Buy')} @@ -248,12 +249,12 @@ const ExtraPlan = () => { > - + {t('common:support.wallet.subscription.Extra ai points')} - + {`￥${extraPointsPrice}/1000` + t('common:support.wallet.subscription.point')} - + /{t('common:common.month')} @@ -267,7 +268,7 @@ const ExtraPlan = () => { /> - + {t('common:support.wallet.buy_resource')} @@ -297,10 +298,16 @@ const ExtraPlan = () => { */} - + {t('common:support.wallet.subscription.Update extra ai points')} - + { variant={'primaryGhost'} isLoading={loading} onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)} + color={'primary.700'} > {t('common:support.wallet.Buy')} diff --git a/projects/app/src/pages/price/components/FAQ.tsx b/projects/app/src/pages/price/components/FAQ.tsx index d6b5d32f6..c357e7eb5 100644 --- a/projects/app/src/pages/price/components/FAQ.tsx +++ b/projects/app/src/pages/price/components/FAQ.tsx @@ -6,12 +6,12 @@ const FAQ = () => { const { t } = useTranslation(); const faqs = [ { - title: t('common:FAQ.auto_renew_q'), - desc: t('common:FAQ.auto_renew_a') + title: t('common:FAQ.switch_package_q'), + desc: t('common:FAQ.switch_package_a') }, { - title: t('common:FAQ.change_package_q'), - desc: t('common:FAQ.change_package_a') + title: t('common:FAQ.check_subscription_q'), + desc: t('common:FAQ.check_subscription_a') }, { title: t('common:FAQ.ai_point_q'), @@ -41,21 +41,21 @@ const FAQ = () => { return ( - + {t('common:support.wallet.subscription.FAQ')} - + {faqs.map((item, i) => ( { borderColor: 'primary.300' }} > - {item.title} - + + {item.title} + + {item.desc} diff --git a/projects/app/src/pages/price/components/Points.tsx b/projects/app/src/pages/price/components/Points.tsx index 40dde8f52..d86cdef20 100644 --- a/projects/app/src/pages/price/components/Points.tsx +++ b/projects/app/src/pages/price/components/Points.tsx @@ -9,18 +9,18 @@ const Points = () => { return ( - + {t('common:support.wallet.subscription.Ai points')} {t('common:support.wallet.subscription.token_compute')} - + { flex={1} borderRightWidth={'1px'} borderRightColor={'myGray.150'} - py={4} - px={6} + py={8} + pl={10} fontSize={'md'} fontWeight={'bold'} + color={'myGray.900'} > {t('common:support.wallet.subscription.ai_model')} {llmModelList?.map((item, i) => ( - + {item.name} {item.charsPointsPrice + @@ -61,17 +62,17 @@ const Points = () => { bg={'rgba(255,255,255,0.9)'} overflow={'hidden'} > - + {t('common:core.ai.model.Vector Model')} - + {t('common:core.ai.model.doc_index_and_dialog')} {vectorModelList?.map((item, i) => ( - + {item.name} {item.charsPointsPrice + @@ -90,7 +91,7 @@ const Points = () => { bg={'rgba(255,255,255,0.9)'} overflow={'hidden'} > - + {t('common:core.app.TTS')} @@ -117,7 +118,7 @@ const Points = () => { bg={'rgba(255,255,255,0.9)'} overflow={'hidden'} > - + {t('common:core.app.Whisper')} diff --git a/projects/app/src/pages/price/components/Standard.tsx b/projects/app/src/pages/price/components/Standard.tsx index 68c729146..8dda48d8e 100644 --- a/projects/app/src/pages/price/components/Standard.tsx +++ b/projects/app/src/pages/price/components/Standard.tsx @@ -1,8 +1,13 @@ import React, { useMemo, useState } from 'react'; import MyIcon from '@fastgpt/web/components/common/Icon'; -import { Box, Button, Flex, Grid } from '@chakra-ui/react'; +import { Box, Button, Flex, Grid, HStack } from '@chakra-ui/react'; import { useTranslation } from 'next-i18next'; -import { StandardSubLevelEnum, SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants'; +import { + StandardSubLevelEnum, + SubModeEnum, + PackageChangeStatusEnum, + packagePayTextMap +} from '@fastgpt/global/support/wallet/sub/constants'; import { useSystemStore } from '@/web/common/system/useSystemStore'; import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants'; import { useRequest2 } from '@fastgpt/web/hooks/useRequest'; @@ -24,7 +29,7 @@ const Standard = ({ const { t } = useTranslation(); const router = useRouter(); const { toast } = useToast(); - + const [packageChange, setPackageChange] = useState(); const { subPlans, feConfigs } = useSystemStore(); const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month); @@ -66,103 +71,180 @@ const Standard = ({ }); return ( - - - {t('common:support.wallet.subscription.Sub plan')} - - - {t('common:support.wallet.subscription.Sub plan tip', { - title: feConfigs?.systemTitle - })} - - - - {t('common:support.wallet.subscription.mode.Year')} - - ({t('common:support.wallet.subscription.mode.Year sale')}) + <> + + + {t('common:support.wallet.subscription.Sub plan')} + + + {t('common:support.wallet.subscription.Sub plan tip', { + title: feConfigs?.systemTitle + })} + + + + {t('common:support.wallet.subscription.mode.Year')} + + ({t('common:support.wallet.subscription.mode.Year sale')}) + + + ), + value: SubModeEnum.year + } + ]} + value={selectSubMode} + onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)} + /> + + {/* card */} + + {standardSubList.map((item) => { + const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel; + + const isHigherLevel = + standardSubLevelMap[item.level].weight > + standardSubLevelMap[myStandardPlan?.currentSubLevel || StandardSubLevelEnum.free] + .weight; + + return ( + + {isCurrentPlan && ( + + {t('common:is_using')} - - ), - value: SubModeEnum.year - } - ]} - value={selectSubMode} - onChange={(e) => setSelectSubMode(e as `${SubModeEnum}`)} - /> - - {/* card */} - - {standardSubList.map((item) => { - const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel; + )} + + {t(item.label)} + + + ￥{item.price} + + + {t(item.desc as any, { title: feConfigs?.systemTitle })} + - return ( - { + if (item.level === StandardSubLevelEnum.free) { + return ( + + ); + } + // feature: + // if ( + // item.level === myStandardPlan?.nextSubLevel && + // selectSubMode === myStandardPlan?.nextMode + // ) { + // return ( + // + // ); + // } + if (isCurrentPlan) { + return ( + + ); + } + if (isHigherLevel) { + return ( + + ); } - : { - borderColor: 'myGray.150' - })} - > - - {t(item.label)} - - - ￥{item.price} - - - {t(item.desc as any, { title: feConfigs?.systemTitle })} - - - {/* Button */} - {(() => { - if (item.level === StandardSubLevelEnum.free) { - return ( - - ); - } - // feature: - // if ( - // item.level === myStandardPlan?.nextSubLevel && - // selectSubMode === myStandardPlan?.nextMode - // ) { - // return ( - // - // ); - // } - if (isCurrentPlan) { return ( ); - } + })()} - return ( - - ); - })()} + {/* function list */} + + + ); + })} + - {/* function list */} - - - ); - })} - - - {!!qrPayData && } - + {!!qrPayData && packageChange && ( + + )} + + + + + {t('user:bill.standard_valid_tip')} + + + ); }; @@ -239,7 +310,7 @@ const RowTabs = ({ alignItems={'center'} justifyContent={'center'} cursor={'pointer'} - borderRadius={'md'} + borderRadius={'sm'} px={'12px'} py={'7px'} userSelect={'none'} @@ -255,7 +326,7 @@ const RowTabs = ({ })} > {item.icon && } - {item.label} + {item.label} ))} diff --git a/projects/app/src/pages/price/index.tsx b/projects/app/src/pages/price/index.tsx index d129aa289..66ef88933 100644 --- a/projects/app/src/pages/price/index.tsx +++ b/projects/app/src/pages/price/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { serviceSideProps } from '@/web/common/utils/i18n'; -import { Box } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { useUserStore } from '@/web/support/user/useUserStore'; import { getTeamPlanStatus } from '@/web/support/user/team/api'; import { useQuery } from '@tanstack/react-query'; @@ -26,13 +26,14 @@ const PriceBox = () => { return ( <> - @@ -49,7 +50,7 @@ const PriceBox = () => { {/* question */} - + ); };