scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

Browse Source 
SW-3270 move interactive map to design system or booking flow

* wip

* wip

* merge

* wip

* add support for locales in design-system

* add story for HotelCard

* setup alias

* .

* remove tracking from design-system for hotelcard

* pass isUserLoggedIn

* export design-system-new-deprecated.css from design-system

* Add HotelMarkerByType to Storybook

* Add interactive map to Storybook

* fix reactintl in vitest

* rename env variables

* .

* fix background colors

* add storybook stories for <Link />

* merge

* fix tracking for when clicking 'See rooms' in InteractiveMap

* Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow

* remove deprecated comment


Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx
View File

@@ -1,5 +1,6 @@
"use client"
import { useSearchParams } from "next/navigation"
import { useRouter, useSearchParams } from "next/navigation"
import { useSession } from "next-auth/react"
import { useEffect, useMemo, useRef } from "react"
import { useIntl } from "react-intl"
@@ -8,20 +9,29 @@ import {
BookingCodeFilterEnum,
useBookingCodeFilterStore,
} from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
import {
alternativeHotelsMap,
selectHotelMap,
} from "@scandic-hotels/common/constants/routes/hotelReservation"
import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
import { HotelCard } from "@scandic-hotels/design-system/HotelCard"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import { useHotelsMapStore } from "@/stores/hotels-map"
import HotelDetailsSidePeek from "@/components/SidePeeks/HotelDetailsSidePeek"
import useLang from "@/hooks/useLang"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import { isValidClientSession } from "@/utils/clientSession"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import HotelCard from "../HotelCard"
import { DEFAULT_SORT } from "../SelectHotel/HotelSorter"
import { getSortedHotels } from "./utils"
import styles from "./hotelCardListing.module.css"
import type { HotelType } from "@scandic-hotels/common/constants/hotelType"
import {
type HotelCardListingProps,
HotelCardListingTypeEnum,
@@ -33,13 +43,15 @@ export default function HotelCardListing({
type = HotelCardListingTypeEnum.PageListing,
isAlternative,
}: HotelCardListingProps) {
const router = useRouter()
const lang = useLang()
const intl = useIntl()
const { data: session } = useSession()
const isUserLoggedIn = isValidClientSession(session)
const searchParams = useSearchParams()
const activeFilters = useHotelFilterStore((state) => state.activeFilters)
const setResultCount = useHotelFilterStore((state) => state.setResultCount)
const { activeHotel } = useHotelsMapStore()
const { activeHotel, activate, disengage, engage } = useHotelsMapStore()
const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
const activeCardRef = useRef<HTMLDivElement | null>(null)
@@ -118,32 +130,79 @@ export default function HotelCardListing({
return (
<section className={styles.hotelCards}>
{hotels?.length
? hotels.map((hotel) => (
<div
key={hotel.hotel.operaId}
ref={
isHotelActiveInMapView(hotel.hotel.name) ? activeCardRef : null
}
data-active={
isHotelActiveInMapView(hotel.hotel.name) ? "true" : "false"
}
>
<HotelCard
hotelData={hotel}
isUserLoggedIn={isUserLoggedIn}
state={
isHotelActiveInMapView(hotel.hotel.name)
? "active"
: "default"
}
type={type}
bookingCode={bookingCode}
isAlternative={isAlternative}
{hotels.map((hotel) => (
<div
key={hotel.hotel.operaId}
ref={isHotelActiveInMapView(hotel.hotel.name) ? activeCardRef : null}
data-active={
isHotelActiveInMapView(hotel.hotel.name) ? "true" : "false"
}
>
<HotelCard
hotel={{
id: hotel.hotel.operaId,
name: hotel.hotel.name,
address: hotel.hotel.address,
description: hotel.hotel.hotelContent.texts.descriptions?.short,
hotelType: hotel.hotel.hotelType as HotelType,
detailedFacilities: hotel.hotel.detailedFacilities,
ratings: {
tripAdvisor: hotel.hotel.ratings?.tripAdvisor.rating,
},
}}
lang={lang}
prices={{
public: hotel.availability.productType?.public
? {
...hotel.availability.productType.public,
requestedPrice:
hotel.availability.productType?.public.requestedPrice ??
undefined,
}
: undefined,
member: hotel.availability.productType?.member
? {
...hotel.availability.productType.member,
requestedPrice:
hotel.availability.productType?.member.requestedPrice ??
undefined,
}
: undefined,
}}
onHover={() => engage(hotel.hotel.name)}
onHoverEnd={() => disengage()}
onAddressClick={() => {
const mapUrl = isAlternative
? alternativeHotelsMap(lang)
: selectHotelMap(lang)
disengage() // Disengage the current hotel to avoid the hover state from being active when clicking on the address
activate(hotel.hotel.name)
router.push(`${mapUrl}?${searchParams.toString()}`)
}}
belowInfoSlot={
<HotelDetailsSidePeek
hotel={{ ...hotel.hotel, url: "" }}
restaurants={hotel.restaurants}
additionalHotelData={hotel.additionalData}
triggerLabel={intl.formatMessage({
defaultMessage: "See hotel details",
})}
buttonVariant="primary"
/>
</div>
))
: null}
}
distanceToCityCenter={hotel.hotel.location.distanceToCentre}
images={mapApiImagesToGalleryImages(hotel.hotel.galleryImages)}
isUserLoggedIn={isUserLoggedIn}
state={
isHotelActiveInMapView(hotel.hotel.name) ? "active" : "default"
}
type={type}
bookingCode={bookingCode}
isAlternative={isAlternative}
/>
</div>
))}
{showBackToTop && (
<BackToTopButton
position="right"