feat: make.com/integromat app

apps/web/public/static/locales/en/common.json

@@ -1053,12 +1053,15 @@
   "how_you_want_add_cal_site": "How do you want to add {{appName}} to your site?",
   "choose_ways_put_cal_site": "Choose one of the following ways to put {{appName}} on your site.",
   "setting_up_zapier": "Setting up your Zapier integration",
+  "setting_up_make": "Setting up your Make integration",
   "generate_api_key": "Generate API key",
   "generate_api_key_description": "Generate an API key to use with {{appName}} at",
   "your_unique_api_key": "Your unique API key",
   "copy_safe_api_key": "Copy this API key and save it somewhere safe. If you lose this key you have to generate a new one.",
   "zapier_setup_instructions": "<0>Log into your Zapier account and create a new Zap.</0><1>Select Cal.com as your Trigger app. Also choose a Trigger event.</1><2>Choose your account and then enter your Unique API Key.</2><3>Test your Trigger.</3><4>You're set!</4>",
+  "make_setup_instructions": "<0>Log into your Make account and create a new Scenario.</0><1>Select Cal.com as your Trigger app. Also choose a Trigger event.</1><2>Choose your account and then enter your Unique API Key.</2><3>Test your Trigger.</3><4>You're set!</4>",
   "install_zapier_app": "Please first install the Zapier App in the app store.",
+  "install_make_app": "Please first install the Make App in the app store.",
   "connect_apple_server": "Connect to Apple Server",
   "calendar_url": "Calendar URL",
   "apple_server_generate_password": "Generate an app specific password to use with {{appName}} at",
@@ -1089,6 +1092,7 @@
   "or_lowercase": "or",
   "nevermind": "Nevermind",
   "go_to": "Go to: ",
+  "invite_link_make": "<li>Go to<a>Make Invite Link</a> and install Cal.com appp</li>",
   "zapier_invite_link": "Zapier Invite Link",
   "meeting_url_provided_after_confirmed": "A Meeting URL will be created once the event is confirmed.",
   "dynamically_display_attendee_or_organizer": "Dynamically display the name of your attendee for you, or your name if it's viewed by your attendee",

packages/app-store/_pages/setup/_getStaticProps.tsx

@@ -2,6 +2,7 @@ import type { GetStaticPropsContext } from "next";
 
 export const AppSetupPageMap = {
   zapier: import("../../zapier/pages/setup/_getStaticProps"),
+  make: import("../../make/pages/setup/_getStaticProps"),
 };
 
 export const getStaticProps = async (ctx: GetStaticPropsContext) => {

packages/app-store/_pages/setup/index.tsx

@@ -9,6 +9,7 @@ export const AppSetupMap = {
   "exchange2016-calendar": dynamic(() => import("../../exchange2016calendar/pages/setup")),
   "caldav-calendar": dynamic(() => import("../../caldavcalendar/pages/setup")),
   zapier: dynamic(() => import("../../zapier/pages/setup")),
+  make: dynamic(() => import("../../make/pages/setup")),
   closecom: dynamic(() => import("../../closecom/pages/setup")),
   sendgrid: dynamic(() => import("../../sendgrid/pages/setup")),
   paypal: dynamic(() => import("../../paypal/pages/setup")),

packages/app-store/apps.keys-schemas.generated.ts

@@ -12,6 +12,7 @@ import { appKeysSchema as gtm_zod_ts } from "./gtm/zod";
 import { appKeysSchema as hubspot_zod_ts } from "./hubspot/zod";
 import { appKeysSchema as jitsivideo_zod_ts } from "./jitsivideo/zod";
 import { appKeysSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
+import { appKeysSchema as make_zod_ts } from "./make/zod";
 import { appKeysSchema as metapixel_zod_ts } from "./metapixel/zod";
 import { appKeysSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appKeysSchema as office365video_zod_ts } from "./office365video/zod";
@@ -43,6 +44,7 @@ export const appKeysSchemas = {
   hubspot: hubspot_zod_ts,
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
+  make: make_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

packages/app-store/apps.metadata.generated.ts

@@ -29,6 +29,7 @@ import { metadata as hubspot__metadata_ts } from "./hubspot/_metadata";
 import { metadata as huddle01video__metadata_ts } from "./huddle01video/_metadata";
 import { metadata as jitsivideo__metadata_ts } from "./jitsivideo/_metadata";
 import { metadata as larkcalendar__metadata_ts } from "./larkcalendar/_metadata";
+import make_config_json from "./make/config.json";
 import metapixel_config_json from "./metapixel/config.json";
 import mirotalk_config_json from "./mirotalk/config.json";
 import n8n_config_json from "./n8n/config.json";
@@ -99,6 +100,7 @@ export const appStoreMetadata = {
   huddle01video: huddle01video__metadata_ts,
   jitsivideo: jitsivideo__metadata_ts,
   larkcalendar: larkcalendar__metadata_ts,
+  make: make_config_json,
   metapixel: metapixel_config_json,
   mirotalk: mirotalk_config_json,
   n8n: n8n_config_json,

packages/app-store/apps.schemas.generated.ts

@@ -12,6 +12,7 @@ import { appDataSchema as gtm_zod_ts } from "./gtm/zod";
 import { appDataSchema as hubspot_zod_ts } from "./hubspot/zod";
 import { appDataSchema as jitsivideo_zod_ts } from "./jitsivideo/zod";
 import { appDataSchema as larkcalendar_zod_ts } from "./larkcalendar/zod";
+import { appDataSchema as make_zod_ts } from "./make/zod";
 import { appDataSchema as metapixel_zod_ts } from "./metapixel/zod";
 import { appDataSchema as office365calendar_zod_ts } from "./office365calendar/zod";
 import { appDataSchema as office365video_zod_ts } from "./office365video/zod";
@@ -43,6 +44,7 @@ export const appDataSchemas = {
   hubspot: hubspot_zod_ts,
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
+  make: make_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

packages/app-store/apps.server.generated.ts

@@ -29,6 +29,7 @@ export const apiHandlers = {
   huddle01video: import("./huddle01video/api"),
   jitsivideo: import("./jitsivideo/api"),
   larkcalendar: import("./larkcalendar/api"),
+  make: import("./make/api"),
   metapixel: import("./metapixel/api"),
   mirotalk: import("./mirotalk/api"),
   n8n: import("./n8n/api"),

packages/app-store/index.ts

@@ -26,6 +26,7 @@ const appStore = {
   webexvideo: () => import("./webex"),
   giphy: () => import("./giphy"),
   zapier: () => import("./zapier"),
+  make: () => import("./make"),
   exchange2013calendar: () => import("./exchange2013calendar"),
   exchange2016calendar: () => import("./exchange2016calendar"),
   exchangecalendar: () => import("./exchangecalendar"),

packages/app-store/make/DESCRIPTION.md

@@ -0,0 +1,10 @@
+---
+items:
+  - 1.jpeg
+  - 2.jpeg
+  - 3.jpeg
+  - 4.jpeg
+  - 5.jpeg
+---
+
+Workflow automation for everyone. Use the Cal.com app in Make to automate your workflows when a booking is created, rescheduled, cancelled or when a meeting has ended. You can also get all your booking with the 'List Bookings' module.<br /><br />**After Installation:** Have you lost your API key? You can always generate a new key on the <a href="/apps/make/setup">**<ins>Make Setup Page</ins>**</a>

packages/app-store/make/README.md

@@ -0,0 +1,22 @@
+# Setting up Make Integration
+
+
+1. Install the app from the Cal app store and generate an API key. Copy the API key.
+2. Go to `/admin/apps/automation` in Cal and set the `invite_link` for Make to `https://www.make.com/en/hq/app-invitation/6cb2772b61966508dd8f414ba3b44510` to use the app.
+3. Create a [Make account](https://www.make.com/en/login), if you don't have one.
+4. Go to `Scenarios` in the sidebar and click on **Create a new scenario**.
+5. Search for `Cal.com` in the apps list and select from the list of triggers - Booking Created, Booking Deleted, Booking Rescheduled, Meeting Ended
+6. To create a **connection** you will need your Cal deployment url and the app API Key generated above. You only need to create a **connection** once, all webhooks can use that connection.
+7. Setup the webhook for the desired event in Make.
+8. To delete a webhook, go to `Webhooks` in the left sidebar in Make, pick the webhook you want to delete and click **delete**.
+
+## Localhost or Self-hosting
+
+Localhost urls can not be used as the base URL for api endpoints
+
+Possible solution: using [https://ngrok.com/](https://ngrok.com/)
+
+1. Create Account
+2. [Download](https://ngrok.com/download) ngrok and start a tunnel to your running localhost
+   - Use forwarding url as your baseUrl for the URL endpoints
+3. Use the ngrok url as your Cal deployment url when creating the **Connection** in Make.

packages/app-store/make/api/add.ts

@@ -0,0 +1,20 @@
+import { createDefaultInstallation } from "@calcom/app-store/_utils/installation";
+import type { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  redirect: {
+    newTab: true,
+    url: "/apps/make/setup",
+  },
+  createCredential: ({ appType, user, slug, teamId }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {}, teamId }),
+};
+
+export default handler;

packages/app-store/make/api/index.ts

@@ -0,0 +1,5 @@
+export { default as add } from "./add";
+export { default as listBookings } from "./subscriptions/listBookings";
+export { default as deleteSubscription } from "./subscriptions/deleteSubscription";
+export { default as addSubscription } from "./subscriptions/addSubscription";
+export { default as me } from "./subscriptions/me";

packages/app-store/make/api/subscriptions/addSubscription.ts

@@ -0,0 +1,38 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import findValidApiKey from "@calcom/features/ee/api-keys/lib/findValidApiKey";
+import { addSubscription } from "@calcom/features/webhooks/lib/scheduleTrigger";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const apiKey = req.query.apiKey as string;
+
+  if (!apiKey) {
+    return res.status(401).json({ message: "No API key provided" });
+  }
+
+  const validKey = await findValidApiKey(apiKey, "make");
+
+  if (!validKey) {
+    return res.status(401).json({ message: "API key not valid" });
+  }
+
+  const { subscriberUrl, triggerEvent } = req.body;
+
+  const createAppSubscription = await addSubscription({
+    appApiKey: validKey,
+    triggerEvent: triggerEvent,
+    subscriberUrl: subscriberUrl,
+    appId: "make",
+  });
+
+  if (!createAppSubscription) {
+    return res.status(500).json({ message: "Could not create subscription." });
+  }
+
+  res.status(200).json(createAppSubscription);
+}
+
+export default defaultHandler({
+  POST: Promise.resolve({ default: defaultResponder(handler) }),
+});

packages/app-store/make/api/subscriptions/deleteSubscription.ts

@@ -0,0 +1,40 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import z from "zod";
+
+import findValidApiKey from "@calcom/features/ee/api-keys/lib/findValidApiKey";
+import { deleteSubscription } from "@calcom/features/webhooks/lib/scheduleTrigger";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+const querySchema = z.object({
+  apiKey: z.string(),
+  id: z.string(),
+});
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { apiKey, id } = querySchema.parse(req.query);
+
+  if (!apiKey) {
+    return res.status(401).json({ message: "No API key provided" });
+  }
+
+  const validKey = await findValidApiKey(apiKey, "make");
+
+  if (!validKey) {
+    return res.status(401).json({ message: "API key not valid" });
+  }
+
+  const deleteEventSubscription = await deleteSubscription({
+    appApiKey: validKey,
+    webhookId: id,
+    appId: "make",
+  });
+
+  if (!deleteEventSubscription) {
+    return res.status(500).json({ message: "Could not delete subscription." });
+  }
+  res.status(204).json({ message: "Subscription is deleted." });
+}
+
+export default defaultHandler({
+  DELETE: Promise.resolve({ default: defaultResponder(handler) }),
+});

packages/app-store/make/api/subscriptions/listBookings.ts

@@ -0,0 +1,35 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import findValidApiKey from "@calcom/features/ee/api-keys/lib/findValidApiKey";
+import { listBookings } from "@calcom/features/webhooks/lib/scheduleTrigger";
+import { defaultHandler, defaultResponder } from "@calcom/lib/server";
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const apiKey = req.query.apiKey as string;
+
+  if (!apiKey) {
+    return res.status(401).json({ message: "No API key provided" });
+  }
+
+  const validKey = await findValidApiKey(apiKey, "make");
+
+  if (!validKey) {
+    return res.status(401).json({ message: "API key not valid" });
+  }
+  const bookings = await listBookings(validKey);
+
+  if (!bookings) {
+    return res.status(500).json({ message: "Unable to get bookings." });
+  }
+  if (bookings.length === 0) {
+    const requested = validKey.teamId ? "teamId: " + validKey.teamId : "userId: " + validKey.userId;
+    return res.status(404).json({
+      message: `There are no bookings to retrieve, please create a booking first. Requested: \`${requested}\``,
+    });
+  }
+  res.status(201).json(bookings);
+}
+
+export default defaultHandler({
+  GET: Promise.resolve({ default: defaultResponder(handler) }),
+});

packages/app-store/make/api/subscriptions/me.ts

@@ -0,0 +1,35 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import findValidApiKey from "@calcom/features/ee/api-keys/lib/findValidApiKey";
+import prisma from "@calcom/prisma";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const apiKey = req.query.apiKey as string;
+
+  if (!apiKey) {
+    return res.status(401).json({ message: "No API key provided" });
+  }
+
+  const validKey = await findValidApiKey(apiKey, "make");
+
+  if (!validKey) {
+    return res.status(401).json({ message: "API key not valid" });
+  }
+
+  if (req.method === "GET") {
+    try {
+      const user = await prisma.user.findFirst({
+        where: {
+          id: validKey.userId,
+        },
+        select: {
+          username: true,
+        },
+      });
+      res.status(201).json(user);
+    } catch (error) {
+      console.error(error);
+      return res.status(500).json({ message: "Unable to get User." });
+    }
+  }
+}

packages/app-store/make/config.json

@@ -0,0 +1,18 @@
+{
+  "/*": "Don't modify slug - If required, do it using cli edit command",
+  "name": "Make",
+  "slug": "make",
+  "type": "make_automation",
+  "logo": "icon.svg",
+  "url": "https://cal.com/apps/make",
+  "variant": "automation",
+  "categories": ["automation"],
+  "publisher": "aa2dee2",
+  "email": "support@cal.com",
+  "description": "Automate workflows",
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "basic",
+  "imageSrc": "icon.svg",
+  "dirName": "make"
+}

packages/app-store/make/index.ts

@@ -0,0 +1 @@
+export * as api from "./api";

packages/app-store/make/package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/make",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "description": "Workflow automation for everyone. Use the Cal.com Make app to trigger your workflows when a booking is created, rescheduled, or cancelled, or after a meeting ends.",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*",
+    "@types/node-schedule": "^2.1.0"
+  }
+}

packages/app-store/make/pages/setup/_getStaticProps.tsx

@@ -0,0 +1,20 @@
+import type { GetStaticPropsContext } from "next";
+
+import getAppKeysFromSlug from "../../../_utils/getAppKeysFromSlug";
+
+export interface IMakeSetupProps {
+  inviteLink: string;
+}
+
+export const getStaticProps = async (ctx: GetStaticPropsContext) => {
+  if (typeof ctx.params?.slug !== "string") return { notFound: true } as const;
+  let inviteLink = "";
+  const appKeys = await getAppKeysFromSlug("make");
+  if (typeof appKeys.invite_link === "string") inviteLink = appKeys.invite_link;
+
+  return {
+    props: {
+      inviteLink,
+    },
+  };
+};