2022-08-26 00:11:41 +00:00
|
|
|
import { useRouter } from "next/router";
|
|
|
|
import { useMemo } from "react";
|
2022-11-23 02:55:25 +00:00
|
|
|
import { Controller, useForm } from "react-hook-form";
|
2022-08-26 00:11:41 +00:00
|
|
|
|
2023-01-05 17:00:16 +00:00
|
|
|
import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
|
2022-08-26 00:11:41 +00:00
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
2023-01-26 22:51:03 +00:00
|
|
|
import { nameOfDay } from "@calcom/lib/weekday";
|
2023-02-16 22:39:57 +00:00
|
|
|
import type { RouterOutputs } from "@calcom/trpc/react";
|
|
|
|
import { trpc } from "@calcom/trpc/react";
|
2022-11-23 02:55:25 +00:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Form,
|
|
|
|
Label,
|
|
|
|
Meta,
|
|
|
|
Select,
|
|
|
|
showToast,
|
|
|
|
SkeletonButton,
|
|
|
|
SkeletonContainer,
|
|
|
|
SkeletonText,
|
|
|
|
TimezoneSelect,
|
|
|
|
} from "@calcom/ui";
|
2022-08-26 00:11:41 +00:00
|
|
|
|
|
|
|
import { withQuery } from "@lib/QueryCell";
|
2022-09-15 09:05:26 +00:00
|
|
|
|
2022-12-07 20:53:44 +00:00
|
|
|
const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
|
2022-09-15 09:05:26 +00:00
|
|
|
return (
|
|
|
|
<SkeletonContainer>
|
2022-12-07 20:53:44 +00:00
|
|
|
<Meta title={title} description={description} />
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="mt-6 mb-8 space-y-6">
|
2022-09-15 09:05:26 +00:00
|
|
|
<SkeletonText className="h-8 w-full" />
|
|
|
|
<SkeletonText className="h-8 w-full" />
|
|
|
|
<SkeletonText className="h-8 w-full" />
|
|
|
|
<SkeletonText className="h-8 w-full" />
|
|
|
|
|
|
|
|
<SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
|
|
|
|
</div>
|
|
|
|
</SkeletonContainer>
|
|
|
|
);
|
|
|
|
};
|
2022-08-26 00:11:41 +00:00
|
|
|
|
|
|
|
interface GeneralViewProps {
|
|
|
|
localeProp: string;
|
2022-11-10 23:40:01 +00:00
|
|
|
user: RouterOutputs["viewer"]["me"];
|
2022-08-26 00:11:41 +00:00
|
|
|
}
|
|
|
|
|
2022-11-10 23:40:01 +00:00
|
|
|
const WithQuery = withQuery(trpc.viewer.public.i18n, undefined, { trpc: { context: { skipBatch: true } } });
|
2022-08-26 00:11:41 +00:00
|
|
|
|
2022-09-15 09:05:26 +00:00
|
|
|
const GeneralQueryView = () => {
|
2022-10-06 13:37:52 +00:00
|
|
|
const { t } = useLocale();
|
|
|
|
|
2022-11-10 23:40:01 +00:00
|
|
|
const { data: user, isLoading } = trpc.viewer.me.useQuery();
|
2022-12-07 20:53:44 +00:00
|
|
|
if (isLoading) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
|
2022-10-06 13:37:52 +00:00
|
|
|
if (!user) {
|
|
|
|
throw new Error(t("something_went_wrong"));
|
|
|
|
}
|
2022-09-15 09:05:26 +00:00
|
|
|
return (
|
|
|
|
<WithQuery
|
2022-10-06 13:37:52 +00:00
|
|
|
success={({ data }) => <GeneralView user={user} localeProp={data.locale} />}
|
2022-12-07 20:53:44 +00:00
|
|
|
customLoader={<SkeletonLoader title={t("general")} description={t("general_description")} />}
|
2022-09-15 09:05:26 +00:00
|
|
|
/>
|
|
|
|
);
|
2022-08-26 00:11:41 +00:00
|
|
|
};
|
|
|
|
|
2022-10-06 13:37:52 +00:00
|
|
|
const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
|
2022-08-26 00:11:41 +00:00
|
|
|
const router = useRouter();
|
2022-09-14 09:28:23 +00:00
|
|
|
const utils = trpc.useContext();
|
2022-09-15 09:05:26 +00:00
|
|
|
const { t } = useLocale();
|
2022-08-26 00:11:41 +00:00
|
|
|
|
2022-11-10 23:40:01 +00:00
|
|
|
const mutation = trpc.viewer.updateProfile.useMutation({
|
2023-02-14 15:01:34 +00:00
|
|
|
onSuccess: async () => {
|
|
|
|
// Invalidate our previous i18n cache
|
|
|
|
await utils.viewer.public.i18n.invalidate();
|
2022-12-20 13:25:15 +00:00
|
|
|
reset(getValues());
|
2022-08-26 00:11:41 +00:00
|
|
|
showToast(t("settings_updated_successfully"), "success");
|
|
|
|
},
|
|
|
|
onError: () => {
|
|
|
|
showToast(t("error_updating_settings"), "error");
|
|
|
|
},
|
2022-09-14 09:28:23 +00:00
|
|
|
onSettled: async () => {
|
2022-11-10 23:40:01 +00:00
|
|
|
await utils.viewer.public.i18n.invalidate();
|
2022-09-14 09:28:23 +00:00
|
|
|
},
|
2022-08-26 00:11:41 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const localeOptions = useMemo(() => {
|
|
|
|
return (router.locales || []).map((locale) => ({
|
|
|
|
value: locale,
|
2022-09-09 12:57:31 +00:00
|
|
|
label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
|
2022-08-26 00:11:41 +00:00
|
|
|
}));
|
2022-09-09 12:57:31 +00:00
|
|
|
}, [router.locales]);
|
2022-08-26 00:11:41 +00:00
|
|
|
|
|
|
|
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 formMethods = useForm({
|
|
|
|
defaultValues: {
|
|
|
|
locale: {
|
|
|
|
value: localeProp || "",
|
|
|
|
label: localeOptions.find((option) => option.value === localeProp)?.label || "",
|
|
|
|
},
|
2022-10-06 13:37:52 +00:00
|
|
|
timeZone: user.timeZone || "",
|
2022-08-26 00:11:41 +00:00
|
|
|
timeFormat: {
|
2022-10-06 13:37:52 +00:00
|
|
|
value: user.timeFormat || 12,
|
|
|
|
label: timeFormatOptions.find((option) => option.value === user.timeFormat)?.label || 12,
|
2022-08-26 00:11:41 +00:00
|
|
|
},
|
|
|
|
weekStart: {
|
2022-10-06 13:37:52 +00:00
|
|
|
value: user.weekStart,
|
|
|
|
label: nameOfDay(localeProp, user.weekStart === "Sunday" ? 0 : 1),
|
2022-08-26 00:11:41 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
2022-12-20 13:25:15 +00:00
|
|
|
const {
|
|
|
|
formState: { isDirty, isSubmitting },
|
|
|
|
reset,
|
|
|
|
getValues,
|
|
|
|
} = formMethods;
|
|
|
|
const isDisabled = isSubmitting || !isDirty;
|
2022-08-26 00:11:41 +00:00
|
|
|
return (
|
|
|
|
<Form
|
|
|
|
form={formMethods}
|
|
|
|
handleSubmit={(values) => {
|
|
|
|
mutation.mutate({
|
|
|
|
...values,
|
|
|
|
locale: values.locale.value,
|
|
|
|
timeFormat: values.timeFormat.value,
|
|
|
|
weekStart: values.weekStart.value,
|
|
|
|
});
|
|
|
|
}}>
|
2022-12-07 20:53:44 +00:00
|
|
|
<Meta title={t("general")} description={t("general_description")} />
|
2022-08-26 00:11:41 +00:00
|
|
|
<Controller
|
|
|
|
name="locale"
|
2022-09-09 12:57:31 +00:00
|
|
|
render={({ field: { value, onChange } }) => (
|
2022-08-26 00:11:41 +00:00
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="text-emphasis">
|
2022-08-26 00:11:41 +00:00
|
|
|
<>{t("language")}</>
|
|
|
|
</Label>
|
2022-09-09 12:57:31 +00:00
|
|
|
<Select<{ label: string; value: string }>
|
|
|
|
className="capitalize"
|
2022-08-26 00:11:41 +00:00
|
|
|
options={localeOptions}
|
|
|
|
value={value}
|
2022-09-09 12:57:31 +00:00
|
|
|
onChange={onChange}
|
2022-08-26 00:11:41 +00:00
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Controller
|
|
|
|
name="timeZone"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="text-emphasis mt-8">
|
2022-08-26 00:11:41 +00:00
|
|
|
<>{t("timezone")}</>
|
|
|
|
</Label>
|
|
|
|
<TimezoneSelect
|
|
|
|
id="timezone"
|
|
|
|
value={value}
|
|
|
|
onChange={(event) => {
|
2022-12-20 13:25:15 +00:00
|
|
|
if (event) formMethods.setValue("timeZone", event.value, { shouldDirty: true });
|
2022-08-26 00:11:41 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Controller
|
|
|
|
name="timeFormat"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="text-emphasis mt-8">
|
2022-08-26 00:11:41 +00:00
|
|
|
<>{t("time_format")}</>
|
|
|
|
</Label>
|
|
|
|
<Select
|
|
|
|
value={value}
|
|
|
|
options={timeFormatOptions}
|
|
|
|
onChange={(event) => {
|
2022-12-20 13:25:15 +00:00
|
|
|
if (event) formMethods.setValue("timeFormat", { ...event }, { shouldDirty: true });
|
2022-08-26 00:11:41 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-gray text-default mt-2 flex items-center text-sm">
|
2022-10-25 00:14:06 +00:00
|
|
|
{t("timeformat_profile_hint")}
|
|
|
|
</div>
|
2022-08-26 00:11:41 +00:00
|
|
|
<Controller
|
|
|
|
name="weekStart"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="text-emphasis mt-8">
|
2022-08-26 00:11:41 +00:00
|
|
|
<>{t("start_of_week")}</>
|
|
|
|
</Label>
|
|
|
|
<Select
|
|
|
|
value={value}
|
|
|
|
options={weekStartOptions}
|
|
|
|
onChange={(event) => {
|
2022-12-20 13:25:15 +00:00
|
|
|
if (event) formMethods.setValue("weekStart", { ...event }, { shouldDirty: true });
|
2022-08-26 00:11:41 +00:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
2022-12-20 13:25:15 +00:00
|
|
|
<Button disabled={isDisabled} color="primary" type="submit" className="mt-8">
|
2022-08-26 00:11:41 +00:00
|
|
|
<>{t("update")}</>
|
|
|
|
</Button>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
GeneralQueryView.getLayout = getLayout;
|
|
|
|
|
|
|
|
export default GeneralQueryView;
|