Merged in feat/SW-965-select-rate-modify-room (pull request #1326)

Feat/SW-965 select rate modify room

* feat(SW-965): added new state for modify room and smaller fixes

* feat(SW-965): update state handling of modifyRateIndex

* fix: adjust scroll animation to handle modifyRateIndex

* fix: room state logic and removed unused css class


Approved-by: Pontus Dreij
Approved-by: Arvid Norlin

components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -1,11 +1,14 @@
 "use client"
 
+import { useRouter } from "next/navigation"
+import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
+import { useRateSelectionStore } from "@/stores/select-rate/rate-selection"
 
 import { CheckIcon, EditIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
@@ -21,9 +24,23 @@ export default function SelectedRoom({
   roomType,
   roomTypeCode,
   rateDescription,
+  roomIndex,
+  searchParamsStr,
 }: SelectedRoomProps) {
   const intl = useIntl()
   const lang = useLang()
+  const router = useRouter()
+  const [isPending, startTransition] = useTransition()
+  const { modifyRate } = useRateSelectionStore()
+
+  function changeRoom() {
+    modifyRate(roomIndex)
+    startTransition(() => {
+      const newSearchParams = new URLSearchParams(searchParamsStr)
+      newSearchParams.set("modifyRateIndex", roomIndex.toString())
+      router.push(`${selectRate(lang)}?${newSearchParams.toString()}`)
+    })
+  }
 
   return (
     <div className={styles.wrapper}>
@@ -59,17 +76,16 @@ export default function SelectedRoom({
               }
             )}
           </Subtitle>
-          <Link
-            className={styles.button}
-            color="burgundy"
-            href={selectRate(lang)}
-            keepSearchParams
-            size="small"
+          <Button
             variant="icon"
+            size="small"
+            color="burgundy"
+            onClick={changeRoom}
+            disabled={isPending}
           >
             <EditIcon color="burgundy" />
-            {intl.formatMessage({ id: "Change room" })}{" "}
-          </Link>
+            {intl.formatMessage({ id: "Change room" })}
+          </Button>
         </div>
         {roomTypeCode && (
           <div className={styles.details}>