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
2025-03-24 09:30:10 +00:00
parent c5e294c7ea
commit 74c5b47319
117 changed files with 5899 additions and 1901 deletions
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/Confirmation/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/Confirmation/index.tsx
@@ -2,9 +2,9 @@ import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
+import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"

 import PriceContainer from "@/components/HotelReservation/MyStay/ManageStay/ActionPanel/PriceContainer"
-import { useMyStayTotalPriceStore } from "@/components/HotelReservation/MyStay/stores/myStayTotalPrice"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -21,7 +21,7 @@ interface ConfirmationProps {
    nightsText: string
    adultsText: string
    childrenText: string
-    totalChildren: number
+    totalChildren?: number
  }
 }

@@ -50,6 +50,15 @@ export default function Confirmation({
    .locale(lang)
    .format("dddd, DD MMM, YYYY")

+  const diff = dt(newCheckOut)
+    .startOf("day")
+    .diff(dt(newCheckIn).startOf("day"), "days")
+
+  const nightsText = intl.formatMessage(
+    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    { totalNights: diff }
+  )
+
  return (
    <div className={styles.container}>
      <div className={styles.dateComparison}>
@@ -130,7 +139,7 @@ export default function Confirmation({
        text={intl.formatMessage({ id: "To be paid" })}
        price={newPrice}
        currencyCode={currencyCode}
-        nightsText={stayDetails.nightsText}
+        nightsText={nightsText}
        adultsText={stayDetails.adultsText}
        childrenText={stayDetails.childrenText}
        totalChildren={stayDetails.totalChildren}
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/index.tsx
@@ -21,7 +21,7 @@ import styles from "./newDates.module.css"
 import type { DateRange } from "react-day-picker"

 import { AlertTypeEnum } from "@/types/enums/alert"
-import type { RoomDetails } from "@/components/HotelReservation/MyStay/stores/myStayRoomDetailsStore"
+import type { Room } from "@/stores/my-stay/myStayRoomDetailsStore"

 const locales = {
  [Lang.da]: da,
@@ -32,7 +32,7 @@ const locales = {
 }

 interface NewDatesProps {
-  mainRoom: RoomDetails
+  mainRoom: Room
  noAvailability: boolean
  error: boolean
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/hooks/useModifyStay.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/hooks/useModifyStay.ts
@@ -2,9 +2,9 @@ import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
+import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
+import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"

-import { useManageStayStore } from "@/components/HotelReservation/MyStay/stores/manageStayStore"
-import { useMyStayRoomDetailsStore } from "@/components/HotelReservation/MyStay/stores/myStayRoomDetailsStore"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"

@@ -13,18 +13,12 @@ import type { UseFormGetValues } from "react-hook-form"
 import type { ModifyDateSchema } from "@/types/components/hotelReservation/myStay/modifyDate"

 interface UseModifyStayOptions {
-  booking: {
-    confirmationNumber: string
-    roomPrice?: number
-    currencyCode?: string
-  }
  isLoggedIn?: boolean
  getFormValues: UseFormGetValues<ModifyDateSchema>
  handleCloseModal: () => void
 }

 export default function useModifyStay({
-  booking,
  isLoggedIn,
  getFormValues,
  handleCloseModal,
@@ -34,45 +28,51 @@ export default function useModifyStay({
  const {
    actions: { setIsLoading },
  } = useManageStayStore()
-  const {
-    rooms,
-    actions: { updateRoomDetails },
-  } = useMyStayRoomDetailsStore()
+
+  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
+
+  const updateBookedRoom = useMyStayRoomDetailsStore(
+    (state) => state.actions.updateBookedRoom
+  )

  const utils = trpc.useUtils()

  const updateBooking = trpc.booking.update.useMutation({
    onMutate: () => setIsLoading(true),
    onSuccess: (updatedBooking) => {
-      if (!updatedBooking) return
+      if (!updatedBooking) {
+        toast.error(intl.formatMessage({ id: "Failed to update your stay" }))
+        return
+      }

      // Update room details with server response data
-      for (const room of rooms) {
-        const originalCheckIn = dt(room.checkInDate)
-        const originalCheckOut = dt(room.checkOutDate)

-        updateRoomDetails({
-          ...room,
-          checkInDate: dt(updatedBooking.checkInDate)
-            .hour(originalCheckIn.hour())
-            .minute(originalCheckIn.minute())
-            .second(originalCheckIn.second())
-            .toDate(),
-          checkOutDate: dt(updatedBooking.checkOutDate)
-            .hour(originalCheckOut.hour())
-            .minute(originalCheckOut.minute())
-            .second(originalCheckOut.second())
-            .toDate(),
-        })
-      }
-      setIsLoading(false)
+      const originalCheckIn = dt(bookedRoom.checkInDate)
+      const originalCheckOut = dt(bookedRoom.checkOutDate)
+
+      updateBookedRoom({
+        ...bookedRoom,
+        checkInDate: dt(updatedBooking.checkInDate)
+          .hour(originalCheckIn.hour())
+          .minute(originalCheckIn.minute())
+          .second(originalCheckIn.second())
+          .toDate(),
+        checkOutDate: dt(updatedBooking.checkOutDate)
+          .hour(originalCheckOut.hour())
+          .minute(originalCheckOut.minute())
+          .second(originalCheckOut.second())
+          .toDate(),
+      })
+
      toast.success(intl.formatMessage({ id: "Your stay was updated" }))
      handleCloseModal()
    },
    onError: () => {
-      setIsLoading(false)
      toast.error(intl.formatMessage({ id: "Failed to update your stay" }))
    },
+    onSettled: () => {
+      setIsLoading(false)
+    },
  })

  async function checkAvailability() {
@@ -89,34 +89,32 @@ export default function useModifyStay({
      const availabilityResults = []
      let totalNewPrice = 0

-      for (const room of rooms) {
-        try {
-          const data = await utils.client.hotel.availability.room.query({
-            hotelId: room.hotelId,
-            roomStayStartDate: formValues.checkInDate,
-            roomStayEndDate: formValues.checkOutDate,
-            adults: room.adults,
-            children: room.children,
-            bookingCode: room.bookingCode,
-            rateCode: room.rateCode,
-            roomTypeCode: room.roomTypeCode,
-            lang,
-          })
+      try {
+        const data = await utils.client.hotel.availability.room.query({
+          hotelId: bookedRoom.hotelId,
+          roomStayStartDate: formValues.checkInDate,
+          roomStayEndDate: formValues.checkOutDate,
+          adults: bookedRoom.adults,
+          children: bookedRoom.childrenAsString,
+          bookingCode: bookedRoom.bookingCode ?? undefined,
+          rateCode: bookedRoom.rateDefinition.rateCode,
+          roomTypeCode: bookedRoom.roomTypeCode,
+          lang,
+        })

-          if (!data?.selectedRoom || data.selectedRoom.roomsLeft <= 0) {
-            return { success: false, noAvailability: true }
-          }
-
-          const roomPrice = isLoggedIn
-            ? data.memberRate?.requestedPrice?.pricePerStay
-            : data.publicRate?.requestedPrice?.pricePerStay
-
-          totalNewPrice += roomPrice || 0
-          availabilityResults.push(data)
-        } catch (error) {
-          console.error("Error checking room availability:", error)
-          return { success: false, error: true }
+        if (!data?.selectedRoom || data.selectedRoom.roomsLeft <= 0) {
+          return { success: false, noAvailability: true }
        }
+
+        const roomPrice = isLoggedIn
+          ? data.memberRate?.localPrice.pricePerStay
+          : data.publicRate?.localPrice.pricePerStay
+
+        totalNewPrice += roomPrice ?? 0
+        availabilityResults.push(data)
+      } catch (error) {
+        console.error("Error checking room availability:", error)
+        return { success: false, error: true }
      }

      return {
@@ -133,21 +131,12 @@ export default function useModifyStay({
  }

  async function handleModifyStay() {
-    if (!booking.confirmationNumber) {
-      toast.error(
-        intl.formatMessage({
-          id: "Something went wrong. Please try again later.",
-        })
-      )
-      return
-    }
-
    const formValues = getFormValues()
    setIsLoading(true)

    try {
      await updateBooking.mutateAsync({
-        confirmationNumber: booking.confirmationNumber,
+        confirmationNumber: bookedRoom.confirmationNumber,
        checkInDate: formValues.checkInDate,
        checkOutDate: formValues.checkOutDate,
      })
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/index.tsx
@@ -5,9 +5,9 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"

 import { dt } from "@/lib/dt"
+import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
+import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"

-import { useManageStayStore } from "@/components/HotelReservation/MyStay/stores/manageStayStore"
-import { useMyStayRoomDetailsStore } from "@/components/HotelReservation/MyStay/stores/myStayRoomDetailsStore"
 import { ModalContentWithActions } from "@/components/Modal/ModalContentWithActions"
 import Alert from "@/components/TempDesignSystem/Alert"
 import useLang from "@/hooks/useLang"
@@ -25,7 +25,7 @@ import {
 import { MODAL_STEPS } from "@/types/components/hotelReservation/myStay/myStay"
 import { AlertTypeEnum } from "@/types/enums/alert"

-export default function ModifyStay({ booking, user }: ModifyStayProps) {
+export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
  const intl = useIntl()
  const lang = useLang()

@@ -46,20 +46,24 @@ export default function ModifyStay({ booking, user }: ModifyStayProps) {
    isLoading,
    actions: { handleCloseView, handleCloseModal, setCurrentStep },
  } = useManageStayStore()
-  const { rooms } = useMyStayRoomDetailsStore()

-  const { mainRoom: isMainRoom } = booking
-  const stayDetails = formatStayDetails({ booking, lang, intl })
+  const bookedRoom = useMyStayRoomDetailsStore((state) => state.bookedRoom)
+
+  const stayDetails = formatStayDetails({ bookedRoom, lang, intl })

  const isFirstStep = currentStep === MODAL_STEPS.INITIAL

-  const mainRoom = rooms.find((room) => room.mainRoom)
-
-  const isMultiRoom = rooms.length > 1
+  const {
+    multiRoom,
+    checkInDate,
+    checkOutDate,
+    mainRoom,
+    roomPrice,
+    canChangeDate,
+  } = bookedRoom

  const { checkAvailability, handleModifyStay } = useModifyStay({
-    booking,
-    isLoggedIn: !!user,
+    isLoggedIn,
    getFormValues: form.getValues,
    handleCloseModal,
  })
@@ -84,20 +88,12 @@ export default function ModifyStay({ booking, user }: ModifyStayProps) {
  }

  useEffect(() => {
-    if (mainRoom) {
-      form.setValue(
-        "checkInDate",
-        dt(mainRoom.checkInDate).format("YYYY-MM-DD")
-      )
-      form.setValue(
-        "checkOutDate",
-        dt(mainRoom.checkOutDate).format("YYYY-MM-DD")
-      )
-    }
-  }, [mainRoom, form])
+    form.setValue("checkInDate", dt(checkInDate).format("YYYY-MM-DD"))
+    form.setValue("checkOutDate", dt(checkOutDate).format("YYYY-MM-DD"))
+  }, [checkInDate, checkOutDate, form])

  function getModalContent() {
-    if (mainRoom && isFirstStep && isMultiRoom) {
+    if (bookedRoom && isFirstStep && multiRoom) {
      return (
        <Alert
          type={AlertTypeEnum.Info}
@@ -110,10 +106,23 @@ export default function ModifyStay({ booking, user }: ModifyStayProps) {
        />
      )
    }
+    if (mainRoom && !canChangeDate) {
+      return (
+        <Alert
+          type={AlertTypeEnum.Info}
+          heading={intl.formatMessage({
+            id: "Contact customer service",
+          })}
+          text={intl.formatMessage({
+            id: "Please contact customer service to update the dates.",
+          })}
+        />
+      )
+    }
    if (mainRoom && isFirstStep)
      return (
        <NewDates
-          mainRoom={mainRoom}
+          mainRoom={bookedRoom}
          noAvailability={noAvailability}
          error={error}
        />
@@ -122,7 +131,7 @@ export default function ModifyStay({ booking, user }: ModifyStayProps) {
    if (mainRoom && !isFirstStep)
      return (
        <Confirmation
-          oldPrice={booking.roomPrice}
+          oldPrice={roomPrice.perStay.local.price}
          newPrice={newRoomPrice}
          stayDetails={stayDetails}
        />
@@ -153,7 +162,7 @@ export default function ModifyStay({ booking, user }: ModifyStayProps) {
        content={getModalContent()}
        onClose={handleCloseModal}
        primaryAction={
-          isMainRoom && !isMultiRoom
+          mainRoom && !multiRoom && canChangeDate
            ? {
                label: isFirstStep
                  ? intl.formatMessage({ id: "Check availability" })