add posthog for paid users

frontend/package.json

@@ -40,6 +40,7 @@
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
     "html2canvas": "^1.4.1",
+    "posthog-js": "^1.101.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",

frontend/src/components/hosted/AppContainer.tsx

@@ -1,4 +1,5 @@
 import { SignUp, useUser } from "@clerk/clerk-react";
+import posthog from "posthog-js";
 import App from "../../App";
 import { useEffect, useRef, useState } from "react";
 import { AlertDialog } from "@radix-ui/react-alert-dialog";
@@ -8,7 +9,7 @@ import { useAuthenticatedFetch } from "./useAuthenticatedFetch";
 import { useStore } from "../../store/store";
 import AvatarDropdown from "./AvatarDropdown";
 import { UserResponse } from "./types";
-import { SAAS_BACKEND_URL } from "../../config";
+import { POSTHOG_HOST, POSTHOG_KEY, SAAS_BACKEND_URL } from "../../config";
 
 function AppContainer() {
   const [showPopup, setShowPopup] = useState(false);
@@ -44,6 +45,15 @@ function AppContainer() {
       if (!user.subscriber_tier) {
         setSubscriberTier("free");
       } else {
+        // Initialize PostHog only for paid users
+        posthog.init(POSTHOG_KEY, { api_host: POSTHOG_HOST });
+        // Identify the user to PostHog
+        posthog.identify(user.email, {
+          email: user.email,
+          first_name: user.first_name,
+          last_name: user.last_name,
+        });
+
         setSubscriberTier(user.subscriber_tier);
       }
 

frontend/src/config.ts

@@ -20,3 +20,7 @@ export const STRIPE_PUBLISHABLE_KEY =
   import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || null;
 
 export const SAAS_BACKEND_URL = import.meta.env.VITE_SAAS_BACKEND_URL || null;
+
+// PostHog
+export const POSTHOG_KEY = import.meta.env.VITE_POSTHOG_KEY || null;
+export const POSTHOG_HOST = import.meta.env.VITE_POSTHOG_HOST || null;

frontend/yarn.lock

@@ -2319,6 +2319,11 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
+fflate@^0.4.1:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
@@ -3148,6 +3153,19 @@ postcss@^8.4.32:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthog-js@^1.101.0:
+  version "1.101.0"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.101.0.tgz#00e0fc6e164addd52b1738f087996bb0d6685943"
+  integrity sha512-mzwYSSWr9FdEMDeVpc+diLfc85+10r/LgELGtsW/HaYk+0du/GEql6szpqG8YXMMgb2dE4dnj0JICZFIJd7K3w==
+  dependencies:
+    fflate "^0.4.1"
+    preact "^10.19.3"
+
+preact@^10.19.3:
+  version "10.19.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.3.tgz#7a7107ed2598a60676c943709ea3efb8aaafa899"
+  integrity sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"