bda22f39ad
feat/SW-1740 final design subpages * feat(SW-1740): update design for subpages * feat(SW-1740): add padding * feat(SW-1740): use not pseudo class Approved-by: Erik Tiekstra Approved-by: Matilda Landström
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>
|
|
)
|
|
}
|