import { useRouter } from "next/router"; import { useMemo, useState } from "react"; import { Alert } from "@calcom/ui/Alert"; import TeamAvailabilityScreen from "@ee/components/team/availability/TeamAvailabilityScreen"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import useMeQuery from "@lib/hooks/useMeQuery"; import { trpc } from "@lib/trpc"; import Loader from "@components/Loader"; import Shell from "@components/Shell"; import Avatar from "@components/ui/Avatar"; export function TeamAvailabilityPage() { 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;