feat: new App install flow

apps/api/v2/tsconfig.json

@@ -23,6 +23,6 @@
     "forceConsistentCasingInFileNames": false,
     "noFallthroughCasesInSwitch": false
   },
-  "exclude": ["./dist", "next-i18next.config.js"],
-  "include": ["./**/*.ts", "../../../packages/types/*.d.ts"]
+  "exclude": ["./dist"],
+  "include": ["./**/*.ts", "../../../packages/types/*.d.ts", "next-i18next.config.js"]
 }

apps/web/components/apps/AppPage.tsx

@@ -21,6 +21,7 @@ export type AppPageProps = {
   isGlobal?: AppType["isGlobal"];
   logo: string;
   slug: string;
+  dirName: string | undefined;
   variant: string;
   body: React.ReactNode;
   categories: string[];
@@ -68,6 +69,7 @@ export const AppPage = ({
   dependencies,
   concurrentMeetings,
   paid,
+  dirName,
 }: AppPageProps) => {
   const { t, i18n } = useLocale();
   const hasDescriptionItems = descriptionItems && descriptionItems.length > 0;
@@ -223,6 +225,7 @@ export const AppPage = ({
                         multiInstall
                         concurrentMeetings={concurrentMeetings}
                         paid={paid}
+                        dirName={dirName}
                         {...props}
                       />
                     );
@@ -262,6 +265,7 @@ export const AppPage = ({
                     credentials={appDbQuery.data?.credentials}
                     concurrentMeetings={concurrentMeetings}
                     paid={paid}
+                    dirName={dirName}
                     {...props}
                   />
                 );

apps/web/components/apps/InstallAppButtonChild.tsx

@@ -1,7 +1,14 @@
+import { useRouter } from "next/navigation";
+import { useMemo } from "react";
+
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
+import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { doesAppSupportTeamInstall } from "@calcom/app-store/utils";
 import { Spinner } from "@calcom/features/calendars/weeklyview/components/spinner/Spinner";
 import type { UserAdminTeams } from "@calcom/features/ee/teams/lib/getUserAdminTeams";
+import { AppOnboardingSteps } from "@calcom/lib/apps/appOnboardingSteps";
+import { getAppOnboardingUrl } from "@calcom/lib/apps/getAppOnboardingUrl";
+import { shouldRedirectToAppOnboarding } from "@calcom/lib/apps/shouldRedirectToAppOnboarding";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -26,7 +33,9 @@ export const InstallAppButtonChild = ({
   multiInstall,
   credentials,
   concurrentMeetings,
+  dirName,
   paid,
+  onClick,
   ...props
 }: {
   userAdminTeams?: UserAdminTeams;
@@ -36,8 +45,10 @@ export const InstallAppButtonChild = ({
   credentials?: RouterOutputs["viewer"]["appCredentialsByType"]["credentials"];
   concurrentMeetings?: boolean;
   paid?: AppFrontendPayload["paid"];
+  dirName: string | undefined;
 } & ButtonProps) => {
   const { t } = useLocale();
+  const router = useRouter();
 
   const mutation = useAddAppMutation(null, {
     onSuccess: (data) => {
@@ -49,13 +60,26 @@ export const InstallAppButtonChild = ({
     },
   });
   const shouldDisableInstallation = !multiInstall ? !!(credentials && credentials.length) : false;
+  const appMetadata = appStoreMetadata[dirName as keyof typeof appStoreMetadata];
+  const redirectToAppOnboarding = useMemo(() => shouldRedirectToAppOnboarding(appMetadata), [appMetadata]);
+
+  const _onClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    if (redirectToAppOnboarding) {
+      router.push(
+        getAppOnboardingUrl({ slug: addAppMutationInput.slug, step: AppOnboardingSteps.ACCOUNTS_STEP })
+      );
+    } else if (onClick) {
+      onClick(e);
+    }
+  };
 
   // Paid apps don't support team installs at the moment
   // Also, cal.ai(the only paid app at the moment) doesn't support team install either
   if (paid) {
     return (
       <Button
         data-testid="install-app-button"
+        onClick={_onClick}
         {...props}
         disabled={shouldDisableInstallation}
         color="primary"
@@ -72,6 +96,7 @@ export const InstallAppButtonChild = ({
     return (
       <Button
         data-testid="install-app-button"
+        onClick={_onClick}
         {...props}
         // @TODO: Overriding color and size prevent us from
         // having to duplicate InstallAppButton for now.
@@ -83,6 +108,19 @@ export const InstallAppButtonChild = ({
     );
   }
 
+  if (redirectToAppOnboarding) {
+    return (
+      <Button
+        data-testid="install-app-button"
+        disabled={shouldDisableInstallation}
+        onClick={_onClick}
+        color="primary"
+        size="base"
+        {...props}>
+        {multiInstall ? t("install_another") : t("install_app")}
+      </Button>
+    );
+  }
   return (
     <Dropdown>
       <DropdownMenuTrigger asChild>

apps/web/components/apps/installation/AccountsStepCard.tsx

@@ -0,0 +1,97 @@
+import type { FC } from "react";
+import React, { useState } from "react";
+
+import { classNames } from "@calcom/lib";
+import { CAL_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import type { Team, User } from "@calcom/prisma/client";
+import { Avatar, StepCard } from "@calcom/ui";
+
+type AccountSelectorProps = {
+  avatar?: string;
+  name: string;
+  alreadyInstalled: boolean;
+  onClick?: () => void;
+  loading: boolean;
+  testId: string;
+};
+
+const AccountSelector: FC<AccountSelectorProps> = ({
+  avatar,
+  alreadyInstalled,
+  name,
+  onClick,
+  loading,
+  testId,
+}) => {
+  const { t } = useLocale();
+  const [selected, setSelected] = useState(false);
+  return (
+    <div
+      className={classNames(
+        "hover:bg-muted flex cursor-pointer flex-row items-center gap-2 p-1",
+        (alreadyInstalled || loading) && "cursor-not-allowed",
+        selected && "bg-muted animate-pulse"
+      )}
+      data-testid={testId}
+      onClick={() => {
+        if (onClick) {
+          setSelected(true);
+          onClick();
+        }
+      }}>
+      <Avatar
+        alt={avatar || ""}
+        imageSrc={avatar || `${CAL_URL}/${avatar}`} // if no image, use default avatar
+        size="sm"
+      />
+      <div className="text-md pt-0.5 font-medium text-gray-500">
+        {name}
+        {alreadyInstalled ? <span className="ml-1 text-sm text-gray-400">{t("already_installed")}</span> : ""}
+      </div>
+    </div>
+  );
+};
+
+export type PersonalAccountProps = Pick<User, "id" | "avatar" | "name"> & { alreadyInstalled: boolean };
+
+export type TeamsProp = (Pick<Team, "id" | "name" | "logo"> & {
+  alreadyInstalled: boolean;
+})[];
+
+type AccountStepCardProps = {
+  teams: TeamsProp;
+  personalAccount: PersonalAccountProps;
+  onSelect: (id?: number) => void;
+  loading: boolean;
+};
+
+export const AccountsStepCard: FC<AccountStepCardProps> = ({ teams, personalAccount, onSelect, loading }) => {
+  const { t } = useLocale();
+  return (
+    <StepCard>
+      <div className="text-sm font-medium text-gray-400">{t("install_app_on")}</div>
+      <div className={classNames("mt-2 flex flex-col gap-2 ")}>
+        <AccountSelector
+          testId="install-app-on-personal-account"
+          avatar={personalAccount.avatar ?? ""}
+          name={personalAccount.name ?? ""}
+          alreadyInstalled={personalAccount.alreadyInstalled}
+          onClick={() => !personalAccount.alreadyInstalled && !loading && onSelect()}
+          loading={loading}
+        />
+        {teams.map((team) => (
+          <AccountSelector
+            key={team.id}
+            testId={`install-app-on-team-${team.id}`}
+            alreadyInstalled={team.alreadyInstalled}
+            avatar={team.logo ?? ""}
+            name={team.name}
+            onClick={() => !team.alreadyInstalled && !loading && onSelect(team.id)}
+            loading={loading}
+          />
+        ))}
+      </div>
+    </StepCard>
+  );
+};