Implement user onboarding process

app/(tabs)/goals.tsx

@@ -10,7 +10,8 @@
 import { Text } from "~/components/ui/text";
 import { Button } from "~/components/ui/button";
 import { Link, SplashScreen } from "expo-router";
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useRef, useState } from "react";
 import { fontFamily } from "~/lib/font";
 import { Plus } from "lucide-react-native";
 import { Separator } from "~/components/ui/separator";
@@ -235,7 +236,7 @@
     return null;
   }
 
   const handleLogPress = (e: any) => {
     e.stopPropagation(); // Prevent parent navigation
 
     if (latestLog.isComplete) {
@@ -244,7 +245,11 @@
     }
 
     router.push({
-      pathname: `/goals/${goal._id}/${latestLog._id}/start/logProgress`,
+      pathname: `/goals/[goalId]/[goalLogId]/start/logProgress`,
+      params: {
+        goalId: goal._id,
+        goalLogId: latestLog._id,
+      },
     });
   };
 

app/_layout.tsx

@@ -86,6 +86,20 @@ export default function RootLayout() {
               animation: "fade",
             }}
           />
+          <Stack.Screen
+            name="onboarding/profile/index"
+            options={{
+              headerShown: false,
+              animation: "slide_from_right",
+            }}
+          />
+          <Stack.Screen
+            name="onboarding/name/index"
+            options={{
+              headerShown: false,
+              animation: "slide_from_right",
+            }}
+          />
           <Stack.Screen
             name="sign-in"
             options={{

app/index.tsx

@@ -1,6 +1,7 @@
 import { Redirect } from "expo-router";
-import { Authenticated, Unauthenticated } from "convex/react";
+import { Authenticated, Unauthenticated, useQuery } from "convex/react";
 import Onboarding from "./onboarding";
+import { api } from "~/convex/_generated/api";
 
 export default function SignInPage() {
   return (
@@ -9,8 +10,16 @@ export default function SignInPage() {
         <Onboarding />
       </Unauthenticated>
       <Authenticated>
-        <Redirect href="/goals" />
+        <CrossRoad />
       </Authenticated>
     </>
   );
 }
+
+function CrossRoad() {
+  const user = useQuery(api.users.currentUser);
+  if (!user) {
+    return null;
+  }
+  return <Redirect href={user.hasOnboarded ? "/goals" : "/onboarding/name"} />;
+}

app/onboarding/name/index.tsx

@@ -0,0 +1,89 @@
+import { useMutation } from "convex/react";
+import { router, SplashScreen } from "expo-router";
+import { AlertCircle } from "lucide-react-native";
+import { useEffect, useState } from "react";
+import { View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import { SafeAreaView } from "react-native-safe-area-context";
+import FormSubmitButton from "~/components/form-submit-button";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Input } from "~/components/ui/input";
+import { Text } from "~/components/ui/text";
+import { api } from "~/convex/_generated/api";
+
+export default function OnboardingNamePage() {
+  useEffect(() => {
+    SplashScreen.hideAsync();
+  }, []);
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: "#082139",
+        justifyContent: "center",
+      }}
+    >
+      <KeyboardAwareScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          justifyContent: "center",
+        }}
+      >
+        <Text className="mb-6 text-center text-2xl font-bold">
+          What is your name?
+        </Text>
+        <OnboardingProfileForm />
+      </KeyboardAwareScrollView>
+    </SafeAreaView>
+  );
+}
+
+function OnboardingProfileForm() {
+  const updateUserName = useMutation(api.users.updateUserName);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState("");
+  const [name, setName] = useState("");
+
+  const handleSaveName = async () => {
+    try {
+      setIsPending(true);
+      if (name.trim().length < 2) {
+        throw new Error("Your name is too short");
+      }
+      const nameRegex = /^[a-zA-Z]+$/;
+      if (nameRegex.test(name.trim())) {
+        throw new Error("Your name can only contain letters");
+      }
+      await updateUserName({ name });
+      router.replace("/onboarding/profile");
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(error.message);
+      }
+    } finally {
+      setIsPending(false);
+    }
+  };
+  return (
+    <View className="gap-6 px-4">
+      {!!error && (
+        <Alert icon={AlertCircle} variant="destructive" className="max-w-xl">
+          <AlertTitle>Something went wrong!</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      <View className="gap-2">
+        <Input
+          inputMode="text"
+          placeholder="John Doe"
+          value={name}
+          onChangeText={setName}
+        />
+      </View>
+      <FormSubmitButton isPending={isPending} onPress={handleSaveName}>
+        Continue
+      </FormSubmitButton>
+    </View>
+  );
+}

app/onboarding/profile/index.tsx

@@ -0,0 +1,163 @@
+import { Link, router } from "expo-router";
+import { AlertCircle, CalendarDays } from "lucide-react-native";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { SafeAreaView } from "react-native-safe-area-context";
+import FormSubmitButton from "~/components/form-submit-button";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Text } from "~/components/ui/text";
+import { formatDate } from "~/lib/date";
+import { fontFamily } from "~/lib/font";
+import { useProfileFormStore } from "~/app/profile/edit/profile-form-store";
+import { useShallow } from "zustand/react/shallow";
+import { Button } from "~/components/ui/button";
+import { useMutation } from "convex/react";
+import { api } from "~/convex/_generated/api";
+
+export default function OnboardingProfilePage() {
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        backgroundColor: "#082139",
+        justifyContent: "center",
+      }}
+    >
+      <KeyboardAwareScrollView
+        contentContainerStyle={{
+          flexGrow: 1,
+          justifyContent: "center",
+        }}
+      >
+        <Text className="mb-6 text-center text-2xl font-bold">
+          Tell us more about you!
+        </Text>
+        <OnboardingProfileForm />
+      </KeyboardAwareScrollView>
+    </SafeAreaView>
+  );
+}
+
+function OnboardingProfileForm() {
+  const updateProfile = useMutation(api.users.updatePartialProfile);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState("");
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+  const [dob, setDob, weight, setWeight, height, setHeight] =
+    useProfileFormStore(
+      useShallow((s) => [
+        s.dob,
+        s.setDob,
+        s.weight,
+        s.setWeight,
+        s.height,
+        s.setHeight,
+      ])
+    );
+  const showDatePicker = () => {
+    setDatePickerVisibility(true);
+  };
+
+  const hideDatePicker = () => {
+    setDatePickerVisibility(false);
+  };
+
+  const handleConfirm = (date: Date) => {
+    setDob(date);
+    hideDatePicker();
+  };
+
+  const handleSaveProfile = async () => {
+    try {
+      setIsPending(true);
+      updateProfile({
+        dob: dob.getTime(),
+        weight: Number(weight),
+        height: Number(height),
+      });
+      router.replace("/goals");
+    } catch (error) {
+      if (error instanceof Error) {
+        setError(error.message);
+      }
+    } finally {
+      setIsPending(false);
+    }
+  };
+  return (
+    <View className="gap-6 px-4">
+      {!!error && (
+        <Alert icon={AlertCircle} variant="destructive" className="max-w-xl">
+          <AlertTitle>Something went wrong!</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      <Pressable onPress={showDatePicker}>
+        <View className="rounded-xl border border-input">
+          <View className="flex flex-row items-center gap-4 p-5">
+            <View className="rounded-xl bg-[#1E00FE] p-2">
+              <CalendarDays color="#fff" />
+            </View>
+            <View>
+              <Text
+                className="text-xs text-muted-foreground"
+                style={{
+                  fontFamily: fontFamily.openSans.semiBold,
+                  letterSpacing: 0.5,
+                }}
+              >
+                Date of Birth
+              </Text>
+              <Text
+                style={{
+                  fontFamily: fontFamily.openSans.semiBold,
+                }}
+              >
+                {formatDate(dob)}
+              </Text>
+            </View>
+          </View>
+          <DateTimePicker
+            display="inline"
+            isVisible={isDatePickerVisible}
+            mode="date"
+            date={dob}
+            maximumDate={new Date()}
+            onConfirm={handleConfirm}
+            onCancel={hideDatePicker}
+          />
+        </View>
+      </Pressable>
+      <View className="gap-2">
+        <Label nativeID="height">Height (cm)</Label>
+        <Input
+          placeholder="Enter your height"
+          value={height}
+          onChangeText={setHeight}
+          keyboardType="numeric"
+        />
+      </View>
+      <View className="gap-2">
+        <Label nativeID="weight">Weight (kg)</Label>
+        <Input
+          placeholder="Enter your weight"
+          value={weight}
+          onChangeText={setWeight}
+          keyboardType="numeric"
+        />
+      </View>
+      <FormSubmitButton isPending={isPending} onPress={handleSaveProfile}>
+        Continue
+      </FormSubmitButton>
+      <Link href="/goals" asChild>
+        <Button variant="link">
+          <Text>Skip for now</Text>
+        </Button>
+      </Link>
+    </View>
+  );
+}

convex/_generated/api.d.ts

@@ -16,16 +16,19 @@ import type {
   FunctionReference,
 } from "convex/server";
 import type * as ResendOTP from "../ResendOTP.js";
-import type * as actions from "../actions.js";
 import type * as auth from "../auth.js";
 import type * as challenges from "../challenges.js";
 import type * as emails_LTLoginOTP from "../emails/LTLoginOTP.js";
+import type * as emails_LTUserInvitation from "../emails/LTUserInvitation.js";
 import type * as emails_LTWelcome from "../emails/LTWelcome.js";
 import type * as goalLogs from "../goalLogs.js";
 import type * as goals from "../goals.js";
 import type * as http from "../http.js";
+import type * as invitations from "../invitations.js";
+import type * as members from "../members.js";
 import type * as organizations from "../organizations.js";
 import type * as users from "../users.js";
+import type * as utils from "../utils.js";
 
 /**
  * A utility for referencing Convex functions in your app's API.
@@ -37,16 +40,19 @@ import type * as users from "../users.js";
  */
 declare const fullApi: ApiFromModules<{
   ResendOTP: typeof ResendOTP;
-  actions: typeof actions;
   auth: typeof auth;
   challenges: typeof challenges;
   "emails/LTLoginOTP": typeof emails_LTLoginOTP;
+  "emails/LTUserInvitation": typeof emails_LTUserInvitation;
   "emails/LTWelcome": typeof emails_LTWelcome;
   goalLogs: typeof goalLogs;
   goals: typeof goals;
   http: typeof http;
+  invitations: typeof invitations;
+  members: typeof members;
   organizations: typeof organizations;
   users: typeof users;
+  utils: typeof utils;
 }>;
 export declare const api: FilterApi<
   typeof fullApi,