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/NextStay/NextStayContent.tsx

@@ -139,11 +139,17 @@ export default async function NextStayContent({
               color="Inverted"
               size="Medium"
               href={bookingUrl}
+              className={styles.cta}
             >
               {intl.formatMessage({
                 id: "nextStay.seeDetailsAndExtras",
                 defaultMessage: "See details & extras",
               })}
+              <MaterialIcon
+                icon="keyboard_arrow_right"
+                color="CurrentColor"
+                size={24}
+              />
             </ButtonLink>
           </div>
         ) : null}

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

@@ -5,7 +5,7 @@ import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
+import EmptyUpcomingStays from "../Upcoming/EmptyUpcomingStays"
 import NextStayContent from "./NextStayContent"
 
 import styles from "./nextStay.module.css"
@@ -17,7 +17,7 @@ export default async function NextStay({ title, link }: NextStayProps) {
   const nextStay = await caller.user.stays.next()
 
   if (!nextStay) {
-    return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStaysBlock /> : null
+    return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStays /> : null
   }
 
   return (

apps/scandic-web/components/Blocks/DynamicContent/Stays/NextStay/nextStay.module.css

@@ -119,6 +119,10 @@
   grid-area: actions;
 }
 
+.cta {
+  width: 100%;
+}
+
 @media (min-width: 768px) {
   .nextStayCard {
     max-width: 100%;

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

@@ -0,0 +1,77 @@
+"use client"
+
+import { dt } from "@scandic-hotels/common/dt"
+import Caption from "@scandic-hotels/design-system/Caption"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
+import Link from "@scandic-hotels/design-system/OldDSLink"
+import Title from "@scandic-hotels/design-system/Title"
+
+import useLang from "@/hooks/useLang"
+
+import styles from "./stay.module.css"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export default function OldStayCard({ stay }: StayCardProps) {
+  const { bookingUrl, isWebAppOrigin } = stay.attributes
+
+  const shouldLinkToMyStay = isWebAppOrigin
+
+  if (!shouldLinkToMyStay) {
+    return <CardContent stay={stay} />
+  }
+
+  return (
+    <Link href={bookingUrl} className={styles.link}>
+      <CardContent stay={stay} />
+    </Link>
+  )
+}
+
+function CardContent({ stay }: StayCardProps) {
+  const lang = useLang()
+
+  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
+
+  const arrival = dt(checkinDate).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(checkoutDate).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+
+  return (
+    <article className={styles.stay}>
+      <Image
+        className={styles.image}
+        alt={
+          hotelInformation.hotelContent.images.altText ||
+          hotelInformation.hotelContent.images.altText_En
+        }
+        src={hotelInformation.hotelContent.images.src}
+        width={420}
+        height={240}
+      />
+      <footer className={styles.footer}>
+        <Title as="h4" className={styles.hotel} level="h3">
+          {hotelInformation.hotelName}
+        </Title>
+        <div className={styles.date}>
+          <MaterialIcon
+            icon="calendar_month"
+            color="Icon/Interactive/Default"
+          />
+          <Caption asChild>
+            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+          </Caption>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          {" - "}
+          <Caption asChild>
+            <time dateTime={departDateTime}>{departDate}</time>
+          </Caption>
+        </div>
+      </footer>
+    </article>
+  )
+}

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

@@ -1,105 +0,0 @@
-"use client"
-
-import Link from "next/link"
-import { useIntl } from "react-intl"
-
-import { dt } from "@scandic-hotels/common/dt"
-import { Divider } from "@scandic-hotels/design-system/Divider"
-import Image from "@scandic-hotels/design-system/Image"
-import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import useLang from "@/hooks/useLang"
-import { getRelativePastTime } from "@/utils/getRelativePastTime"
-
-import styles from "./card.module.css"
-
-import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
-
-export function Card({ stay }: StayCardProps) {
-  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes
-
-  if (!shouldLinkToMyStay) {
-    return <CardContent stay={stay} />
-  }
-
-  return (
-    <Link href={bookingUrl} className={styles.link}>
-      <CardContent stay={stay} />
-    </Link>
-  )
-}
-
-function CardContent({ stay }: StayCardProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
-  const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
-
-  const arrival = dt(checkinDate).locale(lang)
-  const arrivalDate = arrival.format("DD MMM")
-  const arrivalDateTime = arrival.format("YYYY-MM-DD")
-  const depart = dt(checkoutDate).locale(lang)
-  const departDate = depart.format("DD MMM YYYY")
-  const departDateTime = depart.format("YYYY-MM-DD")
-
-  const relativeTime = getRelativePastTime(checkoutDate, intl)
-
-  return (
-    <article className={styles.card}>
-      {hotelInformation.hotelContent.images.src ? (
-        <Image
-          className={styles.image}
-          alt={
-            hotelInformation.hotelContent.images.altText ||
-            hotelInformation.hotelContent.images.altText_En
-          }
-          src={hotelInformation.hotelContent.images.src}
-          width={80}
-          height={108}
-        />
-      ) : (
-        <ImageFallback
-          className={styles.fallback}
-          height="108px"
-          width="80px"
-        />
-      )}
-      <div className={styles.content}>
-        <div className={styles.details}>
-          <Typography variant="Title/Subtitle/md">
-            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
-          </Typography>
-
-          {hotelInformation.cityName && (
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <p className={styles.cityName}>{hotelInformation.cityName}</p>
-            </Typography>
-          )}
-        </div>
-
-        <Divider className={styles.divider} color="Border/Divider/Subtle" />
-
-        <div className={styles.dateSection}>
-          <div className={styles.chip}>
-            <Typography variant="Body/Supporting text (caption)/smBold">
-              <span className={styles.chipText}>{relativeTime}</span>
-            </Typography>
-          </div>
-          <Typography variant="Body/Supporting text (caption)/smRegular">
-            <div className={styles.dates}>
-              <time className={styles.dateText} dateTime={arrivalDateTime}>
-                {arrivalDate}
-              </time>
-              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-              <span className={styles.dateText}>→</span>
-              <time className={styles.dateText} dateTime={departDateTime}>
-                {departDate}
-              </time>
-            </div>
-          </Typography>
-        </div>
-      </div>
-    </article>
-  )
-}

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

@@ -2,10 +2,10 @@
 
 import { useState } from "react"
 
-import ListContainer from "../ListContainer"
-import { Card } from "./Card"
-import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
-import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
+import ListContainer from "../../ListContainer"
+import { StayCard } from "../../StayCard"
+import { INITIAL_STAYS_FETCH_LIMIT } from "../data"
+import { PreviousStaysSidePeek } from "../SidePeek"
 import { SeeAllCard } from "./SeeAllCard"
 
 import styles from "./cards.module.css"
@@ -25,7 +25,7 @@ export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
     <ListContainer>
       <div className={styles.grid}>
         {visibleStays.map((stay) => (
-          <Card key={stay.attributes.confirmationNumber} stay={stay} />
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
         {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
       </div>

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

@@ -7,8 +7,8 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import useLang from "@/hooks/useLang"
 
 import ListContainer from "../ListContainer"
+import OldStayCard from "../OldStayCard"
 import ShowMoreButton from "../ShowMoreButton"
-import StayCard from "../StayCard"
 
 import type {
   PreviousStaysClientProps,
@@ -54,7 +54,7 @@ export function ClientPreviousStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

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

@@ -12,8 +12,8 @@ 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 { StayCard } from "../../StayCard"
+import { groupStaysByYear } from "../../utils/groupStaysByYear"
 
 import styles from "./previousStaysSidePeek.module.css"
 
@@ -85,7 +85,7 @@ export function PreviousStaysSidePeek({
                 </div>
                 <div className={styles.staysList}>
                   {stays.map((stay) => (
-                    <Card
+                    <StayCard
                       key={stay.attributes.confirmationNumber}
                       stay={stay}
                     />

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

@@ -7,8 +7,8 @@ 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 { ClientPreviousStays } from "./OldClient"
 
 import styles from "./previous.module.css"
 

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

@@ -1,22 +1,23 @@
 "use client"
 
+import Link from "next/link"
+import { useIntl } from "react-intl"
+
 import { dt } from "@scandic-hotels/common/dt"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import Image from "@scandic-hotels/design-system/Image"
-import Link from "@scandic-hotels/design-system/OldDSLink"
-import Title from "@scandic-hotels/design-system/Title"
+import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import useLang from "@/hooks/useLang"
+import { getTimeAgoText } from "@/utils/getTimeAgoText"
 
-import styles from "./stay.module.css"
+import styles from "./stayCard.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-export default function StayCard({ stay }: StayCardProps) {
-  const { bookingUrl, isWebAppOrigin } = stay.attributes
-
-  const shouldLinkToMyStay = isWebAppOrigin
+export function StayCard({ stay }: StayCardProps) {
+  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes
 
   if (!shouldLinkToMyStay) {
     return <CardContent stay={stay} />
@@ -31,6 +32,7 @@ export default function StayCard({ stay }: StayCardProps) {
 
 function CardContent({ stay }: StayCardProps) {
   const lang = useLang()
+  const intl = useIntl()
 
   const { checkinDate, checkoutDate, hotelInformation } = stay.attributes
 
@@ -41,37 +43,65 @@ function CardContent({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
+  const timeAgoText = getTimeAgoText(checkoutDate, intl)
+
   return (
-    <article className={styles.stay}>
-      <Image
-        className={styles.image}
-        alt={
-          hotelInformation.hotelContent.images.altText ||
-          hotelInformation.hotelContent.images.altText_En
-        }
-        src={hotelInformation.hotelContent.images.src}
-        width={420}
-        height={240}
-      />
-      <footer className={styles.footer}>
-        <Title as="h4" className={styles.hotel} level="h3">
-          {hotelInformation.hotelName}
-        </Title>
-        <div className={styles.date}>
-          <MaterialIcon
-            icon="calendar_month"
-            color="Icon/Interactive/Default"
-          />
-          <Caption asChild>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-          </Caption>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-          {" - "}
-          <Caption asChild>
-            <time dateTime={departDateTime}>{departDate}</time>
-          </Caption>
+    <article className={styles.card}>
+      {hotelInformation.hotelContent.images.src ? (
+        <Image
+          className={styles.image}
+          alt={
+            hotelInformation.hotelContent.images.altText ||
+            hotelInformation.hotelContent.images.altText_En
+          }
+          src={hotelInformation.hotelContent.images.src}
+          width={80}
+          height={108}
+        />
+      ) : (
+        <ImageFallback
+          className={styles.fallback}
+          height="108px"
+          width="80px"
+        />
+      )}
+      <div className={styles.content}>
+        <div className={styles.details}>
+          <Typography variant="Title/Subtitle/md">
+            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
+          </Typography>
+
+          {hotelInformation.cityName && (
+            <Typography variant="Body/Supporting text (caption)/smRegular">
+              <p className={styles.cityName}>{hotelInformation.cityName}</p>
+            </Typography>
+          )}
         </div>
-      </footer>
+
+        <Divider className={styles.divider} color="Border/Divider/Subtle" />
+
+        <div className={styles.dateSection}>
+          {timeAgoText ? (
+            <div className={styles.chip}>
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <span className={styles.chipText}>{timeAgoText}</span>
+              </Typography>
+            </div>
+          ) : null}
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <div className={styles.dates}>
+              <time className={styles.dateText} dateTime={arrivalDateTime}>
+                {arrivalDate}
+              </time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              <span className={styles.dateText}>→</span>
+              <time className={styles.dateText} dateTime={departDateTime}>
+                {departDate}
+              </time>
+            </div>
+          </Typography>
+        </div>
+      </div>
     </article>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx

@@ -9,10 +9,9 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { getDaysUntilText } from "@/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText"
 import useLang from "@/hooks/useLang"
 
-import { getDaysUntilText } from "../../utils/getDaysUntilText"
-
 import styles from "./carouselCard.module.css"
 
 import type { Stay } from "@scandic-hotels/trpc/routers/user/output"

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/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/Upcoming/Carousel/SeeAllCard/seeAllCard.module.css

@@ -0,0 +1,11 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  background: var(--Surface-Secondary-Default);
+  border: 1px solid var(--Border-Default);
+  overflow: hidden;
+  border-radius: var(--Corner-radius-lg);
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}

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

@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import { Carousel } from "@/components/Carousel"
+import useLang from "@/hooks/useLang"
+
+import { UpcomingStaysSidePeek } from "../SidePeek"
+import CarouselCard from "./CarouselCard"
+import { SeeAllCard } from "./SeeAllCard"
+
+import styles from "../upcoming.module.css"
+
+import type {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+const MAX_VISIBLE_STAYS = 5
+
+export default function UpcomingStaysCarousel({
+  initialUpcomingStays,
+}: UpcomingStaysClientProps) {
+  const lang = useLang()
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
+
+  const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
+    {
+      limit: 6,
+      lang,
+    },
+    {
+      getNextPageParam: (lastPage) => {
+        return lastPage?.nextCursor
+      },
+      initialData: {
+        pageParams: [undefined, 1],
+        pages: [initialUpcomingStays],
+      },
+    }
+  )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  const stays = data.pages
+    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  if (!stays.length) {
+    return null
+  }
+
+  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
+  const hasMoreStays = stays.length >= MAX_VISIBLE_STAYS
+
+  return (
+    <>
+      <Carousel className={styles.carousel}>
+        <Carousel.Content>
+          {visibleStays.map((stay) => (
+            <Carousel.Item
+              key={stay.attributes.confirmationNumber}
+              className={styles.carouselItem}
+            >
+              <CarouselCard stay={stay} />
+            </Carousel.Item>
+          ))}
+          {hasMoreStays && (
+            <Carousel.Item className={styles.carouselItem}>
+              <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />
+            </Carousel.Item>
+          )}
+        </Carousel.Content>
+        <Carousel.Previous className={styles.navigationButton} />
+        <Carousel.Next className={styles.navigationButton} />
+        <Carousel.Dots />
+      </Carousel>
+      <UpcomingStaysSidePeek
+        isOpen={isSidePeekOpen}
+        onClose={() => setIsSidePeekOpen(false)}
+      />
+    </>
+  )
+}

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

@@ -11,7 +11,7 @@ import { getLang } from "@/i18n/serverContext"
 
 import styles from "./emptyUpcomingStays.module.css"
 
-export default async function EmptyUpcomingStaysBlock() {
+export default async function EmptyUpcomingStays() {
   const intl = await getIntl()
   const lang = await getLang()
 

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

@@ -7,8 +7,8 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import useLang from "@/hooks/useLang"
 
 import ListContainer from "../ListContainer"
+import OldStayCard from "../OldStayCard"
 import ShowMoreButton from "../ShowMoreButton"
-import StayCard from "../StayCard"
 
 import type {
   UpcomingStaysClientProps,
@@ -54,7 +54,7 @@ export default function ClientUpcomingStays({
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
-          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
         ))}
       </Grids.Stackable>
       {hasNextPage ? (

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

@@ -0,0 +1,118 @@
+"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 "./upcomingStaysSidePeek.module.css"
+
+import type { UpcomingStaysNonNullResponseObject } from "@/types/components/myPages/stays/upcoming"
+
+interface UpcomingStaysSidePeekProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function UpcomingStaysSidePeek({
+  isOpen,
+  onClose,
+}: UpcomingStaysSidePeekProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { scrollContainerRef, showBackToTop, scrollToTop } =
+    useSidePeekScrollToTop()
+
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {
+        limit: 10,
+        lang,
+        includeFirstStay: true,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        enabled: isOpen,
+      }
+    )
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const stays = data?.pages
+    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  const staysByYear = stays ? groupStaysByYear(stays, "asc") : []
+
+  return (
+    <SidePeekSelfControlled
+      title={intl.formatMessage({
+        id: "stays.upcoming.title",
+        defaultMessage: "Upcoming 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/Upcoming/SidePeek/upcomingStaysSidePeek.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);
+}

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

@@ -5,9 +5,9 @@ import { Section } from "@/components/Section"
 import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
 import UpcomingStaysCarousel from "./Carousel"
-import ClientUpcomingStays from "./Client"
+import EmptyUpcomingStays from "./EmptyUpcomingStays"
+import ClientUpcomingStays from "./OldClient"
 
 import styles from "./upcoming.module.css"
 
@@ -43,7 +43,7 @@ export default async function UpcomingStays({
       {hasStays ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
-        <EmptyUpcomingStaysBlock />
+        <EmptyUpcomingStays />
       )}
       <SectionLink link={link} variant="mobile" />
     </Section>

apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/Carousel.tsx

@@ -1,67 +0,0 @@
-"use client"
-
-import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import { Carousel } from "@/components/Carousel"
-import useLang from "@/hooks/useLang"
-
-import CarouselCard from "./CarouselCard"
-
-import styles from "./upcoming.module.css"
-
-import type {
-  UpcomingStaysClientProps,
-  UpcomingStaysNonNullResponseObject,
-} from "@/types/components/myPages/stays/upcoming"
-
-export default function UpcomingStaysCarousel({
-  initialUpcomingStays,
-}: UpcomingStaysClientProps) {
-  const lang = useLang()
-  const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
-    {
-      limit: 6,
-      lang,
-    },
-    {
-      getNextPageParam: (lastPage) => {
-        return lastPage?.nextCursor
-      },
-      initialData: {
-        pageParams: [undefined, 1],
-        pages: [initialUpcomingStays],
-      },
-    }
-  )
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  const stays = data.pages
-    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
-    .flatMap((page) => page.data)
-
-  if (!stays.length) {
-    return null
-  }
-
-  return (
-    <Carousel className={styles.carousel}>
-      <Carousel.Content>
-        {stays.map((stay) => (
-          <Carousel.Item
-            key={stay.attributes.confirmationNumber}
-            className={styles.carouselItem}
-          >
-            <CarouselCard stay={stay} />
-          </Carousel.Item>
-        ))}
-      </Carousel.Content>
-      <Carousel.Previous className={styles.navigationButton} />
-      <Carousel.Next className={styles.navigationButton} />
-      <Carousel.Dots />
-    </Carousel>
-  )
-}

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

@@ -7,11 +7,18 @@ export interface StaysByYear {
   stays: Stay[]
 }
 
+type SortOrder = "asc" | "desc"
+
 /**
  * Groups stays by year based on checkinDate.
- * @returns an array sorted by year in descending order (most recent first).
+ * @param stays - Array of stays to group
+ * @param sortOrder - Sort order for years: "desc" (most recent first) or "asc" (earliest first). Defaults to "desc".
+ * @returns an array sorted by year in the specified order.
  */
-export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
+export function groupStaysByYear(
+  stays: Stay[],
+  sortOrder: SortOrder = "desc"
+): StaysByYear[] {
   const groupedMap = new Map<number, Stay[]>()
 
   for (const stay of stays) {
@@ -24,6 +31,8 @@ export function groupStaysByYear(stays: Stay[]): StaysByYear[] {
   }
 
   return Array.from(groupedMap.entries())
-    .sort(([yearA], [yearB]) => yearB - yearA)
+    .sort(([yearA], [yearB]) =>
+      sortOrder === "asc" ? yearA - yearB : yearB - yearA
+    )
     .map(([year, stays]) => ({ year, stays }))
 }

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

@@ -21,7 +21,7 @@ import SASTierComparisonBlock from "@/components/Blocks/DynamicContent/SASTierCo
 import SignupFormWrapper from "@/components/Blocks/DynamicContent/SignupFormWrapper"
 import NextStay from "@/components/Blocks/DynamicContent/Stays/NextStay"
 import PreviousStays from "@/components/Blocks/DynamicContent/Stays/Previous"
-import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/UpcomingStays"
+import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
 import { ProfilingConsentBanner } from "@/components/MyPages/ProfilingConsent/Banner"
 import { SJWidget } from "@/components/SJWidget"