- {packages?.some((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- ) && (
-
- {packages
- .filter((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- )
- .map((item) => {
- return (
-
-
-
- )
+
+
+
+
+ {intl.formatMessage({
+ defaultMessage: "Booking total",
})}
-
- )}
-
-
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+ {":"}
+
+
+
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Guests",
- })}
-
-
-
-
- {childrenAges.length > 0 ? adultsAndChildrenMsg : adultsOnlyMsg}
-
-
-
- {rateDefinition.cancellationText ? (
-
-
-
- {intl.formatMessage({
- defaultMessage: "Terms",
- })}
-
-
-
- {rateDefinition.cancellationText}
-
-
- ) : null}
- {hasModifiableRate(rateDefinition.cancellationRule) && (
-
-
-
- {intl.formatMessage({
- defaultMessage: "Modify By",
- })}
-
-
-
- {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-
- 18:00, {fromDate.format("dddd D MMM")}
-
-
-
- )}
- {breakfastPrice !== null && (
-
-
-
- {intl.formatMessage({
- defaultMessage: "Breakfast",
- })}
-
-
-
-
- {breakfastPrice}
-
-
- )}
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Room total",
- })}
-
-
-
-
-
+ {allRoomsAreCancelled ? null :
}
-
+
)
}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css
index 7a50b6668..973b4489c 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/multiRoom.module.css
@@ -1,101 +1,63 @@
-.multiRoom {
+.wrapper {
display: flex;
flex-direction: column;
- gap: var(--Spacing-x2);
+ gap: var(--Spacing-x3);
+}
+
+.title {
+ color: var(--Scandic-Brand-Burgundy);
padding: 0 var(--Spacing-x2);
}
-.cancelled {
- opacity: 0.5;
-}
-
-.cancellationNumber {
- text-decoration: line-through;
-}
-
-.multiRoomCard {
+.container {
display: flex;
flex-direction: column;
- gap: var(--Spacing-x2);
- background-color: var(--Base-Background-Primary-Normal);
- border-radius: var(--Corner-radius-Large);
- border: 1px solid var(--Base-Border-Subtle);
- overflow: hidden;
- padding-bottom: var(--Spacing-x3);
- position: relative;
+ gap: var(--Spacing-x5);
}
-.imageContainer {
+.roomsContainer {
+ display: grid;
+ gap: var(--Spacing-x3);
+ grid-template-columns: 1fr;
width: 100%;
- height: 342px;
- position: relative;
}
-.iconContainer {
+.roomWrapper {
+ min-width: 0;
+ width: 100%;
+}
+
+.roomWrapper > * {
+ width: 100%;
+}
+
+.totalContainer {
display: flex;
- border: 1px solid var(--Base-Border-Subtle);
- border-radius: var(--Corner-radius-Small);
- padding: var(--Spacing-x-half);
-}
-
-.roomName {
- color: var(--Scandic-Brand-Burgundy);
-}
-
-.roomHeader {
- display: flex;
- align-items: center;
- gap: var(--Spacing-x-one-and-half);
-}
-
-.chip {
- background-color: var(--Scandic-Peach-30);
- color: var(--Scandic-Red-100);
- border-radius: var(--Corner-radius-Small);
- padding: var(--Spacing-x-half) var(--Spacing-x1);
- height: fit-content;
-}
-
-.toggleSidePeek {
- margin-left: auto;
-}
-
-.reference {
- display: flex;
- gap: var(--Spacing-x-half);
-}
-
-.details {
- display: flex;
- padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) 0;
- gap: var(--Spacing-x2);
flex-direction: column;
-}
-
-.row {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-}
-
-.packages {
- position: absolute;
- top: 304px;
- left: 10px;
- display: flex;
- flex-direction: row;
gap: var(--Spacing-x1);
- z-index: 100;
+ padding: 0 var(--Spacing-x2);
}
-.package {
- background-color: var(--Main-Grey-White);
- padding: var(--Spacing-x-half) var(--Spacing-x1);
- border-radius: var(--Corner-radius-Small);
+.total {
+ display: flex;
+ justify-content: flex-end;
+ gap: var(--Spacing-x1);
}
@media (min-width: 768px) {
- .multiRoom {
+ .roomsContainer {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ .roomsContainer:has(> *:nth-child(3):last-child) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ .title {
+ padding: 0;
+ }
+
+ .totalContainer {
padding: 0;
}
}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css
new file mode 100644
index 000000000..4090a3acd
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/room.module.css
@@ -0,0 +1,94 @@
+.multiRoom {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x2);
+ padding: 0 var(--Spacing-x2);
+}
+
+.cancelled {
+ opacity: 0.5;
+}
+
+.cancellationNumber {
+ text-decoration: line-through;
+}
+
+.multiRoomCard {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x2);
+ background-color: var(--Base-Background-Primary-Normal);
+ border-radius: var(--Corner-radius-Large);
+ border: 1px solid var(--Base-Border-Subtle);
+ overflow: hidden;
+ padding-bottom: var(--Spacing-x3);
+ position: relative;
+}
+
+.imageContainer {
+ width: 100%;
+ height: 342px;
+ position: relative;
+}
+
+.roomName {
+ color: var(--Scandic-Brand-Burgundy);
+}
+
+.roomHeader {
+ display: flex;
+ align-items: center;
+ gap: var(--Spacing-x-one-and-half);
+}
+
+.chip {
+ background-color: var(--Scandic-Peach-30);
+ color: var(--Scandic-Red-100);
+ border-radius: var(--Corner-radius-Small);
+ padding: var(--Spacing-x-half) var(--Spacing-x1);
+ height: fit-content;
+}
+
+.toggleSidePeek {
+ margin-left: auto;
+}
+
+.reference {
+ display: flex;
+ gap: var(--Spacing-x-half);
+}
+
+.details {
+ display: flex;
+ padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) 0;
+ gap: var(--Spacing-x2);
+ flex-direction: column;
+}
+
+.row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.packages {
+ position: absolute;
+ top: 304px;
+ left: 10px;
+ display: flex;
+ flex-direction: row;
+ gap: var(--Spacing-x1);
+ z-index: 100;
+}
+
+.package {
+ background-color: var(--Main-Grey-White);
+ padding: var(--Spacing-x-half) var(--Spacing-x1);
+ border-radius: var(--Corner-radius-Small);
+}
+
+@media (min-width: 768px) {
+ .multiRoom {
+ padding: 0;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css
new file mode 100644
index 000000000..1d326e34c
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/sidePeek.module.css
@@ -0,0 +1,8 @@
+.trigger {
+ background: none;
+ border: 1px solid var(--Base-Border-Subtle);
+ border-radius: var(--Corner-radius-Small);
+ cursor: pointer;
+ display: flex;
+ padding: var(--Spacing-x-half);
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
new file mode 100644
index 000000000..747ccb723
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/BookingCode.tsx
@@ -0,0 +1,42 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import IconChip from "@/components/TempDesignSystem/IconChip"
+
+export default function BookingCode() {
+ const intl = useIntl()
+
+ const bookingCode = useMyStayStore((state) => state.bookedRoom.bookingCode)
+
+ if (!bookingCode) {
+ return null
+ }
+
+ return (
+
+ }
+ >
+ {intl.formatMessage(
+ {
+ defaultMessage: "Booking code: {value}",
+ },
+ {
+ value: bookingCode,
+ strong: (text) => (
+
+ {text}
+
+ ),
+ }
+ )}
+
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
new file mode 100644
index 000000000..2f6d2dbfd
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/details.module.css
@@ -0,0 +1,30 @@
+.priceDetails {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--Spacing-x1);
+ padding: var(--Spacing-x-one-and-half) 0;
+ width: calc(100% - var(--Spacing-x4));
+ justify-content: center;
+ margin: 0 auto;
+}
+
+.price {
+ align-items: center;
+ display: flex;
+ gap: var(--Spacing-x1);
+ justify-content: space-between;
+ width: 100%;
+}
+
+@media (min-width: 768px) {
+ .priceDetails {
+ align-items: flex-end;
+ margin: 0 0 0 auto;
+ width: auto;
+ }
+
+ .price {
+ justify-content: flex-end;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx
new file mode 100644
index 000000000..dbe52fb52
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/PriceDetails/index.tsx
@@ -0,0 +1,40 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import PriceType from "@/components/HotelReservation/MyStay/PriceType"
+
+import styles from "./details.module.css"
+
+export default function PriceDetails() {
+ const intl = useIntl()
+
+ const pricing = useMyStayStore((state) => ({
+ cheques: state.bookedRoom.cheques,
+ formattedTotalPrice: state.totalPrice,
+ isCancelled: state.bookedRoom.isCancelled,
+ priceType: state.bookedRoom.priceType,
+ rateDefinition: state.bookedRoom.rateDefinition,
+ roomPoints: state.bookedRoom.roomPoints,
+ totalPrice: state.bookedRoom.totalPrice,
+ vouchers: state.bookedRoom.vouchers,
+ }))
+
+ return (
+
+
+
+
+ {intl.formatMessage({
+ defaultMessage: "Room total",
+ })}
+
+
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
new file mode 100644
index 000000000..25e562db5
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/index.tsx
@@ -0,0 +1,13 @@
+import BookingCode from "./BookingCode"
+import PriceDetails from "./PriceDetails"
+
+import styles from "./information.module.css"
+
+export default function BookingInformation() {
+ return (
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
new file mode 100644
index 000000000..66681dad0
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/BookingInformation/information.module.css
@@ -0,0 +1,22 @@
+.bookingInformation {
+ align-items: center;
+ background-color: var(--Scandic-Beige-10);
+ border: 1px solid var(--Base-Border-Subtle);
+ border-radius: var(--Corner-radius-Medium);
+ display: flex;
+ flex-direction: column-reverse;
+ gap: var(--Spacing-x2);
+ margin: 0 var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+ .bookingInformation {
+ align-items: flex-start;
+ border: none;
+ border-radius: 0;
+ flex-direction: row;
+ justify-content: space-between;
+ margin: 0;
+ padding: var(--Spacing-x-one-and-half);
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/BedPreference.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/BedPreference.tsx
new file mode 100644
index 000000000..d8244b42f
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/BedPreference.tsx
@@ -0,0 +1,49 @@
+import { useIntl } from "react-intl"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Row from "./Row"
+
+export default function BedPreference() {
+ const intl = useIntl()
+
+ const bedType = useMyStayStore((state) => state.bookedRoom.room?.bedType)
+
+ if (!bedType) {
+ return null
+ }
+
+ const mainBedWidthValueMsg = intl.formatMessage(
+ {
+ defaultMessage: "{value} cm",
+ },
+ {
+ value: bedType.mainBed.widthRange.min,
+ }
+ )
+
+ const mainBedWidthRangeMsg = intl.formatMessage(
+ {
+ defaultMessage: "{min}–{max} cm",
+ },
+ {
+ min: bedType.mainBed.widthRange.min,
+ max: bedType.mainBed.widthRange.max,
+ }
+ )
+
+ const sameWidth =
+ bedType.mainBed.widthRange.min === bedType.mainBed.widthRange.max
+ const widthMsg = sameWidth ? mainBedWidthValueMsg : mainBedWidthRangeMsg
+ const text = `${bedType.mainBed.description} (${widthMsg})`
+
+ return (
+
|
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Breakfast.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Breakfast.tsx
new file mode 100644
index 000000000..ca34e8e2d
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Breakfast.tsx
@@ -0,0 +1,35 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import { formatPrice } from "@/utils/numberFormatting"
+
+import Row from "./Row"
+
+export default function Breakfast() {
+ const intl = useIntl()
+
+ const { breakfast, rateDefinition } = useMyStayStore((state) => ({
+ breakfast: state.bookedRoom.breakfast,
+ rateDefinition: state.bookedRoom.rateDefinition,
+ }))
+
+ let breakfastPrice = intl.formatMessage({
+ defaultMessage: "No breakfast",
+ })
+ if (rateDefinition.breakfastIncluded) {
+ breakfastPrice = intl.formatMessage({
+ defaultMessage: "Included",
+ })
+ } else if (breakfast) {
+ breakfastPrice = formatPrice(
+ intl,
+ breakfast.localPrice.totalPrice,
+ breakfast.localPrice.currency
+ )
+ }
+
+ const title = intl.formatMessage({ defaultMessage: "Breakfast" })
+ return
|
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Guests.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Guests.tsx
new file mode 100644
index 000000000..b7aa92078
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Guests.tsx
@@ -0,0 +1,45 @@
+import { useIntl } from "react-intl"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Row from "./Row"
+
+export default function Guests() {
+ const intl = useIntl()
+
+ const { adults, childrenAges } = useMyStayStore((state) => ({
+ adults: state.bookedRoom.adults,
+ childrenAges: state.bookedRoom.childrenAges,
+ }))
+
+ const adultsMsg = intl.formatMessage(
+ {
+ defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
+ },
+ {
+ adults,
+ }
+ )
+
+ const childrenMsg = intl.formatMessage(
+ {
+ defaultMessage: "{children, plural, one {# child} other {# children}}",
+ },
+ {
+ children: childrenAges.length,
+ }
+ )
+
+ const adultsOnlyMsg = adultsMsg
+ const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
+
+ return (
+
0 ? adultsAndChildrenMsg : adultsOnlyMsg}
+ title={intl.formatMessage({
+ defaultMessage: "Guests",
+ })}
+ />
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx
new file mode 100644
index 000000000..2dcdafa59
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/ModifyBy.tsx
@@ -0,0 +1,47 @@
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+import { useMyStayStore } from "@/stores/my-stay"
+
+import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
+import useLang from "@/hooks/useLang"
+
+import Row from "./Row"
+
+export default function ModifyBy() {
+ const intl = useIntl()
+ const lang = useLang()
+
+ const { checkInDate, isModifyable } = useMyStayStore((state) => ({
+ checkInDate: state.bookedRoom.checkInDate,
+ isModifyable: hasModifiableRate(
+ state.bookedRoom.rateDefinition.cancellationRule
+ ),
+ }))
+
+ if (!isModifyable) {
+ return null
+ }
+
+ const fromDate = dt(checkInDate).locale(lang)
+
+ const text = intl.formatMessage(
+ {
+ defaultMessage: "Until {time}, {date}",
+ },
+ {
+ time: "18:00",
+ date: fromDate.format("dddd D MMM"),
+ }
+ )
+
+ return (
+ |
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Packages.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Packages.tsx
new file mode 100644
index 000000000..7e2b4a1e0
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Packages.tsx
@@ -0,0 +1,36 @@
+import { useIntl } from "react-intl"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Row from "./Row"
+
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function Packages() {
+ const intl = useIntl()
+
+ const packages = useMyStayStore(
+ (state) =>
+ state.bookedRoom.packages
+ ?.filter((item) =>
+ Object.values(RoomPackageCodeEnum).includes(
+ item.code as RoomPackageCodeEnum
+ )
+ )
+ .map((item) => item.description) || []
+ )
+
+ if (!packages.length) {
+ return null
+ }
+
+ return (
+ |
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx
new file mode 100644
index 000000000..71bd9e58f
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/index.tsx
@@ -0,0 +1,32 @@
+"use client"
+import {
+ MaterialIcon,
+ type MaterialIconProps,
+} from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./row.module.css"
+
+interface RowProps {
+ icon: MaterialIconProps["icon"]
+ text: string
+ title: string
+}
+
+export default function Row({ icon, text, title }: RowProps) {
+ return (
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css
new file mode 100644
index 000000000..6de33979c
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Row/row.module.css
@@ -0,0 +1,38 @@
+.row {
+ display: flex;
+ flex-direction: column;
+ padding: var(--Spacing-x-one-and-half) 0;
+}
+
+.row:last-child {
+ border-bottom: none;
+}
+
+.title {
+ display: flex;
+ flex-direction: row;
+ gap: var(--Spacing-x1);
+}
+
+.title svg {
+ height: 24px;
+ width: 24px;
+}
+
+.content {
+ padding-left: var(--Spacing-x4);
+}
+
+@media (min-width: 768px) {
+ .row {
+ align-items: center;
+ border-bottom: 1px solid var(--Base-Border-Subtle);
+ flex-direction: row;
+ justify-content: space-between;
+ }
+
+ .title svg {
+ height: 20px;
+ width: 20px;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx
new file mode 100644
index 000000000..7c12584b0
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms.tsx
@@ -0,0 +1,27 @@
+import { useIntl } from "react-intl"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import Row from "./Row"
+
+export default function Terms() {
+ const intl = useIntl()
+
+ const cancellationText = useMyStayStore(
+ (state) => state.bookedRoom.rateDefinition.cancellationText
+ )
+
+ if (!cancellationText) {
+ return null
+ }
+
+ return (
+ |
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css
new file mode 100644
index 000000000..0fa25f1d6
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/details.module.css
@@ -0,0 +1,10 @@
+.details {
+ max-width: 100%;
+ padding: 0 var(--Spacing-x2);
+}
+
+@media (min-width: 768px) {
+ .details {
+ padding: 0;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx
new file mode 100644
index 000000000..19643e4b5
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/index.tsx
@@ -0,0 +1,21 @@
+import BedPreference from "./BedPreference"
+import Breakfast from "./Breakfast"
+import Guests from "./Guests"
+import ModifyBy from "./ModifyBy"
+import Packages from "./Packages"
+import Terms from "./Terms"
+
+import styles from "./details.module.css"
+
+export default function Details() {
+ return (
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
new file mode 100644
index 000000000..7377cae77
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/header.module.css
@@ -0,0 +1,39 @@
+.header {
+ display: flex;
+ gap: var(--Spacing-x-one-and-half);
+ padding: 0 var(--Spacing-x2);
+}
+
+.container {
+ display: flex;
+ gap: var(--Spacing-x-one-and-half);
+}
+
+.chip {
+ background-color: var(--Scandic-Peach-30);
+ color: var(--Scandic-Red-100);
+ border-radius: var(--Corner-radius-Small);
+ padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.reference {
+ display: flex;
+ gap: var(--Spacing-x-half);
+}
+
+.sidePeek {
+ display: none;
+}
+
+@media (min-width: 768px) {
+ .header {
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row;
+ padding: 0;
+ }
+
+ .sidePeek {
+ display: block;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/index.tsx
new file mode 100644
index 000000000..8e844cf99
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Header/index.tsx
@@ -0,0 +1,59 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import RoomDetailsSidePeek from "../RoomDetailsSidePeek"
+
+import styles from "./header.module.css"
+
+import type { SafeUser } from "@/types/user"
+
+export default function Header({ user }: { user: SafeUser }) {
+ const intl = useIntl()
+
+ const { confirmationNumber, roomNumber } = useMyStayStore((state) => ({
+ confirmationNumber: state.bookedRoom.confirmationNumber,
+ roomNumber: state.bookedRoom.roomNumber,
+ }))
+
+ return (
+
+
+
+
+
+ {intl.formatMessage(
+ {
+ defaultMessage: "Room {roomIndex}",
+ },
+ {
+ roomIndex: roomNumber,
+ }
+ )}
+
+
+
+
+
+
+ {intl.formatMessage({
+ defaultMessage: "Booking number",
+ })}
+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+ {":"}
+
+
+
+ {confirmationNumber}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/index.tsx
new file mode 100644
index 000000000..521dbbb68
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/index.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
+
+import styles from "./packages.module.css"
+
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function Packages() {
+ const packages = useMyStayStore(
+ (state) =>
+ state.bookedRoom.packages?.filter((item) =>
+ Object.values(RoomPackageCodeEnum).includes(
+ item.code as RoomPackageCodeEnum
+ )
+ ) || []
+ )
+
+ if (!packages.length) {
+ return null
+ }
+
+ return (
+
+ {packages.map((item) => (
+
+
+
+ ))}
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css
new file mode 100644
index 000000000..09e80b94f
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Packages/packages.module.css
@@ -0,0 +1,22 @@
+.packages {
+ display: flex;
+ flex-direction: row;
+ gap: var(--Spacing-x1);
+ left: 15px;
+ position: absolute;
+ top: 180px;
+ z-index: 1;
+}
+
+.package {
+ background-color: var(--Main-Grey-White);
+ border-radius: var(--Corner-radius-Small);
+ padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+@media (min-width: 768px) {
+ .packages {
+ left: 25px;
+ top: 620px;
+ }
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
new file mode 100644
index 000000000..ef6ec9d42
--- /dev/null
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { DialogTrigger } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import { useMyStayStore } from "@/stores/my-stay"
+
+import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
+import Button from "@/components/TempDesignSystem/Button"
+
+import type { SafeUser } from "@/types/user"
+
+interface RoomDetailsSidePeekProps {
+ user: SafeUser
+}
+
+export default function RoomDetailsSidePeek({
+ user,
+}: RoomDetailsSidePeekProps) {
+ const intl = useIntl()
+ const bookedRoom = useMyStayStore((state) => state.bookedRoom)
+ return (
+
+
+
+
+ )
+}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/ToggleSidePeek.tsx
deleted file mode 100644
index c9ecaa921..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/ToggleSidePeek.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-"use client"
-
-import { useIntl } from "react-intl"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import useSidePeekStore from "@/stores/sidepeek"
-
-import Button from "@/components/TempDesignSystem/Button"
-
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
-import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
-
-export default function ToggleSidePeek({
- hotelId,
- roomTypeCode,
- intent = "textInverted",
- title,
-}: ToggleSidePeekProps) {
- const intl = useIntl()
- const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
-
- return (
-
- )
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
index e7315c6ed..459bf2e02 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx
@@ -1,94 +1,48 @@
"use client"
-import { Button as ButtonRAC, DialogTrigger } from "react-aria-components"
-import { useIntl } from "react-intl"
-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 { dt } from "@/lib/dt"
-import { getBookedHotelRoom } from "@/server/routers/booking/utils"
import { useMyStayStore } from "@/stores/my-stay"
import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
import PriceDetails from "@/components/HotelReservation/MyStay/PriceDetails"
-import PriceType from "@/components/HotelReservation/MyStay/PriceType"
-import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
-import { IconForFeatureCode } from "@/components/HotelReservation/utils"
-import Image from "@/components/Image"
-import BookedRoomSidePeek from "@/components/SidePeeks/BookedRoomSidePeek"
import SkeletonShimmer from "@/components/SkeletonShimmer"
-import IconChip from "@/components/TempDesignSystem/IconChip"
-import useLang from "@/hooks/useLang"
-import { formatPrice } from "@/utils/numberFormatting"
+
+import BookingInformation from "./BookingInformation"
+import Details from "./Details"
+import Header from "./Header"
+import Img from "./Img"
+import Packages from "./Packages"
import styles from "./room.module.css"
-import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type { Room, RoomCategories } from "@/types/hotel"
import type { SafeUser } from "@/types/user"
interface RoomProps {
- bedType: Room["roomTypes"][number]
- image: Room["images"][number]
user: SafeUser
- roomCategories: RoomCategories
}
-export default function SingleRoom({
- bedType,
- image,
- user,
- roomCategories,
-}: RoomProps) {
- const intl = useIntl()
- const lang = useLang()
-
+export default function SingleRoom({ user }: RoomProps) {
const {
- adults,
- bookingCode,
- breakfast,
- checkInDate,
- cheques,
- childrenAges,
confirmationNumber,
- formattedTotalPrice,
guest,
isCancelled,
- packages,
- priceType,
- rateDefinition,
+ isMultiRoom,
roomName,
roomNumber,
- roomPoints,
- roomTypeCode,
- totalPrice,
- vouchers,
- bookedRoom,
} = useMyStayStore((state) => ({
- adults: state.bookedRoom.adults,
- bookingCode: state.bookedRoom.bookingCode,
- breakfast: state.bookedRoom.breakfast,
- guest: state.bookedRoom.guest,
- checkInDate: state.bookedRoom.checkInDate,
- cheques: state.bookedRoom.cheques,
- childrenAges: state.bookedRoom.childrenAges,
confirmationNumber: state.bookedRoom.confirmationNumber,
- formattedTotalPrice: state.totalPrice,
- hotel: state.hotel,
+ guest: state.bookedRoom.guest,
isCancelled: state.bookedRoom.isCancelled,
- packages: state.bookedRoom.packages,
- priceType: state.bookedRoom.priceType,
- rateDefinition: state.bookedRoom.rateDefinition,
+ isMultiRoom: state.rooms.length > 1,
roomName: state.bookedRoom.roomName,
roomNumber: state.bookedRoom.roomNumber,
- roomPoints: state.bookedRoom.roomPoints,
- roomTypeCode: state.bookedRoom.roomTypeCode,
- totalPrice: state.bookedRoom.totalPrice,
- vouchers: state.bookedRoom.vouchers,
- bookedRoom: state.bookedRoom,
}))
+ if (isMultiRoom) {
+ return null
+ }
+
if (!roomNumber) {
return (
@@ -98,403 +52,45 @@ export default function SingleRoom({
)
}
- const fromDate = dt(checkInDate).locale(lang)
-
- const mainBedWidthValueMsg = intl.formatMessage(
- {
- defaultMessage: "{value} cm",
- },
- {
- value: bedType.mainBed.widthRange.min,
- }
- )
-
- const mainBedWidthRangeMsg = intl.formatMessage(
- {
- defaultMessage: "{min}–{max} cm",
- },
- {
- min: bedType.mainBed.widthRange.min,
- max: bedType.mainBed.widthRange.max,
- }
- )
-
- const adultsMsg = intl.formatMessage(
- {
- defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
- },
- {
- adults,
- }
- )
-
- const childrenMsg = intl.formatMessage(
- {
- defaultMessage: "{children, plural, one {# child} other {# children}}",
- },
- {
- children: childrenAges.length,
- }
- )
-
- const adultsOnlyMsg = adultsMsg
- const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
-
- const hasPackages = packages?.some((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- )
-
- let breakfastPrice = null
- if (rateDefinition.breakfastIncluded) {
- breakfastPrice = intl.formatMessage({
- defaultMessage: "Included",
- })
- } else if (breakfast) {
- breakfastPrice = formatPrice(
- intl,
- breakfast.localPrice.totalPrice,
- breakfast.localPrice.currency
- )
- }
-
- const hotelRoom = getBookedHotelRoom(roomCategories, roomTypeCode)
-
return (
-
-
-
- {roomName}
-
-
-
-
-
-
- {intl.formatMessage(
- {
- defaultMessage: "Room {roomIndex}",
- },
- {
- roomIndex: roomNumber,
- }
- )}
-
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Booking number",
- })}
- {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
- {":"}
-
-
-
- {confirmationNumber}
-
-
-
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "View room details",
- })}
-
-
+
+
+
+ {roomName}
+
+
+
+
+
+
![]()
+
-
-
- {packages?.some((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- ) && (
-
- {packages
- .filter((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- )
- .map((item) => {
- return (
-
-
-
- )
- })}
-
- )}
-
-
-
-
-
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Guests",
- })}
-
-
-
-
-
-
- {childrenAges.length > 0
- ? adultsAndChildrenMsg
- : adultsOnlyMsg}
-
-
-
-
- {rateDefinition.cancellationText ? (
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Terms",
- })}
-
-
-
-
-
-
- {rateDefinition.cancellationText}
-
-
-
-
- ) : null}
- {hasModifiableRate(rateDefinition.cancellationRule) && (
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Modify By",
- })}
-
-
-
-
-
-
- {intl.formatMessage(
- {
- defaultMessage: "Until {time}, {date}",
- },
- {
- time: "18:00",
- date: fromDate.format("dddd D MMM"),
- }
- )}
-
-
-
-
- )}
- {breakfastPrice !== null && (
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Breakfast",
- })}
-
-
-
-
-
- )}
- {hasPackages && (
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Room classification",
- })}
-
-
-
-
-
-
- {packages!
- .filter((item) =>
- Object.values(RoomPackageCodeEnum).includes(
- item.code as RoomPackageCodeEnum
- )
- )
- .map((item) => item.description)
- .join(", ")}
-
-
-
-
- )}
-
-
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Bed preference",
- })}
-
-
-
-
-
-
- {bedType.mainBed.description}
- {bedType.mainBed.widthRange.min ===
- bedType.mainBed.widthRange.max
- ? // eslint-disable-next-line formatjs/no-literal-string-in-jsx
- ` (${mainBedWidthValueMsg})`
- : // eslint-disable-next-line formatjs/no-literal-string-in-jsx
- ` (${mainBedWidthRangeMsg})`}
-
-
-
-
-
-
+
-
- {bookingCode && (
-
- }
- >
- {intl.formatMessage(
- {
- defaultMessage: "Booking code: {value}",
- },
- {
- value: bookingCode,
- strong: (text) => (
-
- {text}
-
- ),
- }
- )}
-
-
- )}
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Room total",
- })}
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
+
+
)
}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
index b9a96e503..53e896926 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css
@@ -1,42 +1,28 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x3);
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: var(--Spacing-x5);
+}
+
.room {
+ background-color: var(--Base-Background-Primary-Normal);
display: flex;
flex-direction: column;
gap: var(--Spacing-x2);
- background-color: var(--Base-Background-Primary-Normal);
padding: var(--Spacing-x3) 0;
}
-.trigger {
- align-items: center;
- background: none;
- border: none;
- color: var(--Component-Button-Brand-Secondary-On-fill-Default);
- cursor: pointer;
- display: flex;
- gap: var(--Space-x1);
- padding: var(--Space-x025) 0;
-}
-
.roomName {
color: var(--Scandic-Brand-Burgundy);
padding: 0 var(--Spacing-x2);
}
-.roomHeader {
- display: flex;
- gap: var(--Spacing-x-one-and-half);
- padding: 0 var(--Spacing-x2);
-}
-
-.roomHeaderContent {
- display: flex;
- gap: var(--Spacing-x-one-and-half);
-}
-
-.sidePeek {
- display: none;
-}
-
.booking {
display: flex;
flex-direction: column;
@@ -56,136 +42,12 @@
opacity: 0.5;
}
-.chip {
- background-color: var(--Scandic-Peach-30);
- color: var(--Scandic-Red-100);
- border-radius: var(--Corner-radius-Small);
- padding: var(--Spacing-x-half) var(--Spacing-x1);
-}
-
-.reference {
- display: flex;
- gap: var(--Spacing-x-half);
-}
-
-.packages {
- position: absolute;
- top: 180px;
- left: 15px;
- display: flex;
- flex-direction: row;
- gap: var(--Spacing-x1);
- z-index: 1;
-}
-
-.package {
- background-color: var(--Main-Grey-White);
- padding: var(--Spacing-x-half) var(--Spacing-x1);
- border-radius: var(--Corner-radius-Small);
-}
-
-.imageContainer {
- height: 220px;
- overflow: hidden;
-}
-
-.image {
- width: 100%;
- height: 220px;
- aspect-ratio: 16/9;
- object-fit: cover;
-}
-
-.imagePlaceholder {
- height: 100%;
- width: 100%;
- background-color: #fff;
- background-image:
- linear-gradient(45deg, #000000 25%, transparent 25%),
- linear-gradient(-45deg, #000000 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, #000000 75%),
- linear-gradient(-45deg, transparent 75%, #000000 75%);
- background-size: 120px 120px;
- background-position:
- 0 0,
- 0 60px,
- 60px -60px,
- -60px 0;
-}
-
.roomDetails {
display: flex;
flex-direction: column;
gap: var(--Spacing-x5);
}
-.bookingDetails {
- max-width: 100%;
- padding: 0 var(--Spacing-x2);
-}
-
-.row {
- display: flex;
- flex-direction: column;
- padding: var(--Spacing-x-one-and-half) 0;
-}
-
-.row:last-child {
- border-bottom: none;
-}
-
-.rowTitle {
- display: flex;
- flex-direction: row;
- gap: var(--Spacing-x1);
-}
-
-.rowTitle svg {
- width: 24px;
- height: 24px;
-}
-
-.rowContent {
- padding-left: var(--Spacing-x4);
-}
-
-.bookingInformation {
- display: flex;
- flex-direction: column-reverse;
- align-items: center;
- gap: var(--Spacing-x2);
- background-color: var(--Scandic-Beige-10);
- margin: 0 var(--Spacing-x2);
- border: 1px solid var(--Base-Border-Subtle);
- border-radius: var(--Corner-radius-Medium);
-}
-
-.priceDetails {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--Spacing-x1);
- padding: var(--Spacing-x-one-and-half) 0;
- width: calc(100% - var(--Spacing-x4));
- justify-content: center;
- margin: 0 auto;
-}
-
-.price {
- align-items: center;
- display: flex;
- gap: var(--Spacing-x1);
- justify-content: space-between;
- width: 100%;
-}
-
-.userDetails {
- width: 100%;
- border-bottom: 1px solid var(--Base-Border-Subtle);
- margin-bottom: var(--Spacing-x1);
- color: var(--Scandic-Brand-Burgundy);
-}
-
.guestDetailsMobileWrapper {
display: block;
padding: 0 var(--Spacing-x2);
@@ -205,17 +67,6 @@
padding: 0;
}
- .roomHeader {
- justify-content: space-between;
- align-items: center;
- flex-direction: row;
- padding: 0;
- }
-
- .sidePeek {
- display: block;
- }
-
.booking {
border-radius: var(--Corner-radius-Large);
background-color: var(--Base-Background-Primary-Normal);
@@ -227,56 +78,6 @@
width: var(--max-width-content);
}
- .packages {
- top: 620px;
- left: 25px;
- }
-
- .imageContainer {
- height: 640px;
- }
-
- .image {
- height: 100%;
- border-radius: var(--Corner-radius-Medium);
- }
-
- .bookingDetails {
- padding: 0;
- }
-
- .row {
- border-bottom: 1px solid var(--Base-Border-Subtle);
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- }
-
- .rowTitle svg {
- width: 20px;
- height: 20px;
- }
-
- .bookingInformation {
- flex-direction: row;
- justify-content: space-between;
- align-items: flex-start;
- padding: var(--Spacing-x-one-and-half);
- margin: 0;
- border-radius: 0;
- border: none;
- }
-
- .priceDetails {
- margin: 0 0 0 auto;
- width: auto;
- align-items: flex-end;
- }
-
- .price {
- justify-content: flex-end;
- }
-
.guestDetailsMobileWrapper {
display: none;
}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
deleted file mode 100644
index 5376ecf01..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/index.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client"
-import { useIntl } from "react-intl"
-
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { useMyStayStore } from "@/stores/my-stay"
-
-import PriceDetails from "../PriceDetails"
-import MultiRoom from "./MultiRoom"
-import SingleRoom from "./SingleRoom"
-import TotalPrice from "./TotalPrice"
-
-import styles from "./rooms.module.css"
-
-import type { SafeUser } from "@/types/user"
-
-interface RoomsProps {
- user: SafeUser
-}
-
-export default function Rooms({ user }: RoomsProps) {
- const intl = useIntl()
- const { allRoomsAreCancelled, room, rooms, roomCategories } = useMyStayStore(
- (state) => ({
- allRoomsAreCancelled: state.allRoomsAreCancelled,
- hotel: state.hotel,
- room: state.bookedRoom.room,
- rooms: state.rooms,
- roomCategories: state.roomCategories,
- })
- )
-
- if (!room) {
- return null
- }
-
- const isMultiRoom = rooms.length > 1
-
- return (
-
- {isMultiRoom && (
-
-
- {intl.formatMessage({
- defaultMessage: "Your rooms",
- })}
-
-
- )}
-
- {!isMultiRoom ? (
-
- ) : (
-
- {rooms.map((booking, index) => (
-
-
-
- ))}
-
- )}
-
- {isMultiRoom && (
-
-
-
-
- {intl.formatMessage({
- defaultMessage: "Booking total",
- })}
- {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
- {":"}
-
-
-
-
-
- {allRoomsAreCancelled ? null :
}
-
- )}
-
- )
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/rooms.module.css b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/rooms.module.css
deleted file mode 100644
index bd4bb71ad..000000000
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/rooms.module.css
+++ /dev/null
@@ -1,63 +0,0 @@
-.wrapper {
- display: flex;
- flex-direction: column;
- gap: var(--Spacing-x3);
-}
-
-.container {
- display: flex;
- flex-direction: column;
- gap: var(--Spacing-x5);
-}
-
-.roomsContainer {
- display: grid;
- gap: var(--Spacing-x3);
- width: 100%;
- grid-template-columns: 1fr;
-}
-
-.roomWrapper {
- width: 100%;
- min-width: 0;
-}
-
-.roomWrapper > * {
- width: 100%;
-}
-
-.title {
- color: var(--Scandic-Brand-Burgundy);
- padding: 0 var(--Spacing-x2);
-}
-
-.totalContainer {
- display: flex;
- flex-direction: column;
- gap: var(--Spacing-x1);
- padding: 0 var(--Spacing-x2);
-}
-
-.total {
- display: flex;
- justify-content: flex-end;
- gap: var(--Spacing-x1);
-}
-
-@media (min-width: 768px) {
- .roomsContainer {
- grid-template-columns: repeat(2, 1fr);
- }
-
- .roomsContainer:has(> *:nth-child(3):last-child) {
- grid-template-columns: repeat(3, 1fr);
- }
-
- .title {
- padding: 0;
- }
-
- .totalContainer {
- padding: 0;
- }
-}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
index a4a168062..7c5097a01 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/utils/mapRoomDetails.ts
@@ -1,9 +1,8 @@
import { BookingStatusEnum, CancellationRuleEnum } from "@/constants/booking"
import { dt } from "@/lib/dt"
-import { convertToChildType } from "@/components/HotelReservation/utils/convertToChildType"
-import { getPriceType } from "@/components/HotelReservation/utils/getPriceType"
-
+import { convertToChildType } from "../../utils/convertToChildType"
+import { getPriceType } from "../../utils/getPriceType"
import { formatChildBedPreferences } from "../utils"
import type { BreakfastPackage } from "@/types/components/hotelReservation/breakfast"
diff --git a/apps/scandic-web/components/HotelReservation/utils.tsx b/apps/scandic-web/components/HotelReservation/utils/index.tsx
similarity index 100%
rename from apps/scandic-web/components/HotelReservation/utils.tsx
rename to apps/scandic-web/components/HotelReservation/utils/index.tsx
diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
index b6a07c169..674aa2f45 100644
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/index.tsx
@@ -32,7 +32,7 @@ import type { Packages } from "@/types/requests/packages"
import type { BookingConfirmationSchema } from "@/types/trpc/routers/booking/confirmation"
import type { SafeUser } from "@/types/user"
-export type PartialHotelRoom = Pick<
+type PartialHotelRoom = Pick<
HotelRoom,
"descriptions" | "images" | "name" | "roomFacilities" | "roomTypes"
>
diff --git a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
index c6e4f28c9..e54eb0716 100644
--- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx
@@ -18,13 +18,15 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
return (
-
+ {ancillary.imageUrl ? (
+
+ ) : null}
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
index 1fd88c067..5c64ade27 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/SidePeekSEO.tsx
@@ -1,4 +1,5 @@
import type { SidePeekSelfControlledProps } from "./sidePeek"
+
// Sidepeeks generally have important content that should be indexed by search engines.
// The content is hidden behind a modal, but it is still important for SEO.
// This component is used to provide SEO information for the sidepeek content.
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
index 3521fabe9..e827e4b88 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/index.tsx
@@ -1,4 +1,5 @@
"use client"
+
import { useEffect } from "react"
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
import { useIntl } from "react-intl"
@@ -54,10 +55,12 @@ export default function SidePeekSelfControlled({
+
{children}
)
}
+
function KeepBodyVisible() {
const toggle = useSetOverflowVisibleOnRA()
useEffect(() => {
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css
index e40066fc9..e37dd7b9b 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/sidePeekSelfControlled.module.css
@@ -38,6 +38,7 @@
height: 100vh;
background-color: var(--Base-Background-Primary-Normal);
z-index: var(--sidepeek-z-index);
+ outline: none;
}
.modal[data-entering] {
diff --git a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/types.ts b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/types.ts
index b724b305f..e37554aff 100644
--- a/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/types.ts
+++ b/apps/scandic-web/components/TempDesignSystem/SidePeekSelfControlled/types.ts
@@ -2,6 +2,7 @@ export type SidePeekProps = {
activeContent: string | null
onClose: (isOpen: boolean) => void
}
+
export type SidePeekContentProps = {
title?: string
contentKey: string
diff --git a/apps/scandic-web/providers/BookingConfirmationProvider.tsx b/apps/scandic-web/providers/BookingConfirmationProvider.tsx
index 0494ac1c1..1532d459c 100644
--- a/apps/scandic-web/providers/BookingConfirmationProvider.tsx
+++ b/apps/scandic-web/providers/BookingConfirmationProvider.tsx
@@ -73,8 +73,8 @@ export default function BookingConfirmationProvider({
currencyCode,
fromDate,
toDate,
- rooms,
roomCategories,
+ rooms,
vat,
isVatCurrency,
formattedTotalCost,
diff --git a/apps/scandic-web/server/routers/booking/utils.ts b/apps/scandic-web/server/routers/booking/utils.ts
index 0941bc76b..2d9e581a0 100644
--- a/apps/scandic-web/server/routers/booking/utils.ts
+++ b/apps/scandic-web/server/routers/booking/utils.ts
@@ -10,13 +10,13 @@ import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmat
import type { Lang } from "@/constants/languages"
export function getBookedHotelRoom(
- rooms: Room[] | undefined,
+ rooms: Room[],
roomTypeCode: BookingConfirmation["booking"]["roomTypeCode"]
) {
- if (!rooms?.length || !roomTypeCode) {
+ if (!rooms.length || !roomTypeCode) {
return null
}
- const room = rooms?.find((r) => {
+ const room = rooms.find((r) => {
return r.roomTypes.find((roomType) => roomType.code === roomTypeCode)
})
if (!room) {
diff --git a/apps/scandic-web/stores/my-stay/index.ts b/apps/scandic-web/stores/my-stay/index.ts
index e2af9e0fd..fd6544ebc 100644
--- a/apps/scandic-web/stores/my-stay/index.ts
+++ b/apps/scandic-web/stores/my-stay/index.ts
@@ -74,7 +74,6 @@ export function createMyStayStore({
savedCreditCards,
totalPoints,
totalPrice,
- roomCategories,
actions: {
closeManageStay() {
diff --git a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts
index a03adeb20..37aff477a 100644
--- a/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts
+++ b/apps/scandic-web/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation.ts
@@ -3,6 +3,7 @@ export interface LinkedReservationProps {
checkOutTime: string
confirmationNumber: string
roomIndex: number
+ roomNumber: number
}
export interface RetryProps {
diff --git a/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts b/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
index 6e372a5bd..81eb1dfe2 100644
--- a/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
+++ b/apps/scandic-web/types/components/myPages/myStay/ancillaries.ts
@@ -13,7 +13,7 @@ export type SelectedAncillary = Ancillary["ancillaryContent"][number]
export type Packages = z.output
export interface AncillariesProps extends Pick {
- ancillaries: Ancillaries | null
+ ancillariesPromise: Promise
packages: Packages | null
user: User | null
savedCreditCards: CreditCard[] | null
diff --git a/apps/scandic-web/types/components/sidePeeks/bookedRoomSidePeek.ts b/apps/scandic-web/types/components/sidePeeks/bookedRoomSidePeek.ts
index 69e0d785b..dbcb348ec 100644
--- a/apps/scandic-web/types/components/sidePeeks/bookedRoomSidePeek.ts
+++ b/apps/scandic-web/types/components/sidePeeks/bookedRoomSidePeek.ts
@@ -1,13 +1,11 @@
import type { Room } from "@/types/hotel"
import type { SafeUser } from "@/types/user"
-import type { SidePeekEnum } from "../hotelReservation/sidePeek"
export type BookedRoomSidePeekProps = {
- room: Room
- activeSidePeek: SidePeekEnum | null
close: () => void
- user: SafeUser
confirmationNumber: string
+ room: Room
+ user: SafeUser
}
export type RoomDetailsProps = {
diff --git a/apps/scandic-web/types/providers/booking-confirmation.ts b/apps/scandic-web/types/providers/booking-confirmation.ts
index 0cf4df972..1cfc7ee96 100644
--- a/apps/scandic-web/types/providers/booking-confirmation.ts
+++ b/apps/scandic-web/types/providers/booking-confirmation.ts
@@ -7,8 +7,8 @@ export interface BookingConfirmationProviderProps
bookingCode: string | null
currencyCode: CurrencyEnum
fromDate: Date
- rooms: (Room | null)[]
roomCategories: RoomCategories
+ rooms: (Room | null)[]
toDate: Date
vat: number
}
diff --git a/apps/scandic-web/types/stores/my-stay.ts b/apps/scandic-web/types/stores/my-stay.ts
index c9898806c..a9492ec2b 100644
--- a/apps/scandic-web/types/stores/my-stay.ts
+++ b/apps/scandic-web/types/stores/my-stay.ts
@@ -76,7 +76,6 @@ export interface MyStayState {
savedCreditCards: CreditCard[] | null
totalPoints: number
totalPrice: string
- roomCategories: RoomCategories
}
export interface InitialState