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,23 @@ interface IConnectCalendarsProps {
 
 const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   const { nextStep } = props;
+  const searchParams = useSearchParams();
+  const callbackBookerUrl = searchParams?.get("callbackUrl");
+  const overlayProvider = searchParams?.get("overlayProvider");
   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 && overlayProvider
+        ? overlayProvider === "google"
+          ? "google-calendar"
+          : overlayProvider === "azure-ad"
+          ? "office365-calendar"
+          : undefined
+        : 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,35 @@ 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 && query.overlayProvider)
+  ) {
+    if (
+      user.completedOnboarding ||
+      (user.credentials.length > 0 &&
+        user.credentials.find(
+          (credential) => credential.appId === "google-calendar" || credential.appId === "office365-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

@@ -23,6 +23,7 @@ import type {
   Calendar,
   CalendarEvent,
   EventBusyDate,
+  EventBusyData,
   IntegrationCalendar,
   NewCalendarEventType,
 } from "@calcom/types/Calendar";
@@ -514,6 +515,128 @@ export default class GoogleCalendarService implements Calendar {
     }
   }
 
+  async getCalIds(selectedCalendars: IntegrationCalendar[]): Promise<string[]> {
+    const selectedCalendarIds = selectedCalendars
+      .filter((e) => e.integration === this.integrationName)
+      .map((e) => e.externalId);
+    if (selectedCalendarIds.length === 0 && selectedCalendars.length > 0) {
+      // Only calendars of other integrations selected
+      return [];
+    }
+    if (selectedCalendarIds.length !== 0) return selectedCalendarIds;
+    const calendar = await this.authedCalendar();
+    const cals = await calendar.calendarList.list({ fields: "items(id)" });
+    if (!cals.data.items) return [];
+    return cals.data.items.reduce((c, cal) => (cal.id ? [...c, cal.id] : c), [] as string[]);
+  }
+
+  // fetches free-busy/events data with date range check
+  async fetchCalendarDataWithDateRangeCheck(
+    dateFrom: string,
+    dateTo: string,
+    calsIds: string[],
+    getEventsOrFreeBusyData: (args: {
+      timeMin: string;
+      timeMax: string;
+      items: { id: string }[];
+    }) => Promise<EventBusyDate[] | null> | Promise<EventBusyData[]>
+  ) {
+    const originalStartDate = dayjs(dateFrom);
+    const originalEndDate = dayjs(dateTo);
+    const diff = originalEndDate.diff(originalStartDate, "days");
+    if (diff <= 90) {
+      const data = await getEventsOrFreeBusyData({
+        timeMin: dateFrom,
+        timeMax: dateTo,
+        items: calsIds.map((id) => ({ id })),
+      });
+
+      if (!data) throw new Error("No response from google calendar");
+
+      return data;
+    } else {
+      const busyData = [];
+
+      const loopsNumber = Math.ceil(diff / 90);
+
+      let startDate = originalStartDate;
+      let endDate = originalStartDate.add(90, "days");
+
+      for (let i = 0; i < loopsNumber; i++) {
+        if (endDate.isAfter(originalEndDate)) endDate = originalEndDate;
+
+        busyData.push(
+          ...((await getEventsOrFreeBusyData({
+            timeMin: startDate.format(),
+            timeMax: endDate.format(),
+            items: calsIds.map((id) => ({ id })),
+          })) || [])
+        );
+
+        startDate = endDate.add(1, "minutes");
+        endDate = startDate.add(90, "days");
+      }
+      return busyData;
+    }
+  }
+
+  async getEventList(
+    dateFrom: string,
+    dateTo: string,
+    selectedCalendars: IntegrationCalendar[]
+  ): Promise<EventBusyData[]> {
+    try {
+      const calsIds = await this.getCalIds(selectedCalendars);
+      if (calsIds.length === 0) return [];
+
+      const fetchEventData = async (args: {
+        timeMin: string;
+        timeMax: string;
+        items: { id: string }[];
+      }): Promise<EventBusyData[]> => {
+        const calendar = await this.authedCalendar();
+        const { timeMin, timeMax, items } = args;
+        const events = await Promise.all(
+          items.map(async (item) => {
+            const { json: eventData } = await this.oAuthManagerInstance.request(
+              async () =>
+                new AxiosLikeResponseToFetchResponse(
+                  await calendar.events.list({
+                    calendarId: item.id,
+                    timeMin: timeMin,
+                    timeMax: timeMax,
+                    fields: "items(summary,start/dateTime, end/dateTime)",
+                  })
+                )
+            );
+
+            if (!eventData.items || eventData.items?.length === 0) return [];
+
+            return eventData.items.map((event) => {
+              const busyData: EventBusyData = {
+                start: event.start?.dateTime || "",
+                end: event.end?.dateTime || "",
+                title: event.summary || "",
+              };
+              return busyData;
+            });
+          })
+        );
+        if (events.length === 0) return [];
+        return events.flat();
+      };
+
+      const data = await this.fetchCalendarDataWithDateRangeCheck(dateFrom, dateTo, calsIds, fetchEventData);
+      return data;
+    } catch (error) {
+      this.log.error(
+        "There was an error getting availability from google calendar: ",
+        safeStringify({ error, selectedCalendars })
+      );
+      throw error;
+    }
+  }
+
   async getCacheOrFetchAvailability(args: {
     timeMin: string;
     timeMax: string;
@@ -599,62 +722,19 @@ export default class GoogleCalendarService implements Calendar {
     dateTo: string,
     selectedCalendars: IntegrationCalendar[]
   ): Promise<EventBusyDate[]> {
-    this.log.debug("Getting availability", safeStringify({ dateFrom, dateTo, selectedCalendars }));
-    const calendar = await this.authedCalendar();
-    const selectedCalendarIds = selectedCalendars
-      .filter((e) => e.integration === this.integrationName)
-      .map((e) => e.externalId);
-    if (selectedCalendarIds.length === 0 && selectedCalendars.length > 0) {
-      // Only calendars of other integrations selected
-      return [];
-    }
-    async function getCalIds() {
-      if (selectedCalendarIds.length !== 0) return selectedCalendarIds;
-      const cals = await calendar.calendarList.list({ fields: "items(id)" });
-      if (!cals.data.items) return [];
-      return cals.data.items.reduce((c, cal) => (cal.id ? [...c, cal.id] : c), [] as string[]);
-    }
+    this.log.debug("Getting availability");
 
     try {
-      const calsIds = await getCalIds();
-      const originalStartDate = dayjs(dateFrom);
-      const originalEndDate = dayjs(dateTo);
-      const diff = originalEndDate.diff(originalStartDate, "days");
-
-      // /freebusy from google api only allows a date range of 90 days
-      if (diff <= 90) {
-        const freeBusyData = await this.getCacheOrFetchAvailability({
-          timeMin: dateFrom,
-          timeMax: dateTo,
-          items: calsIds.map((id) => ({ id })),
-        });
-        if (!freeBusyData) throw new Error("No response from google calendar");
-
-        return freeBusyData;
-      } else {
-        const busyData = [];
-
-        const loopsNumber = Math.ceil(diff / 90);
-
-        let startDate = originalStartDate;
-        let endDate = originalStartDate.add(90, "days");
-
-        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 })),
-            })) || [])
-          );
-
-          startDate = endDate.add(1, "minutes");
-          endDate = startDate.add(90, "days");
-        }
-        return busyData;
-      }
+      const calsIds = await this.getCalIds(selectedCalendars);
+      if (calsIds.length === 0) return [];
+
+      const data = await this.fetchCalendarDataWithDateRangeCheck(
+        dateFrom,
+        dateTo,
+        calsIds,
+        this.getCacheOrFetchAvailability.bind(this)
+      );
+      return data;
     } catch (error) {
       this.log.error(
         "There was an error getting availability from google calendar: ",