Merge branch 'master' of bitbucket.org:scandic-swap/web into fix/loading-rooms-separately

components/HotelReservation/Contact/index.tsx

@@ -2,8 +2,7 @@
 
 import { useIntl } from "react-intl"
 
-import FacebookIcon from "@/components/Icons/Facebook"
-import InstagramIcon from "@/components/Icons/Instagram"
+import { FacebookIcon, InstagramIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import useLang from "@/hooks/useLang"

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -76,6 +76,9 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               subtitle={width}
               title={roomType.description}
               value={roomType.value}
+              handleSelectedOnClick={
+                bedType === roomType.value ? completeStep : undefined
+              }
             />
           )
         })}

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -97,6 +97,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
             })}
             title={intl.formatMessage({ id: "Breakfast buffet" })}
             value={pkg.code}
+            handleSelectedOnClick={
+              breakfast === pkg.code ? completeStep : undefined
+            }
           />
         ))}
         <RadioCard
@@ -113,6 +116,9 @@ export default function Breakfast({ packages }: BreakfastProps) {
           })}
           title={intl.formatMessage({ id: "No breakfast" })}
           value="false"
+          handleSelectedOnClick={
+            breakfast === "false" ? completeStep : undefined
+          }
         />
       </form>
     </FormProvider>

components/HotelReservation/EnterDetails/StorageCleaner.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+import { hotelreservation } from "@/constants/routes/hotelReservation"
+import { detailsStorageName } from "@/stores/details"
+
+import useLang from "@/hooks/useLang"
+
+/**
+ * Cleanup component to make sure no stale data is left
+ * from previous booking when user is not in the booking
+ * flow anymore
+ */
+export default function StorageCleaner() {
+  const lang = useLang()
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!pathname.startsWith(hotelreservation(lang))) {
+      sessionStorage.removeItem(detailsStorageName)
+    }
+  }, [lang, pathname])
+
+  return null
+}

components/HotelReservation/HotelCardDialog/index.tsx

@@ -7,8 +7,7 @@ import { Lang } from "@/constants/languages"
 import { selectRate } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { CloseLargeIcon } from "@/components/Icons"
-import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import { CloseLargeIcon, TripAdvisorIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -60,7 +60,7 @@ export default function HotelCardDialogListing({
       const elements = document.querySelectorAll("[data-name]")
       setTimeout(() => {
         elements.forEach((el) => observerRef.current?.observe(el))
-      }, 500)
+      }, 1000)
     }
   }, [activeCard])
 

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -7,7 +7,7 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
-import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -15,7 +15,6 @@ import useLang from "@/hooks/useLang"
 
 import FilterAndSortModal from "../FilterAndSortModal"
 import HotelListing from "./HotelListing"
-import { getCentralCoordinates } from "./utils"
 
 import styles from "./selectHotelMap.module.css"
 
@@ -27,6 +26,7 @@ export default function SelectHotelMap({
   mapId,
   hotels,
   filterList,
+  cityCoordinates,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -36,15 +36,13 @@ export default function SelectHotelMap({
   const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
 
-  const centralCoordinates = getCentralCoordinates(hotelPins)
-
-  const coordinates = isAboveMobile
-    ? centralCoordinates
-    : { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 }
-
   const selectHotelParams = new URLSearchParams(searchParams.toString())
   const selectedHotel = selectHotelParams.get("selectedHotel")
 
+  const coordinates = isAboveMobile
+    ? cityCoordinates
+    : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
+
   useEffect(() => {
     if (selectedHotel) {
       setActiveHotelPin(selectedHotel)

components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts

@@ -1,17 +0,0 @@
-import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
-
-export function getCentralCoordinates(hotels: HotelPin[]) {
-  const centralCoordinates = hotels.reduce(
-    (acc, pin) => {
-      acc.lat += pin.coordinates.lat
-      acc.lng += pin.coordinates.lng
-      return acc
-    },
-    { lat: 0, lng: 0 }
-  )
-
-  centralCoordinates.lat /= hotels.length
-  centralCoordinates.lng /= hotels.length
-
-  return centralCoordinates
-}

components/HotelReservation/TripAdvisorChip/index.tsx

@@ -1,4 +1,4 @@
-import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import { TripAdvisorIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./tripAdvisorChip.module.css"