New pay (#2484) (#2510)

* New pay (#2484)

* remove sub status

* feat: new pay mode

* fix: ts

* limit

projects/app/src/components/support/wallet/QRCodePayModal.tsx

@@ -1,7 +1,7 @@
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'next-i18next';
-import { Box, ModalBody, ModalFooter } from '@chakra-ui/react';
+import { Box, ModalBody } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { checkBalancePayResult } from '@/web/support/wallet/bill/api';
 import { useToast } from '@fastgpt/web/hooks/useToast';
@@ -15,11 +15,12 @@ export type QRPayProps = {
 };
 
 const QRCodePayModal = ({
+  tip,
   readPrice,
   codeUrl,
   billId,
   onSuccess
-}: QRPayProps & { onSuccess?: () => any }) => {
+}: QRPayProps & { tip?: string; onSuccess?: () => any }) => {
   const router = useRouter();
   const { t } = useTranslation();
   const { toast } = useToast();
@@ -72,11 +73,13 @@ const QRCodePayModal = ({
 
   return (
     <MyModal isOpen title={t('common:user.Pay')} iconSrc="/imgs/modal/pay.svg">
-      <ModalBody textAlign={'center'}>
-        <Box mb={3}>{t('common:pay.wechat', { price: readPrice })}</Box>
+      <ModalBody textAlign={'center'} py={6} whiteSpace={'pre'}>
+        {tip && <Box mb={3}>{tip}</Box>}
         <Box id={'payQRCode'} display={'inline-block'} h={'128px'}></Box>
+        <Box mt={3} textAlign={'center'}>
+          {t('common:pay.wechat', { price: readPrice })}
+        </Box>
       </ModalBody>
-      <ModalFooter />
     </MyModal>
   );
 };

projects/app/src/pages/account/components/PayModal.tsx

@@ -1,116 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { ModalFooter, ModalBody, Button, Input, Box, Grid, Link } from '@chakra-ui/react';
-import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
-import { useToast } from '@fastgpt/web/hooks/useToast';
-import { useRouter } from 'next/router';
-import { getErrText } from '@fastgpt/global/common/error/utils';
-import { useTranslation } from 'next-i18next';
-import MyModal from '@fastgpt/web/components/common/MyModal';
-import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
-import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
-import { EXTRA_PLAN_CARD_ROUTE } from '@/web/support/wallet/sub/constants';
-
-const PayModal = ({
-  onClose,
-  defaultValue,
-  onSuccess
-}: {
-  defaultValue?: number;
-  onClose: () => void;
-  onSuccess?: () => any;
-}) => {
-  const { t } = useTranslation();
-  const { toast } = useToast();
-  const { subPlans } = useSystemStore();
-  const [inputVal, setInputVal] = useState<number | undefined>(defaultValue);
-  const [loading, setLoading] = useState(false);
-  const [qrPayData, setQRPayData] = useState<QRPayProps>();
-  const handleClickPay = useCallback(async () => {
-    if (!inputVal || inputVal <= 0 || isNaN(+inputVal)) return;
-    setLoading(true);
-    try {
-      // 获取支付二维码
-      const res = await getWxPayQRCode({
-        type: BillTypeEnum.balance,
-        balance: inputVal
-      });
-      setQRPayData({
-        readPrice: res.readPrice,
-        codeUrl: res.codeUrl,
-        billId: res.billId
-      });
-    } catch (err) {
-      toast({
-        title: getErrText(err),
-        status: 'error'
-      });
-    }
-    setLoading(false);
-  }, [inputVal, toast]);
-
-  const payList = useMemo(() => {
-    const list = Object.values(subPlans?.standard || {});
-    const priceList = list.map((item) => item.price);
-    return priceList.concat(priceList.map((item) => item * 10)).filter(Boolean);
-  }, [subPlans?.standard]);
-
-  return (
-    <MyModal
-      isOpen={true}
-      onClose={onClose}
-      title={t('common:user.Pay')}
-      iconSrc="/imgs/modal/pay.svg"
-    >
-      <ModalBody px={0} display={'flex'} flexDirection={'column'}>
-        <Box px={6} fontSize={'sm'} mb={2} py={2} maxW={'400px'}>
-          该余额仅用于自动续费标准套餐。如需购买额外套餐，可
-          <Link href={EXTRA_PLAN_CARD_ROUTE} color={'primary.600'} textDecoration={'underline'}>
-            直接下单
-          </Link>
-          ，无需充值余额。
-        </Box>
-        <Grid gridTemplateColumns={'repeat(3,1fr)'} gridGap={5} mb={4} px={6}>
-          {payList.map((item) => (
-            <Button
-              key={item}
-              variant={item === inputVal ? 'solid' : 'outline'}
-              onClick={() => setInputVal(item)}
-            >
-              {t('common:pay.yuan', { amount: item })}
-            </Button>
-          ))}
-        </Grid>
-        <Box px={6}>
-          <Input
-            value={inputVal}
-            type={'number'}
-            step={1}
-            placeholder={t('common:pay.other')}
-            onChange={(e) => {
-              setInputVal(Math.floor(+e.target.value));
-            }}
-          ></Input>
-        </Box>
-      </ModalBody>
-
-      <ModalFooter>
-        <Button variant={'whiteBase'} onClick={onClose}>
-          {t('common:common.Close')}
-        </Button>
-        <Button
-          ml={3}
-          isLoading={loading}
-          isDisabled={!inputVal || inputVal === 0}
-          onClick={handleClickPay}
-        >
-          {t('common:pay.get_pay_QR')}
-        </Button>
-      </ModalFooter>
-
-      {!!qrPayData && <QRCodePayModal {...qrPayData} onSuccess={onSuccess} />}
-    </MyModal>
-  );
-};
-
-export default PayModal;

projects/app/src/pages/api/support/user/team/plan/getTeamPlanStatus.ts

@@ -1,28 +1,17 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
-import { jsonRes } from '@fastgpt/service/common/response';
-import { connectToDatabase } from '@/service/mongo';
 import { authCert } from '@fastgpt/service/support/permission/auth/common';
-import { FeTeamPlanStatusType } from '@fastgpt/global/support/wallet/sub/type';
 import { getTeamPlanStatus } from '@fastgpt/service/support/wallet/sub/utils';
+import { NextAPI } from '@/service/middleware/entry';
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
-  try {
-    await connectToDatabase();
+async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  const { teamId } = await authCert({
+    req,
+    authToken: true
+  });
 
-    const { teamId } = await authCert({
-      req,
-      authToken: true
-    });
-
-    jsonRes<FeTeamPlanStatusType>(res, {
-      data: await getTeamPlanStatus({
-        teamId
-      })
-    });
-  } catch (err) {
-    jsonRes(res, {
-      code: 500,
-      error: err
-    });
-  }
+  return getTeamPlanStatus({
+    teamId
+  });
 }
+
+export default NextAPI(handler);

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx

@@ -123,6 +123,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
     },
     {
       manual: false,
+      throttleWait: 100,
       refreshDeps: [basicNodeTemplates, nodeList, hasToolNode, templateType]
     }
   );

projects/app/src/pages/price/components/Standard.tsx

@@ -1,33 +1,21 @@
 import React, { useMemo, useState } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import { Box, Button, Flex, Grid, ModalBody, ModalFooter } from '@chakra-ui/react';
+import { Box, Button, Flex, Grid } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { StandardSubLevelEnum, SubModeEnum } from '@fastgpt/global/support/wallet/sub/constants';
-import { postCheckStandardSub, postUpdateStandardSub } from '@/web/support/wallet/sub/api';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
-import { StandardSubPlanParams } from '@fastgpt/global/support/wallet/sub/api';
-import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
-import { StandardSubPlanUpdateResponse } from '@fastgpt/global/support/wallet/sub/api.d';
-import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
-import MyModal from '@fastgpt/web/components/common/MyModal';
 import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
 import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
 import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
 import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
 import { useRouter } from 'next/router';
-
-type ConfirmPayModalProps = {
-  teamBalance: number;
-  totalPrice: number;
-  payPrice: number;
-
-  planProps: StandardSubPlanParams;
-};
+import { useToast } from '@fastgpt/web/hooks/useToast';
 
 const Standard = ({
-  standardPlan,
+  standardPlan: myStandardPlan,
   refetchTeamSubPlan
 }: {
   standardPlan?: TeamSubSchema;
@@ -35,8 +23,9 @@ const Standard = ({
 }) => {
   const { t } = useTranslation();
   const router = useRouter();
+  const { toast } = useToast();
+
   const { subPlans, feConfigs } = useSystemStore();
-  const [confirmPayData, setConfirmPayData] = useState<ConfirmPayModalProps>();
   const [selectSubMode, setSelectSubMode] = useState<`${SubModeEnum}`>(SubModeEnum.month);
 
   const standardSubList = useMemo(() => {
@@ -62,37 +51,17 @@ const Standard = ({
       : [];
   }, [subPlans?.standard, selectSubMode]);
 
-  const { runAsync: onclickUpdateStandardPlan, loading: isUpdatingStandardPlan } = useRequest2(
-    postUpdateStandardSub,
-    {
-      onSuccess() {
-        refetchTeamSubPlan();
-        router.reload();
-      },
-      successToast: t('common:support.wallet.subscription.Standard update success'),
-      errorToast: t('common:support.wallet.subscription.Standard update fail')
-    }
-  );
+  // Pay code
+  const [qrPayData, setQRPayData] = useState<QRPayProps>();
 
-  const { mutate: onclickPreCheckStandPlan, isLoading: isCheckingStandardPlan } = useRequest({
-    mutationFn: (data: StandardSubPlanParams) => postCheckStandardSub(data),
-    onSuccess(res: StandardSubPlanUpdateResponse) {
-      if (res.payPrice === undefined) {
-        onclickUpdateStandardPlan({
-          level: res.nextSubLevel,
-          mode: res.nextMode
-        });
-      } else {
-        setConfirmPayData({
-          teamBalance: res.teamBalance,
-          totalPrice: res.planPrice,
-          payPrice: res.payPrice,
-          planProps: {
-            level: res.nextSubLevel,
-            mode: res.nextMode
-          }
-        });
-      }
+  /* Get pay code */
+  const { runAsync: onPay, loading: isLoading } = useRequest2(getWxPayQRCode, {
+    onSuccess(res) {
+      setQRPayData({
+        readPrice: res.readPrice,
+        codeUrl: res.codeUrl,
+        billId: res.billId
+      });
     }
   });
 
@@ -136,9 +105,7 @@ const Standard = ({
         minH={'550px'}
       >
         {standardSubList.map((item) => {
-          const isCurrentPlan =
-            item.level === standardPlan?.currentSubLevel &&
-            selectSubMode === standardPlan?.currentMode;
+          const isCurrentPlan = item.level === myStandardPlan?.currentSubLevel;
 
           return (
             <Box
@@ -158,7 +125,7 @@ const Standard = ({
                   })}
             >
               <Box fontSize={'md'} fontWeight={'500'}>
-                {t(item.label as any)}
+                {t(item.label)}
               </Box>
               <Box fontSize={['32px', '42px']} fontWeight={'bold'}>
                 ￥{item.price}
@@ -166,46 +133,44 @@ const Standard = ({
               <Box color={'myGray.500'} h={'40px'} fontSize={'xs'}>
                 {t(item.desc as any, { title: feConfigs?.systemTitle })}
               </Box>
+
+              {/* Button */}
               {(() => {
-                if (
-                  item.level === StandardSubLevelEnum.free &&
-                  selectSubMode === SubModeEnum.year
-                ) {
+                if (item.level === StandardSubLevelEnum.free) {
                   return (
                     <Button isDisabled mt={4} mb={6} w={'100%'} variant={'solid'}>
                       {t('common:support.wallet.subscription.Nonsupport')}
                     </Button>
                   );
                 }
-                if (
-                  item.level === standardPlan?.nextSubLevel &&
-                  selectSubMode === standardPlan?.nextMode
-                ) {
-                  return (
-                    <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
-                      {t('common:support.wallet.subscription.Next plan')}
-                    </Button>
-                  );
-                }
+                // feature:
+                // if (
+                //   item.level === myStandardPlan?.nextSubLevel &&
+                //   selectSubMode === myStandardPlan?.nextMode
+                // ) {
+                //   return (
+                //     <Button mt={4} mb={6} w={'100%'} variant={'whiteBase'} isDisabled>
+                //       {t('common:support.wallet.subscription.Next plan')}
+                //     </Button>
+                //   );
+                // }
                 if (isCurrentPlan) {
                   return (
                     <Button
                       mt={4}
                       mb={6}
                       w={'100%'}
-                      variant={'whiteBase'}
-                      isDisabled={
-                        item.level === standardPlan?.nextSubLevel &&
-                        selectSubMode === standardPlan?.nextMode
-                      }
-                      onClick={() =>
-                        onclickPreCheckStandPlan({
+                      variant={'primary'}
+                      isLoading={isLoading}
+                      onClick={() => {
+                        onPay({
+                          type: BillTypeEnum.standSubPlan,
                           level: item.level,
-                          mode: selectSubMode
-                        })
-                      }
+                          subMode: selectSubMode
+                        });
+                      }}
                     >
-                      {t('common:support.wallet.subscription.Current plan')}
+                      {t('user:bill.renew_plan')}
                     </Button>
                   );
                 }
@@ -216,11 +181,12 @@ const Standard = ({
                     mb={6}
                     w={'100%'}
                     variant={'primaryGhost'}
-                    isLoading={isUpdatingStandardPlan || isCheckingStandardPlan}
+                    isLoading={isLoading}
                     onClick={() =>
-                      onclickPreCheckStandPlan({
+                      onPay({
+                        type: BillTypeEnum.standSubPlan,
                         level: item.level,
-                        mode: selectSubMode
+                        subMode: selectSubMode
                       })
                     }
                   >
@@ -236,13 +202,7 @@ const Standard = ({
         })}
       </Grid>
 
-      {!!confirmPayData && (
-        <ConfirmPayModal
-          {...confirmPayData}
-          onClose={() => setConfirmPayData(undefined)}
-          onConfirmPay={() => onclickUpdateStandardPlan(confirmPayData.planProps)}
-        />
-      )}
+      {!!qrPayData && <QRCodePayModal tip="您正在购买订阅套餐" {...qrPayData} />}
     </Flex>
   );
 };
@@ -301,100 +261,3 @@ const RowTabs = ({
     </Box>
   );
 };
-
-const ConfirmPayModal = ({
-  teamBalance,
-  totalPrice,
-  payPrice,
-  onClose,
-  onConfirmPay
-}: ConfirmPayModalProps & { onClose: () => void; onConfirmPay: () => void }) => {
-  const { t } = useTranslation();
-
-  const [qrPayData, setQRPayData] = useState<QRPayProps>();
-
-  const formatPayPrice = Math.ceil(formatStorePrice2Read(payPrice));
-  const formatTeamBalance = Math.floor(formatStorePrice2Read(teamBalance));
-
-  const { mutate: handleClickPay, isLoading } = useRequest({
-    mutationFn: async (amount: number) => {
-      // 获取支付二维码
-      return getWxPayQRCode({
-        type: BillTypeEnum.balance,
-        balance: amount
-      });
-    },
-    onSuccess(res) {
-      setQRPayData({
-        readPrice: res.readPrice,
-        codeUrl: res.codeUrl,
-        billId: res.billId
-      });
-    }
-  });
-
-  const { runAsync: onPay, loading: onPaying } = useRequest2(async () => onConfirmPay());
-
-  return (
-    <MyModal
-      isOpen
-      iconSrc="modal/confirmPay"
-      title={t('common:support.wallet.Confirm pay')}
-      onClose={onClose}
-    >
-      <ModalBody py={5} px={9}>
-        <Flex>
-          <Box flex={'0 0 100px'}>{t('common:pay.new_package_price')}</Box>
-          <Box>{t('common:pay.yuan', { amount: formatStorePrice2Read(totalPrice) })}</Box>
-        </Flex>
-        <Flex mt={6}>
-          <Box flex={'0 0 100px'}>{t('common:pay.old_package_price')}</Box>
-          <Box>
-            {t('common:pay.yuan', {
-              amount: Math.floor(formatStorePrice2Read(totalPrice - payPrice))
-            })}
-          </Box>
-        </Flex>
-        <Flex mt={6}>
-          <Box flex={'0 0 100px'}>{t('common:pay.need_to_pay')}</Box>
-          <Box>
-            {t('common:pay.yuan', {
-              amount: formatPayPrice
-            })}
-          </Box>
-        </Flex>
-      </ModalBody>
-      <ModalFooter
-        borderTopWidth={'1px'}
-        borderTopColor={'borderColor.base'}
-        mx={9}
-        justifyContent={'flex-start'}
-        px={0}
-      >
-        <Box>{t('common:pay.balance') + ': '}</Box>
-        <Box ml={2} flex={1}>
-          {t('common:pay.yuan', {
-            amount: formatTeamBalance
-          })}
-        </Box>
-        {teamBalance >= payPrice ? (
-          <Button isLoading={onPaying} size={'sm'} onClick={onPay}>
-            {t('common:pay.confirm_pay')}
-          </Button>
-        ) : (
-          <Button
-            size={'sm'}
-            isLoading={isLoading}
-            onClick={() => {
-              handleClickPay(Math.ceil(formatStorePrice2Read(payPrice - teamBalance)));
-            }}
-          >
-            {t('common:pay.to_recharge')}
-          </Button>
-        )}
-      </ModalFooter>
-
-      {!!qrPayData && <QRCodePayModal {...qrPayData} onSuccess={onConfirmPay} />}
-    </MyModal>
-  );
-};

projects/app/src/pages/price/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { serviceSideProps } from '@/web/common/utils/i18n';
-import { Box, Image } from '@chakra-ui/react';
-import { useTranslation } from 'next-i18next';
+import { Box } 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';
@@ -14,7 +13,6 @@ import { getToken } from '@/web/support/user/auth';
 import Script from 'next/script';
 
 const PriceBox = () => {
-  const { t } = useTranslation();
   const { userInfo } = useUserStore();
 
   const { data: teamSubPlan, refetch: refetchTeamSubPlan } = useQuery(
@@ -60,6 +58,6 @@ export default PriceBox;
 
 export async function getServerSideProps(context: any) {
   return {
-    props: { ...(await serviceSideProps(context)) }
+    props: { ...(await serviceSideProps(context, ['user'])) }
   };
 }

projects/app/src/web/support/wallet/sub/api.ts

@@ -1,16 +0,0 @@
-import { GET, POST, PUT, DELETE } from '@/web/common/api/request';
-import {
-  StandardSubPlanParams,
-  StandardSubPlanUpdateResponse
-} from '@fastgpt/global/support/wallet/sub/api';
-import { SubStatusEnum, SubTypeEnum } from '@fastgpt/global/support/wallet/sub/constants';
-
-export const putTeamDatasetSubStatus = (data: {
-  status: `${SubStatusEnum}`;
-  type: `${SubTypeEnum}`;
-}) => POST('/proApi/support/wallet/sub/updateStatus', data);
-
-export const postCheckStandardSub = (data: StandardSubPlanParams) =>
-  POST<StandardSubPlanUpdateResponse>('/proApi/support/wallet/sub/standard/preCheck', data);
-export const postUpdateStandardSub = (data: StandardSubPlanParams) =>
-  POST<StandardSubPlanUpdateResponse>('/proApi/support/wallet/sub/standard/update', data);