feat: connect onboarding form to db

Author: gregfromstl

apps/dashboard/src/@/constants/auth.ts

@@ -1,4 +1,6 @@
 const LOGGED_IN_ONLY_PATHS = [
+  // must be logged in to go through onboarding
+  "/onboarding",
   // anything that _starts_ with /dashboard is logged in only
   "/dashboard",
   // team pages are logged in only

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -259,17 +259,17 @@ export interface BillingCredit {
 
 interface UseAccountInput {
   refetchInterval?:
-    | number
-    | false
-    | ((
-        query: Query<
-          Account,
-          Error,
-          Account,
-          readonly ["account", string, "me"]
-        >,
-      ) => number | false | undefined)
-    | undefined;
+  | number
+  | false
+  | ((
+    query: Query<
+      Account,
+      Error,
+      Account,
+      readonly ["account", string, "me"]
+    >,
+  ) => number | false | undefined)
+  | undefined;
 }
 
 export function useAccount({ refetchInterval }: UseAccountInput = {}) {

apps/dashboard/src/app/onboarding/layout.tsx

@@ -0,0 +1,15 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import { AutoConnect } from "thirdweb/react";
+
+export default function OnboardingLayout({
+  children,
+}: { children: React.ReactNode }) {
+  const thirdwebClient = getThirdwebClient();
+
+  return (
+    <>
+      <AutoConnect client={thirdwebClient} />
+      {children}
+    </>
+  );
+}

apps/dashboard/src/app/onboarding/page.tsx

@@ -28,6 +28,9 @@ import {
   useForm,
 } from "react-hook-form";
 import { FormErrorMessage, FormLabel } from "tw-components";
+import { THIRDWEB_ANALYTICS_API_HOST } from "constants/urls";
+import { useAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import { useRouter } from "next/navigation";
 
 interface FormData {
   email: string;
@@ -63,8 +66,10 @@ const RadioGroupItemButton = React.forwardRef<
 });
 
 export default function OnboardingPage() {
+  const accountQuery = useAccount();
   const [step, setStep] = useState(1);
   const [direction, setDirection] = useState(1);
+  const router = useRouter();
 
   const {
     register,
@@ -80,8 +85,32 @@ export default function OnboardingPage() {
     },
   });
 
-  const onSubmit: SubmitHandler<FormData> = (data) => {
-    console.log(data);
+  const onSubmit: SubmitHandler<FormData> = async (data) => {
+    const res = await fetch(
+      `${THIRDWEB_ANALYTICS_API_HOST}/v1/preferences/account`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          accountId: accountQuery.data?.id,
+          userType: data.userType,
+          role: data.role,
+          industry: data.industry,
+          name: data.name,
+          email: data.email,
+          interests: data.interests,
+        }),
+      },
+    );
+    const json = await res.json();
+
+    if (res.status !== 200) {
+      throw new Error(json.message);
+    }
+
+    router.push("/dashboard");
   };
 
   const watchInterests = watch("interests");