feat: make steps of enter details flow dynamic depending on data

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

@@ -1 +0,0 @@
-export { default } from "../page"

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

@@ -1,25 +0,0 @@
-import { redirect } from "next/navigation"
-
-import { getHotelData } from "@/lib/trpc/memoizedRequests"
-
-import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
-
-import type { LangParams, PageArgs } from "@/types/params"
-
-export default async function HotelHeader({
-  params,
-  searchParams,
-}: PageArgs<LangParams, { hotel: string }>) {
-  const home = `/${params.lang}`
-  if (!searchParams.hotel) {
-    redirect(home)
-  }
-  const hotel = await getHotelData({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-  })
-  if (!hotel?.data) {
-    redirect(home)
-  }
-  return <HotelSelectionHeader hotel={hotel.data.attributes} />
-}

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -86,7 +86,7 @@ export default async function SelectHotelPage({
             <Link
               className={styles.link}
               color="burgundy"
-              href={selectHotelMap[params.lang]}
+              href={selectHotelMap(params.lang)}
               keepSearchParams
             >
               <div className={styles.mapContainer}>

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

@@ -0,0 +1,64 @@
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  justify-content: center;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--Spacing-x1);
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.dividerContainer {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .wrapper {
+    flex-direction: row;
+    gap: var(--Spacing-x6);
+    margin: 0 auto;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
+  .titleContainer > h1 {
+    white-space: nowrap;
+  }
+
+  .dividerContainer {
+    display: block;
+  }
+
+  .address {
+    gap: var(--Spacing-x3);
+  }
+}

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

@@ -0,0 +1,66 @@
+import { redirect } from "next/navigation"
+
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function HotelHeader({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { hotel: string }>) {
+  const home = `/${params.lang}`
+  if (!searchParams.hotel) {
+    redirect(home)
+  }
+  const hotelData = await getHotelData({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+  })
+  if (!hotelData?.data) {
+    redirect(home)
+  }
+
+  const intl = await getIntl()
+  const hotel = hotelData.data.attributes
+  return (
+    <header className={styles.header}>
+      <div className={styles.wrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="baseTextHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+        </div>
+      </div>
+    </header>
+  )
+}

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

@@ -61,7 +61,7 @@ export default async function SummaryPage({
   if (!availability || !availability.selectedRoom) {
     console.error("No hotel or availability data", availability)
     // TODO: handle this case
-    redirect(selectRate[params.lang])
+    redirect(selectRate(params.lang))
   }
 
   const prices =

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

@@ -1,20 +1,19 @@
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 
-import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import { setLang } from "@/i18n/serverContext"
+import DetailsProvider from "@/providers/DetailsProvider"
 
 import { preload } from "./_preload"
 
-import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function StepLayout({
-  summary,
   children,
   hotelHeader,
   params,
+  summary,
 }: React.PropsWithChildren<
-  LayoutArgs<LangParams & { step: StepEnum }> & {
+  LayoutArgs<LangParams> & {
     hotelHeader: React.ReactNode
     summary: React.ReactNode
   }
@@ -25,7 +24,7 @@ export default async function StepLayout({
   const user = await getProfileSafely()
 
   return (
-    <EnterDetailsProvider step={params.step} isMember={!!user}>
+    <DetailsProvider isMember={!!user}>
       <main className="enter-details-layout__layout">
         {hotelHeader}
         <div className={"enter-details-layout__container"}>
@@ -35,6 +34,6 @@ export default async function StepLayout({
           </aside>
         </div>
       </main>
-    </EnterDetailsProvider>
+    </DetailsProvider>
   )
 }

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

@@ -1,6 +1,6 @@
 import "./enterDetailsLayout.css"
 
-import { notFound } from "next/navigation"
+import { notFound, redirect, RedirectType } from "next/navigation"
 
 import {
   getBreakfastPackages,
@@ -22,9 +22,10 @@ import {
   getQueryParamsForEnterDetails,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 import { getIntl } from "@/i18n"
+import StepsProvider from "@/providers/StepsProvider"
 
-import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
 import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { StepEnum } from "@/types/enums/step"
 import type { LangParams, PageArgs } from "@/types/params"
 
 function isValidStep(step: string): step is StepEnum {
@@ -32,11 +33,9 @@ function isValidStep(step: string): step is StepEnum {
 }
 
 export default async function StepPage({
-  params,
+  params: { lang },
   searchParams,
-}: PageArgs<LangParams & { step: StepEnum }, SelectRateSearchParams>) {
-  const { lang } = params
-
+}: PageArgs<LangParams, SelectRateSearchParams & { step: StepEnum }>) {
   const intl = await getIntl()
   const selectRoomParams = new URLSearchParams(searchParams)
   const {
@@ -88,7 +87,7 @@ export default async function StepPage({
   const user = await getProfileSafely()
   const savedCreditCards = await getCreditCardsSafely()
 
-  if (!isValidStep(params.step) || !hotelData || !roomAvailability) {
+  if (!isValidStep(searchParams.step) || !hotelData || !roomAvailability) {
     return notFound()
   }
 
@@ -113,54 +112,65 @@ export default async function StepPage({
   }
 
   return (
-    <section>
-      <HistoryStateManager />
-      <SelectedRoom
-        hotelId={hotelId}
-        room={roomAvailability.selectedRoom}
-        rateDescription={roomAvailability.cancellationText}
-      />
-
-      {/* TODO: How to handle no beds found? */}
-      {roomAvailability.bedTypes ? (
-        <SectionAccordion
-          header="Select bed"
-          step={StepEnum.selectBed}
-          label={intl.formatMessage({ id: "Request bedtype" })}
-        >
-          <BedType bedTypes={roomAvailability.bedTypes} />
-        </SectionAccordion>
-      ) : null}
-
-      <SectionAccordion
-        header={intl.formatMessage({ id: "Food options" })}
-        step={StepEnum.breakfast}
-        label={intl.formatMessage({ id: "Select breakfast options" })}
-      >
-        <Breakfast packages={breakfastPackages} />
-      </SectionAccordion>
-      <SectionAccordion
-        header={intl.formatMessage({ id: "Details" })}
-        step={StepEnum.details}
-        label={intl.formatMessage({ id: "Enter your details" })}
-      >
-        <Details user={user} />
-      </SectionAccordion>
-      <SectionAccordion
-        header={mustBeGuaranteed ? paymentGuarantee : payment}
-        step={StepEnum.payment}
-        label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
-      >
-        <Payment
-          roomPrice={roomPrice}
-          otherPaymentOptions={
-            hotelData.data.attributes.merchantInformationData
-              .alternatePaymentOptions
-          }
-          savedCreditCards={savedCreditCards}
-          mustBeGuaranteed={mustBeGuaranteed}
+    <StepsProvider
+      bedTypes={roomAvailability.bedTypes}
+      breakfastPackages={breakfastPackages}
+      isMember={!!user}
+      step={searchParams.step}
+    >
+      <section>
+        <HistoryStateManager />
+        <SelectedRoom
+          hotelId={hotelId}
+          room={roomAvailability.selectedRoom}
+          rateDescription={roomAvailability.cancellationText}
         />
-      </SectionAccordion>
-    </section>
+
+        {/* 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}
+
+        {breakfastPackages?.length ? (
+          <SectionAccordion
+            header={intl.formatMessage({ id: "Food options" })}
+            step={StepEnum.breakfast}
+            label={intl.formatMessage({ id: "Select breakfast options" })}
+          >
+            <Breakfast packages={breakfastPackages} />
+          </SectionAccordion>
+        ) : null}
+
+        <SectionAccordion
+          header={intl.formatMessage({ id: "Details" })}
+          step={StepEnum.details}
+          label={intl.formatMessage({ id: "Enter your details" })}
+        >
+          <Details user={user} />
+        </SectionAccordion>
+
+        <SectionAccordion
+          header={mustBeGuaranteed ? paymentGuarantee : payment}
+          step={StepEnum.payment}
+          label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
+        >
+          <Payment
+            roomPrice={roomPrice}
+            otherPaymentOptions={
+              hotelData.data.attributes.merchantInformationData
+                .alternatePaymentOptions
+            }
+            savedCreditCards={savedCreditCards}
+            mustBeGuaranteed={mustBeGuaranteed}
+          />
+        </SectionAccordion>
+      </section>
+    </StepsProvider>
   )
 }