diff --git a/apps/web/components/getting-started/components/AppConnectionItem.tsx b/apps/web/components/getting-started/components/AppConnectionItem.tsx
index 579a52a2a2..895eb0e36d 100644
--- a/apps/web/components/getting-started/components/AppConnectionItem.tsx
+++ b/apps/web/components/getting-started/components/AppConnectionItem.tsx
@@ -4,9 +4,9 @@ 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";
import type { App } from "@calcom/types/App";
-import { Icon } from "@calcom/ui";
-import { Button } from "@calcom/ui";
+import { Badge, Button, Icon } from "@calcom/ui";
interface IAppConnectionItem {
title: string;
@@ -14,21 +14,33 @@ interface IAppConnectionItem {
logo: string;
type: App["type"];
installed?: boolean;
+ isDefault?: boolean;
+ defaultInstall?: boolean;
+ slug?: string;
dependencyData?: TDependencyData;
}
const AppConnectionItem = (props: IAppConnectionItem) => {
- const { title, logo, type, installed } = props;
+ const { title, logo, type, installed, isDefault, defaultInstall, slug } = props;
const { t } = useLocale();
+ const setDefaultConferencingApp = trpc.viewer.appsRouter.setDefaultConferencingApp.useMutation();
const dependency = props.dependencyData?.find((data) => !data.installed);
return (
{title}
+ {isDefault &&
{t("default")}}
{
+ if (defaultInstall && slug) {
+ setDefaultConferencingApp.mutate({ slug });
+ }
+ },
+ }}
render={(buttonProps) => (