From f3d580797b724a5d17a9c01acddb5ec80363d1a0 Mon Sep 17 00:00:00 2001
From: Paul Bui-Quang <paul.bui-quang@aphp.fr>
Date: Tue, 9 Jul 2024 14:15:33 +0200
Subject: [PATCH] feat: add clarity tracking code

---
 docker-entrypoint.sh                   |  2 ++
 index.html                             | 11 +++++++++++
 src/components/Routes/PrivateRoute.tsx |  9 +++++++++
 3 files changed, 22 insertions(+)

diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index 16d6ed40e..5a73bc452 100755
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -85,6 +85,8 @@ sed -i "s@{VITE_ODD_QUESTIONNAIRE}@$VITE_ODD_QUESTIONNAIRE@g" /app/build/assets/
 sed -i "s@{VITE_JTOOL_USERS}@$VITE_JTOOL_USERS@g" /app/build/assets/*.js
 sed -i "s@{VITE_ODD_MAP}@$VITE_ODD_MAP@g" /app/build/assets/*.js
 
+sed -i "s@{VITE_CLARITY_APP_ID}@$VITE_CLARITY_APP_ID@g" /app/build/index.html
+
 # Restart nginx to apply changes
 service nginx restart
 
diff --git a/index.html b/index.html
index 8e93ab284..ad2f70e79 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,17 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <link rel="stylesheet" href="/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+    <script type="text/javascript">
+      var undefinedClarityAppId = "{" + "VITE_CLARITY_APP_ID" + "}"
+      var clarityAppId = "{VITE_CLARITY_APP_ID}"
+      if (clarityAppId !== "" && clarityAppId !== undefinedClarityAppId) {
+        (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+        })(window, document, "clarity", "script", clarityAppId);
+      }
+    </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/components/Routes/PrivateRoute.tsx b/src/components/Routes/PrivateRoute.tsx
index c1fbeea3f..0b09f9095 100644
--- a/src/components/Routes/PrivateRoute.tsx
+++ b/src/components/Routes/PrivateRoute.tsx
@@ -10,6 +10,9 @@ import { ACCESS_TOKEN } from '../../constants'
 import { useAppSelector, useAppDispatch } from '../../state'
 import { login } from '../../state/me'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+declare const window: any
+
 const ME = gql`
   query me {
     me {
@@ -43,6 +46,12 @@ const PrivateRoute: React.FC = () => {
     }
   }, [me, data, dispatch])
 
+  useEffect(() => {
+    if (window.clarity && me?.id) {
+      window.clarity('identify', me?.id)
+    }
+  }, [me?.id])
+
   if (!me || (!me && !authToken) || error || (authToken && !loading && data && !data.me)) {
     if (allowRedirect === true) return <Navigate to="/" replace />