import { useRouter, useSearchParams } from "next/navigation"; import { useEffect, useMemo, useState } from "react"; import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Alert, Button, ButtonGroup, EmptyScreen, Label, showToast } from "@calcom/ui"; import { EyeOff, Mail, RefreshCcw, UserPlus, Users, Video } from "@calcom/ui/components/icon"; import { UpgradeTip } from "../../../tips"; import SkeletonLoaderTeamList from "./SkeletonloaderTeamList"; import TeamList from "./TeamList"; export function TeamsListing() { const searchParams = useSearchParams(); const token = searchParams?.get("token"); const { t } = useLocale(); const trpcContext = trpc.useContext(); const router = useRouter(); const [inviteTokenChecked, setInviteTokenChecked] = useState(false); const [errorMessage, setErrorMessage] = useState(""); const { data, isLoading } = trpc.viewer.teams.list.useQuery(undefined, { enabled: inviteTokenChecked, onError: (e) => { setErrorMessage(e.message); }, }); const { data: user } = trpc.viewer.me.useQuery(); const { mutate: inviteMemberByToken } = trpc.viewer.teams.inviteMemberByToken.useMutation({ onSuccess: (teamName) => { trpcContext.viewer.teams.list.invalidate(); showToast(t("team_invite_received", { teamName }), "success"); }, onError: (e) => { showToast(e.message, "error"); }, onSettled: () => { setInviteTokenChecked(true); }, }); const teams = useMemo(() => data?.filter((m) => m.accepted) || [], [data]); const invites = useMemo(() => data?.filter((m) => !m.accepted) || [], [data]); 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"), }, { icon: , title: t("sms_attendee_action"), description: t("make_it_easy_to_book"), }, { icon: