Merged in LOY-493/Sidepeek-upcoming-stays (pull request #3315)

LOY-493/Sidepeek upcoming stays

* chore(LOY-493): Add icon to next stay card cta

* chore(LOY-493): better folder org for stays

* chore(LOY-494): more folder reorg

* feat(LOY-493): Implement Sidepeek for Upcoming Stays


Approved-by: Matilda Landström

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

@@ -0,0 +1,65 @@
+"use client"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import Grids from "@/components/TempDesignSystem/Grids"
+import useLang from "@/hooks/useLang"
+
+import ListContainer from "../ListContainer"
+import OldStayCard from "../OldStayCard"
+import ShowMoreButton from "../ShowMoreButton"
+
+import type {
+  PreviousStaysClientProps,
+  PreviousStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/previous"
+
+export function ClientPreviousStays({
+  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],
+        },
+      }
+    )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const stays = data.pages
+    .filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  return (
+    <ListContainer>
+      <Grids.Stackable>
+        {stays.map((stay) => (
+          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+      </Grids.Stackable>
+      {hasNextPage ? (
+        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+      ) : null}
+    </ListContainer>
+  )
+}