perf: pass app data to OmniInstallAppButton to avoid redundant API calls (calcom#26156)

* perf: pass app data to OmniInstallAppButton to avoid redundant API calls

* Clean up comments in OmniInstallAppButton component

Removed comment about pre-fetched app data and fetching logic.

Author: anikdhabal

packages/app-store/_components/AppCard.tsx

@@ -116,6 +116,7 @@ export default function AppCard({
               <OmniInstallAppButton
                 className="ml-auto flex items-center"
                 appId={app.slug}
+                app={app}
                 returnTo={returnTo}
                 teamId={teamId}
                 onAppInstallSuccess={onAppInstallSuccess}

packages/app-store/_components/OmniInstallAppButton.tsx

@@ -5,27 +5,37 @@ import { Button } from "@calcom/ui/components/button";
 import { showToast } from "@calcom/ui/components/toast";
 
 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
+ * 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.
  */
 export default function OmniInstallAppButton({
   appId,
+  app: appProp,
   className,
   returnTo,
   teamId,
   onAppInstallSuccess,
 }: {
   appId: string;
+  app?: AppData;
   className: string;
   onAppInstallSuccess: () => void;
   returnTo?: string;
   teamId?: number;
 }) {
   const { t } = useLocale();
-  const { data: app } = useApp(appId);
+  const { data: fetchedApp } = useApp(appId, { enabled: !appProp });
+  const app = appProp ?? fetchedApp;
 
   const mutation = useAddAppMutation(null, {
     returnTo,

packages/features/apps/hooks/useApp.ts

@@ -2,13 +2,13 @@ import { useSession } from "next-auth/react";
 
 import { trpc } from "@calcom/trpc/react";
 
-export default function useApp(appId: string) {
+export default function useApp(appId: string, options?: { enabled?: boolean }) {
   const { status } = useSession();
 
   return trpc.viewer.apps.appById.useQuery(
     { appId },
     {
-      enabled: status === "authenticated",
+      enabled: status === "authenticated" && (options?.enabled ?? true),
     }
   );
 }