From 50ea045eee7b8ab4e06b3f8a4ca21afb6e66935d Mon Sep 17 00:00:00 2001 From: Tim Raderschad Date: Thu, 22 Aug 2024 22:07:50 +0200 Subject: [PATCH] feat(web): improve onboarding --- apps/web/package.json | 3 +- apps/web/src/pages/welcome.tsx | 171 +++++++++++++++++++++------------ pnpm-lock.yaml | 27 +++++- 3 files changed, 138 insertions(+), 63 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 1dd4a432..803331c2 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -19,6 +19,7 @@ "start:docker": "npx prisma migrate deploy || { echo 'Migration failed, exiting'; exit 1; } && node server.js" }, "dependencies": { + "@calcom/embed-react": "^1.5.0", "@code-hike/mdx": "0.9.0", "@databases/cache": "^1.0.0", "@dnd-kit/core": "^6.0.8", @@ -105,7 +106,7 @@ "rate-limiter-flexible": "^5.0.3", "react": "18.2.0", "react-dom": "18.2.0", - "react-hook-form": "^7.43.9", + "react-hook-form": "^7.44.3", "react-hot-toast": "^2.4.0", "react-icons": "^4.11.0", "react-use-wizard": "^2.2.3", diff --git a/apps/web/src/pages/welcome.tsx b/apps/web/src/pages/welcome.tsx index 0a37aeb0..52a25a9a 100644 --- a/apps/web/src/pages/welcome.tsx +++ b/apps/web/src/pages/welcome.tsx @@ -1,10 +1,27 @@ +import Cal, { getCalApi } from "@calcom/embed-react"; import { DISCORD_INVITE_URL } from "components/Footer"; import { Input } from "components/Input"; import { RadioGroupComponent } from "components/RadioGroup"; -import { Select } from "components/Select"; import { Button } from "components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "components/ui/card"; +import { Label } from "components/ui/label"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "components/ui/select"; import { AnimatePresence, motion } from "framer-motion"; import { cn } from "lib/utils"; +import { ChevronRight } from "lucide-react"; import type { GetServerSideProps, InferGetServerSidePropsType } from "next"; import { useSession } from "next-auth/react"; import Link from "next/link"; @@ -71,6 +88,16 @@ const useOnboardingStore = create<{ set({ experienceLevelTests }), })); +const FormItem = ({ + children, + labelText, +}: { children: React.ReactNode; labelText: string }) => ( +
+ + {children} +
+); + function WizardFooter() { const { previousStep, nextStep, isFirstStep, isLastStep, activeStep } = useWizard(); @@ -82,7 +109,7 @@ function WizardFooter() { (activeStep === 2 && technologies.length === 0); return ( -
+ -
+ ); } @@ -109,15 +136,18 @@ function Step1() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} > -

Welcome to Abby

-

Thank you very much for signing up for Abby

- -
+ + Welcome to Abby + + Thank you very much for signing up for Abby + + + - +
); } @@ -145,19 +175,30 @@ function Step2() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} > -

About you

- -
- - -
+ + ); } @@ -243,18 +283,22 @@ function Step3() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} > -

Technical Background

+ + Technical Background + + What technologies do you use currently? + + -
- +
{TECHNOLOGIES.map(({ name, icon: Icon }) => ( ))}
- +
); } @@ -278,37 +322,34 @@ function Step4() { animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} > -

You're ready to go!

-
+ + You're ready to go! + + Thank you very much for signing up to Abby. You're now ready to + start using Abby. + + +

- Thank you very much for signing up to Abby -
-
If you have any questions, feel free to join our{" "} - + Discord {" "} - or send us an email to{" "} - - tim@tryabby.com - + or book a free 1:1 onboarding session with us.

- You can also book a free 30 minute onboarding call with us to - get you started. Feel free to pick a time that works for you{" "} - - here - +

- -
+ ); } @@ -320,23 +361,31 @@ export default function WelcomePage( useOnboardingStore.getState().setName(props.user.name ?? ""); }, [props.user.name]); + useEffect(() => { + (async () => { + const cal = await getCalApi({ namespace: "abby-onboarding" }); + cal("ui", { + theme: "dark", + styles: { branding: { brandColor: "#f9a8d4" } }, + hideEventTypeDetails: false, + layout: "month_view", + }); + })(); + }, []); + return (
-
+ } - wrapper={ -
- -
- } + wrapper={} > -
+
); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d7b581b..8d3f486c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -76,6 +76,9 @@ importers: apps/web: dependencies: + '@calcom/embed-react': + specifier: ^1.5.0 + version: 1.5.0(react-dom@18.2.0)(react@18.2.0) '@code-hike/mdx': specifier: 0.9.0 version: 0.9.0(react@18.2.0) @@ -335,7 +338,7 @@ importers: specifier: 18.2.0 version: 18.2.0(react@18.2.0) react-hook-form: - specifier: ^7.43.9 + specifier: ^7.44.3 version: 7.44.3(react@18.2.0) react-hot-toast: specifier: ^2.4.0 @@ -5623,6 +5626,28 @@ packages: resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==} dev: false + /@calcom/embed-core@1.5.0: + resolution: {integrity: sha512-2R+u9tpsKl87AfNkZa2q+bZy4qM4wVNwU4xmlAXg2x9/vI8uhm7MmzctV1SdyhzR5jlwa5iD62+pzVQTgoj6ZA==} + dev: false + + /@calcom/embed-react@1.5.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-HREjDsEu9cEuhbB0aP1nqzw+aW3J1LOutCap/i5EGGfAoxUQDvWekDViE8zFk9lsQ0HKZRBaSc73AsG6bc0B3Q==} + peerDependencies: + react: ^18.2.0 + react-dom: ^18.2.0 + dependencies: + '@calcom/embed-core': 1.5.0 + '@calcom/embed-snippet': 1.3.0 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + + /@calcom/embed-snippet@1.3.0: + resolution: {integrity: sha512-g/JnC02VpDHIDLdRWbrh3/L2xLTTph46zojeH6y7O2GXAqQIDtCDOqakmng2zhvoLHt+cs7KuiiN4a/r+CswKg==} + dependencies: + '@calcom/embed-core': 1.5.0 + dev: false + /@changesets/apply-release-plan@6.1.3: resolution: {integrity: sha512-ECDNeoc3nfeAe1jqJb5aFQX7CqzQhD2klXRez2JDb/aVpGUbX673HgKrnrgJRuQR/9f2TtLoYIzrGB9qwD77mg==} dependencies: