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

Merged master into feat/validsession

Browse Source
This commit is contained in:
Linus Flood
2024-12-18 06:23:11 +00:00
parent 673061a471 13717118c6
commit b22c2ba73e
37 changed files with 649 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/[...paths]/page.tsx Normal file
View File

@@ -0,0 +1 @@
export { default } from "../page"

32
app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { env } from "@/env/server"
import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
import BookingWidget, { preload } from "@/components/BookingWidget"
import { getLang } from "@/i18n/serverContext"
import type { ContentTypeParams, PageArgs } from "@/types/params"
export default async function BookingWidgetPage({
params,
searchParams,
}: PageArgs<ContentTypeParams, URLSearchParams>) {
if (!env.ENABLE_BOOKING_WIDGET_HOTELRESERVATION_PATH) return null
preload()
const urlParams = new URLSearchParams()
if (params.contentType === "hotel-page") {
const hotelPageData = await getHotelPage()
const hotelData = await getHotelData({
hotelId: hotelPageData?.hotel_page_id || "",
language: getLang(),
})
urlParams.set("hotel", hotelData?.data?.id || "")
urlParams.set("city", hotelData?.data?.attributes?.cityName || "")
return <BookingWidget searchParams={urlParams} />
}
return <BookingWidget searchParams={searchParams} />
}

8
components/BookingWidget/Client.tsx
View File

@@ -13,6 +13,7 @@ import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
import { CloseLargeIcon } from "@/components/Icons"
import useStickyPosition from "@/hooks/useStickyPosition"
import { debounce } from "@/utils/debounce"
import isValidJson from "@/utils/isValidJson"
import { getFormattedUrlQueryParams } from "@/utils/url"
import MobileToggleButton, {
@@ -79,8 +80,8 @@ export default function BookingWidgetClient({
const selectedLocation = bookingWidgetSearchData
? getLocationObj(
(bookingWidgetSearchData.city ??
bookingWidgetSearchData.hotel) as string
(bookingWidgetSearchData.hotel ??
bookingWidgetSearchData.city) as string
)
: undefined
@@ -153,8 +154,9 @@ export default function BookingWidgetClient({
typeof window !== "undefined"
? sessionStorage.getItem("searchData")
: undefined
const initialSelectedLocation: Location | undefined =
sessionStorageSearchData
sessionStorageSearchData && isValidJson(sessionStorageSearchData)
? JSON.parse(sessionStorageSearchData)
: undefined

11
components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -1,10 +1,8 @@
"use client"
import { useEffect, useMemo, useRef, useState } from "react"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import { StickyElementNameEnum } from "@/stores/sticky-position"
import { EditIcon, SearchIcon } from "@/components/Icons"
import SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -12,7 +10,7 @@ import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"
import useStickyPosition from "@/hooks/useStickyPosition"
import isValidJson from "@/utils/isValidJson"
import styles from "./button.module.css"
@@ -31,9 +29,10 @@ export default function MobileToggleButton({
const location = useWatch({ name: "location" })
const rooms: BookingWidgetSchema["rooms"] = useWatch({ name: "rooms" })
const parsedLocation: Location | null = location
? JSON.parse(decodeURIComponent(location))
: null
const parsedLocation: Location | null =
location && isValidJson(location)
? JSON.parse(decodeURIComponent(location))
: null
const nights = dt(d.toDate).diff(dt(d.fromDate), "days")

41
components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -13,6 +13,7 @@ import { useIntl } from "react-intl"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import isValidJson from "@/utils/isValidJson"
import Input from "../Input"
import { init, localStorageKey, reducer, sessionStorageKey } from "./reducer"
@@ -28,16 +29,20 @@ import type { Location } from "@/types/trpc/routers/hotel/locations"
const name = "search"
export default function Search({ locations, handlePressEnter }: SearchProps) {
const { register, setValue, unregister } =
const { register, setValue, unregister, getValues } =
useFormContext<BookingWidgetSchema>()
const intl = useIntl()
const value = useWatch({ name })
const locationString = getValues("location")
const location =
locationString && isValidJson(locationString)
? JSON.parse(decodeURIComponent(locationString))
: null
const [state, dispatch] = useReducer(
reducer,
{ defaultLocations: locations },
init
)
const handleMatchLocations = useCallback(
function (searchValue: string) {
return locations.filter((location) => {
@@ -121,6 +126,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
typeof window !== "undefined"
? sessionStorage.getItem(sessionStorageKey)
: undefined
const searchHistory =
typeof window !== "undefined"
? localStorage.getItem(localStorageKey)
@@ -128,8 +134,14 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
if (searchData || searchHistory) {
dispatch({
payload: {
searchData: searchData ? JSON.parse(searchData) : undefined,
searchHistory: searchHistory ? JSON.parse(searchHistory) : null,
searchData:
isValidJson(searchData) && searchData
? JSON.parse(searchData)
: undefined,
searchHistory:
isValidJson(searchHistory) && searchHistory
? JSON.parse(searchHistory)
: null,
},
type: ActionType.SET_STORAGE_DATA,
})
@@ -157,6 +169,21 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
}
}, [stayType, stayValue, unregister, setValue])
useEffect(() => {
sessionStorage.setItem(sessionStorageKey, locationString)
}, [locationString])
function getLocationLabel(): string {
if (location?.type === "hotels") {
return location?.relationships?.city?.name || ""
}
if (state.searchData?.type === "hotels") {
return state.searchData?.relationships?.city?.name || ""
}
return intl.formatMessage({ id: "Where to" })
}
return (
<Downshift
initialSelectedItem={state.searchData}
@@ -187,11 +214,7 @@ export default function Search({ locations, handlePressEnter }: SearchProps) {
color={isOpen ? "uiTextActive" : "red"}
asChild
>
<span>
{state.searchData?.type === "hotels"
? state.searchData?.relationships?.city?.name
: intl.formatMessage({ id: "Where to" })}
</span>
<span>{getLocationLabel()}</span>
</Caption>
</label>
<div {...getRootProps({}, { suppressRefError: true })}>

7
components/Forms/BookingWidget/schema.ts
View File

@@ -45,7 +45,10 @@ export const bookingWidgetSchema = z
}),
location: z.string().refine(
(value) => {
if (value) {
if (!value) {
return false
}
try {
const parsedValue: Location = JSON.parse(decodeURIComponent(value))
switch (parsedValue?.type) {
case "cities":
@@ -54,6 +57,8 @@ export const bookingWidgetSchema = z
default:
return false
}
} catch (error) {
return false
}
},
{ message: "Required" }

6
components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx
View File

@@ -1,7 +1,7 @@
import { useIntl } from "react-intl"
import { ErrorCircleIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./noPriceAvailable.module.css"
@@ -13,11 +13,11 @@ export default function NoPriceAvailableCard() {
<div>
<ErrorCircleIcon color="red" />
</div>
<Body>
<Caption color="uiTextHighContrast">
{intl.formatMessage({
id: "There are no rooms available that match your request.",
})}
</Body>
</Caption>
</div>
</div>
)

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

@@ -57,6 +57,12 @@
display: none;
font-style: normal;
}
.addressMobile {
display: block;
font-style: normal;
}
.facilities {
display: flex;
flex-wrap: wrap;

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

@@ -98,20 +98,24 @@ function HotelCard({
{hotelData.address.streetAddress}, {hotelData.address.city}
</Caption>
</address>
<Caption color="baseTextMediumContrast" type="underline" asChild>
<Link
href={`https://www.google.com/maps/dir/?api=1&destination=${hotelData.location.latitude},${hotelData.location.longitude}`}
target="_blank"
aria-label={intl.formatMessage({
id: "Driving directions",
})}
title={intl.formatMessage({
id: "Driving directions",
})}
>
{hotelData.address.streetAddress}, {hotelData.address.city}
</Link>
</Caption>
<address className={styles.addressMobile}>
<Caption color="burgundy" type="underline" asChild>
<Link
href={`https://www.google.com/maps/dir/?api=1&destination=${hotelData.location.latitude},${hotelData.location.longitude}`}
target="_blank"
aria-label={intl.formatMessage({
id: "Driving directions",
})}
title={intl.formatMessage({
id: "Driving directions",
})}
color="burgundy"
size="small"
>
{hotelData.address.streetAddress}, {hotelData.address.city}
</Link>
</Caption>
</address>
<div>
<Divider variant="vertical" color="subtle" />
</div>

45
components/HotelReservation/HotelCardDialog/HotelCardDialogImage/hotelCardDialogImage.module.css Normal file
View File

@@ -0,0 +1,45 @@
.imagePlaceholder {
height: 100%;
width: 100%;
background-color: #fff;
background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
linear-gradient(-45deg, #000000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000000 75%),
linear-gradient(-45deg, transparent 75%, #000000 75%);
background-size: 120px 120px;
background-position:
0 0,
0 60px,
60px -60px,
-60px 0;
}
.imageContainer {
position: relative;
min-width: 177px;
border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
overflow: hidden;
}
.imageContainer.top {
width: 80px;
min-width: 80px;
height: 90px;
border-radius: var(--Corner-radius-Medium);
}
.imageContainer img {
object-fit: cover;
}
.imageContainer .tripAdvisor {
position: absolute;
left: 7px;
top: 7px;
border-radius: 2px;
}
.imageContainer.top .tripAdvisor {
left: 4px;
top: 4px;
}

41
components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { TripAdvisorIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Chip from "@/components/TempDesignSystem/Chip"
import { hotelCardDialogImageVariants } from "./variants"
import styles from "./hotelCardDialogImage.module.css"
import type { HotelCardDialogImageProps } from "@/types/components/hotelReservation/selectHotel/map"
export default function HotelCardDialogImage({
firstImage,
altText,
ratings,
imageError,
setImageError,
position,
}: HotelCardDialogImageProps) {
const classNames = hotelCardDialogImageVariants({ position })
return (
<div className={classNames}>
{!firstImage || imageError ? (
<div className={styles.imagePlaceholder} />
) : (
<Image
src={firstImage}
alt={altText || ""}
fill
onError={() => setImageError(true)}
/>
)}
<div className={styles.tripAdvisor}>
<Chip intent="secondary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
{ratings}
</Chip>
</div>
</div>
)
}

15
components/HotelReservation/HotelCardDialog/HotelCardDialogImage/variants.ts Normal file
View File

@@ -0,0 +1,15 @@
import { cva } from "class-variance-authority"
import styles from "./hotelCardDialogImage.module.css"
export const hotelCardDialogImageVariants = cva(styles.imageContainer, {
variants: {
position: {
top: styles.top,
left: styles.left,
},
},
defaultVariants: {
position: "top",
},
})

116
components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx Normal file
View File

@@ -0,0 +1,116 @@
import { useIntl } from "react-intl"
import { selectRate } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"
import styles from "../hotelCardDialog.module.css"
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"
interface ListingHotelCardProps {
data: HotelPin
lang: Lang
imageError: boolean
setImageError: (error: boolean) => void
}
export default function ListingHotelCardDialog({
data,
lang,
imageError,
setImageError,
}: ListingHotelCardProps) {
const intl = useIntl()
const {
name,
publicPrice,
memberPrice,
currency,
amenities,
images,
ratings,
operaId,
} = data
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
return (
<div className={styles.content}>
<div className={styles.header}>
<HotelCardDialogImage
firstImage={firstImage}
altText={altText}
ratings={ratings || 0}
imageError={imageError}
setImageError={setImageError}
position="top"
/>
<div className={styles.detailsContainer}>
<div className={styles.name}>
<Subtitle type="two">{name}</Subtitle>
</div>
<div className={styles.facilities}>
{amenities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent width={20} height={20} color="grey80" />
)}
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
</div>
</div>
</div>
{publicPrice || memberPrice ? (
<div className={styles.bottomContainer}>
<div className={styles.pricesContainer}>
<Caption color="uiTextHighContrast">
{intl.formatMessage({ id: "Per night from" })}
</Caption>
<div className={styles.listingPrices}>
{publicPrice && (
<Subtitle type="two">
{publicPrice} {currency}
</Subtitle>
)}
{publicPrice && memberPrice && <Caption>/</Caption>}
{memberPrice && (
<Subtitle type="two" color="red" className={styles.memberPrice}>
{memberPrice} {currency}
</Subtitle>
)}
</div>
</div>
<Button asChild theme="base" size="small" className={styles.button}>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</div>
) : (
<NoPriceAvailableCard />
)}
</div>
)
}

132
components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx Normal file
View File

@@ -0,0 +1,132 @@
import { useIntl } from "react-intl"
import { selectRate } from "@/constants/routes/hotelReservation"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import NoPriceAvailableCard from "../../HotelCard/NoPriceAvailableCard"
import HotelCardDialogImage from "../HotelCardDialogImage"
import styles from "../hotelCardDialog.module.css"
import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"
interface StandaloneHotelCardProps {
data: HotelPin
lang: Lang
imageError: boolean
setImageError: (error: boolean) => void
}
export default function StandaloneHotelCardDialog({
data,
lang,
imageError,
setImageError,
}: StandaloneHotelCardProps) {
const intl = useIntl()
const {
name,
publicPrice,
memberPrice,
currency,
amenities,
images,
ratings,
operaId,
} = data
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
return (
<>
<HotelCardDialogImage
firstImage={firstImage}
altText={altText}
ratings={ratings || 0}
imageError={imageError}
setImageError={setImageError}
position="left"
/>
<div className={styles.content}>
<div className={styles.header}>
<div className={styles.detailsContainer}>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
</div>
</div>
<div className={styles.facilities}>
{amenities.slice(0, 3).map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent width={16} height={16} color="grey80" />
)}
<Footnote color="uiTextMediumContrast">
{facility.name}
</Footnote>
</div>
)
})}
</div>
<div className={styles.pricesContainer}>
{publicPrice || memberPrice ? (
<>
<div className={styles.priceCard}>
<Caption type="bold">
{intl.formatMessage({ id: "From" })}
</Caption>
{publicPrice && (
<Subtitle type="two">
{publicPrice} {currency}
<Body asChild>
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
{memberPrice && (
<Subtitle
type="two"
color="red"
className={styles.memberPrice}
>
{memberPrice} {currency}
<Body asChild color="red">
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
</div>
<Button
asChild
theme="base"
size="small"
className={styles.button}
>
<Link
href={`${selectRate(lang)}?hotel=${operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</>
) : (
<NoPriceAvailableCard />
)}
</div>
</div>
</>
)
}

119
components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
View File

@@ -10,7 +10,7 @@
.dialogContainer {
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Medium);
min-width: 334px;
min-width: 402px;
background: var(--Base-Surface-Primary-light-Normal);
box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
flex-direction: row;
@@ -18,83 +18,125 @@
position: relative;
}
.dialogContainer[data-type="listing"] {
min-width: 358px;
}
.dialogContainer[data-type="listing"] .header {
display: flex;
flex-direction: row;
gap: var(--Spacing-x-one-and-half);
}
.name {
height: 48px;
max-width: 180px;
margin-bottom: var(--Spacing-x-half);
display: flex;
align-items: center;
}
.closeIcon {
position: absolute;
top: 7px;
right: 7px;
top: 8px;
right: 8px;
}
.imageContainer {
position: relative;
min-width: 177px;
border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
overflow: hidden;
}
.imageContainer img {
object-fit: cover;
}
.tripAdvisor {
position: absolute;
display: block;
left: 7px;
top: 7px;
}
.content {
width: 100%;
min-width: 220px;
padding: var(--Spacing-x-one-and-half);
gap: var(--Spacing-x1);
display: flex;
flex-direction: column;
}
.dialogContainer[data-type="listing"] .content {
gap: var(--Spacing-x-one-and-half);
}
.facilities {
display: flex;
flex-wrap: wrap;
gap: 0 var(--Spacing-x1);
}
.dialogContainer[data-type="listing"] .facilities {
display: flex;
flex-wrap: nowrap;
overflow: hidden;
white-space: nowrap;
position: relative;
padding-right: 20px;
gap: 0 var(--Spacing-x1);
max-width: 242px;
}
.dialogContainer[data-type="listing"] .facilities::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(
to left,
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
pointer-events: none;
}
.facilitiesItem {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
}
.dialogContainer[data-type="listing"] .facilitiesItem {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--Spacing-x-half);
}
.priceCard {
border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x-half) var(--Spacing-x1);
background: var(--Base-Surface-Secondary-light-Normal);
margin-top: var(--Spacing-x1);
}
.prices {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
justify-content: space-between;
}
.imagePlaceholder {
height: 100%;
width: 100%;
background-color: #fff;
background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
linear-gradient(-45deg, #000000 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #000000 75%),
linear-gradient(-45deg, transparent 75%, #000000 75%);
background-size: 120px 120px;
background-position:
0 0,
0 60px,
60px -60px,
-60px 0;
.bottomContainer {
display: flex;
flex-direction: row;
border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
padding-top: var(--Spacing-x2);
padding-bottom: var(--Spacing-x-half);
}
.pricesContainer {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
justify-content: space-between;
}
.dialogContainer[data-type="listing"] .pricesContainer {
flex: 1;
height: 44px;
gap: 0;
justify-content: flex-start;
}
.listingPrices {
display: flex;
flex-direction: row;
gap: var(--Spacing-x1);
}
.perNight {
@@ -106,9 +148,6 @@
}
@media (min-width: 768px) {
.facilities {
display: none;
}
.dialog {
bottom: 32px;
}

133
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -2,21 +2,11 @@
import { useParams } from "next/navigation"
import { useState } from "react"
import { useIntl } from "react-intl"
import { selectRate } from "@/constants/routes/hotelReservation"
import { CloseLargeIcon } from "@/components/Icons"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { CloseLargeIcon, TripAdvisorIcon } from "@/components/Icons"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Chip from "@/components/TempDesignSystem/Chip"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import NoPriceAvailableCard from "../HotelCard/NoPriceAvailableCard"
import ListingHotelCardDialog from "./ListingHotelCardDialog"
import StandaloneHotelCardDialog from "./StandaloneHotelCardDialog"
import styles from "./hotelCardDialog.module.css"
@@ -26,124 +16,41 @@ import type { Lang } from "@/constants/languages"
export default function HotelCardDialog({
data,
isOpen,
type = "standalone",
handleClose,
}: HotelCardDialogProps) {
const params = useParams()
const lang = params.lang as Lang
const intl = useIntl()
const [imageError, setImageError] = useState(false)
if (!data) {
return null
}
const {
name,
publicPrice,
memberPrice,
currency,
amenities,
images,
ratings,
} = data
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
return (
<dialog open={isOpen} className={styles.dialog}>
<div className={styles.dialogContainer}>
<div className={styles.dialogContainer} data-type={type}>
<CloseLargeIcon
onClick={handleClose}
className={styles.closeIcon}
width={16}
height={16}
/>
<div className={styles.imageContainer}>
{!firstImage || imageError ? (
<div className={styles.imagePlaceholder} />
) : (
<Image
src={firstImage}
alt={altText}
fill
onError={() => setImageError(true)}
/>
)}
<div className={styles.tripAdvisor}>
<Chip intent="secondary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="burgundy" />
{ratings}
</Chip>
</div>
</div>
<div className={styles.content}>
<div className={styles.name}>
<Body textTransform="bold">{name}</Body>
</div>
<div className={styles.facilities}>
{amenities.map((facility) => {
const IconComponent = mapFacilityToIcon(facility.id)
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && (
<IconComponent width={16} height={16} color="grey80" />
)}
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
</div>
<div className={styles.prices}>
{publicPrice || memberPrice ? (
<>
<div className={styles.priceCard}>
<Caption type="bold">
{intl.formatMessage({ id: "From" })}
</Caption>
{publicPrice && (
<Subtitle type="two">
{publicPrice} {currency}
<Body asChild>
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
{memberPrice && (
<Subtitle
type="two"
color="red"
className={styles.memberPrice}
>
{memberPrice} {currency}
<Body asChild color="red">
<span>/{intl.formatMessage({ id: "night" })}</span>
</Body>
</Subtitle>
)}
</div>
<Button
asChild
theme="base"
size="small"
className={styles.button}
>
<Link
href={`${selectRate(lang)}?hotel=${data.operaId}`}
color="none"
keepSearchParams
>
{intl.formatMessage({ id: "See rooms" })}
</Link>
</Button>
</>
) : (
<NoPriceAvailableCard />
)}
</div>
</div>
{type === "standalone" ? (
<StandaloneHotelCardDialog
data={data}
lang={lang}
imageError={imageError}
setImageError={setImageError}
/>
) : (
<ListingHotelCardDialog
data={data}
lang={lang}
imageError={imageError}
setImageError={setImageError}
/>
)}
</div>
</dialog>
)

1
components/HotelReservation/HotelCardDialogListing/index.tsx
View File

@@ -95,6 +95,7 @@ export default function HotelCardDialogListing({
data={data}
isOpen={!!activeHotelCard}
handleClose={handleClose}
type="listing"
/>
</div>
)

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

@@ -25,7 +25,7 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
...facility,
icon: facility.icon ?? "None",
}))
.slice(0, 3),
.slice(0, 5),
ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
operaId: hotel.hotelData.operaId,
facilityIds: hotel.hotelData.detailedFacilities.map(

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

@@ -89,8 +89,8 @@ export async function SelectHotelMapContainer({
leadTime: differenceInCalendarDays(arrivalDate, new Date()),
searchType: "destination",
bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
country: validHotels?.[0].hotelData.address.country,
region: validHotels?.[0].hotelData.address.city,
country: validHotels?.[0]?.hotelData.address.country,
region: validHotels?.[0]?.hotelData.address.city,
}
return (

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

@@ -99,10 +99,12 @@ export default function SelectHotelContent({
() =>
debounce(() => {
if (!map) return
setShowSkeleton(true)
if (isAboveMobile) {
setShowSkeleton(true)
}
getHotelCards()
}, 100),
[map, getHotelCards]
[map, getHotelCards, isAboveMobile]
)
const closeButton = (

4
components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
View File

@@ -23,6 +23,10 @@
border: none;
}
.skeletonContainer {
display: none;
}
@media (min-width: 768px) {
.container .closeButton {
display: flex;

4
components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx
View File

@@ -13,14 +13,14 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
<div className={styles.skeletonContainer}>
<header className={styles.header}>
<div className={styles.breadcrumbs}>
<SkeletonShimmer height={"25px"} width={"400px"} />
<SkeletonShimmer height={"25px"} width={"300px"} />
</div>
<div className={styles.title}>
<div className={styles.cityInformation}>
<SkeletonShimmer height={"25px"} width={"200px"} />
</div>
<div className={styles.sorter}>
<SkeletonShimmer height={"60px"} />
<SkeletonShimmer height={"60px"} width={"100%"} />
</div>
</div>
</header>

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

@@ -126,8 +126,8 @@ export default async function SelectHotel({
leadTime: differenceInCalendarDays(arrivalDate, new Date()),
searchType: "destination",
bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
country: validHotels?.[0].hotelData.address.country,
region: validHotels?.[0].hotelData.address.city,
country: validHotels?.[0]?.hotelData.address.country,
region: validHotels?.[0]?.hotelData.address.city,
}
return (

1
i18n/dictionaries/da.json
View File

@@ -307,6 +307,7 @@
"Payment": "Betaling",
"Payment Guarantee": "Garanti betaling",
"Payment info": "Betalingsoplysninger",
"Per night from": "Per nat fra",
"Pet Room": "Kæledyrsrum",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Kæledyrsrum har en ekstra gebyr på 20 EUR per ophold",
"Phone": "Telefon",

1
i18n/dictionaries/de.json
View File

@@ -306,6 +306,7 @@
"Payment": "Zahlung",
"Payment Guarantee": "Zahlungsgarantie",
"Payment info": "Zahlungsinformationen",
"Per night from": "Pro Nacht ab",
"Pet Room": "Haustierzimmer",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Haustierzimmer haben einen zusätzlichen Preis von 20 EUR pro Aufenthalt",
"Phone": "Telefon",

1
i18n/dictionaries/en.json
View File

@@ -332,6 +332,7 @@
"Payment method": "Payment method",
"Payment received": "Payment received",
"Payment status": "Payment status",
"Per night from": "Per night from",
"Pet Room": "Pet room",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Pet-friendly rooms have an additional fee of 20 EUR per stay",
"Phone": "Phone",

1
i18n/dictionaries/fi.json
View File

@@ -307,6 +307,7 @@
"Payment": "Maksu",
"Payment Guarantee": "Varmistusmaksu",
"Payment info": "Maksutiedot",
"Per night from": "Per yö alkaen",
"Pet Room": "Lemmikkihuone",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Lemmikkihuoneen lisäkustannus on 20 EUR per majoitus",
"Phone": "Puhelin",

1
i18n/dictionaries/no.json
View File

@@ -306,6 +306,7 @@
"Payment": "Betaling",
"Payment Guarantee": "Garantera betalning",
"Payment info": "Betalingsinformasjon",
"Per night from": "Per nat fra",
"Pet Room": "Kjæledyrsrom",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Kjæledyrsrom har en tilleggsavgift på 20 EUR per opphold",
"Phone": "Telefon",

1
i18n/dictionaries/sv.json
View File

@@ -306,6 +306,7 @@
"Payment": "Betalning",
"Payment Guarantee": "Garantera betalning",
"Payment info": "Betalningsinformation",
"Per night from": "Per natt från",
"Pet Room": "Husdjursrum",
"Pet-friendly rooms have an additional fee of 20 EUR per stay": "Husdjursrum har en extra avgift på 20 EUR per vistelse",
"Phone": "Telefon",

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

@@ -3,11 +3,7 @@ import { z } from "zod"
import { ChildBedTypeEnum, type PaymentMethodEnum } from "@/constants/booking"
import { toLang } from "@/server/utils"
import {
imageMetaDataSchema,
imageSchema,
imageSizesSchema,
} from "./schemas/image"
import { imageSchema } from "./schemas/image"
import { restaurantSchema } from "./schemas/restaurants"
import { roomSchema } from "./schemas/room"
import { specialAlertsSchema } from "./schemas/specialAlerts"
@@ -104,25 +100,7 @@ const locationSchema = z.object({
})
const hotelContentSchema = z.object({
images: z
.object({
metaData: imageMetaDataSchema,
imageSizes: imageSizesSchema,
})
.default({
metaData: {
title: "default image",
altText: "default image",
altText_En: "default image",
copyRight: "default image",
},
imageSizes: {
tiny: "https://placehold.co/1280x720",
small: "https://placehold.co/1280x720",
medium: "https://placehold.co/1280x720",
large: "https://placehold.co/1280x720",
},
}),
images: imageSchema,
texts: z.object({
facilityInformation: z.string().optional(),
surroundingInformation: z.string(),
@@ -156,12 +134,7 @@ const detailedFacilitySchema = z.object({
export const facilitySchema = z.object({
headingText: z.string().default(""),
heroImages: z.array(
z.object({
metaData: imageMetaDataSchema,
imageSizes: imageSizesSchema,
})
),
heroImages: z.array(imageSchema),
})
export const gallerySchema = z.object({

36
server/routers/hotels/schemas/image.ts
View File

@@ -1,20 +1,44 @@
import { z } from "zod"
export const imageSizesSchema = z.object({
const imageSizesSchema = z.object({
tiny: z.string(),
small: z.string(),
medium: z.string(),
large: z.string(),
})
export const imageMetaDataSchema = z.object({
const imageMetaDataSchema = z.object({
title: z.string(),
altText: z.string(),
altText_En: z.string(),
copyRight: z.string(),
})
export const imageSchema = z.object({
metaData: imageMetaDataSchema,
imageSizes: imageSizesSchema,
})
const DEFAULT_IMAGE_OBJ = {
metaData: {
title: "Default image",
altText: "Default image",
altText_En: "Default image",
copyRight: "Default image",
},
imageSizes: {
tiny: "https://placehold.co/1280x720",
small: "https://placehold.co/1280x720",
medium: "https://placehold.co/1280x720",
large: "https://placehold.co/1280x720",
},
}
export const imageSchema = z
.object({
metaData: imageMetaDataSchema,
imageSizes: imageSizesSchema,
})
.default(DEFAULT_IMAGE_OBJ)
.nullable()
.transform((val) => {
if (!val) {
return DEFAULT_IMAGE_OBJ
}
return val
})

9
server/routers/hotels/schemas/room.ts
View File

@@ -1,14 +1,9 @@
import { z } from "zod"
import { imageMetaDataSchema, imageSizesSchema } from "./image"
import { imageSchema } from "./image"
const roomContentSchema = z.object({
images: z.array(
z.object({
metaData: imageMetaDataSchema,
imageSizes: imageSizesSchema,
})
),
images: z.array(imageSchema),
texts: z.object({
descriptions: z.object({
short: z.string().optional(),

32
server/routers/user/output.ts
View File

@@ -3,6 +3,8 @@ import { z } from "zod"
import { countriesMap } from "@/components/TempDesignSystem/Form/Country/countries"
import { getMembership } from "@/utils/user"
import { imageSchema } from "../hotels/schemas/image"
export const membershipSchema = z.object({
currentPoints: z.number(),
expirationDate: z.string(),
@@ -60,20 +62,7 @@ export const getStaysSchema = z.object({
hotelOperaId: z.string(),
hotelInformation: z.object({
hotelContent: z.object({
images: z.object({
metaData: z.object({
title: z.string(),
altText: z.string(),
altText_En: z.string(),
copyRight: z.string(),
}),
imageSizes: z.object({
tiny: z.string(),
small: z.string(),
medium: z.string(),
large: z.string(),
}),
}),
images: imageSchema,
}),
hotelName: z.string(),
cityName: z.string().nullable(),
@@ -140,20 +129,7 @@ export const getFriendTransactionsSchema = z.object({
city: z.string().default(""),
name: z.string().default(""),
hotelContent: z.object({
images: z.object({
metaData: z.object({
title: z.string(),
altText: z.string(),
altText_En: z.string(),
copyRight: z.string(),
}),
imageSizes: z.object({
tiny: z.string(),
small: z.string(),
medium: z.string(),
large: z.string(),
}),
}),
images: imageSchema,
}),
})
.optional(),

12
types/components/bookingWidget/index.ts
View File

@@ -1,12 +1,10 @@
import { VariantProps } from "class-variance-authority"
import { z } from "zod"
import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
import { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
import { GuestsRoom } from "./guestsRoomsPicker"
import type { VariantProps } from "class-variance-authority"
import type { z } from "zod"
import type { Locations } from "@/types/trpc/routers/hotel/locations"
import type { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
import type { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
import type { GuestsRoom } from "./guestsRoomsPicker"
export type BookingWidgetSchema = z.output<typeof bookingWidgetSchema>

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

@@ -2,10 +2,7 @@ import type { z } from "zod"
import type { Coordinates } from "@/types/components/maps/coordinates"
import type { Location } from "@/types/trpc/routers/hotel/locations"
import type {
imageMetaDataSchema,
imageSizesSchema,
} from "@/server/routers/hotels/schemas/image"
import type { imageSchema } from "@/server/routers/hotels/schemas/image"
import type { Child } from "../../bookingWidget/guestsRoomsPicker"
import type { HotelData } from "./hotelCardListingProps"
import type { CategorizedFilters, Filter } from "./hotelFilters"
@@ -24,8 +21,8 @@ export interface SelectHotelMapProps {
cityCoordinates: Coordinates
}
type ImageSizes = z.infer<typeof imageSizesSchema>
type ImageMetaData = z.infer<typeof imageMetaDataSchema>
type ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
type ImageMetaData = z.infer<typeof imageSchema>["metaData"]
export type HotelPin = {
name: string
@@ -48,11 +45,21 @@ export interface HotelListingMapContentProps {
}
export interface HotelCardDialogProps {
type?: "listing" | "standalone"
isOpen: boolean
data: HotelPin
handleClose: (event: { stopPropagation: () => void }) => void
}
export interface HotelCardDialogImageProps {
firstImage: string | undefined
altText: string | undefined
ratings: number
imageError: boolean
setImageError: (error: boolean) => void
position: "top" | "left"
}
export interface HotelCardDialogListingProps {
hotels: HotelData[] | null
}

10
types/hotel.ts
View File

@@ -1,19 +1,19 @@
import { z } from "zod"
import type { z } from "zod"
import {
import type {
checkinSchema,
facilitySchema,
getHotelDataSchema,
parkingSchema,
pointOfInterestSchema,
} from "@/server/routers/hotels/output"
import { imageSchema } from "@/server/routers/hotels/schemas/image"
import {
import type { imageSchema } from "@/server/routers/hotels/schemas/image"
import type {
restaurantDaySchema,
restaurantOpeningHoursSchema,
restaurantSchema,
} from "@/server/routers/hotels/schemas/restaurants"
import { roomSchema } from "@/server/routers/hotels/schemas/room"
import type { roomSchema } from "@/server/routers/hotels/schemas/room"
export type HotelData = z.output<typeof getHotelDataSchema>

9
utils/isValidJson.ts Normal file
View File

@@ -0,0 +1,9 @@
export default function isValidJson(value: string | null | undefined): boolean {
if (!value || value === "undefined") return false
try {
JSON.parse(value)
return true
} catch {
return false
}
}