feat: onboarding for new users (#5629)
* wip * feat: add onboarding * feat: implement onboarding * Update indicator design * Update UI for onboarding dropdown * Changes to onboarding UI --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/5662/head
Arik Chakma
6 months ago
committed by
GitHub
parent
67fbba4708
commit
f8cdd76fa9
12 changed files with 925 additions and 325 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,20 @@ |
|||||||
|
import { cn } from '../../lib/classname.ts'; |
||||||
|
|
||||||
|
type NotificationIndicatorProps = { |
||||||
|
className?: string; |
||||||
|
}; |
||||||
|
export function NotificationIndicator(props: NotificationIndicatorProps) { |
||||||
|
const { className = '' } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={cn( |
||||||
|
'absolute -top-1 right-0 h-3 w-3 text-xs uppercase tracking-wider', |
||||||
|
className, |
||||||
|
)} |
||||||
|
> |
||||||
|
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span> |
||||||
|
<span className="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span> |
||||||
|
</span> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,248 @@ |
|||||||
|
import { ArrowUpRight, Check } from 'lucide-react'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { useEffect, useMemo, useState } from 'react'; |
||||||
|
import type { AllowedOnboardingStatus } from '../../api/user'; |
||||||
|
import { pageProgressMessage } from '../../stores/page'; |
||||||
|
import { httpPatch } from '../../lib/http'; |
||||||
|
import { useToast } from '../../hooks/use-toast'; |
||||||
|
import type { OnboardingConfig } from './AccountDropdown'; |
||||||
|
import { setAuthToken } from '../../lib/jwt'; |
||||||
|
|
||||||
|
type Task = { |
||||||
|
id: string; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
status: AllowedOnboardingStatus; |
||||||
|
url: string; |
||||||
|
urlText: string; |
||||||
|
onClick?: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
type OnboardingModalProps = { |
||||||
|
onClose: () => void; |
||||||
|
onboardingConfig: OnboardingConfig; |
||||||
|
onIgnoreTask?: (taskId: string, status: AllowedOnboardingStatus) => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function OnboardingModal(props: OnboardingModalProps) { |
||||||
|
const { onboardingConfig, onClose, onIgnoreTask } = props; |
||||||
|
|
||||||
|
const toast = useToast(); |
||||||
|
const [selectedTask, setSelectedTask] = useState<Task | null>(null); |
||||||
|
|
||||||
|
const tasks = useMemo(() => { |
||||||
|
return [ |
||||||
|
{ |
||||||
|
id: 'updateProgress', |
||||||
|
title: 'Update your Progress', |
||||||
|
description: 'Mark your progress on roadmaps', |
||||||
|
status: onboardingConfig?.onboarding?.updateProgress || 'pending', |
||||||
|
url: '/roadmaps', |
||||||
|
urlText: 'Roadmaps List', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'publishProfile', |
||||||
|
title: 'Claim a Username', |
||||||
|
description: 'Optionally create a public profile to share your skills', |
||||||
|
status: onboardingConfig?.onboarding?.publishProfile || 'pending', |
||||||
|
url: '/account/update-profile', |
||||||
|
urlText: 'Update Profile', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'customRoadmap', |
||||||
|
title: 'Custom Roadmaps', |
||||||
|
description: 'Create your own roadmap from scratch', |
||||||
|
status: onboardingConfig?.onboarding?.customRoadmap || 'pending', |
||||||
|
url: import.meta.env.DEV |
||||||
|
? 'http://localhost:4321' |
||||||
|
: 'https://draw.roadmap.sh', |
||||||
|
urlText: 'Create Roadmap', |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'addFriends', |
||||||
|
title: 'Invite your Friends', |
||||||
|
description: 'Invite friends to join you on roadmaps', |
||||||
|
status: onboardingConfig?.onboarding?.addFriends || 'pending', |
||||||
|
url: '/account/friends', |
||||||
|
urlText: 'Add Friends', |
||||||
|
onClick: () => { |
||||||
|
ignoreOnboardingTask( |
||||||
|
'addFriends', |
||||||
|
'done', |
||||||
|
'Updating status..', |
||||||
|
).finally(() => pageProgressMessage.set('')); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'roadCard', |
||||||
|
title: 'Create your Roadmap Card', |
||||||
|
description: 'Embed your skill card on your github or website', |
||||||
|
status: onboardingConfig?.onboarding?.roadCard || 'pending', |
||||||
|
url: '/account/road-card', |
||||||
|
urlText: 'Create Road Card', |
||||||
|
onClick: () => { |
||||||
|
ignoreOnboardingTask('roadCard', 'done', 'Updating status..').finally( |
||||||
|
() => pageProgressMessage.set(''), |
||||||
|
); |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'inviteTeam', |
||||||
|
title: 'Invite your Team', |
||||||
|
description: 'Invite your team to collaborate on roadmaps', |
||||||
|
status: onboardingConfig?.onboarding?.inviteTeam || 'pending', |
||||||
|
url: '/team', |
||||||
|
urlText: 'Create Team', |
||||||
|
}, |
||||||
|
]; |
||||||
|
}, [onboardingConfig]); |
||||||
|
|
||||||
|
const ignoreOnboardingTask = async ( |
||||||
|
taskId: string, |
||||||
|
status: AllowedOnboardingStatus, |
||||||
|
message: string = 'Ignoring Task', |
||||||
|
) => { |
||||||
|
pageProgressMessage.set(message); |
||||||
|
const { response, error } = await httpPatch( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-update-onboarding-config`, |
||||||
|
{ |
||||||
|
id: taskId, |
||||||
|
status, |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to ignore task'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
onIgnoreTask?.(taskId, status); |
||||||
|
setSelectedTask(null); |
||||||
|
}; |
||||||
|
|
||||||
|
const ignoreForever = async () => { |
||||||
|
const { response, error } = await httpPatch<{ token: string }>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-ignore-onboarding-forever`, |
||||||
|
{}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
toast.error(error?.message || 'Failed to ignore onboarding'); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setAuthToken(response.token); |
||||||
|
window.location.reload(); |
||||||
|
}; |
||||||
|
|
||||||
|
const isAllTasksDone = tasks.every( |
||||||
|
(task) => task.status === 'done' || task.status === 'ignored', |
||||||
|
); |
||||||
|
useEffect(() => { |
||||||
|
if (!isAllTasksDone) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
pageProgressMessage.set('Finishing Onboarding'); |
||||||
|
ignoreForever().finally(() => {}); |
||||||
|
}, [isAllTasksDone]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal onClose={onClose} bodyClassName="text-black h-auto"> |
||||||
|
<div className="px-4 pb-2 pl-11 pt-4"> |
||||||
|
<h2 className="mb-0.5 text-xl font-semibold">Welcome to roadmap.sh</h2> |
||||||
|
<p className="text-balance text-sm text-gray-500"> |
||||||
|
Complete the tasks below to get started! |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<ul className={cn('flex flex-col divide-y', { |
||||||
|
'border-b': tasks[tasks.length - 1]?.status === 'done', |
||||||
|
})}> |
||||||
|
{/*sort to put completed tasks at the end */} |
||||||
|
{tasks.map((task, taskCounter) => { |
||||||
|
const isDone = task.status === 'done'; |
||||||
|
const isActive = selectedTask?.id === task.id; |
||||||
|
|
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={task.id} |
||||||
|
data-active={isActive} |
||||||
|
data-status={task.status} |
||||||
|
className={cn('group/task px-4 py-2.5', { |
||||||
|
'bg-gray-100': isDone, |
||||||
|
'border-t': taskCounter === 0 && isDone, |
||||||
|
})} |
||||||
|
> |
||||||
|
<div className={cn('flex items-start gap-2', { |
||||||
|
'opacity-50': task.status === 'done' |
||||||
|
})}> |
||||||
|
<span className="relative top-px flex h-5 w-5 items-center justify-center"> |
||||||
|
{isDone ? ( |
||||||
|
<Check className="h-4 w-4 stroke-[3px] text-green-500" /> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'h-4 w-4 rounded-md border border-gray-300', |
||||||
|
task.status === 'ignored' |
||||||
|
? 'bg-gray-200' |
||||||
|
: 'bg-transparent', |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
<div className="group-data-[status=ignored]/task:text-gray-400"> |
||||||
|
<h3 className="flex items-center text-sm font-semibold group-data-[status=done]/task:line-through"> |
||||||
|
{task.title} |
||||||
|
|
||||||
|
<a |
||||||
|
href={task.url} |
||||||
|
target="_blank" |
||||||
|
className={cn( |
||||||
|
'ml-1 inline-block rounded-xl border border-black bg-white pl-1.5 pr-1 text-xs font-normal text-black hover:bg-black hover:text-white', |
||||||
|
)} |
||||||
|
aria-label="Open task in new tab" |
||||||
|
onClick={() => { |
||||||
|
if (!task?.onClick) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
task.onClick(); |
||||||
|
}} |
||||||
|
> |
||||||
|
{task.urlText} |
||||||
|
<ArrowUpRight className="relative -top-[0.5px] ml-0.5 inline-block h-3.5 w-3.5 stroke-[2px]" /> |
||||||
|
</a> |
||||||
|
</h3> |
||||||
|
<p className="text-xs text-gray-500 group-data-[status=ignored]/task:text-gray-400"> |
||||||
|
{task.description} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
|
||||||
|
<div className="mt-2 px-11 pb-5"> |
||||||
|
<button |
||||||
|
className="w-full rounded-md 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={onClose} |
||||||
|
> |
||||||
|
Do it later |
||||||
|
</button> |
||||||
|
|
||||||
|
<button |
||||||
|
className="mt-3 text-sm text-gray-500 underline underline-offset-2 hover:text-black" |
||||||
|
onClick={() => { |
||||||
|
pageProgressMessage.set('Ignoring Onboarding'); |
||||||
|
ignoreForever().finally(); |
||||||
|
}} |
||||||
|
> |
||||||
|
Ignore forever |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue