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 ListContainer from "../../ListContainer"
-import { Card } from "./Card"
+import { StayCard } from "../../StayCard"
-import { INITIAL_STAYS_FETCH_LIMIT } from "./data"
+import { INITIAL_STAYS_FETCH_LIMIT } from "../data"
-import { PreviousStaysSidePeek } from "./PreviousStaysSidePeek"
+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 { StayCard } from "../../StayCard"
-import { groupStaysByYear } from "../utils/groupStaysByYear"
+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 { Divider } from "@scandic-hotels/design-system/Divider"
-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 ImageFallback from "@scandic-hotels/design-system/ImageFallback"
-import Title from "@scandic-hotels/design-system/Title"
+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) {
+export function StayCard({ stay }: StayCardProps) {
-  const { bookingUrl, isWebAppOrigin } = stay.attributes
+  const { bookingUrl, isWebAppOrigin: shouldLinkToMyStay } = stay.attributes
-
-  const shouldLinkToMyStay = isWebAppOrigin
 
   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}>
+    <article className={styles.card}>
-      <Image
+      {hotelInformation.hotelContent.images.src ? (
-        className={styles.image}
+        <Image
-        alt={
+          className={styles.image}
-          hotelInformation.hotelContent.images.altText ||
+          alt={
-          hotelInformation.hotelContent.images.altText_En
+            hotelInformation.hotelContent.images.altText ||
-        }
+            hotelInformation.hotelContent.images.altText_En
-        src={hotelInformation.hotelContent.images.src}
+          }
-        width={420}
+          src={hotelInformation.hotelContent.images.src}
-        height={240}
+          width={80}
-      />
+          height={108}
-      <footer className={styles.footer}>
+        />
-        <Title as="h4" className={styles.hotel} level="h3">
+      ) : (
-          {hotelInformation.hotelName}
+        <ImageFallback
-        </Title>
+          className={styles.fallback}
-        <div className={styles.date}>
+          height="108px"
-          <MaterialIcon
+          width="80px"
-            icon="calendar_month"
+        />
-            color="Icon/Interactive/Default"
+      )}
-          />
+      <div className={styles.content}>
-          <Caption asChild>
+        <div className={styles.details}>
-            <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+          <Typography variant="Title/Subtitle/md">
-          </Caption>
+            <h4 className={styles.hotelName}>{hotelInformation.hotelName}</h4>
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          </Typography>
-          {" - "}
+
-          <Caption asChild>
+          {hotelInformation.cityName && (
-            <time dateTime={departDateTime}>{departDate}</time>
+            <Typography variant="Body/Supporting text (caption)/smRegular">
-          </Caption>
+              <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"
 

apps/scandic-web/utils/getTimeAgoText.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest"
 
 import { dt } from "@scandic-hotels/common/dt"
 
-import { getRelativePastTime } from "./getRelativePastTime"
+import { getTimeAgoText } from "./getTimeAgoText"
 
 import type { IntlShape, MessageDescriptor } from "react-intl"
 
@@ -53,32 +53,32 @@ const mockIntl = {
   },
 } as IntlShape
 
-describe("getRelativePastTime", () => {
+describe("getTimeAgoText", () => {
   describe("days ago (1-30 days)", () => {
     it("should return '1 day ago' for yesterday", () => {
       const yesterday = dt().subtract(1, "day").format("YYYY-MM-DD")
-      const result = getRelativePastTime(yesterday, mockIntl)
+      const result = getTimeAgoText(yesterday, mockIntl)
 
       expect(result).toBe("1 day ago")
     })
 
     it("should return '2 days ago' for 2 days ago", () => {
       const twoDaysAgo = dt().subtract(2, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(twoDaysAgo, mockIntl)
+      const result = getTimeAgoText(twoDaysAgo, mockIntl)
 
       expect(result).toBe("2 days ago")
     })
 
     it("should return '15 days ago' for 15 days ago", () => {
       const fifteenDaysAgo = dt().subtract(15, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(fifteenDaysAgo, mockIntl)
+      const result = getTimeAgoText(fifteenDaysAgo, mockIntl)
 
       expect(result).toBe("15 days ago")
     })
 
     it("should return '30 days ago' for exactly 30 days ago (boundary)", () => {
       const thirtyDaysAgo = dt().subtract(30, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(thirtyDaysAgo, mockIntl)
+      const result = getTimeAgoText(thirtyDaysAgo, mockIntl)
 
       expect(result).toBe("30 days ago")
     })
@@ -86,7 +86,7 @@ describe("getRelativePastTime", () => {
     it("should handle the full range from 1 to 30 days ago", () => {
       for (let days = 1; days <= 30; days++) {
         const pastDate = dt().subtract(days, "days").format("YYYY-MM-DD")
-        const result = getRelativePastTime(pastDate, mockIntl)
+        const result = getTimeAgoText(pastDate, mockIntl)
 
         if (days === 1) {
           expect(result).toBe("1 day ago")
@@ -100,42 +100,42 @@ describe("getRelativePastTime", () => {
   describe("months ago (31-364 days)", () => {
     it("should return '1 month ago' for 31 days ago", () => {
       const thirtyOneDaysAgo = dt().subtract(31, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(thirtyOneDaysAgo, mockIntl)
+      const result = getTimeAgoText(thirtyOneDaysAgo, mockIntl)
 
       expect(result).toBe("1 month ago")
     })
 
     it("should return '1 month ago' for 45 days ago", () => {
       const fortyFiveDaysAgo = dt().subtract(45, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(fortyFiveDaysAgo, mockIntl)
+      const result = getTimeAgoText(fortyFiveDaysAgo, mockIntl)
 
       expect(result).toBe("1 month ago")
     })
 
     it("should return '2 months ago' for 60 days ago", () => {
       const sixtyDaysAgo = dt().subtract(60, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(sixtyDaysAgo, mockIntl)
+      const result = getTimeAgoText(sixtyDaysAgo, mockIntl)
 
       expect(result).toBe("2 months ago")
     })
 
     it("should return '6 months ago' for 180 days ago", () => {
       const sixMonthsAgo = dt().subtract(180, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(sixMonthsAgo, mockIntl)
+      const result = getTimeAgoText(sixMonthsAgo, mockIntl)
 
       expect(result).toBe("6 months ago")
     })
 
     it("should return '11 months ago' for 330 days ago", () => {
       const elevenMonthsAgo = dt().subtract(330, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(elevenMonthsAgo, mockIntl)
+      const result = getTimeAgoText(elevenMonthsAgo, mockIntl)
 
       expect(result).toBe("11 months ago")
     })
 
     it("should return '12 months ago' for 364 days ago (boundary)", () => {
       const twelveMonthsAgo = dt().subtract(364, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(twelveMonthsAgo, mockIntl)
+      const result = getTimeAgoText(twelveMonthsAgo, mockIntl)
 
       expect(result).toBe("12 months ago")
     })
@@ -144,28 +144,28 @@ describe("getRelativePastTime", () => {
   describe("years ago (365+ days)", () => {
     it("should return '1 year ago' for exactly 365 days ago", () => {
       const oneYearAgo = dt().subtract(365, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(oneYearAgo, mockIntl)
+      const result = getTimeAgoText(oneYearAgo, mockIntl)
 
       expect(result).toBe("1 year ago")
     })
 
     it("should return '1 year ago' for 400 days ago", () => {
       const fourHundredDaysAgo = dt().subtract(400, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(fourHundredDaysAgo, mockIntl)
+      const result = getTimeAgoText(fourHundredDaysAgo, mockIntl)
 
       expect(result).toBe("1 year ago")
     })
 
     it("should return '2 years ago' for 730 days ago", () => {
       const twoYearsAgo = dt().subtract(730, "days").format("YYYY-MM-DD")
-      const result = getRelativePastTime(twoYearsAgo, mockIntl)
+      const result = getTimeAgoText(twoYearsAgo, mockIntl)
 
       expect(result).toBe("2 years ago")
     })
 
     it("should return '5 years ago' for 5 years ago", () => {
       const fiveYearsAgo = dt().subtract(5, "years").format("YYYY-MM-DD")
-      const result = getRelativePastTime(fiveYearsAgo, mockIntl)
+      const result = getTimeAgoText(fiveYearsAgo, mockIntl)
 
       expect(result).toBe("5 years ago")
     })
@@ -184,8 +184,8 @@ describe("getRelativePastTime", () => {
         .startOf("day")
         .format("YYYY-MM-DD HH:mm")
 
-      const result1 = getRelativePastTime(dateWithTime1, mockIntl)
+      const result1 = getTimeAgoText(dateWithTime1, mockIntl)
-      const result2 = getRelativePastTime(dateWithTime2, mockIntl)
+      const result2 = getTimeAgoText(dateWithTime2, mockIntl)
 
       expect(result1).toBe("5 days ago")
       expect(result2).toBe("5 days ago")
@@ -193,18 +193,24 @@ describe("getRelativePastTime", () => {
 
     it("should handle ISO date strings with timezone", () => {
       const isoDate = dt().subtract(7, "days").toISOString()
-      const result = getRelativePastTime(isoDate, mockIntl)
+      const result = getTimeAgoText(isoDate, mockIntl)
 
       expect(result).toBe("7 days ago")
     })
 
-    it("should handle future dates (should return 0 days ago for same day)", () => {
+    it("should return empty string for future dates", () => {
-      // The function doesn't handle negative days specially - it just uses the diff calculation
+      // Add 2 days to ensure it's definitely in the future regardless of time of day
-      // For future dates on the same day, diff will be 0
+      const futureDate = dt().add(2, "days").format("YYYY-MM-DD")
-      const futureDate = dt().add(1, "day").startOf("day").format("YYYY-MM-DD")
+      const result = getTimeAgoText(futureDate, mockIntl)
-      const result = getRelativePastTime(futureDate, mockIntl)
 
-      expect(result).toBe("0 days ago")
+      expect(result).toBe("")
+    })
+
+    it("should return empty string for dates far in the future", () => {
+      const farFutureDate = dt().add(1, "year").format("YYYY-MM-DD")
+      const result = getTimeAgoText(farFutureDate, mockIntl)
+
+      expect(result).toBe("")
     })
   })
 
@@ -213,24 +219,24 @@ describe("getRelativePastTime", () => {
       const date30 = dt().subtract(30, "days").format("YYYY-MM-DD")
       const date31 = dt().subtract(31, "days").format("YYYY-MM-DD")
 
-      expect(getRelativePastTime(date30, mockIntl)).toBe("30 days ago")
+      expect(getTimeAgoText(date30, mockIntl)).toBe("30 days ago")
-      expect(getRelativePastTime(date31, mockIntl)).toBe("1 month ago")
+      expect(getTimeAgoText(date31, mockIntl)).toBe("1 month ago")
     })
 
     it("should transition correctly from months to years at 365 days", () => {
       const date364 = dt().subtract(364, "days").format("YYYY-MM-DD")
       const date365 = dt().subtract(365, "days").format("YYYY-MM-DD")
 
-      expect(getRelativePastTime(date364, mockIntl)).toBe("12 months ago")
+      expect(getTimeAgoText(date364, mockIntl)).toBe("12 months ago")
-      expect(getRelativePastTime(date365, mockIntl)).toBe("1 year ago")
+      expect(getTimeAgoText(date365, mockIntl)).toBe("1 year ago")
     })
 
     it("should handle the transition from 1 day to multiple days", () => {
       const date1 = dt().subtract(1, "day").format("YYYY-MM-DD")
       const date2 = dt().subtract(2, "days").format("YYYY-MM-DD")
 
-      expect(getRelativePastTime(date1, mockIntl)).toBe("1 day ago")
+      expect(getTimeAgoText(date1, mockIntl)).toBe("1 day ago")
-      expect(getRelativePastTime(date2, mockIntl)).toBe("2 days ago")
+      expect(getTimeAgoText(date2, mockIntl)).toBe("2 days ago")
     })
   })
 })

apps/scandic-web/utils/getTimeAgoText.ts

@@ -9,15 +9,19 @@ import type { IntlShape } from "react-intl"
  * - 1-30 days: "1 day ago", "15 days ago", "30 days ago"
  * - 31-364 days: "1 month ago", "6 months ago", "12 months ago"
  * - 365+ days: "1 year ago", "2 years ago", "5 years ago"
+ * - Returns empty string for future dates.
+ *
  */
-export function getRelativePastTime(
+export function getTimeAgoText(checkoutDate: string, intl: IntlShape): string {
-  checkoutDate: string,
-  intl: IntlShape
-): string {
   const now = dt()
   const checkout = dt(checkoutDate)
   const daysDiff = now.diff(checkout, "days")
 
+  // Return empty string for future dates
+  if (daysDiff < 0) {
+    return ""
+  }
+
   if (daysDiff <= 30) {
     // 1-30 days
     return intl.formatMessage(

packages/trpc/lib/routers/user/input.ts

@@ -14,6 +14,7 @@ export const staysInput = z
       .transform((num) => (num ? String(num) : undefined)),
     limit: z.number().min(0).default(6),
     lang: z.nativeEnum(Lang).optional(),
+    includeFirstStay: z.boolean().optional(),
   })
   .default({})
 

packages/trpc/lib/routers/user/query/index.ts

@@ -163,7 +163,7 @@ export const userQueryRouter = router({
     upcoming: languageProtectedProcedure
       .input(staysInput)
       .query(async ({ ctx, input }) => {
-        const { limit, cursor, lang } = input
+        const { limit, cursor, lang, includeFirstStay } = input
         const language = lang || ctx.lang
 
         const data = await getUpcomingStays(
@@ -186,6 +186,14 @@ export const userQueryRouter = router({
           )
 
           if (env.NEW_STAYS_ON_MY_PAGES) {
+            // When includeFirstStay is true (used by SidePeek), return all stays
+            if (includeFirstStay) {
+              return {
+                data: updatedData,
+                nextCursor,
+              }
+            }
+
             if (updatedData.length <= 1) {
               // If there are 1 or fewer stays, return null since NextStay handles this
               return null