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

components/ButtonLink/index.tsx

@@ -1,6 +1,8 @@
 "use client"
 
 import NextLink from "next/link"
+import { usePathname } from "next/navigation"
+import { useMemo } from "react"
 
 import Button from "@/components/TempDesignSystem/Button"
 import { trackClick } from "@/utils/tracking"
@@ -14,12 +16,24 @@ export default function ButtonLink({
   trackingId,
   trackingParams,
   onClick = () => {},
+  appendToCurrentPath,
   ...buttonProps
 }: ButtonLinkProps) {
+  const currentPageSlug = usePathname()
+
+  const fullUrl = useMemo(() => {
+    let newPath = href
+    if (appendToCurrentPath) {
+      newPath = `${currentPageSlug}${newPath}`
+    }
+
+    return newPath
+  }, [href, appendToCurrentPath, currentPageSlug])
+
   return (
     <Button {...buttonProps} asChild>
       <NextLink
-        href={href}
+        href={fullUrl}
         target={target}
         onClick={(e) => {
           onClick(e)

components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx

@@ -1,8 +1,7 @@
+import OpeningHours from "@/components/OpeningHours"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
 import { getIntl } from "@/i18n"
 
-import OpeningHours from "../../../OpeningHours"
-
 import type { BreakfastAmenityProps } from "@/types/components/hotelPage/sidepeek/amenities"
 import { IconName } from "@/types/components/icon"
 

components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,13 +1,12 @@
 import ButtonLink from "@/components/ButtonLink"
 import { OpenInNewSmallIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import OpeningHours from "@/components/OpeningHours"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 
-import OpeningHours from "../../OpeningHours"
-
 import styles from "./restaurantBarItem.module.css"
 
 import type { RestaurantBarItemProps } from "@/types/components/hotelPage/sidepeek/restaurantBar"
@@ -16,14 +15,12 @@ export default async function RestaurantBarItem({
   restaurant,
 }: RestaurantBarItemProps) {
   const intl = await getIntl()
-  const { bookTableUrl, name, openingDetails, content, menus } = restaurant
+  const { bookTableUrl, name, openingDetails, content, menus, restaurantPage } =
+    restaurant
   const { images } = restaurant.content
   const visibleImages = restaurant.content.images.slice(0, 2)
   const imageWidth = images.length === 2 ? 240 : 496
 
-  // TODO: Not defined where this should lead.
-  const ctaUrl = ""
-
   return (
     <div className={styles.restaurantBarItem}>
       <div className={styles.stickyHeading}>
@@ -83,7 +80,7 @@ export default async function RestaurantBarItem({
           </ul>
         </div>
       ) : null}
-      {bookTableUrl || ctaUrl ? (
+      {bookTableUrl || restaurantPage ? (
         <div className={styles.ctaWrapper}>
           {bookTableUrl ? (
             <ButtonLink
@@ -98,9 +95,15 @@ export default async function RestaurantBarItem({
               {intl.formatMessage({ id: "Book a table online" })}
             </ButtonLink>
           ) : null}
-          {ctaUrl ? (
+          {restaurantPage ? (
-            <ButtonLink fullWidth theme="base" intent="secondary" href={ctaUrl}>
+            <ButtonLink
-              {intl.formatMessage({ id: "Discover {name}" }, { name })}
+              fullWidth
+              theme="base"
+              intent="secondary"
+              href={`/${restaurant.nameInUrl}`}
+              appendToCurrentPath
+            >
+              {intl.formatMessage({ id: "Discover {name}" }, { name: name })}
             </ButtonLink>
           ) : null}
         </div>

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>
+  )
+}

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;
+}

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} />

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}
+              hotel={hotel}
-              additionalData={hotelData.additionalData}
+              additionalData={additionalData}
             />
           </main>
 
           <HotelSubpageSidebar
             subpage={subpage}
-            hotel={hotelData.hotel}
+            hotel={hotel}
-            additionalData={hotelData.additionalData}
+            additionalData={additionalData}
+            restaurants={restaurants}
           />
         </div>
       </section>

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:

i18n/dictionaries/da.json

@@ -155,6 +155,7 @@
   "Discard unsaved changes?": "Slette ændringer, der ikke er gemt?",
   "Discover": "Opdag",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Opdag {name}",
   "Distance to city center": "Afstand til centrum",
   "Distance to hotel: {distanceInM} m": "Afstand til hotel: {distance} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte morgenbuffet?",

i18n/dictionaries/de.json

@@ -156,6 +156,7 @@
   "Discard unsaved changes?": "Nicht gespeicherte Änderungen verwerfen?",
   "Discover": "Entdecken",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Entdecken Sie {name}",
   "Distance to city center": "Entfernung zum Stadtzentrum",
   "Distance to hotel: {distanceInM} m": "Entfernung zum Hotel: {distance} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Möchten Sie den Tag mit Scandics berühmtem Frühstücksbuffet beginnen?",

i18n/dictionaries/en.json

@@ -158,6 +158,7 @@
   "Discard unsaved changes?": "Discard unsaved changes?",
   "Discover": "Discover",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Discover {name}",
   "Distance to city center": "Distance to city center",
   "Distance to hotel: {distanceInM} m": "Distance to hotel: {distanceInM} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Do you want to start the day with Scandics famous breakfast buffé?",

i18n/dictionaries/fi.json

@@ -155,6 +155,7 @@
   "Discard unsaved changes?": "Hylkäätkö tallentamattomat muutokset?",
   "Discover": "Löydä",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Tutustu {name}",
   "Distance to city center": "Etäisyys kaupungin keskustaan",
   "Distance to hotel: {distanceInM} m": "Etäisyys hotelliin: {distance} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Haluatko aloittaa päiväsi Scandicsin kuuluisalla aamiaisbuffella?",

i18n/dictionaries/no.json

@@ -154,6 +154,7 @@
   "Discard unsaved changes?": "Forkaste endringer som ikke er lagret?",
   "Discover": "Oppdag",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Oppdag {name}",
   "Distance to city center": "Avstand til sentrum",
   "Distance to hotel: {distanceInM} m": "Avstand til hotell: {distance} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vil du starte dagen med Scandics berømte frokostbuffé?",

i18n/dictionaries/sv.json

@@ -154,6 +154,7 @@
   "Discard unsaved changes?": "Vill du ignorera ändringar som inte har sparats?",
   "Discover": "Upptäck",
   "Discover the little extra touches to make your upcoming stay even more unforgettable.": "Discover the little extra touches to make your upcoming stay even more unforgettable.",
+  "Discover {name}": "Upptäck {name}",
   "Distance to city center": "Avstånd till centrum",
   "Distance to hotel: {distanceInM} m": "Avstånd till hotell: {distance} m",
   "Do you want to start the day with Scandics famous breakfast buffé?": "Vill du starta dagen med Scandics berömda frukostbuffé?",

server/routers/hotels/schemas/hotel/include/restaurants.ts

@@ -87,6 +87,9 @@ export const restaurantsSchema = z.object({
     openingDetails: z.array(openingDetailsSchema).default([]),
     phoneNumber: z.string().optional(),
     restaurantPage: z.boolean().default(false),
+    elevatorPitch: z.string().optional(),
+    nameInUrl: z.string().optional(),
+    mainBody: z.string().optional(),
     specialAlerts: specialAlertsSchema,
   }),
   id: z.string(),

types/components/buttonLink.ts

@@ -6,4 +6,5 @@ export type ButtonLinkProps = React.PropsWithChildren &
     href: string
     trackingId?: string
     trackingParams?: Record<string, string>
+    appendToCurrentPath?: boolean
   }