[Proposal] Event type error popover proposal (#3627)

apps/web/package.json

@@ -32,10 +32,10 @@
     "@calcom/app-store-cli": "*",
     "@calcom/core": "*",
     "@calcom/dayjs": "*",
-    "@calcom/features": "*",
     "@calcom/embed-core": "*",
     "@calcom/embed-react": "*",
     "@calcom/embed-snippet": "*",
+    "@calcom/features": "*",
     "@calcom/lib": "*",
     "@calcom/prisma": "*",
     "@calcom/trpc": "*",
@@ -147,7 +147,7 @@
     "autoprefixer": "^10.4.7",
     "babel-jest": "^27.3.1",
     "env-cmd": "10.1.0",
-    "eslint": "^8.15.0",
+    "eslint": "^8.16.0",
     "jest": "^26.0.0",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.2",

apps/web/pages/event-types/index.tsx

@@ -40,6 +40,8 @@ import { TRPCClientError } from "@trpc/react";
 
 type EventTypeGroups = inferQueryOutput<"viewer.eventTypes">["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
+type ConnectedCalendars = inferQueryOutput<"viewer.connectedCalendars">["connectedCalendars"][number];
+
 interface EventTypeListHeadingProps {
   profile: EventTypeGroupProfile;
   membershipCount: number;
@@ -54,9 +56,23 @@ interface EventTypeListProps {
   types: EventType[];
 }
 
-const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGroup; readOnly: boolean }) => {
+const Item = ({
+  type,
+  group,
+  readOnly,
+  connectedCalendars,
+}: {
+  type: EventType;
+  group: EventTypeGroup;
+  readOnly: boolean;
+  connectedCalendars: ConnectedCalendars[] | undefined;
+}) => {
   const { t } = useLocale();
 
+  function isCalendarConnectedMissing() {
+    return connectedCalendars?.length && !type.team && !type.destinationCalendar;
+  }
+
   return (
     <Link href={"/event-types/" + type.id}>
       <a
@@ -79,6 +95,11 @@ const Item = ({ type, group, readOnly }: { type: EventType; group: EventTypeGrou
               {t("hidden") as string}
             </span>
           )}
+          {isCalendarConnectedMissing() && (
+            <span className="rtl:mr-2inline items-center rounded-sm bg-red-100 px-1.5 py-0.5 text-xs font-medium text-red-800 ltr:ml-2">
+              {t("missing_connected_calendar") as string}
+            </span>
+          )}
           {readOnly && (
             <span className="rtl:mr-2inline items-center rounded-sm bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-800 ltr:ml-2">
               {t("readonly") as string}
@@ -124,7 +145,11 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
     utils.setQueryData(["viewer.eventTypes"], (data) => {
       // tRPC is very strict with the return signature...
       if (!data)
-        return { eventTypeGroups: [], profiles: [], viewer: { canAddEvents: false, plan: UserPlan.FREE } };
+        return {
+          eventTypeGroups: [],
+          profiles: [],
+          viewer: { canAddEvents: false, plan: UserPlan.FREE },
+        };
       return {
         ...data,
         eventTypesGroups: [
@@ -196,6 +221,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
     }
   }, []);
 
+  const connectedCalendarsQuery = trpc.useQuery(["viewer.connectedCalendars"]);
+
   return (
     <div className="-mx-4 mb-16 overflow-hidden rounded-sm border border-gray-200 bg-white sm:mx-0">
       <ul className="divide-y divide-neutral-200" data-testid="event-types">
@@ -229,7 +256,12 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     </button>
                   </>
                 )}
-                <MemoizedItem type={type} group={group} readOnly={readOnly} />
+                <MemoizedItem
+                  type={type}
+                  group={group}
+                  readOnly={readOnly}
+                  connectedCalendars={connectedCalendarsQuery.data?.connectedCalendars}
+                />
                 <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
                   <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                     {type.users?.length > 1 && (

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

@@ -1009,5 +1009,6 @@
   "pro_feature_workflows": "This is a Pro feature. Upgrade to Pro to automate your event notifications and reminders with Workflows.",
   "embed": "Embed",
   "new_username": "New username",
-  "current_username": "Current username"
+  "current_username": "Current username",
+  "missing_connected_calendar": "No calendar connected"
 }

packages/trpc/server/routers/viewer.tsx

@@ -135,6 +135,8 @@ const loggedInViewerRouter = createProtectedRouter()
         position: true,
         successRedirectUrl: true,
         hashedLink: true,
+        destinationCalendar: true,
+        team: true,
         users: {
           select: {
             id: true,