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/SidePeek/index.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { useSidePeekScrollToTop } from "@scandic-hotels/common/hooks/useSidePeekScrollToTop"
+import { BackToTopButton } from "@scandic-hotels/design-system/BackToTopButton"
+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 { StayCard } from "../../StayCard"
+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 { scrollContainerRef, showBackToTop, scrollToTop } =
+    useSidePeekScrollToTop()
+
+  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 ref={scrollContainerRef} 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) => (
+                    <StayCard
+                      key={stay.attributes.confirmationNumber}
+                      stay={stay}
+                    />
+                  ))}
+                </div>
+              </section>
+            ))}
+            {hasNextPage && (
+              <ShowMoreButton
+                disabled={isFetching}
+                loadMoreData={loadMoreData}
+              />
+            )}
+          </>
+        )}
+        {showBackToTop && !isLoading && (
+          <BackToTopButton
+            label={intl.formatMessage({
+              id: "common.backToTop",
+              defaultMessage: "Back to top",
+            })}
+            onPress={scrollToTop}
+            position="right"
+          />
+        )}
+      </div>
+    </SidePeekSelfControlled>
+  )
+}

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

@@ -0,0 +1,35 @@
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x3);
+  position: relative;
+}
+
+.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);
+}