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/BookingWidget/MobileToggleButton/button.module.css

@@ -24,7 +24,7 @@
 
 .partial {
   grid-template-columns:
-    minmax(auto, 120px) min-content minmax(auto, 120px)
+    minmax(auto, 120px) min-content 1fr
     auto;
 }
 

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -8,6 +8,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 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 SkeletonShimmer from "@/components/SkeletonShimmer"
@@ -32,8 +33,12 @@ export default function MobileToggleButton({
     name: "selectedSearch",
   })
 
-  const selectedFromDate = dt(date.fromDate).locale(lang).format("D MMM")
+  const selectedFromDate = dt(date.fromDate)
-  const selectedToDate = dt(date.toDate).locale(lang).format("D MMM")
+    .locale(lang)
+    .format(shortDateFormat[lang])
+  const selectedToDate = dt(date.toDate)
+    .locale(lang)
+    .format(shortDateFormat[lang])
 
   const locationAndDateIsSet = searchTerm && date
 

apps/scandic-web/components/DatePicker/index.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react"
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -128,9 +129,9 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
 
   const selectedFromDate = dt(selectedDate.fromDate)
     .locale(lang)
-    .format("ddd D MMM")
+    .format(longDateFormat[lang])
   const selectedToDate = !!selectedDate.toDate
-    ? dt(selectedDate.toDate).locale(lang).format("ddd D MMM")
+    ? dt(selectedDate.toDate).locale(lang).format(longDateFormat[lang])
     : ""
 
   return (

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/index.tsx

@@ -6,6 +6,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
@@ -50,10 +51,10 @@ export default function Receipt() {
         </Typography>
         <Typography variant="Body/Paragraph/mdBold">
           <p className={styles.dates}>
-            {dt(fromDate).locale(lang).format("ddd, D MMM")}
+            {dt(fromDate).locale(lang).format(longDateFormat[lang])}
             <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
             {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-            {dt(toDate).locale(lang).format("ddd, D MMM")} ({nights})
+            {dt(toDate).locale(lang).format(longDateFormat[lang])} ({nights})
           </p>
         </Typography>
       </header>

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/Room/index.tsx

@@ -6,6 +6,10 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
+import {
+  changeOrCancelDateFormat,
+  longDateFormat,
+} from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import Image from "@/components/Image"
@@ -128,7 +132,7 @@ export default function Room({
                       defaultMessage: "{checkInDate} from {checkInTime}",
                     },
                     {
-                      checkInDate: fromDate.format("ddd, D MMM"),
+                      checkInDate: fromDate.format(longDateFormat[lang]),
                       checkInTime: checkInTime,
                     }
                   )}
@@ -146,7 +150,7 @@ export default function Room({
                       defaultMessage: "{checkOutDate} from {checkOutTime}",
                     },
                     {
-                      checkOutDate: toDate.format("ddd, D MMM"),
+                      checkOutDate: toDate.format(longDateFormat[lang]),
                       checkOutTime: checkOutTime,
                     }
                   )}
@@ -172,7 +176,10 @@ export default function Room({
                       {
                         defaultMessage: "Until {time}, {date}",
                       },
-                      { time: "18:00", date: fromDate.format("dddd D MMM") }
+                      {
+                        time: "18:00",
+                        date: fromDate.format(changeOrCancelDateFormat[lang]),
+                      }
                     )}
                   </p>
                 </li>

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -8,6 +8,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
@@ -96,14 +97,15 @@ export default function SummaryUI({
           })}
         </Subtitle>
         <Body className={styles.date} color="baseTextMediumContrast">
-          {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
+          {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
           <MaterialIcon
             icon="arrow_right"
             color="Icon/Interactive/Secondary"
             size={15}
           />
-          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-          {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nightsMsg})
+          {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
+          {nightsMsg}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
         </Body>
         <MaterialIcon
           className={styles.chevronIcon}

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 checkInDate = dt(fromDate)
-  const checkOutDate = dt(toDate).locale(lang).format("dddd D MMM YYYY")
+    .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 checkInText = dt(fromDate)
-  const checkOutText = dt(toDate).locale(lang).format("dddd, DD MMM, YYYY")
+    .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]),
     }
   )
 

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import useLang from "@/hooks/useLang"
@@ -82,8 +83,8 @@ export default function PriceDetailsTable({
     { totalNights: nights }
   )
 
-  const arrival = dt(fromDate).locale(lang).format("ddd, D MMM")
+  const arrival = dt(fromDate).locale(lang).format(longDateFormat[lang])
-  const departue = dt(toDate).locale(lang).format("ddd, D MMM")
+  const departue = dt(toDate).locale(lang).format(longDateFormat[lang])
   const duration = ` ${arrival} - ${departue} (${nightsMsg})`
 
   const isAllBreakfastIncluded = rooms.every((room) => room.breakfastIncluded)

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx

@@ -7,6 +7,7 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useRatesStore } from "@/stores/select-rate"
 
@@ -84,10 +85,11 @@ export default function SummaryContent({
         </div>
         <Typography variant="Body/Paragraph/mdBold">
           <p className={styles.dates}>
-            {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
+            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
             <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-            {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
+            {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
+            {nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
           </p>
         </Typography>
       </header>

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx

@@ -7,6 +7,7 @@ import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
+import { longDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 import { useRatesStore } from "@/stores/select-rate"
 
@@ -84,14 +85,15 @@ export default function Summary({
             })}
           </Subtitle>
           <Body className={styles.date} color="baseTextMediumContrast">
-            {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
+            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
             <MaterialIcon
               icon="arrow_forward"
               size={15}
               color="Icon/Interactive/Secondary"
             />
-            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-            {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
+            {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
+            {nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
           </Body>
           <MaterialIcon
             className={styles.chevronIcon}

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -4,6 +4,7 @@ import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import { changeOrCancelDateFormat } from "@/constants/dateFormats"
 import { dt } from "@/lib/dt"
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
@@ -294,7 +295,10 @@ export default function BookedRoomSidePeek({
                         {
                           defaultMessage: "Until {time}, {date}",
                         },
-                        { time: "18:00", date: fromDate.format("dddd D MMM") }
+                        {
+                          time: "18:00",
+                          date: fromDate.format(changeOrCancelDateFormat[lang]),
+                        }
                       )}
                     </p>
                   </Typography>

apps/scandic-web/constants/dateFormats.ts

@@ -0,0 +1,37 @@
+import { Lang } from "@scandic-hotels/common/constants/language"
+
+export const longDateFormat = {
+  [Lang.en]: "ddd, D MMM",
+  [Lang.sv]: "ddd D MMM",
+  [Lang.no]: "ddd D. MMM",
+  [Lang.da]: "ddd D. MMM",
+  [Lang.de]: "ddd D. MMM",
+  [Lang.fi]: "ddd D.M",
+} as const
+
+export const longDateWithYearFormat = {
+  [Lang.en]: "ddd, D MMM YYYY",
+  [Lang.sv]: "ddd D MMM YYYY",
+  [Lang.no]: "ddd D. MMM YYYY",
+  [Lang.da]: "ddd D. MMM YYYY",
+  [Lang.de]: "ddd D. MMM YYYY",
+  [Lang.fi]: "ddd D.M. YYYY",
+} as const
+
+export const shortDateFormat = {
+  [Lang.en]: "D MMM",
+  [Lang.sv]: "D MMM",
+  [Lang.no]: "D. MMM",
+  [Lang.da]: "D. MMM",
+  [Lang.de]: "D. MMM",
+  [Lang.fi]: "D.MM.",
+} as const
+
+export const changeOrCancelDateFormat = {
+  [Lang.sv]: "dddd D MMM",
+  [Lang.en]: "dddd D MMM",
+  [Lang.no]: "dddd D. MMM",
+  [Lang.da]: "dddd D. MMM",
+  [Lang.de]: "dddd D. MMM",
+  [Lang.fi]: "dd D MMMM",
+} as const