Merged in chore/SW-3379-move-useformtracking-to-common (pull request #2754)

chore(SW-3379): Moved useFormTracking to common

* chore(SW-3379): Moved useFormTracking to common


Approved-by: Anton Gunnarsson

packages/common/package.json

@@ -38,6 +38,7 @@
     "./tracking/base": "./tracking/base.ts",
     "./tracking/pageview": "./tracking/pageview.ts",
     "./tracking/types": "./tracking/types.ts",
+    "./tracking/useFormTracking": "./tracking/useFormTracking.ts",
     "./tracking/useTrackHardNavigation": "./tracking/useTrackHardNavigation.ts",
     "./tracking/useTrackSoftNavigation": "./tracking/useTrackSoftNavigation.ts",
     "./utils/chunk": "./utils/chunk.ts",

packages/common/tracking/form.ts

@@ -0,0 +1,103 @@
+import { trackEvent } from "./base"
+
+export type FormType = "checkout" | "signup"
+
+export function trackFormInputStarted(type: FormType, nameSuffix?: string) {
+  if (type === "checkout") {
+    trackEvent({
+      event: "formStart",
+      form: {
+        action: "checkout form start",
+        name: "checkout enter detail" + nameSuffix,
+        type: type,
+      },
+    })
+  } else if (type === "signup") {
+    trackEvent({
+      event: "formStart",
+      form: {
+        action: "signup form start",
+        name: "member registration" + nameSuffix,
+        type: type,
+      },
+    })
+  }
+}
+
+export function trackFormAbandonment(
+  type: FormType,
+  lastAccessedField: string,
+  nameSuffix?: string
+) {
+  if (type === "checkout") {
+    trackEvent({
+      event: "formAbandonment",
+      form: {
+        action: "checkout form abandonment",
+        name: "checkout enter detail" + nameSuffix,
+        type: type,
+        lastAccessedField,
+      },
+    })
+  } else if (type === "signup") {
+    trackEvent({
+      event: "formAbandonment",
+      form: {
+        action: "signup form abandonment",
+        name: "member registration" + nameSuffix,
+        type: type,
+        lastAccessedField,
+      },
+    })
+  }
+}
+
+export function trackFormValidationError(
+  type: FormType,
+  errorMessage: string,
+  nameSuffix?: string
+) {
+  if (type === "checkout") {
+    trackEvent({
+      event: "formError",
+      form: {
+        action: "checkout form error",
+        name: "checkout enter detail" + nameSuffix,
+        type: type,
+        errorMessage,
+      },
+    })
+  } else if (type === "signup") {
+    trackEvent({
+      event: "formError",
+      form: {
+        action: "signup form error",
+        name: "member registration" + nameSuffix,
+        type: type,
+        errorMessage,
+      },
+    })
+  }
+}
+
+export function trackFormCompletion(type: FormType, nameSuffix?: string) {
+  if (type === "checkout") {
+    trackEvent({
+      event: "formCompletion",
+      form: {
+        action: "checkout form completion",
+        name: "checkout enter detail" + nameSuffix,
+        type: type,
+      },
+    })
+  } else if (type === "signup") {
+    trackEvent({
+      event: "formCompletion",
+      form: {
+        action: "signup form completion",
+        name: "member registration" + nameSuffix,
+        type: type,
+      },
+    })
+  }
+}

packages/common/tracking/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,
+  }
+}