feat: new booking confirmation page

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

@@ -17,7 +17,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,
@@ -140,6 +141,13 @@ export default async function StepPage({
       }
     : undefined
 
+  const summary = {
+    cancellationText: roomAvailability.cancellationText,
+    isMember: !!user,
+    rateDetails: roomAvailability.rateDetails,
+    roomType: roomAvailability.selectedRoom.roomType,
+  }
+
   return (
     <EnterDetailsProvider
       bedTypes={roomAvailability.bedTypes}
@@ -220,16 +228,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>