Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)

feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Upcoming Stays Redesign

* feat(LOY-422): Carousel next/previous arrows

* chore(LOY-422): add new material icon

* refactor(LOY-422): restructure new and old upcoming stays

* fix(LOY-422): handle less than 1 case

* chore(LOY-422): remove uneeded id

* chore(LOY-422): remove intl label for date edge case


Approved-by: Matilda Landström

apps/scandic-web/.env.local.example

@@ -66,3 +66,5 @@ DTMC_ENTRA_ID_ISSUER=""
 DTMC_ENTRA_ID_SECRET=""
 
 HOTEL_BRANDING="0" # 0 - disabled, 1 - enabled
+
+NEW_STAYS_ON_MY_PAGES="true"

apps/scandic-web/components/Blocks/DynamicContent/Stays/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -30,3 +30,20 @@
   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;
+}

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

@@ -1,6 +1,10 @@
+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"
@@ -13,6 +17,7 @@ export default async function EmptyUpcomingStaysBlock() {
 
   const href = `/${lang}`
 
+  if (!env.NEW_STAYS_ON_MY_PAGES) {
     return (
       <section className={styles.container}>
         <div className={styles.titleContainer}>
@@ -48,4 +53,24 @@ export default async function EmptyUpcomingStaysBlock() {
         </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 destination or hotel",
+        })}
+      </ButtonLink>
+    </section>
+  )
 }

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

@@ -8,7 +8,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 
-import { getDaysUntilText } from "./utils"
+import { getDaysUntilText } from "../utils/getDaysUntilText"
 
 import styles from "./nextStay.module.css"
 

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

@@ -1,9 +1,11 @@
+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 EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
 import NextStayContent from "./NextStayContent"
 
 import styles from "./nextStay.module.css"
@@ -15,7 +17,7 @@ export default async function NextStay({ title, link }: NextStayProps) {
   const nextStay = await caller.user.stays.next()
 
   if (!nextStay) {
-    return null
+    return env.NEW_STAYS_ON_MY_PAGES ? <EmptyUpcomingStaysBlock /> : null
   }
 
   return (

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

@@ -29,10 +29,7 @@
 
 .imageOverlay {
   position: absolute;
-  top: 0;
+  inset: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   background: linear-gradient(
     to bottom,
     rgba(0, 0, 0, 0.1) 0%,

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/upcoming.module.css

@@ -1,3 +0,0 @@
-.container {
-  display: inline-grid;
-}

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

@@ -0,0 +1,67 @@
+"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/UpcomingStays/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;
+}

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

@@ -0,0 +1,114 @@
+"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 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"
+
+interface CarouselCardProps {
+  stay: Stay
+}
+
+export default function CarouselCard({ stay }: CarouselCardProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const { attributes } = stay
+  const {
+    checkinDate,
+    checkoutDate,
+    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="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>
+  )
+}

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

@@ -1,10 +1,12 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
+import { SectionHeader } from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
+import UpcomingStaysCarousel from "./Carousel"
 import ClientUpcomingStays from "./Client"
 
 import styles from "./upcoming.module.css"
@@ -20,10 +22,25 @@ export default async function UpcomingStays({
     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}>
-      <SectionHeader title={title} link={link} />
+        {title && <SectionHeader heading={title} link={link} />}
-      {initialUpcomingStays?.data.length ? (
+        <UpcomingStaysCarousel initialUpcomingStays={initialUpcomingStays} />
+        <SectionLink link={link} variant="mobile" />
+      </Section>
+    )
+  }
+
+  return (
+    <Section className={styles.container}>
+      {title && <SectionHeader heading={title} link={link} />}
+      {hasStays ? (
         <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
       ) : (
         <EmptyUpcomingStaysBlock />

apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/upcoming.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: inline-grid;
+}
+
+.carousel {
+  width: 100%;
+}
+
+.carousel .navigationButton {
+  top: 40%;
+}

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

@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest"
 import { Lang } from "@scandic-hotels/common/constants/language"
 import { dt } from "@scandic-hotels/common/dt"
 
-import { getDaysUntilText } from "./utils"
+import { getDaysUntilText } from "./getDaysUntilText"
 
 import type { IntlShape, MessageDescriptor } from "react-intl"
 
@@ -13,7 +13,6 @@ const mockIntl = {
     values?: Record<string, string | number | boolean | Date>
   ) => {
     const messages: Record<string, string> = {
-      "nextStay.past": `{date}`,
       "nextStay.today": "Today",
       "nextStay.tomorrow": "Tomorrow",
       "nextStay.inXDays": `In {days} days`,

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

@@ -14,15 +14,7 @@ export function getDaysUntilText(
 
   // Handle past dates edge case.
   if (daysUntil < 0) {
-    return intl.formatMessage(
+    return dt(checkinDate).locale(lang).format("D MMM YYYY")
-      {
-        id: "nextStay.past",
-        defaultMessage: "{date} ",
-      },
-      {
-        date: dt(checkinDate).locale(lang).format("D MMM YYYY"),
-      }
-    )
   }
 
   if (daysUntil === 0) {

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/Upcoming"
+import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/UpcomingStays"
 import { SJWidget } from "@/components/SJWidget"
 
 import JobylonFeed from "./JobylonFeed"

apps/scandic-web/env/server.ts

@@ -136,6 +136,13 @@ export const env = createEnv({
       .string()
       .optional()
       .transform((s) => s?.split(",") || []),
+    NEW_STAYS_ON_MY_PAGES: z
+      .string()
+      // only allow "true" or "false"
+      .refine((s) => s === "true" || s === "false")
+      // transform to boolean
+      .transform((s) => s === "true")
+      .default("false"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -213,6 +220,7 @@ export const env = createEnv({
     DTMC_ENTRA_ID_SECRET: process.env.DTMC_ENTRA_ID_SECRET,
     HOTEL_BRANDING: process.env.HOTEL_BRANDING,
     CHATBOT_LIVE_LANGS: process.env.CHATBOT_LIVE_LANGS,
+    NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
   },
 })
 

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css

@@ -26,7 +26,8 @@
 @media screen and (min-width: 768px) {
   .container {
     grid-template-columns: 1fr auto;
-    grid-template-areas: "availableRoomsCount filters"
+    grid-template-areas:
+      "availableRoomsCount filters"
       "noAvailabilityAlert noAvailabilityAlert";
   }
 }

packages/design-system/lib/fonts.css

@@ -276,7 +276,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/shared/fonts/material-symbols/rounded-1db5531f.woff2)
+  src: url(/_static/shared/fonts/material-symbols/rounded-1b8067b7.woff2)
     format('woff2');
 }
 

packages/trpc/env/server.ts

@@ -36,6 +36,13 @@ export const env = createEnv({
     SENTRY_ENVIRONMENT: z.string().default("development"),
     PUBLIC_URL: z.string().default(""),
     SALESFORCE_PREFERENCE_BASE_URL: z.string(),
+    NEW_STAYS_ON_MY_PAGES: z
+      .string()
+      // only allow "true" or "false"
+      .refine((s) => s === "true" || s === "false")
+      // transform to boolean
+      .transform((s) => s === "true")
+      .default("false"),
   },
   emptyStringAsUndefined: true,
   runtimeEnv: {
@@ -56,5 +63,6 @@ export const env = createEnv({
     SENTRY_ENVIRONMENT: process.env.SENTRY_ENVIRONMENT,
     PUBLIC_URL: process.env.NEXT_PUBLIC_PUBLIC_URL,
     SALESFORCE_PREFERENCE_BASE_URL: process.env.SALESFORCE_PREFERENCE_BASE_URL,
+    NEW_STAYS_ON_MY_PAGES: process.env.NEW_STAYS_ON_MY_PAGES,
   },
 })

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

@@ -1,6 +1,7 @@
 import { createCounter } from "@scandic-hotels/common/telemetry"
 import { safeTry } from "@scandic-hotels/common/utils/safeTry"
 
+import { env } from "../../../../env/server"
 import { router } from "../../.."
 import * as api from "../../../api"
 import { Transactions } from "../../../enums/transactions"
@@ -184,6 +185,20 @@ export const userQueryRouter = router({
             language
           )
 
+          if (env.NEW_STAYS_ON_MY_PAGES) {
+            if (updatedData.length <= 1) {
+              // If there are 1 or fewer stays, return null since NextStay handles this
+              return null
+            }
+
+            // If there are multiple stays, filter out the first one since NextStay shows it
+            const filteredData = updatedData.slice(1)
+            return {
+              data: filteredData,
+              nextCursor,
+            }
+          }
+
           return {
             data: updatedData,
             nextCursor,

scripts/material-symbols-update.mts

@@ -133,6 +133,7 @@ const icons = [
   "kayaking",
   "kettle",
   "keyboard_arrow_down",
+  "keyboard_arrow_right",
   "keyboard_arrow_up",
   "king_bed",
   "kitchen",
@@ -237,7 +238,8 @@ const hash = createHash(icons).substring(0, 8);
 async function fetchIconUrl(url: string) {
   const response = await fetch(url, {
     headers: {
-            Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
+      Accept:
+        "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
       "User-Agent":
         "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36",
     },
@@ -298,7 +300,7 @@ async function cleanFontDirs() {
   await writeFile(
     join(FONT_DIR, ".auto-generated"),
     `Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.\nhash=${hash}\ncreated=${new Date().toISOString()}\n`,
-        { encoding: "utf-8" }
+    { encoding: "utf-8" },
   );
 }
 
@@ -313,11 +315,11 @@ async function updateFontCSS() {
     file,
     css.replace(
       /url\(\/_static\/shared\/fonts\/material-symbols\/rounded[^)]+\)/,
-            `url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`
+      `url(/_static/shared/fonts/material-symbols/rounded-${hash}.woff2)`,
     ),
     {
       encoding: "utf-8",
-        }
+    },
   );
 }
 
@@ -337,7 +339,7 @@ async function main() {
     process.exit(0);
   } else {
     console.error(
-            `Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`
+      `Unable to find the icon font src URL in CSS response from Google Fonts at ${fontUrl}`,
     );
   }
 }

shared/fonts/material-symbols/.auto-generated

@@ -1,3 +1,3 @@
 Auto-generated, do not edit. Use scripts/material-symbols-update.mts to update.
-hash=1db5531f
+hash=1b8067b7
-created=2025-09-17T06:58:37.841Z
+created=2025-11-11T10:02:22.385Z