From 862d4abbe3007c1d5cf39da95c9d25662cf74808 Mon Sep 17 00:00:00 2001
From: "Simon.Emanuelsson" <simon.emanuelsson@scandichotels.com>
Date: Fri, 2 May 2025 08:12:33 +0000
Subject: [PATCH] Merged in feat/SW-2202 (pull request #1909)

feat: trigger validation on form upon autofill in enter details

* feat: trigger validation on form upon autofill in enter details


Approved-by: Niclas Edenvin
---
 .../Details/RoomOne/AutoFillDetector.tsx      | 31 +++++++++++++++++++
 .../EnterDetails/Details/RoomOne/index.tsx    |  2 ++
 2 files changed, 33 insertions(+)
 create mode 100644 apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx
new file mode 100644
index 000000000..7024fe665
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/AutoFillDetector.tsx
@@ -0,0 +1,31 @@
+"use client"
+import { useEffect } from "react"
+import { useFormContext } from "react-hook-form"
+
+export default function AutoFillDetector() {
+  const {
+    formState: { dirtyFields, isDirty, touchedFields },
+    trigger,
+    watch,
+  } = useFormContext()
+
+  useEffect(() => {
+    const dirtyFieldKeys = Object.keys(dirtyFields)
+    const touchedFieldKeys = Object.keys(touchedFields)
+    const hasDirtyUnTouchedFields = dirtyFieldKeys.some(
+      (field) => !touchedFieldKeys.includes(field)
+    )
+    const subscription = watch((_, field) => {
+      if (!field.type) {
+        if (isDirty && hasDirtyUnTouchedFields) {
+          trigger(field.name)
+          trigger("countryCode")
+        }
+      }
+    })
+
+    return () => subscription.unsubscribe()
+  }, [dirtyFields, isDirty, touchedFields, trigger, watch])
+
+  return null
+}
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
index 88d1ebd0b..4250f8186 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
@@ -11,6 +11,7 @@ import Phone from "@/components/TempDesignSystem/Form/Phone"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import { useRoomContext } from "@/contexts/Details/Room"
 
+import AutoFillDetector from "./AutoFillDetector"
 import JoinScandicFriendsCard from "./JoinScandicFriendsCard"
 import { guestDetailsSchema, signedInDetailsSchema } from "./schema"
 import Signup from "./Signup"
@@ -150,6 +151,7 @@ export default function Details({ user }: DetailsProps) {
             registerOptions={{ required: true, onBlur: updateDetailsStore }}
           />
         </div>
+        <AutoFillDetector />
       </form>
     </FormProvider>
   )