merge

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

@@ -14,6 +14,10 @@
   padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
 }
 
+.header nav {
+  display: none;
+}
+
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
@@ -65,13 +69,19 @@
       var(--Spacing-x5);
   }
 
+  .header nav {
+    display: block;
+    max-width: var(--max-width-navigation);
+    padding-left: 0;
+  }
+
   .sorter {
     display: block;
     width: 339px;
   }
 
   .title {
-    margin: 0 auto;
+    margin: var(--Spacing-x3) auto 0;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;

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

@@ -1,6 +1,10 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
-import { selectHotelMap } from "@/constants/routes/hotelReservation"
+import {
+  selectHotel,
+  selectHotelMap,
+} from "@/constants/routes/hotelReservation"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
 import {
@@ -19,6 +23,8 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -65,12 +71,36 @@ export default async function SelectHotelPage({
   })
 
   const filterList = getFiltersFromHotels(hotels)
+  const breadcrumbs = [
+    {
+      title: intl.formatMessage({ id: "Home" }),
+      href: `/${params.lang}`,
+      uid: "home-page",
+    },
+    {
+      title: intl.formatMessage({ id: "Hotel reservation" }),
+      href: `/${params.lang}/hotelreservation`,
+      uid: "hotel-reservation",
+    },
+    {
+      title: intl.formatMessage({ id: "Select hotel" }),
+      href: `${selectHotel(params.lang)}/?${selectHotelParams}`,
+      uid: "select-hotel",
+    },
+    {
+      title: city.name,
+      uid: city.id,
+    },
+  ]
 
   const isAllUnavailable = hotels.every((hotel) => hotel.price === undefined)
 
   return (
     <>
       <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs breadcrumbs={breadcrumbs} />
+        </Suspense>
         <div className={styles.title}>
           <div className={styles.cityInformation}>
             <Subtitle>{city.name}</Subtitle>

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

@@ -64,32 +64,34 @@ export default async function SummaryPage({
     redirect(selectRate(params.lang))
   }
 
-  const prices =
-    user && availability.memberRate
+  const prices = {
+    public: {
+      local: {
+        amount: availability.publicRate.localPrice.pricePerStay,
+        currency: availability.publicRate.localPrice.currency,
+      },
+      euro: availability.publicRate?.requestedPrice
+        ? {
+            amount: availability.publicRate?.requestedPrice.pricePerStay,
+            currency: availability.publicRate?.requestedPrice.currency,
+          }
+        : undefined,
+    },
+    member: availability.memberRate
       ? {
           local: {
-            price: availability.memberRate.localPrice.pricePerStay,
+            amount: availability.memberRate.localPrice.pricePerStay,
             currency: availability.memberRate.localPrice.currency,
           },
           euro: availability.memberRate.requestedPrice
             ? {
-                price: availability.memberRate.requestedPrice.pricePerStay,
+                amount: availability.memberRate.requestedPrice.pricePerStay,
                 currency: availability.memberRate.requestedPrice.currency,
               }
             : undefined,
         }
-      : {
-          local: {
-            price: availability.publicRate.localPrice.pricePerStay,
-            currency: availability.publicRate.localPrice.currency,
-          },
-          euro: availability.publicRate?.requestedPrice
-            ? {
-                price: availability.publicRate?.requestedPrice.pricePerStay,
-                currency: availability.publicRate?.requestedPrice.currency,
-              }
-            : undefined,
-        }
+      : undefined,
+  }
 
   return (
     <>
@@ -100,8 +102,7 @@ export default async function SummaryPage({
               showMemberPrice={!!(user && availability.memberRate)}
               room={{
                 roomType: availability.selectedRoom.roomType,
-                localPrice: prices.local,
-                euroPrice: prices.euro,
+                prices,
                 adults,
                 children,
                 rateDetails: availability.rateDetails,
@@ -119,8 +120,7 @@ export default async function SummaryPage({
             showMemberPrice={!!(user && availability.memberRate)}
             room={{
               roomType: availability.selectedRoom.roomType,
-              localPrice: prices.local,
-              euroPrice: prices.euro,
+              prices,
               adults,
               children,
               rateDetails: availability.rateDetails,

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

@@ -171,6 +171,7 @@ export default async function StepPage({
           label={mustBeGuaranteed ? guaranteeWithCard : selectPaymentMethod}
         >
           <Payment
+            user={user}
             roomPrice={roomPrice}
             otherPaymentOptions={
               hotelData.data.attributes.merchantInformationData