import { ArrowRightIcon } from "@heroicons/react/outline"; import { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import dayjs from "@calcom/dayjs"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { trpc } from "@calcom/trpc/react"; import { Button, TimezoneSelect } from "@calcom/ui"; import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability"; import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]"; interface IUserSettingsProps { user: IOnboardingPageProps["user"]; nextStep: () => void; } const UserSettings = (props: IUserSettingsProps) => { const { user, nextStep } = props; const { t } = useLocale(); const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess()); const telemetry = useTelemetry(); const { register, handleSubmit, formState: { errors }, } = useForm({ defaultValues: { name: user?.name || "", }, reValidateMode: "onChange", }); useEffect(() => { telemetry.event(telemetryEventTypes.onboardingStarted); }, [telemetry]); const defaultOptions = { required: true, maxLength: 255 }; const utils = trpc.useContext(); const onSuccess = async () => { await utils.viewer.me.invalidate(); nextStep(); }; const mutation = trpc.viewer.updateProfile.useMutation({ onSuccess: onSuccess, }); const onSubmit = handleSubmit((data) => { mutation.mutate({ name: data.name, timeZone: selectedTimeZone, }); }); return (
{/* Username textfield */} {/* Full name textfield */}
{errors.name && (

{t("required")}

)}
{/* Timezone select field */}
setSelectedTimeZone(value)} className="mt-2 w-full rounded-md text-sm" />

{t("current_time")} {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}

); }; export { UserSettings };