scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

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

* fix: wrong type import


Approved-by: Michael Zetterberg
This commit is contained in:
Tobias Johansson
2025-06-25 11:12:28 +00:00
parent c0efbd17ff
commit 8272327993
18 changed files with 114 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
View File

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

9
apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -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 selectedToDate = dt(date.toDate).locale(lang).format("D MMM")
const selectedFromDate = dt(date.fromDate)
.locale(lang)
.format(shortDateFormat[lang])
const selectedToDate = dt(date.toDate)
.locale(lang)
.format(shortDateFormat[lang])
const locationAndDateIsSet = searchTerm && date

5
apps/scandic-web/components/DatePicker/index.tsx
View File

@@ -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 (

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

@@ -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>

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

@@ -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>

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

@@ -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 */}
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nightsMsg})
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{nightsMsg}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
</Body>
<MaterialIcon
className={styles.chevronIcon}

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

@@ -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>

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

@@ -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({

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

@@ -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({

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

@@ -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}>

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

@@ -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

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

@@ -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>
)}

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

@@ -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]),
}
)

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

@@ -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 departue = dt(toDate).locale(lang).format("ddd, D MMM")
const arrival = dt(fromDate).locale(lang).format(longDateFormat[lang])
const departue = dt(toDate).locale(lang).format(longDateFormat[lang])
const duration = ` ${arrival} - ${departue} (${nightsMsg})`
const isAllBreakfastIncluded = rooms.every((room) => room.breakfastIncluded)

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

@@ -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 */}
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
</p>
</Typography>
</header>

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

@@ -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 */}
{dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
{nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
</Body>
<MaterialIcon
className={styles.chevronIcon}

6
apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
View File

@@ -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>

37
apps/scandic-web/constants/dateFormats.ts Normal file
View File

@@ -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