fix: SW-1102 show error on invalid entry

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -27,7 +27,8 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 const name = "search"
 export default function Search({ locations }: SearchProps) {
-  const { register, setValue, trigger } = useFormContext<BookingWidgetSchema>()
+  const { register, setValue, trigger, unregister } =
+    useFormContext<BookingWidgetSchema>()
   const intl = useIntl()
   const value = useWatch({ name })
   const [state, dispatch] = useReducer(
@@ -135,6 +136,27 @@ export default function Search({ locations }: SearchProps) {
     }
   }, [dispatch])
 
+  const stayType = state.searchData?.type === "cities" ? "city" : "hotel"
+  const stayValue =
+    (value === state.searchData?.name &&
+      ((state.searchData?.type === "cities" && state.searchData?.name) ||
+        state.searchData?.id)) ||
+    ""
+
+  useEffect(() => {
+    if (stayType === "city") {
+      unregister("hotel")
+      setValue(stayType, stayValue, {
+        shouldValidate: true,
+      })
+    } else {
+      unregister("city")
+      setValue(stayType, Number(stayValue), {
+        shouldValidate: true,
+      })
+    }
+  }, [stayType, stayValue, unregister, setValue])
+
   return (
     <Downshift
       initialSelectedItem={state.searchData}
@@ -155,6 +177,10 @@ export default function Search({ locations }: SearchProps) {
         openMenu,
       }) => (
         <div className={styles.container}>
+          {value ? (
+            // Adding hidden input to define hotel or city based on destination selection for basic form submit.
+            <input type="hidden" {...register(stayType)} />
+          ) : null}
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
             <Caption
               type="bold"