diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/index.tsx new file mode 100644 index 000000000..e7bfdd136 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/index.tsx @@ -0,0 +1,95 @@ +import { Typography } from "@scandic-hotels/design-system/Typography" + +import { getIntl } from "@/i18n" + +import styles from "./openingHours.module.css" + +import { + ExternalGymDetails, + HealthFacilitiesEnum, + OpeningHoursType, +} from "@/types/components/hotelPage/facilities" +import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility" + +interface OpeningHoursType extends FacilityProps { + showTitle?: boolean +} + +export default async function OpeningHours({ + data, + showTitle = true, +}: OpeningHoursType) { + const intl = await getIntl() + + const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary + const weekendOpeningTimes = data.openingDetails.openingHours.weekends + const shortDescription = data.content.texts.descriptions?.short + + const isExternalGym = + data.type === HealthFacilitiesEnum.Gym && + data.details.find((d) => d.name === ExternalGymDetails.ExternalGym) + ?.value === "True" + + const showOpeningHours = + data.openingDetails.openingHoursType !== OpeningHoursType.SetFreeText && + !isExternalGym + + return ( + <> + {shortDescription ? ( + +

{shortDescription}

+
+ ) : null} + {showOpeningHours ? ( +
+ {showTitle ? ( + +

+ {intl.formatMessage({ + defaultMessage: "Opening hours", + })} +

+
+ ) : null} + +
+

+ {ordinaryOpeningTimes.alwaysOpen + ? intl.formatMessage({ + defaultMessage: "Monday–Friday: Always open", + }) + : intl.formatMessage( + { + defaultMessage: + "Monday–Friday: {openingTime}–{closingTime}", + }, + { + openingTime: ordinaryOpeningTimes.openingTime, + closingTime: ordinaryOpeningTimes.closingTime, + } + )} +

+

+ {weekendOpeningTimes.alwaysOpen + ? intl.formatMessage({ + defaultMessage: "Saturday–Sunday: Always open", + }) + : intl.formatMessage( + { + defaultMessage: + "Saturday–Sunday: {openingTime}–{closingTime}", + }, + { + openingTime: weekendOpeningTimes.openingTime, + closingTime: weekendOpeningTimes.closingTime, + } + )} +

+
+
+
+ ) : null} + + ) +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/openingHours.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/openingHours.module.css new file mode 100644 index 000000000..235593818 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours/openingHours.module.css @@ -0,0 +1,11 @@ +.openingHoursContainer { + display: grid; + gap: var(--Space-x15); +} + +.openingHours { + display: grid; + padding: var(--Space-x2) var(--Space-x3); + border-radius: var(--Corner-radius-md); + background: var(--Surface-Secondary-Default); +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css index d08961b0b..1c8ac04da 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/facility.module.css @@ -1,27 +1,15 @@ .content { display: flex; flex-direction: column; - gap: var(--Spacing-x2); + gap: var(--Space-x2); } .information { display: flex; flex-direction: column; - gap: var(--Spacing-x-one-and-half); -} - -.openingHoursContainer { - display: grid; gap: var(--Space-x15); } -.openingHours { - display: grid; - padding: var(--Space-x2) var(--Space-x3); - border-radius: var(--Corner-radius-md); - background: var(--Surface-Secondary-Default); -} - .title { color: var(--Text-Interactive-Default); } diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx index e8c90a9ac..441bab689 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/index.tsx @@ -4,35 +4,22 @@ import { getIntl } from "@/i18n" import { translateWellnessType } from "../../../utils" import SidePeekImages from "../../Images" +import OpeningHours from "./OpeningHours" import { translateWellnessDetails } from "./utils" import styles from "./facility.module.css" -import { - ExternalGymDetails, - HealthFacilitiesEnum, - OpeningHoursType, -} from "@/types/components/hotelPage/facilities" import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility" export default async function Facility({ data }: FacilityProps) { const intl = await getIntl() const image = data.content.images[0] - const ordinaryOpeningTimes = data.openingDetails.openingHours.ordinary - const weekendOpeningTimes = data.openingDetails.openingHours.weekends - const shortDescription = data.content.texts.descriptions?.short - const isExternalGym = - data.type === HealthFacilitiesEnum.Gym && - data.details.find((d) => d.name === ExternalGymDetails.ExternalGym) - ?.value === "True" const details = await translateWellnessDetails({ details: data.details, type: data.type, }) - const showOpeningHours = - data.openingDetails.openingHoursType !== OpeningHoursType.SetFreeText && - !isExternalGym + return (
{image ? : null} @@ -49,58 +36,7 @@ export default async function Facility({ data }: FacilityProps) { )} - {shortDescription ? ( - -

{shortDescription}

-
- ) : null} - {showOpeningHours ? ( -
- -

- {intl.formatMessage({ - defaultMessage: "Opening hours", - })} -

-
- -
-

- {ordinaryOpeningTimes.alwaysOpen - ? intl.formatMessage({ - defaultMessage: "Monday–Friday: Always open", - }) - : intl.formatMessage( - { - defaultMessage: - "Monday–Friday: {openingTime}–{closingTime}", - }, - { - openingTime: ordinaryOpeningTimes.openingTime, - closingTime: ordinaryOpeningTimes.closingTime, - } - )} -

-

- {weekendOpeningTimes.alwaysOpen - ? intl.formatMessage({ - defaultMessage: "Saturday–Sunday: Always open", - }) - : intl.formatMessage( - { - defaultMessage: - "Saturday–Sunday: {openingTime}–{closingTime}", - }, - { - openingTime: weekendOpeningTimes.openingTime, - closingTime: weekendOpeningTimes.closingTime, - } - )} -

-
-
-
- ) : null} +
) diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx index 9cf462844..16daa5765 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/WellnessSidebar.tsx @@ -3,6 +3,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography" import Link from "@/components/TempDesignSystem/Link" import { getIntl } from "@/i18n" +import OpeningHours from "../../HotelPage/SidePeeks/WellnessAndExercise/Facility/OpeningHours" import { translateWellnessType } from "../../HotelPage/utils" import styles from "./sidebar.module.css" @@ -34,58 +35,12 @@ export default async function WellnessSidebar({ {healthFacilities.map((facility) => ( -
+

{translateWellnessType(facility.type, intl)}

- -
-

- {facility.openingDetails.openingHours.ordinary.alwaysOpen - ? intl.formatMessage({ - defaultMessage: "Monday–Friday: Always open", - }) - : intl.formatMessage( - { - defaultMessage: - "Monday–Friday: {openingTime}–{closingTime}", - }, - { - openingTime: - facility.openingDetails.openingHours.ordinary - .openingTime, - closingTime: - facility.openingDetails.openingHours.ordinary - .closingTime, - } - )} -

-

- {facility.openingDetails.openingHours.weekends.alwaysOpen - ? intl.formatMessage({ - defaultMessage: "Saturday–Sunday: Always open", - }) - : intl.formatMessage( - { - defaultMessage: - "Saturday–Sunday: {openingTime}–{closingTime}", - }, - { - openingTime: - facility.openingDetails.openingHours.weekends - .openingTime, - closingTime: - facility.openingDetails.openingHours.weekends - .closingTime, - } - )} -

-
-
+
))}
diff --git a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css index e0049eb43..5d972a6b1 100644 --- a/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css +++ b/apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/sidebar.module.css @@ -1,3 +1,8 @@ +.facility { + display: grid; + gap: var(--Space-x15); +} + .content { display: grid; gap: var(--Space-x15); @@ -18,10 +23,6 @@ color: var(--Text-Heading); } -.text { - color: var(--Text-Default); -} - @media screen and (max-width: 1366px) { .buttonContainer { display: none;