Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/tracking/lib/useFormTracking.ts

@@ -0,0 +1,78 @@
+"use client"
+
+import { useCallback, useEffect, useRef, useState } from "react"
+import {
+  type Control,
+  type FieldValues,
+  useFormState,
+  type UseFromSubscribe,
+} from "react-hook-form"
+
+import {
+  type FormType,
+  trackFormAbandonment,
+  trackFormCompletion,
+  trackFormInputStarted,
+} from "./form"
+
+export function useFormTracking<T extends FieldValues>(
+  formType: FormType,
+  subscribe: UseFromSubscribe<T>,
+  control: Control<T>,
+  nameSuffix: string = ""
+) {
+  const [formStarted, setFormStarted] = useState(false)
+  const lastAccessedField = useRef<string | undefined>(undefined)
+  const formState = useFormState({ control })
+
+  useEffect(() => {
+    const unsubscribe = subscribe({
+      formState: { dirtyFields: true },
+      callback: (data) => {
+        if ("name" in data) {
+          lastAccessedField.current = data.name as string
+        }
+
+        if (!formStarted) {
+          trackFormInputStarted(formType, nameSuffix)
+          setFormStarted(true)
+        }
+      },
+    })
+    return () => unsubscribe()
+  }, [subscribe, formType, nameSuffix, formStarted])
+
+  useEffect(() => {
+    if (!formStarted || !lastAccessedField.current || formState.isValid) return
+
+    const lastField = lastAccessedField.current
+
+    function handleBeforeUnload() {
+      trackFormAbandonment(formType, lastField, nameSuffix)
+    }
+
+    function handleVisibilityChange() {
+      if (document.visibilityState === "hidden") {
+        trackFormAbandonment(formType, lastField, nameSuffix)
+      }
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload)
+    window.addEventListener("visibilitychange", handleVisibilityChange)
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+      window.removeEventListener("visibilitychange", handleVisibilityChange)
+    }
+  }, [formStarted, formType, nameSuffix, formState.isValid])
+
+  const trackFormSubmit = useCallback(() => {
+    if (formState.isValid) {
+      trackFormCompletion(formType, nameSuffix)
+    }
+  }, [formType, nameSuffix, formState.isValid])
+
+  return {
+    trackFormSubmit,
+  }
+}