Merged in feat/SW-1296-hotel-subpages (pull request #1233)

feat(SW-1296): added Subpage for hotel pages and its routing * feat(SW-1296): added Subpage for hotel pages and its routing Approved-by: Fredrik Thorsson
2025-02-03 10:58:53 +00:00
parent b2a3fca54a
commit dd4a2d8120
9 changed files with 252 additions and 24 deletions
@@ -0,0 +1,75 @@
+.hotelSubpage {
+  padding-bottom: var(--Spacing-x9);
+}
+
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x4) 0;
+}
+
+.heroContainer {
+  width: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x2);
+}
+
+.heroContainer img {
+  max-width: var(--max-width-content);
+  margin: 0 auto;
+  display: block;
+}
+
+.contentContainer {
+  display: grid;
+  grid-template-areas:
+    "main"
+    "sidebar";
+  gap: var(--Spacing-x4);
+  align-items: start;
+  width: 100%;
+  padding: var(--Spacing-x4) var(--Spacing-x2) 0;
+}
+
+.mainContent {
+  grid-area: main;
+  display: grid;
+  width: 100%;
+  gap: var(--Spacing-x6);
+  margin: 0 auto;
+  max-width: var(--max-width-content);
+}
+
+@media (min-width: 768px) {
+  .contentContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .heroContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
+}
+
+@media (min-width: 1367px) {
+  .heroContainer {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .contentContainer {
+    grid-template-areas: "main sidebar";
+    grid-template-columns: var(--max-width-text-block) 1fr;
+    gap: var(--Spacing-x9);
+    padding: var(--Spacing-x4) 0 0;
+    max-width: var(--max-width-content);
+    margin: 0 auto;
+  }
+
+  .mainContent {
+    gap: var(--Spacing-x9);
+    padding: 0;
+    max-width: none;
+    margin: 0;
+  }
+}
@@ -0,0 +1,61 @@
+import { notFound } from "next/navigation"
+
+import { getHotel, getHotelPage } from "@/lib/trpc/memoizedRequests"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getLang } from "@/i18n/serverContext"
+
+import { getSubpageData } from "./utils"
+
+import styles from "./hotelSubpage.module.css"
+
+interface HotelSubpageProps {
+  hotelId: string
+  subpage: string
+}
+
+export default async function HotelSubpage({
+  hotelId,
+  subpage,
+}: HotelSubpageProps) {
+  const lang = getLang()
+  const [hotelPageData, hotel] = await Promise.all([
+    getHotelPage(),
+    getHotel({ hotelId, language: lang }),
+  ])
+
+  if (!hotel?.hotel || !hotelPageData) {
+    notFound()
+  }
+  const pageData = getSubpageData(subpage, lang, hotel.additionalData)
+  if (!pageData) {
+    notFound()
+  }
+
+  const hotelData = hotel.hotel
+
+  return (
+    <>
+      <section className={styles.hotelSubpage}>
+        <header className={styles.header}>
+          {/* breadcrumbs */}
+          <div className={styles.heroContainer}>{/* hero image */}</div>
+        </header>
+
+        <div className={styles.contentContainer}>
+          <main className={styles.mainContent}>
+            {/* Main content */}
+            <Title level="h1">
+              {subpage} for {hotelData.name}
+            </Title>
+            <Body>{pageData.elevatorPitch}</Body>
+          </main>
+
+          {/* Sidebar */}
+        </div>
+      </section>
+      {/* Tracking */}
+    </>
+  )
+}
@@ -0,0 +1,17 @@
+import { parkingSubPage } from "@/constants/routes/hotelSubpages"
+
+import type { HotelData } from "@/types/hotel"
+import type { Lang } from "@/constants/languages"
+
+export function getSubpageData(
+  subpage: string,
+  lang: Lang,
+  additionalData: HotelData["additionalData"]
+) {
+  switch (subpage) {
+    case parkingSubPage[lang]:
+      return additionalData.hotelParking
+    default:
+      return null
+  }
+}