import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { MembershipRole } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import { Button, ColorPicker, Form, Meta, showToast, SkeletonButton, SkeletonContainer, SkeletonText, Switch, } from "@calcom/ui"; import ThemeLabel from "../../../settings/ThemeLabel"; import { getLayout } from "../../../settings/layouts/SettingsLayout"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { return (
); }; interface TeamAppearanceValues { hideBranding: boolean; hideBookATeamMember: boolean; brandColor: string; darkBrandColor: string; theme: string | null | undefined; } const ProfileView = () => { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const mutation = trpc.viewer.teams.update.useMutation({ onError: (err) => { showToast(err.message, "error"); }, async onSuccess() { await utils.viewer.teams.get.invalidate(); showToast(t("your_team_updated_successfully"), "success"); }, }); const { data: team, isLoading } = trpc.viewer.teams.get.useQuery( { teamId: Number(router.query.id) }, { onError: () => { router.push("/settings"); }, } ); const form = useForm({ defaultValues: { theme: team?.theme, brandColor: team?.brandColor, darkBrandColor: team?.darkBrandColor, hideBranding: team?.hideBranding, }, }); const isAdmin = team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); if (isLoading) { return ; } return ( <> {isAdmin ? (
{ mutation.mutate({ id: team.id, ...values, theme: values.theme || null, }); }}>

{t("theme")}

{t("theme_applies_note")}


{t("custom_brand_colors")}

{t("customize_your_brand_colors")}

(

{t("light_brand_color")}

form.setValue("brandColor", value, { shouldDirty: true })} />
)} /> (

{t("dark_brand_color")}

form.setValue("darkBrandColor", value, { shouldDirty: true })} />
)} />

{t("team_disable_cal_branding_description", { appName: APP_NAME })}

( { form.setValue("hideBranding", isChecked); }} /> )} />

{t("hide_book_a_team_member_description")}

( { form.setValue("hideBookATeamMember", isChecked); }} /> )} />
) : (
{t("only_owner_change")}
)} ); }; ProfileView.getLayout = getLayout; export default ProfileView;