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

import { Typography } from "@scandic-hotels/design-system/Typography"

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 : ""}>
      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
        <h5>{heading ?? openingHours.name}</h5>
      </Typography>
      {groupedOpeningHours.map((groupedOpeningHour) => {
        return (
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.text}
            key={groupedOpeningHour}
          >
            <p>{groupedOpeningHour}</p>
          </Typography>
        )
      })}
      {alternateOpeningHours?.name ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.caption}
        >
          <p>{alternateOpeningHours.name}</p>
        </Typography>
      ) : null}
    </div>
  )
}