import { HashtagIcon, InformationCircleIcon, LinkIcon, PhotographIcon } from "@heroicons/react/solid"; import React, { useRef, useState } from "react"; import { useLocale } from "@lib/hooks/useLocale"; import showToast from "@lib/notification"; import { TeamWithMembers } from "@lib/queries/teams"; import { trpc } from "@lib/trpc"; import ImageUploader from "@components/ImageUploader"; import { TextField } from "@components/form/fields"; import { Alert } from "@components/ui/Alert"; import Button from "@components/ui/Button"; 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 for (const key in variables) { if (variables[key] === 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_APP_URL}/{"team/"} } ref={teamUrlRef} defaultValue={team?.slug as string} /> } /> } />

{t("team_description")}

} />
{hasLogo && ( )}
} />

{t("disable_cal_branding_description")}

); }