From 891d475a05fa24642b7d2bafc3ec31d5a08f4ee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20S=C3=B6derberg?=
 <2233092+davidsoderberg@users.noreply.github.com>
Date: Thu, 27 Jun 2024 11:51:53 +0200
Subject: [PATCH] feat(web): refactor onboarding (#5849)

---
 .../layout/components/LocalStudioHeader.tsx   |  8 ++-
 .../studio-onboarding/components/Footer.tsx   | 20 +-----
 .../components/SetupTimeline.tsx              | 64 ++++---------------
 .../web/src/pages/studio-onboarding/index.tsx | 36 ++++-------
 .../src/pages/studio-onboarding/success.tsx   |  1 -
 .../pages/studio-onboarding/useSetupBridge.ts | 34 ----------
 .../src/pages/studio-onboarding/useUrlTest.ts | 10 +--
 7 files changed, 38 insertions(+), 135 deletions(-)
 delete mode 100644 apps/web/src/pages/studio-onboarding/useSetupBridge.ts

diff --git a/apps/web/src/components/layout/components/LocalStudioHeader.tsx b/apps/web/src/components/layout/components/LocalStudioHeader.tsx
index 17775b1487b..9ee1a89530f 100644
--- a/apps/web/src/components/layout/components/LocalStudioHeader.tsx
+++ b/apps/web/src/components/layout/components/LocalStudioHeader.tsx
@@ -5,14 +5,20 @@ import { IconHelpOutline, IconOutlineArrowBack } from '@novu/novui/icons';
 import { HStack } from '@novu/novui/jsx';
 import { hstack } from '@novu/novui/patterns';
 import { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { discordInviteUrl } from '../../../pages/quick-start/consts';
 import { DocsButton } from '../../docs/DocsButton';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ROUTES } from '../../../constants/routes';
 import { HEADER_NAV_HEIGHT } from '../constants';
 import { BridgeMenuItems } from './v2/BridgeMenuItems';
 
 export const LocalStudioHeader: FC = () => {
   const navigate = useNavigate();
+  const { pathname } = useLocation();
+
+  if (pathname.startsWith(ROUTES.STUDIO_ONBOARDING)) {
+    return null;
+  }
 
   return (
     <Header
diff --git a/apps/web/src/pages/studio-onboarding/components/Footer.tsx b/apps/web/src/pages/studio-onboarding/components/Footer.tsx
index f7a0e4add37..b554c6904c7 100644
--- a/apps/web/src/pages/studio-onboarding/components/Footer.tsx
+++ b/apps/web/src/pages/studio-onboarding/components/Footer.tsx
@@ -2,18 +2,16 @@ import { text } from '@novu/novui/recipes';
 import { HStack, styled, VStack } from '@novu/novui/jsx';
 import { Tooltip } from '@novu/design-system';
 import { IconOutlineMenuBook } from '@novu/novui/icons';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { css } from '@novu/novui/css';
 import { When } from '../../../components/utils/When';
 import { DocsButton } from '../../../components/docs/DocsButton';
 import { Button } from '@novu/novui';
 import { useSegment } from '../../../components/providers/SegmentProvider';
-import { ROUTES } from '../../../constants/routes';
 
 const Text = styled('a', text);
 
 export const Footer = ({
-  canSkipSetup = true,
   showLearnMore = true,
   buttonText = 'Continue',
   onClick,
@@ -21,7 +19,6 @@ export const Footer = ({
   tooltip = '',
   disabled = false,
 }: {
-  canSkipSetup?: boolean;
   showLearnMore?: boolean;
   buttonText?: string;
   onClick?: () => void;
@@ -30,7 +27,6 @@ export const Footer = ({
   disabled?: boolean;
 }) => {
   const segment = useSegment();
-  const navigate = useNavigate();
   const { pathname } = useLocation();
 
   return (
@@ -77,20 +73,6 @@ export const Footer = ({
             </When>
           </div>
           <HStack gap="100">
-            <When truthy={canSkipSetup}>
-              <Button
-                disabled={loading}
-                onClick={() => {
-                  segment.track('Skip setup button clicked - [Onboarding - Signup]', {
-                    step: pathname,
-                  });
-                  navigate(ROUTES.STUDIO_FLOWS);
-                }}
-                variant="outline"
-              >
-                Skip setup
-              </Button>
-            </When>
             <Tooltip label={tooltip} disabled={!tooltip}>
               <Button loading={loading} onClick={onClick} disabled={disabled}>
                 {buttonText}
diff --git a/apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx b/apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx
index 880d010f891..ad987a4aa8d 100644
--- a/apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx
+++ b/apps/web/src/pages/studio-onboarding/components/SetupTimeline.tsx
@@ -1,8 +1,7 @@
 import { CodeSnippet } from '../../get-started/components/CodeSnippet';
 import { Loader, Timeline as MantineTimeline } from '@mantine/core';
 import { useEffect, useMemo, useState } from 'react';
-import { Input } from '@novu/design-system';
-import { IconCheck, IconCancel } from '@novu/novui/icons';
+import { IconCheck } from '@novu/novui/icons';
 import { useQuery } from '@tanstack/react-query';
 import { getApiKeys } from '../../../api/environment';
 import { Text } from '@novu/novui';
@@ -17,29 +16,22 @@ const Icon = () => (
   />
 );
 
-export const SetupTimeline = ({
-  error,
-  url,
-  setUrl,
-  testResponse,
-  retest,
-}: {
-  error: string;
-  url: string;
-  setUrl: (url: string) => void;
-  testResponse: { isLoading: boolean; data: { status: string } };
-  retest: () => void;
-}) => {
+export const SetupTimeline = ({ testResponse }: { testResponse: { isLoading: boolean; data: { status: string } } }) => {
   const { data: apiKeys = [] } = useQuery<{ key: string }[]>(['getApiKeys'], getApiKeys);
   const key = useMemo(() => apiKeys[0]?.key, [apiKeys]);
   const [active, setActive] = useState(0);
 
+  useEffect(() => {
+    if (testResponse?.isLoading || testResponse?.data?.status !== 'ok') {
+      return;
+    }
+    setActive(3);
+  }, [testResponse?.data?.status, testResponse?.isLoading]);
+
   function CheckStatusIcon() {
     return (
       <>
-        {testResponse?.isLoading ? <Loader size={16} color={'indigo'} /> : null}
-        {testResponse?.data?.status === 'ok' ? <IconCheck color="green" /> : null}
-        {url && !testResponse?.isLoading && testResponse?.data?.status !== 'ok' ? <IconCancel color="#f45c5c" /> : null}
+        {testResponse?.isLoading || testResponse?.data?.status !== 'ok' ? <Loader size={16} color="white" /> : <Icon />}
       </>
     );
   }
@@ -76,46 +68,14 @@ export const SetupTimeline = ({
         />
       </MantineTimeline.Item>
       <MantineTimeline.Item
-        bullet={active >= 2 ? <Icon /> : 2}
-        lineVariant="dashed"
-        title="Start a localtunnel to your application"
-        active={active >= 2}
-      >
-        <CodeSnippet
-          command={'npx localtunnel --port=4000'}
-          onClick={() => {
-            setActive((old) => (old > 2 ? old : 2));
-          }}
-        />
-      </MantineTimeline.Item>
-      <MantineTimeline.Item
-        bullet={active >= 3 ? <Icon /> : 3}
+        bullet={<CheckStatusIcon />}
         lineVariant="dashed"
         title="Connect to the endpoint"
         active={active >= 3}
       >
         <Text variant="main" color="typography.text.secondary">
-          Enter the Novu Endpoint URL generated by the CLI.
+          {active < 3 ? 'Waiting for you to start the application' : 'Succefully connected to the Novu Endpoint'}
         </Text>
-        <Input
-          rightSection={<CheckStatusIcon />}
-          type="url"
-          placeholder={'For Example: https://cold-dryers-leave.loca.lt/api/novu'}
-          onChange={(e) => {
-            setUrl(e.target.value);
-          }}
-          value={url}
-          error={
-            (url && error) || (url && !testResponse.isLoading && testResponse.data?.status !== 'ok') ? (
-              <>
-                Could not locate a valid Novu Endpoint.{' '}
-                <a style={{ textDecoration: 'underline', cursor: 'pointer' }} onClick={() => retest()}>
-                  Try Again
-                </a>
-              </>
-            ) : null
-          }
-        />
       </MantineTimeline.Item>
     </Timeline>
   );
diff --git a/apps/web/src/pages/studio-onboarding/index.tsx b/apps/web/src/pages/studio-onboarding/index.tsx
index cfd13945108..c01ec578401 100644
--- a/apps/web/src/pages/studio-onboarding/index.tsx
+++ b/apps/web/src/pages/studio-onboarding/index.tsx
@@ -1,40 +1,32 @@
 import { css } from '@novu/novui/css';
 import { Footer } from './components/Footer';
 import { Header } from './components/Header';
-import { useEffect, useState } from 'react';
-import { useEnvironment } from '../../hooks/useEnvironment';
+import { useEffect } from 'react';
 import { Title, Text } from '@novu/novui';
 import { VStack } from '@novu/novui/jsx';
 import { SetupTimeline } from './components/SetupTimeline';
-import { useSetupBridge } from './useSetupBridge';
 import { useSegment } from '../../components/providers/SegmentProvider';
 import { Wrapper } from './components/Wrapper';
+import { ROUTES } from '../../constants/routes';
+import { useNavigate } from 'react-router-dom';
+import { useBridgeUrlTest } from './useUrlTest';
 
 export const StudioOnboarding = () => {
-  const [url, setUrl] = useState('');
-  const [error, setError] = useState<string>('');
-  const { loading, setup, testEndpoint, testResponse } = useSetupBridge(url, setError);
   const segment = useSegment();
+  const navigate = useNavigate();
+  const { runHealthCheck, isLoading, data } = useBridgeUrlTest();
 
   useEffect(() => {
-    const delayDebounceFn = setTimeout(() => testEndpoint(url), 500);
+    const delayDebounceFn = setTimeout(() => runHealthCheck(), 500);
 
     return () => clearTimeout(delayDebounceFn);
-  }, [url, testEndpoint]);
+  }, [runHealthCheck]);
 
   useEffect(() => {
     segment.track('Add endpoint step started - [Onboarding - Signup]');
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  async function retest(continueSetup = false) {
-    const result = await testEndpoint(url);
-
-    if (continueSetup && result.data?.status === 'ok') {
-      await setup();
-    }
-  }
-
   return (
     <Wrapper>
       <Header />
@@ -56,19 +48,15 @@ export const StudioOnboarding = () => {
             To start sending your first workflows, you first need to connect Novu to your Bridge Endpoint. This setup
             will create a sample Next.js project and pre-configured the @novu/framework client for you.
           </Text>
-          <SetupTimeline error={error} url={url} setUrl={setUrl} testResponse={testResponse} retest={retest} />
+          <SetupTimeline testResponse={{ data, isLoading }} />
         </div>
       </VStack>
       <Footer
-        disabled={loading || !url}
+        disabled={data?.status !== 'ok'}
         onClick={async () => {
-          if (testResponse.data?.status === 'ok') {
-            setup();
-          } else {
-            retest(true);
-          }
+          navigate(ROUTES.STUDIO_ONBOARDING_PREVIEW);
         }}
-        loading={loading}
+        loading={isLoading}
       />
     </Wrapper>
   );
diff --git a/apps/web/src/pages/studio-onboarding/success.tsx b/apps/web/src/pages/studio-onboarding/success.tsx
index cd389e7810d..f596b358e0e 100644
--- a/apps/web/src/pages/studio-onboarding/success.tsx
+++ b/apps/web/src/pages/studio-onboarding/success.tsx
@@ -141,7 +141,6 @@ export const StudioOnboardingSuccess = () => {
           segment.track('Workflows page accessed - [Onboarding - Signup]');
           navigate(ROUTES.STUDIO_FLOWS);
         }}
-        canSkipSetup={false}
         buttonText="Explore workflows"
         showLearnMore={false}
       />
diff --git a/apps/web/src/pages/studio-onboarding/useSetupBridge.ts b/apps/web/src/pages/studio-onboarding/useSetupBridge.ts
deleted file mode 100644
index 8f7cc238660..00000000000
--- a/apps/web/src/pages/studio-onboarding/useSetupBridge.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-import { ROUTES } from '../../constants/routes';
-import { useBridgeUrlTest } from './useUrlTest';
-import { useState } from 'react';
-import { useBridgeURL } from '../../studio/hooks/useBridgeURL';
-
-export const useSetupBridge = (url: string, setError: (error: string) => void) => {
-  const [loading, setLoading] = useState<boolean>(false);
-  const { setBridgeUrl } = useBridgeURL();
-
-  const navigate = useNavigate();
-  const { runHealthCheck, isLoading, data } = useBridgeUrlTest();
-
-  async function mutate() {
-    setLoading(true);
-
-    await runHealthCheck(url);
-
-    setBridgeUrl(url);
-    setLoading(false);
-
-    navigate(ROUTES.STUDIO_ONBOARDING_PREVIEW);
-  }
-
-  return {
-    setup: mutate,
-    testEndpoint: runHealthCheck,
-    testResponse: {
-      isLoading: isLoading,
-      data,
-    },
-    loading: loading,
-  };
-};
diff --git a/apps/web/src/pages/studio-onboarding/useUrlTest.ts b/apps/web/src/pages/studio-onboarding/useUrlTest.ts
index ffac3f5ff77..76e16c3c008 100644
--- a/apps/web/src/pages/studio-onboarding/useUrlTest.ts
+++ b/apps/web/src/pages/studio-onboarding/useUrlTest.ts
@@ -1,20 +1,22 @@
 import { useMutation } from '@tanstack/react-query';
+import { useStudioState } from '../../studio/StudioStateProvider';
 
 export function useBridgeUrlTest() {
+  const { bridgeURL } = useStudioState();
+
   const {
     isLoading,
     mutateAsync: runHealthCheck,
-
     data,
-  } = useMutation(async (url: string) => {
+  } = useMutation(async () => {
     try {
-      new URL(url);
+      new URL(bridgeURL);
     } catch (e) {
       throw new Error('The provided URL is invalid');
     }
 
     try {
-      const response = await fetch(url + '?action=health-check', {
+      const response = await fetch(bridgeURL + '?action=health-check', {
         headers: {
           'Bypass-Tunnel-Reminder': 'true',
         },