feat: add matomo analytics app (#12646)

packages/app-store/apps.browser.generated.tsx

@@ -27,6 +27,7 @@ export const EventTypeAddonMap = {
   ga4: dynamic(() => import("./ga4/components/EventTypeAppCardInterface")),
   giphy: dynamic(() => import("./giphy/components/EventTypeAppCardInterface")),
   gtm: dynamic(() => import("./gtm/components/EventTypeAppCardInterface")),
+  matomo: dynamic(() => import("./matomo/components/EventTypeAppCardInterface")),
   metapixel: dynamic(() => import("./metapixel/components/EventTypeAppCardInterface")),
   paypal: dynamic(() => import("./paypal/components/EventTypeAppCardInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppCardInterface")),

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

@@ -15,6 +15,7 @@ import { appKeysSchema as intercom_zod_ts } from "./intercom/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 matomo_zod_ts } from "./matomo/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";
@@ -51,6 +52,7 @@ export const appKeysSchemas = {
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
   make: make_zod_ts,
+  matomo: matomo_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

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

@@ -33,6 +33,7 @@ import intercom_config_json from "./intercom/config.json";
 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 matomo_config_json from "./matomo/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";
@@ -109,6 +110,7 @@ export const appStoreMetadata = {
   jitsivideo: jitsivideo__metadata_ts,
   larkcalendar: larkcalendar__metadata_ts,
   make: make_config_json,
+  matomo: matomo_config_json,
   metapixel: metapixel_config_json,
   mirotalk: mirotalk_config_json,
   n8n: n8n_config_json,

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

@@ -15,6 +15,7 @@ import { appDataSchema as intercom_zod_ts } from "./intercom/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 matomo_zod_ts } from "./matomo/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";
@@ -51,6 +52,7 @@ export const appDataSchemas = {
   jitsivideo: jitsivideo_zod_ts,
   larkcalendar: larkcalendar_zod_ts,
   make: make_zod_ts,
+  matomo: matomo_zod_ts,
   metapixel: metapixel_zod_ts,
   office365calendar: office365calendar_zod_ts,
   office365video: office365video_zod_ts,

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

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

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

@@ -15,6 +15,7 @@ import { metadata as googlevideo__metadata_ts } from "./googlevideo/_metadata";
 import gtm_config_json from "./gtm/config.json";
 import { metadata as huddle01video__metadata_ts } from "./huddle01video/_metadata";
 import { metadata as jitsivideo__metadata_ts } from "./jitsivideo/_metadata";
+import matomo_config_json from "./matomo/config.json";
 import metapixel_config_json from "./metapixel/config.json";
 import mirotalk_config_json from "./mirotalk/config.json";
 import office365video_config_json from "./office365video/config.json";
@@ -48,6 +49,7 @@ export const appStoreMetadata = {
   gtm: gtm_config_json,
   huddle01video: huddle01video__metadata_ts,
   jitsivideo: jitsivideo__metadata_ts,
+  matomo: matomo_config_json,
   metapixel: metapixel_config_json,
   mirotalk: mirotalk_config_json,
   office365video: office365video_config_json,

packages/app-store/matomo/DESCRIPTION.md

@@ -0,0 +1,6 @@
+---
+items:
+  - 1.png
+---
+
+{DESCRIPTION}

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

@@ -0,0 +1,16 @@
+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",
+  createCredential: ({ appType, user, slug, teamId }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {}, teamId }),
+};
+
+export default handler;

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

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

packages/app-store/matomo/components/EventTypeAppCardInterface.tsx

@@ -0,0 +1,47 @@
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+import { TextField } from "@calcom/ui";
+
+import type { appDataSchema } from "../zod";
+
+const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app, eventType }) {
+  const { getAppData, setAppData, disabled } = useAppContextWithSchema<typeof appDataSchema>();
+  const matomoUrl = getAppData("MATOMO_URL");
+  const siteId = getAppData("SITE_ID");
+  const { enabled, updateEnabled } = useIsAppEnabled(app);
+
+  return (
+    <AppCard
+      app={app}
+      switchOnClick={(e) => {
+        updateEnabled(e);
+      }}
+      switchChecked={enabled}
+      teamId={eventType.team?.id || undefined}>
+      <div className="flex flex-col gap-2">
+        <TextField
+          name="Matomo URL"
+          placeholder="Enter your Matomo URL here"
+          value={matomoUrl}
+          disabled={disabled}
+          onChange={(e) => {
+            setAppData("MATOMO_URL", e.target.value);
+          }}
+        />
+        <TextField
+          disabled={disabled}
+          name="Site ID"
+          placeholder="Enter your Site ID"
+          value={siteId}
+          onChange={(e) => {
+            setAppData("SITE_ID", e.target.value);
+          }}
+        />
+      </div>
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/matomo/config.json

@@ -0,0 +1,29 @@
+{
+  "name": "Matomo",
+  "slug": "matomo",
+  "type": "matomo_analytics",
+  "logo": "icon.svg",
+  "url": "https://cal.com/",
+  "variant": "analytics",
+  "categories": ["analytics"],
+  "publisher": "Cal.com, Inc.",
+  "email": "help@cal.com",
+  "description": "Google Analytics alternative that protects your data and your customers' privacy",
+  "extendsFeature": "EventType",
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "src": "{MATOMO_URL}/matomo.js",
+          "attrs": {}
+        },
+        {
+          "content": "var _paq = window._paq || [];\n      _paq.push(['trackPageView']);\n      _paq.push(['enableLinkTracking']);\n      (function() {\n        var u='{MATOMO_URL}/';  \n        _paq.push(['setTrackerUrl', u+'matomo.php']);\n        _paq.push(['setSiteId', '{SITE_ID}']);  \n        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\n        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);\n      })();"
+        }
+      ]
+    }
+  },
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "booking-pages-tag"
+}

packages/app-store/matomo/index.ts

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

packages/app-store/matomo/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/matomo",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  },
+  "description": "Google Analytics alternative that protects your data and your customers' privacy"
+}

packages/app-store/matomo/zod.ts

@@ -0,0 +1,12 @@
+import { z } from "zod";
+
+import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";
+
+export const appDataSchema = eventTypeAppCardZod.merge(
+  z.object({
+    MATOMO_URL: z.string().optional(),
+    SITE_ID: z.string().optional(),
+  })
+);
+
+export const appKeysSchema = z.object({});