feat: guest information form enter details

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

@@ -10,6 +10,7 @@ import type { ClearSearchButtonProps } from "@/types/components/search"
 
 export default function ClearSearchButton({
   getItemProps,
+  handleClearSearchHistory,
   highlightedIndex,
   index,
 }: ClearSearchButtonProps) {
@@ -18,13 +19,6 @@ export default function ClearSearchButton({
     variant: index === highlightedIndex ? "active" : "default",
   })
 
-  function handleClick() {
-    // noop
-    // the click bubbles to handleOnSelect
-    // where selectedItem = "clear-search"
-    // which is the value for item below
-  }
-
   return (
     <button
       {...getItemProps({
@@ -34,7 +28,7 @@ export default function ClearSearchButton({
         item: "clear-search",
         role: "button",
       })}
-      onClick={handleClick}
+      onClick={handleClearSearchHistory}
       tabIndex={0}
       type="button"
     >

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

@@ -20,6 +20,7 @@ import type { SearchListProps } from "@/types/components/search"
 export default function SearchList({
   getItemProps,
   getMenuProps,
+  handleClearSearchHistory,
   highlightedIndex,
   isOpen,
   locations,
@@ -125,6 +126,7 @@ export default function SearchList({
         <Divider className={styles.divider} color="beige" />
         <ClearSearchButton
           getItemProps={getItemProps}
+          handleClearSearchHistory={handleClearSearchHistory}
           highlightedIndex={highlightedIndex}
           index={searchHistory.length}
         />
@@ -161,6 +163,7 @@ export default function SearchList({
             <Divider className={styles.divider} color="beige" />
             <ClearSearchButton
               getItemProps={getItemProps}
+              handleClearSearchHistory={handleClearSearchHistory}
               highlightedIndex={highlightedIndex}
               index={searchHistory.length}
             />

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

@@ -43,6 +43,11 @@ export default function Search({ locations }: SearchProps) {
     [locations]
   )
 
+  function handleClearSearchHistory() {
+    localStorage.removeItem(localStorageKey)
+    dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
+  }
+
   function handleOnBlur() {
     if (!value && state.searchData?.name) {
       setValue(name, state.searchData.name)
@@ -79,11 +84,8 @@ export default function Search({ locations }: SearchProps) {
     }
   }
 
-  function handleOnSelect(selectedItem: Location | null | "clear-search") {
-    if (selectedItem === "clear-search") {
-      localStorage.removeItem(localStorageKey)
-      dispatch({ type: ActionType.CLEAR_HISTORY_LOCATIONS })
-    } else if (selectedItem) {
+  function handleOnSelect(selectedItem: Location | null) {
+    if (selectedItem) {
       const stringified = JSON.stringify(selectedItem)
       setValue("location", encodeURIComponent(stringified))
       sessionStorage.setItem(sessionStorageKey, stringified)
@@ -167,6 +169,7 @@ export default function Search({ locations }: SearchProps) {
           <SearchList
             getItemProps={getItemProps}
             getMenuProps={getMenuProps}
+            handleClearSearchHistory={handleClearSearchHistory}
             highlightedIndex={highlightedIndex}
             isOpen={isOpen}
             locations={state.locations}