feat: udpate demo page flow

Author: steveninhle

ui/dashboard/src/@api/auth/exchange-demo-token.ts

@@ -1,5 +1,5 @@
 import axiosClient from '@api/axios-client';
-import { AuthTypeMap, AuthResponse } from '@types';
+import { AuthTypeMap, DemoAuthResponse } from '@types';
 
 export interface ExchangeDemoTokenPayload {
   code: string;
@@ -9,8 +9,8 @@ export interface ExchangeDemoTokenPayload {
 
 export const exchangeDemoToken = async (
   payload: ExchangeDemoTokenPayload
-): Promise<AuthResponse> => {
+): Promise<DemoAuthResponse> => {
   return axiosClient
-    .post<AuthResponse>('/v1/exchange_demo_token', payload)
+    .post<DemoAuthResponse>('/v1/exchange_demo_token', payload)
     .then(response => response.data);
 };

ui/dashboard/src/@api/organization/index.ts

@@ -4,3 +4,4 @@ export * from './organization-archive';
 export * from './organization-unarchive';
 export * from './organization-updater';
 export * from './organization-details-fetcher';
+export * from './organization-demo-creator';

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

@@ -0,0 +1,24 @@
+import axiosClient from '@api/axios-client';
+import { Organization } from '@types';
+
+export interface OrganizationDemoCreatorPayload {
+  name: string;
+  urlCode: string;
+  description?: string;
+  ownerEmail: string;
+}
+
+export interface OrganizationDemoResponse {
+  organization: Organization;
+}
+
+export const organizationDemoCreator = async (
+  params?: OrganizationDemoCreatorPayload
+): Promise<OrganizationDemoResponse> => {
+  return axiosClient
+    .post<OrganizationDemoResponse>(
+      '/v1/environment/create_demo_organization',
+      params
+    )
+    .then(response => response.data);
+};

ui/dashboard/src/@types/auth.ts

@@ -41,6 +41,10 @@ export interface AuthResponse {
   token: AuthToken;
 }
 
+export interface DemoAuthResponse {
+  demoCreationToken: AuthToken;
+}
+
 export interface UserInfoForm {
   firstName: string;
   lastName: string;

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

@@ -6,6 +6,7 @@ import { PAGE_PATH_DEMO_SITE } from 'constants/routing';
 import { getCookieState } from 'cookie';
 import { useSubmit, useToast } from 'hooks';
 import queryString from 'query-string';
+import { setDemoTokenStorage } from 'storage/demo-token';
 import { AppLoading } from 'app';
 import { useAuth } from './auth-context';
 
@@ -20,8 +21,9 @@ export const AuthDemoCallbackPage: FC = memo(() => {
     async (payload: ExchangeTokenPayload) => {
       try {
         const response = await exchangeDemoToken(payload);
-        if (response.token) {
-          navigate(`${PAGE_PATH_DEMO_SITE}?token=${response.token}`);
+        if (response.demoCreationToken) {
+          setDemoTokenStorage(response.demoCreationToken);
+          navigate(PAGE_PATH_DEMO_SITE);
         }
       } catch (error) {
         setIsGoogleAuthError(true);

ui/dashboard/src/hooks/use-toast.tsx

@@ -44,13 +44,20 @@ export const useToast = () => {
     );
 
   const errorNotify = (error?: unknown, message?: string) => {
-    const { message: _message, status } = (error as AxiosError) || {};
+    const {
+      message: _message,
+      status,
+      response
+    } = (error as AxiosError<{ message?: string }>) || {};
     return notify({
       messageType: 'error',
       message:
         status === 409
           ? t('same-data-exists')
-          : message || _message || t('something-went-wrong')
+          : message ||
+            response?.data?.message ||
+            _message ||
+            t('something-went-wrong')
     });
   };
   return {

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

@@ -34,7 +34,7 @@ const formSchema = ({ requiredMessage, translation }: FormSchemaProps) =>
   });
 
 const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
-  const { t } = useTranslation(['common', 'form', 'message']);
+  const { t } = useTranslation(['common', 'form', 'auth', 'message']);
 
   const form = useForm({
     resolver: yupResolver(useFormSchema(formSchema)),
@@ -68,7 +68,7 @@ const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
           name="organizationName"
           render={({ field }) => (
             <Form.Item>
-              <Form.Label required>{t('organization-name')}</Form.Label>
+              <Form.Label required>{t('auth:organization-name')}</Form.Label>
               <Form.Control>
                 <Input
                   placeholder={`${t('form:placeholder-name')}`}
@@ -113,7 +113,7 @@ const DemoForm = ({ isDemoSiteEnabled }: { isDemoSiteEnabled?: boolean }) => {
             <Form.Item>
               <Form.Control>
                 <Checkbox
-                  title={t('demo-agree-terms')}
+                  title={t('auth:demo-agree-terms')}
                   checked={field.value}
                   onCheckedChange={field.onChange}
                 />

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

@@ -1,12 +1,10 @@
-import { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 import { authenticationUrl } from '@api/auth';
 import { useQueryDemoSiteStatus } from '@queries/demo-site-status';
 import { urls } from 'configs';
 import { setCookieState } from 'cookie';
 import { useSubmit } from 'hooks';
 import { useTranslation } from 'i18n';
-import queryString from 'query-string';
+import { getDemoTokenStorage } from 'storage/demo-token';
 import { cn } from 'utils/style';
 import { IconGoogle } from '@icons';
 import AuthWrapper from 'pages/signin/elements/auth-wrapper';
@@ -17,14 +15,12 @@ import DemoForm from './demo-form';
 
 const AccessDemoPage = () => {
   const { t } = useTranslation(['common', 'auth', 'message']);
-  const location = useLocation();
-  const query = location.search;
 
-  const [userToken, setUserToken] = useState('');
+  const authToken = getDemoTokenStorage();
   const { data: demoSiteStatusData, isLoading } = useQueryDemoSiteStatus();
 
   const isDemoSiteEnabled = demoSiteStatusData?.isDemoSiteEnabled;
-  const isAuthenticated = Boolean(userToken);
+  const isAuthenticated = Boolean(authToken);
 
   const { onSubmit: onGoogleLoginHandler, submitting } = useSubmit(() => {
     const state = `${Date.now()}`;
@@ -41,13 +37,6 @@ const AccessDemoPage = () => {
     });
   });
 
-  useEffect(() => {
-    const { token } = queryString.parse(query);
-    if (token && typeof token === 'string') {
-      setUserToken(token);
-    }
-  }, [query]);
-
   return (
     <AuthWrapper>
       {isLoading ? (

ui/dashboard/src/storage/demo-token.ts

@@ -0,0 +1,33 @@
+import { type Nullable } from 'option-t/nullable';
+import { AuthToken } from '@types';
+
+const KEY = 'demo_token';
+
+export const getDemoTokenStorage = (): Nullable<AuthToken> => {
+  try {
+    const tokenStr = window.localStorage.getItem(KEY);
+    if (tokenStr) {
+      const token = JSON.parse(tokenStr);
+      return token;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  return null;
+};
+
+export const setDemoTokenStorage = (token: AuthToken): void => {
+  try {
+    window.localStorage.setItem(KEY, JSON.stringify(token));
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const clearDemoTokenStorage = (): void => {
+  try {
+    window.localStorage.removeItem(KEY);
+  } catch (error) {
+    console.error(error);
+  }
+};