feat: add multiroom tracking to booking flow

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

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
+import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
 import {
   BedDoubleIcon,
@@ -22,8 +23,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import PriceDetailsModal from "../../PriceDetailsModal"
 import GuestDetails from "./GuestDetails"
+import PriceDetailsTable from "./PriceDetailsTable"
 import ToggleSidePeek from "./ToggleSidePeek"
 
 import styles from "./room.module.css"
@@ -287,41 +288,44 @@ export function Room({ booking, room, hotel, user }: RoomProps) {
                 </Body>
               </div>
 
-              <PriceDetailsModal
-                fromDate={dt(booking.checkInDate).format("YYYY-MM-DD")}
-                toDate={dt(booking.checkOutDate).format("YYYY-MM-DD")}
-                rooms={[
-                  {
-                    adults: booking.adults,
-                    childrenInRoom: undefined,
-                    roomPrice: {
-                      perNight: {
-                        requested: undefined,
-                        local: {
-                          currency: booking.currencyCode,
-                          price: booking.totalPrice,
-                        },
-                      },
-                      perStay: {
-                        requested: undefined,
-                        local: {
-                          currency: booking.currencyCode,
-                          price: booking.totalPrice,
+              <PriceDetailsModal>
+                <PriceDetailsTable
+                  bookingCode={booking.bookingCode}
+                  fromDate={dt(booking.checkInDate).format("YYYY-MM-DD")}
+                  rooms={[
+                    {
+                      adults: booking.adults,
+                      childrenInRoom: undefined,
+                      roomPrice: {
+                        perNight: {
+                          requested: undefined,
+                          local: {
+                            currency: booking.currencyCode,
+                            price: booking.totalPrice,
+                          },
+                        },
+                        perStay: {
+                          requested: undefined,
+                          local: {
+                            currency: booking.currencyCode,
+                            price: booking.totalPrice,
+                          },
                         },
                       },
+                      roomType: room.name,
                     },
-                    roomType: room.name,
-                  },
-                ]}
-                totalPrice={{
-                  requested: undefined,
-                  local: {
-                    currency: booking.currencyCode,
-                    price: booking.totalPrice,
-                  },
-                }}
-                vat={booking.vatPercentage}
-              />
+                  ]}
+                  toDate={dt(booking.checkOutDate).format("YYYY-MM-DD")}
+                  totalPrice={{
+                    requested: undefined,
+                    local: {
+                      currency: booking.currencyCode,
+                      price: booking.totalPrice,
+                    },
+                  }}
+                  vat={booking.vatPercentage}
+                />
+              </PriceDetailsModal>
             </div>
           </div>
         </div>