Remove type and use appId/slug

.vscode/tasks.json

@@ -73,6 +73,13 @@
       "command": "maildev -s 587",
       "isBackground": false,
       "problemMatcher": []
+    },
+    {
+      "label": "AppStoreWatch",
+      "type": "shell",
+      "command": "yarn app-store:watch",
+      "isBackground": false,
+      "problemMatcher": []
     }
   ]
 }

README.md

@@ -402,7 +402,7 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 4. Fill in any information you want in the "App info" tab
 5. Go to tab "Auth"
 6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
-7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspot othercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.

apps/web/components/AdditionalCalendarSelector.tsx

@@ -4,7 +4,7 @@ import { OptionProps } from "react-select";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 import { Button } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -14,11 +14,11 @@ interface AdditionalCalendarSelectorProps {
   isLoading?: boolean;
 }
 
-const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App["type"] }>) => {
+const ImageOption = (optionProps: OptionProps<{ [key: string]: string; appId: string }>) => {
   const { data } = optionProps;
   return (
     <InstallAppButton
-      type={data.type}
+      slug={data.appId}
       render={(installProps) => {
         return (
           <Button {...installProps} className="w-full" color="minimal">
@@ -46,7 +46,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           label: item.name,
           slug: item.slug,
           image: item.imageSrc,
-          type: item.type,
+          appId: item.appId,
         }));
         return (
           <Select

apps/web/components/App.tsx

@@ -14,7 +14,7 @@ import React, { useEffect, useState } from "react";
 
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { App as AppType } from "@calcom/types/App";
+import { AppMeta as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
 
 import Shell from "@components/Shell";
@@ -23,6 +23,7 @@ import Badge from "@components/ui/Badge";
 export default function App({
   name,
   type,
+  slug,
   logo,
   body,
   categories,
@@ -38,6 +39,7 @@ export default function App({
   privacy,
 }: {
   name: string;
+  slug: string;
   type: AppType["type"];
   isGlobal?: AppType["isGlobal"];
   logo: string;
@@ -64,9 +66,9 @@ export default function App({
   const [installedApp, setInstalledApp] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   useEffect(() => {
-    async function getInstalledApp(appCredentialType: string) {
+    async function getInstalledApp(slug: string) {
       const queryParam = new URLSearchParams();
-      queryParam.set("app-credential-type", appCredentialType);
+      queryParam.set("app-slug", slug);
       try {
         const result = await fetch(`/api/app-store/installed?${queryParam.toString()}`, {
           method: "GET",
@@ -87,8 +89,9 @@ export default function App({
         }
       }
     }
-    getInstalledApp(type);
-  }, [type]);
+    getInstalledApp(slug);
+  }, [slug]);
+
   return (
     <>
       <Shell large isPublic>
@@ -123,7 +126,7 @@ export default function App({
                           : t("globally_install")}
                       </Button>
                       <InstallAppButton
-                        type={type}
+                        slug={slug}
                         render={(buttonProps) => (
                           <Button StartIcon={PlusIcon} data-testid="install-app-button" {...buttonProps}>
                             {t("add_another")}
@@ -133,7 +136,7 @@ export default function App({
                     </div>
                   ) : (
                     <InstallAppButton
-                      type={type}
+                      slug={slug}
                       render={(buttonProps) => (
                         <Button data-testid="install-app-button" {...buttonProps}>
                           {t("install_app")}

apps/web/components/apps/AllApps.tsx

@@ -1,9 +1,9 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import AppCard from "./AppCard";
 
-export default function AllApps({ apps }: { apps: App[] }) {
+export default function AllApps({ apps }: { apps: AppMeta[] }) {
   const { t } = useLocale();
 
   return (

apps/web/components/apps/TrendingAppsSlider.tsx

@@ -1,10 +1,10 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import AppCard from "./AppCard";
 import Slider from "./Slider";
 
-const TrendingAppsSlider = <T extends App>({ items }: { items: T[] }) => {
+const TrendingAppsSlider = <T extends AppMeta>({ items }: { items: T[] }) => {
   const { t } = useLocale();
 
   return (

apps/web/components/integrations/CalendarListContainer.tsx

@@ -131,7 +131,7 @@ function ConnectedCalendarsList(props: Props) {
                           key={cal.externalId}
                           externalId={cal.externalId}
                           title={cal.name || "Nameless calendar"}
-                          type={item.integration.type}
+                          type={item.integration.appId}
                           defaultSelected={cal.isSelected}
                         />
                       ))}

apps/web/ee/pages/api/integrations/stripepayment/webhook.ts

@@ -54,7 +54,11 @@ async function handlePaymentSuccess(event: Stripe.Event) {
       user: {
         select: {
           id: true,
-          credentials: true,
+          credentials: {
+            include: {
+              app: true,
+            },
+          },
           timeZone: true,
           email: true,
           name: true,

apps/web/pages/api/app-store/installed.ts

@@ -7,18 +7,32 @@ import { getSession } from "@lib/auth";
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   req.session = await getSession({ req });
   if (req.method === "GET" && req.session && req.session.user.id && req.query) {
-    const { "app-credential-type": appCredentialType } = req.query;
-    if (!appCredentialType && Array.isArray(appCredentialType)) {
+    const { "app-slug": appSlug } = req.query;
+    if (!appSlug || typeof appSlug !== "string") {
       return res.status(400);
     }
 
     const userId = req.session.user.id;
+    let where;
+    if (appSlug === "giphy") {
+      where = {
+        userId: userId,
+        type: "giphy_other",
+      };
+    } else if (appSlug === "slack") {
+      where = {
+        userId: userId,
+        type: "slack_app",
+      };
+    } else {
+      where = {
+        userId: userId,
+        appId: appSlug,
+      };
+    }
     try {
       const installedApp = await prisma.credential.findMany({
-        where: {
-          type: appCredentialType as string,
-          userId: userId,
-        },
+        where,
       });
 
       if (installedApp && !!installedApp.length) {

apps/web/pages/api/book/confirm.ts

@@ -63,6 +63,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     select: {
       id: true,
       credentials: {
+        include: {
+          app: true,
+        },
         orderBy: { id: "desc" as Prisma.SortOrder },
       },
       timeZone: true,

apps/web/pages/api/book/event.ts

@@ -113,7 +113,11 @@ const userSelect = Prisma.validator<Prisma.UserArgs>()({
     name: true,
     username: true,
     timeZone: true,
-    credentials: true,
+    credentials: {
+      include: {
+        app: true,
+      },
+    },
     bufferTime: true,
     destinationCalendar: true,
     locale: true,

apps/web/pages/api/integrations/[...args].ts

@@ -1,5 +1,7 @@
 import { NextApiHandler, NextApiRequest, NextApiResponse } from "next";
 
+import { deriveAppKeyFromSlugOrType } from "@calcom/lib/deriveAppKeyFromSlugOrType";
+
 import { getSession } from "@lib/auth";
 import { HttpError } from "@lib/core/http/error";
 
@@ -13,15 +15,14 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(404).json({ message: `API route not found` });
   }
 
-  const [_appName, apiEndpoint] = args;
-  const appName = _appName.split("_").join(""); // Transform `zoom_video` to `zoomvideo`;
-
+  const [appName, apiEndpoint] = args;
   try {
     /* Absolute path didn't work */
-    const handlerMap = (await import("@calcom/app-store/apiHandlers")).default;
-    const handlers = await handlerMap[appName as keyof typeof handlerMap];
-    const handler = handlers[apiEndpoint as keyof typeof handlers] as NextApiHandler;
+    const handlerMap = (await import("@calcom/app-store/apps.generated")).apiHandlers;
 
+    const handlerKey = deriveAppKeyFromSlugOrType(appName, handlerMap);
+    const handlers = await handlerMap[handlerKey];
+    const handler = handlers[apiEndpoint as keyof typeof handlers] as NextApiHandler;
     if (typeof handler !== "function")
       throw new HttpError({ statusCode: 404, message: `API handler not found` });
 

apps/web/pages/apps/[slug]/index.tsx

@@ -7,7 +7,7 @@ import Image from "next/image";
 import Link from "next/link";
 import path from "path";
 
-import { getAppWithMetadata } from "@calcom/app-store/_appRegistry";
+import { getAppRegistry, getAppWithMetadata } from "@calcom/app-store/_appRegistry";
 import prisma from "@calcom/prisma";
 
 import useMediaQuery from "@lib/hooks/useMediaQuery";
@@ -49,6 +49,7 @@ const components = {
 function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
   return (
     <App
+      slug={data.slug}
       name={data.name}
       isGlobal={data.isGlobal}
       type={data.type}
@@ -87,8 +88,14 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
 
   if (!app) return { notFound: true };
 
-  const singleApp = await getAppWithMetadata(app);
-
+  let singleApp = await getAppWithMetadata(app);
+  const appStoreFromDb = await getAppRegistry();
+  appStoreFromDb.forEach((appFromDb) => {
+    singleApp = {
+      ...singleApp,
+      ...appFromDb,
+    };
+  });
   if (!singleApp) return { notFound: true };
 
   const appDirname = app.dirName;
@@ -97,7 +104,7 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
   let source = "";
 
   try {
-    /* If the app doesn't have a README we fallback to the packagfe description */
+    /* If the app doesn't have a README we fallback to the package description */
     source = fs.readFileSync(postFilePath).toString();
   } catch (error) {
     console.log(`No README.mdx provided for: ${appDirname}`);

apps/web/pages/apps/installed.tsx

@@ -6,7 +6,7 @@ import { JSONObject } from "superjson/dist/types";
 import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
@@ -28,13 +28,13 @@ import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingT
 
 function ConnectOrDisconnectIntegrationButton(props: {
   credentialIds: number[];
-  type: App["type"];
+  slug: AppMeta["slug"];
   isGlobal?: boolean;
   installed?: boolean;
 }) {
   const { t } = useLocale();
   const [credentialId] = props.credentialIds;
-  const type = props.type;
+  const slug = props.slug;
   const utils = trpc.useContext();
   const handleOpenChange = () => {
     utils.invalidateQueries(["viewer.integrations"]);
@@ -83,7 +83,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
   }
   return (
     <InstallAppButton
-      type={props.type}
+      slug={props.slug}
       render={(buttonProps) => (
         <Button color="secondary" {...buttonProps} data-testid="integration-connection-button">
           {t("connect")}
@@ -95,7 +95,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
 }
 
 interface IntegrationsContainerProps {
-  variant: App["variant"];
+  variant: AppMeta["variant"];
   className?: string;
 }
 
@@ -127,7 +127,7 @@ const IntegrationsContainer = ({ variant, className = "" }: IntegrationsContaine
                       actions={
                         <ConnectOrDisconnectIntegrationButton
                           credentialIds={item.credentialIds}
-                          type={item.type}
+                          slug={item.appId}
                           isGlobal={item.isGlobal}
                           installed
                         />

apps/web/pages/getting-started.tsx

@@ -708,7 +708,7 @@ export async function getServerSideProps(context: NextPageContext) {
   });
 
   const integrations = getApps(credentials)
-    .filter((item) => item.type.endsWith("_calendar"))
+    .filter((item) => item.category.includes("calendar"))
     .map((item) => omit(item, "key"));
 
   // get user's credentials + their connected integrations

apps/web/server/createContext.ts

@@ -58,6 +58,9 @@ async function getUserFromSession({
           userId: true,
           appId: true,
         },
+        include: {
+          app: true,
+        },
         orderBy: {
           id: "asc",
         },