feat: posthog analytics events

README.md

@@ -98,7 +98,7 @@ Configuration is done using a seperate [administration module](https://github.co
      - VITE_TERMS_URL=terms_of_service_url
      - VITE_ABOUT_URL=about_url
      - VITE_ROLLBAR_ACCESS_TOKEN=access_token_from_rollbar
-     - VITE_ROLLBAR_ENVIRONMENT=local
+     - VITE_SYSTEM_ENVIRONMENT=local
   2. Restart shell and run `npm start`
 - Production deployment
   1. Run `npm run build`
@@ -118,4 +118,4 @@ Configuration is done using a seperate [administration module](https://github.co
      - VITE_TERMS_URL=terms_of_service_url
      - VITE_ABOUT_URL=about_url
      - VITE_ROLLBAR_ACCESS_TOKEN=access_token_from_rollbar
-     - VITE_ROLLBAR_ENVIRONMENT=production
+     - VITE_SYSTEM_ENVIRONMENT=production

package.json

@@ -16,6 +16,7 @@
     "eslint": "^8.57.0",
     "firebase": "^10.12.2",
     "nanoid": "^5.0.7",
+    "posthog-js": "^1.149.0",
     "react": "^18.3.1",
     "react-bootstrap": "^2.10.3",
     "react-bootstrap-range-slider": "^3.0.8",

src/components/middlewares/main.tsx

@@ -2,6 +2,7 @@ import { FC, ReactNode } from "react";
 import { Container } from "react-bootstrap";
 import VersionDisplay from "../navigation/versiondisplay";
 import EnvironmentIndicator from "../navigation/environment";
+const { VITE_SYSTEM_ENVIRONMENT } = import.meta.env;
 interface MainMiddlewareProps {
   children: ReactNode;
 }
@@ -15,9 +16,7 @@ const MainMiddleware: FC<MainMiddlewareProps> = ({ children }) => {
         minHeight: "95vh"
       }}
     >
-      <EnvironmentIndicator
-        environment={import.meta.env.VITE_ROLLBAR_ENVIRONMENT}
-      />
+      <EnvironmentIndicator environment={VITE_SYSTEM_ENVIRONMENT} />
       {children}
       <VersionDisplay />
     </Container>

src/components/middlewares/posthog.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { PostHogProvider } from "posthog-js/react";
+interface RollbarProviderProps {
+  children: ReactNode;
+}
+
+const { VITE_POSTHOG_KEY, VITE_POSTHOG_HOST } = import.meta.env;
+
+const PostHogMiddleware: FC<RollbarProviderProps> = ({ children }) => {
+  return (
+    <PostHogProvider
+      apiKey={VITE_POSTHOG_KEY}
+      options={{
+        api_host: VITE_POSTHOG_HOST,
+        person_profiles: "identified_only"
+      }}
+    >
+      {children}
+    </PostHogProvider>
+  );
+};
+
+export default PostHogMiddleware;

src/components/middlewares/rollbar.tsx

@@ -5,7 +5,7 @@ interface RollbarProviderProps {
   children: ReactNode;
 }
 
-const { VITE_ROLLBAR_ACCESS_TOKEN, VITE_ROLLBAR_ENVIRONMENT, VITE_VERSION } =
+const { VITE_ROLLBAR_ACCESS_TOKEN, VITE_SYSTEM_ENVIRONMENT, VITE_VERSION } =
   import.meta.env;
 
 const DEFEAULT_ROLLBAR_ENVIRONMENT = "staging";
@@ -16,7 +16,7 @@ const rollbarConfig = {
   captureUncaught: true,
   captureUnhandledRejections: true,
   code_version: VITE_VERSION,
-  environment: VITE_ROLLBAR_ENVIRONMENT || DEFEAULT_ROLLBAR_ENVIRONMENT,
+  environment: VITE_SYSTEM_ENVIRONMENT || DEFEAULT_ROLLBAR_ENVIRONMENT,
   client: {
     javascript: {
       source_map_enabled: true,

src/components/modal/assignments.tsx

@@ -16,6 +16,7 @@ import HelpButton from "../navigation/help";
 import { database } from "../../firebase";
 import { useEffect, useState } from "react";
 import { AssignmentModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const GetAssignments = NiceModal.create(
   ({
@@ -25,6 +26,7 @@ const GetAssignments = NiceModal.create(
     congregation
   }: AssignmentModalProps) => {
     const modal = useModal();
+    const posthog = usePostHog();
 
     const [currentAssignments, setCurrentAssignments] =
       useState<LinkSession[]>(assignments);
@@ -33,6 +35,10 @@ const GetAssignments = NiceModal.create(
       if (currentAssignments.length === 0) {
         modal.hide();
       }
+      posthog?.capture("get_assignments", {
+        assignmentType,
+        assignmentTerritory
+      });
     }, [currentAssignments]);
 
     const isAssignOrPersonalAssignments = assignmentType && assignmentTerritory;
@@ -105,6 +111,9 @@ const GetAssignments = NiceModal.create(
                       await pollingVoidFunction(() =>
                         remove(ref(database, `links/${congregation}/${linkid}`))
                       );
+                      posthog?.capture("delete_assignment", {
+                        linkid
+                      });
                       await triggerPostalCodeListeners(
                         congregation,
                         postal as string

src/components/modal/changeaddname.tsx

@@ -11,6 +11,7 @@ import ModalFooter from "../form/footer";
 import GenericInputField from "../form/input";
 import HelpButton from "../navigation/help";
 import { ChangeAddressNameModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const ChangeAddressName = NiceModal.create(
   ({
@@ -23,6 +24,7 @@ const ChangeAddressName = NiceModal.create(
     const [isSaving, setIsSaving] = useState(false);
     const modal = useModal();
     const rollbar = useRollbar();
+    const posthog = usePostHog();
 
     const handleUpdateBlockName = async (event: FormEvent<HTMLElement>) => {
       event.preventDefault();
@@ -34,6 +36,10 @@ const ChangeAddressName = NiceModal.create(
             addressName
           )
         );
+        posthog?.capture("change_address_name", {
+          mapId: postal,
+          name: addressName
+        });
         modal.hide();
       } catch (error) {
         errorHandler(error, rollbar);

src/components/modal/changegeolocation.tsx

@@ -13,6 +13,7 @@ import { AdvancedMarker, Map, MapMouseEvent } from "@vis.gl/react-google-maps";
 import { GmapAutocomplete } from "../utils/mapautocomplete";
 import { ControlPanel } from "../utils/mapinfopanel";
 import { MapCurrentTarget } from "../utils/mapcurrenttarget";
+import { usePostHog } from "posthog-js/react";
 
 const ChangeAddressGeolocation = NiceModal.create(
   ({
@@ -28,6 +29,7 @@ const ChangeAddressGeolocation = NiceModal.create(
     const [isLocating, setIsLocating] = useState(false);
     const modal = useModal();
     const rollbar = useRollbar();
+    const posthog = usePostHog();
 
     const handleUpdateGeoLocation = async (event: FormEvent<HTMLElement>) => {
       event.preventDefault();
@@ -43,6 +45,10 @@ const ChangeAddressGeolocation = NiceModal.create(
               addressLocation
             )
           );
+          posthog?.capture("change_address_geolocation", {
+            mapId: postalCode,
+            coordinates: addressLocation
+          });
         }
         modal.resolve(addressLocation);
         modal.hide();

src/components/modal/changepassword.tsx

@@ -17,6 +17,7 @@ import errorMessage from "../../utils/helpers/errormsg";
 import ModalFooter from "../form/footer";
 import PasswordChecklist from "react-password-checklist";
 import { ChangePasswordModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const ChangePassword = NiceModal.create(
   ({ user, userAccessLevel }: ChangePasswordModalProps) => {
@@ -27,6 +28,7 @@ const ChangePassword = NiceModal.create(
     const [confirmPassword, setConfirmPassword] = useState("");
     const [isChangePasswordOk, setIsChangePasswordOk] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    const posthog = usePostHog();
 
     const handleChangePassword = async (
       event: React.FormEvent<HTMLFormElement>
@@ -40,6 +42,7 @@ const ChangePassword = NiceModal.create(
           EmailAuthProvider.credential(user.email || "", existingPassword)
         );
         await updatePassword(user, password);
+        posthog?.capture("change_password", { email: user.email });
         alert("Password updated.");
         modal.hide();
       } catch (error) {

src/components/modal/changepostalcd.tsx

@@ -12,6 +12,7 @@ import GenericInputField from "../form/input";
 import HelpButton from "../navigation/help";
 import { database } from "../../firebase";
 import { ChangeAddressPostalCodeModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const ChangeAddressPostalCode = NiceModal.create(
   ({
@@ -28,6 +29,7 @@ const ChangeAddressPostalCode = NiceModal.create(
     const modalDescription = requiresPostalCode
       ? "Address Postal Code"
       : "Map Number";
+    const posthog = usePostHog();
 
     const getTerritoryAddress = async (territoryCode: string) => {
       return await pollingQueryFunction(() =>
@@ -111,6 +113,10 @@ const ChangeAddressPostalCode = NiceModal.create(
         await pollingVoidFunction(() =>
           deleteBlock(congregation, postalCode, "", false)
         );
+        posthog?.capture("change_address_map_id", {
+          mapId: postalCode,
+          newMapId: newPostalCode
+        });
         modal.resolve();
         modal.hide();
       } catch (error) {

src/components/modal/changeterritorycd.tsx

@@ -12,6 +12,7 @@ import GenericInputField from "../form/input";
 import HelpButton from "../navigation/help";
 import IsValidTerritoryCode from "../../utils/helpers/checkterritorycd";
 import { ChangeTerritoryCodeModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const ChangeTerritoryCode = NiceModal.create(
   ({
@@ -23,6 +24,7 @@ const ChangeTerritoryCode = NiceModal.create(
     const [isSaving, setIsSaving] = useState(false);
     const modal = useModal();
     const rollbar = useRollbar();
+    const posthog = usePostHog();
 
     const handleUpdateTerritoryCode = async (event: FormEvent<HTMLElement>) => {
       event.preventDefault();
@@ -46,6 +48,10 @@ const ChangeTerritoryCode = NiceModal.create(
           set(newCodeRef, oldTerritoryData.val())
         );
         await pollingVoidFunction(() => remove(oldCodeRef));
+        posthog?.capture("change_territory_code", {
+          oldTerritoryCode: territoryCode,
+          newTerritoryCode
+        });
         modal.resolve(newTerritoryCode);
         modal.hide();
       } catch (error) {

src/components/modal/changeterritoryname.tsx

@@ -11,6 +11,7 @@ import ModalFooter from "../form/footer";
 import GenericInputField from "../form/input";
 import HelpButton from "../navigation/help";
 import { ChangeTerritoryNameModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const ChangeTerritoryName = NiceModal.create(
   ({
@@ -23,6 +24,7 @@ const ChangeTerritoryName = NiceModal.create(
     const [isSaving, setIsSaving] = useState(false);
     const modal = useModal();
     const rollbar = useRollbar();
+    const posthog = usePostHog();
 
     const handleUpdateTerritoryName = async (event: FormEvent<HTMLElement>) => {
       event.preventDefault();
@@ -37,6 +39,10 @@ const ChangeTerritoryName = NiceModal.create(
             territoryName
           )
         );
+        posthog?.capture("change_territory_name", {
+          territoryCode,
+          name: territoryName
+        });
         modal.resolve(territoryName);
         modal.hide();
       } catch (error) {

src/components/modal/congoptions.tsx

@@ -40,6 +40,7 @@ import GenericInputField from "../form/input";
 import ModalSubmitButton from "../form/submit";
 import { confirmAlert } from "react-confirm-alert";
 import { flushSync } from "react-dom";
+import { usePostHog } from "posthog-js/react";
 
 const UpdateCongregationOptions = NiceModal.create(
   ({ currentCongregation }: UpdateCongregationOptionsModalProps) => {
@@ -48,6 +49,7 @@ const UpdateCongregationOptions = NiceModal.create(
     const [isSaving, setIsSaving] = useState<boolean>(false);
     const [deletedOptions, setDeletedOptions] = useState<Array<string>>([]);
     const [options, setOptions] = useState<Array<HHOptionProps>>([]);
+    const posthog = usePostHog();
     const handleSubmitCongOptions = async (
       event: FormEvent<HTMLFormElement>
     ) => {
@@ -147,6 +149,9 @@ const UpdateCongregationOptions = NiceModal.create(
             optionsList
           )
         );
+        posthog?.capture("update_congregation_options", {
+          options: optionsList
+        });
         alert("Congregation household options updated.");
         window.location.reload();
       } catch (error) {

src/components/modal/congsettings.tsx

@@ -17,6 +17,7 @@ import HelpButton from "../navigation/help";
 import { database } from "../../firebase";
 import ModalFooter from "../form/footer";
 import { UpdateCongregationSettingsModalProps } from "../../utils/interface";
+import { usePostHog } from "posthog-js/react";
 
 const UpdateCongregationSettings = NiceModal.create(
   ({
@@ -28,6 +29,7 @@ const UpdateCongregationSettings = NiceModal.create(
   }: UpdateCongregationSettingsModalProps) => {
     const modal = useModal();
     const rollbar = useRollbar();
+    const posthog = usePostHog();
     const [maxTries, setMaxTries] = useState(currentMaxTries);
     const [defaultExpiryHrs, setDefaultExpiryHrs] = useState(
       currentDefaultExpiryHrs
@@ -57,6 +59,12 @@ const UpdateCongregationSettings = NiceModal.create(
             }
           )
         );
+        posthog?.capture("update_congregation_settings", {
+          name: name,
+          expiryHours: defaultExpiryHrs,
+          maxTries: maxTries,
+          isMultipleSelection: isMultipleSelection
+        });
         alert("Congregation settings updated.");
         window.location.reload();
       } catch (error) {