added new teams empty screen (#5847)

* added new teams empty screen

* replaced svg background with smaller jpg

* nit

* nit

* nit

* nit

* show old emptyscreen for self-hosters

* nit

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

@@ -466,14 +466,14 @@
   "booking_confirmation": "Confirm your {{eventTypeTitle}} with {{profileName}}",
   "booking_reschedule_confirmation": "Reschedule your {{eventTypeTitle}} with {{profileName}}",
   "in_person_meeting": "In-person meeting",
-  "attendeeInPerson":"In Person (Attendee Address)",
-  "inPerson":"In Person (Organizer Address)",
+  "attendeeInPerson": "In Person (Attendee Address)",
+  "inPerson": "In Person (Organizer Address)",
   "link_meeting": "Link meeting",
   "phone_call": "Attendee Phone Number",
   "your_number": "Your phone number",
   "phone_number": "Phone Number",
   "attendee_phone_number": "Attendee Phone Number",
-  "organizer_phone_number" :"Organizer Phone Number",
+  "organizer_phone_number": "Organizer Phone Number",
   "host_phone_number": "Your Phone Number",
   "enter_phone_number": "Enter phone number",
   "reschedule": "Reschedule",
@@ -1385,12 +1385,21 @@
   "choose_common_schedule_team_event_description": "Enable this if you want to use a common schedule between hosts. When disabled, each host will be booked based on their default schedule.",
   "reason": "Reason",
   "sender_id": "Sender ID",
-  "sender_id_error_message":"Only letters, numbers and spaces allowed (max. 11 characters)",
+  "sender_id_error_message": "Only letters, numbers and spaces allowed (max. 11 characters)",
   "test_routing_form": "Test Routing Form",
   "test_preview": "Test Preview",
   "route_to": "Route to",
   "test_preview_description": "Test your routing form without submitting any data",
   "test_routing": "Test Routing",
+  "booking_limit_reached": "Booking Limit for this event type has been reached",
+  "fill_this_field": "Please fill in this field",
+  "collective_scheduling": "Collective Scheduling",
+  "make_it_easy_to_book": "Make it easy to book your team when everyone is available.",
+  "find_the_best_person": "Find the best person available and cycle through your team.",
+  "fixed_round_robin": "Fixed round robin",
+  "add_one_fixed_attendee": "Add one fixed attendee and round robin through a number of attendees.",
+  "calcom_is_better_with_team": "Cal.com is better with teams",
+  "add_your_team_members": "Add your team members to your event types. Use collective scheduling to include everyone or find the most suitable person with round robin scheduling.",
   "booking_limit_reached":"Booking Limit for this event type has been reached",
   "fill_this_field": "Please fill in this field",
   "options": "Options",

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

@@ -2,6 +2,7 @@ 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";
 
@@ -21,6 +22,24 @@ export function TeamsListing() {
   const teams = data?.filter((m) => m.accepted) || [];
   const invites = data?.filter((m) => !m.accepted) || [];
 
+  const features = [
+    {
+      icon: <Icon.FiUsers className="h-5 w-5 text-gray-700" />,
+      title: t("collective_scheduling"),
+      description: t("make_it_easy_to_book"),
+    },
+    {
+      icon: <Icon.FiRefreshCcw className="h-5 w-5 text-gray-700" />,
+      title: t("round_robin"),
+      description: t("find_the_best_person"),
+    },
+    {
+      icon: <Icon.FiUserPlus className="h-5 w-5 text-gray-700" />,
+      title: t("fixed_round_robin"),
+      description: t("add_one_fixed_attendee"),
+    },
+  ];
+
   return (
     <>
       {!!errorMessage && <Alert severity="error" title={errorMessage} />}
@@ -32,16 +51,52 @@ export function TeamsListing() {
       )}
       {isLoading && <SkeletonLoaderTeamList />}
       {!teams.length && !isLoading && (
-        <EmptyScreen
-          Icon={Icon.FiUsers}
-          headline={t("no_teams")}
-          description={t("no_teams_description")}
-          buttonRaw={
-            <Button color="secondary" href={`${WEBAPP_URL}/settings/teams/new`}>
-              {t("create_team")}
-            </Button>
-          }
-        />
+        <>
+          {isCalcom ? (
+            <div className="max-w-[1118px]">
+              <div
+                className="flex w-full justify-between overflow-hidden rounded-lg pt-4 pb-10 md:min-h-[295px] md:pt-10"
+                style={{
+                  background: "url(/team-banner-background.jpg)",
+                  backgroundSize: "cover",
+                  backgroundRepeat: "no-repeat",
+                }}>
+                <div className="mt-3 px-14">
+                  <h1 className="font-cal text-3xl">{t("calcom_is_better_with_team")}</h1>
+                  <p className="my-4 max-w-sm text-gray-600">{t("add_your_team_members")}</p>
+                  <div className="space-y-2 sm:space-x-2">
+                    <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                      {t("create_team")}
+                    </Button>
+                    <Button href="https://go.cal.com/teams-video" target="_blank" color="secondary">
+                      {t("learn_more")}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div className="mt-6 grid-cols-3 md:grid md:gap-6">
+                {features.map((feature) => (
+                  <div key={feature.title} className="mb-6 min-h-[180px] w-full rounded-md bg-gray-50 p-8">
+                    {feature.icon}
+                    <h2 className="font-cal mt-4 text-lg">{feature.title}</h2>
+                    <p className="text-gray-700">{feature.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <EmptyScreen
+              Icon={Icon.FiUsers}
+              headline={t("no_teams")}
+              description={t("no_teams_description")}
+              buttonRaw={
+                <Button color="secondary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                  {t("create_team")}
+                </Button>
+              }
+            />
+          )}
+        </>
       )}
       {teams.length > 0 && <TeamList teams={teams} />}
     </>