Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Feat/SW-1737 design mystay multiroom

* feat(SW-1737) Fixed member view of guest details

* feat(SW-1737) fix merge issues

* feat(SW-1737) Fixed price details

* feat(SW-1737) removed unused imports

* feat(SW-1737) removed true as statement

* feat(SW-1737) updated store handling

* feat(SW-1737) fixed bug showing double numbers

* feat(SW-1737) small design fixed

* feat(SW-1737) fixed rebase errors

* feat(SW-1737) fixed create booking error with dates

* feat(SW-1737) fixed view multiroom as singleroom

* feat(SW-1737) fixes for multiroom

* feat(SW-1737) fixed bookingsummary

* feat(SW-1737) dont hide modify dates

* feat(SW-1737) updated breakfast to handle number

* feat(SW-1737) Added red color if member rate

* feat(SW-1737) fix PR comments

* feat(SW-1737) updated member tiers svg

* feat(SW-1737) updated how to handle paymentMethodDescription

* feat(SW-1737) fixes after testing mystay

* feat(SW-1737) updated Room type to just use whats used

* feat(SW-1737) fixed access

* feat(SW-1737) refactor my stay after PR comments

* feat(SW-1737) fix roomNumber translation

* feat(SW-1737) removed log


Approved-by: Arvid Norlin

apps/scandic-web/components/HotelReservation/MyStay/Price/index.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
+
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./price.module.css"
+
+export type Variant =
+  | "Title/Subtitle/lg"
+  | "Title/Subtitle/md"
+  | "Body/Paragraph/mdBold"
+
+export default function Price({
+  price,
+  variant,
+  isMember,
+}: {
+  price: number | null
+  variant: Variant
+  isMember?: boolean
+}) {
+  const intl = useIntl()
+  const currencyCode = useMyStayTotalPriceStore((state) => state.currencyCode)
+
+  if (price === null) {
+    return <SkeletonShimmer width={"100px"} />
+  }
+
+  return (
+    <Typography variant={variant}>
+      <p className={isMember ? styles.memberPrice : styles.nonMemberPrice}>
+        {formatPrice(intl, price, currencyCode)}
+      </p>
+    </Typography>
+  )
+}

apps/scandic-web/components/HotelReservation/MyStay/Price/price.module.css

@@ -0,0 +1,7 @@
+.memberPrice {
+  color: var(--Scandic-Red-60);
+}
+
+.nonMemberPrice {
+  color: var(--Main-Grey-100);
+}