all changes (#19720)

packages/app-store/routing-forms/components/RoutingNavBar.tsx

@@ -1,8 +1,10 @@
 import type { Dispatch, SetStateAction } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
+import { trpc } from "@calcom/trpc";
 import { HorizontalTabs } from "@calcom/ui";
 
+import { enabledIncompleteBookingApps } from "../lib/enabledIncompleteBookingApps";
 import type { getSerializableForm } from "../lib/getSerializableForm";
 import type { RoutingFormWithResponseCount } from "./SingleForm";
 
@@ -17,6 +19,14 @@ export default function RoutingNavBar({
   hookForm: UseFormReturn<RoutingFormWithResponseCount>;
   setShowInfoLostDialog: Dispatch<SetStateAction<boolean>>;
 }) {
+  const { data } = trpc.viewer.appRoutingForms.getIncompleteBookingSettings.useQuery({
+    formId: form.id,
+  });
+
+  const showIncompleteBookingTab = data?.credentials.some((credential) =>
+    enabledIncompleteBookingApps.includes(credential?.appId ?? "")
+  );
+
   const tabs = [
     {
       name: "Form",
@@ -38,10 +48,14 @@ export default function RoutingNavBar({
       target: "_blank",
       href: `${appUrl}/reporting/${form?.id}`,
     },
-    {
-      name: "Incomplete Booking",
-      href: `${appUrl}/incomplete-booking/${form?.id}`,
-    },
+    ...(showIncompleteBookingTab
+      ? [
+          {
+            name: "Incomplete Booking",
+            href: `${appUrl}/incomplete-booking/${form?.id}`,
+          },
+        ]
+      : []),
   ];
   return (
     <div className="mb-4">

packages/app-store/routing-forms/pages/incomplete-booking/[...appPages].tsx

@@ -16,7 +16,6 @@ import SingleForm, {
   getServerSidePropsForSingleFormView as getServerSideProps,
 } from "../../components/SingleForm";
 import type { RoutingFormWithResponseCount } from "../../components/SingleForm";
-import { enabledIncompleteBookingApps } from "../../lib/enabledIncompleteBookingApps";
 
 function Page({ form }: { form: RoutingFormWithResponseCount }) {
   const { t } = useLocale();
@@ -94,14 +93,6 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
   if (isLoading) {
     return <div>Loading...</div>;
   }
-
-  // Check to see if the user has any compatible credentials
-  if (
-    !data?.credentials.some((credential) => enabledIncompleteBookingApps.includes(credential?.appId ?? ""))
-  ) {
-    return <div>No apps installed that support this feature</div>;
-  }
-
   return (
     <>
       <div className="bg-default border-subtle rounded-md border p-8">
@@ -294,7 +285,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
               },
               actionType: IncompleteBookingActionType.SALESFORCE,
               enabled: salesforceActionEnabled,
-              credentialId: selectedCredential?.value ?? data.credentials[0].id,
+              credentialId: selectedCredential?.value ?? data?.credentials[0].id,
             });
           }}>
           {t("save")}