Merge master

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

@@ -1,12 +1,11 @@
-import "./enterDetailsLayout.css"
-
 import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import {
   getBreakfastPackages,
-  getCreditCardsSafely,
   getHotelData,
+  getPackages,
   getProfileSafely,
   getSelectedRoomAvailability,
   getUserTracking,
@@ -15,20 +14,25 @@ import {
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HotelHeader from "@/components/HotelReservation/EnterDetails/Header"
 import HistoryStateManager from "@/components/HotelReservation/EnterDetails/HistoryStateManager"
 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 {
   generateChildrenString,
   getQueryParamsForEnterDetails,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
-import StepsProvider from "@/providers/StepsProvider"
+import { setLang } from "@/i18n/serverContext"
+import EnterDetailsProvider from "@/providers/EnterDetailsProvider"
 
 import EnterDetailsTracking from "./enterDetailsTracking"
 
+import styles from "./page.module.css"
+
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import {
   TrackingChannelEnum,
@@ -46,61 +50,77 @@ export default async function StepPage({
   params: { lang },
   searchParams,
 }: PageArgs<LangParams, SelectRateSearchParams & { step: StepEnum }>) {
+  if (!isValidStep(searchParams.step)) {
+    return notFound()
+  }
+  setLang(lang)
+
   const intl = await getIntl()
   const selectRoomParams = new URLSearchParams(searchParams)
+  // Deleting step to avoid double searchparams after rewrite
   selectRoomParams.delete("step")
-  const searchParamsString = selectRoomParams.toString()
+  const booking = getQueryParamsForEnterDetails(selectRoomParams)
+
   const {
     hotel: hotelId,
-    rooms,
+    rooms: [
+      { adults, children, roomTypeCode, rateCode, packages: packageCodes },
+    ], // TODO: Handle multiple rooms
     fromDate,
     toDate,
-  } = getQueryParamsForEnterDetails(selectRoomParams)
-
-  const {
-    adults,
-    children,
-    roomTypeCode,
-    rateCode,
-    packages: packageCodes,
-  } = rooms[0] // TODO: Handle multiple rooms
+  } = booking
 
   const childrenAsString = children && generateChildrenString(children)
-
   const breakfastInput = { adults, fromDate, hotelId, toDate }
-  void getBreakfastPackages(breakfastInput)
-  void getSelectedRoomAvailability({
-    hotelId,
+  const selectedRoomAvailabilityInput = {
     adults,
     children: childrenAsString,
+    hotelId,
+    packageCodes,
+    rateCode,
     roomStayStartDate: fromDate,
     roomStayEndDate: toDate,
-    rateCode,
     roomTypeCode,
-    packageCodes,
-  })
+  }
 
-  const roomAvailability = await getSelectedRoomAvailability({
-    hotelId,
-    adults,
-    children: childrenAsString,
-    roomStayStartDate: fromDate,
-    roomStayEndDate: toDate,
-    rateCode,
-    roomTypeCode,
-    packageCodes,
-  })
+  void getProfileSafely()
+  void getBreakfastPackages(breakfastInput)
+  void getSelectedRoomAvailability(selectedRoomAvailabilityInput)
+  if (packageCodes?.length) {
+    void getPackages({
+      adults,
+      children: children?.length,
+      endDate: toDate,
+      hotelId,
+      packageCodes,
+      startDate: fromDate,
+    })
+  }
+
+  const packages = packageCodes
+    ? await getPackages({
+        adults,
+        children: children?.length,
+        endDate: toDate,
+        hotelId,
+        packageCodes,
+        startDate: fromDate,
+      })
+    : null
+
+  const roomAvailability = await getSelectedRoomAvailability(
+    selectedRoomAvailabilityInput
+  )
   const hotelData = await getHotelData({
     hotelId,
-    language: lang,
     isCardOnlyPayment: roomAvailability?.mustBeGuaranteed,
+    language: lang,
   })
   const breakfastPackages = await getBreakfastPackages(breakfastInput)
   const user = await getProfileSafely()
-  const savedCreditCards = await getCreditCardsSafely()
   const userTrackingData = await getUserTracking()
 
-  if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
+  if (!hotelData || !roomAvailability) {
     return notFound()
   }
 
@@ -162,67 +182,98 @@ export default async function StepPage({
   }
 
   return (
-    <StepsProvider
+    <EnterDetailsProvider
       bedTypes={roomAvailability.bedTypes}
+      booking={booking}
       breakfastPackages={breakfastPackages}
-      isMember={!!user}
-      searchParams={searchParamsString}
+      packages={packages}
+      roomRate={{
+        memberRate: roomAvailability.memberRate,
+        publicRate: roomAvailability.publicRate,
+      }}
+      searchParamsStr={selectRoomParams.toString()}
       step={searchParams.step}
+      user={user}
     >
-      <section>
-        <HistoryStateManager />
-        <SelectedRoom
-          hotelId={hotelId}
-          room={roomAvailability.selectedRoom}
-          rateDescription={roomAvailability.cancellationText}
-        />
+      <main>
+        <HotelHeader hotelData={hotelData} />
+        <div className={styles.container}>
+          <div className={styles.content}>
+            <section>
+              <HistoryStateManager />
+              <SelectedRoom
+                hotelId={hotelId}
+                room={roomAvailability.selectedRoom}
+                rateDescription={roomAvailability.cancellationText}
+              />
 
-        {/* TODO: How to handle no beds found? */}
-        {roomAvailability.bedTypes ? (
-          <SectionAccordion
-            header={intl.formatMessage({ id: "Select bed" })}
-            step={StepEnum.selectBed}
-            label={intl.formatMessage({ id: "Request bedtype" })}
-          >
-            <BedType bedTypes={roomAvailability.bedTypes} />
-          </SectionAccordion>
-        ) : null}
+              {/* TODO: How to handle no beds found? */}
+              {roomAvailability.bedTypes ? (
+                <SectionAccordion
+                  header={intl.formatMessage({ id: "Select bed" })}
+                  label={intl.formatMessage({ id: "Request bedtype" })}
+                  step={StepEnum.selectBed}
+                >
+                  <BedType bedTypes={roomAvailability.bedTypes} />
+                </SectionAccordion>
+              ) : null}
 
-        {breakfastPackages?.length ? (
-          <SectionAccordion
-            header={intl.formatMessage({ id: "Food options" })}
-            step={StepEnum.breakfast}
-            label={intl.formatMessage({ id: "Select breakfast options" })}
-          >
-            <Breakfast packages={breakfastPackages} />
-          </SectionAccordion>
-        ) : null}
+              {breakfastPackages?.length ? (
+                <SectionAccordion
+                  header={intl.formatMessage({ id: "Food options" })}
+                  label={intl.formatMessage({ id: "Select breakfast options" })}
+                  step={StepEnum.breakfast}
+                >
+                  <Breakfast packages={breakfastPackages} />
+                </SectionAccordion>
+              ) : null}
 
-        <SectionAccordion
-          header={intl.formatMessage({ id: "Details" })}
-          step={StepEnum.details}
-          label={intl.formatMessage({ id: "Enter your details" })}
-        >
-          <Details user={user} memberPrice={memberPrice} />
-        </SectionAccordion>
+              <SectionAccordion
+                header={intl.formatMessage({ id: "Details" })}
+                step={StepEnum.details}
+                label={intl.formatMessage({ id: "Enter your details" })}
+              >
+                <Details user={user} memberPrice={memberPrice} />
+              </SectionAccordion>
 
-        <SectionAccordion
-          header={mustBeGuaranteed ? paymentGuarantee : payment}
-          step={StepEnum.payment}
-          label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
-        >
-          <Payment
-            user={user}
-            roomPrice={roomPrice}
-            otherPaymentOptions={
-              hotelData.data.attributes.merchantInformationData
-                .alternatePaymentOptions
-            }
-            savedCreditCards={savedCreditCards}
-            mustBeGuaranteed={mustBeGuaranteed}
-          />
-        </SectionAccordion>
-      </section>
+              <SectionAccordion
+                header={mustBeGuaranteed ? paymentGuarantee : payment}
+                step={StepEnum.payment}
+                label={
+                  mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod
+                }
+              >
+                <Suspense>
+                  <Payment
+                    user={user}
+                    roomPrice={roomPrice}
+                    otherPaymentOptions={
+                      hotelData.data.attributes.merchantInformationData
+                        .alternatePaymentOptions
+                    }
+                    supportedCards={
+                      hotelData.data.attributes.merchantInformationData.cards
+                    }
+                    mustBeGuaranteed={mustBeGuaranteed}
+                  />
+                </Suspense>
+              </SectionAccordion>
+            </section>
+          </div>
+          <aside className={styles.summary}>
+            <Summary
+              adults={adults}
+              fromDate={fromDate}
+              hotelId={hotelId}
+              kids={children}
+              packageCodes={packageCodes}
+              rateCode={rateCode}
+              roomTypeCode={roomTypeCode}
+              toDate={toDate}
+            />
+          </aside>
+        </div>
+      </main>
       <EnterDetailsTracking
         initialHotelsTrackingData={initialHotelsTrackingData}
         userTrackingData={userTrackingData}
@@ -232,6 +283,6 @@ export default async function StepPage({
         pageData={initialPageTrackingData}
         hotelInfo={initialHotelsTrackingData}
       />
-    </StepsProvider>
+    </EnterDetailsProvider>
   )
 }