feat: update demo page flow

Author: steveninhle

ui/dashboard/src/@api/organization/organization-demo-creator.ts

@@ -1,24 +1,43 @@
-import axiosClient from '@api/axios-client';
+import axios, { AxiosInstance } from 'axios';
+import { urls } from 'configs';
+import { getDemoTokenStorage } from 'storage/demo-token';
 import { Organization } from '@types';
 
 export interface OrganizationDemoCreatorPayload {
   name: string;
   urlCode: string;
   description?: string;
-  ownerEmail: string;
+  ownerEmail?: string;
 }
 
 export interface OrganizationDemoResponse {
   organization: Organization;
 }
 
+const axiosClient: AxiosInstance = axios.create({
+  baseURL: urls.WEB_API_ENDPOINT
+});
+
+axiosClient.interceptors.request.use(
+  config => {
+    const authToken = getDemoTokenStorage();
+    if (authToken) {
+      config.headers['Authorization'] = `Bearer ${authToken.accessToken}`;
+    }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
 export const organizationDemoCreator = async (
-  params?: OrganizationDemoCreatorPayload
+  payload?: OrganizationDemoCreatorPayload
 ): Promise<OrganizationDemoResponse> => {
   return axiosClient
     .post<OrganizationDemoResponse>(
       '/v1/environment/create_demo_organization',
-      params
+      payload
     )
     .then(response => response.data);
 };

ui/dashboard/src/auth/auth-demo-callback.tsx

@@ -12,7 +12,7 @@ import { useAuth } from './auth-context';
 
 export const AuthDemoCallbackPage: FC = memo(() => {
   const { errorNotify } = useToast();
-  const { setIsGoogleAuthError, setIsInitialLoading } = useAuth();
+  const { setIsGoogleAuthError } = useAuth();
   const navigate = useNavigate();
   const location = useLocation();
   const query = location.search;
@@ -27,7 +27,6 @@ export const AuthDemoCallbackPage: FC = memo(() => {
         }
       } catch (error) {
         setIsGoogleAuthError(true);
-        setIsInitialLoading(false);
         errorNotify(error);
         navigate(PAGE_PATH_DEMO_SITE);
       }
@@ -37,7 +36,6 @@ export const AuthDemoCallbackPage: FC = memo(() => {
   useEffect(() => {
     const { code, state } = queryString.parse(query);
     const cookieState = getCookieState();
-    setIsInitialLoading(true);
 
     if (!!code && typeof code === 'string' && state === cookieState) {
       onGoogleDemoHandler({

ui/dashboard/src/pages/demo/demo-form.tsx

@@ -1,7 +1,13 @@
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { organizationDemoCreator } from '@api/organization';
 import { yupResolver } from '@hookform/resolvers/yup';
+import { AxiosError } from 'axios';
+import { PAGE_PATH_ROOT } from 'constants/routing';
+import { useToast } from 'hooks';
 import useFormSchema, { FormSchemaProps } from 'hooks/use-form-schema';
 import { useTranslation } from 'i18n';
+import { clearDemoTokenStorage } from 'storage/demo-token';
 import * as yup from 'yup';
 import { onGenerateSlug } from 'utils/converts';
 import Button from 'components/button';
@@ -33,7 +39,16 @@ const formSchema = ({ requiredMessage, translation }: FormSchemaProps) =>
       .required(requiredMessage)
   });
 
-const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
+const DemoForm = ({
+  isDemoSiteEnabled,
+  onDemoAuthenticated
+}: {
+  isDemoSiteEnabled?: boolean;
+  onDemoAuthenticated: (v: boolean) => void;
+}) => {
+  const { errorNotify, notify } = useToast();
+  const navigate = useNavigate();
+
   const { t } = useTranslation(['common', 'form', 'auth', 'message']);
 
   const form = useForm({
@@ -52,11 +67,27 @@ const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
 
   const onSubmit: SubmitHandler<AccessDemoForm> = async values => {
     try {
-      console.log(values);
+      const response = await organizationDemoCreator({
+        name: values.organizationName,
+        urlCode: values.organizationUrlCode
+      });
+
+      if (response?.organization) {
+        notify({
+          message: t('message:collection-action-success', {
+            collection: t('organization'),
+            action: t('created')
+          })
+        });
+        clearDemoTokenStorage();
+        navigate(PAGE_PATH_ROOT);
+      }
     } catch (error) {
-      if (error) {
-        console.log(error);
+      if ((error as AxiosError).status === 401) {
+        onDemoAuthenticated(false);
+        clearDemoTokenStorage();
       }
+      errorNotify(error);
     }
   };
 

ui/dashboard/src/pages/demo/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { authenticationUrl } from '@api/auth';
 import { useQueryDemoSiteStatus } from '@queries/demo-site-status';
 import { urls } from 'configs';
@@ -19,8 +20,8 @@ const AccessDemoPage = () => {
   const authToken = getDemoTokenStorage();
   const { data: demoSiteStatusData, isLoading } = useQueryDemoSiteStatus();
 
+  const [isAuthenticated, setIsAuthenticated] = useState(Boolean(authToken));
   const isDemoSiteEnabled = demoSiteStatusData?.isDemoSiteEnabled;
-  const isAuthenticated = Boolean(authToken);
 
   const { onSubmit: onGoogleLoginHandler, submitting } = useSubmit(() => {
     const state = `${Date.now()}`;
@@ -73,7 +74,10 @@ const AccessDemoPage = () => {
                   {`Sign in With Google`}
                 </Button>
               ) : (
-                <DemoForm isDemoSiteEnabled={isDemoSiteEnabled} />
+                <DemoForm
+                  isDemoSiteEnabled={isDemoSiteEnabled}
+                  onDemoAuthenticated={setIsAuthenticated}
+                />
               )}
             </>
           )}