Merged in fix/add-years-to-get-days-until-text-util (pull request #3281)

fix: add years to getDaysUntilText + confirmation number in upcoming stay card

* fix: add years to getDaysUntilText + confirmation number in upcoming stay card


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

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

@@ -29,6 +29,7 @@ export default function CarouselCard({ stay }: CarouselCardProps) {
   const {
     checkinDate,
     checkoutDate,
+    confirmationNumber,
     hotelInformation,
     isWebAppOrigin,
     bookingUrl,
@@ -67,6 +68,20 @@ export default function CarouselCard({ stay }: CarouselCardProps) {
       </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}>

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

@@ -18,6 +18,7 @@ const mockIntl = {
       "nextStay.inXDays": `In {days} days`,
       "nextStay.inXMonths":
         "In {months, plural, one {# month} other {# months}}",
+      "nextStay.inXYears": "In {years, plural, one {# year} other {# years}}",
     }
 
     let message: string =
@@ -40,6 +41,18 @@ const mockIntl = {
         return message
       }
 
+      if (message.includes("{years, plural")) {
+        const years = Number(values.years)
+
+        if (years === 1) {
+          message = "In 1 year"
+        } else {
+          message = `In ${years} years`
+        }
+
+        return message
+      }
+
       Object.entries(values).forEach(([key, value]) => {
         message = message.replace(`{${key}}`, String(value))
       })
@@ -167,7 +180,40 @@ describe("getDaysUntilText", () => {
       const futureDate = dt().add(1, "year").format("YYYY-MM-DD")
       const result = getDaysUntilText(futureDate, lang, mockIntl)
 
-      expect(result).toBe("In 12 months")
+      expect(result).toBe("In 1 year")
+    })
+  })
+
+  describe("years until check-in (12+ months)", () => {
+    it("should return 'In 1 year' for 12 months", () => {
+      const futureDate = dt().add(12, "months").format("YYYY-MM-DD")
+      const result = getDaysUntilText(futureDate, lang, mockIntl)
+
+      expect(result).toBe("In 1 year")
+    })
+
+    it("should return 'In 2 years' for dates 2 years away", () => {
+      const futureDate = dt().add(2, "years").format("YYYY-MM-DD")
+      const result = getDaysUntilText(futureDate, lang, mockIntl)
+
+      expect(result).toBe("In 2 years")
+    })
+
+    it("should return 'In 5 years' for dates 5 years away", () => {
+      const futureDate = dt().add(5, "years").format("YYYY-MM-DD")
+      const result = getDaysUntilText(futureDate, lang, mockIntl)
+
+      expect(result).toBe("In 5 years")
+    })
+
+    it("should handle the boundary at 11 months vs 12 months", () => {
+      const date11Months = dt().add(11, "months").format("YYYY-MM-DD")
+      const date12Months = dt().add(12, "months").format("YYYY-MM-DD")
+
+      expect(getDaysUntilText(date11Months, lang, mockIntl)).toBe(
+        "In 11 months"
+      )
+      expect(getDaysUntilText(date12Months, lang, mockIntl)).toBe("In 1 year")
     })
   })
 

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

@@ -45,13 +45,28 @@ export function getDaysUntilText(
 
   // Use proper month calculation for dates beyond 30 days
   const monthsUntil = checkInDateTime.diff(now, "months")
+
+  if (monthsUntil <= 11) {
+    return intl.formatMessage(
+      {
+        id: "nextStay.inXMonths",
+        defaultMessage: "In {months, plural, one {# month} other { # months}}",
+      },
+      {
+        months: monthsUntil,
+      }
+    )
+  }
+
+  // 12+ months (show years)
+  const yearsUntil = checkInDateTime.diff(now, "years")
   return intl.formatMessage(
     {
-      id: "nextStay.inXMonths",
+      id: "nextStay.inXYears",
-      defaultMessage: "In {months, plural, one {# month} other { # months}}",
+      defaultMessage: "In {years, plural, one {# year} other {# years}}",
     },
     {
-      months: monthsUntil,
+      years: yearsUntil,
     }
   )
 }

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-0ce1d4ea.woff2)
+  src: url(/_static/shared/fonts/material-symbols/rounded-b1df8938.woff2)
     format('woff2');
 }
 

scripts/material-symbols-update.mts

@@ -204,6 +204,7 @@ const icons = [
   "sports_tennis",
   "stairs",
   "star",
+  "sticky_note_2",
   "straighten",
   "styler",
   "support_agent",
@@ -306,7 +307,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" },
   );
 }
 
@@ -321,11 +322,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",
-    }
+    },
   );
 }
 
@@ -345,7 +346,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=0ce1d4ea
+hash=b1df8938
-created=2025-12-03T15:14:42.683Z
+created=2025-12-04T09:28:50.275Z