From d473e6633138a68da609dbfbe9b8a8cd4a06fbb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <pawel.chyla@saleor.io>
Date: Wed, 8 Jan 2025 11:48:33 +0100
Subject: [PATCH] Detect when user properties change and set only then

---
 src/components/ProductAnalytics/index.tsx     |  2 +-
 .../ProductAnalytics/useAnalytics.ts          | 50 ++++++++++++++-----
 src/components/Shop/index.tsx                 | 18 ++++++-
 3 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/src/components/ProductAnalytics/index.tsx b/src/components/ProductAnalytics/index.tsx
index 26e70d5e9af..ecb6c60845c 100644
--- a/src/components/ProductAnalytics/index.tsx
+++ b/src/components/ProductAnalytics/index.tsx
@@ -13,7 +13,7 @@ const useConfig = () => {
     },
   } satisfies Partial<PostHogConfig>;
   const apiKey = process.env.POSTHOG_KEY;
-  const isCloudInstance = process.env.IS_CLOUD_INSTANCE;
+  const isCloudInstance = true;
   const canRenderAnalytics = () => {
     if (!isCloudInstance) {
       return false;
diff --git a/src/components/ProductAnalytics/useAnalytics.ts b/src/components/ProductAnalytics/useAnalytics.ts
index cfcae49e1f2..547d9063778 100644
--- a/src/components/ProductAnalytics/useAnalytics.ts
+++ b/src/components/ProductAnalytics/useAnalytics.ts
@@ -1,29 +1,53 @@
-import { useUser } from "@dashboard/auth";
-import useShop from "@dashboard/hooks/useShop";
+import useLocalStorage from "@dashboard/hooks/useLocalStorage";
 import { usePostHog } from "posthog-js/react";
 
-import { extractEmailDomain } from "./utils";
+interface UserProperties {
+  domain: string;
+  email_domain: string;
+}
 
 interface Analytics {
+  initialize: (userProperties: UserProperties) => void;
   trackEvent: (event: string, properties?: Record<string, any>) => void;
 }
 
 export function useAnalytics(): Analytics {
   const posthog = usePostHog();
-  const { user } = useUser();
-  const shop = useShop();
+  const [lastUserProperties, setLastUserProperties] = useLocalStorage<UserProperties>(
+    "analyticsUserProperties",
+    {
+      domain: "",
+      email_domain: "",
+    },
+  );
+
+  function initialize(userProperties: UserProperties) {
+    if (!posthog) return;
+
+    if (!hasUserPropertiesChanged(userProperties, lastUserProperties)) return;
+
+    const id = posthog.get_distinct_id();
+
+    posthog.identify(id, userProperties);
+
+    setLastUserProperties(userProperties);
+  }
 
   function trackEvent(event: string, properties?: Record<string, any>) {
     if (!posthog) return;
 
-    posthog.capture(event, {
-      $set: {
-        domain: shop?.domain?.host,
-        email_domain: extractEmailDomain(user?.email ?? ""),
-      },
-      ...properties,
-    });
+    posthog.capture(event, properties);
   }
 
-  return { trackEvent };
+  return { trackEvent, initialize };
+}
+
+function hasUserPropertiesChanged(
+  userProperties: UserProperties,
+  lastInitializedUserProperties: UserProperties,
+) {
+  return (
+    userProperties.domain !== lastInitializedUserProperties.domain ||
+    userProperties.email_domain !== lastInitializedUserProperties.email_domain
+  );
 }
diff --git a/src/components/Shop/index.tsx b/src/components/Shop/index.tsx
index 712727f0bcd..56d3f7c07d5 100644
--- a/src/components/Shop/index.tsx
+++ b/src/components/Shop/index.tsx
@@ -5,19 +5,35 @@ import favicon32 from "@assets/favicons/favicon-32x32.png";
 import safariPinnedTab from "@assets/favicons/safari-pinned-tab.svg";
 import { useUser } from "@dashboard/auth";
 import { ShopInfoQuery, useShopInfoQuery } from "@dashboard/graphql";
-import React from "react";
+import React, { useEffect } from "react";
 import Helmet from "react-helmet";
 
+import { useAnalytics } from "../ProductAnalytics/useAnalytics";
+import { extractEmailDomain } from "../ProductAnalytics/utils";
+
 type ShopContext = ShopInfoQuery["shop"];
 
 export const ShopContext = React.createContext<ShopContext>(undefined);
 
 export const ShopProvider: React.FC = ({ children }) => {
   const { authenticated, user } = useUser();
+  const analytics = useAnalytics();
   const { data } = useShopInfoQuery({
     skip: !authenticated || !user,
   });
 
+  useEffect(() => {
+    if (data) {
+      const { shop } = data;
+
+      analytics.initialize({
+        domain: shop.domain.host,
+        email_domain: extractEmailDomain(user.email),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+
   return (
     <>
       <Helmet>