Merged in feat/sw-3242-move-opening-hours-to-design-system (pull request #2629)

feat(SW-32429: Move OpeningHours to design-system

* Move OpeningHours to design-system


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-08-13 07:05:23 +00:00
parent 124f743df7
commit e92c0465cc
10 changed files with 225 additions and 206 deletions

View File

@@ -1,8 +1,8 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
import { Typography } from "@scandic-hotels/design-system/Typography"
import OpeningHours from "@/components/OpeningHours"
import { getIntl } from "@/i18n"
import { appendSlugToPathname } from "@/utils/appendSlugToPathname"

View File

@@ -1,10 +1,10 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@scandic-hotels/design-system/Link"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
import { Typography } from "@scandic-hotels/design-system/Typography"
import LocalCallCharges from "@/components/LocalCallCharges"
import OpeningHours from "@/components/OpeningHours"
import { getIntl } from "@/i18n"
import styles from "./sidebar.module.css"

View File

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
import { isDefined } from "@scandic-hotels/common/utils/isDefined"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
import OpeningHours from "@/components/OpeningHours"
import { trackAccordionClick } from "@/utils/tracking"
import styles from "./sidePeekAccordion.module.css"

View File

@@ -1,18 +1,17 @@
"use client"
'use client'
import { useIntl } from "react-intl"
import { useIntl } from 'react-intl'
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Divider } from '@scandic-hotels/design-system/Divider'
import { Typography } from '@scandic-hotels/design-system/Typography'
import { getGroupedOpeningHours } from "../utils"
import { getGroupedOpeningHours } from '../utils'
import styles from "../openingHours.module.css"
import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
import styles from '../openingHours.module.css'
import { OpeningHours } from '../openingHoursTypes'
interface AlternateOpeningHoursProps {
alternateOpeningHours: RestaurantOpeningHours
alternateOpeningHours: OpeningHours
}
export default function AlternateOpeningHours({
@@ -39,7 +38,7 @@ export default function AlternateOpeningHours({
<h5 className={styles.heading}>
{intl.formatMessage(
{
defaultMessage: "Alternate opening hours ({name})",
defaultMessage: 'Alternate opening hours ({name})',
},
{ name: alternateOpeningHours.name }
)}

View File

@@ -1,20 +1,19 @@
"use client"
'use client'
import { useIntl } from "react-intl"
import { useIntl } from 'react-intl'
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Divider } from '../Divider'
import { Typography } from '../Typography'
import AlternateOpeningHours from "./AlternateOpeningHours"
import { getGroupedOpeningHours, getTranslatedName } from "./utils"
import AlternateOpeningHours from './AlternateOpeningHours'
import { getGroupedOpeningHours, getTranslatedName } from './utils'
import styles from "./openingHours.module.css"
import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
import styles from './openingHours.module.css'
import type { OpeningHours } from './openingHoursTypes'
interface OpeningHoursProps {
openingHours: RestaurantOpeningHours
alternateOpeningHours?: RestaurantOpeningHours
openingHours: OpeningHours
alternateOpeningHours?: OpeningHours
heading?: string
}

View File

@@ -1,190 +1,190 @@
import { describe, expect, it } from "vitest"
import { describe, expect, it } from 'vitest'
import { getGroupedOpeningHours } from "./utils"
import { getGroupedOpeningHours } from './utils'
import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
import type { IntlShape } from "react-intl"
import type { RestaurantOpeningHours } from '@scandic-hotels/trpc/types/hotel'
import type { IntlShape } from 'react-intl'
// Mock IntlShape for testing
const mockIntl = {
formatMessage: ({ defaultMessage }: { defaultMessage: string }) => {
const messages: Record<string, string> = {
Monday: "Monday",
Tuesday: "Tuesday",
Wednesday: "Wednesday",
Thursday: "Thursday",
Friday: "Friday",
Saturday: "Saturday",
Sunday: "Sunday",
Closed: "Closed",
"Always open": "Always open",
Monday: 'Monday',
Tuesday: 'Tuesday',
Wednesday: 'Wednesday',
Thursday: 'Thursday',
Friday: 'Friday',
Saturday: 'Saturday',
Sunday: 'Sunday',
Closed: 'Closed',
'Always open': 'Always open',
}
return messages[defaultMessage] || defaultMessage
},
} as IntlShape
describe("getGroupedOpeningHours", () => {
it("should group all days as closed", () => {
describe('getGroupedOpeningHours', () => {
it('should group all days as closed', () => {
const allDaysClosed: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 1,
},
tuesday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 2,
},
wednesday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 3,
},
thursday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 4,
},
friday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 5,
},
saturday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 6,
},
sunday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 7,
},
}
const result = getGroupedOpeningHours(allDaysClosed, mockIntl)
expect(result).toEqual(["Monday-Sunday: Closed"])
expect(result).toEqual(['Monday-Sunday: Closed'])
})
it("should group all days with same opening hours", () => {
it('should group all days with same opening hours', () => {
const allDaysSameHours: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 1,
},
tuesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 2,
},
wednesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
},
thursday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 4,
},
friday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 5,
},
saturday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 6,
},
sunday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 7,
},
}
const result = getGroupedOpeningHours(allDaysSameHours, mockIntl)
expect(result).toEqual(["Monday-Sunday: 09:00-17:00"])
expect(result).toEqual(['Monday-Sunday: 09:00-17:00'])
})
it("should handle mixed opening hours", () => {
it('should handle mixed opening hours', () => {
const mixedOpeningHours: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 1,
},
tuesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 2,
},
wednesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
},
thursday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 4,
},
friday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 5,
},
saturday: {
openingTime: "10:00",
closingTime: "15:00",
openingTime: '10:00',
closingTime: '15:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 6,
@@ -192,55 +192,55 @@ describe("getGroupedOpeningHours", () => {
sunday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 7,
},
}
const result = getGroupedOpeningHours(mixedOpeningHours, mockIntl)
expect(result).toEqual([
"Monday-Friday: 09:00-17:00",
"Saturday: 10:00-15:00",
"Sunday: Closed",
'Monday-Friday: 09:00-17:00',
'Saturday: 10:00-15:00',
'Sunday: Closed',
])
})
it("should handle always open days", () => {
it('should handle always open days', () => {
const someAlwaysOpen: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
alwaysOpen: true,
isClosed: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 1,
},
tuesday: {
alwaysOpen: true,
isClosed: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 2,
},
wednesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
},
thursday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 4,
},
friday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 5,
@@ -248,48 +248,48 @@ describe("getGroupedOpeningHours", () => {
saturday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 6,
},
sunday: {
isClosed: true,
alwaysOpen: false,
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
sortOrder: 7,
},
}
const result = getGroupedOpeningHours(someAlwaysOpen, mockIntl)
expect(result).toEqual([
"Monday-Tuesday: Always open",
"Wednesday-Friday: 09:00-17:00",
"Saturday-Sunday: Closed",
'Monday-Tuesday: Always open',
'Wednesday-Friday: 09:00-17:00',
'Saturday-Sunday: Closed',
])
})
it("should handle missing days", () => {
it('should handle missing days', () => {
const missingDays: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 1,
},
wednesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
},
friday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 5,
@@ -297,34 +297,34 @@ describe("getGroupedOpeningHours", () => {
}
const result = getGroupedOpeningHours(missingDays, mockIntl)
expect(result).toEqual([
"Monday: 09:00-17:00",
"Wednesday: 09:00-17:00",
"Friday: 09:00-17:00",
'Monday: 09:00-17:00',
'Wednesday: 09:00-17:00',
'Friday: 09:00-17:00',
])
})
it("should not group non-consecutive days with same hours", () => {
it('should not group non-consecutive days with same hours', () => {
const nonConsecutiveSameHours: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 1,
},
tuesday: {
openingTime: "10:00",
closingTime: "18:00",
openingTime: '10:00',
closingTime: '18:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 2,
},
wednesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
@@ -332,34 +332,34 @@ describe("getGroupedOpeningHours", () => {
}
const result = getGroupedOpeningHours(nonConsecutiveSameHours, mockIntl)
expect(result).toEqual([
"Monday: 09:00-17:00",
"Tuesday: 10:00-18:00",
"Wednesday: 09:00-17:00",
'Monday: 09:00-17:00',
'Tuesday: 10:00-18:00',
'Wednesday: 09:00-17:00',
])
})
it("should handle nullable opening/closing times", () => {
it('should handle nullable opening/closing times', () => {
const nullableHours: RestaurantOpeningHours = {
isActive: true,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "",
closingTime: "",
openingTime: '',
closingTime: '',
isClosed: true,
alwaysOpen: false,
sortOrder: 1,
},
tuesday: {
openingTime: "09:00",
closingTime: "",
openingTime: '09:00',
closingTime: '',
isClosed: false,
alwaysOpen: false,
sortOrder: 2,
},
wednesday: {
openingTime: "",
closingTime: "17:00",
openingTime: '',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 3,
@@ -367,27 +367,27 @@ describe("getGroupedOpeningHours", () => {
}
const result = getGroupedOpeningHours(nullableHours, mockIntl)
expect(result).toEqual([
"Monday: Closed",
'Monday: Closed',
// Tuesday and Wednesday won't appear in the result because they have empty string values
// that don't match any of the conditions in the getGroupedOpeningHours function
])
})
it("should handle inactive restaurant hours", () => {
it('should handle inactive restaurant hours', () => {
const inactiveHours: RestaurantOpeningHours = {
isActive: false,
name: "Opening hours",
nameEnglish: "Opening hours",
name: 'Opening hours',
nameEnglish: 'Opening hours',
monday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 1,
},
tuesday: {
openingTime: "09:00",
closingTime: "17:00",
openingTime: '09:00',
closingTime: '17:00',
isClosed: false,
alwaysOpen: false,
sortOrder: 2,
@@ -396,6 +396,6 @@ describe("getGroupedOpeningHours", () => {
// Even though isActive is false, the function should still process the hours
// as it doesn't check for the isActive flag
const result = getGroupedOpeningHours(inactiveHours, mockIntl)
expect(result).toEqual(["Monday-Tuesday: 09:00-17:00"])
expect(result).toEqual(['Monday-Tuesday: 09:00-17:00'])
})
})

View File

@@ -0,0 +1,20 @@
type OpeningHoursDetails = {
alwaysOpen: boolean
closingTime: string
isClosed: boolean
openingTime: string
sortOrder: number
}
export type OpeningHours = {
name: string
isActive: boolean
nameEnglish: string
monday?: OpeningHoursDetails
tuesday?: OpeningHoursDetails
wednesday?: OpeningHoursDetails
thursday?: OpeningHoursDetails
friday?: OpeningHoursDetails
saturday?: OpeningHoursDetails
sunday?: OpeningHoursDetails
}

View File

@@ -1,61 +1,61 @@
import { logger } from "@scandic-hotels/common/logger"
import { logger } from '@scandic-hotels/common/logger'
import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
import type { IntlShape } from "react-intl"
import type { IntlShape } from 'react-intl'
import { OpeningHours } from './openingHoursTypes'
export function getGroupedOpeningHours(
openingHours: RestaurantOpeningHours,
openingHours: OpeningHours,
intl: IntlShape
): string[] {
const closedMsg = intl.formatMessage({
defaultMessage: "Closed",
defaultMessage: 'Closed',
})
const alwaysOpenMsg = intl.formatMessage({
defaultMessage: "Always open",
defaultMessage: 'Always open',
})
// In order
const weekdayDefinitions = [
{
key: "monday",
key: 'monday',
label: intl.formatMessage({
defaultMessage: "Monday",
defaultMessage: 'Monday',
}),
},
{
key: "tuesday",
key: 'tuesday',
label: intl.formatMessage({
defaultMessage: "Tuesday",
defaultMessage: 'Tuesday',
}),
},
{
key: "wednesday",
key: 'wednesday',
label: intl.formatMessage({
defaultMessage: "Wednesday",
defaultMessage: 'Wednesday',
}),
},
{
key: "thursday",
key: 'thursday',
label: intl.formatMessage({
defaultMessage: "Thursday",
defaultMessage: 'Thursday',
}),
},
{
key: "friday",
key: 'friday',
label: intl.formatMessage({
defaultMessage: "Friday",
defaultMessage: 'Friday',
}),
},
{
key: "saturday",
key: 'saturday',
label: intl.formatMessage({
defaultMessage: "Saturday",
defaultMessage: 'Saturday',
}),
},
{
key: "sunday",
key: 'sunday',
label: intl.formatMessage({
defaultMessage: "Sunday",
defaultMessage: 'Sunday',
}),
},
] as const
@@ -63,7 +63,7 @@ export function getGroupedOpeningHours(
const groupedOpeningHours: string[] = []
let rangeWeekdays: string[] = []
let rangeValue = ""
let rangeValue = ''
for (let i = 0, n = weekdayDefinitions.length; i < n; ++i) {
const weekdayDefinition = weekdayDefinitions[i]
@@ -91,7 +91,7 @@ export function getGroupedOpeningHours(
} else {
if (rangeValue) {
groupedOpeningHours.push(
`${rangeWeekdays.join("-")}: ${rangeValue}`
`${rangeWeekdays.join('-')}: ${rangeValue}`
)
}
rangeValue = newValue
@@ -100,11 +100,11 @@ export function getGroupedOpeningHours(
}
if (rangeValue && i === n - 1) {
// Flush everything at the end
groupedOpeningHours.push(`${rangeWeekdays.join("-")}: ${rangeValue}`)
groupedOpeningHours.push(`${rangeWeekdays.join('-')}: ${rangeValue}`)
}
} else if (rangeValue) {
groupedOpeningHours.push(`${rangeWeekdays.join("-")}: ${rangeValue}`)
rangeValue = ""
groupedOpeningHours.push(`${rangeWeekdays.join('-')}: ${rangeValue}`)
rangeValue = ''
rangeWeekdays = []
}
}
@@ -113,59 +113,59 @@ export function getGroupedOpeningHours(
export function getTranslatedName(name: string, intl: IntlShape) {
switch (name) {
case "Breakfast":
case 'Breakfast':
return intl.formatMessage({
defaultMessage: "Breakfast",
defaultMessage: 'Breakfast',
})
case "Brunch":
case 'Brunch':
return intl.formatMessage({
defaultMessage: "Brunch",
defaultMessage: 'Brunch',
})
case "After Work":
case 'After Work':
return intl.formatMessage({
defaultMessage: "After Work",
defaultMessage: 'After Work',
})
case "Cafe":
case 'Cafe':
return intl.formatMessage({
defaultMessage: "Cafe",
defaultMessage: 'Cafe',
})
case "Lunch":
case 'Lunch':
return intl.formatMessage({
defaultMessage: "Lunch",
defaultMessage: 'Lunch',
})
case "Dinner":
case 'Dinner':
return intl.formatMessage({
defaultMessage: "Dinner",
defaultMessage: 'Dinner',
})
case "Bar":
case 'Bar':
return intl.formatMessage({
defaultMessage: "Bar",
defaultMessage: 'Bar',
})
case "Snacks & drinks":
case 'Snacks & drinks':
return intl.formatMessage({
defaultMessage: "Snacks & drinks",
defaultMessage: 'Snacks & drinks',
})
case "Takeaway":
case 'Takeaway':
return intl.formatMessage({
defaultMessage: "Takeaway",
defaultMessage: 'Takeaway',
})
case "Changes":
case 'Changes':
return intl.formatMessage({
defaultMessage: "Changes",
defaultMessage: 'Changes',
})
case "Live events":
case 'Live events':
return intl.formatMessage({
defaultMessage: "Live events",
defaultMessage: 'Live events',
})
case "Terrace":
case 'Terrace':
return intl.formatMessage({
defaultMessage: "Terrace",
defaultMessage: 'Terrace',
})
default:
logger.warn(`Unsupported name given: ${name}`)
return intl.formatMessage({
defaultMessage: "N/A",
defaultMessage: 'N/A',
})
}
}

View File

@@ -31,6 +31,7 @@
"./Label": "./lib/components/Label/index.tsx",
"./Link": "./lib/components/Link/index.tsx",
"./OldDSButton": "./lib/components/OldDSButton/index.tsx",
"./OpeningHours": "./lib/components/OpeningHours/index.tsx",
"./Select": "./lib/components/Select/index.tsx",
"./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
"./SidePeek": "./lib/components/SidePeek/index.tsx",