refactor: eliminate all @calcom/trpc/react imports and tRPC hooks from @calcom/features (calcom#27728)

hbjORbj · web-flow · commit eba0635a071d · 2026-02-09T08:39:28.000-03:00
* migrate booker layout selector

* move schedule hooks and types

* migrate feature opt in components

* migrate feedback dialog

* update

* migrate schedule hooks

* migrate useSegments

* update

* update import paths

* fix import paths

* mv useTimesForSchedule back to features

* fix

* add useEvent to web

* remove the old file

* update imports

* clean up

* migrate Segment

* update imports

* update imports

* fix name

* fix tests

* fix

* fix

* update imports

* remove trpc/react

* remove trpc dependency from package.json

* rm

* wip

* wip

* fix types

* fix

* migrate PhoneInput

* mv LocationInput

* remove dead file

* update import paths

* rm dead import

* rm useApp hook

* cleanup

* wip

* restore

* wip

* remove dead code

* fix

* simplify

* fix

* fix

* fix

* fix

* fix

* fix

* format

* format

* restore

* remove prop
diff --git a/apps/web/components/apps/routing-forms/TestFormDialog.test.tsx b/apps/web/components/apps/routing-forms/TestFormDialog.test.tsx
@@ -64,9 +64,6 @@ vi.mock("@calcom/web/modules/shell/Shell", () => ({
   ShellMain: vi.fn(),
 }));
 
-vi.mock("@calcom/lib/hooks/useApp", () => ({
-  default: vi.fn(),
-}));
 /**
  *  Avoids the error due to Formbricks
  */
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -15,7 +15,7 @@ import {
   OrganizerDefaultConferencingAppType,
 } from "@calcom/app-store/locations";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import type { LocationOption } from "@calcom/features/form/components/LocationSelect";
 import LocationSelect from "@calcom/features/form/components/LocationSelect";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/apps/web/components/phone-input/PhoneInput.tsx b/apps/web/components/phone-input/PhoneInput.tsx
diff --git a/apps/web/components/phone-input/index.ts b/apps/web/components/phone-input/index.ts
diff --git a/apps/web/modules/bookings/components/BookEventForm/BookingFields.tsx b/apps/web/modules/bookings/components/BookEventForm/BookingFields.tsx
@@ -8,7 +8,7 @@ import { DefaultEventLocationTypeEnum } from "@calcom/app-store/locations";
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
 import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking";
 import getLocationOptionsForSelect from "@calcom/features/bookings/lib/getLocationOptionsForSelect";
-import { FormBuilderField } from "@calcom/features/form-builder/FormBuilderField";
+import { FormBuilderField } from "@calcom/web/modules/form-builder/components/FormBuilderField";
 import { fieldTypesConfigMap } from "@calcom/features/form-builder/fieldTypes";
 import { fieldsThatSupportLabelAsSafeHtml } from "@calcom/features/form-builder/fieldsThatSupportLabelAsSafeHtml";
 import { SystemField } from "@calcom/lib/bookings/SystemField";
diff --git a/apps/web/modules/ee/workflows/components/AddActionDialog.tsx b/apps/web/modules/ee/workflows/components/AddActionDialog.tsx
@@ -6,7 +6,7 @@ import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import { WORKFLOW_ACTIONS } from "@calcom/features/ee/workflows/lib/constants";
 import { onlyLettersNumbersSpaces } from "@calcom/features/ee/workflows/lib/schema";
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
diff --git a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import { getEventTypeIdForCalAiTest } from "@calcom/features/ee/workflows/lib/actionHelperFunctions";
 import type { FormValues } from "@calcom/features/ee/workflows/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
diff --git a/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx b/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
@@ -8,7 +8,7 @@ import "react-phone-number-input/style.css";
 
 import type { RetellAgentWithDetails } from "@calcom/features/calAIPhone/providers/retellAI";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import {
   isSMSAction,
   isWhatsappAction,
diff --git a/apps/web/modules/event-types/components/locations/DefaultLocationSettings.tsx b/apps/web/modules/event-types/components/locations/DefaultLocationSettings.tsx
@@ -9,7 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { TextField } from "@calcom/ui/components/form";
 
-import LocationInput from "@calcom/features/eventtypes/components/locations/LocationInput";
+import LocationInput from "./LocationInput";
 import LocationOptionContainer from "./LocationSettingsContainer";
 
 const DefaultLocationSettings = ({
diff --git a/apps/web/modules/event-types/components/locations/HostLocations.tsx b/apps/web/modules/event-types/components/locations/HostLocations.tsx
@@ -15,7 +15,7 @@ import {
   isStaticLocationType,
 } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import type { LocationOption } from "@calcom/features/form/components/LocationSelect";
 import LocationSelect from "@calcom/features/form/components/LocationSelect";
diff --git a/apps/web/modules/event-types/components/locations/LocationInput.tsx b/apps/web/modules/event-types/components/locations/LocationInput.tsx
@@ -1,13 +1,13 @@
 import { useFormContext, Controller } from "react-hook-form";
 
 import type { EventLocationType } from "@calcom/app-store/locations";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { TextField } from "@calcom/ui/components/form";
 
-import type { LocationInputCustomClassNames } from "./types";
+import type { LocationInputCustomClassNames } from "@calcom/features/eventtypes/components/locations/types";
 
 const LocationInput = (props: {
   eventLocationType: EventLocationType;
diff --git a/apps/web/modules/event-types/components/locations/Locations.tsx b/apps/web/modules/event-types/components/locations/Locations.tsx
@@ -23,7 +23,7 @@ import { showToast } from "@calcom/ui/components/toast";
 
 import CalVideoSettings from "./CalVideoSettings";
 import DefaultLocationSettings from "./DefaultLocationSettings";
-import LocationInput from "@calcom/features/eventtypes/components/locations/LocationInput";
+import LocationInput from "./LocationInput";
 
 export type TEventTypeLocation = Pick<EventTypeSetupProps["eventType"], "locations" | "calVideoSettings">;
 export type TLocationOptions = Pick<EventTypeSetupProps, "locationOptions">["locationOptions"];
diff --git a/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx b/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx
@@ -7,10 +7,10 @@ import { z } from "zod";
 import { getTemplateFieldsSchema } from "@calcom/features/calAIPhone/getTemplateFieldsSchema";
 import { templateFieldsMap } from "@calcom/features/calAIPhone/template-fields-map";
 import type { TemplateType } from "@calcom/features/calAIPhone/zod-utils";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import type { EventTypeSetup, FormValues } from "@calcom/features/eventtypes/lib/types";
-import { ComponentForField } from "@calcom/features/form-builder/FormBuilderField";
+import { ComponentForField } from "@calcom/web/modules/form-builder/components/FormBuilderField";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
diff --git a/apps/web/modules/form-builder/components/Components.tsx b/apps/web/modules/form-builder/components/Components.tsx
@@ -6,7 +6,7 @@ import type {
   TextLikeComponentProps,
 } from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
 import Widgets from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
-import PhoneInput from "@calcom/features/components/phone-input";
+import PhoneInput from "@calcom/web/components/phone-input";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { fieldSchema, variantsConfigSchema, FieldType } from "@calcom/prisma/zod-utils";
 import { AddressInput } from "@calcom/ui/components/address";
@@ -18,8 +18,8 @@ import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import { ComponentForField } from "./FormBuilderField";
-import { propsTypes } from "./propsTypes";
-import { preprocessNameFieldDataWithVariant } from "./utils";
+import { propsTypes } from "@calcom/features/form-builder/propsTypes";
+import { preprocessNameFieldDataWithVariant } from "@calcom/features/form-builder/utils";
 
 export const isValidValueProp: Record<Component["propsType"], (val: unknown) => boolean> = {
   boolean: (val) => typeof val === "boolean",
diff --git a/apps/web/modules/form-builder/components/FormBuilderField.test.tsx b/apps/web/modules/form-builder/components/FormBuilderField.test.tsx
@@ -59,7 +59,7 @@ describe("FormBuilderField", () => {
 });
 
 const component = {
-  getFieldInput: ({ label }) => screen.getByRole("textbox", { name: label }) as HTMLInputElement,
+  getFieldInput: ({ label }: { label: string }) => screen.getByRole("textbox", { name: label }) as HTMLInputElement,
   fillFieldInput: ({ label, value }: { label: string; value: string }) => {
     fireEvent.change(component.getFieldInput({ label }), { target: { value } });
   },
diff --git a/apps/web/modules/form-builder/components/FormBuilderField.tsx b/apps/web/modules/form-builder/components/FormBuilderField.tsx
@@ -11,14 +11,14 @@ import { Label } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 
 import { Components, isValidValueProp } from "./Components";
-import { fieldTypesConfigMap } from "./fieldTypes";
-import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml";
-import type { fieldsSchema } from "./schema";
+import { fieldTypesConfigMap } from "@calcom/features/form-builder/fieldTypes";
+import { fieldsThatSupportLabelAsSafeHtml } from "@calcom/features/form-builder/fieldsThatSupportLabelAsSafeHtml";
+import type { fieldsSchema } from "@calcom/features/form-builder/schema";
 import {
   useShouldBeDisabledDueToPrefill,
   getFieldNameFromErrorMessage,
-} from "./useShouldBeDisabledDueToPrefill";
-import { getTranslatedConfig as getTranslatedVariantsConfig } from "./utils/variantsConfig";
+} from "@calcom/features/form-builder/useShouldBeDisabledDueToPrefill";
+import { getTranslatedConfig as getTranslatedVariantsConfig } from "@calcom/features/form-builder/utils/variantsConfig";
 
 // helper to render markdown label safely
 const renderLabel = (field: Partial<RhfFormField>) => {
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
@@ -115,7 +115,6 @@ export default function AppCard({
             ) : (
               <OmniInstallAppButton
                 className="ml-auto flex items-center"
-                appId={app.slug}
                 app={app}
                 returnTo={returnTo}
                 teamId={teamId}
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -1,41 +1,34 @@
-import useApp from "@calcom/features/apps/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/components/toast";
-
+import useAddAppMutation from "../_utils/useAddAppMutation";
 import { InstallAppButton } from "../InstallAppButton";
 import type { AppCardApp } from "../types";
-import useAddAppMutation from "../_utils/useAddAppMutation";
 
 type AppData = Pick<AppCardApp, "type" | "variant" | "slug" | "teamsPlanRequired">;
 
 /**
  * Use this component to allow installing an app from anywhere on the app.
  * Use of this component requires you to remove custom InstallAppButtonComponent so that it can manage the redirection itself.
  *
- * When `app` prop is provided, it will use that data directly instead of fetching via useApp.
- * This is useful when the app data is already available (e.g., from the integrations query)
- * to avoid redundant API calls that can cause URL length issues when batched.
+ * The `app` prop must be provided with the necessary app data.
+ * This avoids redundant API calls and prevents the app-store package from depending on the features package.
  */
 export default function OmniInstallAppButton({
-  appId,
-  app: appProp,
+  app,
   className,
   returnTo,
   teamId,
   onAppInstallSuccess,
 }: {
-  appId: string;
-  app?: AppData;
+  app: AppData;
   className: string;
   onAppInstallSuccess: () => void;
   returnTo?: string;
   teamId?: number;
 }) {
   const { t } = useLocale();
-  const { data: fetchedApp } = useApp(appId, { enabled: !appProp });
-  const app = appProp ?? fetchedApp;
 
   const mutation = useAddAppMutation(null, {
     returnTo,
@@ -49,10 +42,6 @@ export default function OmniInstallAppButton({
     },
   });
 
-  if (!app) {
-    return null;
-  }
-
   return (
     <InstallAppButton
       type={app.type}
diff --git a/packages/features/apps/hooks/useApp.ts b/packages/features/apps/hooks/useApp.ts
diff --git a/packages/features/bookings/types.ts b/packages/features/bookings/types.ts
@@ -2,13 +2,12 @@ import type { ErrorOption, FieldPath } from "react-hook-form";
 
 import type { RegularBookingCreateResult } from "@calcom/features/bookings/lib/dto/types";
 import type { Slots } from "@calcom/features/calendars/lib/types";
+import type { PublicEventType } from "@calcom/features/eventtypes/lib/getPublicEvent";
 import type { SchedulingType } from "@calcom/prisma/enums";
-import type { RouterOutputs } from "@calcom/trpc/react";
 import type { AppsStatus } from "@calcom/types/Calendar";
-
 import type { BookingCreateBody } from "./lib/bookingCreateBodySchema";
 
-export type PublicEvent = NonNullable<RouterOutputs["viewer"]["public"]["event"]>;
+export type PublicEvent = NonNullable<PublicEventType>;
 
 export type BookerEventQuery = {
   isSuccess: boolean;
diff --git a/packages/features/eventtypes/lib/types.ts b/packages/features/eventtypes/lib/types.ts
diff --git a/packages/features/form-builder/index.ts b/packages/features/form-builder/index.ts
diff --git a/packages/features/pbac/client/context/PermissionProvider.tsx b/packages/features/pbac/client/context/PermissionProvider.tsx
diff --git a/packages/features/schedules/components/ScheduleComponent.tsx b/packages/features/schedules/components/ScheduleComponent.tsx
diff --git a/packages/trpc/server/routers/viewer/eventTypes/types.ts b/packages/trpc/server/routers/viewer/eventTypes/types.ts
