-
-
Notifications
You must be signed in to change notification settings - Fork 153
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(onboarding): Add onboarding for new users (#746)
* feat: Add onboarding for new users * feat: Overhaul onboarding into a multistep process * docs: Update README.md with usage of the entrypoint module * refactor: Remove steppers and move all steps to a single page * feat: Move onboarding to a separate page and add bounty card * feat: Redirect to onboarding on launch, and move around content --------- Co-authored-by: Richard Abrich <[email protected]>
- Loading branch information
Showing
16 changed files
with
266 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { BookACall } from "@/components/Onboarding/steps/BookACall"; | ||
import { RegisterForUpdates } from "@/components/Onboarding/steps/RegisterForUpdates"; | ||
import { Tutorial } from "@/components/Onboarding/steps/Tutorial"; | ||
import { Box, Divider } from "@mantine/core"; | ||
|
||
export default function Onboarding() { | ||
return ( | ||
<Box w="fit-content" mx="auto"> | ||
<RegisterForUpdates /> | ||
<Divider my={20} w="40vw" mx="auto" /> | ||
<BookACall /> | ||
<Divider my={20} w="40vw" mx="auto" /> | ||
<Tutorial /> | ||
</Box> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
16 changes: 16 additions & 0 deletions
16
openadapt/app/dashboard/components/Onboarding/steps/BookACall.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { Box, Text } from '@mantine/core' | ||
import Link from 'next/link' | ||
import React from 'react' | ||
|
||
export const BookACall = () => { | ||
return ( | ||
<Box w="fit-content"> | ||
<Text> | ||
<Link href="https://www.getclockwise.com/c/richard-abrich/quick-meeting" className='no-underline'> | ||
Book a call with us | ||
</Link> | ||
<Text component='span'> to discuss how OpenAdapt can help your team</Text> | ||
</Text> | ||
</Box> | ||
) | ||
} |
67 changes: 67 additions & 0 deletions
67
openadapt/app/dashboard/components/Onboarding/steps/RegisterForUpdates.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
'use client'; | ||
|
||
|
||
import { Box, Button, Stack, Text, TextInput } from '@mantine/core' | ||
import { isNotEmpty, useForm } from '@mantine/form' | ||
import { notifications } from '@mantine/notifications' | ||
import React, { useEffect } from 'react' | ||
|
||
export const RegisterForUpdates = () => { | ||
const onboardingForm = useForm({ | ||
initialValues: { | ||
email: '', | ||
}, | ||
validate: { | ||
email: isNotEmpty('Email is required'), | ||
} | ||
}) | ||
useEffect(() => { | ||
fetch('/api/settings', { | ||
method: 'POST', | ||
headers: { | ||
'Content-Type': 'application/json', | ||
}, | ||
body: JSON.stringify({ | ||
REDIRECT_TO_ONBOARDING: false | ||
}), | ||
}) | ||
}, []) | ||
function onSubmit({ email }: { email: string }) { | ||
fetch('https://openadapt.ai/form.html', { | ||
method: 'POST', | ||
mode: 'no-cors', | ||
headers: { | ||
'Content-Type': 'application/x-www-form-urlencoded', | ||
}, | ||
body: new URLSearchParams({ | ||
email, | ||
'form-name': 'email', | ||
'bot-field': '', | ||
}).toString(), | ||
}).then(() => { | ||
notifications.show({ | ||
title: 'Thank you!', | ||
message: 'You have been registered for updates', | ||
color: 'green', | ||
}) | ||
}) | ||
} | ||
return ( | ||
<Box maw={600}> | ||
<Stack gap="xs"> | ||
<form onSubmit={onboardingForm.onSubmit(onSubmit)}> | ||
<TextInput | ||
placeholder="Email (optional)" | ||
label="Register for updates" | ||
description="We promise not to spam!" | ||
type="email" | ||
{...onboardingForm.getInputProps('email')} | ||
/> | ||
<Button type="submit" mt={10}> | ||
Register | ||
</Button> | ||
</form> | ||
</Stack> | ||
</Box> | ||
) | ||
} |
60 changes: 60 additions & 0 deletions
60
openadapt/app/dashboard/components/Onboarding/steps/Tutorial.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
'use client'; | ||
|
||
import { Box, Text } from '@mantine/core' | ||
import { algora, type AlgoraOutput } from '@algora/sdk'; | ||
import React, { useEffect } from 'react' | ||
import Link from 'next/link'; | ||
|
||
type Bounty = AlgoraOutput['bounty']['list']['items'][number]; | ||
|
||
function BountyCard(props: { bounty: Bounty }) { | ||
return ( | ||
<Link | ||
href={props.bounty.task.url} | ||
target="_blank" | ||
rel="noopener" | ||
className="block group relative h-full rounded-lg border border-gray-400/50 dark:border-indigo-500/50 bg-gradient-to-br from-gray-300/30 via-gray-300/40 to-gray-300/50 dark:from-indigo-600/20 dark:via-indigo-600/30 dark:to-indigo-600/40 md:gap-8 transition-colors hover:border-gray-400 hover:dark:border-indigo-500 hover:bg-gray-300/10 hover:dark:bg-gray-600/5 !no-underline" | ||
> | ||
<div className="relative h-full p-4"> | ||
<div className="text-2xl font-bold text-green-500 group-hover:text-green-600 dark:text-green-400 dark:group-hover:text-green-300 transition-colors"> | ||
{props.bounty.reward_formatted} | ||
</div> | ||
<div className="mt-0.5 text-sm text-gray-700 dark:text-indigo-200 group-hover:text-gray-800 dark:group-hover:text-indigo-100 transition-colors"> | ||
{props.bounty.task.repo_name}#{props.bounty.task.number} | ||
</div> | ||
<div className="mt-3 line-clamp-1 break-words text-lg font-medium leading-tight text-gray-800 dark:text-indigo-50 group-hover:text-gray-900 dark:group-hover:text-white"> | ||
{props.bounty.task.title} | ||
</div> | ||
</div> | ||
</Link> | ||
); | ||
} | ||
|
||
const featuredBountyId = 'clxi7tk210002l20aqlz58ram'; | ||
|
||
async function getFeaturedBounty() { | ||
const bounty: Bounty = await algora.bounty.get.query({ id: featuredBountyId }); | ||
return bounty; | ||
} | ||
|
||
export const Tutorial = () => { | ||
const [featuredBounty, setFeaturedBounty] = React.useState<Bounty | null>(null); | ||
useEffect(() => { | ||
getFeaturedBounty().then(setFeaturedBounty); | ||
}, []); | ||
return ( | ||
<Box> | ||
<Text my={20} maw={800}> | ||
Welcome to OpenAdapt! Thank you for joining us on our mission to build open source desktop AI. Your feedback is extremely valuable! | ||
</Text> | ||
<Text my={20} maw={800}> | ||
To start, please watch the demonstration below. Then try it yourself! If you have any issues, please submit a <Link href='https://github.com/OpenAdaptAI/OpenAdapt/issues/new/choose' className='no-underline'>Github Issue.</Link> | ||
</Text> | ||
<iframe width="800" height="400" src="https://www.youtube.com/embed/OVERugs50cQ?si=cmi1vY73ADom9EKG" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen className='block mx-auto'></iframe> | ||
<Text my={20} maw={800}> | ||
If you'd like to contribute directly to our development, please consider the following open Bounties (no development experience required): | ||
{featuredBounty && <BountyCard bounty={featuredBounty} />} | ||
</Text> | ||
</Box> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.