import { useState } from "react"; import { WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import isCalcom from "@calcom/lib/isCalcom"; import { trpc } from "@calcom/trpc/react"; import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui"; import SkeletonLoaderTeamList from "./SkeletonloaderTeamList"; import TeamList from "./TeamList"; export function TeamsListing() { const { t } = useLocale(); const [errorMessage, setErrorMessage] = useState(""); const { data, isLoading } = trpc.viewer.teams.list.useQuery(undefined, { onError: (e) => { setErrorMessage(e.message); }, }); const teams = data?.filter((m) => m.accepted) || []; const invites = data?.filter((m) => !m.accepted) || []; const features = [ { icon: , title: t("collective_scheduling"), description: t("make_it_easy_to_book"), }, { icon: , title: t("round_robin"), description: t("find_the_best_person"), }, { icon: , title: t("fixed_round_robin"), description: t("add_one_fixed_attendee"), }, ]; return ( <> {!!errorMessage && } {invites.length > 0 && (

{t("open_invitations")}

)} {isLoading && } {!teams.length && !isLoading && ( <> {isCalcom ? (

{t("calcom_is_better_with_team")}

{t("add_your_team_members")}

{features.map((feature) => (
{feature.icon}

{feature.title}

{feature.description}

))}
) : ( {t("create_team")} } /> )} )} {teams.length > 0 && } ); }