chore: Teams empty screen (#9997)

apps/web/pages/team/[slug].tsx

@@ -153,9 +153,9 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
         <div className="overflow-hidden rounded-sm border dark:border-gray-900">
           <div className="text-muted dark:text-inverted p-8 text-center">
             <h2 className="font-cal dark:text-inverted text-emphasis600 mb-2 text-3xl">
-              {" " + t("no_teams_yet")}
+              {" " + t("org_no_teams_yet")}
             </h2>
-            <p className="mx-auto max-w-md">{t("no_teams_yet_description")}</p>
+            <p className="mx-auto max-w-md">{t("org_no_teams_yet_description")}</p>
           </div>
         </div>
       </div>

apps/web/public/static/locales/en/common.json

@@ -695,7 +695,7 @@
   "create_new_team": "Create a new team",
   "open_invitations": "Open Invitations",
   "new_team": "New Team",
-  "create_first_team_and_invite_others": "Create your first team and invite other users to work together with you.",
+  "create_first_team_and_invite_others": "Create your first team and invite other users to work together.",
   "create_team_to_get_started": "Create a team to get started",
   "teams": "Teams",
   "team": "Team",
@@ -1913,8 +1913,8 @@
   "team_names_empty": "Team names can't be empty",
   "team_names_repeated": "Team names can't be repeated",
   "user_belongs_organization": "User belongs to an organization",
-  "no_teams_yet": "This organization has no teams yet",
-  "no_teams_yet_description": "if you are an administrator, be sure to create teams to be shown here.",
+  "org_no_teams_yet": "This organization has no teams yet",
+  "org_no_teams_yet_description": "If you are an administrator, be sure to create teams to be shown here.",
   "set_up": "Set up",
   "set_up_your_profile": "Set up your profile",
   "set_up_your_profile_description": "Let people know who you are within {{orgName}}, and when they engage with your public link.",

packages/features/ee/teams/components/CreateANewTeamForm.tsx

@@ -25,7 +25,6 @@ export const CreateANewTeamForm = () => {
   const router = useRouter();
   const telemetry = useTelemetry();
   const parsedQuery = querySchema.safeParse(router.query);
-  console.log({ parsedQuery });
   const [serverErrorMessage, setServerErrorMessage] = useState<string | null>(null);
   const orgBranding = useOrgBrandingValues();
 

packages/features/ee/teams/components/TeamsListing.tsx

@@ -4,7 +4,7 @@ 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, Label, showToast, ButtonGroup, Button } from "@calcom/ui";
+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";
@@ -119,7 +119,22 @@ export function TeamsListing() {
             <p>{t("org_admins_can_create_new_teams")}</p>
           )
         }>
-        {teams.length > 0 ? <TeamList teams={teams} /> : <></>}
+        {teams.length > 0 ? (
+          <TeamList teams={teams} />
+        ) : (
+          <EmptyScreen
+            Icon={Users}
+            headline={t("create_team_to_get_started")}
+            description={t("create_first_team_and_invite_others")}
+            buttonRaw={
+              <Button
+                color="secondary"
+                href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
+                {t(`create_new_team`)}
+              </Button>
+            }
+          />
+        )}
       </UpgradeTip>
     </>
   );