fix: one click demo

packages/webapp/src/components/App.tsx

@@ -40,7 +40,9 @@ function AppInsider({ history }) {
         <Router history={history}>
           <Switch>
             <Route path={'/one_click_demo'}>
-              <OneClickDemoPage />
+              <EnsureAuthNotAuthenticated>
+                <OneClickDemoPage />
+              </EnsureAuthNotAuthenticated>
             </Route>
             <Route path={'/auth/register/verify'}>
               <EnsureAuthenticated>

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>
   );
 }

packages/webapp/src/hooks/query/authentication.tsx

@@ -16,7 +16,7 @@ import {
 /**
  * Saves the response data to cookies.
  */
-function setAuthLoginCookies(data) {
+export function setAuthLoginCookies(data) {
   setCookie('token', data.token);
   setCookie('authenticated_user_id', data.user.id);
   setCookie('organization_id', data.tenant.organization_id);

packages/webapp/src/hooks/query/oneclick-demo.ts

@@ -6,9 +6,22 @@ import {
   useQueryClient,
 } from 'react-query';
 import useApiRequest from '../useRequest';
+import {
+  useSetAuthToken,
+  useSetAuthUserId,
+  useSetLocale,
+  useSetOrganizationId,
+  useSetTenantId,
+} from '../state';
+import { setAuthLoginCookies } from './authentication';
+import { batch } from 'react-redux';
 
 interface CreateOneClickDemoValues {}
-interface CreateOneClickDemoRes {}
+interface CreateOneClickDemoRes {
+  email: string;
+  signedIn: any;
+  buildJob: any;
+}
 
 /**
  *
@@ -33,3 +46,54 @@ export function useCreateOneClickDemo(
     },
   );
 }
+
+interface OneClickSigninDemoValues {
+  demoId: string;
+}
+interface OneClickSigninDemoRes {}
+
+/**
+ *
+ * @param {UseMutationOptions<OneClickSigninDemoRes, Error, OneClickSigninDemoValues>} props
+ * @returns {UseMutationResult<OneClickSigninDemoRes, Error, OneClickSigninDemoValues>}
+ */
+export function useOneClickDemoSignin(
+  props?: UseMutationOptions<
+    OneClickSigninDemoRes,
+    Error,
+    OneClickSigninDemoValues
+  >,
+): UseMutationResult<OneClickSigninDemoRes, Error, OneClickSigninDemoValues> {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  const setAuthToken = useSetAuthToken();
+  const setOrganizationId = useSetOrganizationId();
+  const setUserId = useSetAuthUserId();
+  const setTenantId = useSetTenantId();
+  const setLocale = useSetLocale();
+
+  return useMutation<OneClickSigninDemoRes, Error, OneClickSigninDemoValues>(
+    ({ demoId }) =>
+      apiRequest.post(`/demo/one_click_signin`, { demo_id: demoId }),
+    {
+      onSuccess: (res, id) => {
+        // Set authentication cookies.
+        setAuthLoginCookies(res.data);
+
+        batch(() => {
+          // Sets the auth metadata to global state.
+          setAuthToken(res.data.token);
+          setOrganizationId(res.data.tenant.organization_id);
+          setUserId(res.data.user.id);
+          setTenantId(res.data.tenant.id);
+
+          if (res.data?.tenant?.metadata?.language) {
+            setLocale(res.data?.tenant?.metadata?.language);
+          }
+        });
+      },
+      ...props,
+    },
+  );
+}