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 { useState } from "react"
-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 { INITIAL_STAYS_FETCH_LIMIT } from "./data"
+import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
+import { SeeAllCard } from "./SeeAllCard"
 
 import styles from "./cards.module.css"
 
-import type {
+import type { PreviousStaysClientProps } from "@/types/components/myPages/stays/previous"
-  PreviousStaysClientProps,
+
-  PreviousStaysNonNullResponseObject,
+const MAX_VISIBLE_STAYS = 5
-} from "@/types/components/myPages/stays/previous"
 
 export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
-  const lang = useLang()
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
-  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) {
+  const stays = initialPreviousStays.data
-    return <LoadingSpinner />
+  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
-  }
+  const hasMoreStays = stays.length >= INITIAL_STAYS_FETCH_LIMIT
-
-  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) => (
+        {visibleStays.map((stay) => (
           <Card key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
+        {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
       </div>
-      {hasNextPage ? (
+      <PreviousStaysSidePeek
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+        isOpen={isSidePeekOpen}
-      ) : null}
+        onClose={() => setIsSidePeekOpen(false)}
+      />
     </ListContainer>
   )
 }

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

@@ -0,0 +1,102 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
+
+import ShowMoreButton from "../../ShowMoreButton"
+import { Card } from "../Card"
+import { groupStaysByYear } from "../utils/groupStaysByYear"
+
+import styles from "./previousStaysSidePeek.module.css"
+
+import type { PreviousStaysNonNullResponseObject } from "@/types/components/myPages/stays/previous"
+
+interface PreviousStaysSidePeekProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function PreviousStaysSidePeek({
+  isOpen,
+  onClose,
+}: PreviousStaysSidePeekProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {
+        limit: 10,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        enabled: isOpen,
+      }
+    )
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const stays = data?.pages
+    .filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  const staysByYear = stays ? groupStaysByYear(stays) : []
+
+  return (
+    <SidePeekSelfControlled
+      title={intl.formatMessage({
+        id: "stays.previous.title",
+        defaultMessage: "Previous stays",
+      })}
+      isOpen={isOpen}
+      onClose={onClose}
+    >
+      <div className={styles.content}>
+        {isLoading ? (
+          <div className={styles.loadingContainer}>
+            <LoadingSpinner />
+          </div>
+        ) : (
+          <>
+            {staysByYear.map(({ year, stays }) => (
+              <section key={year} className={styles.yearSection}>
+                <div className={styles.yearHeader}>
+                  <Typography variant="Title/Overline/sm">
+                    <span className={styles.yearText}>{year}</span>
+                  </Typography>
+                </div>
+                <div className={styles.staysList}>
+                  {stays.map((stay) => (
+                    <Card
+                      key={stay.attributes.confirmationNumber}
+                      stay={stay}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
+            {hasNextPage && (
+              <ShowMoreButton
+                disabled={isFetching}
+                loadMoreData={loadMoreData}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </SidePeekSelfControlled>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/PreviousStaysSidePeek/previousStaysSidePeek.module.css

@@ -0,0 +1,34 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+}
+
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Space-x4);
+}
+
+.yearSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}
+
+.yearHeader {
+  background: var(--Surface-Primary-Hover-Accent);
+  padding: var(--Space-x1) var(--Space-x2);
+  border-radius: var(--Corner-radius-sm);
+}
+
+.yearText {
+  color: var(--Text-Heading);
+}
+
+.staysList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x2);
+}

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

@@ -0,0 +1,30 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./seeAllCard.module.css"
+
+interface SeeAllCardProps {
+  onPress: () => void
+}
+
+export function SeeAllCard({ onPress }: SeeAllCardProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.card}>
+      <Button
+        variant="Secondary"
+        size="Medium"
+        typography="Body/Paragraph/mdBold"
+        onPress={onPress}
+      >
+        {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
+        <MaterialIcon icon="chevron_right" color="CurrentColor" />
+      </Button>
+    </div>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/SeeAllCard/seeAllCard.module.css

@@ -0,0 +1,12 @@
+.card {
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Border-Default);
+  background: var(--Surface-Secondary-Default);
+  display: flex;
+  padding: var(--Space-x15);
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  height: 100%;
+  min-height: 134px;
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/data.ts

@@ -0,0 +1 @@
+export const INITIAL_STAYS_FETCH_LIMIT = 6

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

@@ -3,11 +3,12 @@ import { serverClient } from "@/lib/trpc/server"
 
 import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import { Cards } from "./Cards"
 import { ClientPreviousStays } from "./Client"
+import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
 
 import styles from "./previous.module.css"
 
@@ -19,7 +20,7 @@ export default async function PreviousStays({
 }: AccountPageComponentProps) {
   const caller = await serverClient()
   const initialPreviousStays = await caller.user.stays.previous({
-    limit: 6,
+    limit: INITIAL_STAYS_FETCH_LIMIT,
   })
 
   if (!initialPreviousStays?.data.length) {
@@ -31,7 +32,7 @@ export default async function PreviousStays({
   return (
     <Section>
       <div className={styles.header}>
-        <SectionHeader title={title} link={link} />
+        <SectionHeader heading={title ?? undefined} link={link} />
         <ClaimPoints />
       </div>
       <StaysComponent initialPreviousStays={initialPreviousStays} />

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/utils/groupStaysByYear.ts

@@ -0,0 +1,29 @@
+import { dt } from "@scandic-hotels/common/dt"
+
+import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
+
+export interface StaysByYear {
+  year: number
+  stays: Stay[]
+}
+
+/**
+ * Groups stays by year based on checkinDate.
+ * @returns an array sorted by year in descending order (most recent first).
+ */
+export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
+  const groupedMap = new Map<number, Stay[]>()
+
+  for (const stay of stays) {
+    const year = dt(stay.attributes.checkinDate).year()
+
+    if (!groupedMap.has(year)) {
+      groupedMap.set(year, [])
+    }
+    groupedMap.get(year)!.push(stay)
+  }
+
+  return Array.from(groupedMap.entries())
+    .sort(([yearA], [yearB]) => yearB - yearA)
+    .map(([year, stays]) => ({ year, stays }))
+}