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" },
-          { hotel: hotelName }
+          { id: "Image gallery" },
+          { 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 Image from "@/components/Image"
-import Lightbox from "@/components/Lightbox"
+import useSidePeekStore from "@/stores/sidepeek"
+
+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 mainImage = images[0]
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
 
   const size =
     roomSize?.min === roomSize?.max
@@ -28,39 +27,13 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
 
   return (
     <article className={styles.roomCard}>
-      <button
-        className={styles.imageWrapper}
-        onClick={() => setLightboxIsOpen(true)}
-      >
-        {/* 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}
+      <div className={styles.imageContainer}>
+        <ImageGallery
+          images={images}
+          title={intl.formatMessage({ id: "Image gallery" }, { name })}
           height={200}
-          width={300}
         />
-      </button>
-      <Lightbox
-        images={images}
-        dialogTitle={intl.formatMessage(
-          { id: "Hotel Image gallery" },
-          { hotel: name }
-        )}
-        isOpen={lightboxIsOpen}
-        onClose={() => setLightboxIsOpen(false)}
-      />
+      </div>
       <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
-          hotelId={hotelId}
-          roomTypeCode={room.roomTypes[0].code}
-        />
+        <Button
+          intent="text"
+          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;
-}
-
-/*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);
+  overflow: hidden;
 }
 
 .content {
@@ -46,32 +19,7 @@
   gap: var(--Spacing-x1);
 }
 
-.title {
-  display: flex;
-  align-items: center;
-}
-
-.title:first-child {
-  height: 2em;
-}
-
-.imageWrapper {
+.imageContainer {
   position: relative;
-  background-color: transparent;
-  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);
+  height: 200px;
 }

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