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}

components/HotelReservation/SelectRate/ImageGallery/index.tsx

@@ -1,3 +1,7 @@
+"use client"
+
+import { useState } from "react"
+
 import { GalleryIcon } from "@/components/Icons"
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
@@ -8,12 +12,19 @@ import styles from "./imageGallery.module.css"
 import type { ImageGalleryProps } from "@/types/components/hotelReservation/selectRate/imageGallery"
 
 export default function ImageGallery({ images, title }: ImageGalleryProps) {
-  if (!images || images.length === 0)
+  const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
+
+  if (!images || images.length === 0) {
     return <div className={styles.imagePlaceholder} />
+  }
 
   return (
-    <Lightbox images={images} dialogTitle={title}>
-      <div className={styles.triggerArea} id="lightboxTrigger">
+    <>
+      <div
+        className={styles.triggerArea}
+        role="button"
+        onClick={() => setLightboxIsOpen(true)}
+      >
         <Image
           src={images[0].imageSizes.medium}
           alt={images[0].metaData.altText}
@@ -26,6 +37,12 @@ export default function ImageGallery({ images, title }: ImageGalleryProps) {
           </Footnote>
         </div>
       </div>
-    </Lightbox>
+      <Lightbox
+        images={images}
+        dialogTitle={title}
+        isOpen={lightboxIsOpen}
+        onClose={() => setLightboxIsOpen(false)}
+      />
+    </>
   )
 }

components/Lightbox/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "framer-motion"
-import React, { useState } from "react"
+import { useEffect, useState } from "react"
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 
 import FullView from "./FullView"
@@ -12,24 +12,19 @@ import type { LightboxProps } from "@/types/components/lightbox/lightbox"
 
 export default function Lightbox({
   images,
-  children,
   dialogTitle,
+  onClose,
+  isOpen,
 }: LightboxProps) {
-  const [isOpen, setIsOpen] = useState(false)
   const [selectedImageIndex, setSelectedImageIndex] = useState(0)
   const [isFullView, setIsFullView] = useState(false)
 
-  function handleOpenChange(open: boolean) {
-    if (!open) {
-      setTimeout(() => {
-        setIsOpen(false)
-        setSelectedImageIndex(0)
-        setIsFullView(false)
-      }, 300) // 300ms delay
-    } else {
-      setIsOpen(true)
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedImageIndex(0)
+      setIsFullView(false)
     }
-  }
+  }, [isOpen])
 
   function handleNext() {
     setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
@@ -41,75 +36,53 @@ export default function Lightbox({
     )
   }
 
-  const triggerElement = React.Children.map(
-    children,
-    function mapChild(child): React.ReactNode {
-      if (React.isValidElement(child)) {
-        if (child.props.id === "lightboxTrigger") {
-          return React.cloneElement(child, {
-            onClick: () => setIsOpen(true),
-          } as React.HTMLAttributes<HTMLElement>)
-        } else if (child.props.children) {
-          return React.cloneElement(child, {
-            children: React.Children.map(child.props.children, mapChild),
-          } as React.HTMLAttributes<HTMLElement>)
-        }
-      }
-      return child
-    }
-  )
-
   return (
-    <>
-      {triggerElement}
-      <ModalOverlay
-        isOpen={isOpen}
-        onOpenChange={handleOpenChange}
-        className={styles.overlay}
-        isDismissable
-      >
-        <Modal>
-          <AnimatePresence>
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onClose}
+      className={styles.overlay}
+      isDismissable
+    >
+      <Modal>
+        <AnimatePresence>
+          <Dialog aria-label={dialogTitle}>
             {isOpen && (
-              <Dialog>
-                <motion.div
-                  className={`${styles.content} ${
-                    isFullView ? styles.fullViewContent : styles.galleryContent
-                  }`}
-                  initial={{ opacity: 0, scale: 0.95 }}
-                  animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
-                  exit={{ opacity: 0, scale: 0.95 }}
-                  transition={{ duration: 0.2 }}
-                >
-                  {isFullView ? (
-                    <FullView
-                      image={images[selectedImageIndex]}
-                      onClose={() => setIsFullView(false)}
-                      onNext={handleNext}
-                      onPrev={handlePrev}
-                      currentIndex={selectedImageIndex}
-                      totalImages={images.length}
-                    />
-                  ) : (
-                    <Gallery
-                      images={images}
-                      dialogTitle={dialogTitle}
-                      onClose={() => setIsOpen(false)}
-                      onSelectImage={(image) => {
-                        setSelectedImageIndex(
-                          images.findIndex((img) => img === image)
-                        )
-                      }}
-                      onImageClick={() => setIsFullView(true)}
-                      selectedImage={images[selectedImageIndex]}
-                    />
-                  )}
-                </motion.div>
-              </Dialog>
+              <motion.div
+                className={`${styles.content} ${
+                  isFullView ? styles.fullViewContent : styles.galleryContent
+                }`}
+                initial={{ opacity: 0, scale: 0.95 }}
+                animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
+                exit={{ opacity: 0, scale: 0.95 }}
+                transition={{ duration: 0.2 }}
+              >
+                {isFullView ? (
+                  <FullView
+                    image={images[selectedImageIndex]}
+                    onClose={() => setIsFullView(false)}
+                    onNext={handleNext}
+                    onPrev={handlePrev}
+                    currentIndex={selectedImageIndex}
+                    totalImages={images.length}
+                  />
+                ) : (
+                  <Gallery
+                    images={images}
+                    onClose={onClose}
+                    onSelectImage={(image) => {
+                      setSelectedImageIndex(
+                        images.findIndex((img) => img === image)
+                      )
+                    }}
+                    onImageClick={() => setIsFullView(true)}
+                    selectedImage={images[selectedImageIndex]}
+                  />
+                )}
+              </motion.div>
             )}
-          </AnimatePresence>
-        </Modal>
-      </ModalOverlay>
-    </>
+          </Dialog>
+        </AnimatePresence>
+      </Modal>
+    </ModalOverlay>
   )
 }