Merged in feat/LOY-424-Sidepeek-Past-Stays (pull request #3270)

feat(LOY-424): Load More Past Stays via Sidepeek

* feat(LOY-424): Load More Past Stays via Sidepeek

* chore(LOY-424): use new section header

* fix(LOY-424): remove uneeded nextCursor check


Approved-by: Emma Zettervall

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards.tsx

@@ -1,64 +1,38 @@
 "use client"
 
-import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import useLang from "@/hooks/useLang"
+import { useState } from "react"
 
 import ListContainer from "../ListContainer"
-import ShowMoreButton from "../ShowMoreButton"
 import { Card } from "./Card"
+import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
+import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
+import { SeeAllCard } from "./SeeAllCard"
 
 import styles from "./cards.module.css"
 
-import type {
-  PreviousStaysClientProps,
-  PreviousStaysNonNullResponseObject,
-} from "@/types/components/myPages/stays/previous"
+import type { PreviousStaysClientProps } from "@/types/components/myPages/stays/previous"
+
+const MAX_VISIBLE_STAYS = 5
 
 export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
-  const lang = useLang()
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.user.stays.previous.useInfiniteQuery(
-      {
-        limit: 6,
-        lang,
-      },
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage?.nextCursor
-        },
-        initialData: {
-          pageParams: [undefined, 1],
-          pages: [initialPreviousStays],
-        },
-      }
-    )
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
 
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
-  }
-
-  const stays = data.pages
-    .filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
-    .flatMap((page) => page.data)
+  const stays = initialPreviousStays.data
+  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
+  const hasMoreStays = stays.length >= INITIAL_STAYS_FETCH_LIMIT
 
   return (
     <ListContainer>
       <div className={styles.grid}>
-        {stays.map((stay) => (
+        {visibleStays.map((stay) => (
           <Card key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
+        {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
       </div>
-      {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
-      ) : null}
+      <PreviousStaysSidePeek
+        isOpen={isSidePeekOpen}
+        onClose={() => setIsSidePeekOpen(false)}
+      />
     </ListContainer>
   )
 }