feat(SW-842): Added lightbox to roomcard

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -1,44 +1,54 @@
+"use client"
+
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox/"
 import Button from "@/components/TempDesignSystem/Button"
-import { getIntl } from "@/i18n"
 
 import styles from "./previewImages.module.css"
 
 import type { PreviewImagesProps } from "@/types/components/hotelPage/previewImages"
 
-export default async function PreviewImages({
+export default function PreviewImages({
   images,
   hotelName,
 }: PreviewImagesProps) {
-  const intl = await getIntl()
-  const imageGalleryText = intl.formatMessage({ id: "Image gallery" })
-  const dialogTitle = `${hotelName} - ${imageGalleryText}`
+  const intl = useIntl()
+  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
 
   return (
-    <Lightbox images={images} dialogTitle={dialogTitle}>
-      <div className={styles.imageWrapper}>
-        {images.slice(0, 3).map((image, index) => (
-          <Image
-            key={index}
-            src={image.imageSizes.medium}
-            alt={image.metaData.altText}
-            title={image.metaData.title}
-            width={index === 0 ? 752 : 292}
-            height={index === 0 ? 540 : 266}
-            className={styles.image}
-          />
-        ))}
-        <Button
-          theme="base"
-          intent="inverted"
-          size="small"
-          id="lightboxTrigger"
-          className={styles.seeAllButton}
-        >
-          {intl.formatMessage({ id: "See all photos" })}
-        </Button>
-      </div>
-    </Lightbox>
+    <div className={styles.imageWrapper}>
+      {images.slice(0, 3).map((image, index) => (
+        <Image
+          key={index}
+          src={image.imageSizes.medium}
+          alt={image.metaData.altText}
+          title={image.metaData.title}
+          width={index === 0 ? 752 : 292}
+          height={index === 0 ? 540 : 266}
+          className={styles.image}
+        />
+      ))}
+      <Button
+        theme="base"
+        intent="inverted"
+        size="small"
+        onClick={() => setLightboxIsOpen(true)}
+        className={styles.seeAllButton}
+      >
+        {intl.formatMessage({ id: "See all photos" })}
+      </Button>
+      <Lightbox
+        images={images}
+        dialogTitle={intl.formatMessage(
+          { id: "Hotel Image gallery" },
+          { hotel: hotelName }
+        )}
+        isOpen={lightboxIsOpen}
+        onClose={() => setLightboxIsOpen(false)}
+      />
+    </div>
   )
 }

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

@@ -1,9 +1,11 @@
 "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 Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -16,6 +18,7 @@ import type { RoomCardProps } from "@/types/components/hotelPage/room"
 export function RoomCard({ hotelId, room }: RoomCardProps) {
   const { images, name, roomSize, occupancy, id } = room
   const intl = useIntl()
+  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
   const mainImage = images[0]
 
   const size =
@@ -23,21 +26,12 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
       ? `${roomSize.min} m²`
       : `${roomSize.min} - ${roomSize.max} m²`
 
-  const personLabel = intl.formatMessage(
-    { id: "hotelPages.rooms.roomCard.persons" },
-    { totalOccupancy: occupancy.total }
-  )
-
-  const subtitle = `${size} (${personLabel})`
-
-  function handleImageClick() {
-    // TODO: Implement opening of a model with carousel
-    console.log("Image clicked: ", id)
-  }
-
   return (
     <article className={styles.roomCard}>
-      <button className={styles.imageWrapper} onClick={handleImageClick}>
+      <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}> */}
@@ -52,12 +46,21 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
          which can't be accessed unless on Scandic's Wifi or using Citrix. */}
         <Image
           className={styles.image}
-          src={mainImage.imageSizes.large}
+          src={mainImage.imageSizes.small}
           alt={mainImage.metaData.altText}
           height={200}
           width={300}
         />
       </button>
+      <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
@@ -69,7 +72,12 @@ export function RoomCard({ hotelId, room }: RoomCardProps) {
           >
             {name}
           </Subtitle>
-          <Body color="grey">{subtitle}</Body>
+          <Body color="grey">
+            {intl.formatMessage(
+              { id: "hotelPages.rooms.roomCard.persons" },
+              { size, totalOccupancy: occupancy.total }
+            )}
+          </Body>
         </div>
         <RoomDetailsButton
           hotelId={hotelId}