diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index e297e7d4ba..20f136ab42 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -3,9 +3,10 @@ import { useRouter } from "next/navigation";
import type { IframeHTMLAttributes } from "react";
import React, { useEffect, useState } from "react";
+import { AppDependencyComponent } from "@calcom/app-store/AppDependencyComponent";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration";
import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index 1f7aa64eea..a40edcf2ed 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -2,7 +2,7 @@
import { useEffect, Suspense } from "react";
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
import { DestinationCalendarSettingsWebWrapper } from "@calcom/atoms/destination-calendar/wrappers/DestinationCalendarSettingsWebWrapper";
import { SelectedCalendarsSettingsWebWrapper } from "@calcom/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper";
import AppListCard from "@calcom/features/apps/components/AppListCard";
diff --git a/apps/web/components/getting-started/components/AppConnectionItem.tsx b/apps/web/components/getting-started/components/AppConnectionItem.tsx
index d283ba05c7..9f3a284660 100644
--- a/apps/web/components/getting-started/components/AppConnectionItem.tsx
+++ b/apps/web/components/getting-started/components/AppConnectionItem.tsx
@@ -1,8 +1,8 @@
import Link from "next/link";
import { useState } from "react";
+import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/InstallAppButtonWithoutPlanCheck";
import type { TDependencyData } from "@calcom/app-store/_appRegistry";
-import { InstallAppButtonWithoutPlanCheck } from "@calcom/app-store/components";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
diff --git a/packages/app-store/components.tsx b/packages/app-store/AppDependencyComponent.tsx
similarity index 63%
rename from packages/app-store/components.tsx
rename to packages/app-store/AppDependencyComponent.tsx
index 53397a6d26..e69836d996 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/AppDependencyComponent.tsx
@@ -2,68 +2,12 @@
import Link from "next/link";
-import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation";
-import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
import { WEBAPP_URL } from "@calcom/lib/constants";
-import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
-import type { App } from "@calcom/types/App";
import classNames from "@calcom/ui/classNames";
import { Icon } from "@calcom/ui/components/icon";
-import { InstallAppButtonMap } from "./apps.browser.generated";
-import type { InstallAppButtonProps } from "./types";
-
-export const InstallAppButtonWithoutPlanCheck = (
- props: {
- type: App["type"];
- options?: UseAddAppMutationOptions;
- } & InstallAppButtonProps
-) => {
- const mutation = useAddAppMutation(null, props.options);
- const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap);
- const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap];
- if (!InstallAppButtonComponent)
- return (
- <>
- {props.render({
- useDefaultComponent: true,
- disabled: props.disableInstall,
- onClick: () => {
- mutation.mutate({ type: props.type });
- },
- loading: mutation.data?.setupPending,
- })}
- >
- );
-
- return (
-
- );
-};
-
-export const InstallAppButton = (
- props: {
- teamsPlanRequired?: App["teamsPlanRequired"];
- type: App["type"];
- wrapperClassName?: string;
- disableInstall?: boolean;
- } & InstallAppButtonProps
-) => {
- return (
-
-
-
- );
-};
-
-export { AppConfiguration } from "./_components/AppConfiguration";
-
export const AppDependencyComponent = ({
appName,
dependencyData,
diff --git a/packages/app-store/InstallAppButton.tsx b/packages/app-store/InstallAppButton.tsx
new file mode 100644
index 0000000000..d2eb039c7d
--- /dev/null
+++ b/packages/app-store/InstallAppButton.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import type { App } from "@calcom/types/App";
+
+import { InstallAppButtonWithoutPlanCheck } from "./InstallAppButtonWithoutPlanCheck";
+import type { InstallAppButtonProps } from "./types";
+
+export const InstallAppButton = (
+ props: {
+ teamsPlanRequired?: App["teamsPlanRequired"];
+ type: App["type"];
+ wrapperClassName?: string;
+ disableInstall?: boolean;
+ } & InstallAppButtonProps
+) => {
+ return (
+
+
+
+ );
+};
diff --git a/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx
new file mode 100644
index 0000000000..44b805b707
--- /dev/null
+++ b/packages/app-store/InstallAppButtonWithoutPlanCheck.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import type { UseAddAppMutationOptions } from "@calcom/app-store/_utils/useAddAppMutation";
+import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { deriveAppDictKeyFromType } from "@calcom/lib/deriveAppDictKeyFromType";
+import type { App } from "@calcom/types/App";
+
+import { InstallAppButtonMap } from "./apps.browser.generated";
+import type { InstallAppButtonProps } from "./types";
+
+export const InstallAppButtonWithoutPlanCheck = (
+ props: {
+ type: App["type"];
+ options?: UseAddAppMutationOptions;
+ } & InstallAppButtonProps
+) => {
+ const mutation = useAddAppMutation(null, props.options);
+ const key = deriveAppDictKeyFromType(props.type, InstallAppButtonMap);
+ const InstallAppButtonComponent = InstallAppButtonMap[key as keyof typeof InstallAppButtonMap];
+ if (!InstallAppButtonComponent)
+ return (
+ <>
+ {props.render({
+ useDefaultComponent: true,
+ disabled: props.disableInstall,
+ onClick: () => {
+ mutation.mutate({ type: props.type });
+ },
+ loading: mutation.data?.setupPending,
+ })}
+ >
+ );
+
+ return (
+
+ );
+};
diff --git a/packages/app-store/_components/AppConfiguration.tsx b/packages/app-store/_components/AppConfiguration.tsx
deleted file mode 100644
index e7e909b2b9..0000000000
--- a/packages/app-store/_components/AppConfiguration.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import dynamic from "next/dynamic";
-
-export const ConfigAppMap = {
- vital: dynamic(() => import("../vital/components/AppConfiguration")),
-};
-
-export const AppConfiguration = (props: { type: string } & { credentialIds: number[] }) => {
- let appName = props.type.replace(/_/g, "");
- let ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap];
- /** So we can either call it by simple name (ex. `slack`, `giphy`) instead of
- * `slackmessaging`, `giphyother` while maintaining retro-compatibility. */
- if (!ConfigAppComponent) {
- [appName] = props.type.split("_");
- ConfigAppComponent = ConfigAppMap[appName as keyof typeof ConfigAppMap];
- }
- if (!ConfigAppComponent) return null;
-
- return ;
-};
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
index e05c045ee5..7105d42d46 100644
--- a/packages/app-store/_components/OmniInstallAppButton.tsx
+++ b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -1,12 +1,12 @@
import useApp from "@calcom/lib/hooks/useApp";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
-import { showToast } from "@calcom/ui/components/toast";
-import { Button } from "@calcom/ui/components/button";
import classNames from "@calcom/ui/classNames";
+import { Button } from "@calcom/ui/components/button";
+import { showToast } from "@calcom/ui/components/toast";
+import { InstallAppButton } from "../InstallAppButton";
import useAddAppMutation from "../_utils/useAddAppMutation";
-import { InstallAppButton } from "../components";
/**
* Use this component to allow installing an app from anywhere on the app.
diff --git a/packages/features/apps/components/AppCard.tsx b/packages/features/apps/components/AppCard.tsx
index 5aa05b7e23..4eb8973bf2 100644
--- a/packages/features/apps/components/AppCard.tsx
+++ b/packages/features/apps/components/AppCard.tsx
@@ -3,9 +3,9 @@
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
import { isRedirectApp } from "@calcom/app-store/_utils/redirectApps";
import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
-import { InstallAppButton } from "@calcom/app-store/components";
import { doesAppSupportTeamInstall, isConferencing } from "@calcom/app-store/utils";
import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";
import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl";
diff --git a/packages/features/apps/components/AppList.tsx b/packages/features/apps/components/AppList.tsx
index 8b556ce75f..7bb4ef197f 100644
--- a/packages/features/apps/components/AppList.tsx
+++ b/packages/features/apps/components/AppList.tsx
@@ -1,7 +1,7 @@
import { useCallback, useState } from "react";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
import { AppSettings } from "@calcom/app-store/_components/AppSettings";
-import { InstallAppButton } from "@calcom/app-store/components";
import { getLocationFromApp, type EventLocationType } from "@calcom/app-store/locations";
import type { CredentialOwner } from "@calcom/app-store/types";
import AppListCard from "@calcom/features/apps/components/AppListCard";
diff --git a/packages/features/calendars/AdditionalCalendarSelector.tsx b/packages/features/calendars/AdditionalCalendarSelector.tsx
index 5a74997047..5f72e4202f 100644
--- a/packages/features/calendars/AdditionalCalendarSelector.tsx
+++ b/packages/features/calendars/AdditionalCalendarSelector.tsx
@@ -1,6 +1,6 @@
import type { FunctionComponent, SVGProps } from "react";
-import { InstallAppButton } from "@calcom/app-store/components";
+import { InstallAppButton } from "@calcom/app-store/InstallAppButton";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { Button } from "@calcom/ui/components/button";