fix(sw-350): Fixed styling issues and error modal issue

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

@@ -29,17 +29,23 @@ export default function SearchList({
 }: SearchListProps) {
   const intl = useIntl()
   const [hasMounted, setHasMounted] = useState(false)
+  const [isFormSubmitted, setIsFormSubmitted] = useState(false)
   const {
     clearErrors,
-    formState: { errors },
+    formState: { errors, isSubmitted },
   } = useFormContext()
   const searchError = errors["search"]
 
+  useEffect(() => {
+    setIsFormSubmitted(isSubmitted) // Update form submission state
+  }, [isSubmitted])
+
   useEffect(() => {
     let timeoutID: ReturnType<typeof setTimeout> | null = null
     if (searchError && searchError.message === "Required") {
       timeoutID = setTimeout(() => {
         clearErrors("search")
+        setIsFormSubmitted(false)
         // magic number originates from animation
         // 5000ms delay + 120ms exectuion
       }, 5120)
@@ -60,7 +66,7 @@ export default function SearchList({
     return null
   }
 
-  if (searchError) {
+  if (searchError && isFormSubmitted) {
     if (typeof searchError.message === "string") {
       if (!isOpen) {
         if (searchError.message === "Required") {

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

@@ -128,7 +128,11 @@ export default function Search({ locations }: SearchProps) {
       }) => (
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
-            <Caption color={isOpen ? "uiTextActive" : "red"} asChild>
+            <Caption
+              type="bold"
+              color={isOpen ? "uiTextActive" : "red"}
+              asChild
+            >
               <span>
                 {state.searchData?.type === "hotels"
                   ? state.searchData?.relationships?.city?.name