Add progress nudge on roadmap

2025-03-18 14:19:43 +01:00 · 2024-05-27 12:36:26 +01:00 · 2024-05-27 12:36:26 +01:00 · 268acda75b
commit 268acda75b
parent 0167347277
5 changed files with 163 additions and 57 deletions
--- a/src/components/Navigation/AccountDropdown.tsx
+++ b/src/components/Navigation/AccountDropdown.tsx
@ -10,6 +10,7 @@ import { httpGet } from '../../lib/http.ts';
 import { useToast } from '../../hooks/use-toast.ts';
 import type { UserDocument } from '../../api/user.ts';
 import { NotificationIndicator } from './NotificationIndicator.tsx';
+import { OnboardingNudge } from '../OnboardingNudge.tsx';

 export type OnboardingConfig = Pick<
  UserDocument,
@ -24,7 +25,7 @@ export function AccountDropdown() {
  const [isTeamsOpen, setIsTeamsOpen] = useState(false);
  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);

-  const [isConfigLoading, setIsConfigLoading] = useState(true);
+  const [isConfigLoading, setIsConfigLoading] = useState(false);
  const [isOnboardingModalOpen, setIsOnboardingModalOpen] = useState(false);
  const [onboardingConfig, setOnboardingConfig] = useState<
    OnboardingConfig | undefined
@ -93,66 +94,80 @@ export function AccountDropdown() {
  ).length;

  return (
-    <div className="relative z-[90] animate-fade-in">
-      {isOnboardingModalOpen && onboardingConfig && (
-        <OnboardingModal
-          onboardingConfig={onboardingConfig}
-          onClose={() => {
-            setIsOnboardingModalOpen(false);
-          }}
-          onIgnoreTask={(taskId, status) => {
-            loadOnboardingConfig().finally(() => {});
-          }}
-        />
-      )}
-      {isCreatingRoadmap && (
-        <CreateRoadmapModal
-          onClose={() => {
-            setIsCreatingRoadmap(false);
+    <>
+      {shouldShowOnboardingStatus && !isOnboardingModalOpen && (
+        <OnboardingNudge
+          onStartOnboarding={() => {
+            loadOnboardingConfig().then(() => {
+              setIsOnboardingModalOpen(true);
+            });
          }}
        />
      )}

-      <button
-        className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
-        onClick={() => {
-          setIsTeamsOpen(false);
-          setShowDropdown(!showDropdown);
-        }}
-      >
-        <span className="inline-flex items-center">
-          Account&nbsp;<span className="text-gray-300">/</span>&nbsp;Teams
-        </span>
-        <ChevronDown className="h-4 w-4 shrink-0 stroke-[2.5px]" />
-        {shouldShowOnboardingStatus && !showDropdown && <NotificationIndicator />}
-      </button>
+      <div className="relative z-[90] animate-fade-in">
+        {isOnboardingModalOpen && onboardingConfig && (
+          <OnboardingModal
+            onboardingConfig={onboardingConfig}
+            onClose={() => {
+              setIsOnboardingModalOpen(false);
+            }}
+            onIgnoreTask={(taskId, status) => {
+              loadOnboardingConfig().finally(() => {});
+            }}
+          />
+        )}
+        {isCreatingRoadmap && (
+          <CreateRoadmapModal
+            onClose={() => {
+              setIsCreatingRoadmap(false);
+            }}
+          />
+        )}

-      {showDropdown && (
-        <div
-          ref={dropdownRef}
-          className="absolute right-0 z-50 mt-2 min-h-[152px] w-48 rounded-md bg-slate-800 py-1 shadow-xl"
+        <button
+          className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
+          onClick={() => {
+            setIsTeamsOpen(false);
+            setShowDropdown(!showDropdown);
+          }}
        >
-          {isTeamsOpen ? (
-            <DropdownTeamList setIsTeamsOpen={setIsTeamsOpen} />
-          ) : (
-            <AccountDropdownList
-              onCreateRoadmap={() => {
-                setIsCreatingRoadmap(true);
-                setShowDropdown(false);
-              }}
-              setIsTeamsOpen={setIsTeamsOpen}
-              onOnboardingClick={() => {
-                setIsOnboardingModalOpen(true);
-                setShowDropdown(false);
-              }}
-              shouldShowOnboardingStatus={shouldShowOnboardingStatus}
-              isConfigLoading={isConfigLoading}
-              onboardingConfigCount={onboardingCount}
-              doneConfigCount={onboardingDoneCount}
-            />
+          <span className="inline-flex items-center">
+            Account&nbsp;<span className="text-gray-300">/</span>&nbsp;Teams
+          </span>
+          <ChevronDown className="h-4 w-4 shrink-0 stroke-[2.5px]" />
+          {shouldShowOnboardingStatus && !showDropdown && (
+            <NotificationIndicator />
          )}
-        </div>
-      )}
-    </div>
+        </button>
+
+        {showDropdown && (
+          <div
+            ref={dropdownRef}
+            className="absolute right-0 z-50 mt-2 min-h-[152px] w-48 rounded-md bg-slate-800 py-1 shadow-xl"
+          >
+            {isTeamsOpen ? (
+              <DropdownTeamList setIsTeamsOpen={setIsTeamsOpen} />
+            ) : (
+              <AccountDropdownList
+                onCreateRoadmap={() => {
+                  setIsCreatingRoadmap(true);
+                  setShowDropdown(false);
+                }}
+                setIsTeamsOpen={setIsTeamsOpen}
+                onOnboardingClick={() => {
+                  setIsOnboardingModalOpen(true);
+                  setShowDropdown(false);
+                }}
+                shouldShowOnboardingStatus={shouldShowOnboardingStatus}
+                isConfigLoading={isConfigLoading}
+                onboardingConfigCount={onboardingCount}
+                doneConfigCount={onboardingDoneCount}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </>
  );
 }
--- a/src/components/Navigation/AccountDropdownList.tsx
+++ b/src/components/Navigation/AccountDropdownList.tsx
@ -45,7 +45,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
            className={cn(
              'flex h-9 w-full items-center rounded py-1 pl-3 pr-2 text-sm font-medium text-slate-100 hover:opacity-80',
              isConfigLoading
-                ? 'striped-loader-lighter flex border-slate-800 opacity-70'
+                ? 'striped-loader-darker flex border-slate-800 opacity-70'
                : 'border-slate-600 bg-slate-700',
            )}
            onClick={onOnboardingClick}
--- a/src/components/OnboardingNudge.tsx
+++ b/src/components/OnboardingNudge.tsx
@ -0,0 +1,69 @@
+import { cn } from '../lib/classname.ts';
+import { memo, useEffect, useState } from 'react';
+import { useScrollPosition } from '../hooks/use-scroll-position.ts';
+import { X } from 'lucide-react';
+
+type OnboardingNudgeProps = {
+  onStartOnboarding: () => void;
+};
+
+const NUDGE_ONBOARDING_KEY = 'should_nudge_onboarding';
+
+export function OnboardingNudge(props: OnboardingNudgeProps) {
+  const { onStartOnboarding } = props;
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { y: scrollY } = useScrollPosition();
+
+  useEffect(() => {
+    if (localStorage.getItem(NUDGE_ONBOARDING_KEY) === null) {
+      localStorage.setItem(NUDGE_ONBOARDING_KEY, 'true');
+    }
+  }, []);
+
+  if (localStorage.getItem(NUDGE_ONBOARDING_KEY) !== 'true') {
+    return null;
+  }
+
+  if (scrollY < 100) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center bg-yellow-300 py-1.5',
+        {
+          'striped-loader': isLoading,
+        },
+      )}
+    >
+      <p className="text-base font-semibold text-yellow-950">
+        Welcome! Please take a moment to{' '}
+        <button
+          type="button"
+          onClick={() => {
+            setIsLoading(true);
+            localStorage.setItem(NUDGE_ONBOARDING_KEY, 'false');
+            onStartOnboarding();
+          }}
+          className="underline"
+        >
+          complete onboarding
+        </button>
+        <button
+          type="button"
+          className="relative top-[3px] ml-1 px-1 py-1 text-yellow-600 hover:text-yellow-950"
+          onClick={(e) => {
+            e.stopPropagation();
+            localStorage.setItem(NUDGE_ONBOARDING_KEY, 'false');
+            setIsLoading(true);
+          }}
+        >
+          <X className="h-4 w-4" strokeWidth={3} />
+        </button>
+      </p>
+    </div>
+  );
+}
--- a/src/hooks/use-scroll-position.ts
+++ b/src/hooks/use-scroll-position.ts
@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export function useScrollPosition() {
+  const [scrollPosition, setScrollPosition] = useState<{
+    x: number;
+    y: number;
+  }>({
+    x: 0,
+    y: 0,
+  });
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollPosition({ x: window.scrollX, y: window.scrollY });
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return scrollPosition;
+}
--- a/src/styles/global.css
+++ b/src/styles/global.css
@ -84,7 +84,7 @@ a > code:before {
  animation: barberpole 15s linear infinite;
 }

-.striped-loader-lighter {
+.striped-loader-darker {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,