import { useRouter } from "next/router"; import { useMemo, useState } from "react"; import { getPlaceholderAvatar } from "@calcom/lib/getPlaceholderAvatar"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery"; import { Alert } from "@calcom/ui/Alert"; import Loader from "@calcom/ui/Loader"; import Shell from "@calcom/ui/Shell"; import { Avatar } from "@calcom/ui/v2"; import LicenseRequired from "../../common/components/LicenseRequired"; import TeamAvailabilityScreen from "../components/TeamAvailabilityScreen"; export function TeamAvailabilityPage() { const { t } = useLocale(); const router = useRouter(); const [errorMessage, setErrorMessage] = useState(""); const me = useMeQuery(); const isFreeUser = me.data?.plan === "FREE"; const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: Number(router.query.id) }], { refetchOnWindowFocus: false, onError: (e) => { setErrorMessage(e.message); }, }); // prevent unnecessary re-renders due to shell queries const TeamAvailability = useMemo(() => { return ; }, [team]); return ( ) }> {!!errorMessage && } {isLoading && } {isFreeUser ? ( ) : ( TeamAvailability )} ); } export default TeamAvailabilityPage;