Merged in fix/SW-2679-tracking-signup-details-forms (pull request #2236)

feat(SW-2679): Added form tracking for checkout and signup

* feat(SW-2679): Added form tracking for checkout and signup

* fix(SW-2679): fixes from review


Approved-by: Michael Zetterberg

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

@@ -12,6 +12,7 @@ import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
 
 import MemberPriceModal from "../MemberPriceModal"
@@ -84,11 +85,15 @@ export default function Details() {
   })
 
   const {
-    formState: { isValid },
     handleSubmit,
     trigger,
+    control,
+    subscribe,
+    formState: { isValid },
   } = methods
 
+  useFormTracking("checkout", subscribe, control, ` - room ${roomNr}`)
+
   useEffect(() => {
     addPreSubmitCallback(`${idx}-details`, trigger)
   }, [addPreSubmitCallback, idx, trigger])

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

@@ -12,6 +12,7 @@ import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import { useFormTracking } from "@/components/TrackingSDK/hooks"
 import { useRoomContext } from "@/contexts/Details/Room"
 
 import MemberPriceModal from "../MemberPriceModal"
@@ -30,7 +31,8 @@ const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
 
-  const { addPreSubmitCallback } = useEnterDetailsStore((state) => ({
+  const { lastRoom, addPreSubmitCallback } = useEnterDetailsStore((state) => ({
+    lastRoom: state.lastRoom,
     addPreSubmitCallback: state.actions.addPreSubmitCallback,
   }))
 
@@ -77,11 +79,14 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
-  const {
-    formState: { isValid },
-    handleSubmit,
-    trigger,
-  } = methods
+  const { formState, handleSubmit, trigger, control, subscribe } = methods
+
+  useFormTracking(
+    "checkout",
+    subscribe,
+    control,
+    lastRoom === idx ? "" : " - room 1"
+  )
 
   useEffect(() => {
     addPreSubmitCallback(`${idx}-details`, trigger)
@@ -95,12 +100,12 @@ export default function Details({ user }: DetailsProps) {
   )
 
   const updateDetailsStore = useCallback(() => {
-    if (isValid) {
+    if (formState.isValid) {
       handleSubmit(onSubmit)()
     } else {
       setIncomplete()
     }
-  }, [handleSubmit, isValid, onSubmit, setIncomplete])
+  }, [handleSubmit, formState.isValid, onSubmit, setIncomplete])
 
   useEffect(updateDetailsStore, [updateDetailsStore])