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 && (
+
+
+ {details.map((item) => (
+ - {item}
+ ))}
+
+
+ )}
{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",
+}