fix(SW-203): removed hidden prop inside RoomCard and added logic to parent

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

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

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

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

components/ContentType/HotelPage/Rooms/index.tsx

@@ -15,7 +15,7 @@ import { RoomsProps } from "./types"
 import styles from "./rooms.module.css"
 
 export function Rooms({ rooms }: RoomsProps) {
-  const { formatMessage } = useIntl()
+  const intl = useIntl()
   const [allRoomsVisible, setAllRoomsVisible] = useState(false)
   const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -24,8 +24,8 @@ export function Rooms({ rooms }: RoomsProps) {
       const size = `${room.attributes.roomSize.min} - ${room.attributes.roomSize.max} m²`
       const personLabel =
         room.attributes.occupancy.total === 1
-          ? formatMessage({ id: "hotelPages.rooms.roomCard.person" })
+          ? intl.formatMessage({ id: "hotelPages.rooms.roomCard.person" })
-          : formatMessage({ id: "hotelPages.rooms.roomCard.persons" })
+          : intl.formatMessage({ id: "hotelPages.rooms.roomCard.persons" })
 
       const subtitle = `${size} (${room.attributes.occupancy.total} ${personLabel})`
 
@@ -53,21 +53,26 @@ export function Rooms({ rooms }: RoomsProps) {
       <div ref={scrollRef}></div>
       <SectionHeader
         textTransform="uppercase"
-        title={formatMessage({ id: "Rooms" })}
+        title={intl.formatMessage({ id: "Rooms" })}
         subtitle={null}
       />
       <Grids.Stackable>
         {mappedRooms.map(
           ({ id, images, title, subtitle, popularChoice }, index) => (
-            <RoomCard
+            <div
               key={id}
-              id={id}
+              className={
-              hidden={!allRoomsVisible && index > 2}
+                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
-              images={images}
+              }
-              title={title}
+            >
-              subtitle={subtitle}
+              <RoomCard
-              badgeTextTransKey={popularChoice ? "Popular choice" : null}
+                id={id}
-            />
+                images={images}
+                title={title}
+                subtitle={subtitle}
+                badgeTextTransKey={popularChoice ? "Popular choice" : null}
+              />
+            </div>
           )
         )}
       </Grids.Stackable>
@@ -80,7 +85,9 @@ export function Rooms({ rooms }: RoomsProps) {
           className={`${styles.showMoreButton} ${allRoomsVisible ? styles.showLess : ""}`}
         >
           <ChevronDownIcon className={styles.chevron} />
-          {formatMessage({ id: allRoomsVisible ? "Show less" : "Show more" })}
+          {intl.formatMessage({
+            id: allRoomsVisible ? "Show less" : "Show more",
+          })}
         </Button>
       </div>
     </SectionContainer>

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

@@ -3,6 +3,10 @@
   justify-content: center;
 }
 
+.hiddenRoomCard {
+  display: none;
+}
+
 .showMoreButton.showLess .chevron {
   transform: rotate(180deg);
 }

types/components/hotelPage/roomCard.ts

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