Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Dec 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
10a6048
fix(getting-started): revert to top of menu
bodinsamuel Nov 29, 2024
78601e1
Merge branch 'master' into sam/24_11_29/fix/getting-started-feedback-2
bodinsamuel Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 27 additions & 15 deletions packages/webapp/src/components/LeftNavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand All @@ -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` });
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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"
Expand Down
6 changes: 1 addition & 5 deletions packages/webapp/src/pages/GettingStarted/Show.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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;
Expand Down
Loading