feat(SW-1968): Alternate opening hours for restaurants

Approved-by: Matilda Landström

apps/scandic-web/components/OpeningHours/index.tsx

@@ -2,6 +2,9 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getIntl } from "@/i18n"
 
+import AlternateOpeningHours from "./AlternateOpeningHours"
+import { getGroupedOpeningHours } from "./utils"
+
 import styles from "./openingHours.module.css"
 
 import type { OpeningHoursProps } from "@/types/components/hotelPage/sidepeek/openingHours"
@@ -14,84 +17,7 @@ export default async function OpeningHours({
 }: 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}`)
-      }
-    }
-  }
+  const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl)
 
   return (
     <div className={type === "default" ? styles.wrapper : ""}>
@@ -109,13 +35,8 @@ export default async function OpeningHours({
           </Typography>
         )
       })}
-      {alternateOpeningHours?.name ? (
-        <Typography
-          variant="Body/Supporting text (caption)/smRegular"
-          className={styles.caption}
-        >
-          <p>{alternateOpeningHours.name}</p>
-        </Typography>
+      {alternateOpeningHours ? (
+        <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
       ) : null}
     </div>
   )