fix(getting-started): revert to top of menu (#3087)

## Changes Fixes https://linear.app/nango/issue/NAN-2279/change-behavior-of-getting-started-tab - Going to back to putting the item at the top of the navbar - Do not auto dismiss at the end of the video
NangoHQ · Dec 2, 2024 · edf796d · edf796d
1 parent e2f58e5
commit edf796d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/packages/webapp/src/components/LeftNavBar.tsx b/packages/webapp/src/components/LeftNavBar.tsx
@@ -21,6 +21,7 @@ import { useUser } from '../hooks/useUser';
 import { globalEnv } from '../utils/env';
 import { IconX } from '@tabler/icons-react';
 import type { MaybePromise } from '@nangohq/types';
+import { apiPatchOnboarding } from '../hooks/useOnboarding';
 
 export enum LeftNavBarItems {
     Homepage,
@@ -53,7 +54,7 @@ export default function LeftNavBar(props: LeftNavBarProps) {
     const [showUserSettings, setShowUserSettings] = useState<boolean>(false);
     const navigate = useNavigate();
     const signout = useSignout();
-    const { meta } = useMeta();
+    const { meta, mutate: mutateMeta } = useMeta();
     const { user: me } = useUser();
     const env = useStore((state) => state.env);
     const { data } = useConnectionsCount(env);
@@ -77,6 +78,18 @@ export default function LeftNavBar(props: LeftNavBarProps) {
 
     const items = useMemo(() => {
         const list: MenuItem[] = [];
+        if (meta && showGettingStarted && !meta.onboardingComplete) {
+            list.push({
+                name: 'Getting Started',
+                icon: RocketIcon,
+                value: LeftNavBarItems.GettingStarted,
+                link: `/${env}/getting-started`,
+                onClose: async () => {
+                    await apiPatchOnboarding(env);
+                    void mutateMeta();
+                }
+            });
+        }
 
         list.push({ name: 'Home', icon: HomeIcon, value: LeftNavBarItems.Homepage, link: `/${env}` });
         list.push({ name: 'Integrations', icon: SquaresPlusIcon, value: LeftNavBarItems.Integrations, link: `/${env}/integrations` });
@@ -177,20 +190,6 @@ export default function LeftNavBar(props: LeftNavBarProps) {
                     </div>
                 </div>
                 <div>
-                    <div>
-                        a
-                        {showGettingStarted && (
-                            <Link
-                                to="/dev/getting-started"
-                                className={`flex h-9 p-2 px-3.5 gap-x-3.5 items-center rounded-md text-sm ${navTextColor} ${
-                                    props.selectedItem === LeftNavBarItems.GettingStarted ? `${navActiveBg} text-white` : `text-gray-400 ${navHoverBg}`
-                                }`}
-                            >
-                                <RocketIcon />
-                                <p>Getting Started</p>
-                            </Link>
-                        )}
-                    </div>
                     <div
                         className="flex mb-5 py-2 w-full user-settings px-2 justify-between relative rounded items-center hover:bg-hover-gray cursor-pointer"
                         onClick={() => setShowUserSettings(!showUserSettings)}
@@ -219,6 +218,19 @@ export default function LeftNavBar(props: LeftNavBarProps) {
                                         <UserGroupIcon className="h-5 w-5 mr-2" />
                                         <span>Team</span>
                                     </li>
+                                    {showGettingStarted && meta.onboardingComplete && (
+                                        <Link
+                                            to="/dev/getting-started"
+                                            className={`flex h-9 p-2 gap-x-3 items-center rounded-md text-sm ${navTextColor} ${
+                                                props.selectedItem === LeftNavBarItems.GettingStarted
+                                                    ? `${navActiveBg} text-white`
+                                                    : `text-gray-400 ${navHoverBg}`
+                                            }`}
+                                        >
+                                            <RocketIcon />
+                                            <p>Getting Started</p>
+                                        </Link>
+                                    )}
 
                                     <li
                                         className="flex items-center w-full px-2 py-2.5 hover:text-white hover:bg-hover-gray rounded p-1"

diff --git a/packages/webapp/src/pages/GettingStarted/Show.tsx b/packages/webapp/src/pages/GettingStarted/Show.tsx
@@ -9,13 +9,10 @@ import { useScript } from '@uidotdev/usehooks';
 import { useEffect, useState } from 'react';
 import { cn } from '../../utils/utils';
 import { globalEnv } from '../../utils/env';
-import { apiPatchOnboarding } from '../../hooks/useOnboarding';
-import { useStore } from '../../store';
 
 let ytLoaded = false;
 export const GettingStarted: React.FC = () => {
     const analyticsTrack = useAnalyticsTrack();
-    const env = useStore((state) => state.env);
     const [hasVideo, setHasVideo] = useState(false);
 
     useEffect(() => {
@@ -55,11 +52,10 @@ export const GettingStarted: React.FC = () => {
                     origin: new URL(globalEnv.publicUrl).origin
                 },
                 events: {
-                    onStateChange: async (event: { data: number }) => {
+                    onStateChange: (event: { data: number }) => {
                         switch (event.data) {
                             case 0:
                                 analyticsTrack('web:getting_started:video:end');
-                                await apiPatchOnboarding(env);
                                 break;
                             default:
                                 break;