Merged in fix/SW-1917-mobile-booking-codes-map- (pull request #1951)

Fix: SW-1917 Displayed booking code price in map card

* Fix: SW-1917 Displayed booking code price in map card


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -37,6 +37,7 @@ export default function ListingHotelCardDialog({
   const { data: session } = useSession()
   const isUserLoggedIn = isValidClientSession(session)
   const {
+    bookingCode,
     name,
     publicPrice,
     memberPrice,
@@ -97,7 +98,7 @@ export default function ListingHotelCardDialog({
               </Caption>
             )}
             <div className={styles.listingPrices}>
-              {publicPrice && !isUserLoggedIn && memberPrice && (
+              {publicPrice && !isUserLoggedIn && memberPrice ? (
                 <>
                   <Subtitle type="two">
                     {publicPrice} {currency}
@@ -105,6 +106,13 @@ export default function ListingHotelCardDialog({
                   {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
                   {memberPrice && <Caption>/</Caption>}
                 </>
+              ) : (
+                bookingCode &&
+                publicPrice && (
+                  <Subtitle type="two" color="red">
+                    {publicPrice} {currency}
+                  </Subtitle>
+                )
               )}
               {memberPrice && (
                 <Subtitle type="two" color="red">

apps/scandic-web/components/HotelReservation/SelectHotel/BookingCodeFilter/bookingCodeFilter.module.css

@@ -1,7 +1,6 @@
 .bookingCodeFilter {
   display: flex;
   justify-content: flex-end;
-  width: 100%;
 }
 
 .dialog {
@@ -48,12 +47,6 @@
   box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
 }
 
-@media screen and (max-width: 767px) {
-  .bookingCodeFilter {
-    margin-bottom: var(--Space-x3);
-  }
-}
-
 .modalOverlay {
   position: fixed;
   inset: 0;
@@ -101,6 +94,10 @@
 }
 
 @media screen and (min-width: 768px) {
+  .bookingCodeFilter {
+    width: 100%;
+  }
+
   .radioGroup {
     padding: var(--Space-x1);
   }

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -173,7 +173,9 @@ export default function SelectHotelContent({
           {bookingCode &&
           isBookingCodeRateAvailable &&
           isRegularRateAvailable ? (
-            <BookingCodeFilter />
+            <div className={styles.bookingCodeFilter}>
+              <BookingCodeFilter />
+            </div>
           ) : null}
         </div>
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -1,7 +1,7 @@
 .container .closeButton {
   pointer-events: initial;
   box-shadow: var(--button-box-shadow);
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
   display: none;
 }
 
@@ -15,8 +15,8 @@
   align-items: center;
   position: relative;
   background-color: var(--Base-Surface-Secondary-light-Normal);
-  padding: 0 var(--Spacing-x2);
+  padding: var(--Space-x025) var(--Space-x2);
-  height: 44px;
+  min-height: 44px;
 }
 
 .container .listingContainer .filterContainer > button {
@@ -31,6 +31,10 @@
   color: var(--Component-Button-Brand-Secondary-On-fill-Default);
 }
 
+.bookingCodeFilter {
+  width: auto;
+}
+
 @media (min-width: 768px) {
   .container .closeButton {
     display: flex;
@@ -41,7 +45,7 @@
 
   .listingContainer {
     background-color: var(--Base-Surface-Secondary-light-Normal);
-    padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
+    padding: var(--Space-x3) var(--Space-x4) var(--Space-x3)
       var(--Layout-Tablet-Margin-Margin-min);
     overflow-y: auto;
     min-width: 420px;
@@ -54,20 +58,20 @@
 
   .filterContainer {
     justify-content: flex-end;
-    padding: 0 0 var(--Spacing-x1);
+    padding: 0 0 var(--Space-x1);
     position: static;
   }
 
   .skeletonContainer {
     display: flex;
     flex-direction: column;
-    gap: var(--Spacing-x2);
+    gap: var(--Space-x2);
   }
 }
 
 @media (min-width: 1367px) {
   .listingContainer {
-    padding: var(--Spacing-x3) var(--Spacing-x4) var(--Spacing-x3)
+    padding: var(--Space-x3) var(--Space-x4) var(--Space-x3)
       var(--Layout-Desktop-Margin-Margin-min);
   }
 }