feat(ee): one-click demo account

packages/webapp/src/components/App.tsx

@@ -27,7 +27,9 @@ const EmailConfirmation = LazyLoader({
 const RegisterVerify = LazyLoader({
   loader: () => import('@/containers/Authentication/RegisterVerify'),
 });
-
+const OneClickDemoPage = LazyLoader({
+  loader: () => import('@/containers/OneClickDemo/OneClickDemoPage'),
+});
 /**
  * App inner.
  */
@@ -37,6 +39,9 @@ function AppInsider({ history }) {
       <DashboardThemeProvider>
         <Router history={history}>
           <Switch>
+            <Route path={'/one_click_demo'}>
+              <OneClickDemoPage />
+            </Route>
             <Route path={'/auth/register/verify'}>
               <EnsureAuthenticated>
                 <EnsureUserEmailNotVerified>

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

@@ -0,0 +1,39 @@
+// @ts-nocheck
+import { useEffect, useState } from 'react';
+import { Box } from '@/components';
+import { useCreateOneClickDemo } from '@/hooks/query/oneclick-demo';
+import { Button } from '@blueprintjs/core';
+import { useJob } from '@/hooks/query';
+
+export default function OneClickDemoPage() {
+  const { mutateAsync: createOneClickDemo } = useCreateOneClickDemo();
+  const [buildJobId, setBuildJobId] = useState<string>('');
+
+  const {
+    data: { running, queued, failed, completed },
+    isFetching: isJobFetching,
+  } = useJob(buildJobId, {
+    refetchInterval: 2000,
+    enabled: !!buildJobId,
+  });
+
+  useEffect(() => {
+    if (completed) {
+    }
+  }, [completed]);
+
+  const handleCreateAccountBtnClick = () => {
+    createOneClickDemo({})
+      .then((res) => {
+        setBuildJobId(res?.data?.data?.build_job?.job_id)
+      })
+      .catch(() => {});
+  };
+
+  return (
+    <Box>
+      {running && (<h1>Building...</h1>)}
+      <Button onClick={handleCreateAccountBtnClick}>One-Click Create</Button>
+    </Box>
+  );
+}

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

@@ -0,0 +1,35 @@
+// @ts-nocheck
+import {
+  useMutation,
+  UseMutationOptions,
+  UseMutationResult,
+  useQueryClient,
+} from 'react-query';
+import useApiRequest from '../useRequest';
+
+interface CreateOneClickDemoValues {}
+interface CreateOneClickDemoRes {}
+
+/**
+ *
+ * @param {UseMutationOptions<CreateOneClickDemoRes, Error, CreateOneClickDemoValues>} props
+ * @returns {UseMutationResult<CreateOneClickDemoRes, Error, CreateOneClickDemoValues>}
+ */
+export function useCreateOneClickDemo(
+  props?: UseMutationOptions<
+    CreateOneClickDemoRes,
+    Error,
+    CreateOneClickDemoValues
+  >,
+): UseMutationResult<CreateOneClickDemoRes, Error, CreateOneClickDemoValues> {
+  const queryClient = useQueryClient();
+  const apiRequest = useApiRequest();
+
+  return useMutation<CreateOneClickDemoRes, Error, CreateOneClickDemoValues>(
+    () => apiRequest.post(`/demo/one_click`),
+    {
+      onSuccess: (res, id) => {},
+      ...props,
+    },
+  );
+}