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

fix(i18n): prepare for Lokalise

Browse Source
This commit is contained in:
Michael Zetterberg
2025-01-03 14:54:46 +01:00
parent cbc17e2c5b
commit d2ce9c0d7c
120 changed files with 1703 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/BookingWidget/MobileToggleButton/index.tsx
View File

@@ -1,4 +1,5 @@
"use client"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -34,13 +35,12 @@ export default function MobileToggleButton({
? JSON.parse(decodeURIComponent(location))
: null
const nights = dt(d.toDate).diff(dt(d.fromDate), "days")
const selectedFromDate = dt(d.fromDate).locale(lang).format("D MMM")
const selectedToDate = dt(d.toDate).locale(lang).format("D MMM")
const locationAndDateIsSet = parsedLocation && d
const totalNights = dt(d.toDate).diff(dt(d.fromDate), "days")
const totalRooms = rooms.length
const totalAdults = rooms.reduce((acc, room) => {
if (room.adults) {
@@ -55,6 +55,32 @@ export default function MobileToggleButton({
return acc
}, 0)
const totalNightsMsg = intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{ totalNights }
)
const totalAdultsMsg = intl.formatMessage(
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
{ totalAdults }
)
const totalChildrenMsg = intl.formatMessage(
{ id: "{totalChildren, plural, one {# child} other {# children}}" },
{ totalChildren }
)
const totalRoomsMsg = intl.formatMessage(
{ id: "{totalRooms, plural, one {# room} other {# rooms}}" },
{ totalRooms }
)
const totalDetails = [totalAdultsMsg]
if (totalChildren > 0) {
totalDetails.push(totalChildrenMsg)
}
totalDetails.push(totalRoomsMsg)
return (
<div
className={locationAndDateIsSet ? styles.complete : styles.partial}
@@ -76,13 +102,16 @@ export default function MobileToggleButton({
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption type="bold" color="red">
{intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}
{totalNightsMsg}
</Caption>
<Body>
{selectedFromDate} - {selectedToDate}
{intl.formatMessage(
{ id: "{selectedFromDate} - {selectedToDate}" },
{
selectedFromDate,
selectedToDate,
}
)}
</Body>
</div>
<div className={styles.icon}>
@@ -96,17 +125,17 @@ export default function MobileToggleButton({
<div>
<Caption color="red">{parsedLocation?.name}</Caption>
<Caption>
{`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
{ id: "booking.nights" },
{ totalNights: nights }
)}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${
totalChildren > 0
? intl.formatMessage(
{ id: "booking.children" },
{ totalChildren }
) + ", "
: ""
}${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
{intl.formatMessage(
{
id: "{selectedFromDate} - {selectedToDate} ({totalNights}) {details}",
},
{
selectedFromDate,
selectedToDate,
totalNights: totalNightsMsg,
details: totalDetails.join(", "),
}
)}
</Caption>
</div>
<div className={styles.icon}>
@@ -132,7 +161,10 @@ export function MobileToggleButtonSkeleton() {
<Divider color="baseSurfaceSubtleNormal" variant="vertical" />
<div>
<Caption type="bold" color="red">
{intl.formatMessage({ id: "booking.nights" }, { totalNights: 0 })}
{intl.formatMessage(
{ id: "{totalNights, plural, one {# night} other {# nights}}" },
{ totalNights: 0 }
)}
</Caption>
<SkeletonShimmer height="24px" />
</div>