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 ddd96a5f4..5985f1de9 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 @@ -24,3 +24,15 @@ .title { color: var(--Text-Interactive-Default); } + +.heartList { + list-style-type: none; +} + +.heartList > li::before { + content: url("/_static/icons/heart.svg"); + position: relative; + height: 8px; + top: 3px; + margin-right: var(--Space-x1); +} 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 adc83c1fb..868f170aa 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,9 +4,14 @@ import Image from "@/components/Image" import { getIntl } from "@/i18n" import { translateWellnessType } from "../../../utils" +import { translateWellnessDetails } from "./utils" import styles from "./facility.module.css" +import { + ExternalGymDetails, + HealthFacilitiesEnum, +} from "@/types/components/hotelPage/facilities" import type { FacilityProps } from "@/types/components/hotelPage/sidepeek/facility" export default async function Facility({ data }: FacilityProps) { @@ -16,8 +21,14 @@ export default async function Facility({ data }: FacilityProps) { const weekendOpeningTimes = data.openingDetails.openingHours.weekends const shortDescription = data.content.texts.descriptions?.short const isExternalGym = - data.type === "Gym" && - data.details.find((d) => d.name === "ExternalGym")?.value === "True" + data.type === HealthFacilitiesEnum.Gym && + data.details.find((d) => d.name === ExternalGymDetails.ExternalGym) + ?.value === "True" + + const details = await translateWellnessDetails({ + details: data.details, + type: data.type, + }) return (
@@ -34,6 +45,15 @@ export default async function Facility({ data }: FacilityProps) {

{translateWellnessType(data.type, intl)}

+ {details && ( + + + + )} {isExternalGym ? null : (
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/utils.ts b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/utils.ts new file mode 100644 index 000000000..bd5c9b7e6 --- /dev/null +++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/WellnessAndExercise/Facility/utils.ts @@ -0,0 +1,128 @@ +import { getIntl } from "@/i18n" + +import { + ExternalGymDetails, + HealthFacilitiesEnum, + IndoorPoolDetails, + SaunaDetails, +} from "@/types/components/hotelPage/facilities" + +interface WellnessDetails { + details: { + value: string + type: string + name: string + }[] + type: string +} +export async function translateWellnessDetails({ + details, + type, +}: WellnessDetails) { + const intl = await getIntl() + + switch (type) { + case HealthFacilitiesEnum.Sauna: + return details + .map(({ name, value }) => { + switch (name) { + case SaunaDetails.SeparateMenAndWomen: + if (value === "True") { + return intl.formatMessage({ + defaultMessage: "Separate men and women: Yes", + }) + } + return intl.formatMessage({ + defaultMessage: "Separate men and women: No", + }) + } + }) + .filter((d): d is string => !!d) + + case HealthFacilitiesEnum.OutdoorPool: + case HealthFacilitiesEnum.IndoorPool: + return details + .map(({ name, value }) => { + switch (name) { + case IndoorPoolDetails.DepthFrom: + return intl.formatMessage( + { + defaultMessage: "Pool depth from: {value} m", + }, + { value: value } + ) + + case IndoorPoolDetails.DepthTo: + return intl.formatMessage( + { + defaultMessage: "Pool depth to: {value} m", + }, + { value: value } + ) + + case IndoorPoolDetails.Length: + return intl.formatMessage( + { + defaultMessage: "Pool length: {value} m", + }, + { value: value } + ) + case IndoorPoolDetails.Width: + return intl.formatMessage( + { + defaultMessage: "Pool width: {value} m", + }, + { value: value } + ) + /* TODO: Awaiting clarification from Content on how to handle these parts + case OutdoorPoolDetails.OpenMonthFrom: + if (type === HealthFacilitiesEnum.OutdoorPool) + return intl.formatMessage( + { + defaultMessage: "Open from: {value}", + }, + { value: value } + ) + case OutdoorPoolDetails.OpenMonthTo: + if (type === HealthFacilitiesEnum.OutdoorPool) + return intl.formatMessage( + { + defaultMessage: "Open to: {value}", + }, + { value: value } + )*/ + } + }) + .filter((d): d is string => !!d) + + case HealthFacilitiesEnum.Gym: + if ( + details.find((d) => d.name === ExternalGymDetails.ExternalGym) + ?.value === "False" + ) + return null + return details + .map(({ name, value }) => { + switch (name) { + case ExternalGymDetails.NameOfExternalGym: + return intl.formatMessage( + { + defaultMessage: "External gym: {value}", + }, + { value: value } + ) + case ExternalGymDetails.DistanceToExternalGym: + return intl.formatMessage( + { + defaultMessage: "Distance to gym: {value} m", + }, + { value: value } + ) + } + }) + .filter((d): d is string => !!d) + + default: + console.warn(`Unsupported type given: ${type}`) + } +} diff --git a/apps/scandic-web/types/components/hotelPage/facilities.ts b/apps/scandic-web/types/components/hotelPage/facilities.ts index 02aee0283..da88ac0c4 100644 --- a/apps/scandic-web/types/components/hotelPage/facilities.ts +++ b/apps/scandic-web/types/components/hotelPage/facilities.ts @@ -82,3 +82,29 @@ export const FacilityCardButtonText = { MEETINGS: "Read more", WELLNESS: "Read more", } as const + +export enum ExternalGymDetails { + NameOfExternalGym = "NameOfExternalGym", + DistanceToExternalGym = "DistanceToExternalGym", + ExternalGym = "ExternalGym", +} + +export enum IndoorPoolDetails { + Length = "Length", + Width = "Width", + DepthTo = "DepthTo", + DepthFrom = "DepthFrom", +} + +export enum OutdoorPoolDetails { + Length = "Length", + Width = "Width", + DepthTo = "DepthTo", + DepthFrom = "DepthFrom", + OpenMonthFrom = "OpenMonthFrom", + OpenMonthTo = "OpenMonthTo", +} + +export enum SaunaDetails { + SeparateMenAndWomen = "SeparateMenAndWomen", +}