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

@@ -25,14 +25,12 @@ export default function SectionAccordion({
     actions: { setStep },
     currentStep,
     isActiveRoom,
-    room: { bedType, breakfast },
+    room: { bedType, breakfast, isAvailable },
     steps,
   } = useRoomContext()
 
-  const [isComplete, setIsComplete] = useState(false)
+  const isStepComplete = !!(steps[step]?.isValid && isAvailable)
   const [isOpen, setIsOpen] = useState(false)
-  const isValid = steps[step]?.isValid ?? false
-
   const [title, setTitle] = useState(label)
 
   const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
@@ -54,14 +52,10 @@ export default function SectionAccordion({
     }
   }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])
 
-  useEffect(() => {
-    setIsComplete(isValid)
-  }, [isValid, setIsComplete])
-
   const accordionRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    const shouldBeOpen = currentStep === step && isActiveRoom
+    const shouldBeOpen = currentStep === step && isActiveRoom && isAvailable
     setIsOpen(shouldBeOpen)
 
     // Scroll to this section when it is opened,
@@ -91,7 +85,7 @@ export default function SectionAccordion({
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentStep, isActiveRoom, setIsOpen, step])
+  }, [currentStep, isActiveRoom, isAvailable, setIsOpen, step])
 
   function goToStep() {
     setStep(step)
@@ -103,7 +97,7 @@ export default function SectionAccordion({
   }
 
   const textColor =
-    isComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
+    isStepComplete || isOpen ? "uiTextHighContrast" : "baseTextDisabled"
   return (
     <div
       className={styles.accordion}
@@ -112,8 +106,8 @@ export default function SectionAccordion({
       ref={accordionRef}
     >
       <div className={styles.iconWrapper}>
-        <div className={styles.circle} data-checked={isComplete}>
-          {isComplete ? (
+        <div className={styles.circle} data-checked={isStepComplete}>
+          {isStepComplete ? (
             <CheckIcon color="white" height="16" width="16" />
           ) : null}
         </div>
@@ -121,7 +115,7 @@ export default function SectionAccordion({
       <header className={styles.header}>
         <button
           onClick={isOpen ? close : goToStep}
-          disabled={!isComplete}
+          disabled={!isStepComplete}
           className={styles.modifyButton}
         >
           <Footnote
@@ -136,7 +130,7 @@ export default function SectionAccordion({
           <Subtitle className={styles.selection} type="two" color={textColor}>
             {title}
           </Subtitle>
-          {isComplete && (
+          {isStepComplete && (
             <ChevronDownIcon
               className={`${styles.button} ${isOpen ? styles.buttonOpen : ""}`}
               color="burgundy"