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
2025-12-09 10:54:57 +00:00
parent 8764945b2f
commit f40035baa9
35 changed files with 527 additions and 272 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/carouselCard.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/carouselCard.module.css
@@ -0,0 +1,69 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  background: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Border-Default);
+  overflow: hidden;
+  border-radius: var(--Corner-radius-lg);
+}
+
+.imageContainer {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+  background:
+    linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%),
+    lightgray 50% / cover no-repeat,
+    var(--Neutral-20);
+  overflow: hidden;
+}
+
+.image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: relative;
+  z-index: 1;
+}
+
+.imageOverlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.2) 50%,
+    rgba(0, 0, 0, 0.6) 100%
+  );
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+  padding: var(--Space-x2);
+  color: var(--Text-Inverted);
+  place-content: center;
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  padding: var(--Space-x2);
+}
+
+.infoRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.infoItem {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+.dateRange {
+  text-align: right;
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/CarouselCard/index.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { dt } from "@scandic-hotels/common/dt"
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+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 { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getDaysUntilText } from "@/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText"
+import useLang from "@/hooks/useLang"
+
+import styles from "./carouselCard.module.css"
+
+import type { Stay } from "@scandic-hotels/trpc/routers/user/output"
+
+interface CarouselCardProps {
+  stay: Stay
+}
+
+export default function CarouselCard({ stay }: CarouselCardProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { attributes } = stay
+  const {
+    checkinDate,
+    checkoutDate,
+    confirmationNumber,
+    hotelInformation,
+    isWebAppOrigin,
+    bookingUrl,
+  } = attributes
+
+  const daysUntilText = getDaysUntilText(checkinDate, lang, intl)
+
+  return (
+    <article className={styles.card}>
+      <div className={styles.imageContainer}>
+        <Image
+          className={styles.image}
+          alt={
+            hotelInformation.hotelContent.images.altText ||
+            hotelInformation.hotelContent.images.altText_En ||
+            hotelInformation.hotelName
+          }
+          src={hotelInformation.hotelContent.images.src}
+          width={400}
+          height={300}
+          priority
+        />
+        <div className={styles.imageOverlay}>
+          <Typography variant="Title/Overline/sm">
+            <span>{daysUntilText}</span>
+          </Typography>
+          <Typography variant="Title/md">
+            <span>{hotelInformation.hotelName}</span>
+          </Typography>
+          {hotelInformation.cityName && (
+            <Typography variant="Title/Overline/sm">
+              <span>{hotelInformation.cityName}</span>
+            </Typography>
+          )}
+        </div>
+      </div>
+
+      <div className={styles.content}>
+        <div className={styles.infoRow}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.infoItem}>
+              <MaterialIcon icon="sticky_note_2" color="Icon/Default" />
+              {intl.formatMessage({
+                id: "common.bookingNumber",
+                defaultMessage: "Booking number",
+              })}
+            </span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.dateRange}>{confirmationNumber}</span>
+          </Typography>
+        </div>
+        <div className={styles.infoRow}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.infoItem}>
+              <MaterialIcon icon="calendar_month" color="Icon/Default" />
+              {intl.formatMessage({
+                id: "common.dates",
+                defaultMessage: "Dates",
+              })}
+            </span>
+          </Typography>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <span className={styles.dateRange}>
+              <time>{dt(checkinDate).locale(lang).format("D MMM")}</time>
+              {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+              {" → "}
+              <time>{dt(checkoutDate).locale(lang).format("D MMM, YYYY")}</time>
+            </span>
+          </Typography>
+        </div>
+
+        {isWebAppOrigin && (
+          <>
+            <Divider variant="horizontal" color="Border/Divider/Default" />
+            <ButtonLink
+              variant="Text"
+              color="Primary"
+              size="Small"
+              href={bookingUrl}
+            >
+              {intl.formatMessage({
+                id: "nextStay.seeDetailsAndExtras",
+                defaultMessage: "See details & extras",
+              })}
+              <MaterialIcon
+                icon="keyboard_arrow_right"
+                color="CurrentColor"
+                size={20}
+              />
+            </ButtonLink>
+          </>
+        )}
+      </div>
+    </article>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/index.tsx
+++ b/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>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/SeeAllCard/seeAllCard.module.css
+++ b/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%;
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/index.tsx
+++ b/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)}
+      />
+    </>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css
@@ -0,0 +1,49 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  min-height: 250px;
+  margin-bottom: var(--Space-x05);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Styles for new empty upcoming stays design */
+.emptyUpcomingStaysContainer {
+  display: flex;
+  padding: var(--Space-x6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x3);
+  border-radius: var(--Corner-radius-lg);
+  background: var(--Surface-Brand-Primary-1-Default);
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-align: center;
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -0,0 +1,76 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/OldDSLink"
+import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { env } from "@/env/server"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStays() {
+  const intl = await getIntl()
+  const lang = await getLang()
+
+  const href = `/${lang}`
+
+  if (!env.NEW_STAYS_ON_MY_PAGES) {
+    return (
+      <section className={styles.container}>
+        <div className={styles.titleContainer}>
+          <Title
+            as="h4"
+            level="h3"
+            color="red"
+            className={styles.title}
+            textAlign="center"
+          >
+            {intl.formatMessage({
+              id: "stays.noUpcomingStays",
+              defaultMessage: "You have no upcoming stays.",
+            })}
+            <span className={styles.burgundyTitle}>
+              {intl.formatMessage({
+                id: "stays.whereToGoNext",
+                defaultMessage: "Where should you go next?",
+              })}
+            </span>
+          </Title>
+        </div>
+        <Link
+          href={href}
+          className={styles.link}
+          color="Text/Interactive/Secondary"
+        >
+          {intl.formatMessage({
+            id: "stays.getInspired",
+            defaultMessage: "Get inspired",
+          })}
+          <MaterialIcon icon="arrow_forward" color="CurrentColor" />
+        </Link>
+      </section>
+    )
+  }
+
+  return (
+    <section className={styles.emptyUpcomingStaysContainer}>
+      <Typography variant="Title/Subtitle/md">
+        <p className={styles.heading}>
+          {intl.formatMessage({
+            id: "stays.noUpcomingStaysAtTheMoment",
+            defaultMessage: "You have no upcoming stays at the moment",
+          })}
+        </p>
+      </Typography>
+      <ButtonLink href={href} variant="Tertiary" color="Primary" size="Small">
+        {intl.formatMessage({
+          id: "stays.findDestinationOrHotel",
+          defaultMessage: "Find hotel or destination",
+        })}
+      </ButtonLink>
+    </section>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/OldClient.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import Grids from "@/components/TempDesignSystem/Grids"
+import useLang from "@/hooks/useLang"
+
+import ListContainer from "../ListContainer"
+import OldStayCard from "../OldStayCard"
+import ShowMoreButton from "../ShowMoreButton"
+
+import type {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+export default function ClientUpcomingStays({
+  initialUpcomingStays,
+}: UpcomingStaysClientProps) {
+  const lang = useLang()
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {
+        limit: 6,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialUpcomingStays],
+        },
+      }
+    )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const stays = data.pages
+    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  return stays.length ? (
+    <ListContainer>
+      <Grids.Stackable>
+        {stays.map((stay) => (
+          <OldStayCard key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+      </Grids.Stackable>
+      {hasNextPage ? (
+        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+      ) : null}
+    </ListContainer>
+  ) : null
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/index.tsx
+++ b/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>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/SidePeek/upcomingStaysSidePeek.module.css
+++ b/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);
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/index.tsx
@@ -0,0 +1,51 @@
+import { env } from "@/env/server"
+import { serverClient } from "@/lib/trpc/server"
+
+import { Section } from "@/components/Section"
+import { SectionHeader } from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+import UpcomingStaysCarousel from "./Carousel"
+import EmptyUpcomingStays from "./EmptyUpcomingStays"
+import ClientUpcomingStays from "./OldClient"
+
+import styles from "./upcoming.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function UpcomingStays({
+  title,
+  link,
+}: AccountPageComponentProps) {
+  const caller = await serverClient()
+  const initialUpcomingStays = await caller.user.stays.upcoming({
+    limit: 6,
+  })
+
+  const hasStays =
+    initialUpcomingStays?.data && initialUpcomingStays.data.length > 0
+
+  if (env.NEW_STAYS_ON_MY_PAGES) {
+    if (!hasStays) return null
+
+    return (
+      <Section className={styles.container}>
+        {title && <SectionHeader heading={title} link={link} />}
+        <UpcomingStaysCarousel initialUpcomingStays={initialUpcomingStays} />
+        <SectionLink link={link} variant="mobile" />
+      </Section>
+    )
+  }
+
+  return (
+    <Section className={styles.container}>
+      {title && <SectionHeader heading={title} link={link} />}
+      {hasStays ? (
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
+      ) : (
+        <EmptyUpcomingStays />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </Section>
+  )
+}
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/upcoming.module.css
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/upcoming.module.css
@@ -0,0 +1,11 @@
+.container {
+  display: inline-grid;
+}
+
+.carousel {
+  width: 100%;
+}
+
+.carousel .navigationButton {
+  top: 40%;
+}