Merged in fix/SW-3115-form-tracking-changes (pull request #2470)

fix(SW-3115): add form complete tracking and removed input error tracking

* fix(SW-3115): add form complete tracking and removed input error tracking


Approved-by: Bianca Widstam

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -96,11 +96,12 @@ export default function SignupForm({ title }: SignUpFormProps) {
 
   const { control, subscribe } = methods
 
-  useFormTracking("signup", subscribe, control)
+  const { trackFormSubmit } = useFormTracking("signup", subscribe, control)
 
   async function onSubmit(data: SignUpSchema) {
     const phoneNumber = formatPhoneNumber(data.phoneNumber, data.phoneNumberCC)
     signup.mutate({ ...data, phoneNumber, language: lang })
+    trackFormSubmit()
   }
 
   return (

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/index.tsx

@@ -89,11 +89,20 @@ export default function Details() {
     watch,
   } = methods
 
-  useFormTracking("checkout", subscribe, control, ` - room ${roomNr}`)
+  const { trackFormSubmit } = useFormTracking(
+    "checkout",
+    subscribe,
+    control,
+    ` - room ${roomNr}`
+  )
 
   useEffect(() => {
-    addPreSubmitCallback(`${idx}-details`, trigger)
-  }, [addPreSubmitCallback, idx, trigger])
+    function callback() {
+      trigger()
+      trackFormSubmit()
+    }
+    addPreSubmitCallback(`${idx}-details`, callback)
+  }, [addPreSubmitCallback, idx, trigger, trackFormSubmit])
 
   const updateDetailsStore = useCallback(() => {
     if (isValid) {

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx

@@ -85,7 +85,7 @@ export default function Details({ user }: DetailsProps) {
     watch,
   } = methods
 
-  useFormTracking(
+  const { trackFormSubmit } = useFormTracking(
     "checkout",
     subscribe,
     control,
@@ -93,8 +93,12 @@ export default function Details({ user }: DetailsProps) {
   )
 
   useEffect(() => {
-    addPreSubmitCallback(`${idx}-details`, trigger)
-  }, [addPreSubmitCallback, idx, trigger])
+    function callback() {
+      trigger()
+      trackFormSubmit()
+    }
+    addPreSubmitCallback(`${idx}-details`, callback)
+  }, [addPreSubmitCallback, idx, trigger, trackFormSubmit])
 
   const onSubmit = useCallback(
     (values: DetailsSchema) => {

apps/scandic-web/components/TrackingSDK/hooks.ts

@@ -1,10 +1,15 @@
 "use client"
-import isEqual from "fast-deep-equal"
+
 import { usePathname } from "next/navigation"
-import { startTransition, useEffect, useRef, useState } from "react"
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
 import {
   type Control,
-  type FieldErrors,
   type FieldValues,
   useFormState,
   type UseFromSubscribe,
@@ -21,8 +26,8 @@ import { createSDKPageObject, trackPageView } from "@/utils/tracking"
 import {
   type FormType,
   trackFormAbandonment,
+  trackFormCompletion,
   trackFormInputStarted,
-  trackFormValidationError,
 } from "@/utils/tracking/form"
 
 import type {
@@ -284,38 +289,10 @@ export function useFormTracking<T extends FieldValues>(
   const [formStarted, setFormStarted] = useState(false)
   const lastAccessedField = useRef<string | undefined>(undefined)
   const formState = useFormState({ control })
-  const previousErrors = useRef<FieldErrors<T>>({})
-
-  useEffect(() => {
-    const errors = formState.errors
-    const prevErrors = previousErrors.current
-
-    const isNewErrors = !isEqual(errors, prevErrors)
-    if (Object.keys(errors).length && isNewErrors) {
-      const errorString = Object.values(errors)
-        .map((err) => {
-          if (err && "message" in err) {
-            return err.message
-          }
-          const nested = Object.values(err ?? {}).find(
-            (val) => val && typeof val === "object" && "message" in val
-          )
-          if (nested) {
-            return nested.message
-          }
-          return undefined
-        })
-        .filter(Boolean)
-        .join("|")
-
-      trackFormValidationError(formType, errorString, nameSuffix)
-      previousErrors.current = { ...errors }
-    }
-  }, [formType, formState, nameSuffix])
 
   useEffect(() => {
     const unsubscribe = subscribe({
-      formState: { touchedFields: true },
+      formState: { dirtyFields: true },
       callback: (data) => {
         if ("name" in data) {
           lastAccessedField.current = data.name as string
@@ -353,4 +330,14 @@ export function useFormTracking<T extends FieldValues>(
       window.removeEventListener("visibilitychange", handleVisibilityChange)
     }
   }, [formStarted, formType, nameSuffix, formState.isValid])
+
+  const trackFormSubmit = useCallback(() => {
+    if (formState.isValid) {
+      trackFormCompletion(formType, nameSuffix)
+    }
+  }, [formType, nameSuffix, formState.isValid])
+
+  return {
+    trackFormSubmit,
+  }
 }

apps/scandic-web/utils/tracking/form.ts

@@ -79,3 +79,25 @@ export function trackFormValidationError(
     })
   }
 }
+
+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,
+      },
+    })
+  }
+}