From 21ece8d9f6c0a3ed0d53b77a2e2056c300b8f863 Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Fri, 3 Jun 2022 12:18:09 +0530
Subject: [PATCH] Changes to make type ready to remove

---
 .../components/AdditionalCalendarSelector.tsx |  8 +--
 apps/web/components/App.tsx                   |  2 +-
 apps/web/components/apps/AllApps.tsx          |  4 +-
 .../components/apps/TrendingAppsSlider.tsx    |  4 +-
 .../integrations/CalendarListContainer.tsx    |  2 +-
 .../api/integrations/stripepayment/webhook.ts |  6 +-
 apps/web/pages/api/app-store/installed.ts     |  3 +-
 apps/web/pages/api/book/confirm.ts            |  3 +
 apps/web/pages/api/book/event.ts              |  6 +-
 apps/web/pages/apps/[slug]/index.tsx          | 12 +++-
 apps/web/pages/apps/installed.tsx             | 12 ++--
 apps/web/pages/getting-started.tsx            |  2 +-
 apps/web/server/createContext.ts              |  3 +
 apps/web/server/routers/viewer.tsx            |  1 +
 packages/app-store/_appRegistry.ts            | 10 ++--
 packages/app-store/_baseApp/_metadata.ts      |  4 +-
 packages/app-store/_example/_metadata.ts      |  4 +-
 .../app-store/_utils/useAddAppMutation.ts     |  4 +-
 packages/app-store/applecalendar/_metadata.ts |  4 +-
 .../app-store/caldavcalendar/_metadata.ts     |  4 +-
 packages/app-store/caldavcalendar/index.ts    |  4 +-
 packages/app-store/components.tsx             |  4 +-
 packages/app-store/dailyvideo/_metadata.ts    |  4 +-
 packages/app-store/giphy/_metadata.ts         |  4 +-
 .../app-store/googlecalendar/_metadata.ts     |  4 +-
 packages/app-store/googlevideo/_metadata.ts   |  4 +-
 .../hubspotothercalendar/_metadata.ts         |  4 +-
 packages/app-store/huddle01video/_metadata.ts |  4 +-
 packages/app-store/jitsivideo/_metadata.ts    |  4 +-
 packages/app-store/metamask/_metadata.ts      |  4 +-
 .../app-store/office365calendar/_metadata.ts  |  4 +-
 .../app-store/office365video/_metadata.ts     |  4 +-
 .../app-store/slackmessaging/_metadata.ts     |  5 +-
 packages/app-store/spacebooking/_metadata.ts  |  4 +-
 packages/app-store/stripepayment/_metadata.ts |  4 +-
 packages/app-store/tandemvideo/_metadata.ts   |  4 +-
 packages/app-store/utils.ts                   | 60 +++++++------------
 packages/app-store/vital/_metadata.ts         |  4 +-
 .../app-store/wipemycalother/_metadata.ts     |  4 +-
 packages/app-store/zapier/_metadata.ts        |  4 +-
 .../app-store/zapier/pages/setup/index.tsx    |  7 ++-
 packages/app-store/zoomvideo/_metadata.ts     |  4 +-
 packages/core/CalendarManager.ts              |  2 +-
 packages/core/EventManager.ts                 |  4 +-
 packages/prisma/schema.prisma                 |  1 +
 packages/types/App.d.ts                       |  8 +--
 46 files changed, 134 insertions(+), 127 deletions(-)

diff --git a/apps/web/components/AdditionalCalendarSelector.tsx b/apps/web/components/AdditionalCalendarSelector.tsx
index 11cc6f6223..199bba469f 100644
--- a/apps/web/components/AdditionalCalendarSelector.tsx
+++ b/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
diff --git a/apps/web/components/App.tsx b/apps/web/components/App.tsx
index 16f67c1afe..c39778762b 100644
--- a/apps/web/components/App.tsx
+++ b/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";
diff --git a/apps/web/components/apps/AllApps.tsx b/apps/web/components/apps/AllApps.tsx
index 31e6eb5373..f4c52dec32 100644
--- a/apps/web/components/apps/AllApps.tsx
+++ b/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 (
diff --git a/apps/web/components/apps/TrendingAppsSlider.tsx b/apps/web/components/apps/TrendingAppsSlider.tsx
index 1d938e9520..a6709cc780 100644
--- a/apps/web/components/apps/TrendingAppsSlider.tsx
+++ b/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 (
diff --git a/apps/web/components/integrations/CalendarListContainer.tsx b/apps/web/components/integrations/CalendarListContainer.tsx
index e5fa09b9ca..116c15ef12 100644
--- a/apps/web/components/integrations/CalendarListContainer.tsx
+++ b/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}
                         />
                       ))}
diff --git a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts b/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
index e0dc07017f..f210cd9016 100644
--- a/apps/web/ee/pages/api/integrations/stripepayment/webhook.ts
+++ b/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,
diff --git a/apps/web/pages/api/app-store/installed.ts b/apps/web/pages/api/app-store/installed.ts
index 707ab1cf04..93bb12e1e5 100644
--- a/apps/web/pages/api/app-store/installed.ts
+++ b/apps/web/pages/api/app-store/installed.ts
@@ -8,8 +8,7 @@ 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-slug": appSlug } = req.query;
-
-    if (!appSlug && Array.isArray(appSlug)) {
+    if (!appSlug || typeof appSlug !== "string") {
       return res.status(400);
     }
 
diff --git a/apps/web/pages/api/book/confirm.ts b/apps/web/pages/api/book/confirm.ts
index cb7b5b5c49..8e200dc104 100644
--- a/apps/web/pages/api/book/confirm.ts
+++ b/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,
diff --git a/apps/web/pages/api/book/event.ts b/apps/web/pages/api/book/event.ts
index 5b830225c2..fc63dcbd44 100644
--- a/apps/web/pages/api/book/event.ts
+++ b/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,
diff --git a/apps/web/pages/apps/[slug]/index.tsx b/apps/web/pages/apps/[slug]/index.tsx
index 966ec38687..180646a884 100644
--- a/apps/web/pages/apps/[slug]/index.tsx
+++ b/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";
@@ -88,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;
diff --git a/apps/web/pages/apps/installed.tsx b/apps/web/pages/apps/installed.tsx
index ea83d6fa52..65f21e96b3 100644
--- a/apps/web/pages/apps/installed.tsx
+++ b/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
                         />
diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx
index 64a98b572a..3a3fa6b958 100644
--- a/apps/web/pages/getting-started.tsx
+++ b/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
diff --git a/apps/web/server/createContext.ts b/apps/web/server/createContext.ts
index c57f1bbe97..b3a7932eb8 100644
--- a/apps/web/server/createContext.ts
+++ b/apps/web/server/createContext.ts
@@ -58,6 +58,9 @@ async function getUserFromSession({
           userId: true,
           appId: true,
         },
+        include: {
+          app: true,
+        },
         orderBy: {
           id: "asc",
         },
diff --git a/apps/web/server/routers/viewer.tsx b/apps/web/server/routers/viewer.tsx
index 5f4fd54bc0..bc03e0a533 100644
--- a/apps/web/server/routers/viewer.tsx
+++ b/apps/web/server/routers/viewer.tsx
@@ -619,6 +619,7 @@ const loggedInViewerRouter = createProtectedRouter()
       const { variant, onlyInstalled } = input;
       const { credentials } = user;
 
+      // TODO: This fn doesn't seem to be used. Verify and remove it.
       function countActive(items: { credentialIds: unknown[] }[]) {
         return items.reduce((acc, item) => acc + item.credentialIds.length, 0);
       }
diff --git a/packages/app-store/_appRegistry.ts b/packages/app-store/_appRegistry.ts
index cbb50db14a..0ed01a26eb 100644
--- a/packages/app-store/_appRegistry.ts
+++ b/packages/app-store/_appRegistry.ts
@@ -1,10 +1,10 @@
 import prisma from "@calcom/prisma";
-import { App } from "@calcom/types/App";
+import { App, AppMeta } from "@calcom/types/App";
 
 export async function getAppWithMetadata(app: { dirName: string }) {
-  let appMetadata: App | null = null;
+  let appMetadata: AppMeta | null = null;
   try {
-    appMetadata = (await import(`./${app.dirName}/_metadata`)).default as App;
+    appMetadata = (await import(`./${app.dirName}/_metadata`)).default as AppMeta;
   } catch (error) {
     if (error instanceof Error) {
       console.error(`No metadata found for: "${app.dirName}". Message:`, error.message);
@@ -20,7 +20,8 @@ export async function getAppWithMetadata(app: { dirName: string }) {
 /** Mainly to use in listings for the frontend, use in getStaticProps or getServerSideProps */
 export async function getAppRegistry() {
   const dbApps = await prisma.app.findMany({ select: { dirName: true, slug: true, categories: true } });
-  const apps = [] as Omit<App, "key">[];
+  const apps = [] as App[];
+  const a: App = null;
   for await (const dbapp of dbApps) {
     const app = await getAppWithMetadata(dbapp);
     if (!app) continue;
@@ -29,6 +30,7 @@ export async function getAppRegistry() {
     // if (!app.installed) return apps;
     apps.push({
       ...app,
+      ...dbapp,
       installed:
         true /* All apps from DB are considered installed by default. @TODO: Add and filter our by `enabled` property */,
     });
diff --git a/packages/app-store/_baseApp/_metadata.ts b/packages/app-store/_baseApp/_metadata.ts
index c17082798a..5ff3ff930e 100644
--- a/packages/app-store/_baseApp/_metadata.ts
+++ b/packages/app-store/_baseApp/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import config from "./config.json";
 import _package from "./package.json";
@@ -15,6 +15,6 @@ export const metadata = {
   trending: true,
   verified: true,
   ...config,
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/_example/_metadata.ts b/packages/app-store/_example/_metadata.ts
index 3dfa91b55b..39e5d653db 100644
--- a/packages/app-store/_example/_metadata.ts
+++ b/packages/app-store/_example/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   variant: "conferencing",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/_utils/useAddAppMutation.ts b/packages/app-store/_utils/useAddAppMutation.ts
index dad3b77e82..74c8a432f1 100644
--- a/packages/app-store/_utils/useAddAppMutation.ts
+++ b/packages/app-store/_utils/useAddAppMutation.ts
@@ -2,9 +2,9 @@ import { useMutation } from "react-query";
 
 import type { IntegrationOAuthCallbackState } from "@calcom/app-store/types";
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { App } from "@calcom/types/App";
+import { AppMeta } from "@calcom/types/App";
 
-function useAddAppMutation(type: App["type"], options?: Parameters<typeof useMutation>[2]) {
+function useAddAppMutation(type: AppMeta["type"], options?: Parameters<typeof useMutation>[2]) {
   // FIXME: Ensure that existing apps keep on working
   // const appName = type.replace(/_/g, "");
   const appName = type;
diff --git a/packages/app-store/applecalendar/_metadata.ts b/packages/app-store/applecalendar/_metadata.ts
index 06cee34fbe..0fb01d7f33 100644
--- a/packages/app-store/applecalendar/_metadata.ts
+++ b/packages/app-store/applecalendar/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -20,6 +20,6 @@ export const metadata = {
   url: "https://cal.com/",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/caldavcalendar/_metadata.ts b/packages/app-store/caldavcalendar/_metadata.ts
index a9f4f77e52..8761c37d72 100644
--- a/packages/app-store/caldavcalendar/_metadata.ts
+++ b/packages/app-store/caldavcalendar/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -20,6 +20,6 @@ export const metadata = {
   url: "https://cal.com/",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/caldavcalendar/index.ts b/packages/app-store/caldavcalendar/index.ts
index c3978a9998..82f08eafab 100644
--- a/packages/app-store/caldavcalendar/index.ts
+++ b/packages/app-store/caldavcalendar/index.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -20,7 +20,7 @@ export const metadata = {
   url: "https://cal.com/",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export * as api from "./api";
 export * as components from "./components";
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index 99dde901aa..6f78858b4e 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -3,7 +3,7 @@ import { useSession } from "next-auth/react";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { deriveAppKeyFromSlugOrType } from "@calcom/lib/deriveAppKeyFromSlugOrType";
 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/Button";
 
 import { InstallAppButtonMap } from "./apps.components.generated";
@@ -11,7 +11,7 @@ import { InstallAppButtonProps } from "./types";
 
 export const InstallAppButton = (
   props: {
-    slug: App["slug"];
+    slug: AppMeta["slug"];
   } & InstallAppButtonProps
 ) => {
   const { status } = useSession();
diff --git a/packages/app-store/dailyvideo/_metadata.ts b/packages/app-store/dailyvideo/_metadata.ts
index 16ad8e41a5..3000023e3c 100644
--- a/packages/app-store/dailyvideo/_metadata.ts
+++ b/packages/app-store/dailyvideo/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -27,6 +27,6 @@ export const metadata = {
   locationType: LocationType.Daily,
   locationLabel: "Cal Video",
   key: { apikey: process.env.DAILY_API_KEY },
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/giphy/_metadata.ts b/packages/app-store/giphy/_metadata.ts
index 1d0ef909c0..75b7b6b8e1 100644
--- a/packages/app-store/giphy/_metadata.ts
+++ b/packages/app-store/giphy/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/googlecalendar/_metadata.ts b/packages/app-store/googlecalendar/_metadata.ts
index 248ec879da..7767e4aaaa 100644
--- a/packages/app-store/googlecalendar/_metadata.ts
+++ b/packages/app-store/googlecalendar/_metadata.ts
@@ -1,5 +1,5 @@
 import { validJson } from "@calcom/lib/jsonUtils";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -25,6 +25,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.GoogleMeet,
   locationLabel: "Google Meet",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/googlevideo/_metadata.ts b/packages/app-store/googlevideo/_metadata.ts
index 5801b509c5..c87b5fb9cb 100644
--- a/packages/app-store/googlevideo/_metadata.ts
+++ b/packages/app-store/googlevideo/_metadata.ts
@@ -1,5 +1,5 @@
 import { validJson } from "@calcom/lib/jsonUtils";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -25,6 +25,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.GoogleMeet,
   locationLabel: "Google Meet",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/hubspotothercalendar/_metadata.ts b/packages/app-store/hubspotothercalendar/_metadata.ts
index 2f380a3f03..7a98ef37fd 100644
--- a/packages/app-store/hubspotothercalendar/_metadata.ts
+++ b/packages/app-store/hubspotothercalendar/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   title: "HubSpot CRM",
   trending: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/huddle01video/_metadata.ts b/packages/app-store/huddle01video/_metadata.ts
index faae97c209..af7eeff229 100644
--- a/packages/app-store/huddle01video/_metadata.ts
+++ b/packages/app-store/huddle01video/_metadata.ts
@@ -1,5 +1,5 @@
 import { randomString } from "@calcom/lib/random";
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -26,6 +26,6 @@ export const metadata = {
   locationType: LocationType.Huddle01,
   locationLabel: "Huddle01 Video",
   key: { apikey: randomString(12) },
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/jitsivideo/_metadata.ts b/packages/app-store/jitsivideo/_metadata.ts
index 881ed77491..d3bf7519fd 100644
--- a/packages/app-store/jitsivideo/_metadata.ts
+++ b/packages/app-store/jitsivideo/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -24,6 +24,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.Jitsi,
   locationLabel: "Jitsi Video",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/metamask/_metadata.ts b/packages/app-store/metamask/_metadata.ts
index 5a73508c1a..7c63bcc7ed 100644
--- a/packages/app-store/metamask/_metadata.ts
+++ b/packages/app-store/metamask/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/office365calendar/_metadata.ts b/packages/app-store/office365calendar/_metadata.ts
index 645e0b89bf..dedf244f71 100644
--- a/packages/app-store/office365calendar/_metadata.ts
+++ b/packages/app-store/office365calendar/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -19,6 +19,6 @@ export const metadata = {
   url: "https://cal.com/",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/office365video/_metadata.ts b/packages/app-store/office365video/_metadata.ts
index d56e7752a9..468c979904 100644
--- a/packages/app-store/office365video/_metadata.ts
+++ b/packages/app-store/office365video/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -22,6 +22,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.Teams,
   locationLabel: "MS Teams",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/slackmessaging/_metadata.ts b/packages/app-store/slackmessaging/_metadata.ts
index b4c85d4d7b..65e232e639 100644
--- a/packages/app-store/slackmessaging/_metadata.ts
+++ b/packages/app-store/slackmessaging/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -14,11 +14,10 @@ export const metadata = {
   slug: "slack",
   title: "Slack App",
   trending: true,
-  type: "slack_app" as App["type"],
   url: "https://slack.com/",
   variant: "conferencing",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/spacebooking/_metadata.ts b/packages/app-store/spacebooking/_metadata.ts
index 5199ad95ae..1b83b42705 100644
--- a/packages/app-store/spacebooking/_metadata.ts
+++ b/packages/app-store/spacebooking/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/stripepayment/_metadata.ts b/packages/app-store/stripepayment/_metadata.ts
index 86ce6bc323..e757a310db 100644
--- a/packages/app-store/stripepayment/_metadata.ts
+++ b/packages/app-store/stripepayment/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -25,6 +25,6 @@ export const metadata = {
   variant: "payment",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/tandemvideo/_metadata.ts b/packages/app-store/tandemvideo/_metadata.ts
index 9e1239cf25..af92bd4ced 100644
--- a/packages/app-store/tandemvideo/_metadata.ts
+++ b/packages/app-store/tandemvideo/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -23,6 +23,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.Tandem,
   locationLabel: "Tandem Video",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/utils.ts b/packages/app-store/utils.ts
index 1d3da917c8..06fda3f6e5 100644
--- a/packages/app-store/utils.ts
+++ b/packages/app-store/utils.ts
@@ -1,8 +1,9 @@
 import { Prisma } from "@prisma/client";
 import { TFunction } from "next-i18next";
 
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
+import { getAppRegistry } from "./_appRegistry";
 // If you import this file on any app it should produce circular dependency
 // import appStore from "./index";
 import { appStoreMetadata } from "./apps.generated";
@@ -11,13 +12,13 @@ import { LocationType } from "./locations";
 const ALL_APPS_MAP = Object.keys(appStoreMetadata).reduce((store, key) => {
   store[key] = appStoreMetadata[key as keyof typeof appStoreMetadata];
   return store;
-}, {} as Record<string, App>);
+}, {} as Record<string, AppMeta>);
 
 const credentialData = Prisma.validator<Prisma.CredentialArgs>()({
   select: { id: true, type: true, key: true, userId: true, appId: true },
 });
 
-type CredentialData = Prisma.CredentialGetPayload<typeof credentialData>;
+type CredentialData = Omit<Prisma.CredentialGetPayload<typeof credentialData>, "type">;
 
 export const ALL_APPS = Object.values(ALL_APPS_MAP);
 
@@ -55,34 +56,35 @@ export function getLocationOptions(integrations: AppMeta, t: TFunction) {
  * This should get all available apps to the user based on his saved
  * credentials, this should also get globally available apps.
  */
-function getApps(userCredentials: CredentialData[]) {
-  const apps = ALL_APPS.map((appMeta) => {
-    const credentials = userCredentials.filter((credential) => credential.type === appMeta.type);
+async function getApps(userCredentials: CredentialData[]) {
+  const appsWithMeta = await getAppRegistry();
+  const apps = appsWithMeta.map((app) => {
+    const credentials = userCredentials.filter((credential) => credential.appId === app.slug);
     let locationOption: OptionTypeBase | null = null;
 
     /** If the app is a globally installed one, let's inject it's key */
-    if (appMeta.isGlobal) {
+    if (app.isGlobal) {
       credentials.push({
         id: +new Date().getTime(),
-        type: appMeta.type,
-        key: appMeta.key!,
+        key: app.key!,
         userId: +new Date().getTime(),
-        appId: appMeta.slug,
+        appId: app.slug,
       });
     }
 
     /** Check if app has location option AND add it if user has credentials for it */
-    if (credentials.length > 0 && appMeta?.locationType) {
+    if (credentials.length > 0 && app?.locationType) {
       locationOption = {
-        value: appMeta.locationType,
-        label: appMeta.locationLabel || "No label set",
+        value: app.locationType,
+        label: app.locationLabel || "No label set",
         disabled: false,
       };
     }
 
     const credential: typeof credentials[number] | null = credentials[0] || null;
     return {
-      ...appMeta,
+      ...app,
+      appId: app.slug,
       /**
        * @deprecated use `credentials`
        */
@@ -96,12 +98,6 @@ function getApps(userCredentials: CredentialData[]) {
   return apps;
 }
 
-export type AppMeta = ReturnType<typeof getApps>;
-
-export function hasIntegrationInstalled(type: App["type"]): boolean {
-  return ALL_APPS.some((app) => app.type === type && !!app.installed);
-}
-
 export function getLocationTypes(): string[] {
   return ALL_APPS.reduce((locations, app) => {
     if (typeof app.locationType === "string") {
@@ -113,13 +109,13 @@ export function getLocationTypes(): string[] {
 
 export function getLocationLabels(t: TFunction) {
   const defaultLocationLabels = defaultLocations.reduce((locations, location) => {
-    if(location.label === "attendee_phone_number") {
-      locations[location.value] = t("your_number")
-      return locations
+    if (location.label === "attendee_phone_number") {
+      locations[location.value] = t("your_number");
+      return locations;
     }
-    if(location.label === "host_phone_number") {
-      locations[location.value] = `${t("phone_call")} (${t("number_provided")})`
-      return locations
+    if (location.label === "host_phone_number") {
+      locations[location.value] = `${t("phone_call")} (${t("number_provided")})`;
+      return locations;
     }
     locations[location.value] = t(location.label);
     return locations;
@@ -137,16 +133,4 @@ export function getAppName(name: string): string | null {
   return ALL_APPS_MAP[name as keyof typeof ALL_APPS_MAP]?.name ?? null;
 }
 
-export function getAppType(name: string): string {
-  const type = ALL_APPS_MAP[name as keyof typeof ALL_APPS_MAP].type;
-
-  if (type.endsWith("_calendar")) {
-    return "Calendar";
-  }
-  if (type.endsWith("_payment")) {
-    return "Payment";
-  }
-  return "Unknown";
-}
-
 export default getApps;
diff --git a/packages/app-store/vital/_metadata.ts b/packages/app-store/vital/_metadata.ts
index 2081cf79bf..f08386a25c 100644
--- a/packages/app-store/vital/_metadata.ts
+++ b/packages/app-store/vital/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -22,6 +22,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "support@tryvital.io",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/wipemycalother/_metadata.ts b/packages/app-store/wipemycalother/_metadata.ts
index 6743230977..3758dc2023 100644
--- a/packages/app-store/wipemycalother/_metadata.ts
+++ b/packages/app-store/wipemycalother/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -21,6 +21,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/zapier/_metadata.ts b/packages/app-store/zapier/_metadata.ts
index 6273c2d17e..4dcd134d32 100644
--- a/packages/app-store/zapier/_metadata.ts
+++ b/packages/app-store/zapier/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import _package from "./package.json";
 
@@ -20,6 +20,6 @@ export const metadata = {
   variant: "other",
   verified: true,
   email: "help@cal.com",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 08f8f98e6f..1449e11cef 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -6,6 +6,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
+import { App } from "@calcom/prisma/client";
 import { Button, Loader, Tooltip } from "@calcom/ui";
 
 /** TODO: Maybe extract this into a package to prevent circular dependencies */
@@ -29,7 +30,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
 
   const deleteApiKey = trpc.useMutation("viewer.apiKeys.delete");
   const zapierCredentials: { credentialIds: number[] } | undefined = integrations.data?.items.find(
-    (item: { type: string }) => item.type === "zapier_other"
+    (item: { appId: App["slug"] }) => item.appId === ZAPIER
   );
   const [credentialId] = zapierCredentials?.credentialIds || [false];
   const showContent = integrations.data && integrations.isSuccess && credentialId;
@@ -49,7 +50,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
 
   if (integrations.isLoading) {
     return (
-      <div className="flex absolute z-50 h-screen w-full items-center bg-gray-200">
+      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
         <Loader />
       </div>
     );
@@ -75,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               ) : (
                 <>
                   <div className="mt-1 text-xl">{t("your_unique_api_key")}</div>
-                  <div className="flex my-2 mt-3">
+                  <div className="my-2 mt-3 flex">
                     <div className="mr-1 w-full rounded bg-gray-100 p-3 pr-5">{newApiKey}</div>
                     <Tooltip content="copy to clipboard">
                       <Button
diff --git a/packages/app-store/zoomvideo/_metadata.ts b/packages/app-store/zoomvideo/_metadata.ts
index 21fd806153..62c6c345d3 100644
--- a/packages/app-store/zoomvideo/_metadata.ts
+++ b/packages/app-store/zoomvideo/_metadata.ts
@@ -1,4 +1,4 @@
-import type { App } from "@calcom/types/App";
+import type { AppMeta } from "@calcom/types/App";
 
 import { LocationType } from "../locations";
 import _package from "./package.json";
@@ -22,6 +22,6 @@ export const metadata = {
   email: "help@cal.com",
   locationType: LocationType.Zoom,
   locationLabel: "Zoom Video",
-} as App;
+} as AppMeta;
 
 export default metadata;
diff --git a/packages/core/CalendarManager.ts b/packages/core/CalendarManager.ts
index 4b4c0dcf78..33a9e9b9f8 100644
--- a/packages/core/CalendarManager.ts
+++ b/packages/core/CalendarManager.ts
@@ -18,7 +18,7 @@ export { getCalendar };
 export const getCalendarCredentials = (credentials: Array<Credential>, userId: number) => {
   const calendarCredentials = getApps(credentials)
     .filter((app) => {
-      return app.type.endsWith("_calendar");
+      return app.category.includes("calendar");
     })
     .flatMap((app) => {
       const credentials = app.credentials.flatMap((credential) => {
diff --git a/packages/core/EventManager.ts b/packages/core/EventManager.ts
index 9f0c89fc7d..0bb56ed0a2 100644
--- a/packages/core/EventManager.ts
+++ b/packages/core/EventManager.ts
@@ -110,8 +110,8 @@ export default class EventManager {
    */
   constructor(user: EventManagerUser) {
     const appCredentials = getApps(user.credentials).flatMap((app) => app.credentials);
-    this.calendarCredentials = appCredentials.filter((cred) => cred.type.endsWith("_calendar"));
-    this.videoCredentials = appCredentials.filter((cred) => cred.type.endsWith("_video"));
+    this.calendarCredentials = appCredentials.filter((cred) => cred.app.category.includes("calendar"));
+    this.videoCredentials = appCredentials.filter((cred) => cred.app.category.includes("video"));
   }
 
   /**
diff --git a/packages/prisma/schema.prisma b/packages/prisma/schema.prisma
index 5e05eb65b1..c00eb6c40e 100644
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@@ -81,6 +81,7 @@ model EventType {
 
 model Credential {
   id     Int     @id @default(autoincrement())
+  // To be dropped, it is not being used.
   type   String
   key    Json
   user   User?   @relation(fields: [userId], references: [id], onDelete: Cascade)
diff --git a/packages/types/App.d.ts b/packages/types/App.d.ts
index 232ff9f25f..2b82fa7ba4 100644
--- a/packages/types/App.d.ts
+++ b/packages/types/App.d.ts
@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import type { App as AppFromPrisma, Prisma } from "@prisma/client";
 
 import type { LocationType } from "@calcom/app-store/locations";
 
@@ -6,7 +6,7 @@ import type { LocationType } from "@calcom/app-store/locations";
  * This is the definition for an app store's app metadata.
  * This is used to display App info, categorize or hide certain apps in the app store.
  */
-export interface App {
+export interface AppMeta {
   /**
    * @deprecated
    * Wheter if the app is installed or not. Usually we check for api keys in env
@@ -56,8 +56,6 @@ export interface App {
   locationLabel?: string;
   /** Needed API Keys (usually for global apps) */
   key?: Prisma.JsonValue;
-  /** Needed API Keys (usually for global apps) */
-  key?: Prisma.JsonValue;
   /** If not free, what kind of fees does the app have */
   feeType?: "monthly" | "usage-based" | "one-time" | "free";
   /** 0 = free. if type="usage-based" it's the price per booking */
@@ -65,3 +63,5 @@ export interface App {
   /** only required for "usage-based" billing. % of commission for paid bookings */
   commission?: number;
 }
+
+export type App = AppMeta | AppFromPrisma;