fix: one click demo

packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.module.scss

@@ -0,0 +1,32 @@
+
+
+.root {
+  text-align: center;
+  display: flex;
+  height: 100vh;
+  width: 100%;
+}
+
+.inner{
+  margin: auto;
+  max-width: 450px;
+}
+
+.progressBar{
+  height: 5px;
+
+  :global .bp4-progress-meter{
+    background-color: rgba(159, 171, 188, 0.8)
+  }
+}
+
+.oneClickBtn {
+  width: 400px;
+  margin-top: 3rem;
+}
+
+.waitingText{
+  font-size: 15px;
+  line-height: 1.54;
+  color: #5F6B7C;
+}

packages/webapp/src/containers/OneClickDemo/OneClickDemoPage.tsx

@@ -1,39 +1,85 @@
 // @ts-nocheck
+import { Button, Intent, ProgressBar, Spinner, Text } from '@blueprintjs/core';
 import { useEffect, useState } from 'react';
-import { Box } from '@/components';
-import { useCreateOneClickDemo } from '@/hooks/query/oneclick-demo';
-import { Button } from '@blueprintjs/core';
+import {
+  useCreateOneClickDemo,
+  useOneClickDemoSignin,
+} from '@/hooks/query/oneclick-demo';
+import { Box, Icon, Stack } from '@/components';
 import { useJob } from '@/hooks/query';
+import style from './OneClickDemoPage.module.scss';
 
 export default function OneClickDemoPage() {
-  const { mutateAsync: createOneClickDemo } = useCreateOneClickDemo();
+  const {
+    mutateAsync: createOneClickDemo,
+    isLoading: isCreateOneClickLoading,
+  } = useCreateOneClickDemo();
+  const { mutateAsync: oneClickDemoSignIn } = useOneClickDemoSignin();
   const [buildJobId, setBuildJobId] = useState<string>('');
+  const [demoId, setDemoId] = useState<string>('');
+
+  // Job done state.
+  const [isJobDone, setIsJobDone] = useState<boolean>(false);
 
   const {
     data: { running, queued, failed, completed },
     isFetching: isJobFetching,
   } = useJob(buildJobId, {
     refetchInterval: 2000,
-    enabled: !!buildJobId,
+    enabled: !isJobDone && !!buildJobId,
+    onSuccess: (res) => {
+      if (res.completed) {
+        oneClickDemoSignIn({ demoId }).then((res) => {
+          debugger;
+        });
+      }
+    },
   });
 
   useEffect(() => {
     if (completed) {
+      setIsJobDone(true);
     }
-  }, [completed]);
+  }, [completed, setIsJobDone]);
 
   const handleCreateAccountBtnClick = () => {
     createOneClickDemo({})
       .then((res) => {
-        setBuildJobId(res?.data?.data?.build_job?.job_id)
+        setBuildJobId(res?.data?.data?.build_job?.job_id);
+        setDemoId(res?.data?.data?.demo_id);
       })
       .catch(() => {});
   };
+  const isLoading = running;
 
   return (
-    <Box>
-      {running && (<h1>Building...</h1>)}
-      <Button onClick={handleCreateAccountBtnClick}>One-Click Create</Button>
+    <Box className={style.root}>
+      <Box className={style.inner}>
+        <Stack align={'center'} spacing={40}>
+          <Icon icon="bigcapital" height={37} width={228} />
+
+          {isLoading && (
+            <Stack align={'center'} spacing={15}>
+              <ProgressBar stripes value={null} className={style.progressBar} />
+              <Text className={style.waitingText}>
+                We're preparing temporary environment for trial, It typically
+                take few seconds. Do not close or refresh the page.
+              </Text>
+            </Stack>
+          )}
+        </Stack>
+
+        {!isLoading && (
+          <Button
+            className={style.oneClickBtn}
+            intent={Intent.PRIMARY}
+            onClick={handleCreateAccountBtnClick}
+            loading={isCreateOneClickLoading}
+          >
+            Create Demo Account
+          </Button>
+        )}
+      </Box>
     </Box>
   );
 }