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/ManageStay/ActionPanel/index.tsx

@@ -2,8 +2,9 @@
 
 import { useIntl } from "react-intl"
 
-import { BookingStatusEnum } from "@/constants/booking"
 import { customerService } from "@/constants/currentWebHrefs"
+import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
+import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 import { preliminaryReceipt } from "@/constants/routes/myStay"
 
 import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
@@ -23,7 +24,6 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
-import { useManageStayStore } from "../../stores/manageStayStore"
 import AddToCalendarButton from "./Actions/AddToCalendarButton"
 
 import styles from "./actionPanel.module.css"
@@ -31,46 +31,45 @@ import styles from "./actionPanel.module.css"
 import type { EventAttributes } from "ics"
 
 import type { Hotel } from "@/types/hotel"
-import type { BookingConfirmation } from "@/types/trpc/routers/booking/confirmation"
 
 interface ActionPanelProps {
-  booking: BookingConfirmation["booking"]
   hotel: Hotel
-  bookingStatus: string | null
-  showGuaranteeButton: boolean
-  onCancelClick: () => void
-  onGuaranteeClick: () => void
 }
 
-export default function ActionPanel({
-  booking,
-  hotel,
-  bookingStatus,
-  showGuaranteeButton,
-  onGuaranteeClick,
-}: ActionPanelProps) {
+export default function ActionPanel({ hotel }: ActionPanelProps) {
   const intl = useIntl()
   const lang = useLang()
   const {
     actions: { setActiveView },
   } = useManageStayStore()
 
-  const showCancelStayButton =
-    bookingStatus !== BookingStatusEnum.Cancelled && booking.isCancelable
+  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
+  const linkedReservationRooms = useMyStayRoomDetailsStore(
+    (state) => state.linkedReservationRooms
+  )
 
-  const event: EventAttributes = {
+  const showCancelStayButton =
+    bookedRoom.isCancelable ||
+    linkedReservationRooms.some((room) => room.isCancelable)
+  const showGuaranteeButton =
+    !bookedRoom.guaranteeInfo && !bookedRoom.isCancelled
+
+  const { confirmationNumber, checkInDate, checkOutDate, createDateTime } =
+    bookedRoom
+
+  const calendarEvent: EventAttributes = {
     busyStatus: "FREE",
     categories: ["booking", "hotel", "stay"],
-    created: generateDateTime(booking.createDateTime),
+    created: generateDateTime(createDateTime),
     description: hotel.hotelContent.texts.descriptions?.medium,
-    end: generateDateTime(booking.checkOutDate),
+    end: generateDateTime(checkOutDate),
     endInputType: "utc",
     geo: {
       lat: hotel.location.latitude,
       lon: hotel.location.longitude,
     },
     location: `${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city} ${hotel.address.country}`,
-    start: generateDateTime(booking.checkInDate),
+    start: generateDateTime(checkInDate),
     startInputType: "utc",
     status: "CONFIRMED",
     title: hotel.name,
@@ -93,7 +92,7 @@ export default function ActionPanel({
 
   const handleGuaranteeLateArrival = () => {
     trackMyStayPageLink("guarantee late arrival")
-    onGuaranteeClick()
+    setActiveView("guaranteeLateArrival")
   }
 
   const handleCustomerSupport = () => {
@@ -124,8 +123,8 @@ export default function ActionPanel({
           </Button>
         )}
         <AddToCalendar
-          checkInDate={booking.checkInDate}
-          event={event}
+          checkInDate={checkInDate}
+          event={calendarEvent}
           hotelName={hotel.name}
           renderButton={(onPress) => <AddToCalendarButton onPress={onPress} />}
         />
@@ -157,7 +156,7 @@ export default function ActionPanel({
             {intl.formatMessage({ id: "Reference number" })}
           </span>
           <Subtitle color="burgundy" textAlign="right">
-            {booking.confirmationNumber}
+            {confirmationNumber}
           </Subtitle>
         </div>
         <div>