Merged in feat(SW-1274)-modify-date-my-stay (pull request #1528)

Feat(SW-1274) modify date my stay

* feat(SW-1676): Modify guest details step 1

* feat(SW-1676) Integration to api to update guest details

* feat(SW-1676) Reuse of old modal

* feat(SW-1676) updated modify guest

* feat(SW-1676) cleanup

* feat(SW-1274) modify stay modal and datepicker

* feat(SW-1274) DatePicker from modify dates

* feat(SW-1274) Modify dates fixes and merge conflicts

* feat(SW-1274) handle modify for multiroom

* feat(SW-1274) update manage stay

* feat(SW-1274) fixed some comments

* feat(SW-1274) use Modal instead

* feat(SW-1274) fixed formatChildBedPreferences

* feat(SW-1274) removed any as prop

* feat(SW-1274) fix rebase conflicts

* feat(SW-1274) fix flicker on modify modal

* feat(SW-1274) CalendarButton

* feat(SW-1274) fixed gap variable

* feat(SW-1274) simplified code

* feat(SW-1274) Split up DatePicker on mode

* feat(SW-1274) Updated file structure for datepicker


Approved-by: Arvid Norlin

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

@@ -22,6 +22,7 @@ import { formatPrice } from "@/utils/numberFormatting"
 
 import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
+import { formatChildBedPreferences } from "../utils"
 import SummaryCard from "./SummaryCard"
 
 import styles from "./bookingSummary.module.css"
@@ -42,25 +43,45 @@ export default function BookingSummary({
 }: BookingSummaryProps) {
   const intl = useIntl()
   const lang = useLang()
-  const { totalPrice, currencyCode, addRoomPrice } = useMyStayTotalPriceStore()
-  const { addRoomDetails } = useMyStayRoomDetailsStore()
+  const {
+    totalPrice,
+    currencyCode,
+    actions: { setRoomPrice },
+  } = useMyStayTotalPriceStore()
+  const {
+    actions: { setRoomDetails },
+  } = useMyStayRoomDetailsStore()
+
+  const childrenAsString = formatChildBedPreferences({
+    childrenAges: booking.childrenAges,
+    childBedPreferences: booking.childBedPreferences,
+  })
 
   useEffect(() => {
     // Add price information
-    addRoomPrice({
-      id: booking.confirmationNumber ?? "",
+    setRoomPrice({
+      id: booking.confirmationNumber,
       totalPrice: booking.totalPrice,
       currencyCode: booking.currencyCode,
       isMainBooking: true,
     })
 
     // Add room details
-    addRoomDetails({
-      id: booking.confirmationNumber ?? "",
+    setRoomDetails({
+      id: booking.confirmationNumber,
+      hotelId: booking.hotelId,
+      checkInDate: booking.checkInDate,
+      checkOutDate: booking.checkOutDate,
+      adults: booking.adults,
+      children: childrenAsString,
       roomName: room?.name ?? booking.roomTypeCode ?? "",
+      roomTypeCode: booking.roomTypeCode ?? "",
+      rateCode: booking.rateDefinition.rateCode ?? "",
+      bookingCode: booking.bookingCode ?? "",
       isCancelable: booking.isCancelable,
+      mainRoom: booking.mainRoom,
     })
-  }, [booking, room, addRoomPrice, addRoomDetails])
+  }, [booking, room, childrenAsString, setRoomPrice, setRoomDetails])
 
   const directionsUrl = `https://www.google.com/maps/dir/?api=1&destination=${hotel.location.latitude},${hotel.location.longitude}`
   const isPaid =