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/OpeningHours/index.tsx
+++ b/components/OpeningHours/index.tsx
@@ -0,0 +1,115 @@
+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/OpeningHours/openingHours.module.css
+++ b/components/OpeningHours/openingHours.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+  display: grid;
+  gap: var(--Spacing-x-half);
+}