Merged master into feat/validsession

app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/[...paths]/page.tsx

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

app/[lang]/(live)/@bookingwidget/[contentType]/[uid]/page.tsx

@@ -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} />
+}

components/BookingWidget/Client.tsx

@@ -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 ??
-          bookingWidgetSearchData.hotel) as string
+          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
 

components/BookingWidget/MobileToggleButton/index.tsx

@@ -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
+  const parsedLocation: Location | null =
-    ? JSON.parse(decodeURIComponent(location))
+    location && isValidJson(location)
-    : null
+      ? JSON.parse(decodeURIComponent(location))
+      : null
 
   const nights = dt(d.toDate).diff(dt(d.fromDate), "days")
 

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -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,
+          searchData:
-          searchHistory: searchHistory ? JSON.parse(searchHistory) : null,
+            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>
+              <span>{getLocationLabel()}</span>
-                {state.searchData?.type === "hotels"
-                  ? state.searchData?.relationships?.city?.name
-                  : intl.formatMessage({ id: "Where to" })}
-              </span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>

components/Forms/BookingWidget/schema.ts

@@ -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" }

components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx

@@ -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>
   )

components/HotelReservation/HotelCard/hotelCard.module.css

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

components/HotelReservation/HotelCard/index.tsx

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

components/HotelReservation/HotelCardDialog/HotelCardDialogImage/hotelCardDialogImage.module.css

@@ -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;
+}

components/HotelReservation/HotelCardDialog/HotelCardDialogImage/index.tsx

@@ -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>
+  )
+}

components/HotelReservation/HotelCardDialog/HotelCardDialogImage/variants.ts

@@ -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",
+  },
+})

components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -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>
+  )
+}

components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx

@@ -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>
+    </>
+  )
+}

components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -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;
+  top: 8px;
-  right: 7px;
+  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 {
+.bottomContainer {
-  height: 100%;
+  display: flex;
-  width: 100%;
+  flex-direction: row;
-  background-color: #fff;
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-  background-image: linear-gradient(45deg, #000000 25%, transparent 25%),
+  padding-top: var(--Spacing-x2);
-    linear-gradient(-45deg, #000000 25%, transparent 25%),
+  padding-bottom: var(--Spacing-x-half);
-    linear-gradient(45deg, transparent 75%, #000000 75%),
+}
-    linear-gradient(-45deg, transparent 75%, #000000 75%);
+
-  background-size: 120px 120px;
+.pricesContainer {
-  background-position:
+  display: flex;
-    0 0,
+  flex-direction: column;
-    0 60px,
+  gap: var(--Spacing-x1);
-    60px -60px,
+  justify-content: space-between;
-    -60px 0;
+}
+
+.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;
   }

components/HotelReservation/HotelCardDialog/index.tsx

@@ -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 ListingHotelCardDialog from "./ListingHotelCardDialog"
-import { CloseLargeIcon, TripAdvisorIcon } from "@/components/Icons"
+import StandaloneHotelCardDialog from "./StandaloneHotelCardDialog"
-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 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}>
+        {type === "standalone" ? (
-          {!firstImage || imageError ? (
+          <StandaloneHotelCardDialog
-            <div className={styles.imagePlaceholder} />
+            data={data}
-          ) : (
+            lang={lang}
-            <Image
+            imageError={imageError}
-              src={firstImage}
+            setImageError={setImageError}
-              alt={altText}
+          />
-              fill
+        ) : (
-              onError={() => setImageError(true)}
+          <ListingHotelCardDialog
-            />
+            data={data}
-          )}
+            lang={lang}
-          <div className={styles.tripAdvisor}>
+            imageError={imageError}
-            <Chip intent="secondary" className={styles.tripAdvisor}>
+            setImageError={setImageError}
-              <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>
       </div>
     </dialog>
   )

components/HotelReservation/HotelCardDialogListing/index.tsx

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

components/HotelReservation/HotelCardDialogListing/utils.ts

@@ -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(

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -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,
+    country: validHotels?.[0]?.hotelData.address.country,
-    region: validHotels?.[0].hotelData.address.city,
+    region: validHotels?.[0]?.hotelData.address.city,
   }
 
   return (

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -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 = (

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

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

components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

@@ -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>

components/HotelReservation/SelectHotel/index.tsx

@@ -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,
+    country: validHotels?.[0]?.hotelData.address.country,
-    region: validHotels?.[0].hotelData.address.city,
+    region: validHotels?.[0]?.hotelData.address.city,
   }
 
   return (

i18n/dictionaries/da.json

@@ -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",

i18n/dictionaries/de.json

@@ -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",

i18n/dictionaries/en.json

@@ -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",

i18n/dictionaries/fi.json

@@ -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",

i18n/dictionaries/no.json

@@ -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",

i18n/dictionaries/sv.json

@@ -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",

server/routers/hotels/output.ts

@@ -3,11 +3,7 @@ import { z } from "zod"
 import { ChildBedTypeEnum, type PaymentMethodEnum } from "@/constants/booking"
 import { toLang } from "@/server/utils"
 
-import {
+import { imageSchema } from "./schemas/image"
-  imageMetaDataSchema,
-  imageSchema,
-  imageSizesSchema,
-} 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
+  images: imageSchema,
-    .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",
-      },
-    }),
   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(
+  heroImages: z.array(imageSchema),
-    z.object({
-      metaData: imageMetaDataSchema,
-      imageSizes: imageSizesSchema,
-    })
-  ),
 })
 
 export const gallerySchema = z.object({

server/routers/hotels/schemas/image.ts

@@ -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({
+const DEFAULT_IMAGE_OBJ = {
-  metaData: imageMetaDataSchema,
+  metaData: {
-  imageSizes: imageSizesSchema,
+    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
+  })

server/routers/hotels/schemas/room.ts

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

server/routers/user/output.ts

@@ -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({
+            images: imageSchema,
-              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(),
-              }),
-            }),
           }),
           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({
+              images: imageSchema,
-                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(),
-                }),
-              }),
             }),
           })
           .optional(),

types/components/bookingWidget/index.ts

@@ -1,12 +1,10 @@
-import { VariantProps } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
-import { z } from "zod"
+import type { z } from "zod"
-
-import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { bookingWidgetVariants } from "@/components/Forms/BookingWidget/variants"
-
-import { GuestsRoom } from "./guestsRoomsPicker"
 
 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>
 

types/components/hotelReservation/selectHotel/map.ts

@@ -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 {
+import type { imageSchema } from "@/server/routers/hotels/schemas/image"
-  imageMetaDataSchema,
-  imageSizesSchema,
-} 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 ImageSizes = z.infer<typeof imageSchema>["imageSizes"]
-type ImageMetaData = z.infer<typeof imageMetaDataSchema>
+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
 }

types/hotel.ts

@@ -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 type { imageSchema } from "@/server/routers/hotels/schemas/image"
-import {
+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>
 

utils/isValidJson.ts

@@ -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
+  }
+}