import { GetServerSidePropsContext } from "next"; import { useForm } from "react-hook-form"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Button, Form, getSettingsLayout as getLayout, Label, Meta, showToast, Skeleton, Switch, } from "@calcom/ui"; import { ssrInit } from "@server/lib/ssr"; const ProfileImpersonationView = () => { const { t } = useLocale(); const utils = trpc.useContext(); const { data: user } = trpc.viewer.me.useQuery(); const mutation = trpc.viewer.updateProfile.useMutation({ onSuccess: () => { showToast(t("profile_updated_successfully"), "success"); reset(getValues()); }, onSettled: () => { utils.viewer.me.invalidate(); }, onMutate: async ({ disableImpersonation }) => { await utils.viewer.me.cancel(); const previousValue = utils.viewer.me.getData(); if (previousValue && disableImpersonation) { utils.viewer.me.setData(undefined, { ...previousValue, disableImpersonation }); } return { previousValue }; }, onError: (error, variables, context) => { if (context?.previousValue) { utils.viewer.me.setData(undefined, context.previousValue); } showToast(`${t("error")}, ${error.message}`, "error"); }, }); const formMethods = useForm<{ disableImpersonation: boolean }>({ defaultValues: { disableImpersonation: user?.disableImpersonation, }, }); const { formState: { isSubmitting, isDirty }, setValue, reset, getValues, } = formMethods; const isDisabled = isSubmitting || !isDirty; return ( <>
{ mutation.mutate({ disableImpersonation }); }}>
{ setValue("disableImpersonation", !e, { shouldDirty: true }); }} fitToHeight={true} />
{t("user_impersonation_heading")} {t("user_impersonation_description")}
); }; ProfileImpersonationView.getLayout = getLayout; export const getServerSideProps = async (context: GetServerSidePropsContext) => { const ssr = await ssrInit(context); await ssr.viewer.me.prefetch(); return { props: { trpcState: ssr.dehydrate(), }, }; }; export default ProfileImpersonationView;