import React, { useRef, useState } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import showToast from "@calcom/lib/notification"; import { objectKeys } from "@calcom/lib/objectKeys"; import { TeamWithMembers } from "@calcom/lib/server/queries/teams"; import { trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { Icon } from "@calcom/ui/Icon"; import { TextField } from "@calcom/ui/form/fields"; import ImageUploader from "@components/ImageUploader"; import SettingInputContainer from "@components/ui/SettingInputContainer"; interface Props { team: TeamWithMembers | null | undefined; } export default function TeamSettings(props: Props) { const { t } = useLocale(); const [hasErrors, setHasErrors] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const team = props.team; const hasLogo = !!team?.logo; const utils = trpc.useContext(); const mutation = trpc.useMutation("viewer.teams.update", { onError: (err) => { setHasErrors(true); setErrorMessage(err.message); }, async onSuccess() { await utils.invalidateQueries(["viewer.teams.get"]); showToast(t("your_team_updated_successfully"), "success"); setHasErrors(false); }, }); const nameRef = useRef() as React.MutableRefObject; const teamUrlRef = useRef() as React.MutableRefObject; const descriptionRef = useRef() as React.MutableRefObject; const hideBrandingRef = useRef() as React.MutableRefObject; const logoRef = useRef() as React.MutableRefObject; function updateTeamData() { if (!team) return; const variables = { name: nameRef.current?.value, slug: teamUrlRef.current?.value, bio: descriptionRef.current?.value, hideBranding: hideBrandingRef.current?.checked, }; // remove unchanged variables objectKeys(variables).forEach((key) => { if (variables[key as keyof typeof variables] === team?.[key]) delete variables[key]; }); mutation.mutate({ id: team.id, ...variables }); } function updateLogo(newLogo: string) { if (!team) return; logoRef.current.value = newLogo; mutation.mutate({ id: team.id, logo: newLogo }); } const removeLogo = () => updateLogo(""); return (
{hasErrors && }
{ e.preventDefault(); updateTeamData(); }}>
{process.env.NEXT_PUBLIC_WEBSITE_URL}/team/ } ref={teamUrlRef} defaultValue={team?.slug as string} /> } /> } />