fix: one-click demo account

packages/server/src/services/OneClickDemo/CreateOneClickDemo.ts

@@ -3,9 +3,10 @@ import { faker } from '@faker-js/faker';
 import uniqid from 'uniqid';
 import AuthenticationApplication from '../Authentication/AuthApplication';
 import OrganizationService from '../Organization/OrganizationService';
-import { IAuthSignInPOJO } from '@/interfaces';
 import { OneClickDemo } from '@/system/models/OneclickDemo';
 import { SystemUser } from '@/system/models';
+import { IAuthSignInPOJO } from '@/interfaces';
+import { ICreateOneClickDemoPOJO } from './interfaces';
 
 @Service()
 export class CreateOneClickDemo {
@@ -53,8 +54,9 @@ export class CreateOneClickDemo {
   /**
    * Sign-in automicatlly using the demo id one creating an account finish.
    * @param {string} oneClickDemoId -
+   * @returns {Promise<IAuthSignInPOJO>}
    */
-  async autoSignIn(oneClickDemoId: string) {
+  async autoSignIn(oneClickDemoId: string): Promise<IAuthSignInPOJO> {
     const foundOneclickDemo = await OneClickDemo.query()
       .findOne('key', oneClickDemoId)
       .throwIfNotFound();
@@ -70,10 +72,3 @@ export class CreateOneClickDemo {
     return signedIn;
   }
 }
-
-interface ICreateOneClickDemoPOJO {
-  email: string;
-  demoId: string;
-  signedIn: IAuthSignInPOJO;
-  buildJob: any;
-}

packages/server/src/services/OneClickDemo/OneClickDemoApplication.ts

@@ -7,19 +7,19 @@ export class OneClickDemoApplication {
   private createOneClickDemoService: CreateOneClickDemo;
 
   /**
-   *
+   * Creates one-click demo account.
-   * @returns
+   * @returns {Promise<ICreateOneClickDemoPOJO>}
    */
   public createOneClick() {
     return this.createOneClickDemoService.createOneClickDemo();
   }
 
   /**
-   *
+   * Auto-sign-in to created demo account.
-   * @param oneClickDemoId
+   * @param {string} demoId -
-   * @returns
+   * @returns {Promise<IAuthSignInPOJO>}
    */
-  public autoSignIn(oneClickDemoId: string) {
+  public autoSignIn(demoId: string) {
-    return this.createOneClickDemoService.autoSignIn(oneClickDemoId);
+    return this.createOneClickDemoService.autoSignIn(demoId);
   }
 }

packages/server/src/services/OneClickDemo/interfaces.ts

@@ -0,0 +1,8 @@
+import { IAuthSignInPOJO } from '@/interfaces';
+
+export interface ICreateOneClickDemoPOJO {
+  email: string;
+  demoId: string;
+  signedIn: IAuthSignInPOJO;
+  buildJob: any;
+}

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { Button, Intent, ProgressBar, Spinner, Text } from '@blueprintjs/core';
+import { Button, Intent, ProgressBar, Text } from '@blueprintjs/core';
 import { useEffect, useState } from 'react';
 import {
   useCreateOneClickDemo,
@@ -14,26 +14,21 @@ export default function OneClickDemoPage() {
     mutateAsync: createOneClickDemo,
     isLoading: isCreateOneClickLoading,
   } = useCreateOneClickDemo();
-  const { mutateAsync: oneClickDemoSignIn } = useOneClickDemoSignin();
+  const {
+    mutateAsync: oneClickDemoSignIn,
+    isLoading: isOneclickDemoSigningIn,
+  } = useOneClickDemoSignin();
   const [buildJobId, setBuildJobId] = useState<string>('');
-  const [demoId, setDemoId] = useState<string>('');
 
-  // Job done state.
+  // Job states.
+  const [demoId, setDemoId] = useState<string>('');
   const [isJobDone, setIsJobDone] = useState<boolean>(false);
 
   const {
-    data: { running, queued, failed, completed },
+    data: { running, completed },
-    isFetching: isJobFetching,
   } = useJob(buildJobId, {
     refetchInterval: 2000,
     enabled: !isJobDone && !!buildJobId,
-    onSuccess: (res) => {
-      if (res.completed) {
-        oneClickDemoSignIn({ demoId }).then((res) => {
-          debugger;
-        });
-      }
-    },
   });
 
   useEffect(() => {
@@ -42,15 +37,25 @@ export default function OneClickDemoPage() {
     }
   }, [completed, setIsJobDone]);
 
+  // One the job done request sign-in using the demo id.
+  useEffect(() => {
+    if (isJobDone) {
+      oneClickDemoSignIn({ demoId }).then((res) => {
+        debugger;
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isJobDone]);
+
   const handleCreateAccountBtnClick = () => {
     createOneClickDemo({})
-      .then((res) => {
+      .then(({ data: { data } }) => {
-        setBuildJobId(res?.data?.data?.build_job?.job_id);
+        setBuildJobId(data?.build_job?.job_id);
-        setDemoId(res?.data?.data?.demo_id);
+        setDemoId(data?.demo_id);
       })
       .catch(() => {});
   };
-  const isLoading = running;
+  const isLoading = running || isOneclickDemoSigningIn;
 
   return (
     <Box className={style.root}>
@@ -61,10 +66,17 @@ export default function OneClickDemoPage() {
           {isLoading && (
             <Stack align={'center'} spacing={15}>
               <ProgressBar stripes value={null} className={style.progressBar} />
+              {isOneclickDemoSigningIn && (
+                <Text className={style.waitingText}>
+                  It's signin-in to your demo account, Just a second!
+                </Text>
+              )}
+              {running && (
                 <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>
@@ -72,7 +84,7 @@ export default function OneClickDemoPage() {
         {!isLoading && (
           <Button
             className={style.oneClickBtn}
-            intent={Intent.PRIMARY}
+            intent={Intent.NONE}
             onClick={handleCreateAccountBtnClick}
             loading={isCreateOneClickLoading}
           >