Revert "sub plan page (#885)" (#886)

This reverts commit 443ad37b6a.

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

@@ -7,111 +7,92 @@ import {
   NumberIncrementStepper,
   NumberInputField,
   NumberInputStepper,
-  Button
+  Button,
+  useDisclosure,
+  ModalBody,
+  ModalFooter
 } from '@chakra-ui/react';
+import { TeamSubSchema } from '@fastgpt/global/support/wallet/sub/type';
 import { useTranslation } from 'next-i18next';
-import React, { useCallback, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import MyIcon from '@fastgpt/web/components/common/Icon';
+import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
+import MySelect from '@/components/Select';
+import {
+  SubStatusEnum,
+  SubTypeEnum,
+  subSelectMap
+} from '@fastgpt/global/support/wallet/sub/constants';
+import { useRequest } from '@/web/common/hooks/useRequest';
+import {
+  posCheckTeamDatasetSizeSub,
+  postUpdateTeamDatasetSizeSub,
+  putTeamDatasetSubStatus
+} from '@/web/support/wallet/sub/api';
+import { SubDatasetSizePreviewCheckResponse } from '@fastgpt/global/support/wallet/sub/api.d';
 import { useRouter } from 'next/router';
-import { useForm } from 'react-hook-form';
-import { useToast } from '@fastgpt/web/hooks/useToast';
-import { getErrText } from '@fastgpt/global/common/error/utils';
-import { getWxPayQRCode } from '@/web/support/wallet/bill/api';
-import { BillTypeEnum } from '@fastgpt/global/support/wallet/bill/constants';
-import QRCodePayModal, { type QRPayProps } from '@/components/support/wallet/QRCodePayModal';
+import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/bill/tools';
+import { useConfirm } from '@/web/common/hooks/useConfirm';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import MyModal from '@/components/MyModal';
 
-const ExtraPlan = () => {
+const ExtraPlan = ({ extraDatasetSize }: { extraDatasetSize?: TeamSubSchema }) => {
   const { t } = useTranslation();
-  const router = useRouter();
-  const { toast } = useToast();
   const { subPlans } = useSystemStore();
-  const [loading, setLoading] = useState(false);
-  const [qrPayData, setQRPayData] = useState<QRPayProps>();
-
-  // extra dataset
   const extraDatasetPrice = subPlans?.extraDatasetSize?.price || 0;
-  const { register: registerDatasetSize, handleSubmit: handleSubmitDatasetSize } = useForm({
-    defaultValues: {
-      datasetSize: 0,
-      month: 1
-    }
-  });
-  const onclickBuyDatasetSize = useCallback(
-    async ({ datasetSize, month }: { datasetSize: number; month: number }) => {
-      try {
-        const datasetSizePayAmount = datasetSize * month * extraDatasetPrice;
-        if (datasetSizePayAmount === 0) {
-          return toast({
-            status: 'warning',
-            title: '购买数量不能为0'
-          });
-        }
-        setLoading(true);
+  const [datasetSize, setDatasetSize] = useState(0);
+  const [isRenew, setIsRenew] = useState('false');
+  const router = useRouter();
+  const { userInfo } = useUserStore();
 
-        const res = await getWxPayQRCode({
-          type: BillTypeEnum.extraDatasetSub,
-          month,
-          extraDatasetSize: datasetSize
-        });
-        setQRPayData({
-          readPrice: res.readPrice,
-          codeUrl: res.codeUrl,
-          billId: res.billId
-        });
-      } catch (err) {
-        toast({
-          title: getErrText(err),
-          status: 'error'
-        });
-      }
-      setLoading(false);
+  const [confirmPayExtraDatasetSizeData, setConfirmPayExtraDatasetSizeData] =
+    useState<SubDatasetSizePreviewCheckResponse>();
+
+  useEffect(() => {
+    setDatasetSize((extraDatasetSize?.nextExtraDatasetSize || 0) / 1000);
+    setIsRenew(extraDatasetSize?.status === SubStatusEnum.active ? 'true' : 'false');
+  }, [extraDatasetSize]);
+
+  const { mutate: onUpdateExtraDatasetSizeStatus } = useRequest({
+    mutationFn: (e: 'true' | 'false') => {
+      setIsRenew(e);
+      return putTeamDatasetSubStatus({
+        status: subSelectMap[e],
+        type: SubTypeEnum.extraDatasetSize
+      });
     },
-    [extraDatasetPrice, toast]
-  );
-
-  // extra ai points
-  const extraPointsPrice = subPlans?.extraPoints?.price || 0;
-  const { register: registerExtraPoints, handleSubmit: handleSubmitExtraPoints } = useForm({
-    defaultValues: {
-      points: 0,
-      month: 1
-    }
+    successToast: t('common.Update success'),
+    errorToast: t('common.error.Update error')
   });
-  const onclickBuyExtraPoints = useCallback(
-    async ({ points, month }: { points: number; month: number }) => {
-      try {
-        const payAmount = points * month * extraPointsPrice;
 
-        if (payAmount === 0) {
-          return toast({
-            status: 'warning',
-            title: '购买数量不能为0'
-          });
-        }
-        setLoading(true);
-
-        const res = await getWxPayQRCode({
-          type: BillTypeEnum.extraPoints,
-          month,
-          extraPoints: points
-        });
-
-        setQRPayData({
-          readPrice: res.readPrice,
-          codeUrl: res.codeUrl,
-          billId: res.billId
-        });
-      } catch (err) {
-        toast({
-          title: getErrText(err),
-          status: 'error'
-        });
-      }
-      setLoading(false);
-    },
-    [extraPointsPrice, toast]
+  const { mutate: onClickUpdateExtraDatasetPlan, isLoading: isPayingExtraDatasetSize } = useRequest(
+    {
+      mutationFn: () => postUpdateTeamDatasetSizeSub({ size: datasetSize }),
+      onSuccess() {
+        setTimeout(() => {
+          router.reload();
+        }, 100);
+      },
+      successToast: t('common.Update success'),
+      errorToast: t('common.error.Update error')
+    }
   );
+  const { mutate: onClickPreviewCheck, isLoading: isFetchingPreviewCheck } = useRequest({
+    mutationFn: () =>
+      posCheckTeamDatasetSizeSub({
+        size: datasetSize
+      }),
+    onSuccess(res: SubDatasetSizePreviewCheckResponse) {
+      if (!res.payForNewSub) {
+        onClickUpdateExtraDatasetPlan('');
+        return;
+      } else {
+        setConfirmPayExtraDatasetSizeData(res);
+      }
+    },
+    errorToast: t('common.error.Update error')
+  });
 
   return (
     <Flex
@@ -120,13 +101,13 @@ const ExtraPlan = () => {
       alignItems={'center'}
       position={'relative'}
     >
-      <Box id={'extra-plan'} fontWeight={'bold'} fontSize={['24px', '36px']}>
+      <Box fontWeight={'bold'} fontSize={['24px', '36px']}>
         {t('support.wallet.subscription.Extra plan')}
       </Box>
       <Box mt={8} mb={10} color={'myGray.500'} fontSize={'lg'}>
         {t('support.wallet.subscription.Extra plan tip')}
       </Box>
-      <Grid mt={8} gridTemplateColumns={['1fr', '1fr 1fr']} gap={5} w={['100%', 'auto']}>
+      <Grid mt={8} gridTemplateColumns={['1fr', '1fr']}>
         <Box
           bg={'rgba(255, 255, 255, 0.90)'}
           px={'32px'}
@@ -135,60 +116,78 @@ const ExtraPlan = () => {
           borderWidth={'1px'}
           borderColor={'myGray.150'}
           boxShadow={'1.5'}
-          w={['100%', '500px']}
         >
-          <Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
+          <Flex w={['100%', '500px']} borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
             <Box flex={'1 0 0'}>
               <Box fontSize={'xl'} color={'primary.600'}>
                 {t('support.wallet.subscription.Extra dataset size')}
               </Box>
-              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
-                ￥{extraDatasetPrice}/1000组{' '}
+              <Box mt={3} fontSize={['32px', '38px']} fontWeight={'bold'}>
+                ￥{extraDatasetPrice}/1k组{' '}
                 <Box ml={1} as={'span'} fontSize={'lg'} color={'myGray.600'} fontWeight={'normal'}>
                   /{t('common.month')}
                 </Box>
               </Box>
             </Box>
             <MyIcon
-              display={['none', 'display']}
-              mt={'-30px'}
-              transform={'translateX(20px)'}
-              name={'support/bill/extraDatasetsize'}
+              transform={'translate(20px,-20px)'}
+              name={'support/pay/extraDatasetsize'}
               fill={'none'}
             />
           </Flex>
           <Box>
             <Flex mt={4}>
-              <MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
-              购买资源包
-            </Flex>
-            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '0 0 200px']}>
-                {t('support.wallet.subscription.Month amount')}
+              <Box flex={'0 0 200px'}>
+                {t('support.wallet.subscription.Current dataset store')}:{' '}
               </Box>
-              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
-                <NumberInput size={'sm'} flex={1} step={1} min={1} max={12} position={'relative'}>
-                  <NumberInputField
-                    pr={'30px'}
-                    {...registerDatasetSize('month', {
-                      required: true,
-                      min: 1,
-                      max: 12,
-                      valueAsNumber: true
-                    })}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
-                  {t('common.month')}
+              <Box fontWeight={'bold'} flex={1}>
+                {extraDatasetSize?.currentExtraDatasetSize || 0}
+                {t('core.dataset.data.unit')}
+              </Box>
+            </Flex>
+            {extraDatasetSize?.nextExtraDatasetSize !== undefined && (
+              <Flex mt={4}>
+                <Box flex={'0 0 200px'}>
+                  {t('support.wallet.subscription.Next sub dataset size')}:
+                </Box>
+                <Box fontWeight={'bold'} flex={1}>
+                  {extraDatasetSize?.nextExtraDatasetSize || 0}
+                  {t('core.dataset.data.unit')}
                 </Box>
               </Flex>
+            )}
+            {!!extraDatasetSize?.startTime && (
+              <Flex mt={3}>
+                <Box flex={'0 0 200px'}>订阅开始时间: </Box>
+                <Box>{formatTime2YMDHM(extraDatasetSize?.startTime)}</Box>
+              </Flex>
+            )}
+            {!!extraDatasetSize?.expiredTime && (
+              <Flex mt={3}>
+                <Box flex={'0 0 200px'}>订阅到期时间: </Box>
+                <Box>{formatTime2YMDHM(extraDatasetSize?.expiredTime)}</Box>
+              </Flex>
+            )}
+            <Flex mt={3} alignItems={'center'}>
+              <Box flex={'0 0 200px'}>是否自动续费: </Box>
+              <MySelect
+                value={isRenew}
+                size={'sm'}
+                w={'180px'}
+                bg={'myGray.50'}
+                boxShadow={'none'}
+                list={[
+                  { label: '自动续费', value: 'true' },
+                  { label: '不自动续费', value: 'false' }
+                ]}
+                onchange={(e) => {
+                  if (!extraDatasetSize) return;
+                  onUpdateExtraDatasetSizeStatus(e);
+                }}
+              />
             </Flex>
             <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '0 0 200px']}>
+              <Box flex={'0 0 200px'}>
                 {t('support.wallet.subscription.Update extra dataset size')}
               </Box>
               <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
@@ -198,18 +197,13 @@ const ExtraPlan = () => {
                   min={0}
                   max={10000}
                   step={1}
+                  value={datasetSize}
                   position={'relative'}
+                  onChange={(e) => {
+                    setDatasetSize(Number(e));
+                  }}
                 >
-                  <NumberInputField
-                    pr={'30px'}
-                    {...registerDatasetSize('datasetSize', {
-                      required: true,
-                      min: 0,
-                      max: 10000,
-                      valueAsNumber: true
-                    })}
-                    step={1}
-                  />
+                  <NumberInputField pr={'30px'} value={datasetSize} step={1} min={0} max={10000} />
                   <NumberInputStepper>
                     <NumberIncrementStepper />
                     <NumberDecrementStepper />
@@ -221,124 +215,88 @@ const ExtraPlan = () => {
               </Flex>
             </Flex>
             <Button
+              isDisabled={datasetSize * 1000 === extraDatasetSize?.nextExtraDatasetSize}
               mt={6}
               w={'100%'}
               variant={'primaryGhost'}
-              isLoading={loading}
-              onClick={handleSubmitDatasetSize(onclickBuyDatasetSize)}
+              isLoading={isPayingExtraDatasetSize || isFetchingPreviewCheck}
+              onClick={onClickPreviewCheck}
             >
-              {t('support.wallet.Buy')}
-            </Button>
-          </Box>
-        </Box>
-        {/* points */}
-        <Box
-          bg={'rgba(255, 255, 255, 0.90)'}
-          w={['100%', '500px']}
-          px={'32px'}
-          py={'24px'}
-          borderRadius={'2xl'}
-          borderWidth={'1px'}
-          borderColor={'myGray.150'}
-          boxShadow={'1.5'}
-        >
-          <Flex borderBottomWidth={'1px'} borderBottomColor={'myGray.200'}>
-            <Box flex={'1 0 0'}>
-              <Box fontSize={'xl'} color={'primary.600'}>
-                {t('support.wallet.subscription.Extra ai points')}
-              </Box>
-              <Box mt={3} fontSize={['28px', '32px']} fontWeight={'bold'}>
-                ￥{extraPointsPrice}/1000积分{' '}
-                <Box ml={1} as={'span'} fontSize={'lg'} color={'myGray.600'} fontWeight={'normal'}>
-                  /{t('common.month')}
-                </Box>
-              </Box>
-            </Box>
-            <MyIcon
-              display={['none', 'display']}
-              mt={'-30px'}
-              transform={'translateX(20px)'}
-              name={'support/bill/extraPoints'}
-              fill={'none'}
-            />
-          </Flex>
-          <Box>
-            <Flex mt={4}>
-              <MyIcon mr={2} name={'support/bill/shoppingCart'} w={'16px'} color={'primary.600'} />
-              购买资源包
-            </Flex>
-            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '0 0 200px']}>
-                {t('support.wallet.subscription.Month amount')}
-              </Box>
-              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
-                <NumberInput size={'sm'} flex={1} step={1} min={1} max={12} position={'relative'}>
-                  <NumberInputField
-                    pr={'30px'}
-                    {...registerExtraPoints('month', {
-                      required: true,
-                      min: 1,
-                      max: 12,
-                      valueAsNumber: true
-                    })}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
-                  {t('common.month')}
-                </Box>
-              </Flex>
-            </Flex>
-            <Flex mt={4} alignItems={'center'}>
-              <Box flex={['0 0 100px', '0 0 200px']}>
-                {t('support.wallet.subscription.Update extra ai points')}
-              </Box>
-              <Flex alignItems={'center'} mt={1} w={'180px'} position={'relative'}>
-                <NumberInput
-                  size={'sm'}
-                  flex={1}
-                  min={0}
-                  max={10000}
-                  step={1}
-                  position={'relative'}
-                >
-                  <NumberInputField
-                    pr={'30px'}
-                    step={1}
-                    {...registerExtraPoints('points', {
-                      required: true,
-                      min: 0,
-                      max: 10000,
-                      valueAsNumber: true
-                    })}
-                  />
-                  <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                  </NumberInputStepper>
-                </NumberInput>
-                <Box position={'absolute'} right={'20px'} color={'myGray.500'} fontSize={'xs'}>
-                  000积分
-                </Box>
-              </Flex>
-            </Flex>
-            <Button
-              mt={6}
-              w={'100%'}
-              variant={'primaryGhost'}
-              isLoading={loading}
-              onClick={handleSubmitExtraPoints(onclickBuyExtraPoints)}
-            >
-              {t('support.wallet.Buy')}
+              {t('common.change')}
             </Button>
           </Box>
         </Box>
       </Grid>
 
-      {!!qrPayData && <QRCodePayModal {...qrPayData} />}
+      {/* extra dataset size modal */}
+      {!!confirmPayExtraDatasetSizeData && (
+        <MyModal
+          isOpen
+          onClose={() => setConfirmPayExtraDatasetSizeData(undefined)}
+          title={t('support.wallet.Confirm pay')}
+          iconSrc="common/confirm/rightTip"
+        >
+          <ModalBody px={8} py={5}>
+            <Flex>
+              <Box flex={'0 0 120px'} color={'myGray.600'}>
+                当前额外容量
+              </Box>
+              <Box>{extraDatasetSize?.currentExtraDatasetSize || 0}条</Box>
+            </Flex>
+            <Flex mt={4}>
+              <Box flex={'0 0 120px'} color={'myGray.600'}>
+                新的额外容量
+              </Box>
+              <Box>{confirmPayExtraDatasetSizeData.newSubSize}条</Box>
+            </Flex>
+            <Flex mt={4}>
+              <Box flex={'0 0 120px'} color={'myGray.600'}>
+                新套餐价格
+              </Box>
+              <Box>{formatStorePrice2Read(confirmPayExtraDatasetSizeData.newPlanPrice)}元</Box>
+            </Flex>
+            <Flex mt={4}>
+              <Box flex={'0 0 120px'} color={'myGray.600'}>
+                有效时长
+              </Box>
+              <Box>30天</Box>
+            </Flex>
+
+            {/* <Flex>
+              <Box flex={'0 0 120px'}>账号余额:</Box>
+              <Box>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}元</Box>
+            </Flex> */}
+          </ModalBody>
+          <ModalFooter mx={8} px={0} borderTopWidth={'1px'} borderTopColor={'myGray.200'}>
+            <Box color={'myGray.600'}>账号余额：</Box>
+            {confirmPayExtraDatasetSizeData.balanceEnough ? (
+              <>
+                <Box flex={'1 0 0'}>
+                  {formatStorePrice2Read(userInfo?.team?.balance).toFixed(2)}元
+                </Box>
+                <Button
+                  isLoading={isPayingExtraDatasetSize}
+                  onClick={() => onClickUpdateExtraDatasetPlan('')}
+                >
+                  支付{formatStorePrice2Read(confirmPayExtraDatasetSizeData.payPrice).toFixed(2)}元
+                </Button>
+              </>
+            ) : (
+              <>
+                <Box color={'red.600'} flex={'1 0 0'}>
+                  余额不足
+                </Box>
+                <Button
+                  isLoading={isPayingExtraDatasetSize}
+                  onClick={() => router.push('/account')}
+                >
+                  去充值
+                </Button>
+              </>
+            )}
+          </ModalFooter>
+        </MyModal>
+      )}
     </Flex>
   );
 };