feat: add demo account button on onboarding

packages/webapp/src/components/App.tsx

@@ -20,6 +20,7 @@ import { queryConfig } from '../hooks/query/base';
 import { EnsureUserEmailVerified } from './Guards/EnsureUserEmailVerified';
 import { EnsureAuthNotAuthenticated } from './Guards/EnsureAuthNotAuthenticated';
 import { EnsureUserEmailNotVerified } from './Guards/EnsureUserEmailNotVerified';
+import { EnsureOneClickDemoAccountEnabled } from '@/containers/OneClickDemo/EnsureOneClickDemoAccountEnabled';
 
 const EmailConfirmation = LazyLoader({
   loader: () => import('@/containers/Authentication/EmailConfirmation'),
@@ -40,9 +41,11 @@ function AppInsider({ history }) {
         <Router history={history}>
           <Switch>
             <Route path={'/one_click_demo'}>
-              <EnsureAuthNotAuthenticated>
+              <EnsureOneClickDemoAccountEnabled>
-                <OneClickDemoPage />
+                <EnsureAuthNotAuthenticated>
-              </EnsureAuthNotAuthenticated>
+                  <OneClickDemoPage />
+                </EnsureAuthNotAuthenticated>
+              </EnsureOneClickDemoAccountEnabled>
             </Route>
             <Route path={'/auth/register/verify'}>
               <EnsureAuthenticated>

packages/webapp/src/config.ts

@@ -0,0 +1,6 @@
+export const Config = {
+  oneClickDemo: {
+    enable: process.env.REACT_APP_ONE_CLICK_DEMO_ENABLE === 'true',
+    demoUrl: process.env.REACT_APP_DEMO_ACCOUNT_URL || '',
+  },
+};

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Redirect } from 'react-router-dom';
+import { Config } from '@/config';
+
+interface EnsureOneClickDemoAccountEnabledProps {
+  children: React.ReactNode;
+  redirectTo?: string;
+}
+
+export const EnsureOneClickDemoAccountEnabled = ({
+  children,
+  redirectTo = '/',
+}: EnsureOneClickDemoAccountEnabledProps) => {
+  const enabeld = Config.oneClickDemo.enable || false;
+
+  if (!enabeld) {
+    return <Redirect to={{ pathname: redirectTo }} />;
+  }
+  return <>{children}</>;
+};

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

@@ -18,10 +18,10 @@ export default function OneClickDemoPage() {
     mutateAsync: oneClickDemoSignIn,
     isLoading: isOneclickDemoSigningIn,
   } = useOneClickDemoSignin();
-  const [buildJobId, setBuildJobId] = useState<string>('');
 
   // Job states.
   const [demoId, setDemoId] = useState<string>('');
+  const [buildJobId, setBuildJobId] = useState<string>('');
   const [isJobDone, setIsJobDone] = useState<boolean>(false);
 
   const {

packages/webapp/src/containers/Setup/SetupLeftSection.module.scss

@@ -0,0 +1,22 @@
+.demoButton {
+  width: 100%;
+  margin-bottom: 2rem;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgb(255, 255, 255, 0.3);
+  padding: 10px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.95);
+    border: 1px solid rgb(255, 255, 255, 0.6);   
+  }
+}
+.demoButtonLabel{
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 13px;
+}

packages/webapp/src/containers/Setup/SetupLeftSection.tsx

@@ -1,9 +1,13 @@
 // @ts-nocheck
 import React from 'react';
-import { Icon, For, FormattedMessage as T } from '@/components';
+import { Icon, For, FormattedMessage as T, Stack } from '@/components';
 
 import { getFooterLinks } from '@/constants/footerLinks';
 import { useAuthActions } from '@/hooks/state';
+import style from './SetupLeftSection.module.scss';
+import { Text } from '@blueprintjs/core';
+import { Config } from '@/config';
+import { useHistory } from 'react-router-dom';
 
 /**
  * Footer item link.
@@ -25,8 +29,21 @@ function SetupLeftSectionFooter() {
   // Retrieve the footer links.
   const footerLinks = getFooterLinks();
 
+  const handleDemoBtnClick = () => {
+    window.open(Config.oneClickDemo.demoUrl);
+  };
+
   return (
     <div className={'content__footer'}>
+      {Config.oneClickDemo.demoUrl && (
+        <Stack spacing={16}>
+          <Text className={style.demoButtonLabel}>Not Now?</Text>
+          <button className={style.demoButton} onClick={handleDemoBtnClick}>
+            Try Demo Account
+          </button>
+        </Stack>
+      )}
+
       <div className={'content__links'}>
         <For render={FooterLinkItem} of={footerLinks} />
       </div>