Merged in feat/sw-3225-move-parking-information-to-booking-flow (pull request #2614)

feat(SW-3225): Move ParkingInformation to design-system

* Inline ParkingInformation types to remove trpc dependency

* Move ParkingInformation to design-system

* Move numberFormatting to common package

* Add deps to external

* Fix imports and i18n script

* Add common as dependency

* Merge branch 'master' into feat/sw-3225-move-parking-information-to-booking-flow


Approved-by: Linus Flood

apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx

@@ -1,5 +1,6 @@
 import { useIntl } from "react-intl"
 
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -9,7 +10,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/index.tsx

@@ -1,3 +1,4 @@
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -5,7 +6,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
 import { getIntl } from "@/i18n"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -15,7 +16,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./hotelListItem.module.css"
 

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx

@@ -5,6 +5,7 @@ import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -17,7 +18,6 @@ import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hote
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import styles from "./hotelListingItem.module.css"
 

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,9 +1,9 @@
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import TripAdvisorLink from "./TripAdvisorLink"
 

apps/scandic-web/components/ContentType/HotelSubpage/ParkingSubpage/index.tsx

@@ -1,7 +1,7 @@
 import { Divider } from "@scandic-hotels/design-system/Divider"
+import ParkingInformation from "@scandic-hotels/design-system/ParkingInformation"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ParkingInformation from "@/components/ParkingInformation"
 import { getIntl } from "@/i18n"
 
 import HeroHeader from "../HeroHeader"

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

@@ -1,10 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import styles from "./breakfast.module.css"
 
 import type { PackageSchema } from "@scandic-hotels/trpc/types/bookingConfirmation"

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

@@ -3,6 +3,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
@@ -14,7 +15,6 @@ import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
 import Modal from "@/components/Modal"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import Breakfast from "./Breakfast"
 import RoomSkeletonLoader from "./RoomSkeletonLoader"

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

@@ -4,12 +4,12 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { mapRoomState } from "../../utils"
 import Room from "../Room"

apps/scandic-web/components/HotelReservation/BookingConfirmation/utils.ts

@@ -1,10 +1,9 @@
 import { type IntlShape } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import type {
   BookingConfirmationSchema,
   PackageSchema,

apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import RadioCard from "@scandic-hotels/design-system/Form/RadioCard"
 import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon"
@@ -14,7 +15,6 @@ import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { useRoomContext } from "@/contexts/Details/Room"
-import { formatPrice } from "@/utils/numberFormatting"
 import { trackBreakfastSelection } from "@/utils/tracking"
 
 import { breakfastFormSchema } from "./schema"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/MemberPriceModal/index.tsx

@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
@@ -13,7 +14,6 @@ import Title from "@scandic-hotels/design-system/Title"
 
 import Modal from "@/components/Modal"
 import { useRoomContext } from "@/contexts/Details/Room"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./modal.module.css"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -3,6 +3,7 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
@@ -12,7 +13,6 @@ import { membershipTermsAndConditions } from "@/constants/webHrefs"
 
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./joinScandicFriendsCard.module.css"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -2,6 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
@@ -13,7 +14,6 @@ import { membershipTermsAndConditions } from "@/constants/webHrefs"
 import LoginButton from "@/components/LoginButton"
 import { useRoomContext } from "@/contexts/Details/Room"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./joinScandicFriendsCard.module.css"
 

apps/scandic-web/components/HotelReservation/EnterDetails/Payment/MixedRatePaymentBreakdown/index.tsx

@@ -1,11 +1,10 @@
 import React from "react"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import {
   calculateTotalRoomPrice,
   hasFlexibleRate,

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
@@ -17,7 +18,6 @@ import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./priceChangeSummary.module.css"
 

apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/index.tsx

@@ -1,6 +1,7 @@
 import { Dialog, Modal, ModalOverlay } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -10,8 +11,6 @@ import Title from "@scandic-hotels/design-system/Title"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import { calculateTotalRoomPrice } from "../Payment/helpers"
 import PriceChangeSummary from "./PriceChangeSummary"
 

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

@@ -6,6 +6,7 @@ import { type PropsWithChildren, useEffect, useRef } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -14,7 +15,6 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { formId } from "@/components/HotelReservation/EnterDetails/Payment/PaymentClient"
 import { isBookingCodeRate } from "@/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/utils"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./bottomSheet.module.css"
 

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

@@ -1,10 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import styles from "./breakfast.module.css"
 
 import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"

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

@@ -1,6 +1,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
@@ -9,7 +10,6 @@ import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
 import Modal from "@/components/Modal"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { getMemberPrice, getPublicPrice } from "../utils"
 import Breakfast from "./Breakfast"

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

@@ -7,6 +7,7 @@ import { useMediaQuery } from "usehooks-ts"
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -18,7 +19,6 @@ import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import { isBookingCodeRate } from "@/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/utils"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { mapToPrice } from "./mapToPrice"
 import Room from "./Room"

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -16,6 +16,7 @@ import {
   selectHotelMap,
   selectRate,
 } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
@@ -28,7 +29,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
 import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ReadMore from "../ReadMore"
 import HotelChequeCard from "./HotelChequeCard"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx

@@ -1,11 +1,10 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import PriceRow from "./PriceRow"
 
 import styles from "./priceSummary.module.css"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx

@@ -1,6 +1,7 @@
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -10,8 +11,6 @@ import {
   useAddAncillaryStore,
 } from "@/stores/my-stay/add-ancillary-flow"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import PriceSummary from "./PriceSummary"
 
 import styles from "./priceDetails.module.css"

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx

@@ -9,6 +9,7 @@ import { useIntl } from "react-intl"
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { trpc } from "@scandic-hotels/trpc/client"
@@ -33,7 +34,6 @@ import Modal from "@/components/Modal"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 import {
   trackAncillaryFailed,
   trackAncillarySuccess,

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx

@@ -1,6 +1,7 @@
 import { Fragment } from "react"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import Body from "@scandic-hotels/design-system/Body"
@@ -9,8 +10,6 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Subtitle from "@scandic-hotels/design-system/Subtitle"
 import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import { getBreakfastPackagesFromAncillaryFlow } from "../../utils/hasBreakfastPackage"
 import RemoveButton from "./RemoveButton"
 

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Cheques.tsx

@@ -2,11 +2,10 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 export default function Cheques({
   cheques,
   currencyCode,

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Points.tsx

@@ -2,11 +2,10 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 export default function Points({
   isCancelled,
   points,

apps/scandic-web/components/HotelReservation/MyStay/PriceType/Vouchers.tsx

@@ -1,11 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import type { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 
 export default function Vouchers({

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

@@ -3,11 +3,11 @@ import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import { useMyStayStore } from "@/stores/my-stay"
 
 import PriceContainer from "@/components/HotelReservation/MyStay/ReferenceCard/PriceContainer"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import type { CancelStayFormValues } from "@/types/components/hotelReservation/myStay/cancelStay"
 

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

@@ -4,6 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { trpc } from "@scandic-hotels/trpc/client"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -11,7 +12,6 @@ import { useMyStayStore } from "@/stores/my-stay"
 import { sumPackages } from "@/components/HotelReservation/utils"
 import useLang from "@/hooks/useLang"
 import { isValidClientSession } from "@/utils/clientSession"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import Confirmation from "./Confirmation"
 import Form from "./Form"

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

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 
 import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
 import { guaranteeCallback } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
 import Link from "@scandic-hotels/design-system/Link"
@@ -22,7 +23,6 @@ import LoadingSpinner from "@/components/LoadingSpinner"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay"
 
 import { type GuaranteeFormData, paymentSchema } from "./schema"

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

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import IconChip from "@scandic-hotels/design-system/IconChip"
@@ -18,7 +19,6 @@ import Image from "@/components/Image"
 import Modal from "@/components/Modal"
 import useRateTitles from "@/hooks/booking/useRateTitles"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import PriceType from "../../PriceType"
 import { hasModifiableRate } from "../../utils"

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

@@ -1,9 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { useMyStayStore } from "@/stores/my-stay"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { useMyStayStore } from "@/stores/my-stay"
 
 import Row from "./Row"
 

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

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import BoldRow from "./Row/Bold"
 import RegularRow from "./Row/Regular"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Large.tsx

@@ -2,10 +2,9 @@ import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import styles from "./row.module.css"
 
 import type { Price } from "@/types/components/hotelReservation/price"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/BedType.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import RegularRow from "../Regular"
 

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/CorporateCheque.tsx

@@ -2,8 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import BoldRow from "../Bold"
 import RegularRow from "../Regular"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Packages.tsx

@@ -1,8 +1,9 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+
 import { getFeatureDescription } from "@/components/HotelReservation/utils/getRoomFeatureDescription"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import RegularRow from "../Regular"
 

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Redemption.tsx

@@ -2,8 +2,7 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
-
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import BoldRow from "../Bold"
 import RegularRow from "../Regular"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Regular.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import BoldRow from "../Bold"
 import RegularRow from "../Regular"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Price/Voucher.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { useIntl } from "react-intl"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import BoldRow from "../Bold"
 import RegularRow from "../Regular"

apps/scandic-web/components/HotelReservation/PriceDetailsModal/PriceDetailsTable/Row/Vat.tsx

@@ -2,9 +2,9 @@
 import { useIntl } from "react-intl"
 
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import { calculateVat } from "@/components/HotelReservation/utils"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import RegularRow from "./Regular"
 

apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,4 +1,5 @@
 import TripAdvisorChip from "@scandic-hotels/booking-flow/components/TripAdvisorChip"
+import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -8,7 +9,6 @@ import ImageGallery from "@/components/ImageGallery"
 import Alert from "@/components/TempDesignSystem/Alert"
 import { getIntl } from "@/i18n"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { getSingleDecimal } from "@/utils/numberFormatting"
 
 import ReadMore from "../../ReadMore"
 import { getHotelAlertsForBookingDates } from "../../utils"

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

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -14,7 +15,6 @@ import { useRatesStore } from "@/stores/select-rate"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { mapToPrice } from "../mapToPrice"
 import Room from "../Room"

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

@@ -1,6 +1,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 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"
@@ -10,7 +11,6 @@ import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 import { getRoomPrice } from "@/stores/enter-details/helpers"
 
 import Modal from "@/components/Modal"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { getMemberPrice, isBookingCodeRate } from "../utils"
 

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

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
 
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import { Button } from "@scandic-hotels/design-system/Button"
 import Caption from "@scandic-hotels/design-system/Caption"
@@ -19,7 +20,6 @@ import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import Modal from "@/components/Modal"
 import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import { mapToPrice } from "./mapToPrice"
 import { isBookingCodeRate } from "./utils"

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

@@ -4,14 +4,13 @@ import { useEffect, useRef, useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRatesStore } from "@/stores/select-rate"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import SummaryContent from "./Content"
 import { mapRate } from "./mapRate"
 import { isBookingCodeRate } from "./utils"

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

@@ -5,6 +5,7 @@ import { useState, useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
@@ -17,7 +18,6 @@ import { useRatesStore } from "@/stores/select-rate"
 
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import { isValidClientSession } from "@/utils/clientSession"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import MobileSummary from "./MobileSummary"
 import { getTotalPrice } from "./utils"

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/index.tsx

@@ -1,10 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useRoomContext } from "@/contexts/SelectRate/Room"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./petRoom.module.css"
 

apps/scandic-web/components/HotelReservation/SignupPromo/Desktop.tsx

@@ -2,11 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Caption from "@scandic-hotels/design-system/Caption"
 import Footnote from "@scandic-hotels/design-system/Footnote"
 
-import { formatPrice } from "@/utils/numberFormatting"
-
 import styles from "./signupPromo.module.css"
 
 import type { SignupPromoProps } from "@/types/components/hotelReservation/signupPromo"

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/HotelPin/index.tsx

@@ -1,10 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelMarker from "@/components/Maps/Markers/HotelMarker"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./hotelPin.module.css"
 

apps/scandic-web/components/ParkingInformation/ParkingPrices/utils.ts

@@ -1,26 +0,0 @@
-import type { IntlShape } from "react-intl"
-
-import { Periods } from "@/types/components/hotelPage/sidepeek/parking"
-
-export function getPeriod(intl: IntlShape, period?: string) {
-  switch (period) {
-    case Periods.hour:
-      return intl.formatMessage({
-        defaultMessage: "Price per hour",
-      })
-    case Periods.day:
-      return intl.formatMessage({
-        defaultMessage: "Price per day",
-      })
-    case Periods.night:
-      return intl.formatMessage({
-        defaultMessage: "Price per night",
-      })
-    case Periods.allDay:
-      return intl.formatMessage({
-        defaultMessage: "Price per 24 hours",
-      })
-    default:
-      return period
-  }
-}

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx

@@ -5,9 +5,9 @@ import { useIntl } from "react-intl"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+import ParkingInformation from "@scandic-hotels/design-system/ParkingInformation"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import ParkingInformation from "@/components/ParkingInformation"
 import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"

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

@@ -2,6 +2,7 @@ import { useIntl } from "react-intl"
 
 import { changeOrCancelDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Accordion from "@scandic-hotels/design-system/Accordion"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import IconChip from "@scandic-hotels/design-system/IconChip"
@@ -19,7 +20,6 @@ import ImageGallery from "@/components/ImageGallery"
 import SidePeekSelfControlled from "@/components/TempDesignSystem/SidePeekSelfControlled"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import RoomDetails from "./RoomDetails"
 

apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx

@@ -1,11 +1,11 @@
 import { useIntl } from "react-intl"
 
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import Body from "@scandic-hotels/design-system/Body"
 import Caption from "@scandic-hotels/design-system/Caption"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 
 import Image from "@/components/Image"
-import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./ancillaryCard.module.css"
 

apps/scandic-web/providers/BookingConfirmationProvider.tsx

@@ -8,7 +8,7 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { createBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import { BookingConfirmationContext } from "@/contexts/BookingConfirmation"
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import type { BookingConfirmationStore } from "@/types/contexts/booking-confirmation"
 import type { BookingConfirmationProviderProps } from "@/types/providers/booking-confirmation"

apps/scandic-web/stores/my-stay/helpers.ts

@@ -1,6 +1,6 @@
 import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 
 import type { IntlShape } from "react-intl"
 

apps/scandic-web/types/components/hotelPage/sidepeek/amenities.ts

@@ -4,6 +4,7 @@ import type {
   Hotel,
   Restaurant,
 } from "@scandic-hotels/trpc/types/hotel"
+
 import type { ParkingAmenityProps } from "./parking"
 
 export type AmenitiesSidePeekProps = {

apps/scandic-web/types/components/hotelPage/sidepeek/parking.ts

@@ -1,30 +1,7 @@
-import type { Hotel, Parking } from "@scandic-hotels/trpc/types/hotel"
+import type { Hotel } from "@scandic-hotels/trpc/types/hotel"
-
-export enum Periods {
-  allDay = "AllDay",
-  hour = "Hour",
-  day = "Day",
-  night = "Night",
-}
 
 export type ParkingAmenityProps = {
   parkingPageUrl?: string
   parking: Hotel["parking"]
   parkingElevatorPitch?: string
 }
-
-export interface ParkingListProps
-  extends Pick<
-    Parking,
-    | "address"
-    | "canMakeReservation"
-    | "distanceToHotel"
-    | "numberOfChargingSpaces"
-    | "numberOfParkingSpots"
-  > {}
-
-export interface ParkingPricesProps
-  extends Pick<Parking["pricing"], "freeParking">,
-    Pick<NonNullable<Parking["pricing"]["localCurrency"]>, "currency"> {
-  pricing: NonNullable<Parking["pricing"]["localCurrency"]>["ordinary"]
-}

package.json

@@ -16,7 +16,7 @@
     "check-types": "turbo run check-types",
     "env:web": "node scripts/show-env.mjs scandic-web --missing",
     "env:sas": "node scripts/show-env.mjs partner-sas --missing",
-    "i18n:extract": "formatjs extract \"{apps/scandic-web,apps/partner-sas,packages/booking-flow}/{actions,app,components,constants,contexts,env,hooks,i18n,lib,middlewares,netlify,providers,server,services,stores,utils}/**/*.{ts,tsx}\" --format scripts/i18n/formatter.mjs --out-file scripts/i18n/extracted.json",
+    "i18n:extract": "formatjs extract \"{apps/scandic-web,apps/partner-sas,packages/booking-flow,packages/design-system}/{actions,app,components,constants,contexts,env,hooks,i18n,lib,middlewares,netlify,providers,server,services,stores,utils}/**/*.{ts,tsx}\" --format scripts/i18n/formatter.mjs --out-file scripts/i18n/extracted.json",
     "i18n:upload": "jiti scripts/i18n/upload.ts",
     "i18n:download": "jiti scripts/i18n/download.ts",
     "i18n:compile": "formatjs compile-folder --ast --format scripts/i18n/formatter.mjs scripts/i18n/translations-all scripts/i18n/dictionaries",

packages/common/package.json

@@ -26,6 +26,7 @@
     "./utils/isDefined": "./utils/isDefined.ts",
     "./utils/maskValue": "./utils/maskValue.ts",
     "./utils/dateFormatting": "./utils/dateFormatting.ts",
+    "./utils/numberFormatting": "./utils/numberFormatting.ts",
     "./utils/rangeArray": "./utils/rangeArray.ts",
     "./utils/zod/*": "./utils/zod/*.ts",
     "./utils/debounce": "./utils/debounce.ts",

packages/design-system/lib/components/ParkingInformation/ParkingList/index.tsx

@@ -1,12 +1,21 @@
-"use client"
+'use client'
 
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { Typography } from '../../Typography'
 
-import styles from "./parkingList.module.css"
+import styles from './parkingList.module.css'
 
-import type { ParkingListProps } from "@/types/components/hotelPage/sidepeek/parking"
+import type { Parking } from '../parkingInformationTypes'
+
+type ParkingListProps = Pick<
+  Parking,
+  | 'address'
+  | 'canMakeReservation'
+  | 'distanceToHotel'
+  | 'numberOfChargingSpaces'
+  | 'numberOfParkingSpots'
+>
 
 export default function ParkingList({
   numberOfChargingSpaces,
@@ -18,10 +27,10 @@ export default function ParkingList({
   const intl = useIntl()
 
   const canMakeReservationYesMsg = intl.formatMessage({
-    defaultMessage: "Parking can be reserved in advance: Yes",
+    defaultMessage: 'Parking can be reserved in advance: Yes',
   })
   const canMakeReservationNoMsg = intl.formatMessage({
-    defaultMessage: "Parking can be reserved in advance: No",
+    defaultMessage: 'Parking can be reserved in advance: No',
   })
 
   return (
@@ -32,7 +41,7 @@ export default function ParkingList({
             {intl.formatMessage(
               {
                 defaultMessage:
-                  "Number of charging points for electric cars: {number}",
+                  'Number of charging points for electric cars: {number}',
               },
               { number: numberOfChargingSpaces }
             )}
@@ -47,7 +56,7 @@ export default function ParkingList({
           <li>
             {intl.formatMessage(
               {
-                defaultMessage: "Number of parking spots: {number}",
+                defaultMessage: 'Number of parking spots: {number}',
               },
               { number: numberOfParkingSpots }
             )}
@@ -57,7 +66,7 @@ export default function ParkingList({
           <li>
             {intl.formatMessage(
               {
-                defaultMessage: "Distance to hotel: {distanceInM} m",
+                defaultMessage: 'Distance to hotel: {distanceInM} m',
               },
               { distanceInM: distanceToHotel }
             )}
@@ -67,7 +76,7 @@ export default function ParkingList({
           <li>
             {intl.formatMessage(
               {
-                defaultMessage: "Address: {address}",
+                defaultMessage: 'Address: {address}',
               },
               { address }
             )}

packages/design-system/lib/components/ParkingInformation/ParkingList/parkingList.module.css

@@ -3,7 +3,7 @@
 }
 
 .listStyling > li::before {
-  content: url("/_static/icons/heart.svg");
+  content: url('/_static/icons/heart.svg');
   position: relative;
   height: 8px;
   top: 3px;

packages/design-system/lib/components/ParkingInformation/ParkingPrices/index.tsx

@@ -1,22 +1,24 @@
-"use client"
+'use client'
 
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { Typography } from '../../Typography'
 
-import { formatPrice } from "@/utils/numberFormatting"
+import { formatPrice } from '@scandic-hotels/common/utils/numberFormatting'
 
-import { getPeriod } from "./utils"
+import { type Parking, ParkingPricePeriods } from '../parkingInformationTypes'
+import { getPeriod } from './utils'
 
-import styles from "./parkingPrices.module.css"
+import styles from './parkingPrices.module.css'
 
-import {
+interface ParkingPricesProps
-  type ParkingPricesProps,
+  extends Pick<Parking['pricing'], 'freeParking'>,
-  Periods,
+    Pick<NonNullable<Parking['pricing']['localCurrency']>, 'currency'> {
-} from "@/types/components/hotelPage/sidepeek/parking"
+  pricing: NonNullable<Parking['pricing']['localCurrency']>['ordinary']
+}
 
 export default function ParkingPrices({
-  currency = "",
+  currency = '',
   freeParking,
   pricing,
 }: ParkingPricesProps) {
@@ -26,7 +28,7 @@ export default function ParkingPrices({
     return (
       <Typography variant="Body/Paragraph/mdBold">
         <p className={styles.wrapper}>
-          {intl.formatMessage({ defaultMessage: "Free parking" })}
+          {intl.formatMessage({ defaultMessage: 'Free parking' })}
         </p>
       </Typography>
     )
@@ -40,12 +42,12 @@ export default function ParkingPrices({
         <div className={styles.period}>
           <div className={styles.information}>
             <Typography variant="Body/Paragraph/mdBold">
-              <dt>{getPeriod(intl, "Hour")}</dt>
+              <dt>{getPeriod(intl, 'Hour')}</dt>
             </Typography>
             <Typography variant="Body/Paragraph/mdRegular">
               <dd>
                 {intl.formatMessage({
-                  defaultMessage: "At a cost",
+                  defaultMessage: 'At a cost',
                 })}
               </dd>
             </Typography>
@@ -67,11 +69,10 @@ export default function ParkingPrices({
               <dd>{formatPrice(intl, amount, currency)}</dd>
             </Typography>
           </div>
-          {startTime && endTime && period !== Periods.allDay ? (
+          {startTime && endTime && period !== ParkingPricePeriods.allDay ? (
             <Typography variant="Body/Paragraph/mdRegular">
               <div className={styles.information}>
-                <dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
+                <dt>{intl.formatMessage({ defaultMessage: 'From' })}</dt>
-                {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                 <dd>{`${startTime}-${endTime}`}</dd>
               </div>
             </Typography>

packages/design-system/lib/components/ParkingInformation/ParkingPrices/utils.ts

@@ -0,0 +1,26 @@
+import { ParkingPricePeriods } from '../parkingInformationTypes'
+
+import type { IntlShape } from 'react-intl'
+
+export function getPeriod(intl: IntlShape, period?: string) {
+  switch (period) {
+    case ParkingPricePeriods.hour:
+      return intl.formatMessage({
+        defaultMessage: 'Price per hour',
+      })
+    case ParkingPricePeriods.day:
+      return intl.formatMessage({
+        defaultMessage: 'Price per day',
+      })
+    case ParkingPricePeriods.night:
+      return intl.formatMessage({
+        defaultMessage: 'Price per night',
+      })
+    case ParkingPricePeriods.allDay:
+      return intl.formatMessage({
+        defaultMessage: 'Price per 24 hours',
+      })
+    default:
+      return period
+  }
+}

packages/design-system/lib/components/ParkingInformation/index.tsx

@@ -1,20 +1,19 @@
-"use client"
+'use client'
 
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { Divider } from '../Divider'
-import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from '../Icons/MaterialIcon'
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from '../Typography'
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import ButtonLink from '../ButtonLink'
+import ParkingList from './ParkingList'
+import ParkingPrices from './ParkingPrices'
 
-import ParkingList from "./ParkingList"
+import styles from './parkingInformation.module.css'
-import ParkingPrices from "./ParkingPrices"
 
-import styles from "./parkingInformation.module.css"
+import type { Parking } from './parkingInformationTypes'
 
-import type { Parking } from "@scandic-hotels/trpc/types/hotel"
+type ParkingInformationProps = {
-
-interface ParkingInformationProps {
   parking: Parking
   showExternalParkingButton?: boolean
 }
@@ -24,7 +23,7 @@ export default function ParkingInformation({
   showExternalParkingButton = true,
 }: ParkingInformationProps) {
   const intl = useIntl()
-  const title = `${parking.type}${parking.name ? ` (${parking.name})` : ""}`
+  const title = `${parking.type}${parking.name ? ` (${parking.name})` : ''}`
 
   return (
     <div className={styles.parkingInformation}>
@@ -43,13 +42,13 @@ export default function ParkingInformation({
       <div className={styles.prices}>
         <Typography variant="Body/Paragraph/mdBold">
           <h5 className={styles.heading}>
-            {intl.formatMessage({ defaultMessage: "Prices" })}
+            {intl.formatMessage({ defaultMessage: 'Prices' })}
           </h5>
         </Typography>
         <div className={styles.priceWrapper}>
           <Typography variant="Title/Overline/sm">
             <h6 className={styles.priceHeading}>
-              {intl.formatMessage({ defaultMessage: "Weekday prices" })}
+              {intl.formatMessage({ defaultMessage: 'Weekday prices' })}
             </h6>
           </Typography>
           <Divider />
@@ -64,7 +63,7 @@ export default function ParkingInformation({
         <div className={styles.priceWrapper}>
           <Typography variant="Title/Overline/sm">
             <h6 className={styles.priceHeading}>
-              {intl.formatMessage({ defaultMessage: "Weekend prices" })}
+              {intl.formatMessage({ defaultMessage: 'Weekend prices' })}
             </h6>
           </Typography>
           <Divider />
@@ -83,7 +82,7 @@ export default function ParkingInformation({
           href={parking.externalParkingUrl}
           target="_blank"
         >
-          {intl.formatMessage({ defaultMessage: "Book parking" })}
+          {intl.formatMessage({ defaultMessage: 'Book parking' })}
           <MaterialIcon icon="open_in_new" color="CurrentColor" />
         </ButtonLink>
       )}

packages/design-system/lib/components/ParkingInformation/parkingInformationTypes.ts

@@ -0,0 +1,35 @@
+type Price = {
+  amount: number
+  endTime: string
+  period: string
+  startTime: string
+}
+
+type CurrencyPrice = {
+  currency: string
+  weekend: Price[]
+  ordinary: Price[]
+}
+
+export type Parking = {
+  address: string
+  canMakeReservation: boolean
+  distanceToHotel: number
+  externalParkingUrl: string
+  name: string
+  numberOfChargingSpaces: number
+  numberOfParkingSpots: number
+  type: string
+  pricing: {
+    freeParking: boolean
+    paymentType: string
+    localCurrency?: CurrencyPrice | null
+  }
+}
+
+export enum ParkingPricePeriods {
+  allDay = 'AllDay',
+  hour = 'Hour',
+  day = 'Day',
+  night = 'Night',
+}

packages/design-system/package.json

@@ -41,6 +41,7 @@
     "./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
     "./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
     "./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
+    "./ParkingInformation": "./lib/components/ParkingInformation/index.tsx",
     "./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
     "./Preamble": "./lib/components/Preamble/index.tsx",
     "./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
@@ -161,6 +162,9 @@
     "prepare": "husky && yarn run build",
     "check-types": "tsc --noEmit"
   },
+  "dependencies": {
+    "@scandic-hotels/common": "workspace:*"
+  },
   "peerDependencies": {
     "@internationalized/date": "^3.8.0",
     "@radix-ui/react-slot": "^1.2.2",
@@ -170,6 +174,7 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.2",
     "react-international-phone": "^4.5.0",
+    "react-intl": "^7",
     "usehooks-ts": "3.1.1"
   },
   "devDependencies": {

packages/design-system/vite.config.ts

@@ -47,6 +47,8 @@ export default defineConfig({
         'react/jsx-runtime',
         'react-aria-components',
         'react-hook-form',
+        'react-intl',
+        'next',
       ],
       onwarn(warning, defaultHandler) {
         if (

yarn.lock

@@ -6701,6 +6701,7 @@ __metadata:
   dependencies:
     "@eslint/eslintrc": "npm:^3.3.1"
     "@eslint/js": "npm:^9.26.0"
+    "@scandic-hotels/common": "workspace:*"
     "@storybook/addon-essentials": "npm:^8.6.12"
     "@storybook/addon-interactions": "npm:^8.6.12"
     "@storybook/addon-links": "npm:^8.6.12"
@@ -6751,6 +6752,7 @@ __metadata:
     react-dom: ^19.1.0
     react-hook-form: ^7.56.2
     react-international-phone: ^4.5.0
+    react-intl: ^7
     usehooks-ts: 3.1.1
   languageName: unknown
   linkType: soft