feat(SW-203): added show more functionality to rooms inside the hotel page

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

@@ -14,6 +14,7 @@ import { RoomCardProps } from "@/types/components/hotelPage/roomCard"
 
 export function RoomCard({
   badgeTextTransKey,
+  hidden,
   id,
   images,
   subtitle,
@@ -33,7 +34,7 @@ export function RoomCard({
   }
 
   return (
-    <article className={styles.roomCard}>
+    <article className={`${styles.roomCard} ${hidden ? styles.hidden : ""}`}>
       <button className={styles.imageWrapper} onClick={handleImageClick}>
         {badgeTextTransKey && (
           <span className={styles.badge}>

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

@@ -5,6 +5,10 @@
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 /*TODO: Build Chip/Badge component. */
 .badge {
   position: absolute;

components/ContentType/HotelPage/Rooms/index.tsx

@@ -1,13 +1,24 @@
+"use client"
+
+import { useRef, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { ChevronDownIcon } from "@/components/Icons"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import Button from "@/components/TempDesignSystem/Button"
 import Grids from "@/components/TempDesignSystem/Grids"
-import { getIntl } from "@/i18n"
 
 import { RoomCard } from "./RoomCard"
 import { RoomsProps } from "./types"
 
-export async function Rooms({ rooms }: RoomsProps) {
-  const { formatMessage } = await getIntl()
+import styles from "./rooms.module.css"
+
+export function Rooms({ rooms }: RoomsProps) {
+  const { formatMessage } = useIntl()
+  const [allRoomsVisible, setAllRoomsVisible] = useState(false)
+  const scrollRef = useRef<HTMLDivElement>(null)
+
   const mappedRooms = rooms
     .map((room) => {
       const size = `${room.attributes.roomSize.min} - ${room.attributes.roomSize.max} m²`
@@ -28,26 +39,48 @@ export async function Rooms({ rooms }: RoomsProps) {
       }
     })
     .sort((a, b) => a.sortOrder - b.sortOrder)
-    .slice(0, 3) //TODO: Remove this and render all rooms once we've implemented "show more" logic in SW-203.
+
+  function handleToggleShowMore() {
+    setAllRoomsVisible(!allRoomsVisible)
+    if (scrollRef.current) {
+      scrollRef.current.scrollIntoView({ behavior: "smooth" })
+    }
+  }
+
   return (
     <SectionContainer id="rooms-section">
+      <div ref={scrollRef}></div>
       <SectionHeader
         textTransform="uppercase"
         title={formatMessage({ id: "Rooms" })}
         subtitle={null}
       />
       <Grids.Stackable>
-        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
-          <RoomCard
-            key={id}
-            id={id}
-            images={images}
-            title={title}
-            subtitle={subtitle}
-            badgeTextTransKey={popularChoice ? "Popular choice" : null}
-          />
-        ))}
+        {mappedRooms.map(
+          ({ id, images, title, subtitle, popularChoice }, index) => (
+            <RoomCard
+              key={id}
+              id={id}
+              hidden={!allRoomsVisible && index > 2}
+              images={images}
+              title={title}
+              subtitle={subtitle}
+              badgeTextTransKey={popularChoice ? "Popular choice" : null}
+            />
+          )
+        )}
       </Grids.Stackable>
+
+      <div className={styles.ctaContainer}>
+        <Button
+          onClick={handleToggleShowMore}
+          variant="icon"
+          className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
+        >
+          <ChevronDownIcon className={styles.chevron} />
+          {formatMessage({ id: allRoomsVisible ? "Show less" : "Show more" })}
+        </Button>
+      </div>
     </SectionContainer>
   )
 }

components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -0,0 +1,8 @@
+.ctaContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.showMoreButton.showLess .chevron {
+  transform: rotate(180deg);
+}

i18n/dictionaries/en.json

@@ -109,6 +109,7 @@
   "Select country of residence": "Select country of residence",
   "Select date of birth": "Select date of birth",
   "Select language": "Select language",
+  "Show less": "Show less",
   "Show more": "Show more",
   "Show all amenities": "Show all amenities",
   "Skip to main content": "Skip to main content",

types/components/hotelPage/roomCard.ts

@@ -3,6 +3,7 @@ import { RoomData } from "@/types/hotel"
 export interface RoomCardProps {
   id: string
   images: RoomData["attributes"]["content"]["images"]
+  hidden?: boolean
   title: string
   subtitle: string
   badgeTextTransKey: string | null