Huddle01 migration to app store (#2038)

* Jitsi Video App migration

* Removing uneeded dependencies

* Missed unused reference

* Missing dependency

`@calcom/lib` is needed in the `locationOption.ts` file

* Huddle01 migration to app store

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

@@ -1,49 +1,6 @@
-import { Prisma } from "@prisma/client";
-import _ from "lodash";
-
 import type { App } from "@calcom/types/App";
 
-import { validJson } from "@lib/jsonUtils";
-
 export const APPS = {
-  jitsi_video: {
-    installed: true,
-    type: "jitsi_video",
-    title: "Jitsi Meet",
-    imageSrc: "integrations/jitsi.svg",
-    description: "Video Conferencing",
-    variant: "conferencing",
-    name: "Daily",
-    label: "",
-    slug: "",
-    category: "",
-    logo: "",
-    publisher: "",
-    url: "",
-    verified: true,
-    trending: true,
-    rating: 0,
-    reviews: 0,
-  },
-  huddle01_video: {
-    installed: true,
-    type: "huddle01_video",
-    title: "Huddle01",
-    imageSrc: "integrations/huddle.svg",
-    description: "Video Conferencing",
-    variant: "conferencing",
-    name: "Daily",
-    label: "",
-    slug: "",
-    category: "",
-    logo: "",
-    publisher: "",
-    url: "",
-    verified: true,
-    trending: true,
-    rating: 0,
-    reviews: 0,
-  },
   tandem_video: {
     installed: !!(process.env.TANDEM_CLIENT_ID && process.env.TANDEM_CLIENT_SECRET),
     type: "tandem_video",

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

@@ -85,13 +85,7 @@ export type AppMeta = ReturnType<typeof getApps>;
 
 /** @deprecated use `getApps`  */
 export function hasIntegration(apps: AppMeta, type: string): boolean {
-  return !!apps.find(
-    (app) =>
-      app.type === type &&
-      !!app.installed &&
-      /* TODO: find a better way to do this */
-      (type === "jitsi_video" || type === "huddle01_video" || app.credentials.length > 0)
-  );
+  return !!apps.find((app) => app.type === type && !!app.installed && app.credentials.length > 0);
 }
 
 export function hasIntegrationInstalled(type: App["type"]): boolean {

apps/web/lib/events/EventManager.ts

@@ -3,12 +3,12 @@ import async from "async";
 import merge from "lodash/merge";
 import { v5 as uuidv5 } from "uuid";
 
+import { FAKE_DAILY_CREDENTIAL } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
+import { FAKE_HUDDLE_CREDENTIAL } from "@calcom/app-store/huddle01video/lib/VideoApiAdapter";
 import type { CalendarEvent } from "@calcom/types/CalendarEvent";
 import type { PartialReference } from "@calcom/types/EventManager";
 import type { VideoCallData } from "@calcom/types/VideoApiAdapter";
 
-import { FAKE_DAILY_CREDENTIAL } from "@lib/integrations/Daily/DailyVideoApiAdapter";
-import { FAKE_HUDDLE_CREDENTIAL } from "@lib/integrations/Huddle01/Huddle01VideoApiAdapter";
 import { LocationType } from "@lib/location";
 import prisma from "@lib/prisma";
 import { createMeeting, updateMeeting } from "@lib/videoClient";

apps/web/lib/random.ts

@@ -1,9 +1,2 @@
-export const randomString = function (length = 12) {
-  let result = "";
-  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  for (let i = 0; i < length; i++) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-  }
-  return result;
-};
+// TODO: Remove this file once everything is imported from `@calcom/lib`
+export * from "@calcom/lib/random";

apps/web/lib/videoClient.ts

@@ -9,8 +9,6 @@ import type { VideoApiAdapter, VideoApiAdapterFactory } from "@calcom/types/Vide
 
 import { getUid } from "@lib/CalEventParser";
 import { EventResult } from "@lib/events/EventManager";
-import Huddle01VideoApiAdapter from "@lib/integrations/Huddle01/Huddle01VideoApiAdapter";
-import JitsiVideoApiAdapter from "@lib/integrations/Jitsi/JitsiVideoApiAdapter";
 import logger from "@lib/logger";
 
 import TandemVideoApiAdapter from "./integrations/Tandem/TandemVideoApiAdapter";
@@ -31,12 +29,6 @@ const getVideoAdapters = (withCredentials: Credential[]): VideoApiAdapter[] =>
     }
 
     switch (cred.type) {
-      case "jitsi_video":
-        acc.push(JitsiVideoApiAdapter());
-        break;
-      case "huddle01_video":
-        acc.push(Huddle01VideoApiAdapter());
-        break;
       case "tandem_video":
         acc.push(TandemVideoApiAdapter(cred));
         break;

apps/web/pages/apps/installed.tsx

@@ -508,7 +508,7 @@ function ConnectOrDisconnectIntegrationButton(props: {
     );
   }
   /** We don't need to "Connect", just show that it's installed */
-  if (props.isGlobal || ["huddle01_video", "jitsi_video"].includes(props.type)) {
+  if (props.isGlobal) {
     return (
       <div className="truncate px-3 py-2">
         <h3 className="text-sm font-medium text-gray-700">{t("installed")}</h3>

apps/web/pages/event-types/[type].tsx

@@ -1672,18 +1672,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       label: "Google Meet",
     });
   }
-  if (hasIntegration(integrations, "jitsi_video")) {
-    locationOptions.push({
-      value: LocationType.Jitsi,
-      label: "Jitsi Meet",
-    });
-  }
-  if (hasIntegration(integrations, "huddle01_video")) {
-    locationOptions.push({
-      value: LocationType.Huddle01,
-      label: "Huddle01 Video",
-    });
-  }
   if (hasIntegration(integrations, "tandem_video")) {
     locationOptions.push({ value: LocationType.Tandem, label: "Tandem Video" });
   }

packages/app-store/dailyvideo/lib/locationOption.ts

@@ -3,6 +3,7 @@ import { LocationType } from "@calcom/lib/location";
 const locationOption = {
   value: LocationType.Daily,
   label: "Daily.co Video",
+  disabled: false,
 };
 
 export default locationOption;

packages/app-store/huddle01video/index.ts

@@ -0,0 +1,26 @@
+import type { App } from "@calcom/types/App";
+
+import _package from "./package.json";
+
+export const metadata = {
+  name: "Huddle01",
+  description: _package.description,
+  installed: true,
+  type: "huddle01_video",
+  imageSrc: "apps/huddle.svg",
+  variant: "conferencing",
+  logo: "/apps/huddle.svg",
+  publisher: "Cal.com",
+  url: "https://huddle01.com/",
+  verified: true,
+  rating: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
+  reviews: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
+  category: "video",
+  label: "Huddle01 Video",
+  slug: "huddle01_video",
+  title: "Huddle01",
+  trending: true,
+  isGlobal: true,
+} as App;
+
+export * as lib from "./lib";

packages/app-store/huddle01video/lib/VideoApiAdapter.ts

@@ -1,11 +1,10 @@
 import { Credential } from "@prisma/client";
 
+import { handleErrorsJson } from "@calcom/lib/errors";
+import { randomString } from "@calcom/lib/random";
 import type { PartialReference } from "@calcom/types/EventManager";
 import type { VideoApiAdapter, VideoCallData } from "@calcom/types/VideoApiAdapter";
 
-import { handleErrorsJson } from "@lib/errors";
-import { randomString } from "@lib/random";
-
 export const FAKE_HUDDLE_CREDENTIAL: Credential = {
   id: +new Date().getTime(),
   type: "huddle01_video",

packages/app-store/huddle01video/lib/index.ts

@@ -0,0 +1,2 @@
+export { default as locationOption } from "./locationOption";
+export { default as VideoApiAdapter } from "./VideoApiAdapter";

packages/app-store/huddle01video/lib/locationOption.ts

@@ -0,0 +1,9 @@
+import { LocationType } from "@calcom/lib/location";
+
+const locationOption = {
+  value: LocationType.Huddle01,
+  label: "Huddle01 Video",
+  disabled: false,
+};
+
+export default locationOption;

packages/app-store/huddle01video/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@calcom/huddle01video",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "description": "Video conferencing",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  }
+}

packages/app-store/index.ts

@@ -1,10 +1,14 @@
 import * as example from "./_example";
 import * as dailyvideo from "./dailyvideo";
+import * as huddle01video from "./huddle01video";
+import * as jitsivideo from "./jitsivideo";
 import * as zoomvideo from "./zoomvideo";
 
 const appStore = {
   example,
   dailyvideo,
+  jitsivideo,
+  huddle01video,
   zoomvideo,
 };
 

packages/app-store/jitsivideo/index.ts

@@ -0,0 +1,26 @@
+import type { App } from "@calcom/types/App";
+
+import _package from "./package.json";
+
+export const metadata = {
+  name: "Jitsi Video",
+  description: _package.description,
+  installed: true,
+  type: "jitsi_video",
+  imageSrc: "apps/jitsi.svg",
+  variant: "conferencing",
+  logo: "/apps/jitsi.svg",
+  publisher: "Cal.com",
+  url: "https://jitsi.org/",
+  verified: true,
+  rating: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
+  reviews: 0, // TODO: placeholder for now, pull this from TrustPilot or G2
+  category: "video",
+  label: "Jitsi Video",
+  slug: "jitsi_video",
+  title: "Jitsi Meet",
+  trending: true,
+  isGlobal: true,
+} as App;
+
+export * as lib from "./lib";

packages/app-store/jitsivideo/lib/index.ts

@@ -0,0 +1,2 @@
+export { default as locationOption } from "./locationOption";
+export { default as VideoApiAdapter } from "./VideoApiAdapter";

packages/app-store/jitsivideo/lib/locationOption.ts

@@ -0,0 +1,9 @@
+import { LocationType } from "@calcom/lib/location";
+
+const locationOption = {
+  value: LocationType.Jitsi,
+  label: "Jitsi Video",
+  disabled: false,
+};
+
+export default locationOption;

packages/app-store/jitsivideo/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "@calcom/jitsivideo",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "description": "Video Conferencing",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  }
+}

packages/app-store/jitsivideo/static/icon.svg

@@ -0,0 +1,38 @@
+€<svg height="64" viewBox="0 0 32 32" width="64" xmlns="http://www.w3.org/2000/svg">
+    <clipPath id="a">
+        <path d="m-200-175h1000v562h-1000z" />
+    </clipPath>
+    <clipPath id="b">
+        <circle cx="107" cy="106" r="102" />
+    </clipPath>
+    <clipPath id="c">
+        <circle cx="107" cy="106" r="100" />
+    </clipPath>
+    <clipPath id="d">
+        <circle cx="107" cy="106" r="92" />
+    </clipPath>
+    <clipPath id="e">
+        <path clipRule="evenodd"
+            d="m135 94.06 26-19c2.27-1.85 4-1.42 4 2v57.94c0 3.84-2.16 3.4-4 2l-26-19zm-88-16.86v43.2a17.69 17.69 0 0 0 17.77 17.6h63a3.22 3.22 0 0 0 3.23-3.2v-43.2a17.69 17.69 0 0 0 -17.77-17.6h-63a3.22 3.22 0 0 0 -3.23 3.2z" />
+    </clipPath>
+    <g clip-path="url(#a)" transform="translate(0 -178)">
+        <path d="m232 61h366v90h-366z" fill="#4a8cff" />
+    </g>
+    <g clip-path="url(#a)" transform="matrix(.156863 0 0 .156863 -.784314 -.627496)">
+        <g clip-path="url(#b)">
+            <path d="m0-1h214v214h-214z" fill="#e5e5e4" />
+        </g>
+        <g clip-path="url(#c)">
+            <path d="m2 1h210v210h-210z" fill="#fff" />
+        </g>
+        <g clip-path="url(#d)">
+            <path d="m10 9h194v194h-194z" fill="#4a8cff" />
+        </g>
+        <g clip-path="url(#e)">
+            <path d="m42 69h128v74h-128z" fill="#fff" />
+        </g>
+    </g>
+    <g clip-path="url(#a)" transform="translate(0 -178)">
+        <path d="m232 19.25h180v38.17h-180z" fill="#90908f" />
+    </g>
+</svg>

packages/lib/random.ts

@@ -0,0 +1,9 @@
+export const randomString = function (length = 12) {
+  let result = "";
+  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  const charactersLength = characters.length;
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+};