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

Merged in feat/SW-1454-hotel-listing-city-page (pull request #1250)

Browse Source 
feat(SW-1454): added hotel listing

* feat(SW-1454): added hotel listing


Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
2025-02-05 13:10:28 +00:00
parent f3e6318d49
commit e3b1bfc414
27 changed files with 522 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/ContentType/DestinationPage/CityListing/index.tsx
View File

@@ -19,7 +19,9 @@ export default async function CityListing({ cities }: CityListingProps) {
<div className={styles.listHeader}>
<Subtitle type="two">
{intl.formatMessage(
{ id: `{count} Locations` },
{
id: `{count, plural, one {{count} Location} other {{count} Locations}}`,
},
{ count: cities.length }
)}
</Subtitle>

4
components/ContentType/DestinationPage/DestinationCityPage/destinationCityPage.module.css
View File

@@ -16,7 +16,9 @@
.mainSection {
grid-area: mainSection;
padding-bottom: var(--Spacing-x7);
min-height: 500px; /* This is a temporary value because of no content atm */
max-width: var(--max-width-page);
width: 100%;
margin: 0 auto;
}
.sidebar {

12
components/ContentType/DestinationPage/DestinationCityPage/index.tsx
View File

@@ -7,9 +7,9 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import TrackingSDK from "@/components/TrackingSDK"
import { getIntl } from "@/i18n"
import ExperienceList from "../ExperienceList"
import HotelListing from "../HotelListing"
import SidebarContentWrapper from "../SidebarContentWrapper"
import DestinationPageSidePeek from "../Sidepeek"
import StaticMap from "../StaticMap"
@@ -20,16 +20,13 @@ import styles from "./destinationCityPage.module.css"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function DestinationCityPage() {
const [intl, pageData] = await Promise.all([
getIntl(),
getDestinationCityPage(),
])
const pageData = await getDestinationCityPage()
if (!pageData) {
return null
}
const { tracking, destinationCityPage } = pageData
const { tracking, destinationCityPage, hotels } = pageData
const {
images,
heading,
@@ -55,8 +52,7 @@ export default async function DestinationCityPage() {
/>
</header>
<main className={styles.mainSection}>
{/* TODO: Add hotel listing by cityIdentifier */}
{">>>> MAIN CONTENT <<<<"}
<HotelListing hotels={hotels} />
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper>

54
components/ContentType/DestinationPage/HotelListing/HotelListingItem/hotelListingItem.module.css Normal file
View File

@@ -0,0 +1,54 @@
.container {
background-color: var(--Base-Surface-Primary-light-Normal);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
overflow: hidden;
}
.content {
display: grid;
gap: var(--Spacing-x2);
padding: var(--Spacing-x2) var(--Spacing-x3);
align-content: start;
justify-items: start;
}
.intro {
display: grid;
gap: var(--Spacing-x-half);
}
.captions {
display: flex;
gap: var(--Spacing-x1);
}
.amenityList {
display: flex;
gap: var(--Spacing-x-one-and-half);
flex-wrap: wrap;
color: var(--UI-Text-Medium-contrast);
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Caption-Underline-fontSize);
}
.amenityItem {
display: flex;
gap: var(--Spacing-x-half);
align-items: center;
}
.ctaWrapper {
justify-self: stretch;
}
@media screen and (min-width: 768px) {
.container {
display: grid;
grid-template-columns: minmax(250px, 350px) auto;
}
.ctaWrapper {
justify-self: end;
}
}

101
components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx Normal file
View File

@@ -0,0 +1,101 @@
"use client"
import Link from "next/link"
import { useIntl } from "react-intl"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightSmallIcon } from "@/components/Icons"
import HotelLogo from "@/components/Icons/Logos"
import ImageGallery from "@/components/ImageGallery"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
import styles from "./hotelListingItem.module.css"
import type { Hotel } from "@/types/hotel"
interface HotelListingItemProps {
hotel: Hotel
url: string | null
}
export default function HotelListingItem({
hotel,
url,
}: HotelListingItemProps) {
const intl = useIntl()
const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
const amenities = hotel.detailedFacilities.slice(0, 5)
return (
<article className={styles.container}>
<ImageGallery
images={galleryImages}
title={intl.formatMessage(
{ id: "{title} - Image gallery" },
{ title: hotel.name }
)}
/>
<div className={styles.content}>
<div className={styles.intro}>
<HotelLogo hotelId={hotel.operaId} hotelType={hotel.hotelType} />
<Subtitle type="one" asChild>
<h3>{hotel.name}</h3>
</Subtitle>
<div className={styles.captions}>
<Caption color="uiTextPlaceholder">
{hotel.address.streetAddress}
</Caption>
<Divider variant="vertical" color="beige" />
<Caption color="uiTextPlaceholder">
{intl.formatMessage(
{ id: "{number} km to city center" },
{
number: getSingleDecimal(
hotel.location.distanceToCentre / 1000
),
}
)}
</Caption>
</div>
</div>
<Body>{hotel.hotelContent.texts.descriptions.short}</Body>
<ul className={styles.amenityList}>
{amenities.map((amenity) => {
const IconComponent = mapFacilityToIcon(amenity.id)
return (
<li className={styles.amenityItem} key={amenity.id}>
{IconComponent && (
<IconComponent color="grey80" width={20} height={20} />
)}
{amenity.name}
</li>
)
})}
</ul>
<Button intent="text" variant="icon" theme="base">
{intl.formatMessage({ id: "See on map" })}
<ChevronRightSmallIcon />
</Button>
{url && (
<>
<Divider variant="horizontal" color="primaryLightSubtle" />
<div className={styles.ctaWrapper}>
<Button intent="tertiary" theme="base" size="small" asChild>
<Link href={url}>
{intl.formatMessage({ id: "See hotel details" })}
</Link>
</Button>
</div>
</>
)}
</div>
</article>
)
}

32
components/ContentType/DestinationPage/HotelListing/hotelListing.module.css Normal file
View File

@@ -0,0 +1,32 @@
.container {
--scroll-margin-top: calc(
var(--booking-widget-mobile-height) + var(--Spacing-x2)
);
position: relative;
display: grid;
gap: var(--Spacing-x2);
scroll-margin-top: var(--scroll-margin-top);
}
.listHeader {
display: flex;
justify-content: space-between;
}
.hotelList {
list-style: none;
display: grid;
gap: var(--Spacing-x2);
}
.hotelList:not(.allVisible) li:nth-child(n + 6) {
display: none;
}
@media screen and (min-width: 768px) {
.container {
--scroll-margin-top: calc(
var(--booking-widget-desktop-height) + var(--Spacing-x2)
);
}
}

76
components/ContentType/DestinationPage/HotelListing/index.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client"
import { useRef, useState } from "react"
import { useIntl } from "react-intl"
import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { useScrollToTop } from "@/hooks/useScrollToTop"
import HotelListingItem from "./HotelListingItem"
import styles from "./hotelListing.module.css"
import type { HotelData } from "@/types/hotel"
interface HotelListingProps {
hotels: (HotelData & { url: string | null })[]
}
export default function HotelListing({ hotels }: HotelListingProps) {
const intl = useIntl()
const scrollRef = useRef<HTMLDivElement>(null)
const showToggleButton = hotels.length > 5
const [allHotelsVisible, setAllHotelsVisible] = useState(!showToggleButton)
const { showBackToTop, scrollToTop } = useScrollToTop({
threshold: 300,
elementRef: scrollRef,
})
function handleShowMore() {
if (scrollRef.current && allHotelsVisible) {
scrollRef.current.scrollIntoView({ behavior: "smooth" })
}
setAllHotelsVisible((state) => !state)
}
return (
<section className={styles.container} ref={scrollRef}>
<div className={styles.listHeader}>
<Subtitle type="two">
{intl.formatMessage(
{
id: `{count, plural, one {{count} Hotel} other {{count} Hotels}}`,
},
{ count: hotels.length }
)}
</Subtitle>
</div>
<ul
className={`${styles.hotelList} ${allHotelsVisible ? styles.allVisible : ""}`}
>
{hotels.map(({ hotel, url }) => (
<li key={hotel.name}>
<HotelListingItem hotel={hotel} url={url} />
</li>
))}
</ul>
{showToggleButton ? (
<ShowMoreButton
loadMoreData={handleShowMore}
showLess={allHotelsVisible}
textShowMore={intl.formatMessage({
id: "Show more",
})}
textShowLess={intl.formatMessage({
id: "Show less",
})}
/>
) : null}
{showBackToTop && (
<BackToTopButton position="center" onClick={scrollToTop} />
)}
</section>
)
}

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

@@ -51,6 +51,7 @@ export default function SelectHotelContent({
const { showBackToTop, scrollToTop } = useScrollToTop({
threshold: 490,
elementRef: listingContainerRef,
refScrollable: true,
})
const coordinates = useMemo(

2
components/ImageGallery/imageGallery.module.css
View File

@@ -13,6 +13,7 @@
}
.triggerArea {
position: relative;
display: flex;
cursor: pointer;
width: 100%;
@@ -21,6 +22,7 @@
.image {
width: 100%;
height: 100%;
object-fit: cover;
}

5
components/TempDesignSystem/BackToTopButton/backToTopButton.module.css
View File

@@ -35,6 +35,11 @@
right: 32px;
}
.center {
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 768px) {
.backToTopButtonText {
display: initial;

2
components/TempDesignSystem/BackToTopButton/index.tsx
View File

@@ -14,7 +14,7 @@ export function BackToTopButton({
position,
}: {
onClick: () => void
position: "left" | "right"
position: "left" | "right" | "center"
}) {
const intl = useIntl()
return (

1
components/TempDesignSystem/BackToTopButton/variants.ts
View File

@@ -7,6 +7,7 @@ export const backToTopButtonVariants = cva(styles.backToTopButton, {
position: {
left: styles.left,
right: styles.right,
center: styles.center,
},
},
defaultVariants: {

34
hooks/useScrollToTop.ts
View File

@@ -3,29 +3,43 @@ import { type RefObject, useEffect, useState } from "react"
interface UseScrollToTopProps {
threshold: number
elementRef?: RefObject<HTMLElement>
refScrollable?: boolean
}
export function useScrollToTop({ threshold, elementRef }: UseScrollToTopProps) {
export function useScrollToTop({
threshold,
elementRef,
refScrollable,
}: UseScrollToTopProps) {
const [showBackToTop, setShowBackToTop] = useState(false)
useEffect(() => {
const element = elementRef?.current ?? window
const element =
refScrollable && elementRef?.current ? elementRef?.current : window
function handleScroll() {
const scrollTop = elementRef?.current
? elementRef.current.scrollTop
: window.scrollY
setShowBackToTop(scrollTop > threshold)
let position = window.scrollY
if (elementRef?.current) {
position = refScrollable
? elementRef.current.scrollTop
: elementRef.current.getBoundingClientRect().top * -1
}
setShowBackToTop(position > threshold)
}
element.addEventListener("scroll", handleScroll, { passive: true })
return () => element.removeEventListener("scroll", handleScroll)
}, [threshold, elementRef])
}, [threshold, elementRef, refScrollable])
function scrollToTop() {
if (elementRef?.current)
elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
else window.scrollTo({ top: 0, behavior: "smooth" })
if (elementRef?.current) {
if (refScrollable) {
elementRef.current.scrollTo({ top: 0, behavior: "smooth" })
}
window.scrollTo({ top: elementRef.current.offsetTop, behavior: "smooth" })
} else {
window.scrollTo({ top: 0, behavior: "smooth" })
}
}
return { showBackToTop, scrollToTop }

3
i18n/dictionaries/da.json
View File

@@ -565,7 +565,8 @@
"{card} ending with {cardno}": "{card} slutter med {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} fra {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
"{count} Locations": "{count} steder",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotel} other {# hoteller}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
"{count} lowercase letter": "{count} lille bogstav",
"{count} number": "{count} nummer",
"{count} special character": "{count} speciel karakter",

3
i18n/dictionaries/de.json
View File

@@ -563,7 +563,8 @@
"{card} ending with {cardno}": "{card} endet mit {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} aus {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} aus {checkOutTime}",
"{count} Locations": "{count} Standorte",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# Standort} other {# Standorte}}",
"{count} lowercase letter": "{count} Kleinbuchstabe",
"{count} number": "{count} nummer",
"{count} special character": "{count} sonderzeichen",

3
i18n/dictionaries/en.json
View File

@@ -615,7 +615,8 @@
"{card} ending with {cardno}": "{card} ending with {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} from {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} from {checkOutTime}",
"{count} Locations": "{count} Locations",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {{count} Hotel} other {{count} Hotels}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {{count} Location} other {{count} Locations}}",
"{count} lowercase letter": "{count} lowercase letter",
"{count} number": "{count} number",
"{count} special character": "{count} special character",

3
i18n/dictionaries/fi.json
View File

@@ -563,7 +563,8 @@
"{card} ending with {cardno}": "{card} päättyen {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} alkaen {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} alkaen {checkOutTime}",
"{count} Locations": "{count} sijaintia",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotelli} other {# hotellit}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sijainti} other {# sijainnit}}",
"{count} lowercase letter": "{count} pien kirjain",
"{count} number": "{count} määrä",
"{count} special character": "{count} erikoishahmo",

3
i18n/dictionaries/no.json
View File

@@ -564,7 +564,8 @@
"{card} ending with {cardno}": "{card} slutter med {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} fra {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} fra {checkOutTime}",
"{count} Locations": "{count} steder",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hoteller}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# sted} other {# steder}}",
"{count} lowercase letter": "{count} liten bokstav",
"{count} number": "{count} antall",
"{count} special character": "{count} spesiell karakter",

3
i18n/dictionaries/sv.json
View File

@@ -566,7 +566,8 @@
"{card} ending with {cardno}": "{card} som slutar på {cardno}",
"{checkInDate} from {checkInTime}": "{checkInDate} från {checkInTime}",
"{checkOutDate} from {checkOutTime}": "{checkOutDate} från {checkOutTime}",
"{count} Locations": "{count} platser",
"{count, plural, one {{count} Hotel} other {{count} Hotels}}": "{count, plural, one {# hotell} other {# hotell}}",
"{count, plural, one {{count} Location} other {{count} Locations}}": "{count, plural, one {# plats} other {# platser}}",
"{count} lowercase letter": "{count} liten bokstav",
"{count} number": "{count} nummer",
"{count} special character": "{count} speciell karaktär",

29
server/routers/contentstack/destinationCityPage/query.ts
View File

@@ -4,7 +4,7 @@ import {
} from "@/lib/graphql/Query/DestinationCityPage/DestinationCityPage.graphql"
import { request } from "@/lib/graphql/request"
import { notFound } from "@/server/errors/trpc"
import { contentstackExtendedProcedureUID, router } from "@/server/trpc"
import { contentStackUidWithServiceProcedure, router } from "@/server/trpc"
import { generateTag } from "@/utils/generateTag"
@@ -20,7 +20,7 @@ import {
getDestinationCityPageRefsSuccessCounter,
getDestinationCityPageSuccessCounter,
} from "./telemetry"
import { generatePageTags } from "./utils"
import { generatePageTags, getHotelListData } from "./utils"
import type {
GetDestinationCityPageData,
@@ -28,8 +28,8 @@ import type {
} from "@/types/trpc/routers/contentstack/destinationCityPage"
export const destinationCityPageQueryRouter = router({
get: contentstackExtendedProcedureUID.query(async ({ ctx }) => {
const { lang, uid } = ctx
get: contentStackUidWithServiceProcedure.query(async ({ ctx }) => {
const { lang, uid, serviceToken } = ctx
getDestinationCityPageRefsCounter.add(1, { lang, uid })
console.info(
@@ -128,27 +128,31 @@ export const destinationCityPageQueryRouter = router({
throw notFoundError
}
const validatedDestinationCityPage = destinationCityPageSchema.safeParse(
response.data
)
const validatedResponse = destinationCityPageSchema.safeParse(response.data)
if (!validatedDestinationCityPage.success) {
if (!validatedResponse.success) {
getDestinationCityPageFailCounter.add(1, {
lang,
uid: `${uid}`,
error_type: "validation_error",
error: JSON.stringify(validatedDestinationCityPage.error),
error: JSON.stringify(validatedResponse.error),
})
console.error(
"contentstack.destinationCityPage validation error",
JSON.stringify({
query: { lang, uid },
error: validatedDestinationCityPage.error,
error: validatedResponse.error,
})
)
return null
}
const hotels = await getHotelListData(
lang,
serviceToken,
validatedResponse.data.destinationCityPage.destination_settings.city
)
getDestinationCityPageSuccessCounter.add(1, { lang, uid: `${uid}` })
console.info(
"contentstack.destinationCityPage success",
@@ -157,6 +161,9 @@ export const destinationCityPageQueryRouter = router({
})
)
return validatedDestinationCityPage.data
return {
...validatedResponse.data,
hotels,
}
}),
})

31
server/routers/contentstack/destinationCityPage/utils.ts
View File

@@ -1,5 +1,10 @@
import { generateTag, generateTagsFromSystem } from "@/utils/generateTag"
import { getHotel } from "../../hotels/query"
import { getHotelIdsByCityIdentifier } from "../../hotels/utils"
import { getHotelPageUrl } from "../hotelPage/utils"
import type { HotelData } from "@/types/hotel"
import type { System } from "@/types/requests/system"
import type { GetDestinationCityPageRefsSchema } from "@/types/trpc/routers/contentstack/destinationCityPage"
import type { Lang } from "@/constants/languages"
@@ -29,3 +34,29 @@ export function getConnections({
return connections
}
export async function getHotelListData(
lang: Lang,
serviceToken: string,
cityIdentifier: string
) {
const hotelIds = await getHotelIdsByCityIdentifier(
cityIdentifier,
serviceToken
)
const hotels = await Promise.all(
hotelIds.map(async (hotelId) => {
const [hotelData, url] = await Promise.all([
getHotel({ hotelId, language: lang }, serviceToken),
getHotelPageUrl(lang, hotelId),
])
return hotelData ? { ...hotelData, url } : null
})
)
return hotels.filter(
(hotel): hotel is HotelData & { url: string | null } => !!hotel
)
}

55
server/routers/contentstack/destinationCountryPage/query.ts
View File

@@ -1,4 +1,3 @@
import { env } from "@/env/server"
import {
GetDestinationCountryPage,
GetDestinationCountryPageRefs,
@@ -10,7 +9,6 @@ import { toApiLang } from "@/server/utils"
import { generateTag } from "@/utils/generateTag"
import { getCitiesByCountry } from "../../hotels/utils"
import {
destinationCountryPageRefsSchema,
destinationCountryPageSchema,
@@ -23,10 +21,9 @@ import {
getDestinationCountryPageRefsSuccessCounter,
getDestinationCountryPageSuccessCounter,
} from "./telemetry"
import { generatePageTags, getCityListDataByCityIdentifier } from "./utils"
import { generatePageTags, getCityPages } from "./utils"
import { ApiCountry } from "@/types/enums/country"
import type { RequestOptionsWithOutBody } from "@/types/fetch"
import type {
GetDestinationCountryPageData,
GetDestinationCountryPageRefsSchema,
@@ -155,44 +152,10 @@ export const destinationCountryPageQueryRouter = router({
return null
}
const params = new URLSearchParams({
language: apiLang,
})
const options: RequestOptionsWithOutBody = {
// needs to clear default option as only
// cache or next.revalidate is permitted
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_HOTELS,
},
}
const selectedCountry =
validatedResponse.data.destinationCountryPage.destination_settings.country
const apiCountry = ApiCountry[lang][selectedCountry]
const cities = await getCitiesByCountry(
[apiCountry],
options,
params,
const cities = await getCityPages(
lang,
true,
"destinationCountryPage"
)
const cityPages = await Promise.all(
cities[apiCountry].map(async (city) => {
if (!city.cityIdentifier) {
return null
}
const data = await getCityListDataByCityIdentifier(
lang,
city.cityIdentifier
)
return data ? { ...data, cityName: city.name } : null
})
serviceToken,
validatedResponse.data.destinationCountryPage.destination_settings.country
)
getDestinationCountryPageSuccessCounter.add(1, { lang, uid: `${uid}` })
@@ -205,10 +168,12 @@ export const destinationCountryPageQueryRouter = router({
return {
...validatedResponse.data,
translatedCountry: apiCountry,
cities: cityPages
.flat()
.filter((city): city is NonNullable<typeof city> => !!city),
translatedCountry:
ApiCountry[lang][
validatedResponse.data.destinationCountryPage.destination_settings
.country
],
cities,
}
}),
})

49
server/routers/contentstack/destinationCountryPage/utils.ts
View File

@@ -1,8 +1,11 @@
import { env } from "@/env/server"
import { GetDestinationCityListData } from "@/lib/graphql/Query/DestinationCityPage/DestinationCityListData.graphql"
import { request } from "@/lib/graphql/request"
import { toApiLang } from "@/server/utils"
import { generateTag, generateTagsFromSystem } from "@/utils/generateTag"
import { getCitiesByCountry } from "../../hotels/utils"
import { destinationCityListDataSchema } from "../destinationCityPage/output"
import {
getCityListDataCounter,
@@ -10,6 +13,8 @@ import {
getCityListDataSuccessCounter,
} from "./telemetry"
import { ApiCountry, type Country } from "@/types/enums/country"
import type { RequestOptionsWithOutBody } from "@/types/fetch"
import type { System } from "@/types/requests/system"
import type { GetDestinationCityListDataResponse } from "@/types/trpc/routers/contentstack/destinationCityPage"
import type { GetDestinationCountryPageRefsSchema } from "@/types/trpc/routers/contentstack/destinationCountryPage"
@@ -108,3 +113,47 @@ export async function getCityListDataByCityIdentifier(
return validatedResponse.data
}
export async function getCityPages(
lang: Lang,
serviceToken: string,
country: Country
) {
const apiLang = toApiLang(lang)
const params = new URLSearchParams({
language: apiLang,
})
const options: RequestOptionsWithOutBody = {
// needs to clear default option as only
// cache or next.revalidate is permitted
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_HOTELS,
},
}
const apiCountry = ApiCountry[lang][country]
const cities = await getCitiesByCountry([apiCountry], options, params, lang)
const publishedCities = cities[apiCountry].filter((city) => city.isPublished)
const cityPages = await Promise.all(
publishedCities.map(async (city) => {
if (!city.cityIdentifier) {
return null
}
const data = await getCityListDataByCityIdentifier(
lang,
city.cityIdentifier
)
return data ? { ...data, cityName: city.name } : null
})
)
return cityPages
.flat()
.filter((city): city is NonNullable<typeof city> => !!city)
}

13
server/routers/hotels/output.ts
View File

@@ -251,16 +251,23 @@ export const packagesSchema = z
})
.transform(({ data }) => data?.attributes.packages)
export const getHotelIdsByCityIdSchema = z
export const getHotelIdsSchema = z
.object({
data: z.array(
z.object({
// We only care about the hotel id
attributes: z.object({
isPublished: z.boolean(),
}),
id: z.string(),
})
),
})
.transform((data) => data.data.map((hotel) => hotel.id))
.transform(({ data }) => {
const filteredHotels = data.filter(
(hotel) => !!hotel.attributes.isPublished
)
return filteredHotels.map((hotel) => hotel.id)
})
export const getNearbyHotelIdsSchema = z
.object({

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

@@ -91,7 +91,7 @@ export const getHotel = cache(
})
console.info(
"api.hotels.hotelData start",
JSON.stringify({ query: { hotelId, params } })
JSON.stringify({ query: { hotelId, params: params.toString() } })
)
const apiResponse = await api.get(
@@ -126,7 +126,7 @@ export const getHotel = cache(
console.error(
"api.hotels.hotelData error",
JSON.stringify({
query: { hotelId, params },
query: { hotelId, params: params.toString() },
error: {
status: apiResponse.status,
statusText: apiResponse.statusText,
@@ -151,7 +151,7 @@ export const getHotel = cache(
console.error(
"api.hotels.hotelData validation error",
JSON.stringify({
query: { hotelId, params },
query: { hotelId, params: params.toString() },
error: validateHotelData.error,
})
)
@@ -165,7 +165,7 @@ export const getHotel = cache(
console.info(
"api.hotels.hotelData success",
JSON.stringify({
query: { hotelId, params: params },
query: { hotelId, params: params.toString() },
})
)
const hotelData = validateHotelData.data

2
server/routers/hotels/schemas/additionalData.ts
View File

@@ -30,7 +30,7 @@ export const restaurantsOverviewPageSchema = z.object({
})
export const extraPageSchema = z.object({
elevatorPitch: z.string().optional(),
elevatorPitch: z.string().default(""),
mainBody: z.string().optional(),
})

92
server/routers/hotels/utils.ts
View File

@@ -1,14 +1,17 @@
import deepmerge from "deepmerge"
import { unstable_cache } from "next/cache"
import { Lang } from "@/constants/languages"
import { env } from "@/env/server"
import * as api from "@/lib/api"
import { toApiLang } from "@/server/utils"
import { metrics } from "./metrics"
import {
citiesByCountrySchema,
citiesSchema,
countriesSchema,
getHotelIdsByCityIdSchema,
getHotelIdsSchema,
locationsSchema,
} from "./output"
@@ -17,10 +20,9 @@ import { PointOfInterestGroupEnum } from "@/types/enums/pointOfInterest"
import type { RequestOptionsWithOutBody } from "@/types/fetch"
import type {
CitiesGroupedByCountry,
Countries,
CityLocation,
HotelLocation,
} from "@/types/trpc/routers/hotel/locations"
import type { Lang } from "@/constants/languages"
import type { Endpoint } from "@/lib/api/endpoints"
export function getPoiGroupByCategoryName(category: string | undefined) {
@@ -305,11 +307,11 @@ export async function getHotelIdsByCityId(
})
)
return null
return []
}
const apiJson = await apiResponse.json()
const validatedHotelIds = getHotelIdsByCityIdSchema.safeParse(apiJson)
const validatedHotelIds = getHotelIdsSchema.safeParse(apiJson)
if (!validatedHotelIds.success) {
metrics.hotelIds.fail.add(1, {
params: params.toString(),
@@ -323,19 +325,22 @@ export async function getHotelIdsByCityId(
error: validatedHotelIds.error,
})
)
return null
return []
}
metrics.hotelIds.success.add(1, { cityId })
console.info(
"api.hotel.hotel-ids success",
JSON.stringify({ params: params.toString() })
JSON.stringify({
params: params.toString(),
response: validatedHotelIds.data,
})
)
return validatedHotelIds.data
},
[`hotelsByCityId`, params.toString()],
{ revalidate: TWENTYFOUR_HOURS }
{ revalidate: env.CACHE_TIME_HOTELS }
)(params)
}
@@ -376,11 +381,11 @@ export async function getHotelIdsByCountry(
})
)
return null
return []
}
const apiJson = await apiResponse.json()
const validatedHotelIds = getHotelIdsByCityIdSchema.safeParse(apiJson)
const validatedHotelIds = getHotelIdsSchema.safeParse(apiJson)
if (!validatedHotelIds.success) {
metrics.hotelIds.fail.add(1, {
country,
@@ -394,7 +399,7 @@ export async function getHotelIdsByCountry(
error: validatedHotelIds.error,
})
)
return null
return []
}
metrics.hotelIds.success.add(1, { country })
@@ -406,6 +411,69 @@ export async function getHotelIdsByCountry(
return validatedHotelIds.data
},
[`hotelsByCountry`, params.toString()],
{ revalidate: TWENTYFOUR_HOURS }
{ revalidate: env.CACHE_TIME_HOTELS }
)(params)
}
export async function getHotelIdsByCityIdentifier(
cityIdentifier: string,
serviceToken: string
) {
const apiLang = toApiLang(Lang.en)
const cityId = await getCityIdByCityIdentifier(cityIdentifier, serviceToken)
if (!cityId) {
return []
}
const hotelIdsParams = new URLSearchParams({
language: apiLang,
city: cityId,
onlyBasicInfo: "true",
})
const options: RequestOptionsWithOutBody = {
// needs to clear default option as only
// cache or next.revalidate is permitted
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_HOTELS,
},
}
const hotelIds = await getHotelIdsByCityId(cityId, options, hotelIdsParams)
return hotelIds
}
export async function getCityIdByCityIdentifier(
cityIdentifier: string,
serviceToken: string
) {
const lang = Lang.en
const apiLang = toApiLang(lang)
const options: RequestOptionsWithOutBody = {
// needs to clear default option as only
// cache or next.revalidate is permitted
cache: undefined,
headers: {
Authorization: `Bearer ${serviceToken}`,
},
next: {
revalidate: env.CACHE_TIME_HOTELS,
},
}
const params = new URLSearchParams({
language: apiLang,
})
const locations = await getLocations(lang, options, params, null)
if (!locations || "error" in locations) {
return null
}
const cityId = locations
.filter((loc): loc is CityLocation => loc.type === "cities")
.find((loc) => loc.cityIdentifier === cityIdentifier)?.id
return cityId ?? null
}