onboarding frontend

package.json

@@ -19,6 +19,8 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@types/canvas-confetti": "^1.6.4",
+    "canvas-confetti": "^1.9.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "framer-motion": "^11.5.4",

src/app/(pages)/dashboard/onboarding/page.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { ReactElement } from "react";
+import OnboardingForm from "@/components/dashboard/onboarding/onboarding-form";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store-props";
+import { User } from "@/app/types/user/user";
+import { hasFlag } from "@/lib/user";
+import { UserFlag } from "@/app/types/user/user-flag";
+import CompletedOnboarding from "@/components/dashboard/onboarding/completed-onboarding";
+
+const OnboardingPage = (): ReactElement => {
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    return (
+        <main className="min-h-screen flex justify-center items-center">
+            {hasFlag(user as User, UserFlag.COMPLETED_ONBOARDING) ? (
+                <CompletedOnboarding />
+            ) : (
+                <OnboardingForm />
+            )}
+        </main>
+    );
+};
+export default OnboardingPage;

src/app/(pages)/dashboard/page.tsx

@@ -2,7 +2,7 @@
 
 import { ReactElement } from "react";
 import { UserState } from "@/app/store/user-store-props";
-import { User } from "@/app/types/user";
+import { User } from "@/app/types/user/user";
 import { useUserContext } from "@/app/provider/user-provider";
 
 const DashboardPage = (): ReactElement => {

src/app/provider/user-provider.tsx

@@ -13,14 +13,16 @@ import createUserStore, {
     UserState,
     UserStore,
 } from "@/app/store/user-store-props";
-import { User } from "@/app/types/user";
+import { User } from "@/app/types/user/user";
 import { Cookies, useCookies } from "next-client-cookies";
-import { Session } from "@/app/types/session";
+import { Session } from "@/app/types/user/session";
 import { apiRequest } from "@/lib/api";
 import { StoreApi, useStore } from "zustand";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import DashboardLoader from "@/components/dashboard/loader";
+import { hasFlag } from "@/lib/user";
+import { UserFlag } from "@/app/types/user/user-flag";
 
 /**
  * The provider that will provide user context to children.
@@ -33,6 +35,7 @@ const UserProvider = ({ children }: { children: ReactNode }) => {
     const [authorized, setAuthorized] = useState<boolean>(false);
     const cookies: Cookies = useCookies();
     const router: AppRouterInstance = useRouter();
+    const path: string = usePathname();
     if (!storeRef.current) {
         storeRef.current = createUserStore();
     }
@@ -59,9 +62,20 @@ const UserProvider = ({ children }: { children: ReactNode }) => {
             router.push("/auth");
             return;
         }
-        storeRef.current?.getState().authorize(session, data as User);
+        // User successfully authenticated
+        const user: User = data as User;
+        storeRef.current?.getState().authorize(session, user);
         setAuthorized(true);
+
+        // User has not yet completed onboarding
+        if (
+            !hasFlag(user, UserFlag.COMPLETED_ONBOARDING) &&
+            !path.startsWith("/dashboard/onboarding")
+        ) {
+            router.push("/dashboard/onboarding");
+        }
     }, [cookies, router]);
+
     useEffect(() => {
         fetchUser();
     }, [fetchUser]);

src/app/store/user-store-props.ts

@@ -1,7 +1,7 @@
 import { createStore } from "zustand";
-import { User } from "@/app/types/user";
+import { User } from "@/app/types/user/user";
 import { createContext } from "react";
-import { Session } from "@/app/types/session";
+import { Session } from "@/app/types/user/session";
 
 export const UserContext = createContext<UserStore | null>(null);
 

src/app/styles/globals.css

@@ -50,7 +50,7 @@ body {
         --card-foreground: 0 0% 98%;
         --popover: 240 10% 3.9%;
         --popover-foreground: 0 0% 98%;
-        --primary: 0 84% 60%;
+        --primary: 0 0% 98%;
         --primary-foreground: 240 5.9% 10%;
         --secondary: 240 3.7% 15.9%;
         --secondary-foreground: 0 0% 98%;

src/app/types/onboarding-stage.ts

@@ -0,0 +1,19 @@
+/**
+ * An onboarding stage.
+ */
+type OnboardingStage = {
+    /**
+     * The name of this stage.
+     */
+    name: string;
+
+    /**
+     * The description of this stage.
+     */
+    description: string;
+
+    /**
+     * The form schema for this stage.
+     */
+    schema: any;
+};

src/app/types/user/user-flag.ts

@@ -0,0 +1,8 @@
+/**
+ * Flags for a {@link User}.
+ */
+export enum UserFlag {
+    DISABLED = 0,
+    COMPLETED_ONBOARDING = 1,
+    ADMINISTRATOR = 2,
+}

src/components/auth/auth-form.tsx

@@ -14,7 +14,7 @@ import {
     LockClosedIcon,
 } from "@heroicons/react/24/outline";
 import { apiRequest } from "@/lib/api";
-import { Session } from "@/app/types/session";
+import { Session } from "@/app/types/user/session";
 import { Cookies, useCookies } from "next-client-cookies";
 import { useRouter } from "next/navigation";
 import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";

src/components/auth/footer.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
  */
 const Footer = (): ReactElement => (
     <footer className="flex justify-center text-center">
-        <p className="max-w-[17rem]">
+        <p className="max-w-[17rem] opacity-95">
             By registering you agree to our{" "}
             <DocumentLink name="Terms and Conditions" link="/legal/terms" /> and
             our <DocumentLink name="Privacy Policy" link="/legal/privacy" />.

src/components/dashboard/onboarding/completed-onboarding.tsx

@@ -0,0 +1,23 @@
+import { ReactElement } from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+/**
+ * The user has already completed onboarding!
+ *
+ * @return the completed onboarding jsx
+ */
+const CompletedOnboarding = (): ReactElement => (
+    <div className="flex flex-col gap-1 items-center">
+        <h1 className="text-3xl font-bold">Hi There!</h1>
+        <p className="max-w-[20rem] text-center opacity-75">
+            It seems like you already completed the onboarding process.
+        </p>
+
+        {/* Back to App */}
+        <Link className="mt-2.5" href="/dashboard">
+            <Button>Back to App</Button>
+        </Link>
+    </div>
+);
+export default CompletedOnboarding;

src/components/dashboard/onboarding/onboarding-form.tsx

@@ -0,0 +1,181 @@
+"use client";
+
+import { ReactElement, useState } from "react";
+import { BriefcaseIcon, ClipboardIcon } from "@heroicons/react/24/outline";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { motion } from "framer-motion";
+import { apiRequest } from "@/lib/api";
+import { useUserContext } from "@/app/provider/user-provider";
+import { UserState } from "@/app/store/user-store-props";
+import { Session } from "@/app/types/user/session";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { User } from "@/app/types/user/user";
+
+/**
+ * Define the various stages of onboarding.
+ */
+const organizationName = z.string().min(2, "You need a longer org name!!!");
+const stages: OnboardingStage[] = [
+    {
+        name: "Onboarding",
+        description:
+            "Welcome to Pulse App! To get started, first create your organization!",
+        schema: z.object({
+            organizationName,
+        }),
+    },
+    {
+        name: "Status Page",
+        description:
+            "Next, create your status page and jump right into the app!",
+        schema: z.object({
+            organizationName,
+            statusPageName: z
+                .string()
+                .min(2, "You need a longer status page name!!!"),
+        }),
+    },
+];
+
+/**
+ * The form to complete the
+ * onboarding process for a user.
+ *
+ * @return the form jsx
+ */
+const OnboardingForm = (): ReactElement => {
+    const session: Session | undefined = useUserContext(
+        (state: UserState) => state.session
+    );
+    const user: User | undefined = useUserContext(
+        (state: UserState) => state.user
+    );
+    const [stage, setStage] = useState<OnboardingStage>(stages[0]);
+    const [error, setError] = useState<string | undefined>(undefined);
+    const router: AppRouterInstance = useRouter();
+
+    // Build the form
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm({
+        resolver: zodResolver(stage.schema),
+    });
+
+    /**
+     * Handle submitting the form.
+     */
+    const onSubmit = async ({ organizationName, statusPageName }: any) => {
+        // Completed onboarding
+        if (stage === stages[stages.length - 1]) {
+            const { data, error } = await apiRequest<void>({
+                endpoint: "/user/complete-onboarding",
+                method: "POST",
+                session,
+                body: {
+                    organizationName,
+                    statusPageName,
+                },
+            });
+            setError(error?.message ?? undefined);
+            if (!error) {
+                toast(
+                    <p>
+                        Welcome to Pulse App <b>{user?.username}</b>! We hope
+                        you enjoy (:
+                    </p>
+                );
+                router.push("/dashboard");
+            }
+            return;
+        }
+        // Progress to the next stage
+        setStage(stages[stages.indexOf(stage) + 1]);
+    };
+
+    return (
+        <motion.div
+            key={stage.name}
+            className="flex flex-col gap-3"
+            initial={{ x: -50, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.4 }}
+        >
+            <form
+                className="flex flex-col gap-2"
+                onSubmit={handleSubmit(onSubmit)}
+            >
+                {/* Header */}
+                <div className="flex flex-col gap-1 select-none pointer-events-none">
+                    <h1 className="text-3xl font-bold">{stage.name}</h1>
+                    <p className="max-w-[20rem] opacity-65">
+                        {stage.description}
+                    </p>
+                </div>
+
+                {/* Organization Name */}
+                {stage === stages[0] && (
+                    <div className="relative">
+                        <BriefcaseIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
+                        <Input
+                            className="pl-8 rounded-lg"
+                            placeholder="Organization Name"
+                            {...register("organizationName")}
+                        />
+                    </div>
+                )}
+
+                {/* Status Page Name */}
+                {stage === stages[1] && (
+                    <div className="relative">
+                        <ClipboardIcon className="absolute left-2 top-[0.6rem] w-[1.15rem] h-[1.15rem]" />
+                        <Input
+                            className="pl-8 rounded-lg"
+                            placeholder="Status Page Name"
+                            {...register("statusPageName")}
+                        />
+                    </div>
+                )}
+
+                {/* Display the global error if it exists, otherwise show the first field error */}
+                <p className="text-red-500">
+                    {error
+                        ? error
+                        : Object.values(errors).find(
+                              (err: any) => err?.message
+                          ) &&
+                          Object.values(errors)
+                              .find((err: any) => err?.message)
+                              ?.message?.toString()}
+                </p>
+
+                {/* Back/Next Buttons */}
+                <div className="mt-1.5 flex justify-between">
+                    <Button
+                        className="bg-white"
+                        type="button"
+                        disabled={stage === stages[0]}
+                        onClick={() =>
+                            setStage(stages[stages.indexOf(stage) - 1])
+                        }
+                    >
+                        Back
+                    </Button>
+                    <Button className="bg-white" type="submit">
+                        {stage === stages[stages.length - 1]
+                            ? "Finish"
+                            : "Next"}
+                    </Button>
+                </div>
+            </form>
+        </motion.div>
+    );
+};
+export default OnboardingForm;

src/lib/api.ts

@@ -1,4 +1,4 @@
-import { Session } from "@/app/types/session";
+import { Session } from "@/app/types/user/session";
 import { ApiError } from "@/app/types/api-error";
 
 type ApiRequestProps = {
@@ -7,16 +7,16 @@ type ApiRequestProps = {
      */
     endpoint: string;
 
-    /**
-     * The session to authenticate with, if any.
-     */
-    session?: Session | undefined;
-
     /**
      * The method of the request to make.
      */
     method?: string | undefined;
 
+    /**
+     * The session to authenticate with, if any.
+     */
+    session?: Session | undefined;
+
     /**
      * The optional body of the request.
      */

src/lib/user.ts

@@ -0,0 +1,12 @@
+import { User } from "@/app/types/user/user";
+import { UserFlag } from "@/app/types/user/user-flag";
+
+/**
+ * Check if a user has a flag.
+ *
+ * @param user the user to check
+ * @param flag the flag to check
+ * @return whether the user has the flag
+ */
+export const hasFlag = (user: User, flag: UserFlag): boolean =>
+    (user.flags & flag) != 0;