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

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

@@ -7,6 +7,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { logger } from "@scandic-hotels/common/logger"
+import { useFormTracking } from "@scandic-hotels/common/tracking/useFormTracking"
 import {
   formatPhoneNumber,
   getDefaultCountryFromLang,
@@ -33,7 +34,6 @@ import {
 
 import Input from "@/components/TempDesignSystem/Form/Input"
 import PasswordInput from "@/components/TempDesignSystem/Form/PasswordInput"
-import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import useLang from "@/hooks/useLang"
 import { getFormattedCountryList } from "@/utils/countries"
 import { getErrorMessage } from "@/utils/getErrorMessage"

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useFormTracking } from "@scandic-hotels/common/tracking/useFormTracking"
 import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
@@ -13,7 +14,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useFormTracking } from "@scandic-hotels/common/tracking/useFormTracking"
 import { getDefaultCountryFromLang } from "@scandic-hotels/common/utils/phone"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
@@ -13,7 +14,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import SpecialRequests from "@/components/HotelReservation/EnterDetails/Details/SpecialRequests"
 import Input from "@/components/TempDesignSystem/Form/Input"
-import { useFormTracking } from "@/components/TrackingSDK/useFormTracking"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
 import usePhoneNumberParsing from "@/hooks/usePhoneNumberParsing"

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

@@ -1,78 +0,0 @@
-"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 "@/utils/tracking/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,
-  }
-}

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

@@ -1,103 +0,0 @@
-import { trackEvent } from "@scandic-hotels/common/tracking/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,
-      },
-    })
-  }
-}