info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-07-31 14:30:13 +02:00
Code Issues Releases Wiki Activity

Nudge users to onboard

Browse Source
This commit is contained in:
Kamran Ahmed
2024-05-27 12:51:21 +01:00
parent 268acda75b
commit 13744a486a
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/Navigation/OnboardingModal.tsx
View File

@@ -8,6 +8,7 @@ import { httpPatch } from '../../lib/http';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import type { OnboardingConfig } from './AccountDropdown'; import type { OnboardingConfig } from './AccountDropdown';
import { setAuthToken } from '../../lib/jwt'; import { setAuthToken } from '../../lib/jwt';
import { NUDGE_ONBOARDING_KEY } from '../OnboardingNudge.tsx';
type Task = { type Task = {
id: string; id: string;
@@ -157,9 +158,11 @@ export function OnboardingModal(props: OnboardingModalProps) {
</p> </p>
</div> </div>
<ul className={cn('flex flex-col divide-y', { <ul
'border-b': tasks[tasks.length - 1]?.status === 'done', className={cn('flex flex-col divide-y', {
})}> 'border-b': tasks[tasks.length - 1]?.status === 'done',
})}
>
{/*sort to put completed tasks at the end */} {/*sort to put completed tasks at the end */}
{tasks.map((task, taskCounter) => { {tasks.map((task, taskCounter) => {
const isDone = task.status === 'done'; const isDone = task.status === 'done';
@@ -175,9 +178,11 @@ export function OnboardingModal(props: OnboardingModalProps) {
'border-t': taskCounter === 0 && isDone, 'border-t': taskCounter === 0 && isDone,
})} })}
> >
<div className={cn('flex items-start gap-2', { <div
'opacity-50': task.status === 'done' 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"> <span className="relative top-px flex h-5 w-5 items-center justify-center">
{isDone ? ( {isDone ? (
<Check className="h-4 w-4 stroke-[3px] text-green-500" /> <Check className="h-4 w-4 stroke-[3px] text-green-500" />

2
src/components/OnboardingNudge.tsx
View File

@@ -7,7 +7,7 @@ type OnboardingNudgeProps = {
onStartOnboarding: () => void; onStartOnboarding: () => void;
}; };
const NUDGE_ONBOARDING_KEY = 'should_nudge_onboarding'; export const NUDGE_ONBOARDING_KEY = 'should_nudge_onboarding';
export function OnboardingNudge(props: OnboardingNudgeProps) { export function OnboardingNudge(props: OnboardingNudgeProps) {
const { onStartOnboarding } = props; const { onStartOnboarding } = props;