refactor: Add crm type to app credentials (calcom#14147)

joeauyeung · Shaik-Sirajuddin · Shaik-Sirajuddin · web-flow · commit 4a88b337827a · 2024-04-09T16:46:06.000Z
* fix timezone display on booking page to reflect event availability timezone

* migrate fetching event owner's schedule to server side

* migrate fetching event owner's schedule to server side

* fix e2e test errors

* Add WEBAPP_URL_FOR_OAUTH to salesforce auth

* In event manager constructor include "_crm" credentials as calendar creds

* Change crm apps to type to end with `_crm`

* Move sendgrid out of CRM

* Add zoho bigin to CRM apps

* When getting apps, use slug

* Add `crm` variants

* Hubspot Oauth use `WEBAPP_URL_FOR_OAUTH`

* Refactor creating credentials

* Fix empty CRM page

* Use credentials with `_crm`

* Abstract getAppCategoryTitle

* Add integration.handler changes

* Fix tests

* Type fix

---------

Co-authored-by: Shaik-Sirajuddin &lt;sirajuddinshaik30gmail.com&gt;
Co-authored-by: Shaik-Sirajuddin &lt;sirajudddinshaik30@gmail.com&gt;
Co-authored-by: Shaik-Sirajuddin &lt;89742297+Shaik-Sirajuddin@users.noreply.github.com&gt;
Co-authored-by: sean-brydon &lt;55134778+sean-brydon@users.noreply.github.com&gt;
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
@@ -2,6 +2,7 @@
 
 import { useReducer } from "react";
 
+import getAppCategoryTitle from "@calcom/app-store/_utils/getAppCategoryTitle";
 import DisconnectIntegrationModal from "@calcom/features/apps/components/DisconnectIntegrationModal";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -57,11 +58,13 @@ const IntegrationsContainer = ({
       customLoader={<SkeletonLoader />}
       success={({ data }) => {
         if (!data.items.length) {
+          const emptyHeaderCategory = getAppCategoryTitle(variant || "other", true);
+
           return (
             <EmptyScreen
               Icon={emptyIcon[variant || "other"]}
               headline={t("no_category_apps", {
-                category: (variant && t(variant).toLowerCase()) || t("other").toLowerCase(),
+                category: emptyHeaderCategory,
               })}
               description={t(`no_category_apps_description_${variant || "other"}`)}
               buttonRaw={
diff --git a/apps/web/playwright/payment-apps.e2e.ts b/apps/web/playwright/payment-apps.e2e.ts
@@ -17,6 +17,7 @@ test.describe("Payment app", () => {
     await prisma.credential.create({
       data: {
         type: "alby_payment",
+        appId: "alby",
         userId: user.id,
         key: {
           account_id: "random",
@@ -57,6 +58,7 @@ test.describe("Payment app", () => {
     await prisma.credential.create({
       data: {
         type: "stripe_payment",
+        appId: "stripe",
         userId: user.id,
         key: {
           scope: "read_write",
@@ -101,6 +103,7 @@ test.describe("Payment app", () => {
     await prisma.credential.create({
       data: {
         type: "paypal_payment",
+        appId: "paypal",
         userId: user.id,
         key: {
           client_id: "randomString",
@@ -147,6 +150,7 @@ test.describe("Payment app", () => {
     await prisma.credential.create({
       data: {
         type: "alby_payment",
+        appId: "alby",
         userId: user.id,
         key: {},
       },
@@ -173,6 +177,7 @@ test.describe("Payment app", () => {
     await prisma.credential.create({
       data: {
         type: "paypal_payment",
+        appId: "paypal",
         userId: user.id,
         key: {},
       },
@@ -234,6 +239,7 @@ test.describe("Payment app", () => {
       data: [
         {
           type: "paypal_payment",
+          appId: "paypal",
           userId: user.id,
           key: {
             client_id: "randomString",
@@ -243,6 +249,7 @@ test.describe("Payment app", () => {
         },
         {
           type: "stripe_payment",
+          appId: "stripe",
           userId: user.id,
           key: {
             scope: "read_write",
@@ -279,6 +286,7 @@ test.describe("Payment app", () => {
       data: [
         {
           type: "paypal_payment",
+          appId: "paypal",
           userId: user.id,
           key: {
             client_id: "randomString",
@@ -288,6 +296,7 @@ test.describe("Payment app", () => {
         },
         {
           type: "stripe_payment",
+          appId: "stripe",
           userId: user.id,
           key: {
             scope: "read_write",
diff --git a/packages/app-store/_utils/getAppCategoryTitle.ts b/packages/app-store/_utils/getAppCategoryTitle.ts
@@ -0,0 +1,22 @@
+import type { AppCategories } from "@calcom/prisma/enums";
+
+/**
+ * Handles if the app category should be full capitalized ex. CRM
+ *
+ * @param {App["variant"]} variant - The variant of the app.
+ * @param {boolean} [returnLowerCase] - Optional flag to return the title in lowercase.
+ */
+const getAppCategoryTitle = (variant: AppCategories, returnLowerCase?: boolean) => {
+  let title: string;
+
+  if (variant === "crm") {
+    title = "CRM";
+    return title;
+  } else {
+    title = variant;
+  }
+
+  return returnLowerCase ? title.toLowerCase() : title;
+};
+
+export default getAppCategoryTitle;
diff --git a/packages/app-store/_utils/getCalendar.ts b/packages/app-store/_utils/getCalendar.ts
@@ -29,6 +29,11 @@ export const getCalendar = async (credential: CredentialPayload | null): Promise
   if (calendarType?.endsWith("_other_calendar")) {
     calendarType = calendarType.split("_other_calendar")[0];
   }
+  // Backwards compatibility until CRM manager is created
+  if (calendarType?.endsWith("_crm")) {
+    calendarType = calendarType.split("_crm")[0];
+  }
+
   const calendarAppImportFn = appStore[calendarType.split("_").join("") as keyof typeof appStore];
 
   if (!calendarAppImportFn) {
diff --git a/packages/app-store/closecom/api/_postAdd.ts b/packages/app-store/closecom/api/_postAdd.ts
@@ -8,6 +8,7 @@ import prisma from "@calcom/prisma";
 
 import checkSession from "../../_utils/auth";
 import getInstalledAppPath from "../../_utils/getInstalledAppPath";
+import appConfig from "../config.json";
 
 export async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const session = checkSession(req);
@@ -18,10 +19,10 @@ export async function getHandler(req: NextApiRequest, res: NextApiResponse) {
   const encrypted = symmetricEncrypt(JSON.stringify({ api_key }), process.env.CALENDSO_ENCRYPTION_KEY || "");
 
   const data = {
-    type: "closecom_other_calendar",
+    type: appConfig.type,
     key: { encrypted },
     userId: session.user?.id,
-    appId: "closecom",
+    appId: appConfig.slug,
   };
 
   try {
diff --git a/packages/app-store/closecom/config.json b/packages/app-store/closecom/config.json
@@ -3,10 +3,10 @@
   "name": "Close.com",
   "title": "Close.com",
   "slug": "closecom",
-  "type": "closecom_other_calendar",
+  "type": "closecom_crm",
   "logo": "icon.svg",
   "url": "https://cal.com/",
-  "variant": "other",
+  "variant": "crm",
   "categories": ["crm"],
   "publisher": "Cal.com, Inc.",
   "email": "help@cal.com",
diff --git a/packages/app-store/hubspot/_metadata.ts b/packages/app-store/hubspot/_metadata.ts
@@ -6,8 +6,8 @@ export const metadata = {
   name: "HubSpot CRM",
   installed: !!process.env.HUBSPOT_CLIENT_ID,
   description: _package.description,
-  type: "hubspot_other_calendar",
-  variant: "other_calendar",
+  type: "hubspot_crm",
+  variant: "crm",
   logo: "icon.svg",
   publisher: "Cal.com",
   url: "https://hubspot.com/",
diff --git a/packages/app-store/hubspot/api/add.ts b/packages/app-store/hubspot/api/add.ts
@@ -1,7 +1,7 @@
 import * as hubspot from "@hubspot/api-client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL_FOR_OAUTH } from "@calcom/lib/constants";
 
 import getAppKeysFromSlug from "../../_utils/getAppKeysFromSlug";
 import { encodeOAuthState } from "../../_utils/oauth/encodeOAuthState";
@@ -18,7 +18,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (typeof appKeys.client_id === "string") client_id = appKeys.client_id;
   if (!client_id) return res.status(400).json({ message: "HubSpot client id missing." });
 
-  const redirectUri = `${WEBAPP_URL}/api/integrations/hubspot/callback`;
+  const redirectUri = `${WEBAPP_URL_FOR_OAUTH}/api/integrations/hubspot/callback`;
   const url = hubspotClient.oauth.getAuthorizationUrl(
     client_id,
     redirectUri,
diff --git a/packages/app-store/hubspot/api/callback.ts b/packages/app-store/hubspot/api/callback.ts
@@ -2,13 +2,14 @@ import * as hubspot from "@hubspot/api-client";
 import type { TokenResponseIF } from "@hubspot/api-client/lib/codegen/oauth/models/TokenResponseIF";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL_FOR_OAUTH } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 
 import getAppKeysFromSlug from "../../_utils/getAppKeysFromSlug";
 import getInstalledAppPath from "../../_utils/getInstalledAppPath";
 import createOAuthAppCredential from "../../_utils/oauth/createOAuthAppCredential";
 import { decodeOAuthState } from "../../_utils/oauth/decodeOAuthState";
+import metadata from "../_metadata";
 
 let client_id = "";
 let client_secret = "";
@@ -39,15 +40,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const hubspotToken: HubspotToken = await hubspotClient.oauth.tokensApi.createToken(
     "authorization_code",
     code,
-    `${WEBAPP_URL}/api/integrations/hubspot/callback`,
+    `${WEBAPP_URL_FOR_OAUTH}/api/integrations/hubspot/callback`,
     client_id,
     client_secret
   );
 
   // set expiry date as offset from current time.
   hubspotToken.expiryDate = Math.round(Date.now() + hubspotToken.expiresIn * 1000);
 
-  await createOAuthAppCredential({ appId: "hubspot", type: "hubspot_other_calendar" }, hubspotToken, req);
+  await createOAuthAppCredential({ appId: metadata.slug, type: metadata.type }, hubspotToken, req);
 
   const state = decodeOAuthState(req);
   res.redirect(
diff --git a/packages/app-store/pipedrive-crm/config.json b/packages/app-store/pipedrive-crm/config.json
@@ -2,7 +2,7 @@
   "/*": "Don't modify slug - If required, do it using cli edit command",
   "name": "Pipedrive CRM",
   "slug": "pipedrive-crm",
-  "type": "pipedrive-crm_other_calendar",
+  "type": "pipedrive-crm_crm",
   "logo": "icon.svg",
   "url": "https://revert.dev",
   "variant": "crm",
diff --git a/packages/app-store/salesforce/api/add.ts b/packages/app-store/salesforce/api/add.ts
@@ -1,7 +1,7 @@
 import jsforce from "jsforce";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL_FOR_OAUTH } from "@calcom/lib/constants";
 
 import getAppKeysFromSlug from "../../_utils/getAppKeysFromSlug";
 import { encodeOAuthState } from "../../_utils/oauth/encodeOAuthState";
@@ -17,7 +17,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   const salesforceClient = new jsforce.Connection({
     clientId: consumer_key,
-    redirectUri: `${WEBAPP_URL}/api/integrations/salesforce/callback`,
+    redirectUri: `${WEBAPP_URL_FOR_OAUTH}/api/integrations/salesforce/callback`,
   });
 
   const url = salesforceClient.oauth2.getAuthorizationUrl({
diff --git a/packages/app-store/salesforce/api/callback.ts b/packages/app-store/salesforce/api/callback.ts
@@ -1,13 +1,14 @@
 import jsforce from "jsforce";
 import type { NextApiRequest, NextApiResponse } from "next";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { WEBAPP_URL_FOR_OAUTH } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 
 import getAppKeysFromSlug from "../../_utils/getAppKeysFromSlug";
 import getInstalledAppPath from "../../_utils/getInstalledAppPath";
 import createOAuthAppCredential from "../../_utils/oauth/createOAuthAppCredential";
 import { decodeOAuthState } from "../../_utils/oauth/decodeOAuthState";
+import appConfig from "../config.json";
 
 let consumer_key = "";
 let consumer_secret = "";
@@ -33,16 +34,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   const conn = new jsforce.Connection({
     clientId: consumer_key,
     clientSecret: consumer_secret,
-    redirectUri: `${WEBAPP_URL}/api/integrations/salesforce/callback`,
+    redirectUri: `${WEBAPP_URL_FOR_OAUTH}/api/integrations/salesforce/callback`,
   });
 
   const salesforceTokenInfo = await conn.oauth2.requestToken(code as string);
 
-  await createOAuthAppCredential(
-    { appId: "salesforce", type: "salesforce_other_calendar" },
-    salesforceTokenInfo,
-    req
-  );
+  await createOAuthAppCredential({ appId: appConfig.slug, type: appConfig.type }, salesforceTokenInfo, req);
 
   const state = decodeOAuthState(req);
   res.redirect(
diff --git a/packages/app-store/salesforce/config.json b/packages/app-store/salesforce/config.json
@@ -2,10 +2,10 @@
   "/*": "Don't modify slug - If required, do it using cli edit command",
   "name": "Salesforce",
   "slug": "salesforce",
-  "type": "salesforce_other_calendar",
+  "type": "salesforce_crm",
   "logo": "icon.png",
   "url": "https://cal.com/",
-  "variant": "other_calendar",
+  "variant": "crm",
   "categories": ["crm"],
   "publisher": "Cal.com, Inc.",
   "email": "help@cal.com",
diff --git a/packages/app-store/sendgrid/config.json b/packages/app-store/sendgrid/config.json
@@ -6,7 +6,7 @@
   "logo": "logo.png",
   "url": "https://cal.com/",
   "variant": "other_calendar",
-  "categories": ["crm"],
+  "categories": ["other"],
   "publisher": "Cal.com, Inc.",
   "email": "help@cal.com",
   "description": "SendGrid delivers your transactional and marketing emails through the world's largest cloud-based email delivery platform.",
diff --git a/packages/app-store/utils.ts b/packages/app-store/utils.ts
@@ -47,7 +47,7 @@ export const ALL_APPS = Object.values(ALL_APPS_MAP);
  */
 function getApps(credentials: CredentialDataWithTeamName[], filterOnCredentials?: boolean) {
   const apps = ALL_APPS.reduce((reducedArray, appMeta) => {
-    const appCredentials = credentials.filter((credential) => credential.type === appMeta.type);
+    const appCredentials = credentials.filter((credential) => credential.appId === appMeta.slug);
 
     if (filterOnCredentials && !appCredentials.length && !appMeta.isGlobal) return reducedArray;
 
diff --git a/packages/app-store/zoho-bigin/config.json b/packages/app-store/zoho-bigin/config.json
@@ -2,11 +2,11 @@
   "/*": "Don't modify slug - If required, do it using cli edit command",
   "name": "Zoho Bigin",
   "slug": "zoho-bigin",
-  "type": "zoho-bigin_other_calendar",
+  "type": "zoho-bigin_crm",
   "logo": "zohobigin.svg",
   "url": "https://github.com/ShaneMaglangit",
-  "variant": "other",
-  "categories": ["other"],
+  "variant": "crm",
+  "categories": ["crm"],
   "publisher": "Shane Maglangit",
   "email": "help@cal.com",
   "description": "Bigin easily transforms your day-to-day customer processes into actionable pipelines. From qualifying leads to closing deals to managing important after-sales operations—Bigin connects your different teams to work together so that you can offer the best possible experience to your customers. Say goodbye to missing follow-ups, manual data entry, lack of team communication, and information silos.",
diff --git a/packages/app-store/zohocrm/api/callback.ts b/packages/app-store/zohocrm/api/callback.ts
@@ -9,6 +9,7 @@ import getAppKeysFromSlug from "../../_utils/getAppKeysFromSlug";
 import getInstalledAppPath from "../../_utils/getInstalledAppPath";
 import createOAuthAppCredential from "../../_utils/oauth/createOAuthAppCredential";
 import { decodeOAuthState } from "../../_utils/oauth/decodeOAuthState";
+import appConfig from "../config.json";
 
 let client_id = "";
 let client_secret = "";
@@ -51,11 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   zohoCrmTokenInfo.data.expiryDate = Math.round(Date.now() + 60 * 60);
   zohoCrmTokenInfo.data.accountServer = req.query["accounts-server"];
 
-  await createOAuthAppCredential(
-    { appId: "zohocrm", type: "zohocrm_other_calendar" },
-    zohoCrmTokenInfo.data,
-    req
-  );
+  await createOAuthAppCredential({ appId: appConfig.slug, type: appConfig.type }, zohoCrmTokenInfo.data, req);
 
   const state = decodeOAuthState(req);
   res.redirect(
diff --git a/packages/app-store/zohocrm/config.json b/packages/app-store/zohocrm/config.json
@@ -2,10 +2,10 @@
   "/*": "Don't modify slug - If required, do it using cli edit command",
   "name": "ZohoCRM",
   "slug": "zohocrm",
-  "type": "zohocrm_other_calendar",
+  "type": "zohocrm_crm",
   "logo": "icon.svg",
   "url": "https://github.com/jatinsandilya",
-  "variant": "other",
+  "variant": "crm",
   "categories": ["crm"],
   "publisher": "Jatin Sandilya",
   "email": "help@cal.com",
diff --git a/packages/core/EventManager.ts b/packages/core/EventManager.ts
diff --git a/packages/trpc/server/routers/loggedInViewer/integrations.handler.ts b/packages/trpc/server/routers/loggedInViewer/integrations.handler.ts
diff --git a/packages/types/App.d.ts b/packages/types/App.d.ts
