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

Merged in feature/SW-3595-sas-info-boxes (pull request #3177)

Browse Source 
Feature/SW-3595 Add info boxes to SAS start page & Eurobonus alert to select-hotel page on SAS

* wip

* feat(SW-3595): Add info boxes to SAS start page

* Add InfoBox to design-system
* Add background gradient to SAS start page

* update variable naming and conditionalize the eurobonus message on select-hotel

* SAS startpage update default message

* make select-hotel a bit more generic with slot={} instead of alert={}


Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-11-19 10:50:04 +00:00
parent 32e5c8d357
commit db30588f63
15 changed files with 459 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/booking-flow/lib/components/SelectHotel/index.tsx
View File

@@ -32,6 +32,7 @@ interface SelectHotelProps {
isBookingCodeRateAvailable?: boolean
title: ReactNode
lang: Lang
topSlot?: ReactNode
}
export function SelectHotel({
@@ -42,6 +43,7 @@ export function SelectHotel({
isBookingCodeRateAvailable = false,
title,
lang,
topSlot,
}: SelectHotelProps) {
const isAllUnavailable = hotels.every(
(hotel) => hotel.availability.status !== "Available"
@@ -83,54 +85,60 @@ export function SelectHotel({
</div>
</header>
<main className={styles.main}>
{showBookingCodeFilter ? <BookingCodeFilter /> : null}
<div className={styles.sideBar}>
{hotels.length ? (
<Link
className={styles.link}
href={
isAlternative
? alternativeHotelsMap(lang)
: selectHotelMap(lang)
}
keepSearchParams
>
<MapWithButtonWrapper>
{topSlot && <div className={styles.topSlotContainer}>{topSlot}</div>}
<div className={styles.availabilityContainer}>
{showBookingCodeFilter ? <BookingCodeFilter /> : null}
<div className={styles.sideBar}>
{hotels.length ? (
<Link
className={styles.link}
href={
isAlternative
? alternativeHotelsMap(lang)
: selectHotelMap(lang)
}
keepSearchParams
>
<MapWithButtonWrapper>
<StaticMap
city={city.name}
country={isCityWithCountry(city) ? city.country : undefined}
width={340}
height={200}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${city.name} city center`}
/>
</MapWithButtonWrapper>
</Link>
) : (
<div className={styles.mapContainer}>
<StaticMap
city={city.name}
country={isCityWithCountry(city) ? city.country : undefined}
width={340}
height={200}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${city.name} city center`}
/>
</MapWithButtonWrapper>
</Link>
) : (
<div className={styles.mapContainer}>
<StaticMap
city={city.name}
width={340}
height={200}
zoomLevel={11}
mapType="roadmap"
altText={`Map of ${city.name} city center`}
/>
</div>
)}
<HotelFilter filters={filterList} className={styles.filter} />
</div>
<div className={styles.hotelList}>
<NoAvailabilityAlert
hotelsLength={hotels.length}
isAlternative={isAlternative}
isAllUnavailable={isAllUnavailable}
operaId={hotels?.[0]?.hotel.operaId}
bookingCode={bookingCode}
isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
/>
<HotelCardListing hotelData={hotels} isAlternative={isAlternative} />
</div>
)}
<HotelFilter filters={filterList} className={styles.filter} />
</div>
<div className={styles.hotelList}>
<NoAvailabilityAlert
hotelsLength={hotels.length}
isAlternative={isAlternative}
isAllUnavailable={isAllUnavailable}
operaId={hotels?.[0]?.hotel.operaId}
bookingCode={bookingCode}
isBookingCodeRateNotAvailable={!isBookingCodeRateAvailable}
/>
<HotelCardListing
hotelData={hotels}
isAlternative={isAlternative}
/>
</div>
</div>
</main>
</>