Merged in feat/SW-1064-restaurant-and-bar-subpage (pull request #1299)

feat/SW-1064 restaurant and bar subpage * feat(SW-1064): add appendToPath to buttonlink * feat(SW-1064): add sidebar template * feat(SW-1064): render pages from nameInUrl * feat(SW-1064): add content to restaurant sidebar * feat(SW-1064): change icon size * feat(SW-1064): move opening hours component * feat(SW-1064): update switch statement * feat(SW-1064): fix typo * feat(SW-1064): rebase * feat(SW-1064): remove accidentally added file * feat(SW-1064): undefined check for restaurant subpage Approved-by: Erik Tiekstra
2025-02-11 12:05:49 +00:00
parent ff820d1f31
commit e0996b3464
18 changed files with 186 additions and 18 deletions
--- a/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx
+++ b/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/RestaurantSidebar.tsx
@@ -0,0 +1,93 @@
+import { OpenInNewSmallIcon } from "@/components/Icons"
+import OpeningHours from "@/components/OpeningHours"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./restaurantSiderbar.module.css"
+
+import type { Hotel, Restaurant } from "@/types/hotel"
+
+interface RestaurantSidebarProps {
+  hotel: Hotel
+  restaurant: Restaurant
+}
+
+export default async function RestaurantSidebar({
+  hotel,
+  restaurant,
+}: RestaurantSidebarProps) {
+  const intl = await getIntl()
+
+  const { address } = hotel
+  const { openingDetails, phoneNumber, email, bookTableUrl } = restaurant
+
+  return (
+    <aside className={styles.sidebar}>
+      <div className={styles.content}>
+        <Title level="h3" as="h4">
+          {intl.formatMessage({ id: "Opening hours" })}
+        </Title>
+        {openingDetails.map((details) => (
+          <OpeningHours
+            key={details.openingHours.name}
+            openingHours={details.openingHours}
+            alternateOpeningHours={details.alternateOpeningHours}
+            heading={details.openingHours.name}
+          />
+        ))}
+      </div>
+      {bookTableUrl && (
+        <Button intent="primary" theme="base" asChild>
+          <Link href={bookTableUrl}>
+            {intl.formatMessage({ id: "Book a table online" })}
+          </Link>
+        </Button>
+      )}
+      <div className={styles.content}>
+        <Title level="h3" as="h4">
+          {intl.formatMessage({ id: "Menus" })}
+        </Title>
+        <ul className={styles.menuList}>
+          {restaurant.menus.map(({ name, url }) => (
+            <li key={name}>
+              <Link
+                href={url}
+                color="baseTextMediumContrast"
+                textDecoration="underline"
+                variant="icon"
+              >
+                {name}
+                <OpenInNewSmallIcon />
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className={styles.content}>
+        <Title level="h3" as="h4">
+          {intl.formatMessage({ id: "Address" })}
+        </Title>
+        <div>
+          <Body color="uiTextHighContrast">{address.streetAddress}</Body>
+          <Body color="uiTextHighContrast">{`${address.zipCode} ${address.city}`}</Body>
+        </div>
+      </div>
+      {(phoneNumber || email) && (
+        <div className={styles.content}>
+          <Title level="h3" as="h4">
+            {intl.formatMessage({ id: "Contact us" })}
+          </Title>
+          <div>
+            {phoneNumber && (
+              <Body color="uiTextHighContrast">{phoneNumber}</Body>
+            )}
+            {email && <Body color="uiTextHighContrast">{email}</Body>}
+          </div>
+        </div>
+      )}
+    </aside>
+  )
+}
--- a/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css
+++ b/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar/restaurantSiderbar.module.css
@@ -0,0 +1,15 @@
+.sidebar {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.menuList {
+  display: grid;
+  gap: var(--Spacing-x-half);
+  list-style-type: none;
+}
--- a/components/ContentType/HotelSubpage/Sidebar/index.tsx
+++ b/components/ContentType/HotelSubpage/Sidebar/index.tsx
@@ -1,19 +1,30 @@
+import RestaurantSidebar from "./RestaurantSidebar/RestaurantSidebar"
 import ParkingSidebar from "./ParkingSidebar"
 import WellnessSidebar from "./WellnessSidebar"

-import type { AdditionalData, Hotel } from "@/types/hotel"
+import type { AdditionalData, Hotel, Restaurant } from "@/types/hotel"

 interface HotelSubpageSidebarProps {
  subpage: string
  hotel: Hotel
  additionalData: AdditionalData
+  restaurants: Restaurant[]
 }

 export default function HotelSubpageSidebar({
  subpage,
  hotel,
  additionalData,
+  restaurants,
 }: HotelSubpageSidebarProps) {
+  const restaurantSubPage = restaurants.find(
+    (restaurant) => restaurant.nameInUrl === subpage
+  )
+
+  if (restaurantSubPage) {
+    return <RestaurantSidebar hotel={hotel} restaurant={restaurantSubPage} />
+  }
+
  switch (subpage) {
    case additionalData.hotelParking.nameInUrl:
      return <ParkingSidebar hotel={hotel} />
--- a/components/ContentType/HotelSubpage/index.tsx
+++ b/components/ContentType/HotelSubpage/index.tsx
@@ -43,6 +43,8 @@ export default async function HotelSubpage({
    notFound()
  }

+  const { hotel, restaurants, additionalData } = hotelData
+
  return (
    <>
      <section className={styles.hotelSubpage}>
@@ -73,15 +75,16 @@ export default async function HotelSubpage({

            <HotelSubpageAdditionalContent
              subpage={subpage}
-              hotel={hotelData.hotel}
-              additionalData={hotelData.additionalData}
+              hotel={hotel}
+              additionalData={additionalData}
            />
          </main>

          <HotelSubpageSidebar
            subpage={subpage}
-            hotel={hotelData.hotel}
-            additionalData={hotelData.additionalData}
+            hotel={hotel}
+            additionalData={additionalData}
+            restaurants={restaurants}
          />
        </div>
      </section>
--- a/components/ContentType/HotelSubpage/utils.ts
+++ b/components/ContentType/HotelSubpage/utils.ts
@@ -9,6 +9,26 @@ export function getSubpageData(
 ) {
  const additionalData = hotelData.additionalData
  const hotel = hotelData.hotel
+  const restaurants = hotelData.restaurants
+  const restaurantSubPage = restaurants.find(
+    (restaurant) => restaurant.nameInUrl === subpage
+  )
+
+  if (restaurantSubPage) {
+    const restaurantImage = restaurantSubPage.content.images[0]
+
+    return {
+      mainBody: restaurantSubPage.mainBody,
+      elevatorPitch: restaurantSubPage.elevatorPitch,
+      heading: restaurantSubPage.name,
+      heroImage: restaurantImage
+        ? {
+            src: restaurantSubPage.content.images[0].imageSizes.medium,
+            alt: restaurantSubPage.content.images[0].metaData.altText || "",
+          }
+        : null,
+    }
+  }

  switch (subpage) {
    case additionalData.hotelParking.nameInUrl: