Merged in fix/SW-2884-select-hotel-page-users-are-di (pull request #2438)

fix: SW-2884 Fixed Alternative hotels map navigation issues

* fix: SW-2884 Fixed Alternative hotels map navigation issues

* fix: SW-2884 Optmized code


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -15,7 +15,10 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import {
+  alternativeHotelsMap,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
@@ -49,6 +52,7 @@ function HotelCard({
   state = "default",
   type = HotelCardListingTypeEnum.PageListing,
   bookingCode = "",
+  isAlternative,
 }: HotelCardProps) {
   const params = useParams()
   const searchParams = useSearchParams()
@@ -65,11 +69,14 @@ function HotelCard({
     state,
   })
 
+  const mapUrl = isAlternative
+    ? alternativeHotelsMap(lang)
+    : selectHotelMap(lang)
   const handleAddressClick = (event: React.MouseEvent) => {
     event.preventDefault()
     disengage() // Disengage the current hotel to avoid the hover state from being active when clicking on the address
     activate(hotel.name)
-    router.push(`${selectHotelMap(lang)}?${searchParams.toString()}`)
+    router.push(`${mapUrl}?${searchParams.toString()}`)
   }
 
   const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
@@ -126,7 +133,7 @@ function HotelCard({
                     size="small"
                     textDecoration="underline"
                     onClick={handleAddressClick}
-                    href={selectHotelMap(lang)}
+                    href={mapUrl}
                     keepSearchParams
                     aria-label={intl.formatMessage({
                       defaultMessage: "See on map",

apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx

@@ -27,6 +27,7 @@ export default function HotelCardListing({
   hotelData,
   unfilteredHotelCount,
   type = HotelCardListingTypeEnum.PageListing,
+  isAlternative,
 }: HotelCardListingProps) {
   const { data: session } = useSession()
   const isUserLoggedIn = isValidClientSession(session)
@@ -133,6 +134,7 @@ export default function HotelCardListing({
                 }
                 type={type}
                 bookingCode={bookingCode}
+                isAlternative={isAlternative}
               />
             </div>
           ))

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -108,6 +108,7 @@ export async function SelectHotelMapContainer({
         cityCoordinates={cityCoordinates}
         bookingCode={bookingCode ?? ""}
         isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+        isAlternativeHotels={isAlternativeHotels}
       />
       <TrackingSDK pageData={pageTrackingData} hotelInfo={hotelsTrackingData} />
     </>

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -6,7 +6,10 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
-import { selectHotel } from "@/constants/routes/hotelReservation"
+import {
+  alternativeHotels,
+  selectHotel,
+} from "@/constants/routes/hotelReservation"
 import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
 import { useHotelsMapStore } from "@/stores/hotels-map"
@@ -41,6 +44,7 @@ export default function SelectHotelContent({
   filterList,
   bookingCode,
   isBookingCodeRateAvailable,
+  isAlternativeHotels,
 }: Omit<SelectHotelMapProps, "apiKey">) {
   const lang = useLang()
   const intl = useIntl()
@@ -122,6 +126,9 @@ export default function SelectHotelContent({
     [map, getHotelCards, isAboveMobile]
   )
 
+  const closeMapUrl = isAlternativeHotels
+    ? alternativeHotels(lang)
+    : selectHotel(lang)
   const closeButton = (
     <Button
       intent="inverted"
@@ -130,7 +137,7 @@ export default function SelectHotelContent({
       className={styles.closeButton}
       asChild
     >
-      <Link href={selectHotel(lang)} keepSearchParams prefetch>
+      <Link href={closeMapUrl} keepSearchParams prefetch>
         <MaterialIcon icon="close" size={20} color="CurrentColor" />
         {intl.formatMessage({
           defaultMessage: "Close the map",
@@ -164,7 +171,7 @@ export default function SelectHotelContent({
             className={styles.filterContainerCloseButton}
             asChild
           >
-            <Link href={selectHotel(lang)} keepSearchParams>
+            <Link href={closeMapUrl} keepSearchParams>
               <MaterialIcon icon="arrow_back" color="CurrentColor" size={20} />
               {intl.formatMessage({ defaultMessage: "Back" })}
             </Link>

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -15,6 +15,7 @@ export default function SelectHotelMap({
   cityCoordinates,
   bookingCode,
   isBookingCodeRateAvailable,
+  isAlternativeHotels,
 }: SelectHotelMapProps) {
   return (
     <APIProvider apiKey={apiKey}>
@@ -26,6 +27,7 @@ export default function SelectHotelMap({
         filterList={filterList}
         bookingCode={bookingCode}
         isBookingCodeRateAvailable={isBookingCodeRateAvailable}
+        isAlternativeHotels={isAlternativeHotels}
       />
     </APIProvider>
   )

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -122,7 +122,7 @@ export default async function SelectHotel({
             bookingCode={bookingCode}
             isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
           />
-          <HotelCardListing hotelData={hotels} />
+          <HotelCardListing hotelData={hotels} isAlternative={isAlternative} />
         </div>
       </main>
     </>

apps/scandic-web/types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -17,6 +17,7 @@ export type HotelCardListingProps = {
   hotelData: HotelResponse[]
   unfilteredHotelCount?: number
   type?: HotelCardListingTypeEnum
+  isAlternative?: boolean
 }
 
 export interface NullableHotelData extends Omit<HotelData, "hotelData"> {

apps/scandic-web/types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -7,4 +7,5 @@ export type HotelCardProps = {
   type?: HotelCardListingTypeEnum
   state?: "default" | "active"
   bookingCode?: string | null
+  isAlternative?: boolean
 }

apps/scandic-web/types/components/hotelReservation/selectHotel/map.ts

@@ -22,6 +22,7 @@ export interface SelectHotelMapProps {
   cityCoordinates: Coordinates
   bookingCode: string | undefined
   isBookingCodeRateAvailable?: boolean
+  isAlternativeHotels?: boolean
 }
 
 type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]