Merged in feat/LOY-428-previous-stay-redesign (pull request #3142)

Feat(LOY-428): Previous Stays Redesign * feat(LOY-428): Previous stays WIP * fix(LOY-428): fix alignment issue * fix(LOY-428): css fixes & imagefallback prop value * fix(LOY-428): use css vars * fix(LOY-428): add unit test for relative time text * chore(LOY-428): remove else if conditions * fix(LOY-428): named exports & remove duplicate width/height setting * fix(LOY-428): better formatting of upcoming stays months text * fix(LOY-428): fewer typography wrappers Approved-by: Matilda Landström
2025-11-19 12:08:34 +00:00
parent db30588f63
commit ac5fdc64a9
10 changed files with 591 additions and 12 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards.tsx
@@ -0,0 +1,64 @@
+"use client"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
+
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
+import { Card } from "./Card"
+
+import styles from "./cards.module.css"
+
+import type {
+  PreviousStaysClientProps,
+  PreviousStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/previous"
+
+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],
+        },
+      }
+    )
+
+  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>
+      <div className={styles.grid}>
+        {stays.map((stay) => (
+          <Card key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+      </div>
+      {hasNextPage ? (
+        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+      ) : null}
+    </ListContainer>
+  )
+}