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

11
app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
View File

@@ -46,6 +46,17 @@ export async function fetchAvailableHotels(
return enhanceHotels(availableHotels)
}
export async function fetchBookingCodeAvailableHotels(
input: AvailabilityInput
): Promise<NullableHotelData[]> {
const availableHotels =
await serverClient().hotel.availability.hotelsByCityWithBookingCode(input)
if (!availableHotels) return []
return enhanceHotels(availableHotels)
}
export async function fetchAlternativeHotels(
hotelId: string,
input: AlternativeHotelsAvailabilityInput

2
app/[lang]/(live)/(public)/hotelreservation/(standard)/utils.ts
View File

@@ -26,6 +26,7 @@ interface HotelSearchDetails<T> {
adultsInRoom: number[]
childrenInRoomString?: string
childrenInRoom?: Child[]
bookingCode?: string
}
export async function getHotelSearchDetails<
@@ -101,5 +102,6 @@ export async function getHotelSearchDetails<
adultsInRoom,
childrenInRoomString,
childrenInRoom,
bookingCode: selectHotelParams.bookingCode ?? undefined,
}
}

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

3
i18n/dictionaries/da.json
View File

@@ -161,6 +161,7 @@
"Dimensions": "Dimensioner",
"Discard changes": "Kassér ændringer",
"Discard unsaved changes?": "Slette ændringer, der ikke er gemt?",
"Discounted rooms": "Værelser med rabat",
"Discover": "Opdag",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Opdag {name}",
@@ -222,6 +223,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "Fra",
"Full circle": "Full circle",
"Full price rooms": "Fuld pris værelser",
"Garage": "Garage",
"Get inspired": "Bliv inspireret",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -485,6 +487,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Søge",
"See all": "Se alle",
"See all photos": "Se alle billeder",
"See alternative hotels": "See alternative hotels",
"See destination": "Se destination",

3
i18n/dictionaries/de.json
View File

@@ -162,6 +162,7 @@
"Dimensions": "Abmessungen",
"Discard changes": "Änderungen verwerfen",
"Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?",
"Discounted rooms": "Zimmer mit Rabatt",
"Discover": "Entdecken",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Entdecken Sie {name}",
@@ -223,6 +224,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "Fromm",
"Full circle": "Full circle",
"Full price rooms": "Zimmer zum vollen Preis",
"Garage": "Garage",
"Get inspired": "Lassen Sie sich inspieren",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -486,6 +488,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Suchen",
"See all": "Alle anzeigen",
"See all photos": "Alle Fotos ansehen",
"See alternative hotels": "See alternative hotels",
"See destination": "Siehe Ziel",

3
i18n/dictionaries/en.json
View File

@@ -165,6 +165,7 @@
"Dimensions": "Dimensions",
"Discard changes": "Discard changes",
"Discard unsaved changes?": "Discard unsaved changes?",
"Discounted rooms": "Discounted rooms",
"Discover": "Discover",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Discover {name}",
@@ -226,6 +227,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "From",
"Full circle": "Full circle",
"Full price rooms": "Full price rooms",
"Garage": "Garage",
"Get inspired": "Get inspired",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -491,6 +493,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Search",
"See all": "See all",
"See all photos": "See all photos",
"See alternative hotels": "See alternative hotels",
"See destination": "See destination",

3
i18n/dictionaries/fi.json
View File

@@ -161,6 +161,7 @@
"Dimensions": "Mitat",
"Discard changes": "Hylkää muutokset",
"Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?",
"Discounted rooms": "Alennetut huoneet",
"Discover": "Löydä",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Tutustu {name}",
@@ -222,6 +223,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "From",
"Full circle": "Full circle",
"Full price rooms": "Täyshintaiset huoneet",
"Garage": "Autotalli",
"Get inspired": "Inspiroidu",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -486,6 +488,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Haku",
"See all": "Katso kaikki",
"See all photos": "Katso kaikki kuvat",
"See alternative hotels": "See alternative hotels",
"See destination": "Katso kohde",

3
i18n/dictionaries/no.json
View File

@@ -160,6 +160,7 @@
"Dimensions": "Dimensjoner",
"Discard changes": "Forkaste endringer",
"Discard unsaved changes?": "Forkaste endringer som ikke er lagret?",
"Discounted rooms": "Rabatterte rom",
"Discover": "Oppdag",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Oppdag {name}",
@@ -221,6 +222,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "Fra",
"Full circle": "Full circle",
"Full price rooms": "Full pris rom",
"Garage": "Garasje",
"Get inspired": "Bli inspirert",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -484,6 +486,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Søk",
"See all": "Se alle",
"See all photos": "Se alle bilder",
"See alternative hotels": "See alternative hotels",
"See destination": "Se destinasjon",

3
i18n/dictionaries/sv.json
View File

@@ -160,6 +160,7 @@
"Dimensions": "Dimensioner",
"Discard changes": "Ignorera ändringar",
"Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?",
"Discounted rooms": "Rabatterade rum",
"Discover": "Upptäck",
"Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
"Discover {name}": "Upptäck {name}",
@@ -221,6 +222,7 @@
"Friends with Benefits": "Friends with Benefits",
"From": "Från",
"Full circle": "Full circle",
"Full price rooms": "Fullpris rum",
"Garage": "Garage",
"Get inspired": "Bli inspirerad",
"Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.": "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
@@ -484,6 +486,7 @@
"Scandic Friends Mastercard": "Scandic Friends Mastercard",
"Scandic Friends Point Shop": "Scandic Friends Point Shop",
"Search": "Sök",
"See all": "Se alla",
"See all photos": "Se alla foton",
"See alternative hotels": "See alternative hotels",
"See destination": "Se destination",

2
lib/api/endpoints.ts
View File

@@ -39,7 +39,7 @@ export namespace endpoints {
return `${base.path.availability}/${version}/${base.enitity.Availabilities}/city/${cityId}`
}
export function hotels() {
return `${base.path.availability}/${version}/${base.enitity.Availabilities}/hotel`
return `${base.path.availability}/${version}/${base.enitity.Availabilities}/hotels`
}
export function hotel(hotelId: string) {
return `${base.path.availability}/${version}/${base.enitity.Availabilities}/hotel/${hotelId}`

9
server/routers/hotels/metrics.ts
View File

@@ -32,6 +32,15 @@ export const metrics = {
fail: meter.createCounter("trpc.hotel.availability.hotels-fail"),
success: meter.createCounter("trpc.hotel.availability.hotels-success"),
},
hotelsAvailabilityBookingCode: {
counter: meter.createCounter("trpc.hotel.availability.hotels-booking-code"),
fail: meter.createCounter(
"trpc.hotel.availability.hotels-booking-code-fail"
),
success: meter.createCounter(
"trpc.hotel.availability.hotels-booking-code-success"
),
},
hotelsByHotelIdAvailability: {
counter: meter.createCounter("trpc.hotel.availability.hotels-by-hotel-id"),
fail: meter.createCounter(

542
server/routers/hotels/query.ts
View File

@@ -64,6 +64,10 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
import { HotelTypeEnum } from "@/types/enums/hotelType"
import type { RequestOptionsWithOutBody } from "@/types/fetch"
import type { HotelDataWithUrl } from "@/types/hotel"
import type {
HotelsAvailabilityInputSchema,
HotelsByHotelIdsAvailabilityInputSchema,
} from "@/types/trpc/routers/hotel/availability"
import type { HotelInput } from "@/types/trpc/routers/hotel/hotel"
import type { CityLocation } from "@/types/trpc/routers/hotel/locations"
@@ -203,6 +207,251 @@ export const getHotel = cache(
}
)
export const getHotelsAvailabilityByCity = async (
input: HotelsAvailabilityInputSchema,
apiLang: string,
serviceToken: string
) => {
const {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
} = input
const params: Record<string, string | number> = {
roomStayStartDate,
roomStayEndDate,
adults,
...(children && { children }),
...(bookingCode && { bookingCode }),
language: apiLang,
}
metrics.hotelsAvailability.counter.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsAvailability start",
JSON.stringify({ query: { cityId, params } })
)
const apiResponse = await api.get(
api.endpoints.v1.Availability.city(cityId),
{
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_CITY_SEARCH,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.hotelsAvailability.fail.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "http_error",
error: JSON.stringify({
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
}),
})
console.error(
"api.hotels.hotelsAvailability error",
JSON.stringify({
query: { cityId, params },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
},
})
)
return null
}
const apiJson = await apiResponse.json()
const validateAvailabilityData = hotelsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
metrics.hotelsAvailability.fail.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "validation_error",
error: JSON.stringify(validateAvailabilityData.error),
})
console.error(
"api.hotels.hotelsAvailability validation error",
JSON.stringify({
query: { cityId, params },
error: validateAvailabilityData.error,
})
)
throw badRequestError()
}
metrics.hotelsAvailability.success.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsAvailability success",
JSON.stringify({
query: { cityId, params: params },
})
)
return {
availability: validateAvailabilityData.data.data.flatMap(
(hotels) => hotels.attributes
),
}
}
export const getHotelsAvailabilityByHotelIds = async (
input: HotelsByHotelIdsAvailabilityInputSchema,
apiLang: string,
serviceToken: string
) => {
const {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
} = input
/**
* Since API expects the params appended and not just
* a comma separated string we need to initialize the
* SearchParams with a sequence of pairs
* (hotelIds=810&hotelIds=879&hotelIds=222 etc.)
**/
const params = new URLSearchParams([
["roomStayStartDate", roomStayStartDate],
["roomStayEndDate", roomStayEndDate],
["adults", adults.toString()],
["children", children ?? ""],
["bookingCode", bookingCode],
["language", apiLang],
])
hotelIds.forEach((hotelId) => params.append("hotelIds", hotelId.toString()))
metrics.hotelsByHotelIdAvailability.counter.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsByHotelIdAvailability start",
JSON.stringify({ query: { params } })
)
const apiResponse = await api.get(
api.endpoints.v1.Availability.hotels(),
{
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_CITY_SEARCH,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.hotelsByHotelIdAvailability.fail.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "http_error",
error: JSON.stringify({
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
}),
})
console.error(
"api.hotels.hotelsByHotelIdAvailability error",
JSON.stringify({
query: { params },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
},
})
)
return null
}
const apiJson = await apiResponse.json()
const validateAvailabilityData = hotelsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
metrics.hotelsByHotelIdAvailability.fail.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "validation_error",
error: JSON.stringify(validateAvailabilityData.error),
})
console.error(
"api.hotels.hotelsByHotelIdAvailability validation error",
JSON.stringify({
query: { params },
error: validateAvailabilityData.error,
})
)
throw badRequestError()
}
metrics.hotelsByHotelIdAvailability.success.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsByHotelIdAvailability success",
JSON.stringify({
query: { params },
})
)
return {
availability: validateAvailabilityData.data.data.flatMap(
(hotels) => hotels.attributes
),
}
}
export const hotelQueryRouter = router({
availability: router({
hotelsByCity: serviceProcedure
@@ -210,239 +459,14 @@ export const hotelQueryRouter = router({
.query(async ({ input, ctx }) => {
const { lang } = ctx
const apiLang = toApiLang(lang)
const {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
} = input
const params: Record<string, string | number> = {
roomStayStartDate,
roomStayEndDate,
adults,
...(children && { children }),
...(bookingCode && { bookingCode }),
language: apiLang,
}
metrics.hotelsAvailability.counter.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsAvailability start",
JSON.stringify({ query: { cityId, params } })
)
const apiResponse = await api.get(
api.endpoints.v1.Availability.city(cityId),
{
cache: undefined,
headers: {
Authorization: `Bearer ${ctx.serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_CITY_SEARCH,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.hotelsAvailability.fail.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "http_error",
error: JSON.stringify({
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
}),
})
console.error(
"api.hotels.hotelsAvailability error",
JSON.stringify({
query: { cityId, params },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
},
})
)
return null
}
const apiJson = await apiResponse.json()
const validateAvailabilityData =
hotelsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
metrics.hotelsAvailability.fail.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "validation_error",
error: JSON.stringify(validateAvailabilityData.error),
})
console.error(
"api.hotels.hotelsAvailability validation error",
JSON.stringify({
query: { cityId, params },
error: validateAvailabilityData.error,
})
)
throw badRequestError()
}
metrics.hotelsAvailability.success.add(1, {
cityId,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsAvailability success",
JSON.stringify({
query: { cityId, params: params },
})
)
return {
availability: validateAvailabilityData.data.data.flatMap(
(hotels) => hotels.attributes
),
}
return getHotelsAvailabilityByCity(input, apiLang, ctx.serviceToken)
}),
hotelsByHotelIds: serviceProcedure
.input(getHotelsByHotelIdsAvailabilityInputSchema)
.query(async ({ input, ctx }) => {
const { lang } = ctx
const apiLang = toApiLang(lang)
const {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
} = input
const params: Record<string, string | number | number[]> = {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
...(children && { children }),
...(bookingCode && { bookingCode }),
language: apiLang,
}
metrics.hotelsByHotelIdAvailability.counter.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsByHotelIdAvailability start",
JSON.stringify({ query: { params } })
)
const apiResponse = await api.get(
api.endpoints.v1.Availability.hotels(),
{
cache: undefined,
headers: {
Authorization: `Bearer ${ctx.serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_CITY_SEARCH,
},
},
params
)
if (!apiResponse.ok) {
const text = await apiResponse.text()
metrics.hotelsByHotelIdAvailability.fail.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "http_error",
error: JSON.stringify({
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
}),
})
console.error(
"api.hotels.hotelsByHotelIdAvailability error",
JSON.stringify({
query: { params },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
text,
},
})
)
return null
}
const apiJson = await apiResponse.json()
const validateAvailabilityData =
hotelsAvailabilitySchema.safeParse(apiJson)
if (!validateAvailabilityData.success) {
metrics.hotelsByHotelIdAvailability.fail.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
error_type: "validation_error",
error: JSON.stringify(validateAvailabilityData.error),
})
console.error(
"api.hotels.hotelsByHotelIdAvailability validation error",
JSON.stringify({
query: { params },
error: validateAvailabilityData.error,
})
)
throw badRequestError()
}
metrics.hotelsByHotelIdAvailability.success.add(1, {
hotelIds,
roomStayStartDate,
roomStayEndDate,
adults,
children,
bookingCode,
})
console.info(
"api.hotels.hotelsByHotelIdAvailability success",
JSON.stringify({
query: { params },
})
)
return {
availability: validateAvailabilityData.data.data.flatMap(
(hotels) => hotels.attributes
),
}
return getHotelsAvailabilityByHotelIds(input, apiLang, ctx.serviceToken)
}),
rooms: serviceProcedure
.input(roomsAvailabilityInputSchema)
@@ -793,6 +817,70 @@ export const hotelQueryRouter = router({
bedTypes,
}
}),
hotelsByCityWithBookingCode: serviceProcedure
.input(hotelsAvailabilityInputSchema)
.query(async ({ input, ctx }) => {
const { lang } = ctx
const apiLang = toApiLang(lang)
metrics.hotelsAvailabilityBookingCode.counter.add(1, {
...input,
})
const bookingCodeAvailabilityResponse =
await getHotelsAvailabilityByCity(input, apiLang, ctx.serviceToken)
if (!bookingCodeAvailabilityResponse) {
metrics.hotelsAvailabilityBookingCode.fail.add(1, {
...input,
error_type: "unknown",
})
return null
}
// Get regular availability of hotels which don't have availability with booking code.
const unavailableHotelIds =
bookingCodeAvailabilityResponse?.availability
.filter((hotel) => {
return hotel.status === "NotAvailable"
})
.flatMap((hotel) => {
return hotel.hotelId
})
// All hotels have availability with booking code no need to fetch regular prices.
// return response as is without any filtering as below.
if (!unavailableHotelIds || !unavailableHotelIds.length) {
return bookingCodeAvailabilityResponse
}
const unavailableHotelsInput = {
...input,
bookingCode: "",
hotelIds: unavailableHotelIds,
}
const unavailableHotels = await getHotelsAvailabilityByHotelIds(
unavailableHotelsInput,
apiLang,
ctx.serviceToken
)
metrics.hotelsAvailabilityBookingCode.success.add(1, {
...input,
})
console.info("api.hotels.hotelsAvailabilityBookingCode success")
// No regular rates available due to network or API failure (no need to filter & merge).
if (!unavailableHotels) {
return bookingCodeAvailabilityResponse
}
// Filtering the response hotels to merge bookingCode rates and regular rates in single response.
return {
availability: bookingCodeAvailabilityResponse.availability
.filter((hotel) => {
return hotel.status === "Available"
})
.concat(unavailableHotels.availability),
}
}),
}),
rates: router({
get: publicProcedure

13
stores/bookingCode-filter.ts Normal file
View File

@@ -0,0 +1,13 @@
import { create } from "zustand"
interface BookingCodeFilterState {
activeCodeFilter: string
setFilter: (filter: string) => void
}
export const useBookingCodeFilterStore = create<BookingCodeFilterState>(
(set) => ({
activeCodeFilter: "discounted",
setFilter: (filter) => set({ activeCodeFilter: filter }),
})
)

1
types/components/hotelReservation/selectHotel/hotelCardProps.ts
View File

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

2
types/components/hotelReservation/selectHotel/map.ts
View File

@@ -22,6 +22,7 @@ export interface SelectHotelMapProps {
hotels: HotelData[]
filterList: CategorizedFilters
cityCoordinates: Coordinates
bookingCode: string | undefined
}
type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
@@ -32,6 +33,7 @@ export type HotelPin = {
coordinates: Coordinates
publicPrice: number | null
memberPrice: number | null
rateType: string | null
currency: string
images: {
imageSizes: ImageSizes

2
types/components/hotelReservation/selectHotel/selectHotelSearchParams.ts
View File

@@ -5,6 +5,7 @@ export interface SelectHotelSearchParams {
fromDate: string
toDate: string
rooms: Pick<Room, "adults" | "childrenInRoom">[]
bookingCode: string
}
export interface AlternativeHotelsSearchParams {
@@ -12,4 +13,5 @@ export interface AlternativeHotelsSearchParams {
fromDate: string
toDate: string
rooms: Pick<Room, "adults" | "childrenInRoom">[]
bookingCode: string
}

1
types/components/hotelReservation/selectRate/selectRate.ts
View File

@@ -25,6 +25,7 @@ export interface SelectRateSearchParams {
fromDate: string
toDate: string
rooms: Room[]
bookingCode?: string
}
export interface Rate {

10
types/trpc/routers/hotel/availability.ts
View File

@@ -1,10 +1,20 @@
import type { z } from "zod"
import type {
getHotelsByHotelIdsAvailabilityInputSchema,
hotelsAvailabilityInputSchema,
} from "@/server/routers/hotels/input"
import type { hotelsAvailabilitySchema } from "@/server/routers/hotels/output"
import type { productTypeSchema } from "@/server/routers/hotels/schemas/availability/productType"
import type { productTypePriceSchema } from "@/server/routers/hotels/schemas/productTypePrice"
export type HotelsAvailability = z.output<typeof hotelsAvailabilitySchema>
export type HotelsAvailabilityInputSchema = z.output<
typeof hotelsAvailabilityInputSchema
>
export type HotelsByHotelIdsAvailabilityInputSchema = z.output<
typeof getHotelsByHotelIdsAvailabilityInputSchema
>
export type ProductType = z.output<typeof productTypeSchema>
export type ProductTypePrices = z.output<typeof productTypePriceSchema>