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

Merged in feat/SW-1557-implement-booking-code-select (pull request #1304)

Browse Source 
feat: SW-1577 Implemented booking code city search

* feat: SW-1577 Implemented booking code city search

* feat: SW-1557 Strict comparison

* feat: SW-1557 Review comments fix


Approved-by: Michael Zetterberg
Approved-by: Pontus Dreij
This commit is contained in:
Hrishikesh Vaipurkar
2025-02-13 09:24:47 +00:00
parent d46a85a529
commit eabe45b73c
35 changed files with 627 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/Forms/BookingWidget/FormContent/BookingCode/TabletCodeInput/index.tsx
View File

@@ -20,6 +20,7 @@ export default function TabletCodeInput({
{...register("bookingCode.value", {
onChange: (e) => updateValue(e.target.value),
})}
autoComplete="off"
/>
)
}

1
components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -170,6 +170,7 @@ export default function BookingCode() {
id="booking-code"
onChange={(event) => updateBookingCodeFormValue(event.target.value)}
defaultValue={bookingCode?.value}
autoComplete="off"
/>
{codeError?.message ? (
<Caption color="red" className={styles.error}>

9
components/HotelReservation/HotelCard/hotelCard.module.css
View File

@@ -92,6 +92,15 @@
gap: var(--Spacing-x-one-and-half);
}
.strikedText {
text-decoration: line-through;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.imageContainer {
height: 180px;
}
}
@media screen and (min-width: 1367px) {
.card.pageListing {
flex-direction: row;

16
components/HotelReservation/HotelCard/index.tsx
View File

@@ -8,6 +8,7 @@ import { selectRate } from "@/constants/routes/hotelReservation"
import { useHotelsMapStore } from "@/stores/hotels-map"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { PriceTagIcon } from "@/components/Icons"
import HotelLogo from "@/components/Icons/Logos"
import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
@@ -36,6 +37,7 @@ function HotelCard({
isUserLoggedIn,
state = "default",
type = HotelCardListingTypeEnum.PageListing,
bookingCode = "",
}: HotelCardProps) {
const params = useParams()
const lang = params.lang as Lang
@@ -71,6 +73,7 @@ function HotelCard({
const galleryImages = mapApiImagesToGalleryImages(
hotelData.galleryImages || []
)
const fullPrice = hotel.price?.public?.rateType?.toLowerCase() === "regular"
return (
<article
@@ -161,9 +164,18 @@ function HotelCard({
<NoPriceAvailableCard />
) : (
<>
{!isUserLoggedIn && price.public && (
<HotelPriceCard productTypePrices={price.public} />
{bookingCode && (
<span
className={`${styles.bookingCode} ${fullPrice ? styles.strikedText : ""}`}
>
<PriceTagIcon height={20} width={20} />
{bookingCode}
</span>
)}
{(!isUserLoggedIn || (bookingCode && !fullPrice)) &&
price.public && (
<HotelPriceCard productTypePrices={price.public} />
)}
{price.member && (
<HotelPriceCard
productTypePrices={price.member}

2
components/HotelReservation/HotelCardDialogListing/utils.ts
View File

@@ -14,6 +14,8 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
name: hotel.hotelData.name,
publicPrice: hotel.price?.public?.localPrice.pricePerNight ?? null,
memberPrice: hotel.price?.member?.localPrice.pricePerNight ?? null,
rateType:
hotel.price?.public?.rateType ?? hotel.price?.member?.rateType ?? null,
currency:
hotel.price?.public?.localPrice.currency ||
hotel.price?.member?.localPrice.currency ||

31
components/HotelReservation/HotelCardListing/index.tsx
View File

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react"
import { useEffect, useMemo } from "react"
import { useIntl } from "react-intl"
import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import { useHotelsMapStore } from "@/stores/hotels-map"
@@ -36,27 +37,40 @@ export default function HotelCardListing({
const { activeHotelCard } = useHotelsMapStore()
const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
const sortBy = useMemo(
() => searchParams.get("sort") ?? DEFAULT_SORT,
[searchParams]
const sortBy = searchParams.get("sort") ?? DEFAULT_SORT
const bookingCode = searchParams.get("bookingCode")
const activeCodeFilter = useBookingCodeFilterStore(
(state) => state.activeCodeFilter
)
const sortedHotels = useMemo(() => {
if (!hotelData) return []
return getSortedHotels({ hotels: hotelData, sortBy })
}, [hotelData, sortBy])
return getSortedHotels({ hotels: hotelData, sortBy, bookingCode })
}, [hotelData, sortBy, bookingCode])
const hotels = useMemo(() => {
if (activeFilters.length === 0) return sortedHotels
const updatedHotelsList = bookingCode
? sortedHotels.filter(
(hotel) =>
!hotel.price ||
activeCodeFilter === "all" ||
(activeCodeFilter === "discounted" &&
hotel.price?.public?.rateType?.toLowerCase() !== "regular") ||
activeCodeFilter === hotel.price?.public?.rateType?.toLowerCase()
)
: sortedHotels
return sortedHotels.filter((hotel) =>
if (activeFilters.length === 0) return updatedHotelsList
return updatedHotelsList.filter((hotel) =>
activeFilters.every((appliedFilterId) =>
hotel.hotelData.detailedFacilities.some(
(facility) => facility.id.toString() === appliedFilterId
)
)
)
}, [activeFilters, sortedHotels])
}, [activeFilters, sortedHotels, bookingCode, activeCodeFilter])
useEffect(() => {
setResultCount(hotels?.length ?? 0)
@@ -79,6 +93,7 @@ export default function HotelCardListing({
hotel.hotelData.name === activeHotelCard ? "active" : "default"
}
type={type}
bookingCode={bookingCode}
/>
</div>
))

28
components/HotelReservation/HotelCardListing/utils.ts
View File

@@ -4,14 +4,18 @@ import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotel
export function getSortedHotels({
hotels,
sortBy,
bookingCode,
}: {
hotels: HotelData[]
sortBy: string
bookingCode: string | null
}) {
const getPricePerNight = (hotel: HotelData): number =>
hotel.price?.member?.localPrice?.pricePerNight ??
hotel.price?.public?.localPrice?.pricePerNight ??
Infinity
const availableHotels = hotels.filter((hotel) => !!hotel?.price)
const unAvailableHotels = hotels.filter((hotel) => !hotel?.price)
const sortingStrategies: Record<
string,
@@ -29,7 +33,27 @@ export function getSortedHotels({
b.hotelData.location.distanceToCentre,
}
return [...hotels].sort(
const sortStrategy =
sortingStrategies[sortBy] ?? sortingStrategies[SortOrder.Distance]
)
if (bookingCode) {
const bookingCodeHotels = hotels.filter(
(hotel) =>
(hotel?.price?.public?.rateType?.toLowerCase() !== "regular" ||
hotel?.price?.member?.rateType?.toLowerCase() !== "regular") &&
!!hotel?.price
)
const regularHotels = hotels.filter(
(hotel) => hotel?.price?.public?.rateType?.toLowerCase() === "regular"
)
return [...bookingCodeHotels]
.sort(sortStrategy)
.concat([...regularHotels].sort(sortStrategy))
.concat([...unAvailableHotels].sort(sortStrategy))
}
return [...availableHotels]
.sort(sortStrategy)
.concat([...unAvailableHotels].sort(sortStrategy))
}

15
components/HotelReservation/SelectHotel/BookingCodeFilter/bookingCodeFilter.module.css Normal file
View File

@@ -0,0 +1,15 @@
.bookingCodeFilter {
display: flex;
justify-content: flex-end;
width: 100%;
}
.bookingCodeFilterSelect {
min-width: 200px;
}
@media screen and (max-width: 767px) {
.bookingCodeFilter {
margin-bottom: var(--Spacing-x3);
}
}

56
components/HotelReservation/SelectHotel/BookingCodeFilter/index.tsx Normal file
View File

@@ -0,0 +1,56 @@
"use client"
import { useIntl } from "react-intl"
import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
import { PriceTagIcon } from "@/components/Icons"
import Select from "@/components/TempDesignSystem/Select"
import styles from "./bookingCodeFilter.module.css"
import type { Key } from "react"
export default function BookingCodeFilter() {
const intl = useIntl()
const activeCodeFilter = useBookingCodeFilterStore(
(state) => state.activeCodeFilter
)
const setFilter = useBookingCodeFilterStore((state) => state.setFilter)
const bookingCodeFilterItems = [
{
label: intl.formatMessage({ id: "Discounted rooms" }),
value: "discounted",
},
{
label: intl.formatMessage({ id: "Full price rooms" }),
value: "regular",
},
{
label: intl.formatMessage({ id: "See all" }),
value: "all",
},
]
function updateFilter(selectedFilter: Key) {
setFilter(selectedFilter as string)
}
return (
<>
<div className={styles.bookingCodeFilter}>
<Select
aria-label="Booking Code Filter"
className={styles.bookingCodeFilterSelect}
name="bookingCodeFilter"
onSelect={updateFilter}
label=""
items={bookingCodeFilterItems}
defaultSelectedKey={activeCodeFilter}
optionsIcon={<PriceTagIcon />}
/>
</div>
</>
)
}

1
components/HotelReservation/SelectHotel/HotelSorter/index.tsx
View File

@@ -55,6 +55,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) {
items={sortItems}
defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
label={intl.formatMessage({ id: "Sort by" })}
aria-label={intl.formatMessage({ id: "Sort by" })}
name="sort"
showRadioButton
discreet={discreet}

38
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx
View File

@@ -8,6 +8,7 @@ import { getCityCoordinates } from "@/lib/trpc/memoizedRequests"
import {
fetchAlternativeHotels,
fetchAvailableHotels,
fetchBookingCodeAvailableHotels,
getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
@@ -19,10 +20,7 @@ import { getHotelPins } from "../../HotelCardDialogListing/utils"
import SelectHotelMap from "."
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type {
HotelData,
NullableHotelData,
} from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
import {
@@ -60,6 +58,7 @@ export async function SelectHotelMapContainer({
childrenInRoom,
childrenInRoomString,
hotel: isAlternativeFor,
bookingCode,
} = searchDetails
if (!city) return notFound()
@@ -71,17 +70,29 @@ export async function SelectHotelMapContainer({
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
bookingCode,
})
)
: safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
})
)
: bookingCode
? safeTry(
fetchBookingCodeAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
bookingCode,
})
)
: safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
})
)
const [hotels] = await fetchAvailableHotelsPromise
@@ -142,6 +153,7 @@ export async function SelectHotelMapContainer({
hotels={validHotels}
filterList={filterList}
cityCoordinates={cityCoordinates}
bookingCode={bookingCode ?? ""}
/>
<Suspense fallback={null}>
<TrackingSDK

31
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx
View File

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { selectHotel } from "@/constants/routes/hotelReservation"
import { useBookingCodeFilterStore } from "@/stores/bookingCode-filter"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import { useHotelsMapStore } from "@/stores/hotels-map"
@@ -18,6 +19,7 @@ import useLang from "@/hooks/useLang"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import { debounce } from "@/utils/debounce"
import BookingCodeFilter from "../../BookingCodeFilter"
import FilterAndSortModal from "../../FilterAndSortModal"
import HotelListing from "../HotelListing"
import { getVisibleHotels } from "./utils"
@@ -35,6 +37,7 @@ export default function SelectHotelContent({
mapId,
hotels,
filterList,
bookingCode,
}: Omit<SelectHotelMapProps, "apiKey">) {
const lang = useLang()
const intl = useIntl()
@@ -53,6 +56,9 @@ export default function SelectHotelContent({
elementRef: listingContainerRef,
refScrollable: true,
})
const activeCodeFilter = useBookingCodeFilterStore(
(state) => state.activeCodeFilter
)
const coordinates = useMemo(
() =>
@@ -72,15 +78,23 @@ export default function SelectHotelContent({
}
}, [activeHotelCard, activeHotelPin])
const filteredHotelPins = useMemo(
() =>
hotelPins.filter((hotel) =>
activeFilters.every((filterId) =>
hotel.facilityIds.includes(Number(filterId))
const filteredHotelPins = useMemo(() => {
const updatedHotelsList = bookingCode
? hotelPins.filter(
(hotel) =>
!hotel.publicPrice ||
activeCodeFilter === "all" ||
(activeCodeFilter === "discounted" &&
hotel.rateType?.toLowerCase() !== "regular") ||
activeCodeFilter === hotel.rateType?.toLowerCase()
)
),
[activeFilters, hotelPins]
)
: hotelPins
return updatedHotelsList.filter((hotel) =>
activeFilters.every((filterId) =>
hotel.facilityIds.includes(Number(filterId))
)
)
}, [activeFilters, hotelPins, bookingCode, activeCodeFilter])
const getHotelCards = useCallback(() => {
const visibleHotels = getVisibleHotels(hotels, filteredHotelPins, map)
@@ -143,6 +157,7 @@ export default function SelectHotelContent({
filters={filterList}
setShowSkeleton={setShowSkeleton}
/>
{bookingCode ? <BookingCodeFilter /> : null}
</div>
{showSkeleton ? (

2
components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
View File

@@ -13,6 +13,7 @@ export default function SelectHotelMap({
hotels,
filterList,
cityCoordinates,
bookingCode,
}: SelectHotelMapProps) {
return (
<APIProvider apiKey={apiKey}>
@@ -22,6 +23,7 @@ export default function SelectHotelMap({
mapId={mapId}
hotels={hotels}
filterList={filterList}
bookingCode={bookingCode}
/>
</APIProvider>
)

34
components/HotelReservation/SelectHotel/index.tsx
View File

@@ -12,6 +12,7 @@ import {
import {
fetchAlternativeHotels,
fetchAvailableHotels,
fetchBookingCodeAvailableHotels,
getFiltersFromHotels,
} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
@@ -27,6 +28,7 @@ import { safeTry } from "@/utils/safeTry"
import { convertObjToSearchParams } from "@/utils/url"
import HotelCardListing from "../HotelCardListing"
import BookingCodeFilter from "./BookingCodeFilter"
import HotelCount from "./HotelCount"
import HotelFilter from "./HotelFilter"
import HotelSorter from "./HotelSorter"
@@ -74,6 +76,7 @@ export default async function SelectHotel({
childrenInRoomString,
childrenInRoom,
hotel: isAlternativeFor,
bookingCode,
} = searchDetails
if (!city) return notFound()
@@ -85,17 +88,29 @@ export default async function SelectHotel({
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
bookingCode,
})
)
: safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
})
)
: bookingCode
? safeTry(
fetchBookingCodeAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
bookingCode,
})
)
: safeTry(
fetchAvailableHotels({
cityId: city.id,
roomStayStartDate: selectHotelParams.fromDate,
roomStayEndDate: selectHotelParams.toDate,
adults: adultsInRoom[0],
children: childrenInRoomString,
})
)
const [hotels] = await hotelsPromise
@@ -204,6 +219,7 @@ export default async function SelectHotel({
</div>
</header>
<main className={styles.main}>
{bookingCode ? <BookingCodeFilter /> : null}
<div className={styles.sideBar}>
{hotels && hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
<Link

7
components/HotelReservation/SelectHotel/selectHotel.module.css
View File

@@ -75,6 +75,9 @@
@media (min-width: 768px) {
.main {
padding: var(--Spacing-x5) 0;
flex-direction: row;
gap: var(--Spacing-x5);
flex-wrap: wrap;
}
.headerContent {
@@ -125,10 +128,6 @@
border-radius: var(--Corner-radius-Medium);
border: 1px solid var(--Base-Border-Subtle);
}
.main {
flex-direction: row;
gap: var(--Spacing-x5);
}
.buttonContainer {
display: none;
}

11
components/TempDesignSystem/Select/index.tsx
View File

@@ -40,6 +40,7 @@ export default function Select({
showRadioButton = false,
discreet = false,
isNestedInModal = false,
optionsIcon,
}: SelectProps) {
const [rootDiv, setRootDiv] = useState<SelectPortalContainer>(undefined)
const setOverflowVisible = useSetOverflowVisibleOnRA(isNestedInModal)
@@ -89,7 +90,12 @@ export default function Select({
{label}
{discreet && `:`}
</Label>
{selectedText && <Body>{selectedText}</Body>}
{selectedText && (
<Body className={optionsIcon ? styles.iconLabel : ""}>
{optionsIcon ? optionsIcon : null}
{selectedText}
</Body>
)}
</>
)}
</SelectValue>
@@ -114,11 +120,12 @@ export default function Select({
{items.map((item) => (
<ListBoxItem
aria-label={item.label}
className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton} ${optionsIcon && styles.iconLabel}`}
id={item.value}
key={item.label}
data-testid={item.label}
>
{optionsIcon ? optionsIcon : null}
{item.label}
</ListBoxItem>
))}

5
components/TempDesignSystem/Select/select.module.css
View File

@@ -40,6 +40,11 @@
pointer-events: none;
}
.iconLabel {
display: flex;
gap: var(--Spacing-x-half);
}
.input {
align-items: center;
background-color: var(--UI-Opacity-White-100);

2
components/TempDesignSystem/Select/select.ts
View File

@@ -1,3 +1,4 @@
import type { ReactElement } from "react"
import type { Key } from "react-aria-components"
export interface SelectProps
@@ -12,6 +13,7 @@ export interface SelectProps
showRadioButton?: boolean
discreet?: boolean
isNestedInModal?: boolean
optionsIcon?: ReactElement
}
export type SelectPortalContainer = HTMLDivElement | undefined