Merge branch 'master' into feature/tracking

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css

@@ -4,7 +4,8 @@
 }
 
 .content {
-  margin: var(--Spacing-x3) var(--Spacing-x2) 0;
+  width: var(--max-width-page);
+  margin: var(--Spacing-x3) auto 0;
 }
 
 .summary {
@@ -16,14 +17,17 @@
 
 @media screen and (min-width: 1367px) {
   .container {
+    width: var(--max-width-page);
+
     grid-template-columns: 1fr 340px;
     grid-template-rows: auto 1fr;
     margin: var(--Spacing-x5) auto 0;
     /* simulates padding on viewport smaller than --max-width-navigation */
-    width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
-      var(--max-width-navigation)
-    );
+  }
+
+  .content {
+    width: 100%;
+    margin: var(--Spacing-x3) 0 0;
   }
 
   .summary {

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx

@@ -19,7 +19,8 @@ import HistoryStateManager from "@/components/HotelReservation/EnterDetails/Hist
 import Payment from "@/components/HotelReservation/EnterDetails/Payment"
 import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
-import Summary from "@/components/HotelReservation/EnterDetails/Summary"
+import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
+import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
 import {
   generateChildrenString,
   getQueryParamsForEnterDetails,
@@ -182,6 +183,13 @@ export default async function StepPage({
     //lowestRoomPrice:
   }
 
+  const summary = {
+    cancellationText: roomAvailability.cancellationText,
+    isMember: !!user,
+    rateDetails: roomAvailability.rateDetails,
+    roomType: roomAvailability.selectedRoom.roomType,
+  }
+
   return (
     <EnterDetailsProvider
       bedTypes={roomAvailability.bedTypes}
@@ -262,16 +270,8 @@ export default async function StepPage({
             </section>
           </div>
           <aside className={styles.summary}>
-            <Summary
-              adults={adults}
-              fromDate={fromDate}
-              hotelId={hotelId}
-              kids={children}
-              packageCodes={packageCodes}
-              rateCode={rateCode}
-              roomTypeCode={roomTypeCode}
-              toDate={toDate}
-            />
+            <MobileSummary {...summary} />
+            <DesktopSummary {...summary} />
           </aside>
         </div>
       </main>