diff --git a/frontend-nextjs/app/actions.ts b/frontend-nextjs/app/actions.ts index 309d62a..1b94e2d 100644 --- a/frontend-nextjs/app/actions.ts +++ b/frontend-nextjs/app/actions.ts @@ -4,9 +4,8 @@ import { encodedRedirect } from "@/utils/utils"; import { createClient } from "@/utils/supabase/server"; import { headers } from "next/headers"; import { redirect } from "next/navigation"; -import { getMacAddressFromDeviceCode, isValidMacAddress } from "@/lib/utils"; import { addUserToDevice, dbCheckUserCode } from "@/db/devices"; -import { getSimpleUserById, updateUser } from "@/db/users"; +import { getSimpleUserById } from "@/db/users"; export async function deleteUserApiKey(userId: string) { const supabase = createClient(); @@ -174,30 +173,3 @@ export const isPremiumUser = async (userId: string) => { const dbUser = await getSimpleUserById(supabase, userId); return dbUser?.is_premium; }; - -export async function registerDevice(userId: string, deviceCode: string) { - // check if deviceCode is valid mac address - if (!isValidMacAddress(deviceCode)) { - return { error: "Invalid device code" }; - } - - const supabase = createClient(); - const { data, error } = await supabase - .from("devices") - .insert({ - user_id: userId, - user_code: deviceCode, // this is the device code that the user will use to register their device (friendly code preferred) - mac_address: deviceCode, - }).select(); - - if (error) { - console.log(error); - return { error: "Error registering device" }; - } - - if (data && data.length > 0) { - await updateUser(supabase, { device_id: data[0].device_id }, userId); - } - - return { error: null }; -} diff --git a/frontend-nextjs/app/components/Onboarding/Steps.tsx b/frontend-nextjs/app/components/Onboarding/Steps.tsx index 8858ae0..e017208 100644 --- a/frontend-nextjs/app/components/Onboarding/Steps.tsx +++ b/frontend-nextjs/app/components/Onboarding/Steps.tsx @@ -1,135 +1,57 @@ + "use client"; import { Progress } from "@/components/ui/progress"; -import { ArrowLeft, ArrowRight } from "lucide-react"; -import React, { useState } from "react"; -import { Button } from "@/components/ui/button"; -import UserType from "./UserType"; +import React from "react"; import GeneralUserForm from "../Settings/UserForm"; -import DoctorForm from "../Settings/DoctorForm"; import { useRouter } from "next/navigation"; -import { Label } from "@/components/ui/label"; -import { Input } from "@/components/ui/input"; -import { checkDoctorAction } from "@/app/actions"; -import { useToast } from "@/components/ui/use-toast"; - -type TUserType = "doctor" | "user" | "business"; +import { createClient } from "@/utils/supabase/client"; +import { updateUser } from "@/db/users"; +import { Loader2 } from "lucide-react"; const Steps: React.FC<{ - selectedUser: IUser; -}> = ({ selectedUser }) => { + selectedUser?: IUser; + userId: string; +}> = ({ selectedUser, userId }) => { + const supabase = createClient(); const router = useRouter(); - const { toast } = useToast(); - const [progress, setProgress] = React.useState(40); - const [step, setStep] = React.useState(0); - const [selectedType, setSelectedType] = useState(null); - const [doctorAuthCode, setDoctorAuthCode] = useState(""); - - const onSelectType = (type: TUserType) => { - setSelectedType(type); - setStep(1); - setProgress(progress + 30); - }; - - const onClickBack = () => { - setStep(step - 1); - setProgress(progress - 30); - }; + const [progress, setProgress] = React.useState(50); + const [step, setStep] = React.useState(1); const onClickFormCallback = async () => { - if (selectedType === "doctor") { - const res = await checkDoctorAction(doctorAuthCode); - if (!res) { - toast({ - description: - "Your sign-up code did not match our records. Try again or reach out to us for help.", - }); - return; - } - } setStep(step + 1); - setProgress(progress + 30); + setProgress(progress + 50); router.push("/home"); }; const CurrentForm = () => { - if (step === 0) { - return ( - - ); - } else { - if (selectedType === "doctor") { - return ( - } - onClickCallback={onClickFormCallback} - /> - ); - } else { - return ( - } - onClickCallback={onClickFormCallback} - /> - ); - } - } - }; - - const Navigation = () => { + if (step === 1) { return ( -
-
- {step > 0 && ( - - )} - {step > 0 && ( - - )} -
- {selectedType === "doctor" && ( -
- - setDoctorAuthCode(e.target.value)} - placeholder="Sign-up code" - className="max-w-screen-sm h-10 bg-white" - autoComplete="on" - style={{ - fontSize: 16, - }} - /> -
- )} -
+ { + await updateUser( + supabase, + { + supervisee_age: values.supervisee_age, + supervisee_name: values.supervisee_name, + supervisee_persona: values.supervisee_persona, + user_info: { + user_type: userType, + user_metadata: values, + }, + }, + userId); + }} + disabled={false} + /> ); + } else { + return ; + } }; let heading = "Let's get your Elato device & account set up"; @@ -137,11 +59,7 @@ const Steps: React.FC<{ "We want to make sure that your Elato is set up to provide you the best experience possible."; if (step === 1) { - if (selectedType === "doctor") { - heading = "Hello Doctor!"; - subHeading = - "With the following details we will be able to personalize your and your patients' Elato experience."; - } else { + { heading = "Hello there!"; subHeading = "With the following details we will be able to personalize your Elato experience."; @@ -158,4 +76,4 @@ const Steps: React.FC<{ ); }; -export default Steps; +export default Steps; \ No newline at end of file diff --git a/frontend-nextjs/app/components/Onboarding/UserType.tsx b/frontend-nextjs/app/components/Onboarding/UserType.tsx index a3f0d8a..97b7caf 100644 --- a/frontend-nextjs/app/components/Onboarding/UserType.tsx +++ b/frontend-nextjs/app/components/Onboarding/UserType.tsx @@ -24,12 +24,6 @@ const UserTypes: IUserType[] = [ title: "You are looking to use Elato for personal use", icon: , }, - { - type: "doctor", - name: "Doctor", - title: "You are a licensed doctor or physician", - icon: , - }, { type: "business", name: "Business", @@ -40,10 +34,9 @@ const UserTypes: IUserType[] = [ ]; const UserType: React.FC<{ - selectedUser: IUser; selectedType: TUserType | null; onSelectType: (type: TUserType) => void; -}> = ({ selectedType, onSelectType, selectedUser }) => { +}> = ({ selectedType, onSelectType }) => { const onPickType = async (userType: IUserType) => { if (!userType.disabled) { onSelectType(userType.type); @@ -55,7 +48,7 @@ const UserType: React.FC<{

You are a {" "}

-
+
{UserTypes.map((userType) => (
); -}; - -export default UserType; +}; \ No newline at end of file diff --git a/frontend-nextjs/app/components/Settings/AppSettings.tsx b/frontend-nextjs/app/components/Settings/AppSettings.tsx index df55fa4..0586cc1 100644 --- a/frontend-nextjs/app/components/Settings/AppSettings.tsx +++ b/frontend-nextjs/app/components/Settings/AppSettings.tsx @@ -1,9 +1,10 @@ -import { registerDevice, signOutAction } from "@/app/actions"; + +import { connectUserToDevice, signOutAction } from "@/app/actions"; import { Button } from "@/components/ui/button"; import { Label } from "@/components/ui/label"; import { Input } from "@/components/ui/input"; import { LogOut } from "lucide-react"; -import DoctorForm from "./DoctorForm"; + import GeneralUserForm from "./UserForm"; import { Slider } from "@/components/ui/slider"; import { updateUser } from "@/db/users"; @@ -12,12 +13,6 @@ import { createClient } from "@/utils/supabase/client"; import React, { useCallback } from "react"; import { doesUserHaveADevice, updateDevice } from "@/db/devices"; import { useToast } from "@/components/ui/use-toast"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, - TooltipProvider, - } from "@/components/ui/tooltip"; interface AppSettingsProps { selectedUser: IUser; @@ -35,7 +30,7 @@ const AppSettings: React.FC = ({ const userFormRef = React.useRef<{ submitForm: () => void } | null>(null); const [deviceCode, setDeviceCode] = React.useState(""); const [error, setError] = React.useState(""); - + const handleSave = () => { if (selectedUser.user_info.user_type === "doctor") { doctorFormRef.current?.submitForm(); @@ -50,6 +45,11 @@ const AppSettings: React.FC = ({ ); }, [selectedUser.user_id, supabase]); + React.useEffect(() => { + checkIfUserHasDevice(); + }, [checkIfUserHasDevice]); + + const [volume, setVolume] = React.useState([ selectedUser.device?.volume ?? 50, ]); @@ -69,7 +69,8 @@ const AppSettings: React.FC = ({ debouncedUpdateVolume(); }; - const onSave = async (values: any, userType: "doctor" | "user") => { + const onSave = async (values: any, userType: "doctor" | "user", userId: string) => { + await updateUser( supabase, { @@ -81,29 +82,22 @@ const AppSettings: React.FC = ({ user_metadata: values, }, }, - selectedUser!.user_id); - toast({ - description: "Your prefereces have been saved!", - }); -} + userId); + toast({ + description: "Your prefereces have been saved!", + }); + } return ( <> - {selectedUser.user_info.user_type === "doctor" ? ( - handleSave()} /> - ) : ( - handleSave()} - /> - )} +

Device settings @@ -112,18 +106,8 @@ const AppSettings: React.FC = ({
- - - - ? - - -

For simplicity, you can register your ESP32 MAC address here.
Ideally you want this to be a friendly code for your device.

- - - + Register your device +
= ({ />
- +
setDeviceCode(e.target.value)} - placeholder={isConnected ? "**********" : "Enter your ESP32-S3 MAC address"} + placeholder={isConnected ? "**********" : "Enter your device code"} + maxLength={100} />
+