New pay (#2484) (#2510)

* New pay (#2484)

* remove sub status

* feat: new pay mode

* fix: ts

* limit

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;