Merged in feat/LOY-428-previous-stay-redesign (pull request #3142)

Feat(LOY-428): Previous Stays Redesign

* feat(LOY-428): Previous stays WIP

* fix(LOY-428): fix alignment issue

* fix(LOY-428): css fixes & imagefallback prop value

* fix(LOY-428): use css vars

* fix(LOY-428): add unit test for relative time text

* chore(LOY-428): remove else if conditions

* fix(LOY-428): named exports & remove duplicate width/height setting

* fix(LOY-428): better formatting of upcoming stays months text

* fix(LOY-428): fewer typography wrappers


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Card/card.module.css

@@ -0,0 +1,92 @@
+.card {
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Border-Default);
+  background: var(--Text-Brand-OnPrimary-3-Default);
+  display: flex;
+  padding: var(--Space-x15);
+  align-items: flex-start;
+  gap: var(--Space-x15);
+  align-self: stretch;
+  height: 100%;
+}
+
+.link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.fallback {
+  min-width: 80px;
+  min-height: 108px;
+}
+
+.image {
+  width: 80px;
+  max-width: 80px;
+  height: 108px;
+  max-height: 108px;
+  border-radius: var(--Corner-radius-md);
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.content {
+  display: grid;
+  gap: var(--Space-x1);
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.hotelName,
+.cityName,
+.dates {
+  color: var(--Text-Default);
+}
+
+.divider {
+  display: none;
+}
+
+.chip {
+  display: flex;
+  padding: var(--Space-x05) var(--Space-x1);
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x05);
+  border-radius: var(--Corner-radius-sm);
+  background: var(--Surface-Secondary-Default);
+  width: fit-content;
+}
+
+.chipText {
+  color: var(--Text-Interactive-Default);
+}
+
+.dateSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.dates {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x05);
+}
+
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Space-x15);
+  }
+  .divider {
+    display: inline-block;
+  }
+  .dateSection {
+    flex-direction: row;
+    gap: var(--Space-x2);
+  }
+}

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

@@ -0,0 +1,105 @@
+"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.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "@/hooks/useLang"
+
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
+import { Card } from "./Card"
+
+import styles from "./cards.module.css"
+
+import type {
+  PreviousStaysClientProps,
+  PreviousStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/previous"
+
+export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
+  const lang = useLang()
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {
+        limit: 6,
+        lang,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialPreviousStays],
+        },
+      }
+    )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  const stays = data.pages
+    .filter((page): page is PreviousStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  return (
+    <ListContainer>
+      <div className={styles.grid}>
+        {stays.map((stay) => (
+          <Card key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+      </div>
+      {hasNextPage ? (
+        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+      ) : null}
+    </ListContainer>
+  )
+}

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

@@ -15,7 +15,7 @@ import type {
   PreviousStaysNonNullResponseObject,
 } from "@/types/components/myPages/stays/previous"
 
-export default function ClientPreviousStays({
+export function ClientPreviousStays({
   initialPreviousStays,
 }: PreviousStaysClientProps) {
   const lang = useLang()

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

@@ -0,0 +1,18 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1367px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+    align-items: stretch;
+  }
+}

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

@@ -1,3 +1,4 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
@@ -5,7 +6,8 @@ import { Section } from "@/components/Section"
 import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 
-import ClientPreviousStays from "./Client"
+import { Cards } from "./Cards"
+import { ClientPreviousStays } from "./Client"
 
 import styles from "./previous.module.css"
 
@@ -24,14 +26,15 @@ export default async function PreviousStays({
     return null
   }
 
+  const StaysComponent = env.NEW_STAYS_ON_MY_PAGES ? Cards : ClientPreviousStays
+
   return (
     <Section>
       <div className={styles.header}>
         <SectionHeader title={title} link={link} />
-
         <ClaimPoints />
       </div>
-      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
+      <StaysComponent initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </Section>
   )

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

@@ -16,7 +16,8 @@ const mockIntl = {
       "nextStay.today": "Today",
       "nextStay.tomorrow": "Tomorrow",
       "nextStay.inXDays": `In {days} days`,
-      "nextStay.inXMonths": `In {months} month{months, plural, =1 {} other {s}}`,
+      "nextStay.inXMonths":
+        "In {months, plural, one {# month} other {# months}}",
     }
 
     let message: string =
@@ -27,15 +28,21 @@ const mockIntl = {
       ""
 
     if (values) {
+      if (message.includes("{months, plural")) {
+        const months = Number(values.months)
+
+        if (months === 1) {
+          message = "In 1 month"
+        } else {
+          message = `In ${months} months`
+        }
+
+        return message
+      }
+
       Object.entries(values).forEach(([key, value]) => {
         message = message.replace(`{${key}}`, String(value))
       })
-
-      if (values.months === 1) {
-        message = message.replace("{months, plural, =1 {} other {s}}", "")
-      } else {
-        message = message.replace("{months, plural, =1 {} other {s}}", "s")
-      }
     }
 
     return message

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

@@ -48,7 +48,7 @@ export function getDaysUntilText(
   return intl.formatMessage(
     {
       id: "nextStay.inXMonths",
-      defaultMessage: "In {months} month{months, plural, =1 {} other {s}}",
+      defaultMessage: "In {months, plural, one {# month} other { # months}}",
     },
     {
       months: monthsUntil,

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

@@ -0,0 +1,236 @@
+import { describe, expect, it } from "vitest"
+
+import { dt } from "@scandic-hotels/common/dt"
+
+import { getRelativePastTime } from "./getRelativePastTime"
+
+import type { IntlShape, MessageDescriptor } from "react-intl"
+
+const mockIntl = {
+  formatMessage: (
+    descriptor: MessageDescriptor,
+    values?: Record<string, string | number | boolean | Date>
+  ) => {
+    const messages: Record<string, string> = {
+      "common.nrDaysAgo": `{count, plural, one {# day ago} other {# days ago}}`,
+      "common.nrMonthsAgo": `{count, plural, one {# month ago} other {# months ago}}`,
+      "common.nrYearsAgo": `{count, plural, one {# year ago} other {# years ago}}`,
+    }
+
+    let message: string =
+      messages[descriptor.id as string] ||
+      (typeof descriptor.defaultMessage === "string"
+        ? descriptor.defaultMessage
+        : "") ||
+      ""
+
+    if (values) {
+      // Handle plural forms first
+      if (message.includes("{count, plural")) {
+        const count = values.count as number
+        if (count === 1) {
+          // Extract the singular form (between "one {" and "}")
+          const singularMatch = message.match(/one {(.*?)}/)
+          if (singularMatch) {
+            message = singularMatch[1].replace("#", String(count))
+          }
+        } else {
+          // Extract the plural form (between "other {" and "}")
+          const pluralMatch = message.match(/other {(.*?)}/)
+          if (pluralMatch) {
+            message = pluralMatch[1].replace("#", String(count))
+          }
+        }
+      }
+
+      // Replace any remaining placeholders
+      Object.entries(values).forEach(([key, value]) => {
+        message = message.replace(`{${key}}`, String(value))
+      })
+    }
+
+    return message
+  },
+} as IntlShape
+
+describe("getRelativePastTime", () => {
+  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)
+
+      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)
+
+      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)
+
+      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)
+
+      expect(result).toBe("30 days ago")
+    })
+
+    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)
+
+        if (days === 1) {
+          expect(result).toBe("1 day ago")
+        } else {
+          expect(result).toBe(`${days} days ago`)
+        }
+      }
+    })
+  })
+
+  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)
+
+      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)
+
+      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)
+
+      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)
+
+      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)
+
+      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)
+
+      expect(result).toBe("12 months ago")
+    })
+  })
+
+  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)
+
+      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)
+
+      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)
+
+      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)
+
+      expect(result).toBe("5 years ago")
+    })
+  })
+
+  describe("edge cases", () => {
+    it("should handle dates with different time components consistently", () => {
+      // The function calculates exact day differences, so time components matter
+      // Using start of day to ensure consistent results
+      const dateWithTime1 = dt()
+        .subtract(5, "days")
+        .startOf("day")
+        .format("YYYY-MM-DD HH:mm")
+      const dateWithTime2 = dt()
+        .subtract(5, "days")
+        .startOf("day")
+        .format("YYYY-MM-DD HH:mm")
+
+      const result1 = getRelativePastTime(dateWithTime1, mockIntl)
+      const result2 = getRelativePastTime(dateWithTime2, mockIntl)
+
+      expect(result1).toBe("5 days ago")
+      expect(result2).toBe("5 days ago")
+    })
+
+    it("should handle ISO date strings with timezone", () => {
+      const isoDate = dt().subtract(7, "days").toISOString()
+      const result = getRelativePastTime(isoDate, mockIntl)
+
+      expect(result).toBe("7 days ago")
+    })
+
+    it("should handle future dates (should return 0 days ago for same day)", () => {
+      // The function doesn't handle negative days specially - it just uses the diff calculation
+      // For future dates on the same day, diff will be 0
+      const futureDate = dt().add(1, "day").startOf("day").format("YYYY-MM-DD")
+      const result = getRelativePastTime(futureDate, mockIntl)
+
+      expect(result).toBe("0 days ago")
+    })
+  })
+
+  describe("boundary transitions", () => {
+    it("should transition correctly from days to months at 31 days", () => {
+      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(getRelativePastTime(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(getRelativePastTime(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(getRelativePastTime(date2, mockIntl)).toBe("2 days ago")
+    })
+  })
+})

apps/scandic-web/utils/getRelativePastTime.ts

@@ -0,0 +1,54 @@
+import { dt } from "@scandic-hotels/common/dt"
+
+import type { IntlShape } from "react-intl"
+
+/**
+ * Returns relative past time text for a date (e.g., "3 days ago", "2 months ago", "1 year ago")
+ *
+ * Examples:
+ * - 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"
+ */
+export function getRelativePastTime(
+  checkoutDate: string,
+  intl: IntlShape
+): string {
+  const now = dt()
+  const checkout = dt(checkoutDate)
+  const daysDiff = now.diff(checkout, "days")
+
+  if (daysDiff <= 30) {
+    // 1-30 days
+    return intl.formatMessage(
+      {
+        id: "common.nrDaysAgo",
+        defaultMessage: "{count, plural, one {# day ago} other {# days ago}}",
+      },
+      { count: daysDiff }
+    )
+  }
+
+  if (daysDiff <= 364) {
+    // 31-364 days (show months)
+    const monthsDiff = Math.floor(daysDiff / 30)
+    return intl.formatMessage(
+      {
+        id: "common.nrMonthsAgo",
+        defaultMessage:
+          "{count, plural, one {# month ago} other {# months ago}}",
+      },
+      { count: monthsDiff }
+    )
+  }
+
+  // 365+ days (show years)
+  const yearsDiff = Math.floor(daysDiff / 365)
+  return intl.formatMessage(
+    {
+      id: "common.nrYearsAgo",
+      defaultMessage: "{count, plural, one {# year ago} other {# years ago}}",
+    },
+    { count: yearsDiff }
+  )
+}