// eslint-disable-next-line no-restricted-imports import { noop } from "lodash"; import { Controller, useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { localeOptions } from "@calcom/lib/i18n"; import { nameOfDay } from "@calcom/lib/weekday"; import { Avatar, Button, EmailField, Form, ImageUploader, Label, Select, TextField, TimezoneSelect, } from "@calcom/ui"; import type { UserAdminRouterOutputs } from "../server/trpc-router"; type User = UserAdminRouterOutputs["get"]["user"]; type Option = { value: T; label: string; }; type OptionValues = { locale: Option; timeFormat: Option; timeZone: string; weekStart: Option; role: Option; identityProvider: Option; }; type FormValues = Pick & OptionValues; export const UserForm = ({ defaultValues, localeProp = "en", onSubmit = noop, submitLabel = "save", }: { defaultValues?: Pick; localeProp?: string; onSubmit: (data: FormValues) => void; submitLabel?: string; }) => { const { t } = useLocale(); const timeFormatOptions = [ { value: 12, label: t("12_hour") }, { value: 24, label: t("24_hour") }, ]; const weekStartOptions = [ { value: "Sunday", label: nameOfDay(localeProp, 0) }, { value: "Monday", label: nameOfDay(localeProp, 1) }, { value: "Tuesday", label: nameOfDay(localeProp, 2) }, { value: "Wednesday", label: nameOfDay(localeProp, 3) }, { value: "Thursday", label: nameOfDay(localeProp, 4) }, { value: "Friday", label: nameOfDay(localeProp, 5) }, { value: "Saturday", label: nameOfDay(localeProp, 6) }, ]; const userRoleOptions = [ { value: "USER", label: t("user") }, { value: "ADMIN", label: t("admin") }, ]; const identityProviderOptions = [ { value: "CAL", label: "CAL" }, { value: "GOOGLE", label: "GOOGLE" }, { value: "SAML", label: "SAML" }, ]; const defaultLocale = defaultValues?.locale || localeOptions[0].value; const form = useForm({ defaultValues: { avatar: defaultValues?.avatar, name: defaultValues?.name, username: defaultValues?.username, email: defaultValues?.email, bio: defaultValues?.bio, locale: { value: defaultLocale, label: new Intl.DisplayNames(defaultLocale, { type: "language" }).of(defaultLocale) || "", }, timeFormat: { value: defaultValues?.timeFormat || 12, label: timeFormatOptions.find((option) => option.value === defaultValues?.timeFormat)?.label || "12", }, timeZone: defaultValues?.timeZone || "", weekStart: { value: defaultValues?.weekStart || weekStartOptions[0].value, label: nameOfDay(localeProp, defaultValues?.weekStart === "Sunday" ? 0 : 1), }, role: { value: defaultValues?.role || userRoleOptions[0].value, label: userRoleOptions.find((option) => option.value === defaultValues?.role)?.label || userRoleOptions[0].label, }, identityProvider: { value: defaultValues?.identityProvider || identityProviderOptions[0].value, label: identityProviderOptions.find((option) => option.value === defaultValues?.identityProvider)?.label || identityProviderOptions[0].label, }, }, }); return (
( <>
{ form.setValue("avatar", newAvatar, { shouldDirty: true }); }} imageSrc={value || undefined} />
)} />
(
value={value} options={userRoleOptions} onChange={onChange} />
)} /> (
value={value} options={identityProviderOptions} onChange={onChange} />
)} /> ( <> className="capitalize" options={localeOptions} value={value} onChange={onChange} /> )} /> ( <> { if (event) form.setValue("timeZone", event.value); }} /> )} /> ( <> { if (event) form.setValue("weekStart", { ...event }); }} /> )} />
); };