feat(SW-340): Added Hotel Card Listing on map

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -71,6 +71,7 @@ export default async function SelectHotelMapPage({
         hotelPins={hotelPins}
         mapId={googleMapId}
         isModal={true}
+        hotels={hotels}
       />
     </MapModal>
   )

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -67,7 +67,7 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .card {
+  .card.listing {
     grid-template-areas:
       "image header"
       "image hotel"
@@ -76,30 +76,30 @@
     padding: 0;
   }
 
-  .imageContainer {
+  .listing .imageContainer {
     position: relative;
     min-height: 200px;
     width: 518px;
   }
 
-  .tripAdvisor {
+  .listing .tripAdvisor {
     position: absolute;
     display: block;
     left: 7px;
     top: 7px;
   }
 
-  .hotelInformation {
+  .listing .hotelInformation {
     padding-top: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .hotel {
+  .listing .hotel {
     gap: var(--Spacing-x2);
     padding-right: var(--Spacing-x2);
   }
 
-  .prices {
+  .listing .prices {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -107,11 +107,11 @@
     padding-bottom: var(--Spacing-x2);
   }
 
-  .detailsButton {
+  .listing .detailsButton {
     border-bottom: none;
   }
 
-  .button {
+  .listing .button {
     width: 160px;
   }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -4,23 +4,22 @@ import { useIntl } from "react-intl"
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
-import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Link from "@/components/TempDesignSystem/Link"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
-import { getIntl } from "@/i18n"
 
 import ReadMore from "../ReadMore"
 import ImageGallery from "../SelectRate/ImageGallery"
+import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
 
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({ hotel }: HotelCardProps) {
+export default function HotelCard({ hotel, type = "listing" }: HotelCardProps) {
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -28,8 +27,12 @@ export default function HotelCard({ hotel }: HotelCardProps) {
 
   const amenities = hotelData.detailedFacilities.slice(0, 5)
 
+  const classNames = hotelCardVariants({
+    type,
+  })
+
   return (
-    <article className={styles.card}>
+    <article className={classNames}>
       <section className={styles.imageContainer}>
         {hotelData.gallery && (
           <ImageGallery

components/HotelReservation/HotelCard/variants.ts

@@ -0,0 +1,15 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./hotelCard.module.css"
+
+export const hotelCardVariants = cva(styles.card, {
+  variants: {
+    type: {
+      listing: styles.listing,
+      map: styles.map,
+    },
+  },
+  defaultVariants: {
+    type: "listing",
+  },
+})

components/HotelReservation/HotelCardListing/index.tsx

@@ -10,7 +10,10 @@ import styles from "./hotelCardListing.module.css"
 
 import { HotelCardListingProps } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
-export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
+export default function HotelCardListing({
+  hotelData,
+  type = "listing",
+}: HotelCardListingProps) {
   const searchParams = useSearchParams()
 
   const hotels = useMemo(() => {
@@ -28,9 +31,9 @@ export default function HotelCardListing({ hotelData }: HotelCardListingProps) {
 
   return (
     <section className={styles.hotelCards}>
-      {hotels.length ? (
+      {hotels?.length ? (
         hotels.map((hotel) => (
-          <HotelCard key={hotel.hotelData.name} hotel={hotel} />
+          <HotelCard key={hotel.hotelData.name} hotel={hotel} type={type} />
         ))
       ) : (
         <Title>No hotels found</Title>

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -5,5 +5,8 @@
 @media (min-width: 768px) {
   .hotelListing {
     display: block;
+    width: 420px;
+    padding: var(--Spacing-x3) var(--Spacing-x4);
+    overflow-y: auto;
   }
 }

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

@@ -1,13 +1,15 @@
 "use client"
 
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
+
 import styles from "./hotelListing.module.css"
 
-import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
+import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-// TODO: This component is copied from
-// components/ContentType/HotelPage/Map/DynamicMap/Sidebar.
-// Look at that for inspiration on how to do the interaction with the map.
-
-export default function HotelListing({}: HotelListingProps) {
-  return <section className={styles.hotelListing}>Hotel listing TBI</section>
+export default function HotelListing({ hotels }: HotelListingProps) {
+  return (
+    <div className={styles.hotelListing}>
+      <HotelCardListing hotelData={hotels} type="map" />
+    </div>
+  )
 }

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -23,6 +23,7 @@ export default function SelectHotelMap({
   hotelPins,
   mapId,
   isModal,
+  hotels,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -66,7 +67,7 @@ export default function SelectHotelMap({
           <span>Filter and sort</span>
           {/* TODO: Add filter and sort button */}
         </div>
-        <HotelListing />
+        <HotelListing hotels={hotels} />
         <InteractiveMap
           closeButton={closeButton}
           coordinates={coordinates}

types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -4,6 +4,7 @@ import { Hotel } from "@/types/hotel"
 
 export type HotelCardListingProps = {
   hotelData: HotelData[]
+  type?: "map" | "listing"
 }
 
 export type HotelData = {

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -2,4 +2,5 @@ import { HotelData } from "./hotelCardListingProps"
 
 export type HotelCardProps = {
   hotel: HotelData
+  type?: "map" | "listing"
 }

types/components/hotelReservation/selectHotel/map.ts

@@ -1,6 +1,9 @@
-import { Coordinates } from "@/types/components/maps/coordinates"
+import { HotelData } from "./hotelCardListingProps"
+
+import type { Coordinates } from "@/types/components/maps/coordinates"
 
 export interface HotelListingProps {
+  hotels: HotelData[]
   // pointsOfInterest: PointOfInterest[]
   // activePoi: PointOfInterest["name"] | null
   // onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
@@ -12,6 +15,7 @@ export interface SelectHotelMapProps {
   hotelPins: HotelPin[]
   mapId: string
   isModal: boolean
+  hotels: HotelData[]
 }
 
 export type HotelPin = {