feat(SW-842): Some refactoring regarding room card

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -43,8 +43,8 @@ export default function PreviewImages({
       <Lightbox
         images={images}
         dialogTitle={intl.formatMessage(
-          { id: "Hotel Image gallery" },
+          { id: "Image gallery" },
-          { hotel: hotelName }
+          { name: hotelName }
         )}
         isOpen={lightboxIsOpen}
         onClose={() => setLightboxIsOpen(false)}

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -1,25 +1,24 @@
 "use client"
 
-import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { GalleryIcon } from "@/components/Icons"
+import useSidePeekStore from "@/stores/sidepeek"
-import Image from "@/components/Image"
+
-import Lightbox from "@/components/Lightbox"
+import { ChevronRightSmallIcon } from "@/components/Icons"
+import ImageGallery from "@/components/ImageGallery"
+import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import RoomDetailsButton from "../RoomDetailsButton"
-
 import styles from "./roomCard.module.css"
 
 import type { RoomCardProps } from "@/types/components/hotelPage/room"
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
 export function RoomCard({ hotelId, room }: RoomCardProps) {
-  const { images, name, roomSize, occupancy, id } = room
+  const { images, name, roomSize, occupancy } = room
   const intl = useIntl()
-  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-  const mainImage = images[0]
 
   const size =
     roomSize?.min === roomSize?.max
@@ -28,39 +27,13 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
 
   return (
     <article className={styles.roomCard}>
-      <button
+      <div className={styles.imageContainer}>
-        className={styles.imageWrapper}
+        <ImageGallery
-        onClick={() => setLightboxIsOpen(true)}
+          images={images}
-      >
+          title={intl.formatMessage({ id: "Image gallery" }, { name })}
-        {/* TODO: re-enable once we have support for badge text from API team. */}
-        {/* {badgeTextTransKey && ( */}
-        {/*   <span className={styles.badge}> */}
-        {/*     {intl.formatMessage({ id: badgeTextTransKey })} */}
-        {/*   </span> */}
-        {/* )} */}
-        <span className={styles.imageCount}>
-          <GalleryIcon color="white" />
-          {images.length}
-        </span>
-        {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
-         which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-        <Image
-          className={styles.image}
-          src={mainImage.imageSizes.small}
-          alt={mainImage.metaData.altText}
           height={200}
-          width={300}
         />
-      </button>
+      </div>
-      <Lightbox
-        images={images}
-        dialogTitle={intl.formatMessage(
-          { id: "Hotel Image gallery" },
-          { hotel: name }
-        )}
-        isOpen={lightboxIsOpen}
-        onClose={() => setLightboxIsOpen(false)}
-      />
       <div className={styles.content}>
         <div className={styles.innerContent}>
           <Subtitle
@@ -68,7 +41,6 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
             textAlign="center"
             type="one"
             color="black"
-            className={styles.title}
           >
             {name}
           </Subtitle>
@@ -79,10 +51,22 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
             )}
           </Body>
         </div>
-        <RoomDetailsButton
+        <Button
-          hotelId={hotelId}
+          intent="text"
-          roomTypeCode={room.roomTypes[0].code}
+          type="button"
-        />
+          size="medium"
+          theme="base"
+          onClick={() =>
+            openSidePeek({
+              key: SidePeekEnum.roomDetails,
+              hotelId,
+              roomTypeCode: room.roomTypes[0].code,
+            })
+          }
+        >
+          {intl.formatMessage({ id: "See room details" })}
+          <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+        </Button>
       </div>
     </article>
   )

components/ContentType/HotelPage/Rooms/RoomCard/roomCard.module.css

@@ -3,34 +3,7 @@
   background-color: var(--UI-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
   display: grid;
-}
+  overflow: hidden;
-
-/*TODO: Build Chip/Badge component. */
-.badge {
-  position: absolute;
-  top: var(--Spacing-x1);
-  left: var(--Spacing-x1);
-  background-color: var(--Tertiary-Dark-Surface-Hover);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Medium);
-  color: var(--Tertiary-Dark-On-Surface-Text);
-  text-transform: uppercase;
-  font-size: var(--typography-Chip-fontSize-Placeholder);
-  font-weight: 400;
-}
-
-.imageCount {
-  position: absolute;
-  right: var(--Spacing-x1);
-  bottom: var(--Spacing-x1);
-  display: flex;
-  gap: var(--Spacing-x-half);
-  align-items: center;
-  background-color: var(--UI-Grey-90);
-  opacity: 90%;
-  color: var(--UI-Input-Controls-Fill-Normal);
-  padding: var(--Spacing-x-half) var(--Spacing-x1);
-  border-radius: var(--Corner-radius-Small);
 }
 
 .content {
@@ -46,32 +19,7 @@
   gap: var(--Spacing-x1);
 }
 
-.title {
+.imageContainer {
-  display: flex;
-  align-items: center;
-}
-
-.title:first-child {
-  height: 2em;
-}
-
-.imageWrapper {
   position: relative;
-  background-color: transparent;
+  height: 200px;
-  border-width: 0;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  display: flex;
-}
-
-.image {
-  width: 100%;
-  object-fit: cover;
-  border-top-left-radius: var(--Corner-radius-Medium);
-  border-top-right-radius: var(--Corner-radius-Medium);
-}
-
-.subtitle {
-  color: var(--UI-Text-Placeholder);
 }

components/ContentType/HotelPage/Rooms/RoomDetailsButton/index.tsx

@@ -1,34 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import useSidePeekStore from "@/stores/sidepeek"
-
-import { ChevronRightSmallIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function RoomDetailsButton({
-  hotelId,
-  roomTypeCode,
-}: ToggleSidePeekProps) {
-  const intl = useIntl()
-  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
-  return (
-    <Button
-      intent="text"
-      type="button"
-      size="medium"
-      theme="base"
-      onClick={() =>
-        openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
-      }
-    >
-      {intl.formatMessage({ id: "See room details" })}
-      <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
-    </Button>
-  )
-}

components/HotelReservation/HotelCard/index.tsx

@@ -8,6 +8,7 @@ import { selectHotelMap } from "@/constants/routes/hotelReservation"
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Link from "@/components/TempDesignSystem/Link"
@@ -16,7 +17,6 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../ReadMore"
-import ImageGallery from "../SelectRate/ImageGallery"
 import { hotelCardVariants } from "./variants"
 
 import styles from "./hotelCard.module.css"
@@ -62,7 +62,13 @@ export default function HotelCard({
       onMouseLeave={handleMouseLeave}
     >
       <section className={styles.imageContainer}>
-        <ImageGallery title={hotelData.name} images={hotelData.galleryImages} />
+        {hotelData.gallery && (
+          <ImageGallery
+            title={hotelData.name}
+            images={hotelData.galleryImages}
+            fill
+          />
+        )}
         <div className={styles.tripAdvisor}>
           <Chip intent="primary" className={styles.tripAdvisor}>
             <TripAdvisorIcon color="white" />

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -10,7 +11,6 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 
 import ReadMore from "../../ReadMore"
-import ImageGallery from "../ImageGallery"
 
 import styles from "./hotelInfoCard.module.css"
 
@@ -32,6 +32,7 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
             <ImageGallery
               title={hotelAttributes.name}
               images={hotelAttributes.galleryImages}
+              fill
             />
             {hotelAttributes.ratings?.tripAdvisor && (
               <div className={styles.tripAdvisor}>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -7,11 +7,11 @@ import { RateDefinition } from "@/server/routers/hotels/output"
 
 import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import ImageGallery from "@/components/ImageGallery"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import ImageGallery from "../../ImageGallery"
 import { getIconForFeatureCode } from "../../utils"
 
 import styles from "./roomCard.module.css"
@@ -164,7 +164,11 @@ export default function RoomCard({
           </div>
           {/*NOTE: images from the test API are hosted on test3.scandichotels.com,
          which can't be accessed unless on Scandic's Wifi or using Citrix. */}
-          <ImageGallery images={images} title={roomConfiguration.roomType} />
+          <ImageGallery
+            images={images}
+            title={roomConfiguration.roomType}
+            fill
+          />
         </div>
       )}
     </div>

components/ImageGallery/imageGallery.module.css

@@ -1,4 +1,4 @@
-.galleryIcon {
+.imageCount {
   position: absolute;
   bottom: 16px;
   right: 16px;
@@ -13,7 +13,15 @@
 }
 
 .triggerArea {
+  display: flex;
   cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+
+.image {
+  width: 100%;
+  object-fit: cover;
 }
 
 .imagePlaceholder {

components/ImageGallery/index.tsx

@@ -9,10 +9,16 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import styles from "./imageGallery.module.css"
 
-import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
+import type { ImageGalleryProps } from "@/types/components/imageGallery"
 
-export default function ImageGallery({ images, title }: ImageGalleryProps) {
+export default function ImageGallery({
+  images,
+  title,
+  fill,
+  height = 280,
+}: ImageGalleryProps) {
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+  const imageProps = fill ? { fill } : { height, width: height * 1.5 }
 
   if (!images || images.length === 0) {
     return <div className={styles.imagePlaceholder} />
@@ -26,11 +32,12 @@ export default function ImageGallery({ images, title }: ImageGalleryProps) {
         onClick={() => setLightboxIsOpen(true)}
       >
         <Image
+          className={styles.image}
           src={images[0].imageSizes.medium}
           alt={images[0].metaData.altText}
-          fill
+          {...imageProps}
         />
-        <div className={styles.galleryIcon}>
+        <div className={styles.imageCount}>
           <GalleryIcon color="white" />
           <Footnote color="white" type="label">
             {images.length}

components/SidePeeks/RoomSidePeek/index.tsx

@@ -1,11 +1,11 @@
 import { useIntl } from "react-intl"
 
+import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
-import ImageGallery from "../../HotelReservation/SelectRate/ImageGallery"
 import { getFacilityIcon } from "./facilityIcon"
 
 import styles from "./roomSidePeek.module.css"
@@ -44,7 +44,7 @@ export default function RoomSidePeek({
             )}
           </Body>
           <div className={styles.imageContainer}>
-            <ImageGallery images={images} title={room.name} />
+            <ImageGallery images={images} title={room.name} height={280} />
           </div>
           <Body color="uiTextHighContrast">{roomDescription}</Body>
         </div>

components/SidePeeks/RoomSidePeek/roomSidePeek.module.css

@@ -22,7 +22,6 @@
 }
 
 .imageContainer {
-  min-height: 280px;
   position: relative;
   border-radius: var(--Corner-radius-Medium);
   overflow: hidden;

i18n/dictionaries/da.json

@@ -144,7 +144,6 @@
   "Highest level": "Højeste niveau",
   "Hospital": "Hospital",
   "Hotel": "Hotel",
-  "Hotel Image gallery": "{hotel} - Billedgalleri",
   "Hotel facilities": "Hotel faciliteter",
   "Hotel surroundings": "Hotel omgivelser",
   "Hotels": "Hoteller",
@@ -152,6 +151,7 @@
   "How it works": "Hvordan det virker",
   "Hurry up and use them before they expire!": "Skynd dig og brug dem, før de udløber!",
   "I would like to get my booking confirmation via sms": "Jeg vil gerne få min booking bekræftelse via SMS",
+  "Image gallery": "{name} - Billedgalleri",
   "In adults bed": "i de voksnes seng",
   "In crib": "i tremmeseng",
   "In extra bed": "i ekstra seng",

i18n/dictionaries/de.json

@@ -144,7 +144,6 @@
   "Highest level": "Höchstes Level",
   "Hospital": "Krankenhaus",
   "Hotel": "Hotel",
-  "Hotel Image gallery": "{hotel} - Bildergalerie",
   "Hotel facilities": "Hotel-Infos",
   "Hotel surroundings": "Umgebung des Hotels",
   "Hotels": "Hotels",
@@ -152,6 +151,7 @@
   "How it works": "Wie es funktioniert",
   "Hurry up and use them before they expire!": "Beeilen Sie sich und nutzen Sie sie, bevor sie ablaufen!",
   "I would like to get my booking confirmation via sms": "Ich möchte meine Buchungsbestätigung per SMS erhalten",
+  "Image gallery": "{name} - Bildergalerie",
   "In adults bed": "Im Bett der Eltern",
   "In crib": "im Kinderbett",
   "In extra bed": "im zusätzlichen Bett",

i18n/dictionaries/en.json

@@ -156,7 +156,6 @@
   "Highest level": "Highest level",
   "Hospital": "Hospital",
   "Hotel": "Hotel",
-  "Hotel Image gallery": "{hotel} - Image gallery",
   "Hotel facilities": "Hotel facilities",
   "Hotel surroundings": "Hotel surroundings",
   "Hotels": "Hotels",
@@ -164,6 +163,7 @@
   "How it works": "How it works",
   "Hurry up and use them before they expire!": "Hurry up and use them before they expire!",
   "I would like to get my booking confirmation via sms": "I would like to get my booking confirmation via sms",
+  "Image gallery": "{name} - Image gallery",
   "In adults bed": "In adults bed",
   "In crib": "In crib",
   "In extra bed": "In extra bed",

i18n/dictionaries/fi.json

@@ -144,7 +144,6 @@
   "Highest level": "Korkein taso",
   "Hospital": "Sairaala",
   "Hotel": "Hotelli",
-  "Hotel Image gallery": "{hotel} - Kuvagalleria",
   "Hotel facilities": "Hotellin palvelut",
   "Hotel surroundings": "Hotellin ympäristö",
   "Hotels": "Hotellit",
@@ -152,6 +151,7 @@
   "How it works": "Kuinka se toimii",
   "Hurry up and use them before they expire!": "Ole nopea ja käytä ne ennen kuin ne vanhenevat!",
   "I would like to get my booking confirmation via sms": "Haluan saada varauksen vahvistuksen SMS-viestillä",
+  "Image gallery": "{name} - Kuvagalleria",
   "In adults bed": "Aikuisten vuoteessa",
   "In crib": "Pinnasängyssä",
   "In extra bed": "Oma vuodepaikka",

i18n/dictionaries/no.json

@@ -143,13 +143,13 @@
   "Highest level": "Høyeste nivå",
   "Hospital": "Sykehus",
   "Hotel": "Hotel",
-  "Hotel Image gallery": "{hotel} - Bildegalleri",
   "Hotel facilities": "Hotelfaciliteter",
   "Hotel surroundings": "Hotellomgivelser",
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
   "Hurry up and use them before they expire!": "Skynd deg og bruk dem før de utløper!",
+  "Image gallery": "{name} - Bildegalleri",
   "In adults bed": "i voksnes seng",
   "In crib": "i sprinkelseng",
   "In extra bed": "i ekstraseng",

i18n/dictionaries/sv.json

@@ -143,13 +143,13 @@
   "Highest level": "Högsta nivå",
   "Hospital": "Sjukhus",
   "Hotel": "Hotell",
-  "Hotel Image gallery": "{hotel} - Bildgalleri",
   "Hotel facilities": "Hotellfaciliteter",
   "Hotel surroundings": "Hotellomgivning",
   "Hotels": "Hotell",
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
   "Hurry up and use them before they expire!": "Skynda dig och använd dem innan de går ut!",
+  "Image gallery": "{name} - Bildgalleri",
   "In adults bed": "I vuxens säng",
   "In crib": "I spjälsäng",
   "In extra bed": "Egen sängplats",

types/components/imageGallery.ts

@@ -0,0 +1,9 @@
+import type { GalleryImage } from "@/types/hotel"
+
+export type ImageGalleryProps = {
+  images?: GalleryImage[]
+  title: string
+  fill?: boolean
+  width?: number
+  height?: number
+}