feat: Overlay Calendar v2 and Troubleshooter v2

apps/web/components/getting-started/components/AppConnectionItem.tsx

@@ -31,7 +31,9 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
             loading={buttonProps?.isPending}
             onClick={(event) => {
               // Save cookie key to return url step
-              document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
+              document.cookie = `return-to=${encodeURIComponent(
+                window.location.href
+              )};path=/;max-age=3600;SameSite=Lax`;
               buttonProps && buttonProps.onClick && buttonProps?.onClick(event);
             }}>
             {installed ? t("installed") : t("connect")}

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -1,3 +1,5 @@
+import { useSearchParams } from "next/navigation";
+
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -14,12 +16,15 @@ interface IConnectCalendarsProps {
 
 const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
+  const searchParams = useSearchParams();
+  const callbackBookerUrl = searchParams?.get("callbackUrl");
   const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true });
   const { t } = useLocale();
   const queryIntegrations = trpc.viewer.integrations.useQuery({
     variant: "calendar",
     onlyInstalled: false,
     sortByMostPopular: true,
+    appId: callbackBookerUrl ? "google-calendar" : undefined,
   });
 
   const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find(

apps/web/lib/getting-started/[[...step]]/getServerSideProps.tsx

@@ -8,7 +8,7 @@ import prisma from "@calcom/prisma";
 import { ssrInit } from "@server/lib/ssr";
 
 export const getServerSideProps = async (context: GetServerSidePropsContext) => {
-  const { req } = context;
+  const { req, query } = context;
 
   const session = await getServerSession({ req });
 
@@ -38,13 +38,29 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           },
         },
       },
+      credentials: {
+        select: {
+          appId: true,
+          id: true,
+        },
+      },
     },
   });
 
   if (!user) {
     throw new Error("User from session not found");
   }
 
+  if (query?.step && query.step[0] === "connected-calendar" && !!query.callbackUrl) {
+    if (
+      user.completedOnboarding ||
+      (user.credentials.length > 0 &&
+        user.credentials.find((credential) => credential.appId === "google-calendar"))
+    ) {
+      return { redirect: { permanent: false, destination: query.callbackUrl.toString() } };
+    }
+  }
+
   if (user.completedOnboarding) {
     return { redirect: { permanent: false, destination: "/event-types" } };
   }

apps/web/pages/getting-started/[[...step]].tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Head from "next/head";
-import { usePathname, useRouter } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Suspense } from "react";
 import { z } from "zod";
 
@@ -48,7 +48,7 @@ const stepRouteSchema = z.object({
 const OnboardingPage = () => {
   const pathname = usePathname();
   const params = useParamsWithFallback();
-
+  const searchParams = useSearchParams();
   const router = useRouter();
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
@@ -60,6 +60,8 @@ const OnboardingPage = () => {
 
   const currentStep = result.success ? result.data.step[0] : INITIAL_STEP;
   const from = result.success ? result.data.from : "";
+  const callbackBookerUrl = searchParams?.get("callbackUrl");
+  const isOverlayUser = currentStep === "connected-calendar" && !!callbackBookerUrl;
   const headers = [
     {
       title: `${t("welcome_to_cal_header", { appName: APP_NAME })}`,
@@ -136,14 +138,24 @@ const OnboardingPage = () => {
                   </p>
                 ))}
               </header>
-              <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToIndex} />
+              {!isOverlayUser && (
+                <Steps
+                  maxSteps={steps.length}
+                  currentStep={currentStepIndex + 1}
+                  navigateToStep={goToIndex}
+                />
+              )}
             </div>
             <StepCard>
               <Suspense fallback={<Icon name="loader" />}>
                 {currentStep === "user-settings" && (
                   <UserSettings nextStep={() => goToIndex(1)} hideUsername={from === "signup"} />
                 )}
-                {currentStep === "connected-calendar" && <ConnectedCalendars nextStep={() => goToIndex(2)} />}
+                {currentStep === "connected-calendar" && (
+                  <ConnectedCalendars
+                    nextStep={isOverlayUser ? () => router.push(callbackBookerUrl) : () => goToIndex(2)}
+                  />
+                )}
 
                 {currentStep === "connected-video" && <ConnectedVideoStep nextStep={() => goToIndex(3)} />}
 
@@ -157,7 +169,7 @@ const OnboardingPage = () => {
               </Suspense>
             </StepCard>
 
-            {headers[currentStepIndex]?.skipText && (
+            {!isOverlayUser && headers[currentStepIndex]?.skipText && (
               <div className="flex w-full flex-row justify-center">
                 <Button
                   color="minimal"

packages/app-store/googlecalendar/lib/CalendarService.ts

@@ -17,6 +17,7 @@ import type {
   Calendar,
   CalendarEvent,
   EventBusyDate,
+  EventBusyData,
   IntegrationCalendar,
   NewCalendarEventType,
 } from "@calcom/types/Calendar";
@@ -468,6 +469,38 @@ export default class GoogleCalendarService implements Calendar {
     }
   }
 
+  async getEventList(args: {
+    timeMin: string;
+    timeMax: string;
+    items: { id: string }[];
+  }): Promise<EventBusyData[] | null> {
+    const calendar = await this.authedCalendar();
+    const { timeMin, timeMax, items } = args;
+    const events = await Promise.all(
+      items.map(async (item) => {
+        const { data } = await calendar.events.list({
+          calendarId: item.id,
+          timeMin: timeMin,
+          timeMax: timeMax,
+        });
+
+        if (!data.items || data.items?.length === 0) return [];
+
+        return data.items.map((event) => {
+          const busyData: EventBusyData = {
+            start: event.start?.dateTime || "",
+            end: event.end?.dateTime || "",
+            title: event.summary || "",
+          };
+          return busyData;
+        });
+      })
+    );
+
+    if (events.length === 0) return null;
+    return events.flat();
+  }
+
   async getCacheOrFetchAvailability(args: {
     timeMin: string;
     timeMax: string;
@@ -546,8 +579,9 @@ export default class GoogleCalendarService implements Calendar {
   async getAvailability(
     dateFrom: string,
     dateTo: string,
-    selectedCalendars: IntegrationCalendar[]
-  ): Promise<EventBusyDate[]> {
+    selectedCalendars: IntegrationCalendar[],
+    isOverlayUser?: boolean
+  ): Promise<EventBusyData[]> {
     const calendar = await this.authedCalendar();
     const selectedCalendarIds = selectedCalendars
       .filter((e) => e.integration === this.integrationName)
@@ -571,6 +605,15 @@ export default class GoogleCalendarService implements Calendar {
 
       // /freebusy from google api only allows a date range of 90 days
       if (diff <= 90) {
+        if (isOverlayUser) {
+          const eventsListData = await this.getEventList({
+            timeMin: dateFrom,
+            timeMax: dateTo,
+            items: calsIds.map((id) => ({ id })),
+          });
+          if (!eventsListData) throw new Error("No response from google calendar");
+          return eventsListData;
+        }
         const freeBusyData = await this.getCacheOrFetchAvailability({
           timeMin: dateFrom,
           timeMax: dateTo,
@@ -590,13 +633,23 @@ export default class GoogleCalendarService implements Calendar {
         for (let i = 0; i < loopsNumber; i++) {
           if (endDate.isAfter(originalEndDate)) endDate = originalEndDate;
 
-          busyData.push(
-            ...((await this.getCacheOrFetchAvailability({
-              timeMin: startDate.format(),
-              timeMax: endDate.format(),
-              items: calsIds.map((id) => ({ id })),
-            })) || [])
-          );
+          if (isOverlayUser) {
+            busyData.push(
+              ...((await this.getEventList({
+                timeMin: startDate.format(),
+                timeMax: endDate.format(),
+                items: calsIds.map((id) => ({ id })),
+              })) || [])
+            );
+          } else {
+            busyData.push(
+              ...((await this.getCacheOrFetchAvailability({
+                timeMin: startDate.format(),
+                timeMax: endDate.format(),
+                items: calsIds.map((id) => ({ id })),
+              })) || [])
+            );
+          }
 
           startDate = endDate.add(1, "minutes");
           endDate = startDate.add(90, "days");

packages/core/CalendarManager.ts

@@ -13,6 +13,7 @@ import { performance } from "@calcom/lib/server/perfObserver";
 import type {
   CalendarEvent,
   EventBusyDate,
+  EventBusyData,
   IntegrationCalendar,
   NewCalendarEventType,
 } from "@calcom/types/Calendar";
@@ -203,16 +204,17 @@ export const getBusyCalendarTimes = async (
   withCredentials: CredentialPayload[],
   dateFrom: string,
   dateTo: string,
-  selectedCalendars: SelectedCalendar[]
+  selectedCalendars: SelectedCalendar[],
+  isOverlayUser?: boolean
 ) => {
-  let results: EventBusyDate[][] = [];
+  let results: EventBusyData[][] = [];
   // const months = getMonths(dateFrom, dateTo);
   try {
     // Subtract 11 hours from the start date to avoid problems in UTC- time zones.
     const startDate = dayjs(dateFrom).subtract(11, "hours").format();
     // Add 14 hours from the start date to avoid problems in UTC+ time zones.
     const endDate = dayjs(dateTo).endOf("month").add(14, "hours").format();
-    results = await getCalendarsEvents(withCredentials, startDate, endDate, selectedCalendars);
+    results = await getCalendarsEvents(withCredentials, startDate, endDate, selectedCalendars, isOverlayUser);
   } catch (e) {
     log.warn(safeStringify(e));
   }

packages/core/getBusyTimes.ts

@@ -39,6 +39,7 @@ export async function getBusyTimes(params: {
         };
       })[]
     | null;
+  isOverlayUser?: boolean;
 }) {
   const {
     credentials,
@@ -54,6 +55,7 @@ export async function getBusyTimes(params: {
     seatedEvent,
     rescheduleUid,
     duration,
+    isOverlayUser,
   } = params;
 
   logger.silly(
@@ -198,7 +200,8 @@ export async function getBusyTimes(params: {
       credentials,
       startTime,
       endTime,
-      selectedCalendars
+      selectedCalendars,
+      isOverlayUser
     );
     const endConnectedCalendarsGet = performance.now();
     logger.debug(

packages/core/getCalendarsEvents.ts

@@ -5,16 +5,17 @@ import logger from "@calcom/lib/logger";
 import { getPiiFreeCredential, getPiiFreeSelectedCalendar } from "@calcom/lib/piiFreeData";
 import { safeStringify } from "@calcom/lib/safeStringify";
 import { performance } from "@calcom/lib/server/perfObserver";
-import type { EventBusyDate } from "@calcom/types/Calendar";
+import type { EventBusyData } from "@calcom/types/Calendar";
 import type { CredentialPayload } from "@calcom/types/Credential";
 
 const log = logger.getSubLogger({ prefix: ["getCalendarsEvents"] });
 const getCalendarsEvents = async (
   withCredentials: CredentialPayload[],
   dateFrom: string,
   dateTo: string,
-  selectedCalendars: SelectedCalendar[]
-): Promise<EventBusyDate[][]> => {
+  selectedCalendars: SelectedCalendar[],
+  isOverlayUser?: boolean
+): Promise<EventBusyData[][]> => {
   const calendarCredentials = withCredentials
     .filter((credential) => credential.type.endsWith("_calendar"))
     // filter out invalid credentials - these won't work.
@@ -44,7 +45,13 @@ const getCalendarsEvents = async (
         selectedCalendars: passedSelectedCalendars.map(getPiiFreeSelectedCalendar),
       })
     );
-    const eventBusyDates = await c.getAvailability(dateFrom, dateTo, passedSelectedCalendars);
+    let eventBusyDates = [];
+    // we are getting event titles from only google calendar service for now
+    if (type === "google_calendar") {
+      eventBusyDates = await c.getAvailability(dateFrom, dateTo, passedSelectedCalendars, isOverlayUser);
+    } else {
+      eventBusyDates = await c.getAvailability(dateFrom, dateTo, passedSelectedCalendars);
+    }
     performance.mark("eventBusyDatesEnd");
     performance.measure(
       `[getAvailability for ${selectedCalendarIds.join(", ")}][$1]'`,

packages/core/getUserAvailability.ts

@@ -182,7 +182,8 @@ const _getUserAvailability = async function getUsersWorkingHoursLifeTheUniverseA
       };
     })[];
     busyTimesFromLimitsBookings: EventBusyDetails[];
-  }
+  },
+  isOverlayUser?: boolean
 ) {
   const {
     username,
@@ -257,6 +258,7 @@ const _getUserAvailability = async function getUsersWorkingHoursLifeTheUniverseA
     rescheduleUid: initialData?.rescheduleUid || null,
     duration,
     currentBookings: initialData?.currentBookings,
+    isOverlayUser,
   });
 
   const detailedBusyTimes: EventBusyDetails[] = [

packages/features/bookings/Booker/components/LargeCalendar.tsx

@@ -67,7 +67,7 @@ export const LargeCalendar = ({
         id,
         start: dayjs(event.start).toDate(),
         end: dayjs(event.end).toDate(),
-        title: "Busy",
+        title: event.title ?? "Busy",
         options: {
           status: "ACCEPTED",
         },

packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendar.tsx

@@ -14,7 +14,7 @@ type OverlayCalendarProps = Pick<
 > & {
   handleClickNoCalendar: () => void;
   hasSession: boolean;
-  handleClickContinue: () => void;
+  handleClickContinue: (provider: "calcom" | "google") => void;
   handleSwitchStateChange: (state: boolean) => void;
 };