import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired"; 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, } from "@calcom/ui"; import ThemeLabel from "../../../../settings/ThemeLabel"; import { getLayout } from "../../../../settings/layouts/SettingsLayout"; const SkeletonLoader = ({ title, description }: { title: string; description: string }) => { return (
); }; interface OrgAppearanceValues { hideBranding: boolean; hideBookATeamMember: boolean; brandColor: string; darkBrandColor: string; theme: string | null | undefined; } const OrgAppearanceView = () => { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const mutation = trpc.viewer.organizations.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: currentOrg, isLoading } = trpc.viewer.organizations.listCurrent.useQuery(undefined, { onError: () => { router.push("/settings"); }, }); const form = useForm({ defaultValues: { theme: currentOrg?.theme, brandColor: currentOrg?.brandColor, darkBrandColor: currentOrg?.darkBrandColor, hideBranding: currentOrg?.hideBranding, }, }); const isAdmin = currentOrg && (currentOrg.user.role === MembershipRole.OWNER || currentOrg.user.role === MembershipRole.ADMIN); if (isLoading) { return ; } return ( {isAdmin ? (
{ mutation.mutate({ ...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("only_owner_change")}
)}
); }; OrgAppearanceView.getLayout = getLayout; export default OrgAppearanceView;