Merged in feat/SW-2703-mobile-summary-improvements (pull request #2060)

Feat/SW-2703 mobile price summary improvements

* feat(SW-2703): fixes to select rate price summary

* feat(SW-2703): fixes enter details summary mobile

* fix: z-index issue related to booking widget popover

* fix

* fix: added accessibility props to overlay div

* fix: added button inside header

* fix: rename aria button


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/BottomSheet/bottomSheet.module.css

@@ -32,6 +32,8 @@
 
 .wrapper[data-open="true"] {
   grid-template-rows: 1fr 7.5em;
+  position: relative;
+  z-index: var(--default-modal-z-index);
 }
 
 .wrapper[data-open="true"] .bottomSheet {

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/index.tsx

@@ -12,8 +12,11 @@ import styles from "./mobile.module.css"
 import type { SummaryProps } from "@/types/components/hotelReservation/summary"
 
 export default function MobileSummary({ isMember }: SummaryProps) {
-  const toggleSummaryOpen = useEnterDetailsStore(
-    (state) => state.actions.toggleSummaryOpen
+  const { isSummaryOpen, toggleSummaryOpen } = useEnterDetailsStore(
+    (state) => ({
+      isSummaryOpen: state.isSummaryOpen,
+      toggleSummaryOpen: state.actions.toggleSummaryOpen,
+    })
   )
 
   const { booking, rooms, totalPrice, vat } = useEnterDetailsStore((state) => ({
@@ -31,7 +34,21 @@ export default function MobileSummary({ isMember }: SummaryProps) {
 
   return (
     <div className={styles.mobileSummary}>
-      {showPromo ? <SignupPromoMobile /> : null}
+      {showPromo ? (
+        <div className={styles.signupPromoWrapper}>
+          <SignupPromoMobile />
+        </div>
+      ) : null}
+
+      {isSummaryOpen && (
+        <div
+          className={styles.overlay}
+          role="presentation"
+          aria-hidden="true"
+          onClick={toggleSummaryOpen}
+        />
+      )}
+
       <SummaryBottomSheet>
         <div className={styles.wrapper}>
           <SummaryUI

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/Mobile/mobile.module.css

@@ -9,7 +9,21 @@
     border-style: solid;
     border-width: 1px;
     border-bottom: none;
-    z-index: 10;
+  }
+
+  .signupPromoWrapper {
+    position: relative;
+    z-index: var(--default-modal-z-index);
+  }
+
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--Overlay-40);
+    z-index: var(--default-modal-overlay-z-index);
   }
 }