refactor: move shared components from apps/web to packages/features

apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx

@@ -9,8 +9,8 @@ import { getPaymentAppData } from "@calcom/app-store/_utils/payments/getPaymentA
 import { getSuccessPageLocationMessage } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
-import { PayIcon } from "@calcom/web/modules/bookings/components/event-meta/PayIcon";
-import { Price } from "@calcom/web/modules/bookings/components/event-meta/Price";
+import { PayIcon } from "@calcom/features/bookings/components/event-meta/PayIcon";
+import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import type { PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";

apps/web/modules/apps/components/AppList.tsx

@@ -10,8 +10,8 @@ import { AppSetDefaultLinkDialog } from "@calcom/web/modules/apps/components/App
 import type {
   BulkUpdatParams,
   EventTypes,
-} from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
-import { BulkEditDefaultForEventsModal } from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
+} from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
+import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { isDelegationCredential } from "@calcom/lib/delegationCredential";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppCategories } from "@calcom/prisma/enums";

apps/web/modules/apps/components/ConferencingAppsViewWebWrapper.tsx

@@ -12,7 +12,7 @@ import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton"
 import { showToast } from "@calcom/ui/components/toast";
 
 import { AppList } from "./AppList";
-import DisconnectIntegrationModal from "./DisconnectIntegrationModal";
+import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
 
 type UpdateUsersDefaultConferencingAppParams = {
   appSlug: string;

apps/web/modules/apps/installed/[category]/installed-category-view.tsx

@@ -5,10 +5,10 @@ import { useReducer } from "react";
 import getAppCategoryTitle from "@calcom/app-store/_utils/getAppCategoryTitle";
 import { AppList, type HandleDisconnect } from "@calcom/web/modules/apps/components/AppList";
 import type { UpdateUsersDefaultConferencingAppParams } from "@calcom/web/modules/apps/components/AppSetDefaultLinkDialog";
-import DisconnectIntegrationModal from "@calcom/web/modules/apps/components/DisconnectIntegrationModal";
-import type { RemoveAppParams } from "@calcom/web/modules/apps/components/DisconnectIntegrationModal";
+import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
+import type { RemoveAppParams } from "@calcom/features/apps/components/DisconnectIntegrationModal";
 import { SkeletonLoader } from "@calcom/web/modules/apps/components/SkeletonLoader";
-import type { BulkUpdatParams } from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";

apps/web/modules/availability/[schedule]/schedule-view.tsx

@@ -6,7 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 import { AvailabilitySettings } from "@calcom/atoms/availability/AvailabilitySettings";
-import type { BulkUpdatParams } from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { withErrorFromUnknown } from "@calcom/lib/getClientErrorFromUnknown";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";

apps/web/modules/availability/availability-view.tsx

@@ -7,8 +7,8 @@ import { useRouter, usePathname } from "next/navigation";
 import { useCallback, useState } from "react";
 import posthog from "posthog-js";
 
-import { BulkEditDefaultForEventsModal } from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
-import type { BulkUpdatParams } from "@calcom/web/modules/event-types/components/BulkEditDefaultForEventsModal";
+import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
+import type { BulkUpdatParams } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { NewScheduleButton } from "@calcom/web/modules/schedules/components/NewScheduleButton";
 import { ScheduleListItem } from "@calcom/features/schedules/components/ScheduleListItem";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";

apps/web/modules/bookings/components/AvailableTimesHeader.tsx

@@ -8,7 +8,7 @@ import { nameOfDay } from "@calcom/lib/weekday";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import classNames from "@calcom/ui/classNames";
 
-import { TimeFormatToggle } from "./TimeFormatToggle";
+import { TimeFormatToggle } from "@calcom/features/bookings/components/TimeFormatToggle";
 
 type AvailableTimesHeaderProps = {
   date: Dayjs;

apps/web/modules/bookings/components/Booker.tsx

@@ -45,12 +45,12 @@ import { DatePicker } from "./DatePicker";
 import { DryRunMessage } from "./DryRunMessage";
 import { EventMeta } from "./EventMeta";
 import { HavingTroubleFindingTime } from "./HavingTroubleFindingTime";
-import { Header } from "./Header";
+import { Header } from "@calcom/features/bookings/components/Header";
 import { InstantBooking } from "./InstantBooking";
 import { LargeCalendar } from "./LargeCalendar";
 import { OverlayCalendar } from "./OverlayCalendar/OverlayCalendar";
 import { RedirectToInstantMeetingModal } from "./RedirectToInstantMeetingModal";
-import { BookerSection } from "./Section";
+import { BookerSection } from "@calcom/features/bookings/components/Section";
 import { SlotSelectionModalHeader } from "./SlotSelectionModalHeader";
 import { NotFound } from "./Unavailable";
 import { VerifyCodeDialog } from "./VerifyCodeDialog";

apps/web/modules/bookings/components/__mocks__/Header.tsx

@@ -1,5 +1,5 @@
 import { vi } from "vitest";
-// Mock layout components
-vi.mock("../Header", () => ({
+
+vi.mock("@calcom/features/bookings/components/Header", () => ({
   Header: ({ children }: { children: React.ReactNode }) => <div data-testid="header">{children}</div>,
 }));

apps/web/modules/bookings/components/__mocks__/Section.tsx

@@ -1,7 +1,7 @@
 import type React from "react";
 import { vi } from "vitest";
 
-vi.mock("../Section", () => {
+vi.mock("@calcom/features/bookings/components/Section", () => {
   const BookerSection = ({
     children,
     className = "",

apps/web/modules/bookings/components/event-meta/Details.tsx

@@ -13,7 +13,7 @@ import { EventDetailBlocks } from "@calcom/features/bookings/types";
 import { AvailableEventLocations } from "./AvailableEventLocations";
 import { EventDuration } from "./Duration";
 import { EventOccurences } from "./Occurences";
-import { Price } from "./Price";
+import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 
 type EventDetailsPropsBase = {
   event: Pick<

apps/web/modules/bookings/components/event-meta/index.ts

@@ -3,4 +3,4 @@ export { EventTitle } from "./Title";
 export { EventMetaSkeleton } from "./Skeleton";
 export { EventMembers } from "./Members";
 export { PriceIcon } from "./PriceIcon";
-export { PayIcon } from "./PayIcon";
+export { PayIcon } from "@calcom/features/bookings/components/event-meta/PayIcon";

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

@@ -21,7 +21,7 @@ import {
   useIsBackgroundTransparent,
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
-import { Price } from "@calcom/web/modules/bookings/components/event-meta/Price";
+import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import { getCalendarLinks, CalendarLinkType } from "@calcom/features/bookings/lib/getCalendarLinks";
 import { RATING_OPTIONS, validateRating } from "@calcom/features/bookings/lib/rating";
 import { isWithinMinimumRescheduleNotice as isWithinMinimumRescheduleNoticeUtil } from "@calcom/features/bookings/lib/reschedule/isWithinMinimumRescheduleNotice";

apps/web/modules/ee/teams/views/team-settings-view.tsx

@@ -21,7 +21,7 @@ import { SettingsToggle } from "@calcom/ui/components/form";
 import { CheckboxField } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTeamDataCache } from "@calcom/web/app/(booking-page-wrapper)/team/[slug]/[type]/actions";
-import { IntervalLimitsManager } from "@calcom/web/modules/event-types/components/tabs/limits/EventLimitsTab";
+import { IntervalLimitsManager } from "@calcom/features/eventtypes/components/tabs/limits/EventLimitsTab";
 
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
 import { default as InternalNotePresetsView } from "../components/InternalNotePresetsView";

apps/web/modules/event-types/components/AddMembersWithSwitch.tsx

@@ -15,9 +15,9 @@ import { Controller, useFormContext } from "react-hook-form";
 import type { Options } from "react-select";
 import { AddMembersWithSwitchWebWrapper } from "./AddMembersWithSwitchWebWrapper";
 
-import AssignAllTeamMembers from "./AssignAllTeamMembers";
-import type { CheckedSelectOption, CheckedTeamSelectCustomClassNames } from "./CheckedTeamSelect";
-import CheckedTeamSelect from "./CheckedTeamSelect";
+import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
+import type { CheckedSelectOption, CheckedTeamSelectCustomClassNames } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
+import CheckedTeamSelect from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 
 interface IUserToValue {
   id: number | null;

apps/web/modules/event-types/components/CreateEventTypeDialog.tsx

@@ -4,7 +4,7 @@ import { z } from "zod";
 
 import { Dialog } from "@calcom/features/components/controlled-dialog";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import CreateEventTypeForm from "@calcom/web/modules/event-types/components/CreateEventTypeForm";
+import CreateEventTypeForm from "@calcom/features/eventtypes/components/CreateEventTypeForm";
 import { useCreateEventType } from "@calcom/features/eventtypes/hooks/useCreateEventType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
@@ -15,7 +15,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
 import { showToast } from "@calcom/ui/components/toast";
-import { TeamEventTypeForm } from "@calcom/web/modules/ee/teams/components/TeamEventTypeForm";
+import { TeamEventTypeForm } from "@calcom/features/ee/teams/components/TeamEventTypeForm";
 
 // this describes the uniform data needed to create a new event type on Profile or Team
 export interface EventTypeParent {

apps/web/modules/event-types/components/EventType.tsx

@@ -5,7 +5,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { UseFormReturn } from "react-hook-form";
 
 import type { Workflow } from "@calcom/features/ee/workflows/lib/types";
-import type { ChildrenEventType } from "@calcom/web/modules/event-types/components/ChildrenEventTypeSelect";
+import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import type {
   TabMap,
   EventTypeSetupProps,

apps/web/modules/event-types/components/EventTypeDescription.tsx

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 
 import { getPaymentAppData } from "@calcom/app-store/_utils/payments/getPaymentAppData";
 import { eventTypeMetaDataSchemaWithTypedApps } from "@calcom/app-store/zod-utils";
-import { Price } from "@calcom/web/modules/bookings/components/event-meta/Price";
+import { Price } from "@calcom/features/bookings/components/event-meta/Price";
 import { PriceIcon } from "@calcom/web/modules/bookings/components/event-meta/PriceIcon";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";

apps/web/modules/event-types/components/EventTypeWebWrapper.tsx

@@ -24,7 +24,7 @@ import { TRPCClientError } from "@trpc/react-query";
 import { revalidateTeamEventTypeCache } from "@calcom/web/app/(booking-page-wrapper)/team/[slug]/[type]/actions";
 import { revalidateEventTypeEditPage } from "@calcom/web/app/(use-page-wrapper)/event-types/[type]/actions";
 
-import type { ChildrenEventType } from "./ChildrenEventTypeSelect";
+import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { EventType as EventTypeComponent } from "./EventType";
 import { useEventTypeForm } from "@calcom/atoms/event-types/hooks/useEventTypeForm";
 import { useHandleRouteChange } from "@calcom/atoms/event-types/hooks/useHandleRouteChange";
@@ -45,7 +45,9 @@ type EventPermissions = {
   };
 };
 
-const ManagedEventTypeDialog = dynamic(() => import("./dialogs/ManagedEventDialog"));
+const ManagedEventTypeDialog = dynamic(() =>
+  import("@calcom/features/eventtypes/components/dialogs/ManagedEventDialog")
+);
 
 const AssignmentWarningDialog = dynamic(() => import("./dialogs/AssignmentWarningDialog"));
 

apps/web/modules/event-types/components/index.ts

@@ -1,7 +1,7 @@
 import dynamic from "next/dynamic";
 
-export { default as CheckedTeamSelect } from "./CheckedTeamSelect";
+export { default as CheckedTeamSelect } from "@calcom/features/eventtypes/components/CheckedTeamSelect";
 export { default as EventTypeDescription } from "./EventTypeDescription";
-export { LearnMoreLink } from "./LearnMoreLink";
+export { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 export { MultiplePrivateLinksController } from "./MultiplePrivateLinksController";
 export const EventTypeDescriptionLazy = dynamic(() => import("./EventTypeDescription"));

apps/web/modules/event-types/components/locations/DefaultLocationSettings.tsx

@@ -2,14 +2,14 @@ import { ErrorMessage } from "@hookform/error-message";
 import { useFieldArray, useFormContext } from "react-hook-form";
 
 import { getEventLocationType } from "@calcom/app-store/locations";
-import type { LocationCustomClassNames } from "./types";
+import type { LocationCustomClassNames } from "@calcom/features/eventtypes/components/locations/types";
 import type { LocationFormValues, FormValues } from "@calcom/features/eventtypes/lib/types";
 import CheckboxField from "@calcom/features/form/components/CheckboxField";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { TextField } from "@calcom/ui/components/form";
 
-import LocationInput from "./LocationInput";
+import LocationInput from "@calcom/features/eventtypes/components/locations/LocationInput";
 import LocationOptionContainer from "./LocationSettingsContainer";
 
 const DefaultLocationSettings = ({

apps/web/modules/event-types/components/locations/Locations.tsx

@@ -8,7 +8,7 @@ import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "reac
 import type { EventLocationType } from "@calcom/app-store/locations";
 import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
-import type { LocationCustomClassNames } from "./types";
+import type { LocationCustomClassNames } from "@calcom/features/eventtypes/components/locations/types";
 import type { LocationFormValues, EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types";
 import CheckboxField from "@calcom/features/form/components/CheckboxField";
 import type { SingleValueLocationOption } from "@calcom/features/form/components/LocationSelect";
@@ -23,7 +23,7 @@ import { showToast } from "@calcom/ui/components/toast";
 
 import CalVideoSettings from "./CalVideoSettings";
 import DefaultLocationSettings from "./DefaultLocationSettings";
-import LocationInput from "./LocationInput";
+import LocationInput from "@calcom/features/eventtypes/components/locations/LocationInput";
 
 export type TEventTypeLocation = Pick<EventTypeSetupProps["eventType"], "locations" | "calVideoSettings">;
 export type TLocationOptions = Pick<EventTypeSetupProps, "locationOptions">["locationOptions"];

apps/web/modules/event-types/components/tabs/advanced/DisableReschedulingController.tsx

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
-import { LearnMoreLink } from "@calcom/web/modules/event-types/components/LearnMoreLink";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 import type { EventTypeSetup, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types";
 import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import ServerTrans from "@calcom/lib/components/ServerTrans";

apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx

@@ -22,7 +22,7 @@ import {
 } from "@calcom/features/ee/workflows/lib/allowDisablingStandardEmails";
 import { MultiplePrivateLinksController } from "@calcom/web/modules/event-types/components";
 import AddVerifiedEmail from "@calcom/web/modules/event-types/components/AddVerifiedEmail";
-import { LearnMoreLink } from "@calcom/web/modules/event-types/components/LearnMoreLink";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 import type { EventNameObjectType } from "@calcom/features/eventtypes/lib/eventNaming";
 import { getEventName } from "@calcom/features/eventtypes/lib/eventNaming";
 import type {

apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx

@@ -7,7 +7,7 @@ import { ZodError } from "zod";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
-import { LearnMoreLink } from "@calcom/web/modules/event-types/components/LearnMoreLink";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 import { getCurrencySymbol } from "@calcom/lib/currencyConversions";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";

apps/web/modules/event-types/components/tabs/advanced/RequiresConfirmationController.tsx

@@ -6,7 +6,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import type z from "zod";
 
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
-import { LearnMoreLink } from "@calcom/web/modules/event-types/components/LearnMoreLink";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
 import type { EventTypeSetup, SettingsToggleClassNames } from "@calcom/features/eventtypes/lib/types";
 import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import ServerTrans from "@calcom/lib/components/ServerTrans";

apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx

@@ -20,12 +20,12 @@ import type { AddMembersWithSwitchCustomClassNames } from "@calcom/web/modules/e
 import AddMembersWithSwitch, {
   mapUserToValue,
 } from "@calcom/web/modules/event-types/components/AddMembersWithSwitch";
-import AssignAllTeamMembers from "@calcom/web/modules/event-types/components/AssignAllTeamMembers";
-import type { ChildrenEventTypeSelectCustomClassNames } from "@calcom/web/modules/event-types/components/ChildrenEventTypeSelect";
-import ChildrenEventTypeSelect from "@calcom/web/modules/event-types/components/ChildrenEventTypeSelect";
+import AssignAllTeamMembers from "@calcom/features/eventtypes/components/AssignAllTeamMembers";
+import type { ChildrenEventTypeSelectCustomClassNames } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
+import ChildrenEventTypeSelect from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { EditWeightsForAllTeamMembers } from "@calcom/web/modules/event-types/components/EditWeightsForAllTeamMembers";
-import { LearnMoreLink } from "@calcom/web/modules/event-types/components/LearnMoreLink";
-import WeightDescription from "@calcom/web/modules/event-types/components/WeightDescription";
+import { LearnMoreLink } from "@calcom/features/eventtypes/components/LearnMoreLink";
+import WeightDescription from "@calcom/features/eventtypes/components/WeightDescription";
 import type { TFunction } from "i18next";
 import Link from "next/link";
 import type { ComponentProps, Dispatch, SetStateAction } from "react";

apps/web/modules/event-types/components/tabs/limits/EventLimitsTabWebWrapper.tsx

@@ -1,5 +1,5 @@
-import { EventLimitsTab } from "@calcom/web/modules/event-types/components/tabs/limits/EventLimitsTab";
-import type { EventLimitsTabProps } from "@calcom/web/modules/event-types/components/tabs/limits/EventLimitsTab";
+import { EventLimitsTab } from "@calcom/features/eventtypes/components/tabs/limits/EventLimitsTab";
+import type { EventLimitsTabProps } from "@calcom/features/eventtypes/components/tabs/limits/EventLimitsTab";
 
 const EventLimitsTabWebWrapper = (props: EventLimitsTabProps) => {
   return <EventLimitsTab {...props} />;