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/HotelPage/SidePeeks/Amenities/AccordionAmenities/Breakfast/index.tsx
+++ b/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"

--- a/components/ContentType/HotelPage/SidePeeks/OpeningHours/index.tsx
+++ b/components/ContentType/HotelPage/SidePeeks/OpeningHours/index.tsx
@@ -1,115 +0,0 @@
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import { getIntl } from "@/i18n"
-
-import styles from "./openingHours.module.css"
-
-import type { OpeningHoursProps } from "@/types/components/hotelPage/sidepeek/openingHours"
-
-export default async function OpeningHours({
-  openingHours,
-  alternateOpeningHours,
-  heading,
-  type = "default",
-}: OpeningHoursProps) {
-  const intl = await getIntl()
-
-  const closedMsg = intl.formatMessage({ id: "Closed" })
-  const alwaysOpenMsg = intl.formatMessage({ id: "Always open" })
-
-  // In order
-  const weekdayDefinitions = [
-    {
-      key: "monday",
-      label: intl.formatMessage({ id: "monday" }),
-    },
-    {
-      key: "tuesday",
-      label: intl.formatMessage({ id: "tuesday" }),
-    },
-    {
-      key: "wednesday",
-      label: intl.formatMessage({ id: "wednesday" }),
-    },
-    {
-      key: "thursday",
-      label: intl.formatMessage({ id: "thursday" }),
-    },
-    {
-      key: "friday",
-      label: intl.formatMessage({ id: "friday" }),
-    },
-    {
-      key: "saturday",
-      label: intl.formatMessage({ id: "saturday" }),
-    },
-    {
-      key: "sunday",
-      label: intl.formatMessage({ id: "sunday" }),
-    },
-  ] as const
-
-  const groupedOpeningHours: string[] = []
-
-  let rangeWeekdays: string[] = []
-  let rangeValue = ""
-  for (let i = 0, n = weekdayDefinitions.length; i < n; ++i) {
-    const weekdayDefinition = weekdayDefinitions[i]
-    const weekday = openingHours[weekdayDefinition.key]
-    const label = weekdayDefinition.label
-    if (weekday) {
-      let newValue = null
-
-      if (weekday.alwaysOpen) {
-        newValue = alwaysOpenMsg
-      } else if (weekday.isClosed) {
-        newValue = closedMsg
-      } else if (weekday.openingTime && weekday.closingTime) {
-        newValue = `${weekday.openingTime}-${weekday.closingTime}`
-      }
-
-      if (newValue !== null) {
-        if (rangeValue === newValue) {
-          if (rangeWeekdays.length > 1) {
-            rangeWeekdays.splice(-1, 1, label) // Replace last element
-          } else {
-            rangeWeekdays.push(label)
-          }
-        } else {
-          if (rangeValue) {
-            groupedOpeningHours.push(
-              `${rangeWeekdays.join("-")}: ${rangeValue}`
-            )
-          }
-          rangeValue = newValue
-          rangeWeekdays = [label]
-        }
-      }
-
-      if (rangeValue && i === n - 1) {
-        // Flush everything at the end
-        groupedOpeningHours.push(`${rangeWeekdays.join("-")}: ${rangeValue}`)
-      }
-    }
-  }
-
-  return (
-    <div className={type === "default" ? styles.wrapper : ""}>
-      <Body textTransform="bold" asChild>
-        <h5>{heading ?? openingHours.name}</h5>
-      </Body>
-      {groupedOpeningHours.map((groupedOpeningHour) => {
-        return (
-          <Body color="uiTextHighContrast" key={groupedOpeningHour}>
-            {groupedOpeningHour}
-          </Body>
-        )
-      })}
-      {alternateOpeningHours?.name ? (
-        <Caption color="uiTextMediumContrast">
-          {alternateOpeningHours.name}
-        </Caption>
-      ) : null}
-    </div>
-  )
-}
--- a/components/ContentType/HotelPage/SidePeeks/OpeningHours/openingHours.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/OpeningHours/openingHours.module.css
@@ -1,4 +0,0 @@
-.wrapper {
-  display: grid;
-  gap: var(--Spacing-x-half);
-}
--- a/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx
+++ b/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 ? (
-            <ButtonLink fullWidth theme="base" intent="secondary" href={ctaUrl}>
-              {intl.formatMessage({ id: "Discover {name}" }, { name })}
+          {restaurantPage ? (
+            <ButtonLink
+              fullWidth
+              theme="base"
+              intent="secondary"
+              href={`/${restaurant.nameInUrl}`}
+              appendToCurrentPath
+            >
+              {intl.formatMessage({ id: "Discover {name}" }, { name: name })}
            </ButtonLink>
          ) : null}
        </div>