chore: Cleanup booking widget with types and other minor issues

apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -27,15 +27,13 @@ import {
   type SetStorageData,
 } from "@/types/components/form/bookingwidget"
 import type { SearchHistoryItem, SearchProps } from "@/types/components/search"
-import type { Location, Locations } from "@/types/trpc/routers/hotel/locations"
-
-const name = "search"
+import type { Location } from "@/types/trpc/routers/hotel/locations"
 
 export default function Search({ locations, handlePressEnter }: SearchProps) {
   const { register, setValue, unregister, getValues } =
     useFormContext<BookingWidgetSchema>()
   const intl = useIntl()
-  const value = useWatch({ name })
+  const value = useWatch<BookingWidgetSchema, "search">({ name: "search" })
   const locationString = getValues("location")
   const location =
     locationString && isValidJson(decodeURIComponent(locationString))
@@ -75,7 +73,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
     evt: FormEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>
   ) {
     const newValue = evt.currentTarget.value
-    setValue(name, newValue)
+    setValue("search", newValue)
     dispatchInputValue(value)
   }
 
@@ -97,7 +95,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       const stringified = JSON.stringify(selectedItem)
       setValue("location", encodeURIComponent(stringified))
       sessionStorage.setItem(sessionStorageKey, stringified)
-      setValue(name, selectedItem.name)
+      setValue("search", selectedItem.name)
       const newHistoryItem: SearchHistoryItem = {
         type: selectedItem.type,
         id: selectedItem.id,
@@ -114,7 +112,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
       const searchHistory = [newHistoryItem, ...oldHistoryItems]
       localStorage.setItem(localStorageKey, JSON.stringify(searchHistory))
 
-      const enhancedSearchHistory: Locations = [
+      const enhancedSearchHistory: Location[] = [
         ...getEnhancedSearchHistory([newHistoryItem], locations),
         ...oldSearchHistoryWithoutTheNew,
       ]
@@ -213,7 +211,10 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
             // 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}>
+          <label
+            {...getLabelProps({ htmlFor: "search" })}
+            className={styles.label}
+          >
             <Caption
               type="bold"
               color={isOpen ? "uiTextActive" : "red"}
@@ -226,7 +227,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
             <label className={styles.searchInput}>
               <Input
                 {...getInputProps({
-                  id: name,
+                  id: "search",
                   onFocus(evt) {
                     handleOnFocus(evt)
                     openMenu()
@@ -234,7 +235,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
                   placeholder: intl.formatMessage({
                     id: "Hotels & Destinations",
                   }),
-                  ...register(name, {
+                  ...register("search", {
                     onChange: handleOnChange,
                   }),
                   onKeyDown: (e) => {
@@ -285,8 +286,8 @@ export function SearchSkeleton() {
  */
 function getEnhancedSearchHistory(
   searchHistory: SearchHistoryItem[],
-  locations: Locations
-): Locations {
+  locations: Location[]
+): Location[] {
   return searchHistory
     .map((historyItem) =>
       locations.find(
@@ -294,5 +295,5 @@ function getEnhancedSearchHistory(
           location.type === historyItem.type && location.id === historyItem.id
       )
     )
-    .filter((r) => !!r) as Locations
+    .filter((r): r is Location => !!r)
 }

apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx

@@ -31,10 +31,8 @@ export default function FormContent({
   const {
     formState: { errors },
   } = useFormContext<BookingWidgetSchema>()
-  const bookingCodeError = errors["bookingCode"]?.value
-  const selectedDate = useWatch({ name: "date" })
 
-  const roomsLabel = intl.formatMessage({ id: "Rooms & Guests" })
+  const selectedDate = useWatch({ name: "date" })
 
   const nights = dt(selectedDate.toDate).diff(dt(selectedDate.fromDate), "days")
 
@@ -63,7 +61,7 @@ export default function FormContent({
           <div className={styles.rooms}>
             <label>
               <Caption color="red" type="bold" asChild>
-                <span>{roomsLabel}</span>
+                <span>{intl.formatMessage({ id: "Rooms & Guests" })}</span>
               </Caption>
             </label>
             <GuestsRoomsPickerForm />
@@ -86,7 +84,7 @@ export default function FormContent({
           <Voucher />
         </div>
         <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
-          {bookingCodeError?.message?.indexOf("Multi-room") === 0 ? (
+          {errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? (
             <RemoveExtraRooms
               size="medium"
               fullWidth