From 41a17d872ef6392f1775e10877db5241c2a0ddc9 Mon Sep 17 00:00:00 2001
From: zhujingyang <72259332+zjy365@users.noreply.github.com>
Date: Thu, 2 Nov 2023 14:05:50 +0800
Subject: [PATCH] feat:standard cluster purchase process (#4225)

* feat:standard cluster purchase process

Signed-off-by: jingyang <3161362058@qq.com>

* fix cronjob

Signed-off-by: jingyang <3161362058@qq.com>

---------

Signed-off-by: jingyang <3161362058@qq.com>
---
 .../providers/cronjob/src/utils/json2Yaml.ts  |  2 +
 service/license/src/hooks/useConfirm.tsx      | 91 +++++++++++++++++++
 .../src/pages/pricing/components/Product.tsx  | 14 ++-
 3 files changed, 104 insertions(+), 3 deletions(-)
 create mode 100644 service/license/src/hooks/useConfirm.tsx

diff --git a/frontend/providers/cronjob/src/utils/json2Yaml.ts b/frontend/providers/cronjob/src/utils/json2Yaml.ts
index f0dab0f654f..a98fce275d8 100644
--- a/frontend/providers/cronjob/src/utils/json2Yaml.ts
+++ b/frontend/providers/cronjob/src/utils/json2Yaml.ts
@@ -107,6 +107,8 @@ export const json2CronJob = (data: CronJobEditType) => {
     metadata: metadata,
     spec: {
       schedule: data.schedule,
+      concurrencyPolicy: 'Forbid',
+      startingDeadlineSeconds: 60,
       successfulJobsHistoryLimit: 3,
       failedJobsHistoryLimit: 3,
       timeZone: timeZone,
diff --git a/service/license/src/hooks/useConfirm.tsx b/service/license/src/hooks/useConfirm.tsx
new file mode 100644
index 00000000000..2aa24b7888b
--- /dev/null
+++ b/service/license/src/hooks/useConfirm.tsx
@@ -0,0 +1,91 @@
+import {
+  Center,
+  Flex,
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalOverlay,
+  Text,
+  useDisclosure
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useCallback, useRef } from 'react';
+
+export const useConfirm = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { t } = useTranslation();
+  const confirmCb = useRef<any>();
+  const cancelCb = useRef<any>();
+
+  return {
+    openConfirm: useCallback(
+      (confirm?: any, cancel?: any) => {
+        return function () {
+          onOpen();
+          confirmCb.current = confirm;
+          cancelCb.current = cancel;
+        };
+      },
+      [onOpen]
+    ),
+    ConfirmChild: useCallback(
+      () => (
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalCloseButton />
+            <Flex
+              flexDirection={'column'}
+              px="37px"
+              pt="90px"
+              pb="42px"
+              alignItems={'center'}
+              justifyContent={'center'}
+            >
+              <Text color={'#24282C'} fontWeight={500} fontSize={'24px'}>
+                将为您新建一个标准版集群
+              </Text>
+              <Text mt="28px" fontSize={'14px'} fontWeight={400} color={'#7B838B'}>
+                点击立即开始后将会新建一个集群
+              </Text>
+              <Center
+                mt="62px"
+                w="218px"
+                h="44px"
+                bg={'#24282C'}
+                color={'white'}
+                fontSize={'14px'}
+                fontWeight={500}
+                borderRadius={'4px'}
+                cursor={'pointer'}
+                onClick={() => {
+                  onClose();
+                  typeof confirmCb.current === 'function' && confirmCb.current();
+                }}
+              >
+                立即开始
+              </Center>
+              <Center
+                mt="16px"
+                w="218px"
+                h="20px"
+                bg={'white'}
+                color={'#7B838B'}
+                fontSize={'14px'}
+                fontWeight={400}
+                cursor={'pointer'}
+                onClick={() => {
+                  onClose();
+                  typeof cancelCb.current === 'function' && cancelCb.current();
+                }}
+              >
+                已有集群
+              </Center>
+            </Flex>
+          </ModalContent>
+        </Modal>
+      ),
+      [isOpen, onClose]
+    )
+  };
+};
diff --git a/service/license/src/pages/pricing/components/Product.tsx b/service/license/src/pages/pricing/components/Product.tsx
index f9e08fc76b5..b1826b05e0e 100644
--- a/service/license/src/pages/pricing/components/Product.tsx
+++ b/service/license/src/pages/pricing/components/Product.tsx
@@ -31,13 +31,14 @@ import ServicePackage from './ServicePackage';
 import useRouteParamsStore from '@/stores/routeParams';
 import useSessionStore from '@/stores/session';
 import usePaymentDataStore from '@/stores/payment';
+import { useConfirm } from '@/hooks/useConfirm';
 
 export default function Product() {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
   const router = useRouter();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  // const { isOpen: isOpenStatus, onOpen: onOpenSuccess, onClose: onCloseSuccess } = useDisclosure();
+  const { openConfirm, ConfirmChild } = useConfirm();
   const toast = useToast({ position: 'top', duration: 2000 });
   // 整个流程跑通需要状态管理, 0 初始态， 1 创建支付单， 2 支付中, 3 支付成功
   const [complete, setComplete] = useState<0 | 1 | 2 | 3>(0);
@@ -73,8 +74,14 @@ export default function Product() {
   const handleProductByType = (type: ClusterType) => {
     setClusterType(type);
     if (type === ClusterType.Standard) {
-      onOpen();
-      clusterMutation.mutate({ type: ClusterType.Standard });
+      openConfirm(
+        () => {
+          clusterMutation.mutate({ type: ClusterType.Standard });
+        },
+        () => {
+          router.push('/cluster');
+        }
+      )();
     }
     if (type === ClusterType.Enterprise) {
       openPayModal();
@@ -462,6 +469,7 @@ export default function Product() {
           )}
         </ModalContent>
       </Modal>
+      <ConfirmChild />
     </>
   );
 }