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/components/Blocks/DynamicContent/Stays/utils/getDaysUntilText.ts

@@ -0,0 +1,57 @@
+import { dt } from "@scandic-hotels/common/dt"
+
+import type { Lang } from "@scandic-hotels/common/constants/language"
+import type { IntlShape } from "react-intl"
+
+export function getDaysUntilText(
+  checkinDate: string,
+  lang: Lang,
+  intl: IntlShape
+): string {
+  const checkInDateTime = dt(checkinDate).locale(lang).startOf("day")
+  const now = dt().locale(lang).startOf("day")
+  const daysUntil = checkInDateTime.diff(now, "days")
+
+  // Handle past dates edge case.
+  if (daysUntil < 0) {
+    return dt(checkinDate).locale(lang).format("D MMM YYYY")
+  }
+
+  if (daysUntil === 0) {
+    return intl.formatMessage({
+      id: "nextStay.today",
+      defaultMessage: "Today",
+    })
+  }
+
+  if (daysUntil === 1) {
+    return intl.formatMessage({
+      id: "nextStay.tomorrow",
+      defaultMessage: "Tomorrow",
+    })
+  }
+
+  if (daysUntil > 1 && daysUntil <= 30) {
+    return intl.formatMessage(
+      {
+        id: "nextStay.inXDays",
+        defaultMessage: "In {days} days",
+      },
+      {
+        days: daysUntil,
+      }
+    )
+  }
+
+  // Use proper month calculation for dates beyond 30 days
+  const monthsUntil = checkInDateTime.diff(now, "months")
+  return intl.formatMessage(
+    {
+      id: "nextStay.inXMonths",
+      defaultMessage: "In {months} month{months, plural, =1 {} other {s}}",
+    },
+    {
+      months: monthsUntil,
+    }
+  )
+}