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

Approved-by: Matilda Landström

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

@@ -0,0 +1,56 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getIntl } from "@/i18n"
+
+import { getGroupedOpeningHours } from "../utils"
+
+import styles from "../openingHours.module.css"
+
+import type { RestaurantOpeningHours } from "@/types/hotel"
+
+interface AlternateOpeningHoursProps {
+  alternateOpeningHours: RestaurantOpeningHours
+}
+
+export default async function AlternateOpeningHours({
+  alternateOpeningHours,
+}: AlternateOpeningHoursProps) {
+  const intl = await getIntl()
+  const groupedAlternateOpeningHours = alternateOpeningHours
+    ? getGroupedOpeningHours(alternateOpeningHours, intl)
+    : null
+
+  // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
+  if (!groupedAlternateOpeningHours?.length) {
+    return (
+      <Typography
+        variant="Body/Supporting text (caption)/smRegular"
+        className={styles.caption}
+      >
+        <p>{alternateOpeningHours.name}</p>
+      </Typography>
+    )
+  }
+
+  return (
+    <>
+      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
+        <h5>
+          {intl.formatMessage(
+            { id: "Alternate opening hours ({name})" },
+            { name: alternateOpeningHours.name }
+          )}
+        </h5>
+      </Typography>
+      {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
+        <Typography
+          variant="Body/Paragraph/mdRegular"
+          className={styles.text}
+          key={groupedOpeningHour}
+        >
+          <p>{groupedOpeningHour}</p>
+        </Typography>
+      ))}
+    </>
+  )
+}