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",
-      defaultMessage: "In {months, plural, one {# month} other { # months}}",
+      id: "nextStay.inXYears",
+      defaultMessage: "In {years, plural, one {# year} other {# years}}",
     },
     {
-      months: monthsUntil,
+      years: yearsUntil,
     }
   )
 }