feat: refactor of my stay

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

@@ -5,12 +5,11 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
-import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
+import { useMyStayStore } from "@/stores/my-stay"
 
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
-import Price from "@/components/HotelReservation/MyStay/Price"
+import PriceType from "@/components/HotelReservation/MyStay/PriceType"
 import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
-import { hasBreakfastPackageFromBookingFlow } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
 import ImageGallery from "@/components/ImageGallery"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
@@ -18,6 +17,7 @@ import IconChip from "@/components/TempDesignSystem/IconChip"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import useLang from "@/hooks/useLang"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
+import { formatPrice } from "@/utils/numberFormatting"
 
 import RoomDetails from "./RoomDetails"
 
@@ -36,40 +36,32 @@ export default function BookedRoomSidePeek({
 }: BookedRoomSidePeekProps) {
   const intl = useIntl()
   const lang = useLang()
-  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
-  const linkedReservationRooms = useMyStayRoomDetailsStore(
-    (state) => state.linkedReservationRooms
-  )
-  const updateBookedRoom = useMyStayRoomDetailsStore(
-    (state) => state.actions.updateBookedRoom
-  )
-  const updateLinkedReservationRoom = useMyStayRoomDetailsStore(
-    (state) => state.actions.updateLinkedReservationRoom
-  )
+  const rooms = useMyStayStore((state) => state.rooms)
 
-  const allRooms = [bookedRoom, ...linkedReservationRooms]
-
-  const matchingRoomBooking = allRooms.find(
+  const bookingRoom = rooms.find(
     (r) => r.confirmationNumber === confirmationNumber
   )
 
-  if (!matchingRoomBooking) {
+  if (!bookingRoom) {
     return null
   }
 
   const {
-    roomNumber,
-    cancellationNumber,
     adults,
-    childrenInRoom,
-    terms,
-    packages,
     bedType,
-    checkInDate,
     bookingCode,
-    roomPrice,
+    breakfast,
+    cancellationNumber,
+    checkInDate,
+    childrenInRoom,
+    currencyCode,
     isCancelled,
-  } = matchingRoomBooking
+    packages,
+    rateDefinition,
+    roomNumber,
+    terms,
+    totalPrice,
+  } = bookingRoom
 
   const fromDate = dt(checkInDate).locale(lang)
 
@@ -96,6 +88,24 @@ export default function BookedRoomSidePeek({
 
   const adultsOnlyMsg = adultsMsg
   const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
+
+  const formattedTotalPrice = formatPrice(intl, totalPrice, currencyCode)
+
+  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
+    )
+  }
+
   return (
     <SidePeek
       title={room.name}
@@ -215,9 +225,7 @@ export default function BookedRoomSidePeek({
                 </Typography>
               </div>
             </div>
-            {hasModifiableRate(
-              matchingRoomBooking.rateDefinition.cancellationRule
-            ) && (
+            {hasModifiableRate(rateDefinition.cancellationRule) && (
               <div className={styles.row}>
                 <span className={styles.rowTitle}>
                   <MaterialIcon icon="refresh" color="Icon/Default" size={20} />
@@ -256,20 +264,7 @@ export default function BookedRoomSidePeek({
               </span>
               <div className={styles.rowContent}>
                 <Typography variant="Body/Paragraph/mdRegular">
-                  <p color="uiTextHighContrast">
-                    {packages &&
-                    hasBreakfastPackageFromBookingFlow(
-                      packages.map((pkg) => ({
-                        code: pkg.code,
-                      }))
-                    )
-                      ? intl.formatMessage({
-                          defaultMessage: "Included",
-                        })
-                      : intl.formatMessage({
-                          defaultMessage: "Not included",
-                        })}
-                  </p>
+                  <p color="uiTextHighContrast">{breakfastPrice}</p>
                 </Typography>
               </div>
             </div>
@@ -338,9 +333,15 @@ export default function BookedRoomSidePeek({
                   </p>
                 </Typography>
 
-                <Price
-                  price={roomPrice.perStay.local.price}
-                  variant="Title/Subtitle/md"
+                <PriceType
+                  cheques={bookingRoom.cheques}
+                  formattedTotalPrice={formattedTotalPrice}
+                  isCancelled={bookingRoom.isCancelled}
+                  priceType={bookingRoom.priceType}
+                  rateDefinition={bookingRoom.rateDefinition}
+                  roomPoints={bookingRoom.roomPoints}
+                  totalPrice={bookingRoom.totalPrice}
+                  vouchers={bookingRoom.vouchers}
                 />
               </div>
             </div>
@@ -368,16 +369,7 @@ export default function BookedRoomSidePeek({
             </Typography>
           )}
 
-          <GuestDetails
-            user={user ?? null}
-            booking={matchingRoomBooking}
-            updateRoom={
-              bookedRoom.confirmationNumber ===
-              matchingRoomBooking.confirmationNumber
-                ? updateBookedRoom
-                : updateLinkedReservationRoom
-            }
-          />
+          <GuestDetails selectedRoom={bookingRoom} user={user} />
         </div>
         <Accordion>
           <AccordionItem