Merged in fix/SW-2801-correct-date-formats (pull request #2400)

fix(SW-2801): Added lang specific date formats

* fix(SW-2801): Added lang specific date formats

* fix: wrong type import


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/MyStay/Receipt/Footer/index.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateWithYearFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import { getIntl } from "@/i18n"
@@ -71,7 +72,9 @@ export default async function Footer({ booking, room }: FooterProps) {
           </Typography>
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <dd>
-              {dt(booking.checkInDate).locale(lang).format("ddd, D MMM YYYY")}
+              {dt(booking.checkInDate)
+                .locale(lang)
+                .format(longDateWithYearFormat[lang])}
             </dd>
           </Typography>
         </div>
@@ -86,7 +89,9 @@ export default async function Footer({ booking, room }: FooterProps) {
           </Typography>
           <Typography variant="Body/Supporting text (caption)/smRegular">
             <dd>
-              {dt(booking.checkOutDate).locale(lang).format("ddd, D MMM YYYY")}
+              {dt(booking.checkOutDate)
+                .locale(lang)
+                .format(longDateWithYearFormat[lang])}
             </dd>
           </Typography>
         </div>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/CancelStay/Steps/Confirmation/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateWithYearFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -41,8 +42,12 @@ export default function CancelStayConfirmation({
     })
   )
 
-  const checkInDate = dt(fromDate).locale(lang).format("dddd D MMM YYYY")
-  const checkOutDate = dt(toDate).locale(lang).format("dddd D MMM YYYY")
+  const checkInDate = dt(fromDate)
+    .locale(lang)
+    .format(longDateWithYearFormat[lang])
+  const checkOutDate = dt(toDate)
+    .locale(lang)
+    .format(longDateWithYearFormat[lang])
 
   const title = intl.formatMessage({ defaultMessage: "Cancel booking" })
   const primaryLabel = intl.formatMessage({

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
 
+import { longDateWithYearFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 import { useMyStayStore } from "@/stores/my-stay"
@@ -26,7 +27,7 @@ interface ConfirmationProps {
 }
 
 function formatDate(date: Date | string, lang: Lang) {
-  return dt(date).locale(lang).format("dddd, DD MMM, YYYY")
+  return dt(date).locale(lang).format(longDateWithYearFormat[lang])
 }
 
 export default function Confirmation({

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Form/NewDates/index.tsx

@@ -10,6 +10,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateWithYearFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import DatePickerSingleDesktop from "@/components/DatePicker/Single/Desktop"
@@ -65,8 +66,12 @@ export default function NewDates({ checkInDate, checkOutDate }: NewDatesProps) {
   const checkInLabel = intl.formatMessage({ defaultMessage: "Check-in" })
   const checkOutLabel = intl.formatMessage({ defaultMessage: "Check-out" })
 
-  const checkInText = dt(fromDate).locale(lang).format("dddd, DD MMM, YYYY")
-  const checkOutText = dt(toDate).locale(lang).format("dddd, DD MMM, YYYY")
+  const checkInText = dt(fromDate)
+    .locale(lang)
+    .format(longDateWithYearFormat[lang])
+  const checkOutText = dt(toDate)
+    .locale(lang)
+    .format(longDateWithYearFormat[lang])
   return (
     <>
       <div className={styles.container}>

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Dates/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { shortDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -19,9 +20,9 @@ export default function Dates() {
     checkOutDate: state.bookedRoom.checkOutDate,
   }))
 
-  const from = dt(checkInDate).locale(lang).format("D MMM")
+  const from = dt(checkInDate).locale(lang).format(shortDateFormat[lang])
   const fromYear = dt(checkInDate).year()
-  const to = dt(checkOutDate).locale(lang).format("D MMM")
+  const to = dt(checkOutDate).locale(lang).format(shortDateFormat[lang])
   const toYear = dt(checkOutDate).year()
 
   const isSameYear = fromYear === toYear

apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx

@@ -7,6 +7,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
+import { changeOrCancelDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import { IconForFeatureCode } from "@/components/HotelReservation/utils"
@@ -296,7 +297,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
 
               <Typography variant="Body/Paragraph/mdRegular">
                 {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                <p>18:00, {fromDate.format("dddd D MMM")}</p>
+                <p>18:00, {fromDate.format(changeOrCancelDateFormat[lang])}</p>
               </Typography>
             </div>
           )}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx

@@ -1,5 +1,6 @@
 import { useIntl } from "react-intl"
 
+import { changeOrCancelDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useMyStayStore } from "@/stores/my-stay"
 
@@ -31,7 +32,7 @@ export default function ModifyBy() {
     },
     {
       time: "18:00",
-      date: fromDate.format("dddd D MMM"),
+      date: fromDate.format(changeOrCancelDateFormat[lang]),
     }
   )