feat(SW-467): add routing for details steps

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

@@ -0,0 +1,89 @@
+"use client"
+
+import { notFound } from "next/navigation"
+import { useIntl } from "react-intl"
+
+import Summary from "@/components/HotelReservation/SelectRate/Summary"
+
+import styles from "./page.module.css"
+
+import { LangParams, PageArgs } from "@/types/params"
+
+// const bedAlternatives = [
+//   {
+//     value: "queen",
+//     name: "Queen bed",
+//     payment: "160 cm",
+//     pricePerNight: 0,
+//     membersPricePerNight: 0,
+//     currency: "SEK",
+//   },
+//   {
+//     value: "king",
+//     name: "King bed",
+//     payment: "160 cm",
+//     pricePerNight: 0,
+//     membersPricePerNight: 0,
+//     currency: "SEK",
+//   },
+//   {
+//     value: "twin",
+//     name: "Twin bed",
+//     payment: "90 cm + 90 cm",
+//     pricePerNight: 82,
+//     membersPricePerNight: 67,
+//     currency: "SEK",
+//   },
+// ]
+
+// const breakfastAlternatives = [
+//   {
+//     value: "no",
+//     name: "No breakfast",
+//     payment: "Always cheeper to get it online",
+//     pricePerNight: 0,
+//     currency: "SEK",
+//   },
+//   {
+//     value: "buffe",
+//     name: "Breakfast buffé",
+//     payment: "Always cheeper to get it online",
+//     pricePerNight: 150,
+//     currency: "SEK",
+//   },
+// ]
+
+enum StepEnum {
+  "select-bed" = "select-bed",
+  breakfast = "breakfast",
+  details = "details",
+  payment = "payment",
+}
+
+type Step = keyof typeof StepEnum
+
+function isValidStep(step: string): step is Step {
+  return Object.keys(StepEnum).includes(step)
+}
+
+export default function StepPage({
+  params,
+}: PageArgs<LangParams & { step: string }>) {
+  const { step } = params
+  const intl = useIntl()
+
+  if (isValidStep(step)) {
+    return notFound()
+  }
+
+  switch (step) {
+    case StepEnum.breakfast:
+      return <div>Select BREAKFAST</div>
+    case StepEnum.details:
+      return <div>Select DETAILS</div>
+    case StepEnum.payment:
+      return <div>Select PAYMENT</div>
+    case StepEnum["select-bed"]:
+      return <div>Select BED</div>
+  }
+}

components/HotelReservation/SelectRate/SectionAccordion/index.tsx

@@ -1,3 +1,6 @@
+import { getHotelDataSchema } from "@/server/routers/hotels/output"
+import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+
 import { CheckCircleIcon, ChevronDownIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
@@ -5,6 +8,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
+import HotelSelectionHeader from "../../HotelSelectionHeader"
+
 import styles from "./sectionAccordion.module.css"
 
 import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
@@ -15,10 +20,14 @@ export default async function SectionAccordion({
   path,
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
+  const hotel = getHotelDataSchema.parse(tempHotelData)
+
   const intl = await getIntl()
 
   return (
     <div className={styles.wrapper}>
+      <HotelSelectionHeader hotel={hotel.data.attributes} />
+
       <div className={styles.top}>
         <div>
           <CheckCircleIcon color={selection ? "green" : "pale"} />

constants/routes/hotelReservation.js

@@ -18,6 +18,46 @@ export const selectHotel = {
   de: `${hotelReservation.de}/select-hotel`,
 }
 
+// TODO: Translate paths
+export const selectBed = {
+  en: `${hotelReservation.en}/select-bed`,
+  sv: `${hotelReservation.sv}/select-bed`,
+  no: `${hotelReservation.no}/select-bed`,
+  fi: `${hotelReservation.fi}/select-bed`,
+  da: `${hotelReservation.da}/select-bed`,
+  de: `${hotelReservation.de}/select-bed`,
+}
+
+// TODO: Translate paths
+export const breakfast = {
+  en: `${hotelReservation.en}/breakfast`,
+  sv: `${hotelReservation.sv}/breakfast`,
+  no: `${hotelReservation.no}/breakfast`,
+  fi: `${hotelReservation.fi}/breakfast`,
+  da: `${hotelReservation.da}/breakfast`,
+  de: `${hotelReservation.de}/breakfast`,
+}
+
+// TODO: Translate paths
+export const details = {
+  en: `${hotelReservation.en}/details`,
+  sv: `${hotelReservation.sv}/details`,
+  no: `${hotelReservation.no}/details`,
+  fi: `${hotelReservation.fi}/details`,
+  da: `${hotelReservation.da}/details`,
+  de: `${hotelReservation.de}/details`,
+}
+
+// TODO: Translate paths
+export const payments = {
+  en: `${hotelReservation.en}/payment`,
+  sv: `${hotelReservation.sv}/payment`,
+  no: `${hotelReservation.no}/payment`,
+  fi: `${hotelReservation.fi}/payment`,
+  da: `${hotelReservation.da}/payment`,
+  de: `${hotelReservation.de}/payment`,
+}
+
 // TODO: Translate paths
 export const selectHotelMap = {
   en: `${selectHotel.en}/map`,
@@ -48,4 +88,11 @@ export const bookingConfirmation = {
   de: `${hotelReservation.de}/buchungsbesttigung`,
 }
 
-export const bookingFlow = [...Object.values(hotelReservation)]
+export const bookingFlow = [
+  ...Object.values(selectHotel),
+  ...Object.values(selectBed),
+  ...Object.values(breakfast),
+  ...Object.values(details),
+  ...Object.values(payments),
+  ...Object.values(selectHotelMap),
+]

middlewares/bookingFlow.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from "next/server"
 
-import { hotelReservation } from "@/constants/routes/hotelReservation"
+import { bookingFlow } from "@/constants/routes/hotelReservation"
 
 import { resolve as resolveEntry } from "@/utils/entry"
 import { findLang } from "@/utils/languages"
@@ -35,6 +35,5 @@ export const middleware: NextMiddleware = async (request) => {
 }
 
 export const matcher: MiddlewareMatcher = (request) => {
-  const lang = findLang(request.nextUrl.pathname)!
-  return request.nextUrl.pathname.startsWith(hotelReservation[lang])
+  return bookingFlow.includes(request.nextUrl.pathname)
 }