WIP

apps/web/components/integrations/IntegrationListItem.tsx

@@ -6,7 +6,7 @@ import classNames from "@lib/classNames";
 import { ListItem, ListItemText, ListItemTitle } from "@components/List";
 
 function IntegrationListItem(props: {
-  imageSrc: string;
+  imageSrc?: string;
   title: string;
   description: string;
   actions?: ReactNode;
@@ -15,7 +15,7 @@ function IntegrationListItem(props: {
   return (
     <ListItem expanded={!!props.children} className={classNames("flex-col")}>
       <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-        <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />
+        {props.imageSrc && <Image width={40} height={40} src={`/${props.imageSrc}`} alt={props.title} />}
         <div className="flex-grow truncate pl-2">
           <ListItemTitle component="h3">{props.title}</ListItemTitle>
           <ListItemText component="p">{props.description}</ListItemText>

apps/web/lib/apps/calendar/config.ts

@@ -39,4 +39,4 @@ export const APPS = {
     imageSrc: "apps/apple-calendar.svg",
     variant: "calendar",
   },
-} as Record<string, Partial<App>>;
+} as Record<string, App>;

apps/web/lib/apps/conferencing/config.ts

@@ -1,15 +1,6 @@
 import type { App } from "@calcom/types/App";
 
 export const APPS = {
-  zoom_video: {
-    installed: !!(process.env.ZOOM_CLIENT_ID && process.env.ZOOM_CLIENT_SECRET),
-    type: "zoom_video",
-    title: "Zoom",
-    name: "Zoom",
-    description: "Video Conferencing",
-    imageSrc: "apps/zoom.svg",
-    variant: "conferencing",
-  },
   daily_video: {
     installed: !!process.env.DAILY_API_KEY,
     type: "daily_video",
@@ -18,5 +9,15 @@ export const APPS = {
     description: "Video Conferencing",
     imageSrc: "apps/daily.svg",
     variant: "conferencing",
+    label: "",
+    slug: "",
+    category: "",
+    logo: "",
+    publisher: "",
+    url: "",
+    verified: true,
+    trending: true,
+    rating: 0,
+    reviews: 0,
   },
 } as Record<string, App>;

apps/web/lib/apps/utils/AppUtils.ts

@@ -1,25 +1,27 @@
 import { Prisma } from "@prisma/client";
 import _ from "lodash";
 
+import appStore from "@calcom/app-store";
 import type { App } from "@calcom/types/App";
 
 import { APPS as CalendarApps } from "@lib/apps/calendar/config";
 import { APPS as ConferencingApps } from "@lib/apps/conferencing/config";
 import { APPS as PaymentApps } from "@lib/apps/payment/config";
 
-const ALL_APPS_MAP = { ...CalendarApps, ...ConferencingApps, ...PaymentApps };
+const ALL_APPS_MAP = {
+  zoomvideo: appStore.zoomvideo.metadata,
+  ...CalendarApps,
+  ...ConferencingApps,
+  ...PaymentApps,
+};
 
-/**
- *  We can't use aliases in playwright tests (yet)
- * https://github.com/microsoft/playwright/issues/7121
- */
 const credentialData = Prisma.validator<Prisma.CredentialArgs>()({
   select: { id: true, type: true },
 });
 
 type CredentialData = Prisma.CredentialGetPayload<typeof credentialData>;
 
-export const ALL_APPS = Object.entries(ALL_APPS_MAP).map((app) => app[1]);
+export const ALL_APPS = Object.values(ALL_APPS_MAP);
 
 function getApps(userCredentials: CredentialData[]) {
   const apps = ALL_APPS.map((app) => {

apps/web/pages/apps/installed.tsx

@@ -57,7 +57,7 @@ function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void }
             </span>
           </div>
           <div className="mt-2 flex">
-            <span className="flex flex-col space-x-2 space-y-1 space-x-2 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse">
+            <span className="flex flex-col space-y-1 space-x-2 text-xs sm:flex-row sm:space-y-0 sm:rtl:space-x-reverse">
               {props.webhook.eventTriggers.map((eventTrigger, ind) => (
                 <span
                   key={ind}

packages/config/eslint-preset.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ["plugin:playwright/playwright-test", "next", "plugin:prettier/recommended"],
+  extends: ["plugin:playwright/playwright-test", "next", "prettier"],
   settings: {
     next: {
       rootDir: ["apps/*/", "packages/*/"],

packages/types/App.d.ts

@@ -10,7 +10,7 @@
  * @member {string} imageSrc is to indicate where the app's logo is located.
  * @member {string} variant is to indicate to which classification the app belongs. It can be a `calendar`, `payment` or `conferencing` integration.
  */
-export type App = {
+export interface App {
   installed: boolean;
   type: `${string}_calendar` | `${string}_payment` | `${string}_video` | `${string}_web3`;
   title: string;
@@ -28,4 +28,4 @@ export type App = {
   trending: boolean;
   rating: number;
   reviews: number;
-};
+}