fix: track user on page load

components/Current/Header/LoginButton.tsx

@@ -1,30 +1,53 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import { useIntl } from "react-intl"
+import { PropsWithChildren, useEffect } from "react"
 
 import { login } from "@/constants/routes/handleAuth"
 
 import Link from "@/components/TempDesignSystem/Link"
+import { LinkProps } from "@/components/TempDesignSystem/Link/link"
+import { trackLoginClick } from "@/utils/tracking"
 
-import type { TrackableLoginId } from "@/types/components/tracking"
+import { TrackingPosition } from "@/types/components/tracking"
 import { LangParams } from "@/types/params"
 
 export default function LoginButton({
   className,
+  position,
   trackingId,
   lang,
-}: LangParams & { className: string; trackingId: TrackableLoginId }) {
-  const { formatMessage } = useIntl()
+  children,
+  color = "black",
+}: PropsWithChildren<
+  LangParams & {
+    className: string
+    trackingId: string
+    position: TrackingPosition
+    color?: LinkProps["color"]
+  }
+>) {
   const pathName = usePathname()
 
+  useEffect(() => {
+    document
+      .getElementById(trackingId)
+      ?.addEventListener("click", () => trackLoginClick(position))
+    return () => {
+      document
+        .getElementById(trackingId)
+        ?.removeEventListener("click", () => trackLoginClick(position))
+    }
+  }, [position, trackingId])
+
   return (
     <Link
-      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
       className={className}
       id={trackingId}
+      color={color}
+      href={`${login[lang]}?redirectTo=${encodeURIComponent(`/${lang}${pathName}`)}`}
     >
-      {formatMessage({ id: "Log in" })}
+      {children}
     </Link>
   )
 }