e0996b3464
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
116 lines
3.1 KiB
TypeScript
116 lines
3.1 KiB
TypeScript
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>
|
|
)
|
|
}
|