Add Pendo integration with initialization (#373)

* Add Pendo integration with initialization and typescript types

* Fix formatting issues

frontend/index.html

@@ -21,6 +21,19 @@
   <link rel="apple-touch-icon" href="assets/logo192.png" />
   <link rel="manifest" href="assets/manifest.json" />
 
+  <script>
+    (function (apiKey) {
+      (function (p, e, n, d, o) {
+        var v, w, x, y, z; o = p[d] = p[d] || {}; o._q = o._q || [];
+        v = ['initialize', 'identify', 'updateOptions', 'pageLoad', 'track']; for (w = 0, x = v.length; w < x; ++w)(function (m) {
+          o[m] = o[m] || function () { o._q[m === v[0] ? 'unshift' : 'push']([m].concat([].slice.call(arguments, 0))); };
+        })(v[w]);
+        y = e.createElement(n); y.async = !0; y.src = 'https://cdn.pendo.io/agent/static/' + apiKey + '/pendo.js';
+        z = e.getElementsByTagName(n)[0]; z.parentNode.insertBefore(y, z);
+      })(window, document, 'script', 'pendo');
+    })('7664f162-0994-4d9f-7c5c-fd6e279743b9');
+  </script>
+
   <title>K-Scale Store</title>
 </head>
 
@@ -29,4 +42,4 @@
   <script type="module" src="src/index.tsx"></script>
 </body>
 
-</html>
+</html>

frontend/src/App.tsx

@@ -1,4 +1,10 @@
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import { useEffect } from "react";
+import {
+  Route,
+  BrowserRouter as Router,
+  Routes,
+  useLocation,
+} from "react-router-dom";
 
 import "App.css";
 
@@ -25,6 +31,29 @@ import NotFound from "components/pages/NotFound";
 import Profile from "components/pages/Profile";
 import Signup from "components/pages/Signup";
 
+const PendoInitializer = () => {
+  const location = useLocation(); // Hook to get current route
+
+  useEffect(() => {
+    if (window.pendo) {
+      window.pendo.initialize({
+        visitor: { id: "" }, // Leave empty for anonymous tracking
+        account: { id: "" },
+      });
+      console.log("Pendo initialized");
+    }
+  }, []);
+
+  useEffect(() => {
+    // Track page views when the route changes
+    if (window.pendo) {
+      window.pendo.pageLoad(); // Notify Pendo of page transitions
+    }
+  }, [location.pathname]);
+
+  return null; // This component only handles Pendo initialization and page tracking
+};
+
 const App = () => {
   return (
     <Router>
@@ -34,6 +63,8 @@ const App = () => {
             <AlertQueue>
               <div className="dark:bg-black dark:text-white min-h-screen flex flex-col">
                 <Navbar />
+                <PendoInitializer />{" "}
+                {/* This component is where Pendo is initialized */}
                 <div className="flex-grow">
                   <Container>
                     <Routes>

frontend/src/pendo.d.ts

@@ -0,0 +1,23 @@
+interface PendoVisitor {
+  id: string;
+}
+
+interface PendoAccount {
+  id: string;
+}
+
+interface Pendo {
+  initialize: (options: {
+    visitor: PendoVisitor;
+    account?: PendoAccount;
+  }) => void;
+  pageLoad: () => void;
+}
+
+declare global {
+  interface Window {
+    pendo: Pendo;
+  }
+}
+
+export {};