feat: posthog app added (#14801)

* feat: posthog app added

* fix:requested changes

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

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

@@ -32,6 +32,7 @@ export const EventTypeAddonMap = {
   "mock-payment-app": dynamic(() => import("./mock-payment-app/components/EventTypeAppCardInterface")),
   paypal: dynamic(() => import("./paypal/components/EventTypeAppCardInterface")),
   plausible: dynamic(() => import("./plausible/components/EventTypeAppCardInterface")),
+  posthog: dynamic(() => import("./posthog/components/EventTypeAppCardInterface")),
   qr_code: dynamic(() => import("./qr_code/components/EventTypeAppCardInterface")),
   stripepayment: dynamic(() => import("./stripepayment/components/EventTypeAppCardInterface")),
   "booking-pages-tag": dynamic(() =>

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

@@ -25,6 +25,7 @@ import { appKeysSchema as office365video_zod_ts } from "./office365video/zod";
 import { appKeysSchema as paypal_zod_ts } from "./paypal/zod";
 import { appKeysSchema as pipedrive_crm_zod_ts } from "./pipedrive-crm/zod";
 import { appKeysSchema as plausible_zod_ts } from "./plausible/zod";
+import { appKeysSchema as posthog_zod_ts } from "./posthog/zod";
 import { appKeysSchema as qr_code_zod_ts } from "./qr_code/zod";
 import { appKeysSchema as routing_forms_zod_ts } from "./routing-forms/zod";
 import { appKeysSchema as salesforce_zod_ts } from "./salesforce/zod";
@@ -66,6 +67,7 @@ export const appKeysSchemas = {
   paypal: paypal_zod_ts,
   "pipedrive-crm": pipedrive_crm_zod_ts,
   plausible: plausible_zod_ts,
+  posthog: posthog_zod_ts,
   qr_code: qr_code_zod_ts,
   "routing-forms": routing_forms_zod_ts,
   salesforce: salesforce_zod_ts,

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

@@ -52,6 +52,7 @@ import ping_config_json from "./ping/config.json";
 import pipedream_config_json from "./pipedream/config.json";
 import pipedrive_crm_config_json from "./pipedrive-crm/config.json";
 import plausible_config_json from "./plausible/config.json";
+import posthog_config_json from "./posthog/config.json";
 import qr_code_config_json from "./qr_code/config.json";
 import raycast_config_json from "./raycast/config.json";
 import riverside_config_json from "./riverside/config.json";
@@ -139,6 +140,7 @@ export const appStoreMetadata = {
   pipedream: pipedream_config_json,
   "pipedrive-crm": pipedrive_crm_config_json,
   plausible: plausible_config_json,
+  posthog: posthog_config_json,
   qr_code: qr_code_config_json,
   raycast: raycast_config_json,
   riverside: riverside_config_json,

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

@@ -25,6 +25,7 @@ import { appDataSchema as office365video_zod_ts } from "./office365video/zod";
 import { appDataSchema as paypal_zod_ts } from "./paypal/zod";
 import { appDataSchema as pipedrive_crm_zod_ts } from "./pipedrive-crm/zod";
 import { appDataSchema as plausible_zod_ts } from "./plausible/zod";
+import { appDataSchema as posthog_zod_ts } from "./posthog/zod";
 import { appDataSchema as qr_code_zod_ts } from "./qr_code/zod";
 import { appDataSchema as routing_forms_zod_ts } from "./routing-forms/zod";
 import { appDataSchema as salesforce_zod_ts } from "./salesforce/zod";
@@ -66,6 +67,7 @@ export const appDataSchemas = {
   paypal: paypal_zod_ts,
   "pipedrive-crm": pipedrive_crm_zod_ts,
   plausible: plausible_zod_ts,
+  posthog: posthog_zod_ts,
   qr_code: qr_code_zod_ts,
   "routing-forms": routing_forms_zod_ts,
   salesforce: salesforce_zod_ts,

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

@@ -52,6 +52,7 @@ export const apiHandlers = {
   pipedream: import("./pipedream/api"),
   "pipedrive-crm": import("./pipedrive-crm/api"),
   plausible: import("./plausible/api"),
+  posthog: import("./posthog/api"),
   qr_code: import("./qr_code/api"),
   raycast: import("./raycast/api"),
   riverside: import("./riverside/api"),

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

@@ -23,6 +23,7 @@ import mirotalk_config_json from "./mirotalk/config.json";
 import office365video_config_json from "./office365video/config.json";
 import ping_config_json from "./ping/config.json";
 import plausible_config_json from "./plausible/config.json";
+import posthog_config_json from "./posthog/config.json";
 import riverside_config_json from "./riverside/config.json";
 import roam_config_json from "./roam/config.json";
 import salesroom_config_json from "./salesroom/config.json";
@@ -61,6 +62,7 @@ export const appStoreMetadata = {
   office365video: office365video_config_json,
   ping: ping_config_json,
   plausible: plausible_config_json,
+  posthog: posthog_config_json,
   riverside: riverside_config_json,
   roam: roam_config_json,
   salesroom: salesroom_config_json,

packages/app-store/posthog/DESCRIPTION.md

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

packages/app-store/posthog/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, user: user, slug, key: {}, teamId }),
+};
+
+export default handler;

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

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

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

@@ -0,0 +1,50 @@
+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 trackingId = getAppData("TRACKING_ID");
+  const apiHost = getAppData("API_HOST");
+  const { enabled, updateEnabled } = useIsAppEnabled(app);
+
+  return (
+    <AppCard
+      hideSettingsIcon
+      app={app}
+      switchOnClick={(e) => {
+        updateEnabled(e);
+      }}
+      switchChecked={enabled}
+      teamId={eventType.team?.id || undefined}>
+      <div className="flex flex-col gap-2">
+        <TextField
+          required
+          disabled={disabled}
+          name="Tracking ID"
+          value={trackingId}
+          placeholder="Enter your Tracking ID"
+          onChange={(e) => {
+            setAppData("TRACKING_ID", e.target.value);
+          }}
+        />
+        <TextField
+          required
+          disabled={disabled}
+          name="Api host"
+          value={apiHost}
+          placeholder="Enter your Api host url"
+          onChange={(e) => {
+            setAppData("API_HOST", e.target.value);
+          }}
+        />
+      </div>
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/posthog/config.json

@@ -0,0 +1,25 @@
+{
+  "name": "Posthog",
+  "slug": "posthog",
+  "type": "posthog_analytics",
+  "logo": "icon.svg",
+  "url": "https://posthog.com",
+  "variant": "analytics",
+  "categories": ["analytics"],
+  "publisher": "Cal.com, Inc.",
+  "email": "help@cal.com",
+  "description": "PostHog is the all-in-one platform for building better products - with product analytics, feature flags, session recordings, a/b testing, heatmaps, and more.",
+  "extendsFeature": "EventType",
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "content": "!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split('.');2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement('script')).type='text/javascript',p.async=!0,p.src=s.api_host.replace('.i.posthog.com','-assets.i.posthog.com')+'/static/array.js',(r=t.getElementsByTagName('script')[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a='posthog',u.people=u.people||[],u.toString=function(t){var e='posthog';return'posthog'!==a&&(e+='.'+a),t||(e+=' (stub)'),e},u.people.toString=function(){return u.toString(1)+'.people (stub)'},o='capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId'.split(' '),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);posthog.init('{TRACKING_ID}',{api_host:'{API_HOST}'})"
+        }
+      ]
+    }
+  },
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "booking-pages-tag"
+}

packages/app-store/posthog/index.ts

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

packages/app-store/posthog/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/posthog",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  },
+  "description": "PostHog is the all-in-one platform for building better products - with product analytics, feature flags, session recordings, a/b testing, heatmaps, and more."
+}

packages/app-store/posthog/zod.ts

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