Skip to content

Commit

Permalink
onboarding-video
Browse files Browse the repository at this point in the history
  • Loading branch information
@PopDaph
PopDaph committed Oct 13, 2023
1 parent 185899b commit 2ff5ab7
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 74 deletions.
2 changes: 1 addition & 1 deletion front/components/sparkle/OnboardingLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export default function OnboardingLayout({
</div>

<div className="s-dark text-slate-200">
<main className="z-10 mx-auto max-w-4xl px-6 pt-24">{children}</main>
<main className="z-10 mx-auto max-w-4xl px-6 pt-48">{children}</main>
</div>
<>
<Script
Expand Down
198 changes: 125 additions & 73 deletions front/pages/w/[wId]/welcome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export default function Welcome({
const [lastName, setLastName] = useState<string>(user.name.split(" ")[1]);
const [expertise, setExpertise] = useState<string>(defaultExpertise);
const [isFormValid, setIsFormValid] = useState<boolean>(false);
const [isFormProcessed, setIsFormProcessed] = useState<boolean>(false);

useEffect(() => {
setIsFormValid(
Expand All @@ -91,83 +92,134 @@ export default function Welcome({
});
}
// We don't block the user if it fails here.
if (conversationId) {
await router.push(`/w/${owner.sId}/assistant/${conversationId}`);
} else {
await router.push(`/w/${owner.sId}/assistant/new`);
}
setIsFormProcessed(true);
};

return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="mt-16 font-objektiv text-2xl font-bold tracking-tighter">
<span className="text-red-400 sm:font-objektiv md:font-objektiv">
Hello {firstName}
</span>
<br />
Let's check a few things.
</p>
</div>
<div>
<p>
Your email is <span className="font-bold">{user.email}</span>.
</p>
</div>
<div>
<p className="pb-2">Your name is:</p>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Input
name="firstName"
placeholder=""
value={firstName}
onChange={setFirstName}
/>
<Input
name="lastName"
placeholder=""
value={lastName}
onChange={setLastName}
if (!isFormProcessed) {
return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="font-objektiv text-2xl font-bold tracking-tighter">
<span className="text-red-400 sm:font-objektiv md:font-objektiv">
Hello {firstName}
</span>
<br />
Let's check a few things.
</p>
</div>
<div>
<p>
Your email is <span className="font-bold">{user.email}</span>.
</p>
</div>
<div>
<p className="pb-2">Your name is:</p>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<Input
name="firstName"
placeholder=""
value={firstName}
onChange={setFirstName}
/>
<Input
name="lastName"
placeholder=""
value={lastName}
onChange={setLastName}
/>
</div>
</div>
<div>
<p className="pb-2">
How often do you use ChatGPT or other AI assistants?
</p>
<RadioButton
name="expertise"
className="flex-col sm:flex-row"
choices={[
{
label: "Never!",
value: "beginner",
disabled: false,
},
{
label: "Occasionally",
value: "intermediate",
disabled: false,
},
{
label: "Daily",
value: "advanced",
disabled: false,
},
]}
value={expertise}
onChange={setExpertise}
/>
</div>
<div className="flex justify-center pt-6">
<Button label="Ok" disabled={!isFormValid} onClick={handleSubmit} />
</div>
</div>
<div>
<p className="pb-2">
How often do you use ChatGPT or other AI assistants?
</p>
<RadioButton
name="expertise"
className="flex-col sm:flex-row"
choices={[
{
label: "Never!",
value: "beginner",
disabled: false,
},
{
label: "Occasionally",
value: "intermediate",
disabled: false,
},
{
label: "Daily",
value: "advanced",
disabled: false,
},
]}
value={expertise}
onChange={setExpertise}
/>
</div>
<div className="flex justify-center pt-6">
<Button
label="Start with Dust!"
disabled={!isFormValid}
onClick={handleSubmit}
/>
</OnboardingLayout>
);
} else {
return (
<OnboardingLayout owner={owner} gaTrackingId={gaTrackingId}>
<div className="flex flex-col gap-6">
<div>
<p className="font-objektiv text-2xl font-bold tracking-tighter text-green-400 sm:font-objektiv md:font-objektiv">
You're ready to go!
</p>
<p>Here is a 3 minutes video to get you started with Dust.</p>
</div>
<div>
<YoutubeIframe youtubeId="NVIbCvfkO3E" />
</div>
<div className="flex justify-center">
<Button
label="Start with Dust!"
disabled={!isFormValid}
onClick={async () => {
if (conversationId) {
await router.push(
`/w/${owner.sId}/assistant/${conversationId}`
);
} else {
await router.push(`/w/${owner.sId}/assistant/new`);
}
}}
/>
</div>
</div>
</div>
</OnboardingLayout>
);
</OnboardingLayout>
);
}
}

const YoutubeIframe = ({ youtubeId }: { youtubeId: string }) => {
return (
<div
className="video"
style={{
position: "relative",
paddingBottom: "56.25%" /* 16:9 */,
paddingTop: 25,
height: 0,
}}
>
<iframe
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
}}
src={`https://www.youtube.com/embed/${youtubeId}`}
frameBorder="0"
/>
</div>
);
};

0 comments on commit 2ff5ab7

Please sign in to comment.