Merged in feat/SW-1076-no-room-availability (pull request #1467)

Feat/SW-1076 no room availability

* fix: update booking error codes

* feat(SW-1076): handle no room availabilty on enter-details

* fix: parse to json in api mutation instead of expecting json

* fix: remove 'isComplete' state from sectionAccordion because it was not needed


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx

@@ -9,6 +9,7 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 
 import { CheckIcon, EditIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -39,7 +40,7 @@ export default function SelectedRoom() {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} data-available={room.isAvailable}>
       <div className={styles.iconWrapper}>
         <div className={styles.circle}>
           <CheckIcon color="white" height="16" width="16" />
@@ -74,13 +75,15 @@ export default function SelectedRoom() {
           </Subtitle>
           <Button
             variant="icon"
+            intent="text"
             size="small"
-            color="burgundy"
             onClick={changeRoom}
             disabled={isPending}
           >
             <EditIcon color="burgundy" />
-            {intl.formatMessage({ id: "Change room" })}
+            <Caption color="burgundy" type="bold">
+              {intl.formatMessage({ id: "Change room" })}
+            </Caption>
           </Button>
         </div>
         {room.roomTypeCode && (

apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -5,6 +5,13 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
+.wrapper[data-available="false"] .title,
+.wrapper[data-available="false"] .description,
+.wrapper[data-available="false"] .details {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
 .main {
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
@@ -52,6 +59,10 @@
   background-color: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.wrapper[data-available="false"] .circle {
+  background-color: var(--Base-Surface-Subtle-Hover);
+}
+
 .rate {
   color: var(--UI-Text-Placeholder);
   display: block;