chore: Remove next-collect package (#25146)

Author: emrysal

apps/web/components/booking/CancelBooking.tsx

@@ -6,8 +6,6 @@ import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { shouldChargeNoShowCancellationFee } from "@calcom/features/bookings/lib/payment/shouldChargeNoShowCancellationFee";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRefreshData } from "@calcom/lib/hooks/useRefreshData";
-import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
-import { collectPageParameters, telemetryEventTypes } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button } from "@calcom/ui/components/button";
 import { Label, Select, TextArea, CheckboxField } from "@calcom/ui/components/form";
@@ -123,7 +121,6 @@ export default function CancelBooking(props: Props) {
     eventTypeMetadata,
   } = props;
   const [loading, setLoading] = useState(false);
-  const telemetry = useTelemetry();
   const [error, setError] = useState<string | null>(booking ? null : t("booking_already_cancelled"));
   const [internalNote, setInternalNote] = useState<{ id: number; name: string } | null>(null);
   const [acknowledgeCancellationNoShowFee, setAcknowledgeCancellationNoShowFee] = useState(false);
@@ -171,7 +168,7 @@ export default function CancelBooking(props: Props) {
       node.scrollIntoView({ behavior: "smooth" });
       node.focus();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
   }, []);
 
   return (
@@ -264,7 +261,7 @@ export default function CancelBooking(props: Props) {
                 onClick={async () => {
                   setLoading(true);
 
-                  telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
+                  // telemetry.event(telemetryEventTypes.bookingCancelled, collectPageParameters());
 
                   const response = await fetch("/api/csrf?sameSite=none", { cache: "no-store" });
                   const { csrfToken } = await response.json();

apps/web/components/booking/__tests__/CancelBooking.cancellationFee.test.tsx

@@ -59,12 +59,6 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
   }),
 }));
 
-vi.mock("@calcom/lib/hooks/useTelemetry", () => ({
-  useTelemetry: () => ({
-    event: vi.fn(),
-  }),
-}));
-
 vi.mock("@calcom/lib/hooks/useRefreshData", () => ({
   useRefreshData: () => vi.fn(),
 }));

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

@@ -5,9 +5,7 @@ import { useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
 import { md } from "@calcom/lib/markdownIt";
-import { telemetryEventTypes } from "@calcom/lib/telemetry";
 import turndown from "@calcom/lib/turndownService";
 import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
@@ -39,7 +37,6 @@ const UserProfile = ({ user }: UserProfileProps) => {
   const utils = trpc.useUtils();
   const router = useRouter();
   const createEventType = trpc.viewer.eventTypesHeavy.create.useMutation();
-  const telemetry = useTelemetry();
   const [firstRender, setFirstRender] = useState(true);
 
   // Create a separate mutation for avatar updates
@@ -81,7 +78,7 @@ const UserProfile = ({ user }: UserProfileProps) => {
   const onSubmit = handleSubmit((data: { bio: string }) => {
     const { bio } = data;
 
-    telemetry.event(telemetryEventTypes.onboardingFinished);
+    // telemetry.event(telemetryEventTypes.onboardingFinished);
 
     mutation.mutate({
       bio,

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -10,8 +9,6 @@ import { useTimePreferences } from "@calcom/features/bookings/lib";
 import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
-import { telemetryEventTypes } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
@@ -29,7 +26,6 @@ const UserSettings = (props: IUserSettingsProps) => {
   const { nextStep, user } = props;
   const { t } = useLocale();
   const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
-  const telemetry = useTelemetry();
   const userSettingsSchema = z.object({
     name: z
       .string()
@@ -50,9 +46,9 @@ const UserSettings = (props: IUserSettingsProps) => {
     resolver: zodResolver(userSettingsSchema),
   });
 
-  useEffect(() => {
+  /*useEffect(() => {
     telemetry.event(telemetryEventTypes.onboardingStarted);
-  }, [telemetry]);
+  }, [telemetry]);*/
 
   const utils = trpc.useUtils();
   const onSuccess = async () => {

apps/web/lib/app-providers-app-dir.tsx

@@ -1,7 +1,6 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import type { Session } from "next-auth";
 import { useSession } from "next-auth/react";
-import { EventCollectionProvider } from "next-collect/client";
 import { ThemeProvider } from "next-themes";
 import type { AppProps as NextAppProps } from "next/app";
 import type { ReadonlyURLSearchParams } from "next/navigation";
@@ -113,27 +112,25 @@ const AppProviders = (props: PageWrapperProps) => {
 
   const RemainingProviders = (
     <>
-      <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-        <TooltipProvider>
-          {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
-          <CalcomThemeProvider
-            nonce={props.nonce}
-            isThemeSupported={isThemeSupported}
-            isBookingPage={props.isBookingPage || isBookingPage}>
-            <NuqsAdapter>
-              <FeatureFlagsProvider>
-                {props.isBookingPage || isBookingPage ? (
+      <TooltipProvider>
+        {/* color-scheme makes background:transparent not work which is required by embed. We need to ensure next-theme adds color-scheme to `body` instead of `html`(https://github.com/pacocoursey/next-themes/blob/main/src/index.tsx#L74). Once that's done we can enable color-scheme support */}
+        <CalcomThemeProvider
+          nonce={props.nonce}
+          isThemeSupported={isThemeSupported}
+          isBookingPage={props.isBookingPage || isBookingPage}>
+          <NuqsAdapter>
+            <FeatureFlagsProvider>
+              {props.isBookingPage || isBookingPage ? (
+                <OrgBrandProvider>{props.children}</OrgBrandProvider>
+              ) : (
+                <DynamicIntercomProvider>
                   <OrgBrandProvider>{props.children}</OrgBrandProvider>
-                ) : (
-                  <DynamicIntercomProvider>
-                    <OrgBrandProvider>{props.children}</OrgBrandProvider>
-                  </DynamicIntercomProvider>
-                )}
-              </FeatureFlagsProvider>
-            </NuqsAdapter>
-          </CalcomThemeProvider>
-        </TooltipProvider>
-      </EventCollectionProvider>
+                </DynamicIntercomProvider>
+              )}
+            </FeatureFlagsProvider>
+          </NuqsAdapter>
+        </CalcomThemeProvider>
+      </TooltipProvider>
     </>
   );
 

apps/web/lib/app-providers.tsx

@@ -2,7 +2,6 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { dir } from "i18next";
 import type { Session } from "next-auth";
 import { useSession } from "next-auth/react";
-import { EventCollectionProvider } from "next-collect/client";
 import { appWithTranslation } from "next-i18next";
 import type { SSRConfig } from "next-i18next/dist/types/types";
 import { ThemeProvider } from "next-themes";
@@ -279,29 +278,27 @@ const AppProviders = (props: AppPropsWithChildren) => {
       : props.Component.isBookingPage) || isBookingPage;
 
   const RemainingProviders = (
-    <EventCollectionProvider options={{ apiPath: "/api/collect-events" }}>
-      <CustomI18nextProvider {...props}>
-        <TooltipProvider>
-          <CalcomThemeProvider
-            themeBasis={props.pageProps.themeBasis}
-            isThemeSupported={props.Component.isThemeSupported}
-            isBookingPage={props.Component.isBookingPage || isBookingPage}
-            router={props.router}>
-            <NuqsAdapter>
-              <FeatureFlagsProvider>
-                {_isBookingPage ? (
+    <CustomI18nextProvider {...props}>
+      <TooltipProvider>
+        <CalcomThemeProvider
+          themeBasis={props.pageProps.themeBasis}
+          isThemeSupported={props.Component.isThemeSupported}
+          isBookingPage={props.Component.isBookingPage || isBookingPage}
+          router={props.router}>
+          <NuqsAdapter>
+            <FeatureFlagsProvider>
+              {_isBookingPage ? (
+                <OrgBrandProvider>{props.children}</OrgBrandProvider>
+              ) : (
+                <DynamicIntercomProvider>
                   <OrgBrandProvider>{props.children}</OrgBrandProvider>
-                ) : (
-                  <DynamicIntercomProvider>
-                    <OrgBrandProvider>{props.children}</OrgBrandProvider>
-                  </DynamicIntercomProvider>
-                )}
-              </FeatureFlagsProvider>
-            </NuqsAdapter>
-          </CalcomThemeProvider>
-        </TooltipProvider>
-      </CustomI18nextProvider>
-    </EventCollectionProvider>
+                </DynamicIntercomProvider>
+              )}
+            </FeatureFlagsProvider>
+          </NuqsAdapter>
+        </CalcomThemeProvider>
+      </TooltipProvider>
+    </CustomI18nextProvider>
   );
 
   if (isBookingPage) {

apps/web/middleware.test.ts

@@ -16,16 +16,6 @@ vi.mock("@vercel/edge-config", () => ({
   get: vi.fn(),
 }));
 
-vi.mock("next-collect/server", () => ({
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  collectEvents: vi.fn((config: any) => config.middleware),
-}));
-
-vi.mock("@calcom/lib/telemetry", () => ({
-  extendEventData: vi.fn(),
-  nextCollectBasicSettings: {},
-}));
-
 // Mock NextResponse.json since it's not available in test environment
 vi.mock("next/server", async () => {
   const actual = await vi.importActual<typeof import("next/server")>("next/server");

apps/web/middleware.ts

@@ -1,13 +1,11 @@
 import { get } from "@vercel/edge-config";
-import { collectEvents } from "next-collect/server";
 import type { NextRequest } from "next/server";
 import { NextResponse } from "next/server";
 
 import { checkRateLimitAndThrowError } from "@calcom/lib/checkRateLimitAndThrowError";
 import getIP from "@calcom/lib/getIP";
 import { HttpError } from "@calcom/lib/http-error";
 import { piiHasher } from "@calcom/lib/server/PiiHasher";
-import { extendEventData, nextCollectBasicSettings } from "@calcom/lib/telemetry";
 
 import { getCspHeader, getCspNonce } from "@lib/csp";
 
@@ -271,9 +269,4 @@ export const config = {
   matcher: ["/((?!_next(?:/|$)|static(?:/|$)|public(?:/|$)|favicon\\.ico$|robots\\.txt$|sitemap\\.xml$).*)"],
 };
 
-export default collectEvents({
-  middleware,
-  ...nextCollectBasicSettings,
-  cookieName: "__clnds",
-  extend: extendEventData,
-});
+export default middleware;

apps/web/modules/auth/login-view.tsx

@@ -17,8 +17,6 @@ import { emailRegex } from "@calcom/lib/emailSchema";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
-import { collectPageParameters, telemetryEventTypes } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
@@ -82,8 +80,6 @@ export default function Login({
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
 
-  const telemetry = useTelemetry();
-
   let callbackUrl = searchParams?.get("callbackUrl") || "";
 
   if (/"\//.test(callbackUrl)) callbackUrl = callbackUrl.substring(1);
@@ -147,7 +143,7 @@ export default function Login({
 
   const onSubmit = async (values: LoginValues) => {
     setErrorMessage(null);
-    telemetry.event(telemetryEventTypes.login, collectPageParameters());
+    // telemetry.event(telemetryEventTypes.login, collectPageParameters());
     const res = await signIn<"credentials">("credentials", {
       ...values,
       callbackUrl,

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -279,14 +279,6 @@ export default function Success(props: PageProps) {
     (!!seatReferenceUid &&
       !bookingInfo.seatsReferences.some((reference) => reference.referenceUid === seatReferenceUid));
 
-  // const telemetry = useTelemetry();
-  /*  useEffect(() => {
-    if (top !== window) {
-      //page_view will be collected automatically by _middleware.ts
-      telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/booking"));
-    }
-  }, [telemetry]); */
-
   useEffect(() => {
     setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE));
     setIs24h(props?.userTimeFormat ? props.userTimeFormat === 24 : !!getIs24hClockFromLocalStorage());