Repositioning the Who and Where Popup

server/src/data/bookings.json

@@ -20,7 +20,12 @@
         "petsNumber": 2
       }
     },
-    "alreadyBookedDates": []
+    "alreadyBookedDates": [
+      {
+        "startDate": "12/10/2024",
+        "endDate": "12/13/2024"
+      }
+    ]
   },
   {
     "id": 2,

server/src/data/reservations.json

@@ -82,5 +82,26 @@
       "cleaningFee": 10,
       "longStayDiscount": 0
     }
+  },
+  {
+    "reservationId": 5,
+    "productId": 1,
+    "checkInDate": "12/10/2024",
+    "checkOutDate": "12/13/2024",
+    "guestCounts": {
+      "adults": 2,
+      "children": 1,
+      "infants": 1,
+      "pets": 1
+    },
+    "totalPrice": 458,
+    "breakdown": {
+      "nights": 3,
+      "pricePerNight": 146,
+      "basePrice": 438,
+      "airbnbServiceFee": 10,
+      "cleaningFee": 10,
+      "longStayDiscount": 0
+    }
   }
 ]

src/components/SearchBar/SearchBar.jsx

@@ -9,6 +9,7 @@ import useOutsideClick from "../../hooks/useOutsideClick";
 import { formatDateToMonthDay, formatDateRange, convertStringToDateObject, convertDateObjectToString } from "../../utils/dateUtils";
 import { CloseButtonIcon } from "../../icons/CloseButtonIcon";
 import AddGuestsPopUp from "../AddGuestsPopUp/AddGuestsPopUp";
+import DestinationPopUp from "../DestinationPopUp/DestinationPopUp";
 import { calculateGuestCounts } from "../../utils/guestCounts";
 import { useWindowSize } from "../../hooks/useWindowSize";
 
@@ -28,6 +29,7 @@ const SearchBar = ({ searchType, onSearch }) => {
   const [showCalendar, setShowCalendar] = useState(false);
   const [showWhoDropdown, setShowWhoDropdown] = useState(false);
   const [closing, setClosing] = useState(false);
+  const [handelDestinationPopUp, setHandelDestinationPopUp] = useState(false);
   const [hoverStates, setHoverStates] = useState({
     location: false,
     checkIn: false,
@@ -121,8 +123,10 @@ const SearchBar = ({ searchType, onSearch }) => {
   }
 
   const closeCalendarPopup = () => setShowCalendar(false)
+  const closeDestinationPopup = () => setHandelDestinationPopUp(false)
   const closeWhoDropdown = () => setShowWhoDropdown(false)
 
+  const destinationRef = useOutsideClick(closeDestinationPopup)
   const searchBarRef = useOutsideClick(disableSearchBarFocus);
   const calendarRef = useOutsideClick(closeCalendarPopup)
   const whoRef = useOutsideClick(closeWhoDropdown)
@@ -213,7 +217,13 @@ const SearchBar = ({ searchType, onSearch }) => {
 
     onSearch(searchParams);
   };
-
+
+  const handelDestinationClick = () =>{
+    setHandelDestinationPopUp(!handelDestinationPopUp);
+  }
+  const handelDestination = (destination) =>{
+    setLocation(destination);
+  }
   return (
     <>
       <div className={`${styles.searchBar} ${focusedSearchBar ? styles.focused : ''}`} ref={searchBarRef}>
@@ -226,28 +236,21 @@ const SearchBar = ({ searchType, onSearch }) => {
           onMouseLeave={() => handleMouseHover("location", false)}
           onClick={() => handleBlockClick("where")}  
         >
-          <div className={styles.locationContentWrapper}>
+          <div className={styles.locationContentWrapper} onClick={handelDestinationClick}>
             <span className={styles.label}>Where</span>
             <input
               className={styles.inputTextPlaceholder}
               type="text"
               placeholder="Search destinations"
               value={location}
               onChange={(e) => setLocation(e.target.value)}
-
             />
           </div>
-          {location && selectedBlock === "where" && (
-            <button 
-              onClick={(e) => {
-                e.stopPropagation()
-                setLocation("")
-              }}
-              className={styles.searchDeleteContentBtn}
-            >
-              <CloseButtonIcon />
-            </button>
-          )}
+          { handelDestinationPopUp && 
+            <div className={styles.popupContainer} ref={destinationRef}>
+              <DestinationPopUp title={"Search by region"} onClick={(e)=>handelDestination(e)}/>
+            </div>
+          }
         </div>
         <div className={styles.separatorWrapper}
              style={{ opacity: hoverStates.location ||

src/components/SearchBar/SearchBar.module.css

@@ -80,7 +80,6 @@
   justify-content: space-between;
   position: relative;
   width: 284px;
-  flex: 1;
   cursor: pointer;
 }
 
@@ -373,6 +372,25 @@
   transform: translateY(0);
 }
 
+.popupContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 76px;
+  padding: 16px 32px;
+  background-color: white;
+  z-index: 1200;
+  min-width: 400px;
+  border-radius: 32px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 20px;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  opacity: 1;
+  transform: translateY(0);
+}
+
 
 @media (max-width: 1200px) {
   .calendarToggleWrapper {