refactor(SW-194): use design system button on Rooms

components/ContentType/HotelPage/Rooms/index.tsx

@@ -6,8 +6,8 @@ import { useIntl } from "react-intl"
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
 import Grids from "@/components/TempDesignSystem/Grids"
+import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 
-import { ShowMoreButton } from "../ShowMoreButton"
 import { RoomCard } from "./RoomCard"
 
 import styles from "./rooms.module.css"
@@ -17,7 +17,10 @@ import type { RoomsProps } from "@/types/components/hotelPage/room"
 
 export function Rooms({ rooms }: RoomsProps) {
   const intl = useIntl()
-  const [allRoomsVisible, setAllRoomsVisible] = useState(false)
+  const initialPageSize = 5
+  const [pageSize, setPageSize] = useState(initialPageSize)
+  const showMoreVisible = rooms.length > initialPageSize
+  const showLessVisible = pageSize >= rooms.length
   const scrollRef = useRef<HTMLDivElement>(null)
 
   const mappedRooms = rooms
@@ -41,12 +44,11 @@ export function Rooms({ rooms }: RoomsProps) {
     })
     .sort((a, b) => a.sortOrder - b.sortOrder)
 
-  function handleToggleShowMore() {
-    if (scrollRef.current && allRoomsVisible) {
+  function handleShowMore() {
+    if (scrollRef.current && showMoreVisible) {
       scrollRef.current.scrollIntoView({ behavior: "smooth" })
     }
-
-    setAllRoomsVisible((previousState) => !previousState)
+    setPageSize(showLessVisible ? initialPageSize : rooms.length)
   }
 
   return (
@@ -66,7 +68,7 @@ export function Rooms({ rooms }: RoomsProps) {
             <div
               key={id}
               className={
-                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
+                !showLessVisible && index > 2 ? styles.hiddenRoomCard : ""
               }
             >
               <RoomCard
@@ -81,12 +83,12 @@ export function Rooms({ rooms }: RoomsProps) {
         )}
       </Grids.Stackable>
 
-      {mappedRooms.length > 5 ? (
+      {showMoreVisible ? (
         <ShowMoreButton
+          loadMoreData={handleShowMore}
+          showLess={showLessVisible}
           textShowMore="Show more rooms"
           textShowLess="Show less rooms"
-          allItemsVisible={allRoomsVisible}
-          handleToggleShowMore={handleToggleShowMore}
         />
       ) : null}
     </SectionContainer>

components/ContentType/HotelPage/ShowMoreButton/button.module.css

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

components/ContentType/HotelPage/ShowMoreButton/index.tsx

@@ -1,34 +0,0 @@
-import { useIntl } from "react-intl"
-
-import { ChevronDownIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./button.module.css"
-
-import type { ShowMoreButtonProps } from "@/types/components/hotelPage/button"
-
-export function ShowMoreButton({
-  textShowMore,
-  textShowLess,
-  allItemsVisible,
-  handleToggleShowMore,
-}: ShowMoreButtonProps) {
-  const intl = useIntl()
-  return (
-    <div className={styles.ctaContainer}>
-      <Button
-        onClick={handleToggleShowMore}
-        intent="text"
-        variant="icon"
-        className={`${styles.showMoreButton} ${allItemsVisible ? styles.showLess : ""}`}
-        type="button"
-        theme="base"
-      >
-        <ChevronDownIcon className={styles.chevron} />
-        {intl.formatMessage({
-          id: allItemsVisible ? textShowLess : textShowMore,
-        })}
-      </Button>
-    </div>
-  )
-}